/* Multi-Theme System Variables */
:root,
html[data-theme="light"] {
  --bg-page: #f8f9fa !important;
  --bg-card: #ffffff !important;
  --bg-glass: var(--bg-page) !important;
  --text-main: #333333 !important;
  --text-body: #4b5563 !important;
  --text-heading: #111827 !important;
  --text-muted: #6b7280 !important;
  --border-color: #e5e7eb !important;
  --color-primary: #2563eb !important;
  --color-accent: #8b5cf6 !important;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  --glass-border: rgba(0, 0, 0, 0.05) !important;
  --hover-bg: rgba(0, 0, 0, 0.05) !important;
  --shadow-overlay: rgba(255, 255, 255, 0.1) !important;

  /* Astra Overrides */
  --ast-global-color-0: var(--color-primary) !important;
  --ast-global-color-4: var(--bg-page) !important;
  --ast-global-color-5: var(--bg-card) !important;
}

html[data-theme="dark"] {
  --bg-page: #282c34 !important;
  --bg-card: #21252b !important;
  --bg-glass: var(--bg-page) !important;
  --text-main: #f3f4f6 !important;
  --text-body: #d1d5db !important;
  --text-heading: #ffffff !important;
  --text-muted: #9ca3af !important;
  --border-color: #3e4451 !important;
  --color-primary: #61afef !important;
  --color-accent: #c678dd !important;

  --shadow-sm: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  --glass-border: rgba(255, 255, 255, 0.05) !important;
  --hover-bg: rgba(255, 255, 255, 0.08) !important;
  --shadow-overlay: rgba(0, 0, 0, 0.1) !important;

  /* Astra Overrides */
  --ast-global-color-0: var(--color-primary) !important;
  --ast-global-color-4: var(--bg-page) !important;
  --ast-global-color-5: var(--bg-card) !important;
}

html[data-theme="sepia"] {
  --bg-page: #f4ecd8 !important;
  --bg-card: #faf4e8 !important;
  --bg-glass: var(--bg-page) !important;
  --text-main: #433422 !important;
  --text-body: #5c4a33 !important;
  --text-heading: #2d2011 !important;
  --text-muted: #8a7356 !important;
  --border-color: #dbc8a6 !important;
  --color-primary: #b26e33 !important;
  --color-accent: #8a5a44 !important;

  --shadow-sm: 0 2px 4px rgba(67, 52, 34, 0.05) !important;
  --shadow-md: 0 4px 12px rgba(67, 52, 34, 0.1) !important;
  --glass-border: rgba(67, 52, 34, 0.08) !important;
  --hover-bg: rgba(67, 52, 34, 0.05) !important;
  --shadow-overlay: rgba(67, 52, 34, 0.1) !important;

  /* Astra Overrides */
  --ast-global-color-0: var(--color-primary) !important;
  --ast-global-color-4: var(--bg-page) !important;
  --ast-global-color-5: var(--bg-card) !important;
} /* Global Font Settings */
:root {
  --font-size-base: 16px !important;
  --line-height-base: 1.75 !important;
}
/* One Dark Pro Theme - Global Dark Mode & High Contrast v2 */

/* 1. Global Background & Text */
body,
.site-content,
.ast-container,
.ast-plain-container,
.hfeed,
.site,
.ast-separate-container {
  background-color: var(--bg-page) !important;
  color: var(--text-main) !important;
  font-family: "Noto Sans KR", sans-serif !important;
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-base) !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.015em !important;
  /* Typography micro tuning */
}

/* ✨ 5. Custom Scrollbar Matching */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-page) !important;
  border-left: 1px solid var(--border-color);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  border: 2px solid var(--bg-page);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ⏱️ READING TIME UI */
.medinotes-reading-time {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.9rem !important;
  color: var(--text-muted) !important;
  margin-bottom: 30px !important;
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--hover-bg) !important;
  border-radius: 30px !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
}

.medinotes-reading-time:hover {
  background: var(--hover-bg) !important;
  border-color: var(--color-primary) !important;
  color: var(--text-main) !important;
}

/* 2. Header & Navigation (Unified Solid Background) */
header#masthead,
.ast-primary-header-bar,
.site-header,
.main-header-bar {
  background-color: var(--bg-page) !important;
  background: var(--bg-page) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: none !important;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease !important;
}

/* Prevent Astra builder child elements from stacking background layers */
header#masthead > *,
.site-header > *,
.main-header-bar > *,
.ast-primary-header-bar > *,
div[data-element="header-builder"],
.ast-builder-layout-element,
.site-header-primary-section-left,
.site-header-primary-section-right,
.ast-builder-grid-row,
.ast-main-header-bar-alignment,
.site-header-section-left,
.site-header-section-right,
.site-header-section-center,
.ast-builder-menu,
.main-navigation,
.main-header-menu,
.site-branding,
.site-logo-img-wrap,
.ast-site-identity {
  background-color: transparent !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.site-header *,
.main-header-bar * {
  transition: color 0.3s ease !important;
}
/* Mobile header specific */
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-mobile-header-wrap .ast-builder-menu-mobile {
  background-color: var(--bg-page) !important;
}
/* Mobile header specific */
.ast-mobile-header-wrap .ast-mobile-header-content {
  background-color: var(--bg-page) !important;
}
/* Mobile header specific */
.ast-mobile-header-wrap .ast-mobile-header-content {
  background-color: var(--bg-page) !important;
}
/* Menu Links - Top Level — 테마에 맞는 메인 텍스트 색상 사용 */
.main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-link,
.ast-header-break-point .main-header-bar .main-header-menu .menu-link {
  color: var(--text-main) !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

/* 메뉴 호버 시: 이미 진한 상태이므로 살짝 흐려지게(Opacity) 변경 */
.main-header-menu .menu-link:hover {
  opacity: 0.6 !important;
  color: var(--text-main) !important;
}

/* 📱 MOBILE MENU - THE REDESIGN (Dark Theme + Compact) */
/* Force dark background on ALL possible Astra mobile layers */
#ast-mobile-popup,
#ast-mobile-popup .ast-mobile-popup-inner,
#ast-mobile-popup .ast-mobile-popup-content,
.ast-mobile-popup-drawer,
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-header-break-point .ast-mobile-header-wrap,
.ast-header-break-point .ast-mobile-header-content,
.ast-mobile-popup-drawer .main-header-menu,
.ast-mobile-popup-drawer .main-navigation,
.ast-builder-menu-mobile .main-navigation,
.ast-builder-menu-mobile .main-header-menu,
.ast-mobile-header-content .main-header-bar-navigation {
  background-color: var(--bg-card) !important;
  /* Top-level force dark */
  background-image: none !important;
  color: var(--text-heading) !important;
}

/* 📏 DRAWER SIZE & BORDERS */
body.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-inner {
  max-width: 80% !important;
  width: 80% !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  background-color: var(--bg-page) !important;
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.9) !important;
  border-left: 1px solid var(--glass-border) !important;
}

/*  alphabet COMPACT LINKS - Force background transparent to inherit parent dark */
body.ast-header-break-point .main-header-menu .menu-item .menu-link,
body.ast-header-break-point .ast-mobile-header-content .menu-link,
body.ast-header-break-point .ast-mobile-popup-drawer .menu-item .menu-link {
  color: var(--text-heading) !important;
  padding: 10px 20px !important;
  font-size: 0.95rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
  background-color: transparent !important;
  /* Ensure no white box */
  background-image: none !important;
}

/* Ensure LI containers don't have their own backgrounds */
body.ast-header-break-point .main-header-menu .menu-item,
body.ast-header-break-point .ast-mobile-popup-drawer .menu-item {
  background: transparent !important;
}

/* 🏹 THE "WORLD-CLASS" CHEVRON (Sub-menu Toggles) */
body.ast-header-break-point .ast-menu-toggle,
body.ast-header-break-point .ast-mobile-popup-content .ast-menu-toggle {
  width: 34px !important;
  height: 34px !important;
  line-height: normal !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--glass-border) !important;
  border-radius: 50% !important;
  /* Circular for premium feel */
  top: 50% !important;
  transform: translateY(-50%) !important;
  /* Perfect vertical centering */
  right: 12px !important;
  color: var(--text-heading) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid var(--hover-bg) !important;
}

/* Hide the default SVG/icon to use our CSS Chevron */
body.ast-header-break-point .ast-menu-toggle .ast-icon,
body.ast-header-break-point .ast-menu-toggle svg {
  display: none !important;
}

/* Create a custom CSS Chevron (V-shape) */
body.ast-header-break-point .ast-menu-toggle::after {
  content: "" !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
  /* Facing down */
  margin-top: -2px !important;
  transition: transform 0.3s ease !important;
}

/* Rotation Animation when expanded */
body.ast-header-break-point .ast-submenu-expanded > .ast-menu-toggle {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 10px rgba(97, 175, 239, 0.3) !important;
}

body.ast-header-break-point .ast-submenu-expanded > .ast-menu-toggle::after {
  transform: rotate(-135deg) !important;
  /* Facing up */
  margin-top: 2px !important;
}

/* Hover Effect for Desktop/Tablet check */
body.ast-header-break-point .ast-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

/* Toggle & Close Icons Shadow/Color */
.ast-header-break-point .menu-toggle-close,
.ast-header-break-point .ast-mobile-popup-close-focus-indicator {
  color: var(--text-heading) !important;
  font-size: 18px !important;
}

/* 🎯 SMOOTH SCROLL & TOC */
html {
  scroll-behavior: smooth !important;
}

.medinotes-toc-container {
  background: var(--bg-page) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin: 30px 0 !important;
  backdrop-filter: blur(15px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.medinotes-toc-container.collapsed .toc-list {
  display: none !important;
}

.toc-header {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0px !important;
  border-bottom: none !important;
}

.medinotes-toc-container:not(.collapsed) .toc-header {
  margin-bottom: 20px !important;
  padding-bottom: 15px !important;
  border-bottom: 1px solid var(--hover-bg) !important;
}

.toc-icon {
  margin-right: 10px !important;
  font-size: 1.2rem !important;
}

.toc-title {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--text-heading) !important;
  margin-right: auto !important;
  letter-spacing: -0.02em !important;
}

.toc-toggle {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--hover-bg) !important;
  color: var(--text-muted) !important;
  font-size: 0.75rem !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
}

.toc-toggle:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--text-heading) !important;
}

.toc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.toc-item {
  margin-bottom: 10px !important;
  line-height: 1.4 !important;
}

.toc-item a {
  color: var(--text-main) !important;
  text-decoration: none !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
  display: block !important;
}

.toc-item a:hover {
  color: var(--color-primary) !important;
  transform: translateX(5px) !important;
}

.toc-level-3 {
  padding-left: 20px !important;
}

.toc-level-3 a {
  font-size: 0.9rem !important;
  opacity: 0.8 !important;
}

/* Anchor Offset Fix (for Sticky Header) */
[id^="section-"] {
  scroll-margin-top: 100px !important;
}

/* 📊 TABLES: HIGH VISIBILITY - ONE DARK STYLE */
.entry-content table,
table {
  border-collapse: collapse !important;
  width: 100% !important;
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  margin-bottom: 25px !important;
  color: var(--text-main) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

table th,
table td {
  padding: 14px 18px !important;
  border: 1px solid var(--border-color) !important;
  text-align: left !important;
  font-size: 0.95rem !important;
}

table th {
  background-color: var(--glass-border) !important;
  color: var(--text-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

table tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

table tr:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* 📈 PERFORMANCE: FONT SWAP ENFORCEMENT (Removed invalid @font-face rule) */

/* 🚨 DROPDOWN MENU FIX (Sub-menu) */
.main-header-menu .sub-menu,
.main-header-menu .children,
.ast-header-break-point .main-header-menu .sub-menu {
  background-color: var(--bg-card) !important;
  /* Dark Background */
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  z-index: 9999999 !important;
  /* Higher than noise/progress bar */
}

.main-header-menu .sub-menu .menu-item .menu-link,
.main-header-menu .children .menu-item .menu-link {
  color: var(--text-heading) !important;
  /* White Text */
  background-color: transparent !important;
  padding: 14px 20px !important;
  /* Increased padding */
  line-height: 1.5 !important;
  border-bottom: 1px solid var(--glass-border) !important;
  /* Subtle separator */
}

.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .children .menu-item:hover > .menu-link {
  background-color: var(--bg-glass) !important;
  /* Hover Background */
  color: var(--color-primary) !important;
}

/* 3. Headings — Premium Color Hierarchy */
h3,
h4,
h5,
h6,
.widget-title,
.site-title a {
  color: var(--text-heading) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* ✨ 글 제목 (H1) — 심플하고 명확한 텍스트 렌더링 (가독성 최우선) */
h1,
.entry-title,
.entry-title a {
  color: var(--text-heading) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  /* 기존에 있던 그라데이션, 투명화, 그림자 효과 모두 제거 */
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  filter: none !important;
}

/* 호버 시 은은한 포인트 컬러 */
.entry-title a:hover {
  color: var(--color-primary) !important;
  background: none !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  filter: none !important;
}

/* 🔍 SEARCH HIGHLIGHT: 검색어 하이라이트 가독성 공사 - 은은한 파스텔 톤으로 개선 */
mark,
.entry-title mark,
h1 mark,
h2 mark {
  background-color: rgba(255, 249, 196, 0.9) !important;
  /* 은은한 파스텔 크림 옐로우 */
  color: var(--bg-card) !important;
  /* 어두운 차콜색으로 세련된 가독성 확보 */
  -webkit-text-fill-color: var(--bg-card) !important;
  /* 그라데이션 해제 */
  padding: 1px 4px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  /* 촌스러운 그림자 제거 */
  font-weight: 700 !important;
}

/* 🚀 SMART STICKY SIDEBAR: 이중 스크롤바 제거 및 반응형 고정 
           사이드바 내부 스크롤을 없애고, 본문 스크롤에 맞춰 자연스럽게 내려가다가 
           사이드바 끝에 다다르면 화면 하단에 고정되는 최신 CSS 기법 */
.sidebar-main,
.ast-no-sidebar-scroll .sidebar-main {
  position: sticky !important;
  /* 사이드바가 화면보다 짧으면 위상단 40px 고정, 길면 다 스크롤한 뒤 하단 40px 여백 둔 채 고정 */
  top: min(40px, calc(100vh - 100% - 40px)) !important;
  max-height: none !important;
  /* 높이 제한 해제 */
  overflow-y: visible !important;
  /* 내부 스크롤바 완전 제거 */
  transition: top 0.3s ease !important;
}

/* ✨ SIDEBAR LINKS: 프리미엄 다크 테마 디자인 (촌스러운 파랑/분홍색 교체) */
/* 선택자 우선순위를 극대화하여 캐시/테마 설정 무시 강제 적용 */
#secondary .widget a,
.sidebar-main .widget ul li a,
.widget-area .widget ul li a,
.widget-area .wp-block-latest-posts li a,
.widget-area .wp-block-categories-list li a,
.widget-area .wp-block-archives-list li a,
aside#secondary .widget ul li a {
  color: var(--text-body) !important;
  /* 눈이 편안한 세련된 실버 그레이 */
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: inline-block !important;
  /* transform 이펙트를 위해 필요 */
}

/* 마우스 호버 시 고급스러운 이펙트 */
#secondary .widget a:hover,
.sidebar-main .widget ul li a:hover,
.widget-area .widget ul li a:hover,
.widget-area .wp-block-latest-posts li a:hover,
.widget-area .wp-block-categories-list li a:hover,
.widget-area .wp-block-archives-list li a:hover,
aside#secondary .widget ul li a:hover {
  color: #81d8cf !important;
  /* 사이트 포인트 컬러인 소프르 세이지 민트 */
  transform: translateX(6px) !important;
  /* 호버 시 우측으로 살짝 이동하는 반응형 이펙트 */
  text-shadow: 0 0 10px rgba(129, 216, 207, 0.3) !important;
  /* 은은한 글로우 빛 효과 */
}

/* 위젯 리스트 항목간의 미세한 구분선 추가 (깔끔함 증가) */
#secondary .widget ul li,
.sidebar-main .widget ul li,
.widget-area .widget ul li,
.widget-area .wp-block-latest-posts li,
.widget-area .wp-block-categories-list li,
.widget-area .wp-block-archives-list li,
aside#secondary .widget ul li {
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: border-color 0.3s ease !important;
}

#secondary .widget ul li:hover,
.sidebar-main .widget ul li:hover,
.widget-area .widget ul li:hover,
.widget-area .wp-block-latest-posts li:hover,
.widget-area .wp-block-categories-list li:hover,
.widget-area .wp-block-archives-list li:hover,
aside#secondary .widget ul li:hover {
  border-bottom-color: rgba(129, 216, 207, 0.15) !important;
  /* 호버 시 하단 선도 살짝 민트빛 반영 */
}

#secondary .widget ul li:last-child,
.sidebar-main .widget ul li:last-child,
.widget-area .widget ul li:last-child,
.widget-area .wp-block-latest-posts li:last-child,
.widget-area .wp-block-categories-list li:last-child,
.widget-area .wp-block-archives-list li:last-child,
aside#secondary .widget ul li:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 💎 PREMIUM FLOATING HEADER: 글래스모피즘 & 플로팅 캡슐 디자인 */
/* 헤더 전체 래퍼 투명화 및 여백 생성 */
.site-header,
.ast-main-header-wrap,
.ast-primary-header-bar,
.main-header-bar {
  background-color: transparent !important;
  border-bottom: none !important;
  padding: 15px 20px 0 20px !important;
  /* 상단 및 양옆 여백 */
  position: sticky !important;
  top: 0;
  z-index: 9999 !important;
}

/* 실제 헤더 모양을 만드는 내부 박스 (플로팅 캡슐) */
header.site-header .ast-builder-grid-row-container-inner,
.ast-main-header-bar-alignment-regular .main-header-bar {
  background: rgba(22, 24, 29, 0.75) !important;
  /* 다크 네이비/차콜 반투명 배경 */
  backdrop-filter: blur(16px) saturate(180%) !important;
  /* 애플 스타일 글래스모피즘 강력한 블러 */
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  /* 사파리 지원 */
  border-radius: 20px !important;
  /* 둥근 캡슐 모서리 */
  border: 1px solid var(--hover-bg) !important;
  /* 매우 얇고 섬세한 유리 테두리 반사광 */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2) !important;
  /* 깊이감을 주는 그림자 */
  margin: 0 auto !important;
  max-width: 1240px !important;
  /* 최대 너비 제한으로 양옆 여백 유지 */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  /* 스크롤 시 부드러운 애니메이션 */
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* 스크롤 다운 시 애니메이션 (Astra 테마가 스크롤 시 body에 붙이는 클래스 활용 혹은 CSS 자체 점진적 효과) */
.ast-header-sticked header.site-header .ast-builder-grid-row-container-inner,
.ast-header-sticked .main-header-bar {
  background: rgba(18, 20, 24, 0.85) !important;
  /* 찰싹 붙었을 때 약간 더 진하게 */
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  border-radius: 12px !important;
  /* 스크롤 시엔 약간 덜 둥글게 */
  max-width: 100% !important;
  /* 위로 붙으면 가로로 쫙 펴짐 */
  margin-top: -15px !important;
  /* 위쪽 패딩을 상쇄하여 화면 끝에 붙음 */
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

@media (max-width: 921px) {
  /* 모바일/태블릿: 여백 최소화 및 모바일 메뉴 버튼 정리 */
  .site-header,
  .ast-main-header-wrap,
  .ast-primary-header-bar,
  .main-header-bar {
    padding: 10px 10px 0 10px !important;
  }

  header.site-header .ast-builder-grid-row-container-inner,
  .ast-main-header-bar-alignment-regular .main-header-bar {
    border-radius: 16px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* 💎 PREMIUM FOOTER DESIGN: 다크 뎁스 & 미니멀 타이포그래피 */
footer.site-footer {
  background: var(--bg-page) !important;
}

/* 아스트라 테마 푸터 내부 컨테이너들의 잔여기본색 싹 지우기 및 레이아웃 정리 */
footer.site-footer,
.site-footer,
#colophon,
.site-primary-footer-wrap,
.site-below-footer-wrap,
.site-footer .ast-builder-grid-row-container,
.site-footer .ast-builder-grid-row-container-inner,
.site-footer .ast-builder-grid-row,
.site-footer .site-info {
  background-color: var(--bg-page) !important;
  background: var(--bg-page) !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 30px 20px !important;
  /* 시원하고 넉넉한 상하 여백을 이너 박스에 줌 */
}

/* 텍스트 요소(카피라이트 등) 고급화 */
footer.site-footer,
footer.site-footer a,
footer.site-footer .ast-footer-copyright {
  color: var(--text-body) !important;
  /* 눈이 편안한 실버 그레이 */
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: 1.5px !important;
  /* 자간을 넓혀 고급 명품 브랜드 같은 타이포그래피 완성 */
  text-align: center !important;
}

/* 푸터 상단에만 빛나는 얇은 그라데이션 선 (가운데서 양끝으로 우아하게 흐려짐) */
footer.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(129, 216, 207, 0.5),
    transparent
  );
  /* 세이지 민트 그라데이션 */
  z-index: 10;
}

/* 🌿 소제목 (H2) — 소프트 세이지 민트 (모든 글에 적용) */
h2,
.entry-content h2,
.entry-content h2.wp-block-heading,
.ast-article-single h2,
h2.wp-block-heading {
  color: #81d8cf !important;
  -webkit-text-fill-color: #81d8cf !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* 🏷️ 카테고리/태그 레이블 — 소프트 로즈골드 */
.cat-links a,
.entry-meta .cat-links a,
.post-categories a,
a[rel="category tag"] {
  color: #d4a0a0 !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.cat-links a:hover,
a[rel="category tag"]:hover {
  color: #f0c8b8 !important;
}

/* 🖼️ 이미지 블록 빈 공간 제거 (워드프레스 기본 마진 오버라이드) */
.entry-content figure,
.entry-content .wp-block-image,
.entry-content .wp-block-gallery,
.entry-content .wp-caption {
  margin-top: 1.2em !important;
  margin-bottom: 1.2em !important;
}

/* 이미지 자체 — baseline gap 제거 + 불필요한 공백 방지 */
.entry-content img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* 이미지 캡션 — 간격 최소화 */
.entry-content figcaption,
.entry-content .wp-caption-text {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  font-size: 0.85rem !important;
  color: rgba(171, 178, 191, 0.7) !important;
  text-align: center !important;
}

/* 에디터에서 생긴 빈 p 태그 제거 (이미지 근처 빈 줄) */
.entry-content p:empty {
  display: none !important;
}

/* 이미지 앞뒤 paragraph도 과도한 마진 조절 */
.entry-content p + figure,
.entry-content p + .wp-block-image {
  margin-top: 1em !important;
}

.entry-content figure + p,
.entry-content .wp-block-image + p {
  margin-top: 1em !important;
}

.blog .entry-title,
.archive .entry-title,
.search .entry-title {
  font-size: 1.25rem !important;
  margin-bottom: 0.5em !important;
}

/* 4. Cards (Blog Posts, Sidebar, Comments) */
.blog .post,
.archive .post,
.search .post,
.single .post,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.widget,
.ast-sidebar-widget,
.comments-area,
.ast-comment-list li {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  /* Deep shadow */
  padding: 24px !important;
  /* Ensure padding on cards */
  color: var(--text-main) !important;
}

/* 🚨 BLOCKQUOTE FIX (Citation) */
blockquote,
.wp-block-quote,
.entry-content blockquote {
  background-color: var(--bg-glass) !important;
  color: var(--text-main) !important;
  border-left: 5px solid #d4a76a !important;
  /* 골드 액센트 */
  padding: 16px 24px !important;
  margin: 24px 0 !important;
  border-radius: 4px !important;
  font-style: italic !important;
}

blockquote p,
.wp-block-quote p {
  color: var(--text-main) !important;
  margin-bottom: 0 !important;
}

blockquote cite {
  color: var(--text-muted) !important;
  font-style: normal !important;
  font-size: 0.9em !important;
  margin-top: 8px !important;
  display: block !important;
}

/* 🚨 RELATED POSTS FIX - V2 (Background Removal) */
.ast-related-posts-wrap,
.ast-related-post,
.ast-related-posts-title-section,
.ast-related-posts-inner-section,
.ast-related-post-content {
  background-color: var(--bg-card) !important;
  background-image: none !important;
  /* Kill any gradients */
  color: var(--text-main) !important;
  box-shadow: none !important;
}

/* Ensure the main wrapper is dark too if needed */
.ast-related-posts-container {
  background-color: transparent !important;
}

.ast-related-posts-title,
.ast-related-post-title,
.ast-related-post-title a {
  color: var(--text-heading) !important;
  font-weight: 600 !important;
  background-color: transparent !important;
}

.ast-related-post-meta {
  color: var(--text-muted) !important;
}

/* 🚨 POST NAVIGATION FIX (Prev/Next) */
.post-navigation .nav-links {
  background-color: var(--bg-card) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  border: 1px solid var(--border-color) !important;
  margin-top: 30px !important;
}

.post-navigation a {
  color: var(--text-main) !important;
  font-weight: 600 !important;
  transition: color 0.2s !important;
}

.post-navigation a:hover {
  color: var(--color-primary) !important;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
  color: var(--text-muted) !important;
  font-size: 0.9em !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 5px !important;
  display: block !important;
}

.post-navigation .ast-post-nav-title {
  color: var(--text-heading) !important;
  font-size: 1.1em !important;
}

/* 5. Inputs & Search (Dark Fields) */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
  background-color: var(--bg-glass) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
}

/* 🚨 SEARCH WIDGET FIX - V2 (Exhaustive & Forceful) */
.widget_search .search-form,
.ast-header-search .search-form,
.wp-block-search__button-inside .wp-block-search__inside-wrapper,
form.search-form,
.ast-search-menu-icon .search-form,
.site-header .search-form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 블록 에디터 검색 위젯 inner wrapper (gap 강제 적용) */
.wp-block-search__inside-wrapper {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Input Field */
.widget_search .search-field,
.ast-header-search .search-field,
.wp-block-search .wp-block-search__input,
form.search-form .search-field,
input[type="search"] {
  flex-grow: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  /* Allow shrinking */
  margin-bottom: 0 !important;
  height: 46px !important;
  /* Slightly taller */
  color: #e5e7eb !important;
  background-color: var(--bg-glass) !important;
  border: 1px solid var(--border-color) !important;
  padding: 0 16px !important;
}

/* Submit Button */
.widget_search .search-submit,
.ast-header-search .search-submit,
.wp-block-search .wp-block-search__button,
form.search-form .search-submit,
button[type="submit"].search-submit {
  flex-shrink: 0 !important;
  width: auto !important;
  min-width: 80px !important;
  /* Minimum width */
  padding: 0 24px !important;
  height: 46px !important;
  white-space: nowrap !important;
  background-color: var(--color-primary) !important;
  color: var(--bg-card) !important;
  border-radius: 8px !important;
  line-height: 46px !important;
  margin: 0 !important;
  margin-left: 4px !important;
  border: none !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
}

/* 검색 버튼 호버 효과 */
.widget_search .search-submit:hover,
.wp-block-search .wp-block-search__button:hover,
button[type="submit"].search-submit:hover {
  background-color: #7dc4ff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(97, 175, 239, 0.3) !important;
}

/* 검색 입력칸 border-radius */
.widget_search .search-field,
.wp-block-search .wp-block-search__input,
input[type="search"] {
  border-radius: 8px !important;
}

/* Placeholder Color */
::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

/* 🚨 SEARCH LABEL FIX (The "Search" text above input) */
.widget_search label,
.wp-block-search__label,
form.search-form label,
.ast-search-menu-icon .search-form label {
  color: var(--text-heading) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* 6. Buttons (Primary Blue) */
button,
input[type="submit"],
.button,
.ast-button,
.wp-block-button__link {
  background-color: var(--color-primary) !important;
  color: var(--bg-card) !important;
  /* Dark text on bright button for contrast */
  font-weight: 700 !important;
  border-radius: 4px !important;
  border: none !important;
}

/* 7. Content Links & Meta - NUCLEAR RESET */
.entry-content a {
  color: var(--color-primary) !important;
  text-decoration: none !important;
}

.entry-content a:hover {
  color: var(--color-accent) !important;
  text-decoration: underline !important;
}

/* 🚨 FORCE RESET ALL CONTENT TEXT (The Nuclear Option) */
.entry-content p,
.entry-content li,
.entry-content span,
.entry-content div,
.entry-content b,
.entry-content strong,
.entry-content em,
.entry-content i {
  color: var(--text-main) !important;
}

/* Exception for links and inputs */
.entry-content a,
.entry-content input,
.entry-content button,
.entry-content select,
.entry-content textarea {
  color: inherit;
  /* Let them keep their specific styles */
}

.entry-content a {
  color: var(--color-primary) !important;
}

.entry-meta,
.read-more a,
.ast-blog-single-element {
  color: var(--text-muted) !important;
}

/* 8. Footer - FINAL DARK MODE v2 (Comprehensive) */
.site-footer,
.ast-small-footer,
.ast-footer-copyright,
.ast-footer-overlay,
.ast-hfb-header .site-footer,
.ast-small-footer-wrap,
.ast-footer-copyright-wrap,
.ast-builder-grid-row-container.ast-builder-grid-row-tablet-3-equal
  .ast-builder-grid-row,
.site-below-footer-wrap,
.ast-builder-footer-grid-columns {
  background-color: var(--bg-card) !important;
  background-image: none !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
}

.ast-footer-copyright,
.ast-footer-copyright p,
.ast-footer-copyright a {
  color: var(--text-muted) !important;
  /* Specific Light Gray */
}

/* 🚨 CATCH-ALL BACKGROUND FIX (The Blue Killer) */
.ast-separate-container .ast-article-inner,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container,
.ast-container,
.site-content,
.ast-single-related-posts-container,
.ast-related-posts-wrapper,
.ast-related-posts-inner-section {
  background-color: transparent !important;
  /* Let body bg show through */
  background-image: none !important;
}

/* 🚨 META COLOR FIX (Writer/Date) */
.entry-meta,
.entry-meta * {
  color: var(--text-muted) !important;
  /* Default Meta Gray */
}

.entry-meta a,
.posted-by a,
.posted-on a,
.cat-links a,
.tags-links a,
.widget_recent_entries .post-date {
  color: var(--color-primary) !important;
  /* Pretty One Dark Blue #61AFEF */
  font-weight: 500 !important;
  text-decoration: none !important;
}

.entry-meta a:hover,
.posted-by a:hover,
.posted-on a:hover,
.cat-links a:hover,
.tags-links a:hover {
  color: var(--color-accent) !important;
  /* Purple on Hover */
  text-decoration: underline !important;
}

/* 🚨 SIDEBAR WIDGET LINKS FIX */
.secondary .widget a,
.sidebar-main .widget a,
.ast-sidebar-widget .widget a,
.widget_categories li a,
.widget_archive li a,
.widget_meta li a,
.widget_pages li a,
.widget_nav_menu li a {
  color: var(--color-primary) !important;
  /* One Dark Blue */
  text-decoration: none !important;
}

.secondary .widget a:hover,
.sidebar-main .widget a:hover,
.ast-sidebar-widget .widget a:hover {
  color: var(--color-accent) !important;
  /* Purple on Hover */
  text-decoration: underline !important;
}

/* 🚨 ARCHIVE & CATEGORY PAGE FIX */
.ast-archive-description,
.page-header {
  background-color: var(--bg-card) !important;
  padding: 30px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  margin-bottom: 30px !important;
  color: var(--text-main) !important;
}

.ast-archive-description .page-title,
.page-header .page-title {
  color: var(--text-heading) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

.ast-archive-description p,
.taxonomy-description p {
  color: var(--text-muted) !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
}

/* 🚨 GRID POST TITLES FIX (Too Dark) */
.blog .entry-title a,
.archive .entry-title a,
.search .entry-title a {
  color: var(--text-heading) !important;
  /* Pure White */
  font-weight: 600 !important;
}

.blog .entry-title a:hover,
.archive .entry-title a:hover,
.search .entry-title a:hover {
  color: var(--color-primary) !important;
  /* Blue on Hover */
}

/* Body is already dark var(--bg-page), so transparent containers will look dark */

/* 🚨 MEDICAL DISCLAIMER (User Request) */
.medical-disclaimer-box {
  background-color: var(--bg-glass) !important;
  /* One Dark Gutter */
  color: var(--text-body) !important;
  /* One Dark Muted Text */
  border-left: 5px solid #e5c07b !important;
  /* One Dark Yellow (Warning) */
  border-top: 1px solid #3e4451 !important;
  border-right: 1px solid #3e4451 !important;
  border-bottom: 1px solid #3e4451 !important;
  padding: 24px !important;
  margin-top: 40px !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

.medical-disclaimer-box .disclaimer-icon {
  font-size: 1.8rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  color: #e5c07b !important;
  /* Icon Yellow */
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(229, 192, 123, 0.1) !important;
  border-radius: 50% !important;
}

.medical-disclaimer-box .disclaimer-text {
  flex-grow: 1 !important;
}

.medical-disclaimer-box strong {
  color: var(--text-heading) !important;
  /* White Emphasis */
  font-weight: 700 !important;
  margin-right: 4px !important;
}

/* 🏛️ PHASE 3: NOISE TEXTURE OVERLAY */
body:before {
  content: "" !important;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  z-index: 999999 !important;
  opacity: 0.04 !important;
  /* Extremely subtle */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E") !important;
}

/* 🏛️ PHASE 3: CINEMATIC POST HEADER */
.single .entry-header {
  padding: 80px 0 60px 0 !important;
  text-align: center !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.single .entry-title {
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 20px !important;
  text-shadow: 0 4px 10px var(--shadow-overlay) !important;
}

.single .entry-meta {
  justify-content: center !important;
  font-size: 1rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* 🏛️ PHASE 3: SKELETON LOADING ANIMATION */
.medinotes-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-card) 25%,
    var(--bg-glass) 50%,
    var(--bg-card) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeleton-loading 1.5s infinite !important;
  border-radius: 8px !important;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* 🏛️ PHASE 3: SMOOTH GLOBAL TRANSITION */
body {
  opacity: 0;
  transition: opacity 0.6s ease-in-out !important;
}

body.is-loaded {
  opacity: 1;
}

/* 🌌 WORLD-CLASS PHASE 2: CUSTOM SELECTION */
::selection {
  background-color: var(--color-primary) !important;
  color: var(--text-heading) !important;
}

/* 🌌 WORLD-CLASS PHASE 2: BACKGROUND MESH EFFECT */
body {
  background-image:
    radial-gradient(at 0% 0%, rgba(97, 175, 239, 0.05) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(198, 120, 221, 0.05) 0px, transparent 50%) !important;
  background-attachment: fixed !important;
}

/* 🌌 WORLD-CLASS PHASE 2: GLASSMORPHISM */
.site-header,
.main-header-bar,
.ast-primary-header-bar {
  background-color: var(--bg-page) !important;
  /* Semi-transparent */
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
}

/* 🌌 WORLD-CLASS PHASE 2: BUTTON GLOW & HOVER */
button,
input[type="submit"],
.search-submit,
.wp-block-button__link {
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 14px 0 rgba(97, 175, 239, 0.3) !important;
}

button:hover,
input[type="submit"]:hover,
.search-submit:hover,
.wp-block-button__link:hover {
  box-shadow: 0 6px 20px rgba(97, 175, 239, 0.5) !important;
  transform: scale(1.02) !important;
}

/* 🌌 WORLD-CLASS PHASE 2: SCROLL REVEAL (HIDDEN STATE) */
.medinotes-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.medinotes-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 🚨 PREMIUM FINISH: CUSTOM DARK SCROLLBAR */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-card) !important;
}

::-webkit-scrollbar-thumb {
  background: #3e4451 !important;
  border-radius: 5px !important;
  border: 2px solid var(--bg-card) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #4b5263 !important;
}

/* 📌 STICKY SIDEBAR: LAST WIDGET FIX */
@media (min-width: 922px) {
  #secondary,
  .sidebar-main {
    height: 100% !important;
  }

  .secondary .widget:last-child,
  .sidebar-main .widget:last-child,
  .ast-sidebar-widget .widget:last-child {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 120px !important;
    /* Sticky Bar offset */
    z-index: 99 !important;
  }
}

/* 🔠 CLASSIC DROP CAP (Disabled due to formatting bug with H2) */
/*
        .single .entry-content>p:first-of-type::first-letter {
            font-size: 3.8em !important;
            font-weight: 800 !important;
            float: left !important;
            line-height: 0.85 !important;
            margin: 0.1em 0.1em 0 0 !important;
            color: var(--color-primary) !important;
            text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2) !important;
            font-family: serif !important;
        }
        */

/* 🚀 HIDE ASTRA DEFAULT TOP BUTTON (The blue square one) */
#ast-scroll-top,
.ast-scroll-top,
.ast-scroll-top-icon,
.ast-scroll-to-top-right,
.ast-scroll-to-top-left {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 🚀 CINEMATIC TOP BUTTON */
#medinotes-top-btn {
  position: fixed !important;
  right: 30px !important;
  bottom: 30px !important;
  width: 50px !important;
  height: 50px !important;
  background: var(--bg-glass) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--hover-bg) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--color-primary) !important;
  z-index: 999997 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

#medinotes-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1) !important;
}

#medinotes-top-btn:hover {
  background: rgba(97, 175, 239, 0.2) !important;
  color: var(--text-heading) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 40px rgba(97, 175, 239, 0.3) !important;
}

#medinotes-top-btn svg {
  width: 24px !important;
  height: 24px !important;
  transition: transform 0.3s ease !important;
}

#medinotes-top-btn:hover svg {
  transform: translateY(-2px) !important;
}

@media (max-width: 768px) {
  #medinotes-top-btn {
    right: 20px !important;
    bottom: 80px !important;
    /* Avoid overlap with mobile share bar if any */
  }
}

::-webkit-scrollbar-track {
  background: var(--bg-card) !important;
}

::-webkit-scrollbar-thumb {
  background: #3e4451 !important;
  border-radius: 5px;
  border: 2px solid var(--bg-card);
}

::-webkit-scrollbar-thumb:hover {
  background: #61afef !important;
}

/* 🚨 PREMIUM FINISH: HEADING DESIGN */
h2 {
  position: relative;
  padding-left: 15px !important;
  border-left: 4px solid var(--color-primary) !important;
  margin-top: 2.2em !important;
  margin-bottom: 1.2em !important;
  font-weight: 700 !important;
}

h3 {
  border-bottom: 1px dashed #3e4451 !important;
  padding-bottom: 10px !important;
  margin-top: 1.8em !important;
  margin-bottom: 1em !important;
  font-weight: 700 !important;
}

h4 {
  color: #61afef !important;
  /* One Dark Blue */
  font-size: 1.25em !important;
  font-weight: 700 !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.8em !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

h4::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(97, 175, 239, 0.4);
}

/* 📋 CINEMATIC LISTS (UL/OL) */
.single .entry-content ul {
  list-style: none !important;
  padding-left: 5px !important;
  margin: 1.5em 0 !important;
}

.single .entry-content ul li {
  position: relative !important;
  padding-left: 28px !important;
  margin-bottom: 12px !important;
  line-height: 1.6 !important;
}

.single .entry-content ul li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  color: var(--color-primary) !important;
  font-weight: 900 !important;
  font-size: 1.1em !important;
  background: rgba(97, 175, 239, 0.1) !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
}

.single .entry-content ol {
  list-style: none !important;
  counter-reset: medinotes-counter !important;
  padding-left: 5px !important;
  margin: 1.5em 0 !important;
}

.single .entry-content ol li {
  counter-increment: medinotes-counter !important;
  position: relative !important;
  padding-left: 35px !important;
  margin-bottom: 15px !important;
  line-height: 1.6 !important;
}

.single .entry-content ol li::before {
  content: counter(medinotes-counter) !important;
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  background: var(--color-primary) !important;
  color: var(--bg-card) !important;
  font-weight: 700 !important;
  font-size: 0.85em !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 10px rgba(97, 175, 239, 0.3) !important;
}

/* 🚨 PREMIUM FINISH: MICRO-INTERACTIONS */
/* Smooth link transitions */
a {
  transition: all 0.25s ease-in-out !important;
}

/* Card Lift-up Animation */
.blog .post,
.archive .post,
.search .post,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.widget,
.ast-sidebar-widget {
  transition:
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s ease !important;
}

.blog .post:hover,
.archive .post:hover,
.search .post:hover,
.widget:hover,
.ast-sidebar-widget:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4) !important;
}

/* 🚨 PREMIUM FINISH: READING PROGRESS BAR */
#medinotes-progress-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.1);
  z-index: 999998;
  pointer-events: none !important;
  /* Critical: Prevent blocking menu clicks */
}

#medinotes-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #d4a76a, #f6e8c8) !important;
  width: 0%;
  box-shadow: 0 0 10px rgba(212, 167, 106, 0.5);
  transition: width 0.1s ease-out;
}

/* 🚨 PREMIUM FINISH: TABLE OF CONTENTS (TOC) STYLING */
.toc_container,
#toc_container,
.wp-block-table-of-contents {
  background-color: var(--bg-glass) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin: 24px 0 !important;
}

.toc_title {
  color: var(--text-heading) !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding-bottom: 10px !important;
  margin-bottom: 15px !important;
}

.toc_list a {
  color: var(--text-body) !important;
  font-size: 0.95rem !important;
}

.toc_list a:hover {
  color: var(--color-primary) !important;
  padding-left: 5px;
}

/* 🚨 BREADCRUMBS STYLING */

/* 🚨 BREADCRUMBS STYLING */
.medinotes-breadcrumbs {
  font-size: 0.85rem !important;
  color: var(--text-muted) !important;
  margin-bottom: 12px !important;
}

.medinotes-breadcrumbs ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.medinotes-breadcrumbs li {
  display: inline-flex !important;
  align-items: center !important;
}

.medinotes-breadcrumbs li.separator {
  margin: 0 8px !important;
  color: #4b5563 !important;
  /* Darker grey for separator */
  user-select: none !important;
}

.medinotes-breadcrumbs a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  box-shadow: none !important;
}

.medinotes-breadcrumbs a:hover {
  color: #61afef !important;
  /* One Dark Blue point color */
}

.medinotes-breadcrumbs li.current-item {
  color: #d1d5db !important;
  /* Slightly brighter for current item */
  font-weight: 500 !important;
}

/* 🚀 CINEMATIC SEARCH MODAL STYLES */
.medinotes-search-overlay {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-glass) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  z-index: 9999999 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 10vh !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  transform: scale(1.05) !important;
}

.medinotes-search-overlay.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: scale(1) !important;
}

.search-modal-container {
  width: 90% !important;
  max-width: 800px !important;
  background: var(--bg-glass) !important;
  border: 1px solid var(--hover-bg) !important;
  border-radius: 20px !important;
  padding: 40px !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
}

.search-header {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-bottom: 30px !important;
}

#medinotes-search-input {
  flex-grow: 1 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--color-primary) !important;
  font-size: 2rem !important;
  color: var(--text-heading) !important;
  padding: 10px 0 !important;
  border-radius: 0 !important;
  outline: none !important;
}

.search-close-btn {
  background: var(--glass-border) !important;
  border: none !important;
  color: var(--text-heading) !important;
  font-size: 2rem !important;
  cursor: pointer !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.search-close-btn:hover {
  background: var(--hover-bg) !important;
  transform: rotate(90deg) !important;
}

.search-results-grid {
  max-height: 60vh !important;
  overflow-y: auto !important;
  padding-right: 10px !important;
}

/* Result Cards */
.search-result-card {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 15px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 12px !important;
  margin-bottom: 15px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  border: 1px solid transparent !important;
}

.search-result-card:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  transform: translateX(10px) !important;
  border-color: var(--color-primary) !important;
}

.result-thumb img {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

.result-info h3 {
  margin: 0 0 5px 0 !important;
  font-size: 1.1rem !important;
  color: var(--color-primary) !important;
}

.result-info p {
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: var(--text-muted) !important;
}

.search-loading,
.no-results {
  text-align: center !important;
  padding: 40px !important;
  color: var(--text-muted) !important;
  font-style: italic !important;
}

/* 🧠 SMART SEARCH RECOMMENDATIONS */
.search-recommendations {
  margin-bottom: 30px !important;
}

.recommend-title {
  display: block !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--color-primary) !important;
  margin-bottom: 15px !important;
  font-weight: 700 !important;
  opacity: 0.8 !important;
}

.recommend-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.recommend-tag {
  background: var(--glass-border) !important;
  border: 1px solid var(--hover-bg) !important;
  color: var(--text-main) !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.recommend-tag:hover {
  background: var(--color-primary) !important;
  color: var(--bg-card) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(97, 175, 239, 0.3) !important;
}

.search-footer {
  margin-top: 30px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--glass-border) !important;
  font-size: 0.85rem !important;
  color: var(--text-muted) !important;
  text-align: center !important;
}

@media (max-width: 768px) {
  .search-modal-container {
    padding: 20px !important;
  }

  #medinotes-search-input {
    font-size: 1.2rem !important;
  }
}

/* 📢 PREMIUM SOCIAL SHARING BAR STYLES */
.medinotes-share-bar {
  position: fixed !important;
  left: 30px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  z-index: 999998 !important;
  opacity: 0;
  transition: all 0.5s ease !important;
}

.single .medinotes-share-bar {
  opacity: 1 !important;
}

.share-btn {
  width: 48px !important;
  height: 48px !important;
  background: var(--bg-glass) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--hover-bg) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--text-body) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  position: relative !important;
}

.share-btn:hover {
  color: var(--text-heading) !important;
  transform: translateX(5px) scale(1.1) !important;
  background: rgba(97, 175, 239, 0.2) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
}

.share-btn svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

/* Kakao Specific */
.share-btn.btn-kakao:hover {
  background: #fee500 !important;
  color: #3c1e1e !important;
  border-color: #fee500 !important;
}

/* Mobile Bottom Bar Case */
@media (max-width: 1024px) {
  .medinotes-share-bar {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) !important;
    padding: 10px 20px !important;
    border-top: 1px solid var(--border-color) !important;
    gap: 0 !important;
  }

  .share-btn {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
  }

  .share-btn:hover {
    transform: translateY(-5px) !important;
  }
}

/* 🖼️ CINEMATIC FULL-WIDTH IMAGES */
.entry-content img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 20px auto !important;
  border-radius: 16px !important;
  border: none !important;
  /* H2 등의 테두리 상속 방지 */
  border-bottom: none !important;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.4),
    0 5px 15px rgba(0, 0, 0, 0.2) !important;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease !important;
}

.entry-content img:hover {
  transform: scale(1.01) !important;
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

/* 🚫 REMOVE EXCESSIVE SPACING AROUND IMAGES & BLOCKS */
.entry-content figure,
.entry-content .wp-block-image,
.entry-content .wp-block-group,
.entry-content .wp-block-columns {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Hide empty paragraphs, spans and captions often created by editors (Disabled to prevent layout breakage in Gutenberg blocks) */
/*
        .entry-content p:empty,
        .entry-content p:has(> br:only-child),
        .entry-content p>br:only-child,
        .entry-content figcaption:empty {
            display: none !important;
        }
        */

/* Standardize p spacing to prevent stacking gaps */
.entry-content p {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
}

/* 📏 COLLAPSE SPACING BETWEEN IMAGES AND HEADINGS */
.entry-content img + h2,
.entry-content img + h3,
.entry-content img + h4,
.entry-content .wp-block-image + h2,
.entry-content .wp-block-image + h3,
.entry-content .wp-block-image + h4,
.entry-content p:has(img) + h2,
.entry-content p:has(img) + h3,
.entry-content p:has(img) + h4 {
  margin-top: 15px !important;
}

/* Toast Popup */
#medinotes-toast {
  position: fixed !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(100px) !important;
  background: var(--color-primary) !important;
  color: var(--bg-card) !important;
  padding: 12px 24px !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  z-index: 9999999 !important;
  box-shadow: 0 10px 30px rgba(97, 175, 239, 0.4) !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  pointer-events: none !important;
}

#medinotes-toast.is-active {
  transform: translateX(-50%) translateY(0) !important;
}

/* 🔍 CINEMATIC IMAGE ZOOM (LIGHTBOX) */
#medinotes-lightbox {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-glass) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  z-index: 9999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  cursor: zoom-out !important;
}

#medinotes-lightbox.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#medinotes-lightbox img {
  max-width: 95vw !important;
  max-height: 95vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8) !important;
  transform: scale(0.95) !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

#medinotes-lightbox.is-active img {
  transform: scale(1) !important;
}

.entry-content img {
  cursor: zoom-in !important;
}

/* Prevent scrolling when lightbox is open */
body.lightbox-open {
  overflow: hidden !important;
}

/* ✨ PREMIUM IMAGE REVEAL (Blur-to-Clear) */
.entry-content img {
  opacity: 0 !important;
  filter: blur(15px) !important;
  transition:
    opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1),
    filter 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.entry-content img.is-visible {
  opacity: 1 !important;
  filter: blur(0) !important;
}

/* 🖨️ PROFESSIONAL PRINT OPTIMIZATION (Medical Report Style) */
@media print {
  .site-header,
  .site-footer,
  .ast-sidebar-widget,
  .ast-related-posts-wrap,
  .medinotes-share-bar,
  #medinotes-progress-wrapper,
  #medinotes-top-btn,
  .medinotes-toc-container,
  .medinotes-reading-time,
  .medinotes-breadcrumbs,
  .post-navigation,
  .comments-area,
  .ast-post-nav-title,
  .share-btn {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ast-container {
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .entry-content {
    color: #000000 !important;
    font-size: 11pt !important;
    line-height: 1.6 !important;
  }

  .entry-title {
    color: #000000 !important;
    text-align: left !important;
    font-size: 24pt !important;
    margin-top: 20pt !important;
    border-bottom: 2pt solid #000 !important;
    padding-bottom: 10pt !important;
  }

  h2,
  h3 {
    color: #000000 !important;
    border-bottom: 1pt solid #ccc !important;
    page-break-after: avoid !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
    margin: 20pt auto !important;
  }

  blockquote {
    background: #f0f0f0 !important;
    border-left: 5pt solid #333 !important;
    font-style: italic !important;
    padding: 10pt 20pt !important;
  }

  /* Add site name as header in print */
  body::before {
    content: "MediNotes - 전문 비뇨기과 의학 정보 (https://medinotes.xyz)" !important;
    display: block !important;
    text-align: right !important;
    font-size: 8pt !important;
    color: #888 !important;
    margin-bottom: 20pt !important;
  }
}

/* 🔗 PREMIUM RELATED POSTS — 시네마틱 카드 디자인 */
/* ═══════════════════════════════════════════════════ */

/* 📦 섹션 컨테이너 */
body.single-post .ast-single-related-posts-container,
body.single .ast-single-related-posts-container {
  padding: 50px 0 40px 0 !important;
  border-top: none !important;
  margin: 60px 0 0 0 !important;
  max-width: 100% !important;
  clear: both !important;
  position: relative !important;
}

/* 상단 구분선 — 골드 그라데이션 악센트 */
body.single-post .ast-single-related-posts-container::before,
body.single .ast-single-related-posts-container::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 120px !important;
  height: 3px !important;
  background: linear-gradient(
    90deg,
    transparent,
    #f0c675,
    transparent
  ) !important;
  border-radius: 2px !important;
}

/* 📝 섹션 타이틀 — 테마 대응 심플 스타일 */
.ast-related-posts-title-section {
  margin-bottom: 30px !important;
  text-align: center !important;
}

.ast-related-posts-title-section .ast-related-posts-title,
.ast-related-posts-title {
  color: var(--text-heading) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  font-family: var(--font-heading) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* 🔲 그리드 컨테이너 — 2열 */
body.single .ast-related-posts-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  justify-content: stretch !important;
}

body.single .ast-related-posts-inner-section {
  display: contents !important;
}

/* 🃏 카드 스타일 — 글래스모피즘 */
body.single .ast-related-post {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  background: rgba(44, 49, 58, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 16px !important;
  border: 1px solid var(--hover-bg) !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  margin: 0 !important;
  position: relative !important;
}

/* 🃏 카드 호버 — 스케일 + 골드 글로우 */
body.single .ast-related-post:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(240, 198, 117, 0.08) !important;
  background: rgba(44, 49, 58, 0.85) !important;
  border-color: rgba(240, 198, 117, 0.2) !important;
}

/* 🖼️ 썸네일 이미지 — 커버 스타일 복원 */
body.single .ast-related-post-img,
body.single .ast-related-post-featured-section {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}

body.single .ast-related-post-img img,
body.single .ast-related-post-featured-section img {
  height: 200px !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}

/* 이미지 호버 줌 효과 */
body.single .ast-related-post:hover .ast-related-post-img img,
body.single .ast-related-post:hover .ast-related-post-featured-section img {
  transform: scale(1.08) !important;
}

/* 이미지 하단 그라데이션 오버레이 — 테마 대응 */
body.single .ast-related-post-img::after,
body.single .ast-related-post-featured-section::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60% !important;
  background: linear-gradient(
    to top,
    var(--bg-card) 0%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 📝 컨텐츠 영역 */
body.single .ast-related-post-content {
  padding: 22px 24px !important;
}

/* ✨ 제목 — 심플하고 깔끔한 테마 대응 */
body.single .ast-related-post-title {
  font-size: 1.15rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  font-weight: 700 !important;
  font-family: var(--font-heading) !important;
}

body.single .ast-related-post-title a {
  color: var(--text-heading) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

/* 제목 호버 — 포인트 컬러 */
body.single .ast-related-post:hover .ast-related-post-title a {
  color: var(--color-primary) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
}

/* 📅 메타 정보 — 테마 대응 뮤트 컬러 */
body.single .ast-related-post .entry-meta {
  display: block !important;
  margin-top: 10px !important;
  font-size: 0.8rem !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.02em !important;
}

body.single .ast-related-post .entry-meta * {
  color: var(--text-muted) !important;
}

/* 발췌문/CTA는 숨김 (깔끔하게) */
body.single .ast-related-post .ast-related-post-excerpt,
body.single .ast-related-post .ast-related-post-cta {
  display: none !important;
}

/* 📱 모바일 반응형 — 가로 카드 레이아웃 */
@media (max-width: 768px) {
  /* 1열 그리드 */
  body.single .ast-related-posts-wrapper {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 가로 레이아웃: 이미지 왼쪽 + 텍스트 오른쪽 */
  body.single .ast-related-post {
    display: flex !important;
    flex-direction: row !important;
    border-radius: 12px !important;
    min-height: 120px !important;
  }

  /* 이미지 — 왼쪽 고정 */
  body.single .ast-related-post-img,
  body.single .ast-related-post-featured-section {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }

  body.single .ast-related-post-img img,
  body.single .ast-related-post-featured-section img {
    height: 100% !important;
    min-height: 120px !important;
    width: 130px !important;
    border-radius: 12px 0 0 12px !important;
  }

  /* 이미지 오버레이 — 모바일에서는 오른쪽으로 */
  body.single .ast-related-post-img::after,
  body.single .ast-related-post-featured-section::after {
    height: 100% !important;
    background: linear-gradient(
      to left,
      rgba(44, 49, 58, 0.8) 0%,
      transparent 100%
    ) !important;
  }

  /* 텍스트 — 오른쪽 */
  body.single .ast-related-post-content {
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
  }

  body.single .ast-related-post-title {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  /* 섹션 타이틀 모바일 크기 */
  .ast-related-posts-title-section .ast-related-posts-title,
  .ast-related-posts-title {
    font-size: 1.3rem !important;
  }
}

/* Fix Astra Single Post Header Inline Dark Overlay */
.ast-single-post-header,
.ast-archive-header,
.ast-author-box {
  background-color: var(--bg-page) !important;
}

.ast-single-post-header[data-post-header-layout="layout-2"] {
  background-color: var(--bg-page) !important;
}

.ast-single-post-header::before,
.ast-archive-header::before {
  background-color: var(--bg-glass) !important;
  background: var(--bg-page) !important;
}

/* 🚨 AGGRESSIVE FOOTER OVERRIDE to guarantee 100% unification */
footer.site-footer * {
  background: transparent !important;
  background-color: transparent !important;
}

/* 🚨 AGGRESSIVE BODY EFFECT REMOVAL to guarantee 100% unification */
body {
  background-image: none !important;
}

.site-header,
.main-header-bar,
.ast-primary-header-bar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 🔗 RELATED POSTS: 황금색 필터 제거 및 타이포그래피 통일 */
.ast-related-post-title,
.ast-related-post-title a,
.ast-related-posts .entry-header .entry-title a {
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--text-heading, #e2e8f0) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.ast-related-post-title a:hover {
  color: var(--color-primary, #61afef) !important;
}