@charset "utf-8";
/* =============================================================
   자주하는 질문 (/online/faq)  — Figma: FAQ node 1-25
   resources/views/user/online/faq.blade.php 에서만 불러온다
   (공통 contents.css 에 넣으면 레이아웃의 ?v= 를 같이 올려야 해서 분리)
   ============================================================= */

.sub_contents.faq_page {margin:0}
.sub_contents.faq_page .contents.faq {margin:0;padding:63px 0;letter-spacing:0}

/* 목록 : 위 2px 검정, 항목마다 아래 1px #ebebeb */
.faq .faq_list {margin:0;padding:0;border-top:2px solid #000}
.faq .faq_item {border-bottom:1px solid #ebebeb}
.faq .faq_empty {padding:60px 20px;color:#888;font-size:16px;text-align:center;border-bottom:1px solid #ebebeb}

/* 질문 줄 : 좌우 20px, 글자 18px/600, 줄 높이 63px(테두리 포함) */
.faq .faq_q {display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;margin:0;padding:0 20px;
    background:none;border:0;text-align:left;cursor:pointer;color:#000;font-family:inherit}
/* basic.css 의 button span {visibility:hidden} 영향을 받지 않도록 strong 을 쓰고 명시한다 */
.faq .faq_q .faq_q_txt {flex:1 1 auto;min-width:0;padding:20px 0;visibility:visible;
    font-size:18px;font-weight:600;line-height:1.2;color:#000;word-break:keep-all;overflow-wrap:anywhere}
/* +/− 아이콘 : 가로선(before) + 세로선(after). 열리면 아이콘이 반 바퀴 돌면서 세로선이 누워 − 가 된다 */
.faq .faq_q .faq_ico {position:relative;flex:0 0 16px;display:block;width:16px;height:52px;transition:transform .3s ease}
.faq .faq_q .faq_ico::before,
.faq .faq_q .faq_ico::after {content:'';position:absolute;top:50%;left:0;width:100%;height:1.7px;margin-top:-.85px;
    background:#000;border-radius:.2px;transition:transform .3s ease}
.faq .faq_q .faq_ico::after {transform:rotate(90deg)}
.faq .faq_item.is_open .faq_q .faq_ico {transform:rotate(180deg)}
.faq .faq_item.is_open .faq_q .faq_ico::after {transform:rotate(0)}
@media (prefers-reduced-motion: reduce) {
    .faq .faq_q .faq_ico,
    .faq .faq_q .faq_ico::before,
    .faq .faq_q .faq_ico::after {transition:none}
}
.faq .faq_q:focus-visible {outline:2px solid #fa71c1;outline-offset:-2px}

/* 답변 : 질문 줄과 사이 1px 선, 좌우 25px, 위아래 20px, 본문 16px/300/1.5 */
.faq .faq_a {padding:20px 25px;border-top:1px solid #ebebeb}
.faq .faq_a[hidden] {display:none}
.faq .faq_answer {font-size:16px;font-weight:300;line-height:1.5;color:#000;word-break:keep-all;overflow-wrap:anywhere}
.faq .faq_answer p {margin:0}
/* 답변 안 소제목 (예: '어떻게 정해지나요?') : 18px/500, 위 25px · 아래 10px, 그 아래 줄들은 3px 간격 */
.faq .faq_answer h3 {margin:25px 0 10px;font-size:18px;font-weight:500;line-height:1.5;color:#000}
.faq .faq_answer h3:first-child {margin-top:0}
.faq .faq_answer h3 ~ p + p {margin-top:3px}
.faq .faq_answer b,
.faq .faq_answer strong {font-weight:500}
.faq .faq_answer img {max-width:100%;height:auto}
.faq .faq_answer ul,
.faq .faq_answer ol {margin:0;padding-left:1.2em}
.faq .faq_answer ul li {list-style:disc}
.faq .faq_answer ol li {list-style:decimal}
.faq .faq_answer table {max-width:100%;border-collapse:collapse}

/* 답변 아래 링크 : [이름] 분홍 16px/500, 간격 5px (Figma node 1-614) */
.faq .faq_links {display:flex;flex-wrap:wrap;gap:0 5px;margin-top:10px}
.faq .faq_links a {font-size:16px;font-weight:500;line-height:1.5;color:#fa71c1}
.faq .faq_links a:hover {text-decoration:underline}

/* 페이지 번호 : 목록과 30px 간격, 18px/600, 현재 #fa71c1 / 나머지 30% */
.faq .faq_paging {display:flex;justify-content:center;margin-top:30px}
.faq .faq_paging a,
.faq .faq_paging strong {display:block;padding:0 5px;font-size:18px;font-weight:600;line-height:1.2;color:rgba(250,113,193,.3)}
.faq .faq_paging strong.active {color:#fa71c1}
.faq .faq_paging a:hover {color:#fa71c1}

/* 모바일 (디자인 받기 전 기본값) */
@media screen and (max-width:768px) {
    .sub_contents.faq_page .contents.faq {padding:30px 15px 60px}
    .faq .faq_q {gap:12px;padding:0 10px}
    .faq .faq_q .faq_q_txt {padding:16px 0;font-size:16px;line-height:1.35}
    .faq .faq_q .faq_ico {flex-basis:14px;width:14px;height:46px}
    .faq .faq_q .faq_ico::before,
    .faq .faq_q .faq_ico::after {height:1.5px;margin-top:-.75px}
    .faq .faq_a {padding:16px 12px}
    .faq .faq_answer {font-size:14px}
    .faq .faq_answer h3 {margin-top:18px;font-size:15px}
    .faq .faq_links a {font-size:14px}
    .faq .faq_paging {margin-top:24px}
    .faq .faq_paging a,
    .faq .faq_paging strong {padding:0 8px;font-size:16px}
}