@charset "UTF-8";
/* ----------------------------------------
 * COSFET21 About Page Styles
 * Created : 202504
 * topbar 공통 스타일은 cosfet21.css 참고
 --------------------------------------- */

/* ===== PAGE WRAPPER ===== */
.about-page-wrap {
    width: 100%;
    min-height: calc(85vh - 80px);
    background-color: #fff;
}

/* ===== TAB NAVIGATION ===== */
.about-tab-nav {
    max-width: 948px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 0;
    border-bottom: 1.5px solid #B8B8B8;
    padding-bottom: 8px;
}

.about-tab-nav__item {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #B8B8B8;
    line-height: 38px;
    padding: 0 32px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    position: relative;
    background: none;
    border: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.about-tab-nav__item:first-child {
    padding-left: 39;
}

.about-tab-nav__item:hover {
    color: #505050;
}

.about-tab-nav__item.active {
    font-weight: 700;
    color: #505050;
}

.about-tab-nav__item.active::after {
    content: '';
    position: absolute;
    bottom: -9.5px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #000;
}

.about-tab-nav__item:first-child.active::after {
    left: 0;
}

/* ===== TAB CONTENT ===== */
.about-tab-content {
    max-width: 948px;
    margin: 0 auto;
    padding-top: 38px;
    padding-bottom: 60px;
}

.about-tab-panel {
    display: none;
}

.about-tab-panel.active {
    display: block;
}

/* ===== 통이미지 영역 ===== */
.about-full-img {
    width: 100%;
    height: auto;
    display: block;
}

.about-img-placeholder {
    width: 100%;
    min-height: 573px;
    background-color: #D9D9D9;
    display: block;
}

/* ================================================
   FAQ SECTION
   ================================================ */

.faq-section {
    padding-top: 40px;
    padding-bottom: 60px;
}

/* ===== FAQ 타이틀 ===== */
.faq-title {
    margin: 0 0 50px 0;
    font-size: 59px;
    font-weight: 800;
    color: #FF6156;
    text-align: center;
    letter-spacing: -1px;
    line-height: 1;
    font-family: 'Inter', sans-serif;
}

/* ===== 카테고리 필터 버튼 =====
 * 활성: gradient(#EC2C8B → #FE5E59) / 비활성: #1A1A1A (login-card__btn 동일)
 */
.faq-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.faq-filter__btn {
    height: 30px;
    padding: 0 16px;
    border: none;
    border-radius: 5px;
    background-color: #1A1A1A;
    color: #FFFFFF;
    font-size: 13.44px;
    font-weight: 700;
    font-family: 'Pretendard', 'Inter', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.faq-filter__btn:hover {
    opacity: 0.8;
}

.faq-filter__btn--active {
    background: linear-gradient(270deg, #EC2C8B 0%, #FE5E59 100%);
}

.faq-filter__btn--active:hover {
    opacity: 0.85;
}

/* ===== FAQ 목록 ===== */
.faq-list {
    border-top: 1.64px solid #D5D5D5;
}

/* ===== FAQ 아이템 ===== */
.faq-item {
    border-bottom: 1.64px solid #D5D5D5;
}

/* 질문 행 (버튼) */
.faq-item__question-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px 6px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

/* 카테고리 레이블 */
.faq-item__category {
    width: 80px;
    flex-shrink: 0;
    font-size: 13.44px;
    font-weight: 700;
    color: #D96767;
    font-family: 'Pretendard', 'Inter', sans-serif;
    text-align: left;
}

/* 질문 텍스트 */
.faq-item__question {
    flex: 1;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    font-family: 'Pretendard', 'Inter', sans-serif;
    text-align: left;
}

/* 화살표 아이콘 */
.faq-item__arrow {
    flex-shrink: 0;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.faq-item__arrow.rotate {
    transform: rotate(180deg);
}

/* 답변 영역
 * padding-left 105px = category 80px + gap ≈ 25px (질문 시작 위치 맞춤)
 */
.faq-item__answer {
    display: none;
    padding: 0 40px 24px 105px;
    font-size: 14.5px;
    font-weight: 400;
    color: #666666;
    line-height: 1.8;
    font-family: 'Pretendard', 'Inter', sans-serif;
}

.faq-item__answer.show {
    display: block;
}

/* ===== FAQ 빈 상태 / 로딩 ===== */
.faq-empty {
    padding: 60px 0;
    text-align: center;
    color: #A4A4A4;
    font-size: 15px;
    font-family: 'Pretendard', 'Inter', sans-serif;
}

/* ===== 페이지네이션 ===== */
.faq-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 40px;
}

.faq-pagination__item {
    font-size: 20px;
    font-weight: 400;
    color: #A4A4A4;
    cursor: pointer;
    font-family: 'Pretendard', 'Inter', sans-serif;
    line-height: 1;
    transition: color 0.15s ease;
}

.faq-pagination__item:hover {
    color: #8C6C6C;
}

.faq-pagination__item--active {
    font-weight: 700;
    color: #8C6C6C;
}

/* ================================================
   RESPONSIVE — Tablet (768px ~ 1199px)
   ================================================ */
@media only screen and (max-width: 1199px) {

    .about-tab-nav {
        padding: 0 24px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .about-tab-nav::-webkit-scrollbar {
        display: none;
    }

    .about-tab-nav__item {
        font-size: 16px;
        padding: 0 18px;
    }

    .about-tab-nav__item:first-child {
        padding-left: 0;
    }

    .about-tab-content {
        padding: 16px 24px 48px 24px;
    }

    .about-img-placeholder {
        min-height: 420px;
    }

    .faq-title {
        font-size: 44px;
        margin-bottom: 36px;
    }

    .faq-item__answer {
        padding: 0 24px 20px 90px;
    }
}

/* ================================================
   RESPONSIVE — Mobile (~ 767px)
   ================================================ */
@media only screen and (max-width: 767px) {

    .about-tab-nav {
        padding: 0 16px;
    }

    .about-tab-nav__item {
        font-size: 14px;
        line-height: 36px;
        padding: 0 12px;
    }

    .about-tab-nav__item:first-child {
        padding-left: 0;
    }

    .about-tab-content {
        padding: 14px 16px 40px 16px;
    }

    .about-img-placeholder {
        min-height: 260px;
    }

    .about-page-wrap {
        min-height: calc(65vh - 60px);
    }

    .faq-title {
        font-size: 30px;
        margin-bottom: 24px;
    }

    .faq-item__category {
        font-size: 11px;
        width: 66px;
    }

    .faq-item__question {
        font-size: 14px;
    }

    /* 답변 padding-left: category 66px + gap ≈ 16px */
    .faq-item__answer {
        padding: 0 16px 20px 82px;
        font-size: 13px;
    }

    .faq-pagination {
        gap: 16px;
        margin-top: 28px;
    }

    .faq-pagination__item {
        font-size: 16px;
    }
}