/*
============================================================
About QCR > Introduction
============================================================

사용 HTML:
templates/core/about.html

이 파일은 About QCR > Introduction 페이지에서만
사용하는 스타일을 관리한다.

페이지 구성:
1. Introduction
2. Our Teams
============================================================
*/


/* =========================================================
   Our Teams 전체 영역
   ========================================================= */

/*
Introduction 영역과 Our Teams 영역 사이에
간격과 구분선을 만든다.
*/
.team-section {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid #e5e5e5;
}


/* =========================================================
   Our Teams 메인 레이아웃
   ========================================================= */

/*
왼쪽:
팀 구조도 이미지

오른쪽:
Forefront Research Teams
Infrastructural Research Teams
*/
.team-layout {
    display: grid;
    grid-template-columns: 42% 58%;
    gap: 0;
    align-items: stretch;

    margin-top: 25px;
}


/* =========================================================
   왼쪽 - 팀 구조도
   ========================================================= */

.team-left {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 35px 55px 35px 10px;

    /* 왼쪽 구조도와 오른쪽 팀 목록을 구분하는 세로선 */
    border-right: 1px solid #bfc1c3;
}


/* 팀 구조도 이미지 */
.team-overview-img {
    display: block;

    width: 100%;
    max-width: 470px;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   오른쪽 - 연구팀 목록
   ========================================================= */

.team-right {
    padding: 15px 0 20px 55px;
}


/* =========================================================
   연구팀 그룹
   ========================================================= */

/*
예:
Forefront Research Teams
Infrastructural Research Teams
*/
.team-group {
    margin-bottom: 48px;
}

.team-group:last-child {
    margin-bottom: 0;
}


/* 연구팀 그룹 제목 */
.group-title {
    margin: 0 0 25px;
    padding: 7px 14px;

    background: #696b6e;
    color: #ffffff;

    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
}


/* =========================================================
   개별 연구팀
   ========================================================= */

/*
각 연구팀은

[아이콘] [팀 이름]
         [팀 설명]

형태로 배치한다.
*/
.team-item {
    display: grid;
    grid-template-columns: 58px 1fr;

    gap: 18px;

    align-items: start;

    margin-bottom: 28px;
}

.team-item:last-child {
    margin-bottom: 0;
}


/* =========================================================
   연구팀 아이콘
   ========================================================= */

.team-icon-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.team-icon {
    width: 48px;
    height: 48px;

    object-fit: contain;
}


/* =========================================================
   연구팀 이름
   ========================================================= */

.team-title {
    margin: 0 0 6px;

    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.35;
}


/*
첫 번째 그룹:
Forefront Research Teams

QCR 메인 컬러인 Burgundy 사용
*/
.team-group:nth-child(1) .team-title {
    color: var(--primary-color);
}


/*
두 번째 그룹:
Infrastructural Research Teams

구조도 이미지와 어울리는 Blue 사용
*/
.team-group:nth-child(2) .team-title {
    color: #2878b7;
}


/* =========================================================
   연구팀 설명
   ========================================================= */

.team-desc {
    color: #444;

    font-size: 0.95rem;
    line-height: 1.6;
}

.team-desc p {
    margin: 0;
}


/* =========================================================
   Our Teams 전체 설명
   ========================================================= */

/*
Admin:
Research Visions > Team description

팀 구조도와 팀 목록 아래에 표시한다.
*/
.team-description-box {
    position: relative;

    margin-top: 35px;
    padding-top: 25px;

    border-top: 1px solid #aeb0b2;
}


/*
구조도와 설명 박스를 연결하는 작은 장식
*/
.team-description-box::before {
    content: '';

    position: absolute;

    top: -7px;
    left: 42%;

    width: 14px;
    height: 14px;

    background: #ffffff;

    border-left: 1px solid #aeb0b2;
    border-bottom: 1px solid #aeb0b2;

    transform: rotate(-45deg);
}


/* 설명문 안쪽 박스 */
.team-description-inner {
    position: relative;

    padding: 30px 45px;

    color: #555;

    font-size: 0.98rem;
    line-height: 1.8;

    /*
    참고 이미지처럼 아주 옅은 점 패턴
    */
    background-image:
        radial-gradient(#dadada 0.7px, transparent 0.7px);

    background-size: 5px 5px;

    border: 1px solid #eeeeee;
}


/* CKEditor에서 생성된 문단 여백 정리 */
.team-description-inner p {
    margin-top: 0;
    margin-bottom: 12px;
}

.team-description-inner p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 992px) {

    /*
    태블릿 이하에서는
    왼쪽 구조도 / 오른쪽 팀 목록을
    세로 1열 구조로 변경
    */
    .team-layout {
        grid-template-columns: 1fr;
    }

    .team-left {
        border-right: none;
        border-bottom: 1px solid #dddddd;

        padding: 20px 20px 45px;
    }

    .team-right {
        padding: 45px 0 0;
    }

    .team-overview-img {
        max-width: 500px;
        margin: 0 auto;
    }

    /*
    모바일 구조에서는 연결 장식 제거
    */
    .team-description-box::before {
        display: none;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 576px) {

    .team-section {
        margin-top: 60px;
        padding-top: 45px;
    }

    .team-item {
        grid-template-columns: 48px 1fr;
        gap: 14px;
    }

    .team-icon {
        width: 42px;
        height: 42px;
    }

    .group-title {
        font-size: 1.1rem;
    }

    .team-description-inner {
        padding: 25px 22px;
    }

}