/* ==========================================================================
   DAMDA 2026 — FAQ (qna) 페이지
   시안: faq_base / faq_design text click / faq_mobile ver
   ========================================================================== */

#qna2026 {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 16px 16px;
}

/* ---------- 서브바 (탭 + 검색) ---------- */
#qna2026 .qna-subbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0 20px;
}

#qna2026 .qna-tabs {
    display: flex;
    gap: 40px;
    padding-left: 24px; /* 페이지 패딩 16 + 24 = 좌측 40px (XD) */
}

#qna2026 .qna-tab {
    font-family: var(--font-kr);
    font-size: 32px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: -0.64px;
    color: #A8B2AD;
    transition: color .2s ease;
}

#qna2026 .qna-tab:hover { color: var(--dark-gray); }

#qna2026 .qna-tab.is-active { color: var(--ink); }

/* 검색 */
#qna2026 .qna-search {
    display: flex;
    align-items: center;
    background: #F9F9F9 0% 0% no-repeat padding-box;
    border: 1px solid #D9E0DD;
    border-radius: 4px;
    width: 460px;
    height: 64px;
    padding: 0 20px 0 24px;
}

#qna2026 .qna-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-kr);
    font-size: 24px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: -0.48px;
    color: var(--ink);
    outline: none;
}

#qna2026 .qna-search-input::placeholder { color: #A8B2AD; }

#qna2026 .qna-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

/* ---------- 본문 (질문 리스트 + 답변 패널) ---------- */
#qna2026 .qna-body {
    display: flex;
    gap: 16px;
    align-items: stretch;
    min-height: 620px;
}

/* 질문 리스트 */
#qna2026 .qna-list {
    flex: 1 1 56%;
    margin: 0;
    padding: 20px 32px;
    background: var(--white-gray);
    list-style: none;
}

#qna2026 .qna-item + .qna-item { margin-top: 0; }

#qna2026 .qna-q {
    display: flex;
    align-items: baseline;
    gap: 20px;
    width: 100%;
    padding: 8px 0;
    text-align: left;
}

#qna2026 .qna-num {
    font-family: var(--font-en);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--pastel-green-deep);
    flex: 0 0 auto;
    transition: color .2s ease;
}

#qna2026 .qna-q-text {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.5;
    color: #AAB2AD;
    transition: color .2s ease;
}

#qna2026 .qna-q:hover .qna-q-text { color: var(--dark-gray); }

#qna2026 .qna-item.is-active .qna-num {
    color: var(--green);
    font-weight: 500;
}

#qna2026 .qna-item.is-active .qna-q-text {
    color: var(--ink);
    font-weight: 600;
}

/* 리스트 안의 답변(모바일 아코디언용) — PC에선 숨김 */
#qna2026 .qna-a { display: none; }

#qna2026 .qna-empty {
    padding: 24px 0;
    color: var(--dark-gray);
}

/* 답변 패널 */
#qna2026 .qna-panel {
    flex: 1 1 44%;
    background: #fff;
}

#qna2026 .qna-panel-inner {
    padding: 56px 48px;
    font-size: 17px;
    line-height: 1.9;
    color: var(--ink);
}

#qna2026 .qna-panel-inner p {
    /* 에디터에서 엔터(문단)로 줄바꿈해도 <br> 줄바꿈과 같은 간격이 되도록
       문단 아래 여백을 두지 않는다. 빈 줄이 필요하면 엔터를 두 번 입력.
       line-height는 패널(1.9)을 상속받아 자동 줄바꿈·br·엔터 모두 동일 간격. */
    margin: 0;
    font-size: 18px;
}

/* 빈 문단(엔터 두 번, <p></p>)이 에디터에서처럼 게시글에서도 빈 줄로 보이도록 */
#qna2026 .qna-panel-inner p:empty::after { content: "\00a0"; }

/* 답변 안의 버튼형 링크 (어드민에서 class="qna-btn"으로 삽입) */
#qna2026 .qna-panel-inner .qna-btn,
#qna2026 .qna-a .qna-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 18px;
    background: var(--pastel-green);
    color: var(--green);
    font-weight: 700;
}

/* ---------- 페이징 ---------- */
#qna2026 .qna-pager {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 32px 0 16px;
}

#qna2026 .qna-pager-num {
    font-family: var(--font-en);
    color: #AAB2AD;
    padding: 4px 8px;
}

#qna2026 .qna-pager-num.is-active { color: var(--green); font-weight: 700; }

/* ==========================================================================
   모바일 — 검색이 탭 위로, 리스트는 아코디언
   ========================================================================== */
@media (max-width: 900px) {
    #qna2026 { padding: 0 16px 8px; } /* 좌우 거터 16px */

    #qna2026 .qna-subbar {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 16px;
        padding: 0 0 16px;
    }

    /* 거터 16px = 화면 16px 기준선 정렬 */
    #qna2026 .qna-search {
        width: 100%;
        margin: 0 auto;
        max-width: none;
        height: 40px;
        border-radius: 0;
        /* 플레이스홀더 시작점 = 로고 텍스트 시작점(거터 16 + 로고 패딩 16 = 32px) */
        padding: 0 12px 0 16px;
    }

    #qna2026 .qna-search-input {
        font-size: 16px;
        line-height: 38px;
        letter-spacing: -0.32px;
    }

    #qna2026 .qna-search-btn { padding: 4px; }

    #qna2026 .qna-search-btn svg { width: 18px; height: 18px; }

    /* 컨테이너 자체를 검색 박스 폭(화면 16px 기준선)에 맞춤 */
    #qna2026 .qna-tabs { gap: 20px; margin: 0 3px; /* 클립 경계 = 화면 19px — 거터 16 기준 보정 */ padding: 0; }

    /* 데스크톱 line-height(48px)의 상하 여백 제거 — 다른 페이지 탭과 동일 규격 */
    #qna2026 .qna-tab { font-size: 18px; line-height: 1.3; }

    #qna2026 .qna-body {
        display: block;
        min-height: 0;
    }

    /* 답변 패널 숨김 (아코디언으로 대체) */
    #qna2026 .qna-panel { display: none; }

    #qna2026 .qna-list {
        padding: 0;
        background: transparent;
    }

    #qna2026 .qna-item {
        background: #fff;
        padding: 8px 24px;
    }

    #qna2026 .qna-item + .qna-item { margin-top: 8px; }

    #qna2026 .qna-q {
        padding: 20px 0;
        gap: 16px;
    }

    #qna2026 .qna-num { font-size: 22px; }

    #qna2026 .qna-q-text {
        font-size: 22px;
        font-weight: 700;
        color: var(--ink);
    }

    /* 아코디언 답변 */
    #qna2026 .qna-item.is-open .qna-a {
        display: block;
        padding: 0 0 24px 54px;
        font-size: 16px;
        line-height: 1.9;
        color: var(--ink);
    }

    /* 모바일 아코디언도 동일: 엔터(문단) 줄바꿈 = <br> 줄바꿈 간격 */
    #qna2026 .qna-a p { margin: 0; }
    #qna2026 .qna-a p:empty::after { content: "\00a0"; }
}

/* ── 링크 버튼(buttonLink) — 스타일은 인라인, hover 효과만 CSS ── */
#qna2026 .tt-btn:hover { filter: brightness(.96); }

/* 와이드(>1920): 본문 여백을 헤더·푸터 인셋(8px)과 정렬 */
@media (min-width: 1921px) {
    #qna2026 { padding: 0 8px 8px; }
}

/* ==========================================================================
   와이드(>1920) — Figma 4K-FAQ-MAKING-01 실측값(절반 스케일) 재정의
   규칙: base/base.css 와이드 블록 주석 참고 (4K값 ÷ 2 를 CSS값으로 지정)
   ========================================================================== */
@media (min-width: 1921px) {
    /* 서브바 — 공통 규격 (4K: 탭 40, 검색 940×88) */
    #qna2026 .qna-subbar { padding: 0 0 8px; }

    #qna2026 .qna-tabs { gap: 16px; padding-left: 12px; }

    #qna2026 .qna-tab { font-size: 20px; line-height: 24px; }

    #qna2026 .qna-search {
        width: 470px;
        height: 44px;
        border-radius: 2px;
        padding: 0 10px 0 12px;
    }

    #qna2026 .qna-search-input { font-size: 16px; line-height: 24px; }

    #qna2026 .qna-search-btn { padding: 4px; }

    /* 본문 — 4K: 패널이 푸터 직전(높이 1617)까지 채움 */
    #qna2026 .qna-body {
        gap: 8px;
        min-height: calc(100vh / var(--wide-zoom) - 284px);
    }

    /* 질문 리스트 — 4K: 번호·질문 72px, 안쪽 여백 좌 72/상 72 */
    #qna2026 .qna-list { padding: 30px 36px; }

    #qna2026 .qna-q { gap: 36px; padding: 6px 0; }

    #qna2026 .qna-num { font-size: 36px; }

    #qna2026 .qna-q-text { font-size: 36px; line-height: 1.2; }

    #qna2026 .qna-item.is-active .qna-q-text { font-weight: 500; } /* 4K: Medium */

    /* 답변 패널 — 4K: 본문 40px, 안쪽 여백 상 72/좌 68 */
    #qna2026 .qna-panel-inner { padding: 36px 34px; font-size: 20px; line-height: 1.8; }

    #qna2026 .qna-panel-inner p { font-size: 20px; }

    #qna2026 .qna-panel-inner .qna-btn,
    #qna2026 .qna-a .qna-btn { margin-top: 12px; padding: 8px 15px; font-size: 14px; font-weight: 500; } /* 4K 버튼 28 */

    #qna2026 .qna-empty { padding: 12px 0; }

    /* 페이징 */
    #qna2026 .qna-pager { gap: 6px; padding: 16px 0 8px; }

    #qna2026 .qna-pager-num { padding: 2px 4px; }
}