@charset "utf-8";
/* journey5 - 걸어온 길 / 프로필 (PC 리디자인)
   구성 : 좌우 비대칭 프로필 밴드 + 카테고리 라벨형 약력 리스트 */

.jn5_page{--ink:#0f2740; --pt:#1a5fb4; --pt2:#2ba7ac; --line:#e1e5ea;}

/* ── 배경 : 다른 서브페이지와 동일 재질 ─────────── */
.jn5_page.sub_content{background:linear-gradient(180deg,#fbfcfe 0%,#f4f7fb 55%,#f7fafb 100%); padding:2rem 0 12rem;}
.jn5_page .bg_dot{opacity:.3; background-image:radial-gradient(rgba(18,37,61,.09) 1.2px,transparent 1.2px); background-size:26px 26px;}
.jn5_page .sp_aur{position:absolute; border-radius:50%; pointer-events:none; filter:blur(11rem); opacity:.55; z-index:0;}
.jn5_page .sp_aur.a1{width:62rem; height:62rem; left:-18rem; top:-16rem; background:radial-gradient(circle,rgba(43,167,172,.22),transparent 70%);}
.jn5_page .sp_aur.a2{width:70rem; height:70rem; right:-22rem; top:18%; background:radial-gradient(circle,rgba(26,95,180,.16),transparent 70%);}
.jn5_page .sp_aur.a3{width:64rem; height:64rem; right:4%; bottom:-12rem; background:radial-gradient(circle,rgba(43,167,172,.16),transparent 70%);}
.jn5_page .sub_in{position:relative; z-index:2;}

/* ── 상단 유틸 ───────────────────────── */
.jn5_page .head_util{display:flex; gap:.8rem;}
.jn5_page .util_btn{display:grid; place-items:center; width:4.6rem; height:4.6rem; border-radius:50%; color:#1c3a5e;
	background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9);
	backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:background .25s,transform .25s,color .25s;}
.jn5_page .util_btn:hover{background:#fff; color:var(--pt); transform:translateY(-2px);}
.jn5_page .util_btn svg{width:2rem; height:2rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

/* 좌 : 프로필 / 우 : 약력 2단 구성 */
.jn5_area{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,38rem) minmax(0,1fr); gap:0 7rem;
	width:100%; min-width:0; align-items:start;}

/* ══ 1. 프로필 밴드 ══════════════════════ */
.pf_band{position:sticky; top:11rem; display:flex; flex-direction:column; padding:0;}

.pf_band .pf_eng{display:none;}

/* 인물 사진 (4:5) */
.pf_photo{position:relative; margin:0;}
/* 배경이 투명한 인물 컷 : 은은한 유리 패널 위에 올린다 */
.pf_photo .ph_box{position:relative; display:block; overflow:hidden; aspect-ratio:4 / 5; border-radius:1.6rem;
	background:linear-gradient(155deg,rgba(255,255,255,.62) 0%,rgba(224,235,248,.42) 48%,rgba(11,79,158,.13) 100%);
	backdrop-filter:blur(20px) saturate(155%); -webkit-backdrop-filter:blur(20px) saturate(155%);
	border:1px solid rgba(255,255,255,.72);
	box-shadow:0 2.8rem 6rem -2.4rem rgba(15,39,64,.28), 0 .2rem 1rem rgba(15,39,64,.05),
		inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.35);}
.pf_photo .ph_box::before{content:''; position:absolute; left:-12%; top:-18%; width:78%; height:70%; z-index:1;
	pointer-events:none; border-radius:50%; transform:rotate(-12deg);
	background:radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.8), rgba(255,255,255,0) 70%);}
/* 인물을 크게 앉히고 하단만 잘리게 둔다 (상단은 top:0 으로 고정 — 얼굴은 절대 잘리지 않는다) */
.pf_photo .ph_box img{position:absolute; left:-2%; right:-2%; top:5%; bottom:auto; z-index:2;
	width:104%; height:108%; object-fit:contain; object-position:50% 0;}
.pf_photo .ph_txt{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.3rem; letter-spacing:.02em; color:#7e93aa; white-space:nowrap;}

/* 텍스트 : 이름 / 직위 / 생년·생지 */
.pf_info{margin-top:2.8rem;     text-align: center;}
.pf_name{margin:0; font-family:'YuhanKimberlyPureunSup',"Pretendard Variable",sans-serif;
	font-size:4.4rem; font-weight:700; line-height:1.1; letter-spacing:-.06em; color:var(--ink);}
.pf_name .hanja{margin-left:.6rem; font-size:1.7rem; font-weight:500; letter-spacing:.04em; color:#9fb1c4;}
.pf_role{margin:1.2rem 0 0; font-size:1.9rem; font-weight:600; letter-spacing:-.04em; color:#2d537f;}
.pf_birth{margin:.6rem 0 0; font-size:1.6rem; font-weight:400; letter-spacing:-.03em; color:#8494a6;}

/* ══ 2. 약력 ════════════════════════════ */
.cr_block{margin-top:0;}
.cr_block .cr_head{display:flex; align-items:baseline; gap:1.6rem; margin-bottom:1.2rem;}
.cr_block .cr_eng{font-family:"Pretendard Variable","Pretendard",sans-serif; font-size:1.3rem; font-weight:600; letter-spacing:.18em; color:var(--pt2);}
.cr_block .cr_tit{margin:0; font-family:'YuhanKimberlyPureunSup',"Pretendard Variable",sans-serif;
	font-size:3.2rem; font-weight:700; letter-spacing:-.05em; color:var(--ink);}

.cr_rows{padding-top:.4rem; display:flex; flex-direction:column;}
.cr_row{display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr); gap:0 4rem; align-items:start;
	padding:3.2rem 0; border-top:1px solid rgba(18,37,61,.1);}
.cr_row:last-child{border-bottom:1px solid rgba(18,37,61,.1);}

/* 좌 : 카테고리 라벨 */
.cr_label{display:flex; align-items:center; gap:1.4rem;}
.cr_label .ic{display:grid; place-items:center; flex:0 0 auto; width:5.4rem; height:5.4rem; border-radius:1.5rem; color:#fff;
	background: #1f67bb; box-shadow:0 1.2rem 2.4rem -1.2rem var(--c1);}
.cr_label .ic svg{width:3.2rem; height:3.2rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.cr_label .tx{display:flex; flex-direction:column; gap:.4rem;}
.cr_label .tt{font-family:'YuhanKimberlyPureunSup',"Pretendard Variable",sans-serif;
	font-size:2.4rem; font-weight:700; line-height:1.2; letter-spacing:-.05em; color:var(--ink);}
.cr_label .en{font-family:"Pretendard Variable","Pretendard",sans-serif; font-size:1.2rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#9aabbd;}

/* 우 : 연도 리스트 */
.cr_list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.cr_list li{display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:0 3.2rem; align-items:baseline; padding:1.4rem 0;}
.cr_list li + li{border-top:1px dashed rgba(18,37,61,.12);}
.cr_list .year{position:relative; padding-left:1.6rem; font-family:"Pretendard Variable","Pretendard",sans-serif;
	font-size:1.7rem; font-weight:600; line-height:1.6; letter-spacing:0;     color: #0a4b96;
	font-variant-numeric:tabular-nums; white-space:nowrap;}
.cr_list .year::before{content:''; position:absolute; left:0; top:1rem; width:.6rem; height:.6rem; border-radius:50%; background:var(--c1);}
.cr_list .desc{font-size:1.9rem; font-weight:500; line-height:1.55; letter-spacing:-.035em; color:#2c3a4b; word-break:keep-all; text-wrap:pretty;}
.cr_list .desc .sub{display:inline-block; margin-left:.8rem; padding:.2rem .9rem; border-radius:.5rem;
	background:rgba(26,95,180,.07); font-size:1.4rem; font-weight:500; letter-spacing:-.03em; color:#67809a; vertical-align:.15rem;}

/* 카테고리 톤 */
.cr_row.r1{--c1:#1a5fb4; --c2:#2f7fd1;}
.cr_row.r2{--c1:#146aa8; --c2:#1d8c96;}
.cr_row.r3{--c1:#15789a; --c2:#1c8b98;}


/* ── 진입 애니메이션 : 아래에서 스르륵 ───────── */
@keyframes jn5_up{from{opacity:0; transform:translateY(3.2rem); filter:blur(.5rem);} to{opacity:1; transform:none; filter:none;}}
.jn5_area .pf_band,
.jn5_area .cr_row{animation:jn5_up .9s cubic-bezier(.16,1,.3,1) both;}
.jn5_area .pf_band{animation-delay:.05s;}
.jn5_area .cr_row.r1{animation-delay:.18s;}
.jn5_area .cr_row.r2{animation-delay:.3s;}
.jn5_area .cr_row.r3{animation-delay:.42s;}
@media (prefers-reduced-motion:reduce){
	.jn5_area .pf_band,
	.jn5_area .cr_row{animation:none;}
}

/* ── 화면 폭 보정 (PC 전용 설계) ───────────── */
@media (max-width:1440px){
	.jn5_area{grid-template-columns:minmax(0,34rem) minmax(0,1fr); gap:0 5.6rem;}
	.cr_label .tt{font-size:2.2rem;}
	.pf_name{font-size:4.2rem;}
	.cr_row{grid-template-columns:minmax(0,20rem) minmax(0,1fr); gap:0 3.2rem;}
}
@media (max-width:1280px){
	.jn5_area{grid-template-columns:minmax(0,29rem) minmax(0,1fr); gap:0 4.4rem;}
	.pf_info{margin-top:2.2rem;}
	.pf_name{font-size:3.8rem;}
	.pf_name .hanja{font-size:1.6rem;}
	.pf_role{font-size:1.8rem;}
	.pf_birth{font-size:1.6rem;}
	.cr_row{grid-template-columns:minmax(0,17rem) minmax(0,1fr); gap:0 2.4rem; padding:2.8rem 0;}
	.cr_label{gap:1.2rem;}
	.cr_label .tt{font-size:2.1rem;}
	.cr_label .ic{width:4.8rem; height:4.8rem;}
	.cr_label .ic svg{width:2.7rem; height:2.7rem;}
	.cr_list li{grid-template-columns:minmax(0,11rem) minmax(0,1fr); gap:0 2rem;}
	.cr_list .desc{font-size:1.8rem;}
	.cr_list .desc .sub{font-size:1.5rem;}
}

/* ══ 태블릿 : PC와 같은 좌우 2단 유지 ═══════════ */
/* 1단으로 접으면 프로필 오른쪽이 비어 어색하므로, 768px 까지는 2단을 지킨다 */
@media (max-width:1024px){
	.jn5_page.sub_content{padding-bottom:9rem;}
	.jn5_page .sp_aur{filter:blur(8rem); opacity:.45;}

	.jn5_area{grid-template-columns:minmax(0,23rem) minmax(0,1fr); gap:0 3.6rem;}
	.pf_band{top:9rem;}
	.pf_photo .ph_txt{font-size:1.2rem;}
	.pf_info{margin-top:2rem;}
	.pf_name{font-size:3.6rem;}
	.pf_name .hanja{font-size:1.6rem;}
	.pf_role{margin-top:1rem; font-size:1.8rem;}
	.pf_birth{margin-top:.5rem; font-size:1.6rem;}

	.cr_row{grid-template-columns:minmax(0,1fr); gap:1.6rem 0; padding:2.8rem 0;}
	.cr_label{gap:1.2rem;}
	.cr_label .ic{width:4.6rem; height:4.6rem; border-radius:1.3rem;}
	.cr_label .ic svg{width:2.6rem; height:2.6rem;}
	.cr_label .tt{font-size:2.2rem;}
	.cr_list li{grid-template-columns:minmax(0,12rem) minmax(0,1fr); gap:0 2.4rem;}
	.cr_list .year{font-size:1.7rem;}
	.cr_list .desc{font-size:1.8rem;}
	.cr_list .desc .sub{font-size:1.5rem;}
}

/* ══ 모바일 : 1단 전환 ═══════════════════ */
/* 프로필은 사진 옆에 이름·직위를 붙인 납작한 소개 스트립 */
@media (max-width:768px){
	.jn5_page.sub_content{padding-bottom:7rem;}
	.jn5_area{grid-template-columns:minmax(0,1fr); gap:3.6rem 0;}

	.pf_band{position:static; top:auto; display:grid; grid-template-columns:minmax(0,41%) minmax(0,1fr);
		gap:2rem 3rem; align-items:end;}
	/* 사진·이름이 아래로 정렬되므로 위쪽에 영문 소제목을 얹어 균형을 맞춘다 */
	.pf_band .pf_eng{display:block; grid-column:1 / -1; margin:0 0 .4rem; padding-bottom:1.2rem;
		border-bottom:1px solid rgba(18,37,61,.12);
		font-family:"Pretendard Variable","Pretendard",sans-serif; font-size:1.4rem; font-weight:600;
		letter-spacing:.18em; text-transform:uppercase; color:var(--pt2);}
	.pf_photo{display:block; width:100%;}
	.pf_photo .ph_box{aspect-ratio:4 / 5; border-radius:1.4rem;}
	.pf_info{margin:0 0 .6rem;}
	.pf_name{font-size:3.4rem;}
	.pf_name .hanja{display:block; margin:.6rem 0 0; font-size:1.6rem;}
	.pf_role{margin-top:1.2rem; font-size:1.8rem; color:var(--pt);}
	.pf_birth{margin-top:.6rem; font-size:1.6rem;}

	/* 라벨을 리스트 위로 올린다 */
	.cr_row{grid-template-columns:minmax(0,1fr); gap:1.8rem 0; padding:2.6rem 0;}
	.cr_label{gap:1.2rem;}
	.cr_label .ic{width:4.4rem; height:4.4rem; border-radius:1.2rem;}
	.cr_label .ic svg{width:2.5rem; height:2.5rem;}
	.cr_label .tt{font-size:2.1rem;}
	.cr_list li{grid-template-columns:minmax(0,1fr); gap:.5rem 0; padding:1.4rem 0;}
	.cr_list .year{font-size:1.7rem; line-height:1.5;}
	.cr_list .year::before{top:.8rem;}
	.cr_list .desc{padding-left:1.6rem; font-size:1.8rem; line-height:1.6;}
	.cr_list .desc .sub{margin-left:0; display:block; width:fit-content; margin-top:.5rem; font-size:1.5rem;}
}
/* 480 이하 : 텍스트 칼럼이 좁아 눌리므로 사진 위 / 소개 아래로 세운다 */
@media (max-width:480px){
	.jn5_page.sub_content{padding-bottom:6rem;}

	.pf_band{grid-template-columns:minmax(0,1fr); gap:1.8rem 0; align-items:start;}
	.pf_band .pf_eng{font-size:1.3rem; padding-bottom:1rem; margin-bottom:0;}
	.pf_photo{width:100%;}
	.pf_photo .ph_box{aspect-ratio:1 / 1; border-radius:1.2rem;}
	.pf_photo .ph_box img{left:0; right:0; top:6%; bottom:auto; width:100%; height:116%;}
	.pf_photo .ph_txt{font-size:1.25rem;}
	.pf_info{margin:0;}
	.pf_name{font-size:3.2rem;}
	.pf_name .hanja{display:inline; margin-left:.6rem; font-size:1.6rem; white-space:nowrap;}
	.pf_role{margin-top:1rem; font-size:1.75rem;}
	.pf_birth{margin-top:.5rem; font-size:1.6rem;}

	.cr_row{padding:2.2rem 0; gap:1.4rem 0;}
	.cr_label .tt{font-size:2rem;}
	.cr_list .year{font-size:1.6rem;}
	.cr_list .desc{font-size:1.75rem;}
	.cr_list .desc .sub{font-size:1.45rem;}
}
@media (max-width:380px){
	.pf_band{gap:1.6rem 0;}
	.pf_name{font-size:2.9rem;}
	.pf_name .hanja{font-size:1.5rem;}
	.pf_role{font-size:1.7rem;}
	.pf_birth{font-size:1.6rem;}
	.cr_label .ic{width:4rem; height:4rem;}
	.cr_label .ic svg{width:2.3rem; height:2.3rem;}
	.cr_label .tt{font-size:1.9rem;}
	.cr_list .year{font-size:1.6rem;}
	.cr_list .desc{font-size:1.7rem;}
}