@charset "utf-8";

/* ============================================
   FAQ — Figma node 1920:8758
   Montserrat · Pretendard / #191919
   ============================================ */

body.page-faq{
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
body.page-faq #wrapper{
    flex: 1 0 auto;
}
body.page-faq #footer{
    flex-shrink: 0;
}

.faq__section{
    background: #fff;
    padding: 120px 20px 160px;
    box-sizing: border-box;
}

.faq__inner{
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
}

/* 헤더 */
.faq__head{
    width: 100%;
    margin: 0;
}

.faq__title{
    margin: 0;
    width: 100%;
    font-family: "Montserrat", sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 60px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    text-align: center;
    color: #191919;
}

.faq__rule{
    width: 100%;
    height: 60px;
    border-bottom: 2px solid #191919;
    box-sizing: border-box;
}

/* 상단/하단 관리자 HTML·이미지 */
#faq_hhtml{ margin: 0 0 28px; }
#faq_thtml{ margin: 40px 0 0; }
#faq_hhtml,
#faq_thtml{
    text-align: center;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: -0.3px;
    color: #999;
}
.faq_img{ margin: 0 0 24px; text-align: center; }
.faq_img img{ max-width: 100%; height: auto; }

/* ── 아코디언 ─────────────────────────── */
#faq_wrap{ margin: 0; }
#faq_wrap h2{
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0);
}
#faq_wrap ol{
    margin: 0;
    padding: 0;
    list-style: none;
}

#faq_wrap li{
    border-bottom: 1px solid #ddd;
    background: #fff;
}

.faq__item{
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.faq__item .tit_bg{
    flex: 0 0 auto;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.4px;
    text-transform: uppercase;
    color: #999;
}

.faq__item__body{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

#faq_wrap li h3{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 0;
}

#faq_wrap li h3 a{
    flex: 1 1 auto;
    min-width: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #000;
    text-decoration: none;
    word-break: keep-all;
}

#faq_wrap li h3 .tit_btn{
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#faq_wrap li h3 .tit_btn__icon{
    display: block;
    width: 24px;
    height: 24px;
    transition: transform .2s ease;
}

/* 열림 */
#faq_wrap li.is-open .tit_bg{ color: #191919; }
#faq_wrap li h3.faq_li_open a{
    font-weight: 700;
    color: #000;
}
#faq_wrap li h3.faq_li_open .tit_btn__icon{
    transform: rotate(180deg);
}

#faq_con .con_inner{
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
}
#faq_con .con_text,
#faq_con .con_text *,
#faq_con .con_text p,
#faq_con .con_text span,
#faq_con .con_text li,
#faq_con .con_text div{
    font-family: "Pretendard", sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important; /* Figma 150% = 21px */
    letter-spacing: -0.35px !important;
    color: #191919 !important;
    /* pre-wrap + 개행 + <br> 중첩으로 줄간격이 벌어지는 것 방지 */
    white-space: normal !important;
}
#faq_con .con_text{
    padding-top: 29px;
    word-break: keep-all;
    box-sizing: border-box;
}
#faq_con .con_text p{
    margin: 0 !important;
    padding: 0 !important;
}
#faq_con .con_text img{ max-width: 100%; height: auto; }

/* ── 빈 목록 ─────────────────────────── */
.empty_list{
    padding: 60px 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -0.35px;
    color: #191919;
}

/* ── 반응형 ──────────────────────────── */
@media screen and (max-width: 768px){
    .faq__section{ padding: 80px 16px 100px; }
    .faq__title{ font-size: 34px; line-height: 1.2; }
    .faq__rule{ height: 40px; }
    .faq__item{ gap: 16px; padding: 20px 0; }
    #faq_wrap li h3 a{ font-size: 15px; }
    .faq__item .tit_bg{ font-size: 15px; }
    #faq_con .con_text{ padding-top: 20px; }
}

@media screen and (max-width: 480px){
    .faq__title{ font-size: 28px; }
    .faq__item{ gap: 12px; }
}