@charset "utf-8";

/* 노화과학연구소 연구소소개 — 연혁/소장인사말/규정/구성/참여연구진 5탭 한 페이지 통합
 * (Figma 736:26887, 748:27349, 752:29850, 752:28583, 752:28886) */

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

.institute-panel {
    padding-top: 10px;
}

/* 연혁 상단 비주얼 */
.institute-history-photo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: clamp(260px, 25vw, 260px);
    overflow: hidden;
    box-sizing: border-box;

    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 35%,
            rgba(255, 255, 255, 0.18) 50%,
            rgba(255, 255, 255, 0.82) 75%,
            rgba(255, 255, 255, 0.96) 100%
        ),
        url('/pages/medicine_jnu/img/sub/sub05010200_.png');

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	 padding-right: 50px;
	 margin-bottom:40px;
}

/* 텍스트 영역 */
.institute-history-photo__content {
    position: relative;
    z-index: 2;
    width: 54%;
    padding: 40px 55px 40px 30px;
    box-sizing: border-box;
    text-align: right;
}

/* 의과학연구소 */
.institute-history-photo__title {
    display: block;
    margin: 0 0 18px;
    color: #1f594d;
    font-size: clamp(38px, 4vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.045em;    text-align: right;
    text-decoration: overline;
}

/* 연구소 소개 문구 */
.institute-history-photo__desc {
       margin: 0;
    color: #222;
    font-size: clamp(16px, 1.45vw, 18px);
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.020em;
    word-break: keep-all;
    text-align: right;
}


/* ── 연구소 연혁 ─────────────────────────────────────────── */
/* 설립목적 한 줄 — 졸업요건·장학 안내문과 같은 슬로건 박스 */
.institute-purpose {
    padding: 14px 20px;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-white));
    border-left: 4px solid var(--color-primary);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
    color: var(--color-primary);
    text-align: center;
    word-break: keep-all;
}



/* 제목 바로 아래 목록(연혁 설립연도 / 구성 항목) — def-row 밖이라 들여쓰기만 맞춤 */
.institute-panel .doc-section__list {
    padding-left: 20px;
}

/* ── 소장 인사말 (학장인사말 greeting 컴포넌트 재사용) ─────── */
/* 사진 옆 칼럼 폭 제한 — 사진을 뺀 상태라 해제(1024 이하는 원래 none). 사진 복구 시 같이 되살릴 것
.text-wrap {
    max-width: 617px;
    min-width: 300px;
}
*/

.greeting {
    display: flex;
    align-items: flex-start;
    gap: 135px;
    width: 100%;
    /* 사진 있을 때의 좌여백 — 사진을 뺀 상태라 해제(다른 탭과 좌측 끝선 일치). 사진 복구 시 되살릴 것
    padding-left: 129px; */
}

/* 소장 사진 — 마크업과 함께 주석 처리. 사진 넣어달라는 요청 오면 되살릴 것
.greeting-photo {
    display: block;
    flex-shrink: 0;
    max-width: 516px;
    min-width: 400px;
    max-height: 503px;
    min-height: 300px;
    width: 100%;
    height: auto;
    background: var(--color-gray50)
}
*/

.greeting-content {
    flex: 1;
    min-width: 0
}

.greeting-lead {
    font-size: var(--font-size-heading-lg);
    line-height: var(--line-height-heading-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-black);
    padding: 34px 0 20px;
}

.greeting-lead-name {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary)
}

.greeting-divider {
    display: block;
    border: none;
    border-top: 1px solid var(--color-border-base);
}

.greeting-text {
    padding: 40px 0 60px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-body-md);
    color: var(--color-text-body)
}

.greeting-signature {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-size: 20px;
    font-weight: var(--font-weight-regular);
    color: var(--color-black);    
	justify-content: flex-end;
}

.greeting-signature-name {
    font-size: 32px;
    font-weight: var(--font-weight-semibold)
}

/* ── 참여 연구진 (원본 center_01_01_05 마크업 / Figma 752:28886) ─── */
.center01_05 {
    --org-line: var(--color-gray300);
    --org-gap-y: 56px;      /* 레벨 간 세로 간격 */
    --org-col-gap: 440px;   /* Figma 중앙 통로 ≈ 프레임폭 38% */
    position: relative;
    padding-top: 10px;
}

/* 카드 공통 */
.center01_05 .c_or1,
.center01_05 .fbox > dl,
.center01_05 .or_list > li {
    border: 1px solid var(--color-gray200);
    background: var(--color-white);
}

/* 카드 헤더 */
.center01_05 dt,
.center01_05 .orsub {
    padding: 22px 20px;
    background: var(--color-gray50);
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    color: var(--color-text-title1);
    text-align: center;
}

/* 카드 본문 */
.center01_05 dd,
.center01_05 .ortxt {
    margin: 0;
    padding: 26px 24px;
    font-size: 16px;
    line-height: 1.9;
    color: var(--color-text-body);
    text-align: center;
}

/* ── 소장 ── */
.center01_05 .c_or1 {
    width: calc((100% - var(--org-col-gap)) / 2);
    margin: 0 auto;
}

.center01_05 .c_or1 dt {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ── 자문/운영/행정 레벨 (Grid) ── */
.center01_05 .fbox {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--org-col-gap);
    row-gap: var(--org-gap-y);
    align-items: start;
    margin-top: var(--org-gap-y);
}

/* 중앙 척추선: 소장 밑 ~ 연구부 위까지 관통 */
.center01_05 .fbox::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(var(--org-gap-y) * -1);
    bottom: calc(var(--org-gap-y) * -1);
    width: 2px;
    background: var(--org-line);
    transform: translateX(-50%);
}

.center01_05 .c_or2 {
    grid-column: 1;
    grid-row: 1;
    position: relative;
}

.center01_05 .c_or3 {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: relative;
}

.center01_05 .c_or4 {
    grid-column: 1;
    grid-row: 2;
    position: relative;
}

/* 자문·행정: 카드 오른쪽 → 중앙선 가로 연결 */
.center01_05 .c_or2::after,
.center01_05 .c_or4::after {
    content: '';
    position: absolute;
    top: 40px;
    right: calc(var(--org-col-gap) / -2);
    width: calc(var(--org-col-gap) / 2);
    height: 2px;
    background: var(--org-line);
}

/* 운영: 카드 왼쪽 → 중앙선 가로 연결 */
.center01_05 .c_or3::after {
    content: '';
    position: absolute;
    top: 40px;
    left: calc(var(--org-col-gap) / -2);
    width: calc(var(--org-col-gap) / 2);
    height: 2px;
    background: var(--org-line);
}

/* 자문·운영 이름 2열 */
.center01_05 .c_or2 dd ul,
.center01_05 .c_or3 dd ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 40px;
}

.center01_05 .fbox ul li {
    list-style: none;
}

/* 행정기획부 라벨-값 */
.center01_05 .c_or4 dd {
    text-align: left;
}

.center01_05 .c_or4 dd p {
    display: flex;
    gap: 24px;
    margin: 0 0 10px;
}

.center01_05 .c_or4 dd p:last-child {
    margin-bottom: 0;
}

/* 라벨(부장/간사) 딥그린 */
.center01_05 .c_or4 dd p span,
.center01_05 .or_list .ortxt span {
    min-width: 4.5em;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* ── 연구부 3열 ── */
.center01_05 .or_list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: var(--org-gap-y);
}

.center01_05 .or_list > li {
    position: relative;
    list-style: none;
}

/* 3열 위 가로선 (gap 보정) */
.center01_05 .or_list::before {
    content: '';
    position: absolute;
    top: calc(var(--org-gap-y) / -2);
    left: calc((100% - 48px) / 6);
    right: calc((100% - 48px) / 6);
    height: 2px;
    background: var(--org-line);
}

/* 각 연구부 카드 위 세로선 */
.center01_05 .or_list > li::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(var(--org-gap-y) / -2);
    width: 2px;
    height: calc(var(--org-gap-y) / 2);
    background: var(--org-line);
    transform: translateX(-50%);
}

.center01_05 .or_list .ortxt {
    display: flex;
    justify-content: center;
    gap: 40px;
}

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .text-wrap {
        max-width: none;
        min-width: 0;
    }

    .greeting {
        padding-left: 0;
        flex-direction: column;
        gap: 40px;
    }
}

/* 소장 사진 복구 시 같이 되살릴 것 (768 이하)
    .greeting-photo {
        width: 100%;
        max-width: none;
        margin: 0 auto
    }
*/

@media (max-width: 900px) {
    .center01_05 .c_or1 {
        width: 100%;
    }

    .center01_05 .fbox,
    .center01_05 .or_list {
        grid-template-columns: 1fr;
        row-gap: 24px;
        gap: 20px;
    }

    .center01_05 .c_or2,
    .center01_05 .c_or3,
    .center01_05 .c_or4 {
        grid-column: 1;
        grid-row: auto;
    }

    .center01_05 .fbox::before,
    .center01_05 .c_or2::after,
    .center01_05 .c_or3::after,
    .center01_05 .c_or4::after,
    .center01_05 .or_list::before,
    .center01_05 .or_list > li::before {
        display: none;
    }
}

/* 소장 사진 복구 시 같이 되살릴 것 — 사진 박스가 세로로 짧아 아이콘을 높이 기준으로 예외 처리
.greeting-photo .empty-img-board-icon {
    width: auto;
    height: 64%;
}
*/