@charset "utf-8";

/* 학습자료실 > PBL > PBL소개 (mn=325) — 3탭(정의·과정·교육과정) 한 페이지 + JS 패널 전환
 * 공용 .tab-nav / .doc-section 은 basic.css, 표는 board.css .board-table. */

/* 탭 버튼(button 형) + 패널 전환 */
button.tab-btn {
    width: 100%;
    background: var(--color-bg-base);
}

.pbl-panel[hidden] {
    display: none;
}

/* 섹션 제목 — 24 semibold 중앙 */
.pbl-section-title {
    margin: 0 0 45px;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    line-height: 36px;
    color: var(--color-text-title1);
    text-align: center;
}

/* ── PBL 정의 박스 ── */
.pbl-intro__box {
    padding: 20px;
    background: var(--color-gray50);
    border-radius: 4px;
}

.pbl-intro__box p {
    margin: 0;
    font-size: 18px;
    line-height: 27px;
    color: var(--color-text-body);
    text-align: center;
}

/* ── 문제중심 학습 (4원 다이어그램) ── */
.pbl-core {
    margin-top: 80px;

    /* 원별 장식색 — 페이지 스코프 토큰 */
    --pbl-1-from: #296C5E; --pbl-1-to: #0B5344;
    --pbl-1-num: var(--color-primary);
    --pbl-1-text: var(--color-text-title2);

    --pbl-2-from: #843E41; --pbl-2-to: #803C3F;
    --pbl-2-num: var(--color-secondary);
    --pbl-2-text: var(--color-secondary);

    --pbl-3-from: #61296C; --pbl-3-to: #4A0B53;
    --pbl-3-num: #60276B;
    --pbl-3-text: #60276B;

    --pbl-4-from: #317C97; --pbl-4-to: #175E78;
    --pbl-4-num: #18607A;
    --pbl-4-text: #18607A;
}

.pbl-goals {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 20px;
    max-width: 1180px;
    margin: 60px auto 0;
    padding: 0;
    list-style: none;
}

/* 원 ↔ 라벨 사이 가로 구분선 (원 129 + 핀 여백 ≈ 153) */
.pbl-goals::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 153px;
    border-top: 1px solid var(--color-gray300);
}

.pbl-goal {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pbl-goal__circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 129px;
    height: 129px;
    border-radius: 50%;
}

.pbl-goal__circle::before {
    content: "";
    position: absolute;
    inset: 6.5px;
    border-radius: 50%;
    background: var(--color-white);
}

.pbl-goal__circle > span {
    position: relative;
    z-index: 1;
    font-family: var(--font-accent);
    font-weight: var(--font-weight-bold);
    font-size: 35px;
    line-height: 1;
}

/* 원 아래 핀 삼각형 */
.pbl-goal__circle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 20px solid transparent;
}

.pbl-goal__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 25px;
    text-align: center;
}

.pbl-goal__label strong {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    line-height: 27px;
}

.pbl-goal__label span {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 27px;
    color: var(--color-text-body);
}

.pbl-goal--1 .pbl-goal__circle { background: linear-gradient(180deg, var(--pbl-1-from), var(--pbl-1-to)); }
.pbl-goal--1 .pbl-goal__circle > span { color: var(--pbl-1-num); }
.pbl-goal--1 .pbl-goal__circle::after { border-top-color: var(--pbl-1-num); }
.pbl-goal--1 .pbl-goal__label strong { color: var(--pbl-1-text); }

.pbl-goal--2 .pbl-goal__circle { background: linear-gradient(180deg, var(--pbl-2-from), var(--pbl-2-to)); }
.pbl-goal--2 .pbl-goal__circle > span { color: var(--pbl-2-num); }
.pbl-goal--2 .pbl-goal__circle::after { border-top-color: var(--pbl-2-num); }
.pbl-goal--2 .pbl-goal__label strong { color: var(--pbl-2-text); }

.pbl-goal--3 .pbl-goal__circle { background: linear-gradient(180deg, var(--pbl-3-from), var(--pbl-3-to)); }
.pbl-goal--3 .pbl-goal__circle > span { color: var(--pbl-3-num); }
.pbl-goal--3 .pbl-goal__circle::after { border-top-color: var(--pbl-3-num); }
.pbl-goal--3 .pbl-goal__label strong { color: var(--pbl-3-text); }

.pbl-goal--4 .pbl-goal__circle { background: linear-gradient(180deg, var(--pbl-4-from), var(--pbl-4-to)); }
.pbl-goal--4 .pbl-goal__circle > span { color: var(--pbl-4-num); }
.pbl-goal--4 .pbl-goal__circle::after { border-top-color: var(--pbl-4-num); }
.pbl-goal--4 .pbl-goal__label strong { color: var(--pbl-4-text); }

.pbl-core__caption {
    margin: 60px 0 0;
    font-family: var(--font-accent);
    font-weight: var(--font-weight-bold);
    font-size: 42px;
    line-height: 51.7px;
    color: var(--color-text-title1);
    text-align: center;
}

@media (max-width: 768px) {
    .pbl-section-title {
        margin-bottom: 28px;
        font-size: 20px;
        line-height: 30px;
    }

    .pbl-core {
        margin-top: 56px;
    }

    .pbl-goals {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
        margin-top: 40px;
    }

    .pbl-goals::after {
        display: none;
    }

    .pbl-goal__label {
        padding-top: 16px;
    }

    .pbl-core__caption {
        font-size: 30px;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    .pbl-goals {
        grid-template-columns: 1fr;
    }
}

/* ── 패널 3 : PBL지원 연락처 표 — 공용 .board-table--topline, 행머리 열만 고정 ── */
.doc-section__title + .board-table-wrap {
    margin-top: 8px;
}

.board-table--pbl-support col:first-child {
    width: 280px;
}

/* ── 패널 3 : PBL실 사진 2장 ── */
.pbl-rooms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 40px;
}

.pbl-rooms__item {
    position: relative;
    margin: 0;
    aspect-ratio: 747 / 420;
    overflow: hidden;
    background: var(--color-gray100);
}

.pbl-rooms__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .pbl-rooms {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}