/*
Theme Name: Blogsy Child
Theme URI: https://peregrine-themes.com/blogsy/
Description: Blogsy 테마의 차일드 테마
Author: 야구공작소
Template: blogsy
Version: 1.0.0
License: GNU General Public License v2+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blogsy-child
*/

/* ==========================================================
   전역 폰트: KoPub바탕
   ========================================================== */

:root {
  --ygso-font:
    "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
span,
div,
input,
textarea,
select,
button {
  font-family: var(--ygso-font) !important;
}

/* ==========================================================
   검색창 열릴 때 검색 아이콘 토글
   ========================================================== */

/*
 * 모바일에서 JS(main.js)가 .popup-search-wrapper.style-3 에
 * flex: 1 0 auto 를 인라인으로 주입해 로고가 가운데로 밀리는 현상 방지.
 * popup-search-container 는 position:fixed 라 flex 공간은 불필요.
 */
@media screen and (max-width: 1024px) {
  .pt-header-container .popup-search-wrapper.style-3 {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
  }
}

@media screen and (min-width: 1025px) {
  /* popup-search-wrapper는 DOM에서 pt-header-widgets 앞에 위치 → ~ 형제 선택자 사용 가능 */
  .popup-search-wrapper.style-3:has(.popup-search.open)
    ~ .pt-header-widgets
    .popup-search-opener-wrapper {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }

  .popup-search-wrapper.style-3
    ~ .pt-header-widgets
    .popup-search-opener-wrapper {
    transition: opacity 0.2s;
  }

  /*
     * Blogsy JS(main.js:93)가 style-3 검색 열릴 때
     * $('.pt-header-inner .blogsy-header-nav-wrapper').css('display','none') 을 실행함.
     * 우리 레이아웃은 검색창이 소셜 영역으로 이동했으므로 nav는 항상 표시 유지.
     * !important 는 jQuery inline style도 이김.
     */
  .pt-header-inner .blogsy-header-nav-wrapper {
    display: flex !important;
  }
}

/* ==========================================================
   Header: 카테고리(좌) | 로고(중앙) | 소셜(우)
   ========================================================== */

.popup-search-container {
  padding-right: 0 !important;
}

@media screen and (min-width: 1025px) {
  /* Grid 3열로 전환 */
  .pt-header-layout-1 .pt-header .pt-header-container,
  .pt-header-layout-2 .pt-header .pt-header-container,
  .pt-header-layout-3 .pt-header .pt-header-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "nav logo social";
    align-items: center;
  }

  /* 네비게이션 → 좌측 열 */
  .pt-header-layout-1
    .pt-header
    .pt-header-container
    .blogsy-header-nav-wrapper,
  .pt-header-layout-2
    .pt-header
    .pt-header-container
    .blogsy-header-nav-wrapper,
  .pt-header-layout-3
    .pt-header
    .pt-header-container
    .blogsy-header-nav-wrapper {
    grid-area: nav;
    flex-basis: auto;
    flex-grow: 0;
    max-width: 100%;
  }

  /* 네비 아이템 왼쪽 정렬 (부모 justify-content: end 오버라이드) */
  .pt-header-layout-1
    .pt-header-inner
    .pt-header-container
    .blogsy-header-nav-wrapper
    > ul,
  .pt-header-layout-2
    .pt-header-inner
    .pt-header-container
    .blogsy-header-nav-wrapper
    > ul,
  .pt-header-layout-3
    .pt-header-inner
    .pt-header-container
    .blogsy-header-nav-wrapper
    > ul {
    justify-content: flex-start;
  }

  /* 로고 → 중앙 열 */
  .pt-header-layout-1 .pt-header .pt-header-container .pt-logo,
  .pt-header-layout-2 .pt-header .pt-header-container .pt-logo,
  .pt-header-layout-3 .pt-header .pt-header-container .pt-logo {
    grid-area: logo;
    margin-right: 0;
    justify-self: center;
  }

  /* 소셜 위젯 → 우측 열 */
  .pt-header-layout-1 .pt-header .pt-header-container .pt-header-widgets,
  .pt-header-layout-2 .pt-header .pt-header-container .pt-header-widgets,
  .pt-header-layout-3 .pt-header .pt-header-container .pt-header-widgets {
    grid-area: social;
    justify-content: flex-end;
  }

  /* 팝업 서치 wrapper → 소셜(우측) 열에 배치, 소셜 아이콘과 동일 셀에서 레이어로 겹침 */
  .pt-header-layout-1 .pt-header .pt-header-container .popup-search-wrapper,
  .pt-header-layout-2 .pt-header .pt-header-container .popup-search-wrapper,
  .pt-header-layout-3 .pt-header .pt-header-container .popup-search-wrapper {
    grid-area: social;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    z-index: 10;
    width: 100%;
  }

  /* 검색창 열릴 때 소셜 위젯 숨김 (검색창이 덮음) */
  .pt-header-layout-1 .pt-header .pt-header-container .pt-header-widgets,
  .pt-header-layout-2 .pt-header .pt-header-container .pt-header-widgets,
  .pt-header-layout-3 .pt-header .pt-header-container .pt-header-widgets {
    grid-row: 1;
    z-index: 1;
  }

  /* 스티키 헤더 — 3열 그리드 (layout 클래스 포함으로 specificity 확보) */
  .pt-header-layout-1 .pt-header-sticky .pt-header-container,
  .pt-header-layout-2 .pt-header-sticky .pt-header-container,
  .pt-header-layout-3 .pt-header-sticky .pt-header-container {
    display: grid;
    /* minmax(0, 1fr): nav 항목이 많아도 컬럼이 늘어나지 않아 로고가 정중앙 유지 */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "nav logo social";
    align-items: center;
  }

  .pt-header-layout-1
    .pt-header-sticky
    .pt-header-container
    .blogsy-header-nav-wrapper,
  .pt-header-layout-2
    .pt-header-sticky
    .pt-header-container
    .blogsy-header-nav-wrapper,
  .pt-header-layout-3
    .pt-header-sticky
    .pt-header-container
    .blogsy-header-nav-wrapper {
    grid-area: nav;
    flex-basis: auto;
    flex-grow: 0;
    max-width: 100%;
  }

  .pt-header-layout-1
    .pt-header-sticky
    .pt-header-container
    .blogsy-header-nav-wrapper
    > ul,
  .pt-header-layout-2
    .pt-header-sticky
    .pt-header-container
    .blogsy-header-nav-wrapper
    > ul,
  .pt-header-layout-3
    .pt-header-sticky
    .pt-header-container
    .blogsy-header-nav-wrapper
    > ul {
    justify-content: flex-start;
  }

  /* specificity (0,4,0) — 부모의 margin-right: auto (0,3,0) 확실히 오버라이드 */
  .pt-header-layout-1 .pt-header-sticky .pt-header-container .pt-logo,
  .pt-header-layout-2 .pt-header-sticky .pt-header-container .pt-logo,
  .pt-header-layout-3 .pt-header-sticky .pt-header-container .pt-logo {
    grid-area: logo;
    margin-right: 0;
    justify-self: center;
  }

  .pt-header-layout-1 .pt-header-sticky .pt-header-container .pt-header-widgets,
  .pt-header-layout-2 .pt-header-sticky .pt-header-container .pt-header-widgets,
  .pt-header-layout-3
    .pt-header-sticky
    .pt-header-container
    .pt-header-widgets {
    grid-area: social;
    grid-row: 1;
    z-index: 1;
    justify-content: flex-end;
  }

  .pt-header-layout-1
    .pt-header-sticky
    .pt-header-container
    .popup-search-wrapper,
  .pt-header-layout-2
    .pt-header-sticky
    .pt-header-container
    .popup-search-wrapper,
  .pt-header-layout-3
    .pt-header-sticky
    .pt-header-container
    .popup-search-wrapper {
    grid-area: social;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    z-index: 10;
    width: 100%;
  }
}

/* ==========================================================
   하단 위젯 — 가로 정렬
   ========================================================== */

.ygso-bottom-widgets-area {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 36px;
  padding-bottom: 12px;
  /* padding-left / right 는 .pt-container 의 1.5rem 그대로 유지 */
}

.ygso-bottom-widget {
  flex: 1;
  min-width: 200px;
}

.ygso-bottom-widget-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #eee;
}

@media screen and (max-width: 767px) {
  .ygso-bottom-widgets-area {
    flex-direction: column;
  }
}

/* ==========================================================
   야공소 탭 위젯 [yagongso_tabs]
   ========================================================== */

/* 사이드바 위젯 리스트 항목 상단 border 제거 */
.sidebar-container
  .blogsy-sidebar-widget
  ul:not(.blogsy-socials-menu, .wp-block-social-links, .wp-block-latest-posts)
  > li:not(:first-child) {
  border-top: none;
}

/* yagongso_tabs 숏코드를 감싸는 sidebar 위젯 padding 제거 */
.blogsy-sidebar-widget:has(.ygso-tabs-widget) {
  padding: 0 !important;
}

/* wpautop 가 shortcode 주변에 생성하는 빈 <p> 제거 */
.blogsy-sidebar-widget:has(.ygso-tabs-widget) > p:empty {
  display: none;
}

.ygso-tabs-widget {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  overflow: hidden;
  font-family: inherit;
}

/* 탭 헤더 */
.ygso-tabs-header {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
}

.ygso-tab {
  flex: 1;
  padding: 13px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #aaa;
  text-transform: uppercase;
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.2s;
  line-height: 1;
}

.ygso-tab:hover {
  color: #555;
}

.ygso-tab--active {
  background: #111;
  color: #fff;
  border-bottom-color: #111;
}

/* 패널 */
.ygso-tab-panel--hidden {
  display: none;
}

/* 포스트 목록 */
.ygso-post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ygso-post-list li:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}

.ygso-post-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

.ygso-post-item:hover {
  background: #fafafa;
  text-decoration: none;
  color: inherit;
}

/* 썸네일 */
.ygso-post-thumb {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border-radius: 4px;
  background: #f0f0f0;
}

.ygso-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 정보 영역 */
.ygso-post-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 카테고리 뱃지 */
.ygso-post-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #1a73e8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

/* 제목 */
.ygso-post-title {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: #222;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 화살표 */
.ygso-post-arrow {
  flex-shrink: 0;
  color: #ccc;
  font-size: 20px;
  line-height: 1;
}

/* 빈 상태 */
.ygso-empty {
  padding: 24px 16px;
  color: #888;
  font-size: 13px;
  text-align: center;
  margin: 0;
}

/* 야공소 보더삭제 */
.ygso-tabs-widget .ygso-post-list li:not(:last-child) {
  border-bottom: none !important;
}

/* 프리로더 전환 시간 단축 */
.site-preloader {
  transition: 0.3s;
}

/* 다크 로고 미등록 시 사이트명 표시 */
html[scheme="dark"] .logo-inner:not(:has(.dark-logo)) .site-title {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  word-wrap: normal !important;
}

html[scheme="dark"] .logo-inner:not(:has(.dark-logo)) .site-title a {
  color: var(--pt-headings-color);
  text-decoration: none;
}

/* 야공소 픽 다크모드 */
html[scheme="dark"] .ygso-tabs-widget {
  background: var(--pt-card-bg);
  border-color: var(--pt-border-color);
}

html[scheme="dark"] .ygso-tabs-header {
  border-bottom-color: var(--pt-border-color);
}

html[scheme="dark"] .ygso-tab {
  color: #777;
}

html[scheme="dark"] .ygso-tab:hover {
  color: #bbb;
}

html[scheme="dark"] .ygso-tab--active {
  background: #fff;
  color: #111;
  border-bottom-color: #fff;
}

html[scheme="dark"] .ygso-post-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

html[scheme="dark"] .ygso-post-thumb {
  background: #333a42;
}

html[scheme="dark"] .ygso-post-cat {
  color: var(--pt-accent-40-color);
}

html[scheme="dark"] .ygso-post-title {
  color: var(--pt-body-color);
}

html[scheme="dark"] .ygso-post-arrow {
  color: #555;
}

html[scheme="dark"] .ygso-empty {
  color: #666;
}

/* ================================================================
   About 페이지
   ================================================================ */

/* Hero 전용 CSS 애니메이션 — AOS 깜빡임 없이 페이지 로드 즉시 실행 */
@keyframes ygso-hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ygso-hero-anim {
  opacity: 0;
  animation: ygso-hero-rise 0.7s ease forwards paused;
  animation-delay: var(--anim-delay, 0ms);
}

.ygso-about__hero.is-visible .ygso-hero-anim,
.ygso-about__section.is-visible .ygso-hero-anim {
  animation-play-state: running;
}

/* Hero */
.ygso-about__hero {
  position: relative;
  padding: 0;
  min-height: 520px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  color: #fff;
}

.ygso-about__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(41, 41, 75, 0.82) 0%,
    rgba(64, 133, 197, 0.72) 100%
  );
}

.ygso-about__hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 96px;
  padding-bottom: 80px;
  width: 100%;
}

.ygso-about__eyebrow {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #acd8f4;
  margin-bottom: 18px;
}

.ygso-about__hero-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800;
  color: #fff !important;
  margin: 0 0 18px;
  line-height: 1.1;
}

.ygso-about__hero-sub {
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* 섹션 공통 */
.ygso-about__section {
  padding: 88px 0;
}

.ygso-about__section-label {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pt-accent-color);
  margin-bottom: 10px;
}

.ygso-about__section-title {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  color: var(--pt-headings-color);
  margin: 0 0 52px;
  line-height: 1.3;
}

/* Mission */
.ygso-about__mission {
  background: var(--pt-body-bg-color);
}

.ygso-about__mission-body {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
  font-size: 2rem;
  line-height: 1.9;
  color: var(--pt-body-color);
}

.ygso-about__mission-body p + p {
  margin-top: 1.2em;
}

/* Activities */
.ygso-about__activities {
  background: var(--pt-card-bg);
}

.ygso-about__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.ygso-about__card {
  padding: 40px 32px;
  text-align: center;
  border-radius: var(--pt-soft-radius);
}

.ygso-about__card-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 22px;
  background: var(--pt-accent-80-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pt-accent-color);
}

.ygso-about__card-icon svg {
  width: 24px;
  height: 24px;
}

.ygso-about__card h3 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--pt-headings-color);
  margin: 0 0 14px;
}

.ygso-about__card p {
  font-size: 2rem;
  line-height: 1.8;
  color: var(--pt-body-color);
  margin: 0;
}

/* Signature */
.ygso-about__signature {
  background: var(--pt-body-bg-color);
}

.ygso-about__sig-layout {
  display: flex;
  gap: 52px;
  align-items: flex-start;
}

.ygso-about__sig-image {
  flex: 0 0 56%;
  max-width: 56%;
  background: #fff;
  border: 1px solid var(--pt-border-color);
  border-radius: var(--pt-soft-radius);
  padding: 32px;
  overflow: hidden;
}

.ygso-about__sig-image img {
  width: 100%;
  height: auto;
  display: block;
}

.ygso-about__sig-text {
  flex: 1;
  min-width: 0;
  padding-top: 8px;
  font-size: 2rem;
  line-height: 1.9;
  color: var(--pt-body-color);
}

.ygso-about__sig-text p + p {
  margin-top: 1.2em;
}

/* Contact / Social */
.ygso-about__contact {
  background: var(--pt-card-bg);
  text-align: center;
}

.ygso-about__contact-title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--pt-headings-color);
  margin: 0 0 40px;
}

.ygso-about__social {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ygso-about__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--pt-body-bg-color);
  border: 1px solid var(--pt-border-color);
  color: var(--pt-body-color);
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.ygso-about__social-link:hover {
  background: var(--pt-accent-color);
  border-color: var(--pt-accent-color);
  color: #fff;
  transform: translateY(-3px);
  text-decoration: none;
}

.ygso-about__social-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* 반응형 */
@media (max-width: 900px) {
  .ygso-about__cards {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .ygso-about__sig-layout {
    flex-direction: column;
    gap: 32px;
  }

  .ygso-about__sig-image {
    flex: none;
    max-width: 100%;
    width: 100%;
    padding: 20px;
  }
}

/* 다크모드 */
html[scheme="dark"] .ygso-about__sig-image {
  background: var(--pt-card-bg);
}

html[scheme="dark"] .ygso-about__social-link {
  background: rgba(255, 255, 255, 0.05);
}

/* ==========================================================
   블로그 리스트: 모바일 심플 레이아웃 (blog-horizontal)
   ========================================================== */

/* 심플 템플릿은 기본적으로 숨김 (PC·태블릿) */
.blog-horizontal .ygso-simple-post {
  display: none;
}

/* 모바일(≤767px): 카드 숨기고 심플 레이아웃 표시 */
@media (max-width: 767px) {
  .blog-horizontal .default-post-list-item {
    display: none !important;
  }

  .blog-horizontal .ygso-simple-post {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    border-bottom: 1px solid var(--pt-border-color);
    padding: 14px 0;
  }

  .blog-horizontal .ygso-simple-post:first-of-type {
    border-top: 1px solid var(--pt-border-color);
  }

  .ygso-simple-post__link {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    text-decoration: none;
    color: inherit;
    min-width: 0;
  }

  /* 썸네일 */
  .ygso-simple-post__thumb {
    flex: 0 0 110px !important;
    width: 110px !important;
    max-width: 110px !important;
    height: 82px !important;
    border-radius: 6px;
    overflow: hidden;
    background: var(--pt-border-color);
  }

  .ygso-simple-post__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    max-width: none !important;
  }

  /* 제목 + 메타 영역 */
  .ygso-simple-post__body {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px;
    padding-left: 10px;
  }

  .ygso-simple-post__title {
    font-size: 1.8rem !important;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 !important;
    color: var(--pt-headings-color);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ygso-simple-post__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 1.2rem;
    color: var(--pt-meta-color, #888);
  }

  .ygso-simple-post__meta-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
  }

  .ygso-simple-post__cat,
  .ygso-simple-post__date,
  .ygso-simple-post__author,
  .ygso-simple-post__read {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .ygso-simple-post__cat svg,
  .ygso-simple-post__date svg,
  .ygso-simple-post__author svg,
  .ygso-simple-post__read svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: 0.7;
  }

  .ygso-simple-post__cat {
    color: var(--pt-accent-color);
    font-weight: 600;
  }

  /* terms-wrapper row */
  .ygso-simple-post .terms-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    font-size: 1.2rem !important;
  }

  .ygso-simple-post .terms-wrapper .term-item span {
    padding-right: 3px;
  }

  /* 첫 번째 카테고리: dot(6px) + 좌측 gap 2px */
  .ygso-simple-post .terms-wrapper .term-item:first-child {
    padding-left: 8px;
  }

  /* 읽는 시간 */
  .ygso-simple-post .meta-item.reading-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1.2rem;
  }

  /* 다크모드 */
  html[scheme="dark"] .ygso-simple-post {
    border-color: var(--pt-border-color);
  }

  html[scheme="dark"] .ygso-simple-post__title {
    color: var(--pt-headings-color);
  }
}

/* ==========================================================
   라이트 / 다크 모드 이미지 유틸리티 클래스
   블록 에디터 이미지 블록 → "추가 CSS 클래스" 에 입력
     ygso-white-img  → 라이트 모드에서만 표시
     ygso-dark-img   → 다크 모드에서만 표시
   ========================================================== */

/* 라이트 전용: 다크 모드 진입 시 숨김 */
html[scheme="dark"] .ygso-white-img {
  display: none !important;
}

/* 다크 전용: 기본 숨김 → 다크 모드에서만 표시 */
.ygso-dark-img {
  display: none !important;
}

html[scheme="dark"] .ygso-dark-img {
  display: block !important;
}