@charset "UTF-8";

/* 고객센터 FAQ(.service-faq). cs.jsp 가 고객센터 공통·1:1 문의 규칙(service/cs.css) 바로 뒤에 싣는다.
   service/cs.css 에서 순서 그대로 옮겼다. 같은 깊이(css/faq/)라 ../../images 상대 주소가 그대로 맞는다. */
.service-faq > .tab {margin-top:42px;padding:0 102px;text-align:center;}
.service-faq > .tab li {position:relative;display:inline-block;vertical-align:middle;margin:18px 0 18px 25px;padding-left:29px;}
.service-faq > .tab li:first-child,
.service-faq > .tab li:nth-child(7n+1) {margin-left:0;padding-left:0;}
.service-faq > .tab li:first-child:after,
.service-faq > .tab li:nth-child(7n+1):after {display:none;}
.service-faq > .tab li:after {content:'';position:absolute;top:50%;margin-top:-2px;left:0;width:4px;height:4px;background:#e5e5e5;}
.service-faq > .tab li a {position:relative;font-size:16px;font-weight:600;line-height:15px;letter-spacing:-0.05em;color:#868686;}
.service-faq > .tab .curr a {color:#111;font-weight:700;}
.service-faq > .tab .curr a:after {content:'';position:absolute;left:0;bottom:-7px;width:100%;height:2px;background:#222;}

.service-faq .search-box {margin-top:42px;padding:34px 0 55px;border:1px solid #ddd;border-radius:5px;}
.service-faq .search-box .input {position:relative;width:480px;margin:0 auto;}
.service-faq .search-box .input input {padding:16px 0;border:none;border-bottom:2px solid #222;border-radius:initial;font-size:16px;letter-spacing:-0.05em;line-height:23px;font-weight: 500;}
.service-faq .search-box button {position:absolute;top:21px;right:0;}
.service-faq .word-list {position:absolute;width:458px;left:-10px;top:55px;padding:12px 20px 40px;border-radius:5px;background:#fff;border:1px solid #777;box-shadow:3px 4px 5px 0px rgba(0, 0, 0, 0.1);-webkit-box-shadow:3px 4px 5px 0px rgba(0, 0, 0, 0.1);-ms-box-shadow:3px 4px 5px 0px rgba(0, 0, 0, 0.1);}
.service-faq .word-list li a {display:block;font-size:15px;font-weight:500;line-height:32px;letter-spacing:-0.05em;color:#555;}
.service-faq .word-list .word {color:#ffbe00;}
.service-faq .txt-guide {margin-top:60px;font-size:14px;font-weight:500;line-height: 20px;letter-spacing:-0.025em;color:#777;}
.service-faq .txt-guide span {display:inline-block;text-indent: 22px;background:url('../../images/default/icon/bg_guide.svg') 0 50% no-repeat;}

.service-faq .qna-list {margin-top:20px;border-top:1px solid #555;}
/* 항목 줄은 FAQ 항목(직계 li)에만 긋는다. 후손 선택자였을 때는 답변 본문 안의 목록 항목(li)마다 밑줄이 그어졌다. */
.service-faq .qna-list > li {position:relative;border-bottom:1px solid #e5e5e5;}
.service-faq .qna-list .question a {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 200px);display:block;padding-left:31px;font-size:16px;font-weight:600;line-height:75px;letter-spacing:-0.025em;color:#111;}
.service-faq .qna-list .question a:after {content:'';position:absolute;top: 0;right: 0;padding: 33px 31px;width:18px;height:9px;background: url('../../images/default/arrow/btn_arrow_14x7.svg') no-repeat center;transition:transform .2s;-webkit-transition:transform .2s;-ms-transition:transform .2s;}
.service-faq .qna-list .question em {display:inline-block;vertical-align:bottom;margin-right:14px;font-size:23px;font-weight:400;letter-spacing:-0.05em;}
.service-faq .qna-list .on .question a:after {transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);}
.service-faq .qna-list .answer {display:none;background:#f8f8f8;padding:var(--faq-pt) 65px 60px 65px;font-size:0;}
.service-faq .qna-list .answer > em {display:inline-block;vertical-align:top;letter-spacing:-0.05em;margin-right:14px;font-weight:400;color:#ffc600;margin-left:-33px;}
.service-faq .qna-list .answer .info {margin:29px 0 25px;padding:31px 40px 30px 30px;border-radius:5px;background:#fff;}
/**/
/*.service-faq .qna-list .faq-inquiry {margin-top:82px;padding:23px 0 29px 92px;border-radius:5px;font-size:14px;font-weight:500;line-height:24px;letter-spacing:-0.05em;color:#555;background:#fefefe url('../../service/images/bg_faq-inquiry.png') 40px 37px no-repeat;}*/
/*.service-faq .qna-list .faq-inquiry a {text-decoration:underline;}*/

.service-faq .qna-list > li {
    cursor: pointer
}
/* 답변 칸의 'A.'(.answer > em)는 본문(.faq-content) 밖에 절대 위치로 떠 있다. 본문 첫 글줄과 한 줄로 읽히려면 둘의 '기준선'이 같아야 한다.
   예전에는 top:28px·줄 높이 28px 로 고정해 두어 A.(23px)의 기준선이 본문 첫 줄(16px / 줄 높이 25.6px)보다 데스크톱에서 2px, 700px 이하에서 5px 위에 있었다
   (본문 첫 문장이 A. 보다 아래로 처져 보였다). 줄 상자 위에서 기준선까지는 (줄 높이 − 글꼴 높이) / 2 + 글꼴 올림이므로,
   글꼴 올림 − 내림의 절반(--faq-k)과 두 줄의 글자 크기·줄 높이로 A. 의 top 을 아래 식에서 구한다. 값은 모두 변수라 700px 이하(new-cs.css)는 변수만 바꾼다.
   - --faq-pt        답변 칸의 위 안쪽 여백. 본문 첫 블록이 시작하는 곳이다.
   - --faq-body-fs   본문 글자 크기. .md-guide 가 16px, 700px 이하는 15px(markdown-content.css).
   - --faq-a-fs/-lh  A. 의 글자 크기·줄 높이.
   - --faq-k         Pretendard 의 (글꼴 올림 − 내림) / 2 = (0.95 − 0.24) / 2 ≒ 0.355em. 글꼴이 바뀌면 이 값을 다시 잰다.
   - --faq-trim      글꼴 올림·내림이 정수로 반올림되는 오차(최대 0.6px)가 화면에 찍힐 때 1px 어긋나지 않게 A. 를 조금 올리는 값이다.
                     문단·제목 h1~h6·목록·인용·표·코드 블록을 1400·1000·701·700·601px 에서 픽셀로 재어 0.3px 로 정했다(h5 만 700px 이하에서 1px 차이).
   - --faq-first-*   본문 첫 블록의 첫 글줄(글자 크기·줄 높이 비율·블록 안쪽/바깥 여백). 기본은 문단이고 아래 :has() 가 제목·목록·인용·표·코드로 바꾼다. */
.service-faq .qna-list .answer{
    --faq-pt:34px;
    --faq-body-fs:16px;
    --faq-a-fs:23px;
    --faq-a-lh:28px;
    --faq-k:0.355;
    --faq-trim:0.3px;
    --faq-first-fs:var(--faq-body-fs);
    --faq-first-ratio:1.6;
    --faq-first-pad:0px;
    --faq-first-lh:calc(var(--faq-first-fs) * var(--faq-first-ratio));
    color: #000000;
    font-size: 15px;
    line-height: 1;
    position:relative;
}

.service-faq .qna-list .answer > em{
    position:absolute;
    top:calc(var(--faq-pt) + var(--faq-first-pad) + var(--faq-first-lh) / 2 + var(--faq-k) * var(--faq-first-fs) - var(--faq-a-lh) / 2 - var(--faq-k) * var(--faq-a-fs) - var(--faq-trim));
    font-size:var(--faq-a-fs);
    line-height:var(--faq-a-lh);
}

/* 첫 블록이 문단이 아니면 첫 글줄이 본문 맨 위보다 아래에서 시작하거나 글자가 다르다(값은 markdown-content.css 의 것).
   제목: 위 여백 0(:first-child), 줄 높이 1.4. 목록: 첫 항목의 위 여백 6px 이 목록을 뚫고 나가 본문 안에 남는다.
   인용: 안쪽 여백 16px·16px/1.5. 표: 칸 안쪽 여백 10px + 테두리 1px·15px/24px. 코드 블록: 안쪽 여백 16px(줄 상자는 본문 글자 크기가 정한다).
   그림이 첫 블록이면 글줄이 없어 문단 기준을 그대로 쓴다(그림 위 여백 8px 때문에 그림 윗선은 A. 글자 가운데쯤에 온다). */
.service-faq .qna-list .answer:has(> .faq-content > h1:first-child){--faq-first-fs:32px;--faq-first-ratio:1.4;}
.service-faq .qna-list .answer:has(> .faq-content > h2:first-child){--faq-first-fs:28px;--faq-first-ratio:1.4;}
.service-faq .qna-list .answer:has(> .faq-content > h3:first-child){--faq-first-fs:20px;--faq-first-ratio:1.4;}
.service-faq .qna-list .answer:has(> .faq-content > h4:first-child){--faq-first-fs:18px;--faq-first-ratio:1.4;}
.service-faq .qna-list .answer:has(> .faq-content > h5:first-child){--faq-first-fs:16px;--faq-first-ratio:1.4;}
.service-faq .qna-list .answer:has(> .faq-content > h6:first-child){--faq-first-fs:15px;--faq-first-ratio:1.4;}
.service-faq .qna-list .answer:has(> .faq-content > :is(ul, ol):first-child){--faq-first-pad:6px;}
.service-faq .qna-list .answer:has(> .faq-content > blockquote:first-child){--faq-first-fs:16px;--faq-first-ratio:1.5;--faq-first-pad:16px;}
.service-faq .qna-list .answer:has(> .faq-content > table:first-child){--faq-first-fs:15px;--faq-first-pad:11px;}
.service-faq .qna-list .answer:has(> .faq-content > pre:first-child){--faq-first-pad:16px;}

.service-faq .qna-list .answer > pre{
    margin:0;
}

/* FAQ 답변 본문(.faq-content.md-guide). 모양은 관리자 미리보기·사용가이드·망고소식 상세와 같고 공용 markdown-content.css 가 정한다.
   공개 사이트 공통 CSS(default.css)가 본문 안으로 새어 드는 것(표 칸 배치·그림 세로 정렬·구분선·체크박스)을 되돌리는 article 전용 보정은
   사용가이드·망고소식 상세와 같은 파일(article/articleBody.css)이 진다. cs.jsp 가 markdown-content.css 다음에 그 파일을 싣고,
   거기 범위 선택자에 이 화면의 본문(.service-faq·.faq-noscript 안의 .faq-content.md-guide)이 들어 있다. 같은 값을 여기에 다시 두지 않는다.
   이 파일에는 FAQ 목록 항목(li) 안이라 생기는 것만 남긴다.
   - 위 .qna-list 규칙은 li 를 직계로 한정했으니 본문 목록에 선·위치가 새지 않는다. 다만 li 의 list-style:none·cursor:pointer 는 물려받으므로 되돌린다
     (기호는 본문 목록이 정하고, 글 위에서는 손가락 커서가 필요 없다). */
.faq-content.md-guide {list-style:disc;cursor:auto;}