@charset "utf-8";

/* ==========================================================================
   역대회장 페이지 전용 스타일 (chairman.html)
   --------------------------------------------------------------------------
   구성
     1. 제목        .c-tit
     2. 카드 목록   .member_box_wrap / li / .ml / .mr
     3. 정보 표     .member-tit / .m-info (dl)
     4. 반응형 (900px / 430px)
   --------------------------------------------------------------------------
   색상 원칙
     장식·강조는 레이아웃 포인트 컬러 변수를 사용한다.
     주의: --point-color3 은 좌측메뉴 '글자색'으로 쓰이므로 배경에 쓰지 말 것.
   ========================================================================== */


/* ==========================================================================
   1. 제목
   ========================================================================== */

.c-tit{
	font-size:clamp(20px, 4vw, 40px);
	font-weight:600;
	color:#333;
	text-align:center;
}


/* ==========================================================================
   2. 카드 목록
   ========================================================================== */

.member_box_wrap{
	display:flex;
	flex-wrap:wrap;
	gap:35px;
	padding:0;
	margin:35px 0 0;
	list-style:none;
}

.member_box_wrap > li{
	/* 폭이 모자라면 자동으로 1단이 되도록 내재적 배치.
	   basis 는 2단(50%), min-width 가 하한이라 카드가 340px 아래로 눌리면 줄바꿈된다.
	   카드 폭은 뷰포트가 아니라 본문 컬럼 폭에 좌우되므로 미디어쿼리로는 맞출 수 없다. */
	flex:1 1 calc(50% - 17.5px);
	min-width:min(340px, 100%);
	container-type:inline-size;   /* 카드 내부 배치의 기준 컨테이너 */
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	padding:30px;
	margin:0;
	border:1px solid #d6d6d6;
	border-radius:1rem 1rem 5rem 1rem;
	background:#fff;
	box-sizing:border-box;
	transition:transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
	cursor:default;
}
.member_box_wrap > li:hover{
	transform:translateY(-5px);
	border-color:var(--point-color, #669900);
	box-shadow:0 7px 14px rgba(0,0,0,0.1),
	           0 0 0 2px inset var(--point-color, #669900);
}

/* 사진 — 카드 폭에 비례하지 않도록 고정 폭 (원본 clamp 는 하한/상한이 뒤집혀 있었음) */
.member_box_wrap > li .ml{ flex:0 0 130px; }
.member_box_wrap > li .ml img{
	display:block;
	width:100%;
	max-width:100%;
	border-radius:0.5rem;
}

.member_box_wrap > li .mr{
	/* basis 를 0 으로: auto 면 '내용 폭'이 기준 크기가 되어, 내용이 긴 카드만
	   축소되기 전에 줄바꿈되어 세로로 쌓이는 문제가 생긴다(1~2대 카드 사례). */
	flex:1 1 0;
	min-width:0;
	padding:0 0 0 30px;
	box-sizing:border-box;
}


/* ==========================================================================
   3. 정보 표
   ========================================================================== */

.member_box_wrap .member-tit{
	display:block;
	position:relative;
	font-size:clamp(19px, 3vw, 24px);
	padding:0 0 20px 5px;
	margin:0 0 20px;
	border-bottom:1px solid #ddd;
}
/* 구분선 위 점 두 개 */
.member_box_wrap .member-tit::before,
.member_box_wrap .member-tit::after{
	content:'';
	position:absolute;
	width:9px; height:9px;
	border-radius:10px;
	bottom:-4px;
}
.member_box_wrap .member-tit::before{ left:0;    background:var(--point-color, #669900); }
.member_box_wrap .member-tit::after { left:10px; background:var(--point-color4, #cfe39a); }

.member_box_wrap .member-tit b{
	color:#000;
	padding:0 0 0 10px;
}

.member_box_wrap .m-info{
	display:grid;
	grid-template-columns:auto 1fr;
	column-gap:25px;
	row-gap:10px;
	align-items:baseline;
	padding:0 0 0 5px;
	margin:0;
}
.member_box_wrap .m-info dt{
	margin:0;
	font-weight:600;
	color:#000;
	text-align:justify;
	text-align-last:justify;   /* '소 속' 두 글자를 '활동기간' 폭에 맞춰 벌림 */
	white-space:nowrap;
}
.member_box_wrap .m-info dd{
	margin:0;
	min-width:0;
	word-break:keep-all;
}


/* ==========================================================================
   4. 반응형 — 카드 '자신의 폭' 기준 (컨테이너 쿼리)
   li 자체는 자기 컨테이너 쿼리의 대상이 될 수 없으므로,
   자식(.ml/.mr)의 flex-basis 를 100% 로 만들어 세로로 쌓는다.
   ========================================================================== */

/* 카드가 좁아지면 사진 위 / 정보 아래로 */
@container (max-width:400px){
	.member_box_wrap > li .ml{ flex:0 0 60%; margin:0 auto; }
	.member_box_wrap > li .mr{ flex:0 0 100%; padding:22px 0 0; }
	.member_box_wrap .m-info{ column-gap:15px; }
}
/* 아주 좁을 때 항목/값도 한 줄씩 */
@container (max-width:260px){
	.member_box_wrap .m-info{ grid-template-columns:1fr; row-gap:4px; }
	.member_box_wrap .m-info dt{ text-align-last:left; margin-top:8px; }
	.member_box_wrap .m-info dt:first-child{ margin-top:0; }
}

/* 컨테이너 쿼리 미지원 브라우저 폴백 */
@supports not (container-type: inline-size){
	@media (max-width:430px){
		.member_box_wrap > li .ml{ flex:0 0 60%; margin:0 auto; }
		.member_box_wrap > li .mr{ flex:0 0 100%; padding:22px 0 0; }
		.member_box_wrap .m-info{ column-gap:15px; }
	}
}

/* 화면이 좁아지면 카드 여백·모서리만 줄인다 (단수 전환은 위 내재적 배치가 담당) */
@media (max-width:900px){
	.member_box_wrap{ gap:15px; margin:25px 0 0; }
	.member_box_wrap > li{
		padding:20px;
		border-radius:0.5rem 0.5rem 3rem 0.5rem;
	}
}