/**
 * /site/v2/inc/_support-faq.css
 * Support 페이지 "자주 묻는 질문" 아코디언 폴딩
 * v1.5 (2026-05-14) — Codex [4차] 권장 패치 반영
 *
 * v1.5 핵심:
 *   - 부모 [data-framer-name="Closed"] 의 framer variant (height:40px / overflow:hidden) 무력화
 *   - Answer 내부 RichTextContainer / p 의 width/wrap override 추가
 *   - measuring 상태에서도 parent height/overflow 함께 해제
 *
 * 기본 동작:
 *   - .rubion-faq-ready 부여 시 Answer 접힘 / .rubion-faq-open 부여 시 펼침
 *   - +/- 인디케이터: framer-sj3ncl 회전
 *   - E-1 hotfix(opacity:0 → opacity:1 !important)와 충돌 회피 (max-height/visibility 기반)
 */

/* ── 1) 부모 Closed item — framer variant height:40px / overflow:hidden 무력화 ── */
.rubion-faq-ready [data-framer-name="Closed"] {
    height: auto !important;
    min-height: 40px !important;
    overflow: hidden !important;
}
.rubion-faq-ready [data-framer-name="Closed"].rubion-faq-open {
    height: auto !important;
    min-height: 40px !important;
    overflow: visible !important;
    background-color: rgb(248, 248, 248) !important;
}

/* ── 2) 답변 영역 기본 접힘 ── */
.rubion-faq-ready [data-framer-name="Answer"] {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transition:
        max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.25s ease,
        visibility 0s linear 0.35s,
        padding 0.35s ease,
        margin 0.35s ease;
}

/* ── 3) 답변 영역 펼침 — 부모/자식 width/wrap 종합 override ── */
.rubion-faq-ready [data-framer-name="Closed"].rubion-faq-open [data-framer-name="Answer"] {
    display: block !important;          /* framer display:flex 무력화 */
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;            /* framer height:min-content 무력화 */
    min-height: 0 !important;
    flex: none !important;
    align-items: stretch !important;
    max-height: var(--rubion-faq-answer-h, 800px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-top: 8px !important;
    padding-bottom: 16px !important;
    transition:
        max-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.3s ease 0.05s,
        visibility 0s linear 0s,
        padding 0.35s ease,
        margin 0.35s ease;
}

/* ── 4) Answer 내부 RichTextContainer / p — width + wrap 보장 ── */
.rubion-faq-ready [data-framer-name="Closed"].rubion-faq-open [data-framer-name="Answer"] [data-framer-component-type="RichTextContainer"],
.rubion-faq-ready [data-framer-name="Closed"].rubion-faq-open [data-framer-name="Answer"] .framer-1vxs0jx {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: keep-all !important;
}
.rubion-faq-ready [data-framer-name="Closed"].rubion-faq-open [data-framer-name="Answer"] p {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: keep-all !important;
}

/* ── 5) 측정용 임시 상태 — parent + Answer + 자식 모두 해제 ── */
.rubion-faq-measuring {
    height: auto !important;
    overflow: visible !important;
}
.rubion-faq-measuring [data-framer-name="Answer"] {
    max-height: none !important;
    height: auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: visible !important;
    padding-top: 8px !important;
    padding-bottom: 16px !important;
    transition: none !important;
}
.rubion-faq-measuring [data-framer-name="Answer"] [data-framer-component-type="RichTextContainer"],
.rubion-faq-measuring [data-framer-name="Answer"] .framer-1vxs0jx,
.rubion-faq-measuring [data-framer-name="Answer"] p {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: keep-all !important;
}

/* ── 6) Top 헤더 — 클릭 가능 시각 신호 ── */
.rubion-faq-ready [data-framer-name="Top"] {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
}
.rubion-faq-ready [data-framer-name="Top"]:hover {
    background-color: rgba(0, 0, 0, 0.03);
}
.rubion-faq-ready [data-framer-name="Top"]:focus-visible {
    outline: 2px solid rgba(200, 37, 58, 0.6);
    outline-offset: -2px;
}

/* ── 7) +/- 인디케이터 ── */
.rubion-faq-ready .framer-sj3ncl {
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    transform-origin: center center;
}
.rubion-faq-ready [data-framer-name="Closed"].rubion-faq-open .framer-sj3ncl {
    transform: rotate(90deg);
}

/* ── 8) prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    .rubion-faq-ready [data-framer-name="Answer"],
    .rubion-faq-ready .framer-sj3ncl {
        transition: none !important;
    }
}