@charset "utf-8";
/* ==========================================================================
   자주 묻는 질문 — PC(1024px~)
   service/faq_list.php · 골격은 css/mypage/mypage_pc.css (좌측 LNB 220px + 본문 2단)

   ※ 모든 규칙을 .faq_list.mypage_pc 로 한정한다 — mypage_pc 는 템플릿에서 PC 전환용으로만 붙인다.
   ※ 모바일은 기존 그대로 — 모든 규칙을 @media 안에만 둔다.
   @entwiz 2026-10-27
   ========================================================================== */

@media (min-width: 1024px) {

    /* ----------------------------------------------------------------
       검색 — 우측 정렬. 모바일은 .board_search 에 좌우 20px·상단 16px 패딩이 있고
       돋보기 버튼이 그 안쪽 기준 absolute(top:28px right:40px)로 놓여 있다.
       PC 에서 패딩을 걷으면 버튼만 떠 버리므로 입력칸 모서리에 다시 맞춘다.
       ---------------------------------------------------------------- */
    .faq_list.mypage_pc .boardlist .board_search {max-width:420px; margin-left:auto; padding:0;}
    .faq_list.mypage_pc .boardlist .board_search .search_btn {top:12px; right:20px;}

    /* 말머리(분류 탭) */
    .faq_list.mypage_pc .wordHead {padding:0; margin-bottom:var(--space-4, 16px);}

    /* BEST FAQ 제목 */
    .faq_list.mypage_pc .boardlist h3 {padding:0 0 var(--space-3, 12px); font-size:18px; line-height:26px;}

    /* ----------------------------------------------------------------
       목록 — 질문을 누르면 그 자리에서 답변이 펼쳐지는 아코디언이다(상세 페이지가 없다)
       ---------------------------------------------------------------- */
    .faq_list.mypage_pc .board_faq_box .board_faq li.data_row .faq_subject {
        padding:var(--space-5, 20px) var(--space-10, 40px) var(--space-5, 20px) 0;
        font-size:16px; line-height:24px; position:relative;}

    /* 펼침 표시 — 모바일에는 없다. PC 는 폭이 넓어 어디를 누르는지 알려주는 편이 낫다 */
    .faq_list.mypage_pc .board_faq_box .board_faq li.data_row .faq_subject::after {
        content:''; position:absolute; top:50%; right:var(--space-3, 12px); width:16px; height:16px; margin-top:-8px;
        background:url(../../images/renew/icon/chevron-up-dark.svg) no-repeat 50% 50% / 16px auto;
        transform:rotate(180deg); transition:transform .2s;}
    .faq_list.mypage_pc .board_faq_box .board_faq li.data_row .faq_subject.on::after {transform:rotate(0deg);}

    /* 답변 */
    .faq_list.mypage_pc .board_faq_box .board_faq li.data_row .faq_row_box {
        padding:0 0 var(--space-5, 20px); background:var(--color-neutral-98, #FAFAFA);}
    .faq_list.mypage_pc .board_faq_box .board_faq li.data_row .faq_row_box dl {
        max-width:820px; padding:var(--space-5, 20px); line-height:24px;}

    /* 답변은 대부분 780px 짜리 이미지 한 장이고, 등록 콘텐츠에 width="100%" 속성이 박혀 있다.
       PC 본문 폭(1000px 이상)에서 그대로 두면 1125px 까지 늘어나 세로가 6,000px 를 넘고 화질도 깨진다.
       → 원본 크기를 넘지 않게 가둔다. 속성보다 CSS 가 우선이라 width:auto 로 덮인다. */
    .faq_list.mypage_pc .board_faq_box .board_faq li.data_row .faq_row_box dl img {
        width:auto; max-width:100%; height:auto;}

    /* 검색결과 없음 */
    .faq_list.mypage_pc .board_faq_box .board_faq li.data_row .no_data {
        padding:var(--space-16, 64px) 0; color:var(--color-neutral-30, #707070);}

    /* 더보기 버튼 · 페이징 */
    .faq_list.mypage_pc .boardlist .btn_box {padding:var(--space-6, 24px) 0 0;}
    .faq_list.mypage_pc .page_btn_box {margin:var(--space-10, 40px) 0 0;}

}