/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.4 (Refactored & Corrected)
*/

/*--------------------------------------------------------------
# 1. 기본 설정 및 변수
--------------------------------------------------------------*/
/* 1.1 CSS 변수 정의 */
:root {
  /* 핵심 색상 변수 */
  --primary-color: #fcc500;
  --secondary-color: #49A9D0;
  --text-color: #101010;
  --background-color: #f3f3f3;
  --border-color: #e1e5e9;
  --muted-color: #666;
  --white: #ffffff;
  --box-shadow-color: rgba(252,197,0,0.13);
	
  /* 디자인 요소 */
  --border-radius: 10px;
  --transition-speed: 0.3s;
  --box-shadow: rgba(0, 0, 0, 0.1) 0 2px 10px;
  
  /* 특수 박스 색상 */
  --tip-color: #4fc3f7;
  --tip-dark-color: #3bafe3;
  --faqs-color: #ca1c64;
  --caution-color: #d76229;
  --caution-dark-color: #c34e15;
  --reference-color: #757eff;
  --reference-dark-color: #616aeb;
  
  /* 특수 박스 공통 속성 */
  --box-icon-size: 60px;
  --box-icon-top: -50px;
  --box-icon-left: 1px;
  --box-label-top: 12px;
  --box-label-left: 90px;
  --box-label-size: 22px;

  /* 버튼 색상 변수 */
  --btn-blue: #0059a6;
  --btn-blue-hover: #003f7f;
  --btn-green: #037631;
  --btn-green-hover: #025a27;
  --btn-red: #ce1300;
  --btn-red-hover: #a81000;
  --btn-orange: #f28c38;
  --btn-orange-hover: #d97420;
  --btn-purple: #6a1b9a;
  --btn-purple-hover: #4e1380;
}

/* 1.2 폰트 설정 */
@font-face {
  font-family: 'Limelight';
  src: url('/wp-content/themes/generatepress_child/fonts/Limelight-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 1.3 기본 HTML 요소 스타일 */
img {
  height: auto;
  max-width: 100%;
  /* 보안 강화: 이미지 무단 복사 방지 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

h1 {
  font-size: 33px;
  font-weight: 700;
}

/*--------------------------------------------------------------
# 2. 레이아웃 및 구조
--------------------------------------------------------------*/
/* 2.1 헤더 및 네비게이션 */
.site-header {
  position: relative;
  overflow: hidden;
  background: var(--background-color);
  z-index: 1;
}

.main-navigation {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--box-shadow);
}
.admin-bar .main-navigation { top: 32px; }

/* 2.2 푸터 스타일링 */
.site-footer {
  word-break: keep-all;
  word-wrap: break-word;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}

.legal-links { margin-top: 15px; font-size: 14px; }
.legal-links a { color: var(--muted-color); text-decoration: none; padding: 0 5px; transition: color 0.3s ease; }
.legal-links a:hover { color: #333; text-decoration: none; }
.separator { color: #ccc; margin: 0 5px; font-weight: 300; }

/* 2.3 사이드바 고정 */
.sidebar .inside-right-sidebar { position: sticky; top: 70px; }
.admin-bar .sidebar .inside-right-sidebar { top: 102px; }

/* 2.4 특정 페이지에서 불필요한 요소 숨김 */
.single .inside-article > .featured-image,
.home .entry-meta,
.archive .entry-meta,
.search-results .entry-meta,
.search-results .comments-link {
  display: none;
}

/* 2.5 글상자 너비 조정 */
.wp-embedded-content { width: 100%; max-width: 100%; margin: 0; }

/* 2.6 이전글/다음글 표기 설정 */
#nav-below { display: flex; gap: 1rem; margin: 30px 0; }
.nav-previous, .nav-next { flex: 1; background: var(--background-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 1.5rem; font-weight: bold; transition: all var(--transition-speed) ease; box-shadow: var(--box-shadow); }
.nav-previous:hover, .nav-next:hover { box-shadow: var(--box-shadow-color) 0 4px 12px; transform: translateY(-2px); background-color: var(--primary-color); border-color: var(--primary-color); }
.nav-previous a, .nav-next a { color: var(--text-color); text-decoration: none; transition: color var(--transition-speed) ease; }
.nav-previous:hover a, .nav-next:hover a { color: var(--white); }
.nav-previous span.prev:before, .nav-next span.next:before { color: var(--text-color); transition: color var(--transition-speed) ease; }
.nav-previous:hover span.prev:before, .nav-next:hover span.next:before { color: var(--white); }
.nav-next .next:after { content: "\f105"; font-family: GeneratePress; position: relative; margin-left: 8px; color: var(--text-color); transition: color var(--transition-speed) ease; }
.nav-next .next:before { display: none; }
.nav-next:hover .next:after { color: var(--white); }

/* 2.7 목차 아이콘 설정 */
.ez-toc-open-icon { transform: translateX(-14px); transition: transform 0.3s ease; }
.ez-toc-open-icon:hover { transform: translateX(0); }

/* 2.8 게시글 하단의 작성자 정보 */
.single .entry-meta .byline { display: none; } /* 상단 작성자 정보 숨김 */
.custom-post-footer { margin-top: 30px; padding: 0; }
.footer-divider { border: none; border-top: 1px solid var(--background-color); margin: 30px 0; }
.author-section { display: flex; flex-direction: column; padding: 20px; gap: 0; background-color: var(--white); border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: all var(--transition-speed) ease; }
.author-section:hover { box-shadow: var(--box-shadow-color) 0 4px 15px; }
.author-info { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.author-avatar { flex-shrink: 0; width: 60px; height: 60px; }
.author-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--background-color); display: block; transition: border-color var(--transition-speed) ease; }
.author-avatar:hover img { border-color: var(--primary-color); }
.author-details { flex-grow: 1; min-width: 0; }
.author-name { font-size: 18px; font-weight: 600; margin: 0 0 8px 0; line-height: 1.3; color: var(--text-color); }
.author-link { color: var(--text-color); text-decoration: none; transition: color var(--transition-speed) ease; }
.author-link:hover { color: var(--secondary-color); text-decoration: underline; }
.site-description { font-size: 14px; color: var(--muted-color); margin: 0; line-height: 1.5; word-wrap: break-word; }
.copyright-info { padding-top: 15px; border-top: 1px solid var(--background-color); text-align: left; }
.copyright-info p { font-size: 14px; color: var(--muted-color); margin: 0; line-height: 1.4; }

/* 2.9 애드센스 */
ins.adsbygoogle[data-ad-status='unfilled'] { display: none !important; }
.adsbygoogle { min-height: 250px; background: var(--background-color); }

/*--------------------------------------------------------------
# 3. 타이포그래피
--------------------------------------------------------------*/
/* 3.1 글 제목 스타일링 */
.entry-title { font-size: 28px; font-weight: bold; color: var(--text-color); background-color: var(--background-color); border-left: 8px solid var(--primary-color); border-radius: var(--border-radius); padding: 16px 22px; margin-bottom: 28px; box-shadow: 0 2px 8px rgba(252,197,0,0.06); word-break: keep-all; transition: box-shadow var(--transition-speed); }
.entry-title:hover { box-shadow: 0 8px 24px var(--box-shadow-color); }

/* 3.2 헤딩 스타일링 */
.entry-content h2, .entry-content h3, .entry-content h4 { margin: 1.15em 0 0.6em; font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); padding: 5px 15px; }
.entry-content h2 { font-size: 26px; line-height: 40px; background: linear-gradient(to right, #FD9F28, var(--primary-color)); color: var(--white); text-shadow: 1px 1px 2px rgba(0,0,0,0.1); border-radius: 0 10px 0 10px; box-shadow: inset 0 0 5px rgba(53, 86, 129, 0.5); }
.entry-content h3 { color: #124875; border-left: 10px solid var(--primary-color); border-bottom: 2px solid var(--primary-color); font-size: 24px; }
.entry-content h4 { border-left: 7px solid var(--primary-color); border-bottom: 0.5px dashed var(--primary-color); font-size: 22px; font-weight: 550; }

/* 3.3 사이트 타이틀 */
.main-title { font-family: 'Limelight', Arial, sans-serif; font-size: 33px; font-weight: 600; text-decoration: underline; line-height: 1em; letter-spacing: -2.5px; text-shadow: 1px 1px 4px rgba(0,0,0,0.4); }

/* 3.4 리스트 스타일 */
.entry-content ul, .entry-content ol { margin-left: 1.8em; line-height: 2.0; }

/* 3.5 사이드바 위젯 제목 */
.widget-title { font-size: 21px; font-weight: bold; color: var(--text-color); background-color: var(--background-color); border-left: 4px solid var(--primary-color); border-radius: 6px; padding: 6px 0 6px 14px; margin-bottom: 14px; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(252,197,0,0.06); text-align: left; position: relative; line-height: 1.3; }
.widget-title:hover { box-shadow: 0 4px 12px var(--box-shadow-color); }

/*--------------------------------------------------------------
# 4. 이미지 및 미디어
--------------------------------------------------------------*/
/* 4.1 이미지 기본 설정 */
.post-image img, .wp-block-image img { display: block; margin: 0 auto; }

/* 4.2 갤러리 */
.wp-block-image, .wp-block-gallery, .blocks-gallery-grid, .gallery { margin: 1.8em 0; max-width: 100%; }
.blocks-gallery-grid { gap: 1em; }
.gallery-item { padding: 0.5em; }

/* 4.3 캡션 */
.blocks-gallery-item figcaption, .wp-block-image figcaption, .gallery-caption { margin-top: 0.8em; padding-bottom: 0.5em; font-size: 0.9em; line-height: 1.4; color: #555; transition: opacity 0.3s ease; }
.wp-block-image:hover figcaption, .blocks-gallery-item:hover figcaption { opacity: 1; }

/*--------------------------------------------------------------
# 5. 네비게이션 및 링크
--------------------------------------------------------------*/
/* 5.1 메뉴 */
.main-navigation .menu > li > a { font-size: 17px; }
.main-navigation .sub-menu > li > a { font-size: 15px; }

/* 5.2 "더 보기" 버튼 */
.read-more { color: var(--text-color); background-color: var(--background-color); padding: 5px 7px; border: 1px solid transparent; border-radius: var(--border-radius); transition: all var(--transition-speed) ease-out; box-shadow: var(--box-shadow); margin: 30px auto 0; width: 70%; display: block; text-align: center; font-size: 20px; font-weight: bold; }
.read-more:hover, .read-more:focus { background-color: var(--primary-color); border-color: var(--secondary-color); color: var(--white); }

/* 5.3 페이지네이션 */
.paging-navigation { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 26px 0; text-align: center; flex-wrap: wrap; }
.paging-navigation .page-numbers { display: inline-block; padding: 8px 12px; margin: 0; border: 1px solid transparent; border-radius: 6px; font-size: 14px; font-weight: 500; transition: all 0.3s ease-out; background-color: var(--background-color); box-shadow: 0 2px 4px rgba(0,0,0,0.08); color: var(--text-color); min-width: 40px; text-align: center; }
.paging-navigation .current { font-weight: 600; background: var(--primary-color); color: var(--white); box-shadow: 0 2px 8px rgba(252, 197, 0, 0.3); }
.paging-navigation a.page-numbers:hover, .paging-navigation a.page-numbers:focus { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--white); box-shadow: 0 4px 12px rgba(252, 197, 0, 0.2); transform: translateY(-1px); }
.separate-containers .paging-navigation { padding: 26px 0; text-align: center; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; background: var(--white); }

/* 5.4 링크 호버 효과 */
.sidebar .widget a:hover, .entry-content a:hover, .cat-links a:hover, .tags-links a:hover { background-color: var(--primary-color); color: var(--white); }
.sns-go a:hover { background-color: inherit; color: inherit; } /* SNS 공유 링크 예외 처리 */

/* 5.5 위젯 목록 */
.widget ul li, .wp-block-latest-posts li { list-style-type: none; margin-bottom: 5px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.widget ul li:last-child, .wp-block-latest-posts li:last-child { border-bottom: none; }

/*--------------------------------------------------------------
# 6. 특수 요소 및 컴포넌트
--------------------------------------------------------------*/
/* 6.1 SNS 공유 버튼 */
.sns-go { --button-size: 35px; --button-gap: 5px; --button-radius: 30%; margin-bottom: 30px; }
.sns-go ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 20px 0; }
.sns-go li { margin: 0 var(--button-gap) var(--button-gap) 0; }
.sns-go a { display: block; width: var(--button-size); height: var(--button-size); border-radius: var(--button-radius); overflow: hidden; transition: transform var(--transition-speed) ease; }
.sns-go img { width: 100%; height: 100%; object-fit: cover; }
.sns-go a:hover, .sns-go a:focus { transform: scale(1.1); }

/* 6.2 정보 텍스트 박스 */
.text-box { position: relative; border: 5px solid var(--secondary-color); border-radius: var(--border-radius); padding: 20px; margin: 30px 0; }
.text-box::before { content: "🔔 Information"; position: absolute; top: -25px; left: 10%; background-color: var(--white); padding: 0 10px; font-size: 1.5em; font-weight: bold; color: var(--secondary-color); }
.text-box #myText { font-style: normal; font-weight: 400; font-size: 1.3rem; line-height: 2.3rem; color: var(--text-color); text-align: left; }

/* 6.3 특수 박스 (Tip, FAQs, 주의, 참고) */
.tip, .faqs, .caution, .reference { margin: 60px 0 30px; border: 1px solid #e0e0e0; border-bottom: 3px solid; transition: all var(--transition-speed) ease; box-shadow: var(--box-shadow); border-radius: var(--border-radius); padding: 20px; position: relative; }
.tip::before, .faqs::before, .caution::before, .reference::before { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--white); border-radius: 50%; width: var(--box-icon-size); height: var(--box-icon-size); position: relative; top: var(--box-icon-top); left: var(--box-icon-left); box-shadow: rgba(0,0,0,0.15) 0 4px 4px; }
.tip::after, .faqs::after, .caution::after, .reference::after { position: absolute; font-size: var(--box-label-size, 18px); color: var(--white); font-weight: bold; top: var(--box-label-top); left: var(--box-label-left); }

.tip { background: linear-gradient(var(--tip-color) 60px, transparent 0); border-bottom-color: var(--tip-color); }
.tip::before { content: "+"; background: var(--tip-dark-color); font-size: 40px; }
.tip::after { content: "TIP"; }

.faqs { background: linear-gradient(var(--faqs-color) 60px, transparent 0); border-bottom-color: var(--faqs-color); }
.faqs::before { content: "?"; background: var(--faqs-color); font-size: 40px; }
.faqs::after { content: "FAQs"; }

.caution { background: linear-gradient(var(--caution-color) 60px, transparent 0); border-bottom-color: var(--caution-color); }
.caution::before { content: "!"; background: var(--caution-dark-color); font-size: 40px; }
.caution::after { content: "주의"; }

.reference { background: linear-gradient(var(--reference-color) 60px, transparent 0); border-bottom-color: var(--reference-color); }
.reference::before { content: "※"; background: var(--reference-dark-color); font-size: 50px; }
.reference::after { content: "참고"; }

/*--------------------------------------------------------------
# 7. 댓글 및 포스트 메타
--------------------------------------------------------------*/
/* 7.1 카테고리/태그 텍스트 크기 */
.entry-meta a { font-size: 1.1rem; padding: 2px; line-height: 35px; }

/* 7.2 댓글 섹션 레이아웃 */
#comments { display: flex; flex-direction: column; }
.comments-title { order: 2; display: none; /* 제목 숨김 */ }
#respond { order: 1; margin-bottom: 40px; }
.comment-list { order: 3; }
.comment-form .form-submit { text-align: right; }
.comment-author, .comment-date { padding: 10px; margin-right: 12px; display: inline-block; }
.comment-submission-message { overflow: hidden; transition: height 0.3s; }

/* 7.3 카테고리/태그 스타일 */
.category-post-count.fixed-width { font-size: 0.8em; color: var(--muted-color); font-weight: normal; min-width: 30px; display: inline-block; }
.post-date-info.fixed-height { min-height: 60px; }
.cat-links { display: flex; align-items: center; font-size: 14px; color: var(--muted-color); margin-bottom: 8px; gap: 6px; font-weight: 400; }
.cat-links::before { content: "📂"; font-size: 14px; color: #888; margin-right: 4px; }
.cat-links a { color: var(--text-color); background: #f8f9fa; border: 1px solid var(--border-color); border-radius: 4px; padding: 3px 8px; margin-right: 6px; text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.2s ease; }
.tags-links { position: relative; font-size: 13px; color: var(--muted-color); margin-bottom: 15px; font-weight: 400; padding-left: 22px; line-height: 1.6; }
.tags-links::before { content: "🏷️"; font-size: 15px; color: #888; position: absolute; left: 0; top: 50%; transform: translateY(-50%); line-height: 1; }
.tags-links a { display: inline-block; background: #f1f3f4; color: #5f6368; border: 1px solid #dadce0; border-radius: 12px; padding: 4px 8px; margin: 2px 3px 4px 0; text-decoration: none; font-size: 12px; font-weight: 400; transition: all 0.2s ease; line-height: 1.3; }
.tags-links a:hover { background: #e8f0fe; color: var(--secondary-color); border-color: var(--secondary-color); }

/*--------------------------------------------------------------
# 8. FAQ 스타일링
--------------------------------------------------------------*/
.saswp-faq-block-section ol { margin: 0; padding: 0; }
.saswp-faq-block-section p { margin-bottom: 5px; }
.saswp-faq-answer-text { margin-top: 0; }
.saswp-faq-block-section .saswp-faq-answer-text:last-of-type { margin-bottom: 20px; }

/*--------------------------------------------------------------
# 9. 브레드크럼
--------------------------------------------------------------*/
.rank-math-breadcrumb { background: none; border: none; padding: 8px 0 15px 0; margin: 0 0 15px 0; font-size: 16px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.rank-math-breadcrumb p { margin: 0; line-height: 1.5; }
.rank-math-breadcrumb a { color: var(--text-color); text-decoration: none; transition: color var(--transition-speed) ease; }
.rank-math-breadcrumb a:hover { color: var(--primary-color); text-decoration: underline; }
.rank-math-breadcrumb span { margin: 0 5px; }

/*--------------------------------------------------------------
# 10. 애니메이션 및 효과
--------------------------------------------------------------*/
/* 10.1 헤더 물결 애니메이션 */
.site-header::before, .site-header::after { content: ''; position: absolute; left: 0; width: 202%; height: 150px; will-change: transform; backface-visibility: hidden; transform-origin: 0 50%; z-index: -1; }
.site-header::before { background: rgba(200,200,220,0.9); clip-path: polygon(0% 50%, 25% 65%, 50% 50%, 75% 65%, 100% 50%, 100% 100%, 0% 100%); bottom: -5px; animation: wave-animation-1 15s ease-in-out infinite; }
.site-header::after { background: rgba(10,10,10,0.1); opacity: 0.8; clip-path: polygon(0% 55%, 25% 70%, 50% 55%, 75% 70%, 100% 55%, 100% 100%, 0% 100%); bottom: -25px; animation: wave-animation-2 12s ease-in-out infinite; }
@keyframes wave-animation-1 { 0% { transform: translateX(0); } 50% { transform: translateX(-25%); } 100% { transform: translateX(-50%); } }
@keyframes wave-animation-2 { 0% { transform: translateX(0); } 50% { transform: translateX(-20%); } 100% { transform: translateX(-50%); } }

/* 10.2 버튼 펄스 애니메이션 */
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/*--------------------------------------------------------------
# 11. 커스텀 버튼
--------------------------------------------------------------*/
/* 11.1 공통 버튼 스타일 */
.wp-block-buttons[class*="Btn"] > .wp-block-button { width: 85%; margin: 0 auto; }
.wp-block-buttons[class*="Btn"] .wp-block-button__link { display: block; padding: 18px 30px; font-size: 18px; text-align: center; text-decoration: none; color: var(--white); border: none; border-radius: 20px; font-weight: bold; white-space: nowrap; cursor: pointer; transition: all 0.4s ease; animation: pulse 2s infinite; box-sizing: border-box; will-change: transform; contain: layout style paint; }
.wp-block-buttons[class*="Btn"] .wp-block-button__link:hover,
.wp-block-buttons[class*="Btn"] .wp-block-button__link:focus { color: var(--white); transform: scale(1.03); }
.wp-block-buttons[class*="Btn"] .wp-block-button__link:focus { outline: 2px solid var(--white); outline-offset: 2px; }

/* 11.2 개별 버튼 색상 */
.wp-block-buttons.blueBtn .wp-block-button__link { background-color: var(--btn-blue); box-shadow: 0 0 20px rgba(0,89,166,0.5); }
.wp-block-buttons.blueBtn .wp-block-button__link:hover { background-color: var(--btn-blue-hover); box-shadow: 0 0 25px rgba(0,84,164,0.7); }
.wp-block-buttons.greenBtn .wp-block-button__link { background-color: var(--btn-green); box-shadow: 0 0 20px rgba(0,178,47,0.5); }
.wp-block-buttons.greenBtn .wp-block-button__link:hover { background-color: var(--btn-green-hover); box-shadow: 0 0 25px rgba(0,178,47,0.7); }
.wp-block-buttons.redBtn .wp-block-button__link { background-color: var(--btn-red); box-shadow: 0 0 20px rgba(255,0,0,0.5); }
.wp-block-buttons.redBtn .wp-block-button__link:hover { background-color: var(--btn-red-hover); box-shadow: 0 0 25px rgba(255,0,0,0.7); }
.wp-block-buttons.orangeBtn .wp-block-button__link { background-color: var(--btn-orange); box-shadow: 0 0 20px rgba(242,140,56,0.5); }
.wp-block-buttons.orangeBtn .wp-block-button__link:hover { background-color: var(--btn-orange-hover); box-shadow: 0 0 25px rgba(242,140,56,0.7); }
.wp-block-buttons.purpleBtn .wp-block-button__link { background-color: var(--btn-purple); box-shadow: 0 0 20px rgba(106,27,154,0.5); }
.wp-block-buttons.purpleBtn .wp-block-button__link:hover { background-color: var(--btn-purple-hover); box-shadow: 0 0 25px rgba(106,27,154,0.7); }

/*--------------------------------------------------------------
# 12. 반응형 디자인 (미디어 쿼리)
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  /* 관리자바 */
  #wpadminbar { position: fixed; }
  .admin-bar .main-navigation { top: 46px; }
  .admin-bar .sidebar .inside-right-sidebar { top: 116px; }
  
  /* 타이틀 */
  .main-title { font-size: 30px; }
  
  /* 페이지네이션 */
  .paging-navigation { gap: 3px; padding: 20px 10px; margin-left: -20px; margin-right: -20px; }
  .paging-navigation .page-numbers { padding: 6px 8px; font-size: 13px; min-width: 32px; }
  .page-numbers:not(.prev):not(.next):not(.current) { display: none; }
  .page-numbers:not(.prev):not(.next):not(.current):nth-child(2),
  .page-numbers:not(.prev):not(.next):not(.current):nth-last-child(2) { display: inline-block; }

  /* 본문 리스트 (SNS 버튼 깨짐 방지) */
  .entry-content .post-content ul,
  .entry-content .post-content ol,
  .entry-content > ul:not(.sns-go ul),
  .entry-content > ol:not(.sns-go ol) { padding-left: 0; margin-left: 0.15em; }
  .entry-content .post-content li,
  .entry-content > ul:not(.sns-go ul) > li,
  .entry-content > ol:not(.sns-go ol) > li { margin-left: 1.2em; }
 
  /* SNS 공유 버튼 */
  .sns-go { margin-bottom: 25px; }
  .sns-go ul { margin: 0 0 15px 0; }
	
  /* 이미지 및 갤러리 */
  .wp-block-image, .wp-block-gallery, .blocks-gallery-grid, .gallery { margin: 1.2em 0; }
  .blocks-gallery-item figcaption, .wp-block-image figcaption, .gallery-caption { font-size: 0.85em; }
  .blocks-gallery-grid { gap: 0.7em; }
  
  /* 헤더 애니메이션 */
  .site-header::before, .site-header::after { height: 100px; }
  .site-header::before { bottom: -3px; animation: wave-animation-1 12s cubic-bezier(0.4,0.5,0.6,0.5) infinite; }
  .site-header::after { bottom: -18px; animation: wave-animation-2 9s cubic-bezier(0.4,0.5,0.6,0.5) infinite; }

  /* 이전/다음글 */
  #nav-below { flex-direction: column; gap: 0.75rem; }
  .nav-previous, .nav-next { padding: 1.25rem; }
  
  /* 푸터 */
  .legal-links { font-size: 12px; margin-top: 12px; }
  .legal-links a { padding: 0 3px; }
  .separator { margin: 0 3px; }
  
  /* 작성자 정보 */
  .author-section { padding: 15px; }
  .author-info { gap: 12px; margin-bottom: 12px; }
  .author-avatar { width: 50px; height: 50px; }
  .author-name { font-size: 16px; }
  .site-description { font-size: 13px; }
  .copyright-info { padding-top: 12px; }
  .copyright-info p { font-size: 14px; }

  /* 특수 박스 */
  .tip, .faqs, .caution, .reference { margin: 45px 0 20px; padding: 25px; }
  .tip::before, .faqs::before, .caution::before, .reference::before { width: 50px; height: 50px; font-size: 36px; }
  .tip::after, .faqs::after, .caution::after, .reference::after { font-size: 20px; left: 90px; top: 12px; }
  
  /* 정보 텍스트 박스 */
  .text-box { border-width: 3px; padding: 15px; margin: 45px -5px; }
  .text-box::before { font-size: 1.1em; top: -18px; left: 5%; padding: 0 8px; background-color: var(--white); }
  .text-box #myText { font-size: 1.1rem; line-height: 1.8rem; word-break: keep-all; }

  /* 커스텀 버튼 */
  .wp-block-buttons[class*="Btn"] > .wp-block-button { width: 90%; }
  .wp-block-buttons[class*="Btn"] .wp-block-button__link { padding: 15px 25px; font-size: 16px; }

  /* 펄스 애니메이션 접근성 */
  @media (prefers-reduced-motion: no-preference) { @keyframes pulse { 50% { transform: scale(1.03); } } }
  
  /* 애드센스 */
  .adsbygoogle { min-height: 100px; }
}

@media only screen and (max-width: 768px) {
  /* 타이틀 */
  .main-title { font-size: 28px; }
  
  /* 페이지네이션 */
  .paging-navigation .page-numbers { padding: 5px 6px; font-size: 12px; min-width: 28px; }
  
  /* 정보 텍스트 박스 (사용자 수정 최종 반영) */
  .text-box { border-width: 2px; padding: 12px; margin: 35px -10px; }
  .text-box::before { content: "ℹ️"; font-size: 1.2em; top: -22px; left: 3%; padding: 0 6px; background-color: var(--white); }
  .text-box #myText { font-size: 1rem; line-height: 1.6rem; }

  /* 커스텀 버튼 */
  .wp-block-buttons[class*="Btn"] > .wp-block-button { width: 95%; }
  .wp-block-buttons[class*="Btn"] .wp-block-button__link { padding: 12px 20px; font-size: 15px; border-radius: 15px; }

  /* 헤더 애니메이션 */
  .site-header::before { animation: wave-animation-1 14s ease-in-out infinite; bottom: -2px; }
  .site-header::after { animation: wave-animation-2 11s ease-in-out infinite; bottom: -20px; }

  /* 펄스 애니메이션 접근성 */
  @media (prefers-reduced-motion: no-preference) { @keyframes pulse { 50% { transform: scale(1.02); } } }

  /* SNS 공유 버튼 */
  .sns-go { --button-size: 32px; --button-gap: 3px; }
  
  /* 애드센스 */
  .adsbygoogle { min-height: 80px; }
}

/* ==========================================================================
   호환성 보완 코드 블록 (@supports)
   ========================================================================== */

/*
 * `gap` 속성을 지원하지 않는 브라우저에서만 `margin`으로 간격을 대체합니다.
 * 이 코드는 이중 간격 문제를 해결하고 모든 현대 브라우저에서 일관된 레이아웃을 보장합니다.
 */

@supports not (gap: 1rem) {
  /* 2.6 이전/다음글 보완 */
  #nav-below > * + * {
    margin-left: 1rem;
  }

  /* 2.8 작성자 정보 보완 */
  .author-info > * + * {
    margin-left: 15px;
  }
  
  /* 5.3 페이지네이션 보완 */
  .paging-navigation > * + * {
    margin-left: 5px;
  }
  
  /* 7.3 카테고리 링크 보완 */
  .cat-links > * + * {
    margin-left: 6px;
  }
}

/* 반응형에서도 gap을 지원하지 않을 경우를 대비한 보완 코드 */
@media only screen and (max-width: 1024px) {
    @supports not (gap: 0.75rem) {
      #nav-below > * + * {
          margin-top: 0.75rem; /* flex-direction이 column이므로 margin-top 사용 */
          margin-left: 0; /* 수평 margin 초기화 */
      }
    }
}