/* ================================================================== */
/* MOGEUL CSS Core System v4.8-HARMONY                            */
/* @작업일시: 2025-09-03                                              */
/* @작업목표: CSS 선택자 우선순위(Specificity) 강화                  */
/* @변경사항: 모든 모듈 선택자에 .post-article 상위 선택자 추가      */
/* ================================================================== */

/* ================================================================== */
/* MOGEUL Design System Guide (v2.2)                                  */
/* @description                                                        */
/* - 이 가이드는 MOGEUL의 시각적 일관성을 보장하는 절대적 규칙서입니다. */
/* - 모든 CSS 코드는 아래에 정의된 변수 사용 규칙을 반드시 준수해야 합니다. */
/* ================================================================== */
/*
 * [1] Core Palette Variables (핵심 팔레트 변수)
 * - 사용처: 링크, 제목, 배경 등 테마의 핵심 색상 정의
 *
 * [2] State Variables (상태 변수)
 * - 사용처: 성공, 오류, 경고 등 시스템 알림 상태
 *
 * [3] Shape & Style Variables (형태 및 스타일 변수)
 * - 사용처: 모서리 둥글기, 그림자 등 컴포넌트의 시각적 스타일
 *
 * [4] Spacing System Variables (간격 시스템 변수)
 * - 사용처: margin, padding 등 모든 컴포넌트의 내/외부 여백
 *
 * [5] Typography System Variables (타이포그래피 시스템 변수)
 * - 사용처: font-size, font-weight 등 모든 텍스트 관련 스타일
 *
 * [6] Layout System Variables (레이아웃 시스템 변수)
 * - 사용처: 콘텐츠 최대 너비, 반응형 분기점 등 전체 레이아웃 구조
 *
 * [7] Interaction & Visual Effect Variables (인터랙션 및 시각 효과 변수)
 * - 사용처: transition 속도, z-index 등 동적/계층적 스타일
 */

/* ================================== */
/* :root 변수 (전역 디자인 시스템 정의) */
/* ================================== */
:root {
    /* 1. Core Palette & State Variables */
    --mogeul-state-success-bg: #e6fffa;
    --mogeul-state-success-text: #004d40;
    --mogeul-state-error-bg: #ffebee;
    --mogeul-state-error-text: #c62828;
    --mogeul-state-warning-bg: #FFFBE5;
    --mogeul-state-warning-text: #665200;
    --mogeul-state-warning-border: #FBC02D;
    --mogeul-text-color: #212529;
    --mogeul-text-light-color: #495057;
    --mogeul-background-color: #fff;
    --mogeul-highlight-bg-color: #fffde7;

    /* 2. Shape & Style Variables */
    --mogeul-border-radius-sm: 4px;	
    --mogeul-border-radius-default: 8px;
    --mogeul-box-shadow-default: 0 4px 12px rgba(0,0,0,0.05);

    /* 3. Spacing System */
    --mogeul-spacing-xs: 4px;
    --mogeul-spacing-sm: 8px;
    --mogeul-spacing-smd: 12px;
    --mogeul-spacing-md: 16px;
    --mogeul-spacing-lg: 24px;
    --mogeul-spacing-xl: 32px;
    --mogeul-spacing-xxl: 40px;

    /* 4. Typography System */
    --mogeul-font-size-base: 17px;
    --mogeul-font-size-md: 16px;
    --mogeul-font-size-sm: 15px;
    --mogeul-font-size-xs: 14px;
    --mogeul-font-size-h2: 24px;
    --mogeul-font-size-h3: 20px;
    --mogeul-font-size-h4: 18px;
    --mogeul-font-weight-regular: 400;
    --mogeul-font-weight-medium: 500;
    --mogeul-font-weight-bold: 700;
    --mogeul-line-height-base: 1.75;
    --mogeul-line-height-heading: 1.4;

    /* 5. Layout System */
    --mogeul-container-max-width: 800px;
    /* @NOTE: 아래 변수는 CSS Media Query에 직접 사용 불가, JS 참조 및 가이드용 */
    --mogeul-breakpoint-md: 767px;
    --mogeul-breakpoint-sm: 480px;

    /* 6. Interaction & Visual Effect */
    --mogeul-interactive-element-inactive-bg: #adb5bd;
    --mogeul-transition-duration-default: 0.2s;
    --mogeul-z-index-toast: 1000;

    --mogeul-table-stripe-color: #f9f9f9; /* 매우 옅고 중립적인 회색 */	
}

/* ================================== */
/* 기본 요소 스타일                   */
/* ================================== */
.post-article {
    font-family: 'Noto Sans KR', sans-serif;
    line-height: var(--mogeul-line-height-base);
    max-width: var(--mogeul-container-max-width);
    margin: 0 auto;
    font-size: var(--mogeul-font-size-base);
    color: var(--mogeul-text-color);
    box-sizing: border-box;
}
.post-article p { margin-bottom: var(--mogeul-spacing-md); }
.post-article h1, .post-article h2, .post-article h3, .post-article h4 { margin: 0; font-weight: var(--mogeul-font-weight-bold); }
.post-article ul, .post-article ol { margin: 0 0 var(--mogeul-spacing-md) var(--mogeul-spacing-lg); padding: 0; }
.post-article li { margin-bottom: var(--mogeul-spacing-sm); }
.post-article section, .post-article .mogeul-module, .post-article nav, .post-article header, .post-article aside { margin-bottom: var(--mogeul-spacing-lg); }

.post-article .featured-image {
    width: 100%;
    height: auto;
    border-radius: var(--mogeul-border-radius-default);
    margin: var(--mogeul-spacing-lg) 0;
}

.post-article a {
    color: var(--mogeul-link-color);
    text-decoration: underline;
    font-weight: var(--mogeul-font-weight-medium);
    transition: all var(--mogeul-transition-duration-default) ease-in-out;
}
.post-article a:hover, .post-article a:focus-visible {
    text-decoration: underline;
    filter: brightness(120%);
}

.post-article table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--mogeul-spacing-lg) 0;
    font-size: var(--mogeul-font-size-md);
    line-height: var(--mogeul-line-height-base);
}
.post-article table th, .post-article table td {
    border: 1px solid var(--mogeul-border-color);
    padding: var(--mogeul-spacing-sm) var(--mogeul-spacing-md);
    text-align: left;
}
.post-article table th {
    background-color: var(--mogeul-surface-color);
    font-weight: var(--mogeul-font-weight-bold);
    color: var(--mogeul-strong-text-color);
}
.post-article table tbody tr:nth-child(even) {
    background-color: var(--mogeul-table-stripe-color);
}


.post-article .top-space { font-size: var(--mogeul-spacing-sm); line-height: 1; margin: 0; padding: 0; }
.post-article .section-break { height: 1em; font-size: var(--mogeul-font-size-base); }
.post-article .divider { border-top: 1px dashed var(--mogeul-border-color); margin: var(--mogeul-spacing-lg) 0; }
.post-article .highlight { background-color: var(--mogeul-highlight-bg-color); padding: var(--mogeul-spacing-xs) var(--mogeul-spacing-sm); border-radius: 3px; font-weight: var(--mogeul-font-weight-bold); }

/* ================================== */
/* 진입점 요약 스타일                 */
/* ================================== */
.post-article .mogeul-entry-summary {
    font-size: var(--mogeul-font-size-h4);
    line-height: var(--mogeul-line-height-base);
    font-weight: var(--mogeul-font-weight-medium);
    color: var(--mogeul-text-light-color);
    background-color: var(--mogeul-background-color);
    padding: var(--mogeul-spacing-lg) var(--mogeul-spacing-xl);
    margin: var(--mogeul-spacing-lg) 0;
    border-radius: var(--mogeul-border-radius-default);
    position: relative;
}
.post-article .mogeul-entry-summary::before {
    content: '“';
    position: absolute;
    top: var(--mogeul-spacing-sm);
    left: var(--mogeul-spacing-sm);
    font-size: 50px;
    color: var(--mogeul-border-color);
    font-family: serif;
    line-height: 1;
}
.post-article .mogeul-entry-summary::after {
    content: '”';
    position: absolute;
    bottom: var(--mogeul-spacing-sm);
    right: var(--mogeul-spacing-sm);
    font-size: 50px;
    color: var(--mogeul-border-color);
    font-family: serif;
    line-height: 1;
    transform: translateY(20px); /* 원하는 만큼 아래로 이동 */
	
}

/* ================================== */
/* 제목 스타일                      */
/* ================================== */
.post-article .h2-title {
    font-size: var(--mogeul-font-size-h2);
    line-height: var(--mogeul-line-height-heading);
    margin: var(--mogeul-spacing-xxl) 0 var(--mogeul-spacing-md);
    padding: 0 0 var(--mogeul-spacing-smd) 0;
    color: var(--mogeul-text-color);
    position: relative;
}
.post-article .h2-title::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--mogeul-border-color);
}
.post-article .h2-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 77px;
    height: 5px;
    background-color: var(--mogeul-primary-color);
    border-radius: 2px;
}
.post-article .h3-title {
    font-size: var(--mogeul-font-size-h3);
    font-weight: var(--mogeul-font-weight-bold);
    margin: var(--mogeul-spacing-xl) 0 var(--mogeul-spacing-sm);
    color: var(--mogeul-strong-text-color);
    line-height: var(--mogeul-line-height-heading);
}
.post-article .mogeul-component-title {
    font-size: var(--mogeul-font-size-h4);
    font-weight: var(--mogeul-font-weight-bold);
    color: var(--mogeul-strong-text-color);
    margin: 0 0 var(--mogeul-spacing-md) 0;
    text-align: center;
}

/* ================================== */
/* 목차(TOC) 스타일                   */
/* ================================== */
.post-article .toc-container {
    background-color: var(--mogeul-surface-color);
    border: 1px solid var(--mogeul-border-color);
    padding: var(--mogeul-spacing-lg) var(--mogeul-spacing-lg) var(--mogeul-spacing-lg) var(--mogeul-spacing-lg);
    border-radius: var(--mogeul-border-radius-default);
    margin: var(--mogeul-spacing-xl) 0;
}
.post-article .toc-container .toc-title {
    font-size: var(--mogeul-font-size-h4);
    color: var(--mogeul-strong-text-color);
    margin: 0 0 var(--mogeul-spacing-md) 0;
    padding-bottom: var(--mogeul-spacing-sm);
    border-bottom: 2px solid var(--mogeul-border-color);
}
.post-article .toc-container .toc-list {
    margin: 0 0 0 var(--mogeul-spacing-lg);
    padding: 0;
}
.post-article .toc-container .toc-list li {
    margin-bottom: var(--mogeul-spacing-sm);
    font-size: var(--mogeul-font-size-md);
}
.post-article .toc-container .toc-list li:first-child { margin-top: var(--mogeul-spacing-md); }
.post-article .toc-container .toc-list li:last-child { margin-bottom: 0; }
.post-article .toc-container .toc-list a {
    text-decoration: none;
    color: var(--mogeul-text-light-color);
    transition: color var(--mogeul-transition-duration-default) ease;
}
.post-article .toc-container .toc-list a:hover, .post-article .toc-container .toc-list a:focus-visible {
    color: var(--mogeul-primary-color);
    text-decoration: underline;
}

/* ================================== */
/* 정보 박스 스타일                   */
/* ================================== */
.post-article .tip-box, .post-article .warning-box, .post-article .analysis-box, .post-article .example-box {
    padding: var(--mogeul-spacing-md);
    margin: var(--mogeul-spacing-lg) 0;
    border-radius: var(--mogeul-border-radius-default);
}
.post-article .tip-box {
    background-color: var(--mogeul-surface-color);
    border-left: var(--mogeul-spacing-xs) solid var(--mogeul-primary-color);
}
.post-article .warning-box {
    background-color: var(--mogeul-state-warning-bg);
    border-left: var(--mogeul-spacing-xs) solid var(--mogeul-state-warning-border);
}
.post-article .example-box {
    background-color: var(--mogeul-surface-color);
    border: 1px solid var(--mogeul-border-color);
}
.post-article .analysis-box {
    background-color: transparent;
    border: none;
    border-left: var(--mogeul-spacing-xs) solid var(--mogeul-border-color);
    border-right: var(--mogeul-spacing-xs) solid var(--mogeul-border-color);	
    padding-left: var(--mogeul-spacing-lg);
}
.post-article .box-title {
    font-size: var(--mogeul-font-size-base);
    margin: 0 0 var(--mogeul-spacing-sm) 0;
    color: var(--mogeul-strong-text-color);
    display: flex;
    align-items: center;
}
.post-article .warning-box .box-title {
    color: var(--mogeul-state-warning-text);
}
.post-article .box-title-icon {
    margin-right: var(--mogeul-spacing-sm);
    display: inline-flex;
    align-items: center;
}
.post-article .box-title-icon svg { fill: currentColor; }
.post-article .tip-box .box-title-icon, .post-article .analysis-box .box-title-icon { color: var(--mogeul-primary-color); }
.post-article .warning-box .box-title-icon { color: var(--mogeul-state-warning-border); }
.post-article .example-box .box-title-icon { color: var(--mogeul-strong-text-color); }
.post-article .box-content p {
    margin: 0;
    font-size: var(--mogeul-font-size-md);
    line-height: var(--mogeul-line-height-base);
}
.post-article .example-box .formula-display {
    background-color: var(--mogeul-text-color);
    color: #ECEFF1;
    border: 1px solid #37474F;
    padding: var(--mogeul-spacing-smd);
    border-radius: var(--mogeul-spacing-xs);
    font-family: monospace;
    margin-top: var(--mogeul-spacing-sm);      
    margin-bottom: var(--mogeul-spacing-sm);
}

/* ================================== */
/* 핵심 요약 카드 스타일              */
/* ================================== */
.post-article .summary-card-container {
    padding: var(--mogeul-spacing-lg) 0;
    margin: var(--mogeul-spacing-lg) 0;
}
.post-article .summary-card-container .summary-card {
    width: 100%;
    background-color: var(--mogeul-background-color);
    border-radius: var(--mogeul-border-radius-default);
    border: 1px solid var(--mogeul-border-color);
    border-top: var(--mogeul-spacing-xs) solid var(--mogeul-primary-color);
    box-shadow: var(--mogeul-box-shadow-default);
    overflow: hidden;
}
.post-article .summary-card-container .summary-card .card-header {
    background-color: var(--mogeul-surface-color);
    padding: var(--mogeul-spacing-md) var(--mogeul-spacing-lg);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--mogeul-border-color);
}
.post-article .summary-card-container .summary-card .card-header .card-header-icon {
    font-size: var(--mogeul-font-size-h2);
    color: var(--mogeul-primary-color);
    margin-right: var(--mogeul-spacing-smd);
}
.post-article .summary-card-container .summary-card .card-header h3 {
    font-size: var(--mogeul-font-size-h3);
    line-height: var(--mogeul-line-height-heading);
    color: var(--mogeul-strong-text-color);
}
.post-article .summary-card-container .summary-card .card-content {
    padding: var(--mogeul-spacing-lg);
    font-size: var(--mogeul-font-size-md);
    line-height: var(--mogeul-line-height-base);
    color: var(--mogeul-text-color);
}
.post-article .summary-card-container .summary-card .card-content .section {
    margin-bottom: var(--mogeul-spacing-sm);
}
.post-article .summary-card-container .summary-card .card-content .section:last-child { margin-bottom: 0; }
.post-article .summary-card-container .summary-card .card-content strong {
    color: var(--mogeul-strong-text-color);
    font-weight: var(--mogeul-font-weight-bold);
}
.post-article .summary-card-container .summary-card .card-content .section h5 {
    font-size: var(--mogeul-font-size-base);
    color: var(--mogeul-strong-text-color);
    margin: 0 0 var(--mogeul-spacing-sm) 0;
    font-weight: var(--mogeul-font-weight-bold);
}
.post-article .summary-card-container .summary-card .card-content .section p {
    margin: 0;
    font-size: var(--mogeul-font-size-md);
}
.post-article .summary-card-container .summary-card .card-footer {
    padding: var(--mogeul-spacing-md) var(--mogeul-spacing-lg);
    font-size: var(--mogeul-font-size-xs);
    color: var(--mogeul-text-light-color);
    text-align: center;
    border-top: 1px dashed var(--mogeul-border-light-color);
    background-color: var(--mogeul-surface-light-color);
}

/* ================================== */
/* FAQ & 작성자 정보 스타일           */
/* ================================== */
.post-article .faq-accordion .faq-item {
    margin-bottom: var(--mogeul-spacing-sm);
    border-radius: 6px;
    border: 1px solid var(--mogeul-border-light-color);
    background-color: var(--mogeul-surface-light-color);
    overflow: hidden;
}

/* [수정] Flexbox 레이아웃으로 업데이트된 FAQ 버튼 스타일 */
.post-article .faq-accordion .faq-q button {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: var(--mogeul-spacing-md);
    font-weight: var(--mogeul-font-weight-bold);
    font-size: var(--mogeul-font-size-base);
    color: var(--mogeul-strong-text-color);
    cursor: pointer;
    margin: 0;
    transition: background-color var(--mogeul-transition-duration-default);

    /* Flexbox 속성 적용 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mogeul-spacing-md);
}

.post-article .faq-accordion .faq-q button[aria-expanded="true"],
.post-article .faq-accordion .faq-q button:hover,
.post-article .faq-accordion .faq-q button:focus-visible {
    background-color: var(--mogeul-primary-bg-light);
}

/* [수정] Flex 아이템으로 업데이트된 아이콘 스타일 */
.post-article .faq-accordion .faq-q button::after {
    content: '+';
    font-size: var(--mogeul-font-size-h3);
    transition: transform 0.3s ease-out;
    flex-shrink: 0; /* 아이콘이 찌그러지지 않도록 설정 */
}

/* [수정] Flex 레이아웃에 맞게 transform 속성 단순화 */
.post-article .faq-accordion .faq-q button[aria-expanded="true"]::after {
    transform: rotate(45deg);
}

.post-article .faq-accordion .faq-a {
    color: var(--mogeul-text-light-color);
    padding: 0 var(--mogeul-spacing-md);
    transition: max-height 0.3s ease-out;
    max-height: 0;
    overflow: hidden;
    background-color: var(--mogeul-background-color);
    font-size: var(--mogeul-font-size-md);	
}
.post-article .faq-accordion .faq-a .faq-a-content {
    padding: var(--mogeul-spacing-md) 0;
}
.post-article .faq-accordion .faq-a p { margin: 0; }

.post-article .single-faq-item {
    border-bottom: 1px dashed var(--mogeul-border-color);
    padding: var(--mogeul-spacing-md) 0;
    margin-bottom: var(--mogeul-spacing-lg);
}
.post-article .single-faq-item:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.post-article .single-faq-item .faq-q-single {
    font-weight: var(--mogeul-font-weight-bold);
    font-size: var(--mogeul-font-size-md);
    color: var(--mogeul-primary-color);
    margin: 0 0 var(--mogeul-spacing-sm) 0;
}
.post-article .single-faq-item .faq-q-single::before { content: 'Q: '; }
.post-article .single-faq-item .faq-a-single p {
    color: var(--mogeul-text-light-color);
    margin: 0;
    padding-left: var(--mogeul-spacing-sm);
}
.post-article .single-faq-item .faq-a-single p::before { content: 'A: '; font-weight: var(--mogeul-font-weight-bold); }

.post-article .author-bio {
    background-color: var(--mogeul-surface-color);
    border: 1px solid var(--mogeul-border-color);
    padding: var(--mogeul-spacing-lg);
    border-radius: var(--mogeul-border-radius-default);
    margin-top: var(--mogeul-spacing-xxl);
}
.post-article .author-bio .h3-title {
    margin-top: 0;
    margin-bottom: var(--mogeul-spacing-sm);
    font-size: var(--mogeul-font-size-h4);
}
.post-article .author-bio p {
    margin-bottom: 0;
    font-size: var(--mogeul-font-size-sm);
    line-height: var(--mogeul-line-height-base);
}

.post-article .share-buttons, .post-article .share-buttons-top {
    background-color: var(--mogeul-surface-light-color);
    padding: var(--mogeul-spacing-lg);
    border-radius: var(--mogeul-border-radius-default);
    border: 1px solid var(--mogeul-border-light-color);	
    text-align: center;
    margin-top: var(--mogeul-spacing-xxl);
}
.post-article .share-buttons.share-buttons-top {
    margin-top: 0;
    margin-bottom: var(--mogeul-spacing-lg);
    padding: var(--mogeul-spacing-md);
}
.post-article .share-buttons .share-title, .post-article .share-buttons-top .share-title {
    font-size: var(--mogeul-font-size-md);
    font-weight: var(--mogeul-font-weight-bold);
    color: var(--mogeul-text-light-color);
    margin: 0 0 var(--mogeul-spacing-md) 0;
}
.post-article .share-buttons .share-list, .post-article .share-buttons-top .share-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--mogeul-spacing-md);
}
.post-article .share-buttons .share-list li, .post-article .share-buttons-top .share-list li {
    position: relative;
    margin-bottom: 0;
}
.post-article .share-buttons .share-list a, .post-article .share-buttons-top .share-list a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    text-decoration: none;
    transition: transform var(--mogeul-transition-duration-default) ease, filter var(--mogeul-transition-duration-default) ease;
}
.post-article .share-buttons .share-list a:hover, .post-article .share-buttons-top .share-list a:hover, .post-article .share-buttons .share-list a:focus-visible, .post-article .share-buttons-top .share-list a:focus-visible {
    transform: scale(1.1);
}
.post-article .share-list .share-kakao { background-color: #FEE500; }
.post-article .share-list .share-kakao svg path { fill: #000; }
.post-article .share-list .share-nblog { background-color: #00C73C; }
.post-article .share-list .share-band { background-color: #00C73C; }
.post-article .share-list .share-x { background-color: #000000; }
.post-article .share-list .share-facebook { background-color: #1877F2; }
.post-article .share-list .share-url { background-color: #6c757d; }
.post-article .share-list .share-x svg path, .post-article .share-list .share-facebook svg path, .post-article .share-list .share-url svg path, .post-article .share-list .share-band svg path, .post-article .share-list .share-nblog svg path {
    fill: #fff;
}
/* 모바일 대응 
.post-article .share-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}*/

.post-article .share-list li a {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

/* ================================== */
/* 출처 표기 및 면책 조항 박스        */
/* ================================== */
.post-article .source-attribution-box {
    margin: var(--mogeul-spacing-xxl) 0;
    padding: var(--mogeul-spacing-lg);
    border: 1px solid var(--mogeul-border-color);
    border-radius: var(--mogeul-border-radius-default);
    background-color: var(--mogeul-surface-light);
}

.post-article .source-attribution-box p {
    font-size: var(--mogeul-font-size-sm);
    color: var(--mogeul-text-light-color);
    line-height: var(--mogeul-line-height-base);
    margin: 0;
	text-align: center;
	font-style: italic;
}

.post-article .source-attribution-box p:first-of-type {
    margin-bottom: var(--mogeul-spacing-smd);
}

.post-article .source-attribution-box a {
    color: var(--mogeul-link-color);
    text-decoration: underline;
    font-weight: var(--mogeul-font-weight-medium);
}

/* ================================== */
/* 토픽 클러스터 (관련 글) 스타일     */
/* ================================== */
.post-article .topic-cluster-box {
    padding: var(--mogeul-spacing-lg);
    border-radius: var(--mogeul-border-radius-default);
    background-color: var(--mogeul-surface-light-color);
    border: 1px dashed var(--mogeul-primary-color);
}
.post-article .topic-cluster-box .topic-cluster-title {
    font-size: var(--mogeul-font-size-h4);
    font-weight: var(--mogeul-font-weight-bold);
    margin: 0 0 var(--mogeul-spacing-md) 0;
    color: var(--mogeul-strong-text-color);
}
.post-article .topic-cluster-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.post-article .topic-cluster-box li {
    padding-left: var(--mogeul-spacing-lg);
    position: relative;
    margin-bottom: var(--mogeul-spacing-sm);
}
.post-article .topic-cluster-box li:last-child {
    margin-bottom: 0;
}
.post-article .topic-cluster-box li::before {
    content: '🗓️';
    position: absolute;
    left: 0;
    top: 0;
}
.post-article .topic-cluster-box li a {
    text-decoration: none;
    font-weight: var(--mogeul-font-weight-medium);
    color: var(--mogeul-text-color);
}
.post-article .topic-cluster-box li a:hover {
    text-decoration: underline;
    color: var(--mogeul-primary-color);
}

/* [신규] 현재 글 항목(li.current-post)의 아이콘을 '핀'으로 변경하여 시각적 구분을 강화합니다. */
.post-article .topic-cluster-box li.current-post::before {
    content: '📌';
}

/* [신규] 현재 글의 텍스트(span)에 스타일을 적용합니다. */
.post-article .topic-cluster-box li.current-post .mogeul-related-item-text {
    font-weight: var(--mogeul-font-weight-bold); /* 텍스트를 굵게 처리 */
    color: var(--mogeul-text-color);           /* 링크가 아닌 일반 텍스트 색상 적용 */
    cursor: default;                           /* 마우스 커서를 기본 모양으로 변경하여 클릭 불가능함을 명시 */
    text-decoration: underline;                /* [추가] 밑줄 스타일 */
    text-underline-offset: 3px;                /* [추가] 밑줄과 텍스트 사이 간격 (가독성 향상) */
}

/* [추가] 새 탭으로 열리는 링크 아이콘 스타일 */
.post-article .mogeul-new-tab-icon {
    display: inline-block;
    font-size: 0.9em;
    font-weight: var(--mogeul-font-weight-regular); /* 링크 텍스트의 굵기 영향을 받지 않도록 일반 굵기로 설정 */
    vertical-align: text-top;                      /* 텍스트 위쪽에 자연스럽게 위치하도록 조정 */
    margin-left: 2px;
    text-decoration: none;                         /* 아이콘 자체에는 밑줄이 생기지 않도록 방지 */
}

/* 접근성을 위한 스크린 리더 전용 클래스 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* 클러스트 링크 자동화 [추가] 현재 게시물 표기용 클래스 */

/* ================================== */
/* 인터랙티브 모듈 스타일             */
/* ================================== */
.post-article .quiz-container {
    background-color: var(--mogeul-surface-color);
    border: 1px solid var(--mogeul-border-color);
    border-radius: var(--mogeul-border-radius-default);
    padding: var(--mogeul-spacing-lg);
}
.post-article .quiz-container .quiz-question p {
    font-size: var(--mogeul-font-size-h4);
    font-weight: var(--mogeul-font-weight-bold);
}
.post-article .quiz-container .quiz-options .quiz-option-button {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--mogeul-spacing-md);
    margin-bottom: var(--mogeul-spacing-sm);
    font-size: var(--mogeul-font-size-md);
    border-radius: 6px;
    border: 1px solid var(--mogeul-border-color);
    background-color: var(--mogeul-background-color);
	color: var(--mogeul-text-color); 
    cursor: pointer;
    transition: background-color var(--mogeul-transition-duration-default), border-color var(--mogeul-transition-duration-default), color var(--mogeul-transition-duration-default);
    position: relative;
    padding-left: 45px;
}
.post-article .quiz-container .quiz-options .quiz-option-button:last-child { margin-bottom: 0; }
.post-article .quiz-container .quiz-options .quiz-option-button:hover:not(:disabled),
.post-article .quiz-container .quiz-options .quiz-option-button:focus-visible:not(:disabled) {
    background-color: var(--mogeul-primary-bg-light);   /* 마우스 오버시 색상 */
}
.post-article .quiz-container .quiz-option-button::before {
    content: '';
    position: absolute;
    left: var(--mogeul-spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--mogeul-border-color);
    border-radius: 50%;
    transition: all var(--mogeul-transition-duration-default);
}
.post-article .quiz-container .quiz-option-button.correct {
    background-color: var(--mogeul-state-success-bg);
    border-color: var(--mogeul-state-success-text);
    color: var(--mogeul-state-success-text);
    font-weight: var(--mogeul-font-weight-bold);
}
.post-article .quiz-container .quiz-option-button.wrong {
    background-color: var(--mogeul-state-error-bg);
    border-color: var(--mogeul-state-error-text);
    color: var(--mogeul-state-error-text);
}
.post-article .quiz-container .quiz-option-button.correct::before {
    background-color: var(--mogeul-state-success-text);
    border-color: var(--mogeul-state-success-text);
    content: '✔';
    color: white;
    text-align: center;
    font-size: var(--mogeul-font-size-xs);
    line-height: 18px;
}
.post-article .quiz-container .quiz-option-button.wrong::before {
    background-color: var(--mogeul-state-error-text);
    border-color: var(--mogeul-state-error-text);
    content: '✖';
    color: white;
    text-align: center;
    font-size: var(--mogeul-font-size-xs);
    line-height: 18px;
}
.post-article .quiz-container .quiz-option-button:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}
.post-article .quiz-container .quiz-result {
    text-align: center;
    padding: var(--mogeul-spacing-lg);
    border: 2px dashed var(--mogeul-primary-color);
    background-color: var(--mogeul-background-color);
}
.post-article .quiz-container .quiz-result h4 {
    color: var(--mogeul-strong-text-color);
    margin: 0 0 var(--mogeul-spacing-sm);
    font-size: var(--mogeul-font-size-h3);
}
.post-article .quiz-container .quiz-result .quiz-reset-button {
    margin-top: var(--mogeul-spacing-lg);
    border: none;
    background-color: var(--mogeul-primary-color);
    color: white;
    border-radius: 5px;
    font-size: var(--mogeul-font-size-md);
    cursor: pointer;
    padding: var(--mogeul-spacing-sm) var(--mogeul-spacing-md);
}
.post-article .quiz-container .quiz-question.hidden, .post-article .quiz-container .quiz-result.hidden {
    display: none;
}

.post-article .ba-slider-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--mogeul-border-radius-default);
    box-shadow: var(--mogeul-box-shadow-default);
    user-select: none;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.post-article .ba-slider-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.post-article .ba-slider-container .ba-slider-before-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.post-article .ba-slider-container .ba-slider-before-wrapper img {
    max-width: none;
    position: absolute;
    top: 0;
    left: 0;
}
.post-article .ba-slider-container .ba-slider-handle-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--mogeul-spacing-xs);
    height: 100%;
    background: rgba(255,255,255,0.7);
    cursor: ew-resize;
}
.post-article .ba-slider-container .ba-slider-handle-wrapper::after {
    content: '↔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--mogeul-spacing-xxl);
    height: var(--mogeul-spacing-xxl);
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mogeul-font-size-h3);
    color: var(--mogeul-text-color);
}

.post-article .timeline-container {
    padding: 0 var(--mogeul-spacing-md);
}
.post-article .timeline-container .timeline-path {
    position: relative;
    padding: var(--mogeul-spacing-lg) 0;
    border-top: var(--mogeul-spacing-xs) solid var(--mogeul-border-light-color);
}
.post-article .timeline-container .timeline-milestones {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
}
.post-article .timeline-container .timeline-milestone button {
    background-color: var(--mogeul-interactive-element-inactive-bg);
    border: 3px solid var(--mogeul-background-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: background-color var(--mogeul-transition-duration-default);
    position: relative;
}
.post-article .timeline-container .timeline-milestone button::after {
    content: attr(data-year);
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: var(--mogeul-font-weight-bold);
    color: var(--mogeul-text-light-color);
}
.post-article .timeline-container .timeline-milestone button.active, .post-article .timeline-container .timeline-milestone button:hover, .post-article .timeline-container .timeline-milestone button:focus-visible {
    background-color: var(--mogeul-primary-color);
}
.post-article .timeline-container .timeline-content-area {
    margin-top: var(--mogeul-spacing-xxl);
    padding: var(--mogeul-spacing-lg);
    background-color: var(--mogeul-surface-light-color);
    border-radius: var(--mogeul-border-radius-default);
    min-height: 100px;
    border-top: 3px solid var(--mogeul-primary-color);
}
.post-article .timeline-container .timeline-content-area h4 {
    margin-top: 0;
    color: var(--mogeul-strong-text-color);
}

.post-article .expand-container .expand-controls {
    margin-bottom: var(--mogeul-spacing-sm);
}
.post-article .expand-container .expandable-box {
    border: 1px solid var(--mogeul-border-color);
    border-radius: var(--mogeul-border-radius-default);
    overflow: hidden;
    margin-bottom: var(--mogeul-spacing-sm);
}
.post-article .expand-container .expandable-box button {
    width: 100%;
    background-color: var(--mogeul-surface-light-color);
    border: none;
    padding: var(--mogeul-spacing-md); /* 원래의 패딩 값으로 복원 */
    font-weight: var(--mogeul-font-weight-bold);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--mogeul-transition-duration-default);
    font-size: var(--mogeul-font-size-md);
    color: var(--mogeul-strong-text-color);

    /* Flexbox 속성 추가 */
    display: flex;
    justify-content: space-between; /* 양쪽 끝으로 요소를 배치 */
    align-items: center;          /* 세로 중앙 정렬 */
    gap: var(--mogeul-spacing-md);         /* 텍스트와 아이콘 사이의 최소 간격 */
}
.post-article .expand-container .expandable-box button[aria-expanded="true"], .post-article .expand-container .expandable-box button:hover, .post-article .expand-container .expandable-box button:focus-visible {
    background-color: var(--mogeul-primary-bg-light);
}
.post-article .expand-container .expandable-box button::after {
    content: '+';
    font-size: var(--mogeul-font-size-h3);
    transition: transform 0.3s ease;
    flex-shrink: 0; /* 아이콘이 텍스트에 의해 찌그러지지 않도록 설정 */
}
.post-article .expand-container .expandable-box button[aria-expanded="true"]::after {
    transform: rotate(45deg);
}
.post-article .expand-container .expandable-box .expandable-content {
    background-color: var(--mogeul-background-color);
    padding: 0 var(--mogeul-spacing-lg);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
.post-article .expand-container .expandable-box .expandable-content p {
    padding: var(--mogeul-spacing-md) 0;
}

/* ================================== */
/* 정보 확장 모듈 제어 버튼 스타일 (수정됨) */
/* ================================== */
.post-article .expand-container .expand-controls button {
    /* 기본 스타일: 이미지 가이드 기반 */
    background-color: var(--mogeul-primary-color);
    color: var(--mogeul-background-color); /* #fff 값인 시스템 변수 사용 */
    border: none;
    padding: var(--mogeul-spacing-smd) var(--mogeul-spacing-lg); /* 버튼 높이 조정 */
    font-size: var(--mogeul-font-size-md);
    border-radius: var(--mogeul-border-radius-sm);
    cursor: pointer;
    transition: filter var(--mogeul-transition-duration-default) ease;
    font-weight: var(--mogeul-font-weight-bold);
    margin-right: var(--mogeul-spacing-xs); /* 버튼 간격 */
}

.post-article .expand-container .expand-controls button:last-child {
    margin-right: 0;
}

/* 상호작용 스타일 (호버 & 포커스) */
.post-article .expand-container .expand-controls button:hover,
.post-article .expand-container .expand-controls button:focus-visible {
    filter: brightness(110%); /* 시스템 내 다른 링크 호버 효과와 동일한 방식 적용 */
}

/* ================================== */
/* 토스트 알림 스타일                 */
/* ================================== */
.toast-container {
    position: fixed;
    bottom: var(--mogeul-spacing-lg);
    right: var(--mogeul-spacing-lg);
    z-index: var(--mogeul-z-index-toast);
    display: flex;
    flex-direction: column;
    gap: var(--mogeul-spacing-sm);
}
.toast-message {
    padding: var(--mogeul-spacing-smd) var(--mogeul-spacing-lg);
    border-radius: 6px;
    color: #fff;
    font-size: var(--mogeul-font-size-sm);
    box-shadow: var(--mogeul-box-shadow-default);
    animation: toast-fade-in-out 3s forwards;
}
.toast-message.success {
    background-color: var(--mogeul-state-success-text);
}
.toast-message.error {
    background-color: var(--mogeul-state-error-text);
}
@keyframes toast-fade-in-out {
    0% { opacity: 0; transform: translateY(20px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* ================================== */
/* 시스템 고도화 신규 스타일          */
/* ================================== */
.post-article .quiz-progress-container {
    width: 100%;
    background-color: var(--mogeul-border-color);
    border-radius: var(--mogeul-spacing-xs);
    height: var(--mogeul-spacing-sm);
    margin-bottom: var(--mogeul-spacing-md);
    overflow: hidden;
}
.post-article .quiz-progress-container .quiz-progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--mogeul-primary-color);
    transition: width 0.4s ease-in-out;
}

.post-article .quiz-feedback-message {
    font-weight: var(--mogeul-font-weight-bold);
    padding: var(--mogeul-spacing-sm);
    margin-top: var(--mogeul-spacing-md);
    border-radius: var(--mogeul-spacing-xs);
    text-align: center;
}
.post-article .quiz-feedback-message.correct {
    color: var(--mogeul-state-success-text);
    background-color: var(--mogeul-state-success-bg);
}
.post-article .quiz-feedback-message.wrong {
    color: var(--mogeul-state-error-text);
    background-color: var(--mogeul-state-error-bg);
}
.post-article .quiz-option-button.correct-answer-shown {
    border: 2px solid var(--mogeul-state-success-text);
}
.post-article .quiz-explanation {
    background-color: var(--mogeul-background-color);
    border: 1px solid var(--mogeul-border-light-color);
    padding: var(--mogeul-spacing-md);
    margin-top: var(--mogeul-spacing-md);
    border-radius: 6px;
    font-size: var(--mogeul-font-size-md);
}
.post-article .quiz-explanation .explanation-title {
    font-weight: var(--mogeul-font-weight-bold);
    color: var(--mogeul-strong-text-color);
    display: block;
    margin-bottom: var(--mogeul-spacing-sm);
}

.post-article .quiz-next-button {
    display: block;
    width: 100%;
    margin-top: var(--mogeul-spacing-md);
    padding: var(--mogeul-spacing-smd) var(--mogeul-spacing-md);
    border: none;
    border-radius: 6px;
    background-color: var(--mogeul-primary-color);
    color: var(--mogeul-background-color);
    font-size: var(--mogeul-font-size-md);
    font-weight: var(--mogeul-font-weight-bold);
    text-align: center;
    cursor: pointer;
    transition: filter var(--mogeul-transition-duration-default) ease;
}

.post-article .quiz-next-button:hover,
.post-article .quiz-next-button:focus-visible {
    filter: brightness(110%);
}

.post-article .quiz-next-button.result-view {
    background-color: var(--mogeul-state-success-text);
}

.post-article .hidden {
    display: none;
}
.post-article .share-url.copied {
    background-color: var(--mogeul-state-success-text) !important;
}

/* ================================== */
/* 바로가기 버튼 모듈 스타일          */
/* ================================== */
.post-article .direct-link-button-container {
    background-color: var(--mogeul-surface-light-color);
    border: 1px solid var(--mogeul-border-color);
    border-left: 4px solid var(--mogeul-primary-color);
    padding: var(--mogeul-spacing-lg);
    margin: var(--mogeul-spacing-lg) 0;
    text-align: center;
    border-radius: var(--mogeul-border-radius-default);
}

.post-article .direct-link-button-container .mogeul-module-cta-button {
    display: inline-block;
    padding: var(--mogeul-spacing-smd) var(--mogeul-spacing-xl);
    background-color: var(--mogeul-primary-color);
    color: #fff;
    text-decoration: none;
    font-weight: var(--mogeul-font-weight-bold);
    border-radius: var(--mogeul-border-radius-default);
    transition: filter var(--mogeul-transition-duration-default) ease;
}

.post-article .direct-link-button-container .mogeul-module-cta-button:hover,
.post-article .direct-link-button-container .mogeul-module-cta-button:focus-visible {
    filter: brightness(115%);
    color: #fff;
    text-decoration: none;
}

/* ================================== */
/* 유틸리티 클래스                    */
/* ================================== */
.post-article .mogeul-accent-text {
    color: var(--mogeul-accent-color) !important;
}
.post-article .mt-0 { margin-top: 0 !important; }
.post-article .mb-8 { margin-bottom: var(--mogeul-spacing-sm) !important; }
.post-article .mb-16 { margin-bottom: var(--mogeul-spacing-md) !important; }
.post-article .p-0 { padding: 0 !important; }

/* ================================== */
/* 모바일 반응형 코드                 */
/* ================================== */
@media (max-width: 767px) {
    .post-article { padding: 0 var(--mogeul-spacing-lg); }
    .post-article .h2-title { 
        font-size: var(--mogeul-font-size-h3); 
        margin: var(--mogeul-spacing-xxl) 0 var(--mogeul-spacing-lg);
    }
    .post-article .h3-title {
        font-size: var(--mogeul-font-size-h4);
        margin: var(--mogeul-spacing-lg) 0 var(--mogeul-spacing-sm);
    }
	 /* ▼▼▼ GeneratePress 테마 여백 충돌 방지 코드 추가 ▼▼▼ */
    .separate-containers .post-article {
        padding-left: 0;
        padding-right: 0;
    }
    .post-article .summary-card-container .summary-card .card-header { padding: var(--mogeul-spacing-md); }
    .post-article .summary-card-container .summary-card .card-header h3 { font-size: var(--mogeul-font-size-h4); }
    .post-article .summary-card-container .summary-card .card-content { font-size: var(--mogeul-font-size-base); padding: var(--mogeul-spacing-md); }
    .post-article .summary-card-container .summary-card .card-footer { padding: var(--mogeul-spacing-md); }
}

@media (max-width: 480px) {
    .post-article { 
        font-size: var(--mogeul-font-size-base);
        padding: 0 var(--mogeul-spacing-md); 
    }
    .post-article .h2-title {
        font-size: var(--mogeul-font-size-h3);
        margin: var(--mogeul-spacing-xl) 0 var(--mogeul-spacing-md);
    }
    .post-article .h3-title { font-size: var(--mogeul-font-size-h4); }
    .post-article table th, .post-article table td { padding: var(--mogeul-spacing-sm); font-size: var(--mogeul-font-size-xs); }
    .post-article .summary-card-container .summary-card .card-header h3 { font-size: var(--mogeul-font-size-h4); }
    .post-article .summary-card-container .summary-card .card-content { font-size: var(--mogeul-font-size-sm); }
    .post-article .share-buttons .share-list, .post-article .share-buttons-top .share-list { gap: var(--mogeul-spacing-sm); }
    .post-article .share-buttons .share-list a, .post-article .share-buttons-top .share-list a { width: var(--mogeul-spacing-xxl); height: var(--mogeul-spacing-xxl); }
    .post-article .box-content p, .post-article .author-bio p, .post-article table, .post-article .toc-container .toc-list li {
        font-size: var(--mogeul-font-size-sm);
    }
}

/* ================================== */
/* 접근성 향상 코드                   */
/* ================================== */
@media (prefers-reduced-motion: reduce) {
  .post-article a, .post-article .faq-accordion .faq-q button::after, .post-article .faq-accordion .faq-a, .post-article .expandable-box button::after, .post-article .expandable-content, .post-article .quiz-progress-bar, .post-article .share-url-tooltip, .post-article .share-buttons a {
    transition: none;
  }
}