/*
 * 서비스 페이지 FAQ (GL-2213)
 *
 * BF(수하물프리) FAQ 와 동일한 시각 언어를 따른다. 치수·색·화살표 아이콘 모두 BF 의
 * notice-* 규칙(css/bf/baggageFree.css)에서 가져왔다. 클래스 이름만 gl-faq-* 로 분리해
 * BF/ICD/ISS 의 기존 CSS 를 건드리지 않는다.
 *
 * 모바일 우선 — 기본값이 BF 의 모바일(max-width:1039px) 치수다. 콘텐츠 컬럼이 PC 에서도
 * 좁아서 데스크톱에서 글자를 키우지 않는다. PC 에서 달라지는 건 화살표 여백뿐이다.
 *
 * BF 와 다른 점은 토글 단위뿐이다. BF 는 카테고리를 열면 그 안의 Q&A 묶음이 펼쳐지지만,
 * KD·D2D 는 문항이 4개뿐이라 카테고리가 없어 질문 하나가 곧 토글 단위다.
 */

.gl-faq {
    text-align: left;
}

/* --- 제목 (BF .notice-title @mobile: 18px) --- */

.gl-faq-title {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #050505;
    margin: 0 0 16px;
}

.gl-faq-title-icon {
    width: 18px;
    margin-right: 5px;
}

/* --- 목록 (BF .notice-list) --- */

.gl-faq-list {
    margin-top: 16px;
}

/* --- 질문 = 토글 대상 (BF .notice-list-item @mobile: 14px / padding 16px 0) --- */

.gl-faq-question {
    display: block;
    position: relative;
    width: 100%;
    padding: 16px 40px 16px 0; /* 우측은 화살표(32px) 자리 */
    border: 0;
    border-bottom: 1px solid #bebebe;
    background: none;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: #050505;
    line-height: 1.5;
    cursor: pointer;
}

.gl-faq-question:after {
    position: absolute;
    width: 32px;
    height: 32px;
    right: 0;
    top: 50%;
    content: "";
    transform: translate(0, -50%);
    background: url("/images/icd/ic_arrow_down-37b683e3ace0f9b9e30ff217788d00da.svg") no-repeat;
    background-size: 32px 32px;
}

.gl-faq-question[aria-expanded="true"]:after {
    background-image: url("/images/icd/ic_arrow_up-25bdc94908dea9d1ccd990cbd920dddc.svg");
}

/* --- 답변 (BF .notice-list-item-content @mobile: padding 24px 16px) --- */

.gl-faq-answer {
    display: none;
    background-color: #fbfbfb;
    padding: 24px 16px;
}

.gl-faq-answer.is-open {
    display: block;
}

.gl-faq-answer-text {
    margin: 0;
    font-size: 13px;
    color: #6d6d6d;
    line-height: 1.7;
    white-space: pre-line;
}

/* --- PC: 글자 크기는 그대로, 화살표 여백만 --- */

@media (min-width: 1040px) {
    .gl-faq-question {
        padding-right: 48px;
    }

    .gl-faq-question:after {
        right: 8px;
    }
}