/* BASIC css start */
/* =========================================================
   FAQ 리뉴얼 - Q&A / 상품문의 게시판과 같은 톤
   ※ 광고차단 앱(유니콘 등)이 숨기는 이름(adv, ad, banner 등)은 쓰지 않음
   ========================================================= */
.faq-board { --qa-main:#4f8f9c; --qa-main-dk:#3c7480; --qa-point:#a9ced7; --qa-soft:#f2f8f9; --qa-bg:#f7f8f9; --qa-line:#e7eaec; --qa-line-dk:#d3d8dc; --qa-txt:#1f2326; --qa-txt2:#4a5056; --qa-txt3:#8b9298; --qa-red:#e0565b;
    max-width:1260px; margin:0 auto; padding:0 0 90px; color:var(--qa-txt2); font-size:15px; line-height:1.6; letter-spacing:-0.2px; word-break:keep-all; }
.faq-board * { box-sizing:border-box; }
.faq-board a { color:inherit; font-size:inherit; }
.faq-board img { max-width:100%; height:auto; vertical-align:middle; }
.faq-board fieldset { border:0; margin:0; padding:0; }
.faq-board legend { display:none; }
.faq-board ul, .faq-board ol, .faq-board li { list-style:none; margin:0; padding:0; }
.faq-board .blind { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.faq-board a:focus-visible, .faq-board button:focus-visible, .faq-board input:focus-visible, .faq-board select:focus-visible { outline:2px solid var(--qa-main); outline-offset:2px; }

/* 머리말 */
.faq-board .faq-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:44px 0 22px; border-bottom:2px solid var(--qa-txt); }
.faq-board .faq-head h2 { margin:0; font-size:30px; font-weight:700; color:var(--qa-txt); line-height:1.2; letter-spacing:-0.6px; }
.faq-board .faq-head h2::after { content:""; display:block; width:28px; height:4px; margin-top:12px; border-radius:2px; background:var(--qa-point); }
.faq-board .faq-head p { margin-top:10px; font-size:15px; color:var(--qa-txt3); }

/* 버튼 */
.faq-board .faq-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:44px; padding:0 20px; border:1px solid var(--qa-line-dk); border-radius:8px; background:#fff; color:var(--qa-txt); font-size:14px; font-weight:500; line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer; transition:border-color .2s; }
.faq-board .faq-btn:hover { border-color:var(--qa-txt); }
.faq-board .faq-btn svg { width:17px; height:17px; flex:none; }

/* 분류 + 검색 */
.faq-board .faq-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; flex-wrap:wrap; }
.faq-board .faq-cate { display:flex; flex-wrap:wrap; gap:8px; }
.faq-board .faq-cate a { display:inline-flex; align-items:center; height:38px; padding:0 18px; border:1px solid var(--qa-line-dk); border-radius:19px; background:#fff; font-size:14px; color:var(--qa-txt2); text-decoration:none; white-space:nowrap; transition:background .2s, border-color .2s, color .2s; }
.faq-board .faq-cate a:hover { border-color:var(--qa-main); color:var(--qa-main-dk); }
.faq-board .faq-cate li.is-active a { border-color:var(--qa-txt); background:var(--qa-txt); color:#fff; font-weight:600; }

.faq-board .faq-search fieldset { display:flex; align-items:center; gap:8px; }
.faq-board .faq-search-select select { height:44px; min-width:120px; margin:0; padding:0 34px 0 14px; border:1px solid var(--qa-line-dk); border-radius:22px; background:#fff; color:var(--qa-txt2); font-size:14px; cursor:pointer; }
.faq-board .faq-search-select select:focus { outline:none; border-color:var(--qa-main); box-shadow:0 0 0 3px rgba(79,143,156,.16); }
.faq-board .faq-search-box { position:relative; display:flex; align-items:center; }
.faq-board .faq-search-box input[type=text] { width:260px; height:44px; margin:0; padding:0 48px 0 16px; border:1px solid var(--qa-line-dk); border-radius:22px; background:#fff; font-size:15px; color:var(--qa-txt); line-height:42px; transition:border-color .2s, box-shadow .2s; }
.faq-board .faq-search-box input[type=text]:focus { outline:none; border-color:var(--qa-main); box-shadow:0 0 0 3px rgba(79,143,156,.16); }
.faq-board .faq-search-btn { position:absolute; right:4px; top:4px; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:var(--qa-txt2); }
.faq-board .faq-search-btn:hover { background:var(--qa-soft); color:var(--qa-main-dk); }
.faq-board .faq-search-btn svg { width:19px; height:19px; }

/* 목록 */
.faq-board .faq-list { border-top:1px solid var(--qa-txt); }
.faq-board .faq-list-head,
.faq-board .faq-q { display:grid; grid-template-columns:90px 150px minmax(0,1fr) 56px; align-items:center; }
.faq-board .faq-list-head { height:52px; border-bottom:1px solid var(--qa-line-dk); color:var(--qa-txt3); font-size:14px; font-weight:500; text-align:center; }
.faq-board .faq-list-head .c-subject { text-align:left; padding-left:20px; }

.faq-board .faq-item { border-bottom:1px solid var(--qa-line); }
/* 공통 CSS의 'button span { visibility:hidden }' 해제 */
.faq-board .faq-q span, .faq-board .faq-q em { visibility:visible; }
.faq-board .faq-q { overflow:visible; }
.faq-board .faq-q { width:100%; min-height:64px; margin:0; padding:14px 0; border:0; background:transparent; font-family:inherit; text-align:center; cursor:pointer; transition:background .15s; }
.faq-board .faq-q:hover { background:var(--qa-soft); }
.faq-board .faq-q .c-num { font-size:14px; color:var(--qa-txt3); }
.faq-board .faq-tag { display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:13px; background:var(--qa-soft); color:var(--qa-main-dk); font-size:13px; font-weight:500; white-space:nowrap; }
.faq-board .faq-q .c-subject { display:flex; align-items:center; gap:10px; padding-left:20px; text-align:left; }
.faq-board .faq-subject-txt { font-size:16px; color:var(--qa-txt); line-height:1.5; }
.faq-board .faq-q:hover .faq-subject-txt { color:var(--qa-main-dk); text-decoration:underline; text-underline-offset:3px; }
.faq-board .faq-q .c-arrow { display:flex; justify-content:center; color:var(--qa-txt3); }
.faq-board .faq-q .c-arrow svg { width:20px; height:20px; transition:transform .25s; }

/* Q / A 표시 */
.faq-board .faq-mark { flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-size:14px; font-weight:700; font-style:normal; line-height:1; }
.faq-board .faq-mark-q { background:var(--qa-txt); color:#fff; }
.faq-board .faq-mark-a { background:var(--qa-main); color:#fff; }

/* 펼친 상태 */
.faq-board .faq-item.is-open { background:#fff; }
.faq-board .faq-item.is-open .faq-q { background:var(--qa-soft); }
.faq-board .faq-item.is-open .faq-subject-txt { font-weight:600; }
.faq-board .faq-item.is-open .c-arrow { color:var(--qa-main-dk); }
.faq-board .faq-item.is-open .c-arrow svg { transform:rotate(180deg); }

/* 답변 패널 */
.faq-board .faq-panel { display:none; }
.faq-board .faq-item.is-open .faq-panel { display:block; }
.faq-board .faq-panel-in { margin:0 0 0 240px; padding:22px 56px 28px 20px; }
.faq-board .faq-detail { display:flex; align-items:flex-start; gap:14px; }
.faq-board .faq-detail-a { margin-top:16px; padding:20px 22px; border-radius:12px; background:var(--qa-bg); }
.faq-board .faq-detail .faq-mark { margin-top:1px; }
.faq-board .faq-body { flex:1; min-width:0; padding-top:2px; font-size:15px; line-height:1.8; color:var(--qa-txt2); overflow-wrap:anywhere; }
.faq-board .faq-detail-a .faq-body { color:var(--qa-txt); }
.faq-board .faq-body p { margin:0 0 8px; }
.faq-board .faq-body p:last-child { margin-bottom:0; }
.faq-board .faq-body a { color:var(--qa-main-dk); text-decoration:underline; text-underline-offset:3px; }
.faq-board .faq-body ol, .faq-board .faq-body ul { margin:6px 0 6px 20px; }
.faq-board .faq-body ol li { list-style:decimal; }
.faq-board .faq-body ul li { list-style:disc; }
.faq-board .faq-body img { border-radius:8px; margin:6px 0; }
.faq-board .faq-body table { max-width:100%; }
/* 에디터에서 넣은 인용 박스 */
.faq-board .faq-body blockquote { margin:8px 0; padding:10px 14px; }
.faq-board .faq-body blockquote.q1 { border-left:2px solid #ccc; }
.faq-board .faq-body blockquote.q3, .faq-board .faq-body blockquote.q4 { border:1px solid #d9d9d9; }
.faq-board .faq-body blockquote.q4, .faq-board .faq-body blockquote.q7 { background:#fbfbfb; }
.faq-board .faq-body blockquote.q5 { border:2px solid #707070; }
.faq-board .faq-body blockquote.q6, .faq-board .faq-body blockquote.q7 { border:1px dashed #707070; }

.faq-board .faq-empty { display:none; padding:60px 0; border-bottom:1px solid var(--qa-line); text-align:center; color:var(--qa-txt3); }
.faq-board .faq-list.is-empty .faq-empty { display:block; }

/* 페이지 번호 */
.faq-board .faq-paging { display:flex; justify-content:center; align-items:center; gap:6px; margin:40px 0 0; }
.faq-board .faq-paging a, .faq-board .faq-paging strong { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 6px; border-radius:20px; font-size:15px; color:var(--qa-txt2); font-weight:400; text-decoration:none; }
.faq-board .faq-paging a:hover { background:var(--qa-bg); color:var(--qa-txt); }
.faq-board .faq-paging strong { background:var(--qa-txt); color:#fff; font-weight:600; }
.faq-board .faq-paging .first a, .faq-board .faq-paging .prev a, .faq-board .faq-paging .next a, .faq-board .faq-paging .last a { border:1px solid var(--qa-line); color:var(--qa-txt3); font-size:16px; }
.faq-board .faq-paging .prev { margin-right:8px; }
.faq-board .faq-paging .next { margin-left:8px; }

/* 좁은 화면 */
@media (max-width:860px) {
    .faq-board .faq-toolbar { flex-direction:column; align-items:stretch; }
    .faq-board .faq-search-box { flex:1; }
    .faq-board .faq-search-box input[type=text] { width:100%; }
    .faq-board .faq-list-head { display:none; }
    .faq-board .faq-q { grid-template-columns:minmax(0,1fr) 44px; grid-template-areas:"cate arrow" "subject arrow"; row-gap:6px; padding:16px 0 16px 4px; }
    .faq-board .faq-q .c-num { display:none; }
    .faq-board .faq-q .c-cate { grid-area:cate; text-align:left; padding-left:4px; }
    .faq-board .faq-q .c-subject { grid-area:subject; padding-left:4px; }
    .faq-board .faq-q .c-arrow { grid-area:arrow; }
    .faq-board .faq-panel-in { margin:0; padding:16px 4px 22px; }
}


/* BASIC css end */