@charset "utf-8"; /* 서브타이틀 공통 */
.con-hd-outer { background: var(--main-color); padding: var(--typeB-space-r) var(--typeB-space-safe); overflow: hidden; } 

/* qna 공통 */

 .one-qna-li { margin-top: var(--typeB-gap-xl); width: 100%; list-style: none; display: flex; flex-direction: column; gap: var(--typeB-gap-r); /* 아이템 간 간격 */ } 
 
 .qna-li { overflow: hidden; border-radius: 8px; /* 개별 카드 형태 */ } 
 
 .qna-question { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: space-between; gap: var(--typeB-gap-lg); padding: var(--typeB-gap-lg) var(--typeB-gap-xl); background-color: #f5f5f5; cursor: pointer; user-select: none; transition: background-color 0.25s ease; } 
 .qna-question:hover { background-color: var(--accent-pink); } 
 
 .qna-question-text { display: flex; flex-direction: row; align-items: center; gap: var(--typeB-gap-r); color: var(--main-color); font-size: var(--typeB-body); /* --typeB-body */

 line-height: var(--typeB-lh-r); letter-spacing: -0.02em; word-break: keep-all; } 
 
 .qna-num { white-space: nowrap; flex-shrink: 0; } 
.qna-arrow { flex-shrink: 0; width: 28px; height: 28px; position: relative; display: flex; align-items: center; justify-content: center; transform: rotate(0deg); transform-origin: center center; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } 
 .qna-arrow::before,
 .qna-arrow::after { content: ""; position: absolute; width: 11px; height: 2px; background: var(--white-color); border-radius: 2px; top: 39%; } 
 .qna-arrow::before { left: 3px; transform: translateY(-50%) rotate(-45deg); transform-origin: right center; } 
 .qna-arrow::after { right: 3px; transform: translateY(-50%) rotate(45deg); transform-origin: left center; } 
 .qna-li.active .qna-arrow { transform: rotate(180deg); } 
 
 .qna-answer-wrap { max-height: 0; overflow: hidden; opacity: 0; transition:
 max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
 opacity 0.35s ease; } 
 .qna-li.active .qna-answer-wrap { max-height: 800px; opacity: 1; } 
 
 .qna-answer { color: #643946; font-size: var(--typeB-body); line-height: var(--typeB-lh-r); font-weight: 400; letter-spacing: -0.02em; word-break: keep-all; background-color: var(--accent-pink); padding: var(--typeB-gap-xl) var(--typeB-gap-xl) var(--typeB-gap-xl) calc(var(--typeB-gap-xl)); border-top: 1px solid var(--accent-rose); } 

/* =============================================
 태블릿 이하 (≤ 1024px)
 ============================================= */
@media all and (max-width: 1024px) { /* qna 공통 */
 .qna-answer { /* 태블릿: 좌 인덴트 완화 */
 padding-left: calc(var(--typeB-gap-xl) + 2em); } 
 }

/* =============================================
 모바일 (≤ 639px)
 ============================================= */
@media all and (max-width: 639px){
 .qna-arrow { width: 22px; height: 22px; } 
 .qna-arrow::before,
 .qna-arrow::after { width: 9px; } 
 
 /* 모바일: 좌 인덴트 제거 — 너비가 좁아 가독성 우선 */
 .qna-answer { padding-left: var(--typeB-gap-xl); } 
 }