/* =============================================================================
 * Rank Math FAQ Block — 시각 스타일 (mcyg-blog v4.1.23 미니멀 톤)
 *
 * 의존: tokens.css, main.css, components.css. var() 토큰만 사용 (hex/rgb 금지).
 * 큐 조건: defined('RANK_MATH_VERSION') (inc/rank-math-compat.php).
 *
 * 마크업 (실측):
 *   <div class="wp-block-rank-math-faq-block rank-math-block">
 *     <div class="rank-math-list">
 *       <div class="rank-math-list-item">
 *         <h3 class="rank-math-question">질문</h3>
 *         <div class="rank-math-answer">답변</div>
 *       </div>
 *     </div>
 *   </div>
 *
 * v4.1.23 — 미니멀 톤으로 재작성:
 *   · 좌측 4px 컬러 보더 제거 → 간결한 단일 회색 보더
 *   · 호버 그림자 제거 (정적)
 *   · 질문 배경의 컬러 톤 → 옅은 회색 (gray-50)
 *   · Q. / A. 프리픽스는 유지하되 컬러 토즈 절제
 * ============================================================================= */


/* -----------------------------------------------------------------------------
 * 컨테이너
 * -------------------------------------------------------------------------- */

.wp-block-rank-math-faq-block,
.rank-math-block {
    margin: var(--space-10) 0;
}

.rank-math-list,
.rank-math-faq-block-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}


/* -----------------------------------------------------------------------------
 * FAQ 아이템 — 미니멀 카드
 * -------------------------------------------------------------------------- */

.rank-math-list-item,
.rank-math-faq-item {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}


/* -----------------------------------------------------------------------------
 * 질문 (Q)
 * -------------------------------------------------------------------------- */

/* v4.1.24 — .prose .rank-math-question 셀렉터로 specificity 끌어올림.
   FAQ 블록은 .prose 안에 있어서 .prose h3 (margin-top:var(--space-8)=32px) 가 적용되던
   문제. 명시적으로 override. 일반(.prose 밖) 사용도 같은 룰 셋 적용을 위해 .rank-math-question 도 함께. */
.prose .rank-math-question,
.rank-math-question {
    margin: 0;
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-gray-50);
    color: var(--color-text-strong);
    font-size: var(--fs-subhead-m);
    font-weight: var(--fw-bold);
    line-height: var(--lh-subhead-m);
    letter-spacing: var(--ls-subhead-m);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.rank-math-question::before {
    content: 'Q';
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: var(--color-text-strong);
    color: var(--color-text-inverse);
    font-size: 12px;
    font-weight: var(--fw-bold);
    line-height: 1;
    border-radius: 50%;
    transform: translateY(2px);
}

.rank-math-question a {
    color: inherit;
    text-decoration: none;
}


/* -----------------------------------------------------------------------------
 * 답변 (A)
 * -------------------------------------------------------------------------- */

.rank-math-answer {
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: var(--fs-body-l);
    line-height: 1.6;
    letter-spacing: var(--ls-body-l);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.rank-math-answer::before {
    content: 'A';
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: 12px;
    font-weight: var(--fw-bold);
    line-height: 1;
    border-radius: 50%;
    transform: translateY(2px);
}

.rank-math-answer > * {
    flex: 1 1 auto;
    min-width: 0;
}

.rank-math-answer p {
    margin: 0 0 var(--space-3);
}

.rank-math-answer p:last-child {
    margin-bottom: 0;
}

.rank-math-answer a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rank-math-answer a:hover {
    color: var(--color-primary-hover);
}

.rank-math-answer ul,
.rank-math-answer ol {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-6);
}

.rank-math-answer li + li {
    margin-top: var(--space-1);
}

.rank-math-answer strong {
    color: var(--color-text-strong);
    font-weight: var(--fw-bold);
}


/* -----------------------------------------------------------------------------
 * 모바일 반응형
 * -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .rank-math-question,
    .rank-math-answer {
        padding: var(--space-3) var(--space-4);
    }
    .rank-math-question {
        font-size: var(--fs-body-l);
    }
    .rank-math-answer {
        font-size: 15px;
    }
}


/* -----------------------------------------------------------------------------
 * 접근성 — focus-visible
 * -------------------------------------------------------------------------- */

.rank-math-question:focus-visible,
.rank-math-list-item:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}