@charset "utf-8";
/* =====================================================
   공통 디자인 패턴 — HEE&LAB (main.png 기준)
   2개 이상 페이지에서 재사용하는 스타일만 작성
   단독 페이지 스타일은 각 [카테고리]/css/[페이지].css 에 작성
   ===================================================== */

/* 안내: main 전용(.sec-* / .btn* / .pill-* )은 main/css/main.css 로 이동.
   .img-empty(공용 유틸)·.pub-card 는 각 페이지 CSS(main.css / 각 서브 css)로 분산.
   → design.css 에는 '서브페이지에서만 공유되는' 패턴만 남김. */

/* ── 멤버 카드 그리드 ── */
.member-grid {display:grid; grid-template-columns:repeat(4,1fr);}
.member-card {background:#fff; border:1px solid var(--border1); border-radius:10px; overflow:hidden; transition:all .3s;}
.member-card+.member-card {margin-left:-1px;}
.member-card:hover {box-shadow:0 14px 34px rgba(13,37,54,.10); transform:translateY(-4px);}
.member-card .photo {aspect-ratio:4/5;}
.member-card .info {padding:30px;}
.member-card .info .name {    line-height: 1.2; color:var(--c_base1); font-size:var(--fs20); font-weight:800;}
.member-card .info .name .en {display:block; color:#999; font-size:var(--fs14); font-weight:500;}
.member-card .info dl {margin-top:16px; display:grid; grid-template-columns:64px 1fr; font-size:var(--fs16);}
.member-card .info dt {color:var(--c_base2); font-weight:600;}
.member-card .info dd {color:#666; line-height:1.5;}

/* ── 서브페이지 공통 본문 래퍼 ── */
.sub-body {padding:100px 40px;}
.sub-body .page-tit {color:var(--c_base1); font-size:var(--fs40); font-weight:800; letter-spacing:-1px; line-height: 1; margin-bottom:40px;}
.sub-body .page-tit .kr {display:block; color:var(--c_base2); font-size:var(--fs18); font-weight:600; margin-bottom:5px;}
.sub-body .page-lead {color:#555; font-size:var(--fs18); line-height:1.8; margin-bottom:56px; max-width:820px;}
.sub-body .bar-tit {position:relative; color:var(--c_base1); font-size:var(--fs24); font-weight:700; padding-left:18px; margin-bottom:24px;line-height: 1.3;}
.sub-body .bar-tit::before {content:''; position:absolute; left:0; top:4px; bottom:4px; width:5px; border-radius:3px; background:var(--c_base2);}

/* ── 태블릿 (~1199px) ── */
@media screen and (max-width: 1199px) {
	.member-grid {grid-template-columns:repeat(3,1fr); gap:22px;}
	.sub-body {padding:70px 30px;}
}

/* ── 모바일 (~767px) ── */
@media screen and (max-width: 767px) {
	.member-grid {grid-template-columns:repeat(2,1fr); gap:16px;}
	.sub-body {padding:50px 20px;}
	.sub-body .page-lead {font-size:var(--fs16); margin-bottom:40px;}
}