@charset "utf-8";
/* 복지제도 페이지(/about/welfare.php) 전용 스타일. 4개 언어 공통.
   2026-10-02 신설. 원본은 통짜 이미지 /images/sub/about_welfare_kr.jpg 이고,
   색·간격은 그 이미지에서 실측했다(섹션명 보라 #B975DA, 카드 테두리 #E3E1E4).

   [주의] head.lib.php 가 아니라 공통 PHP 가 <link> 로 직접 불러온다(이 페이지 한 곳에서만 쓴다).
   [주의] 레거시 style.css 들이 h3/h4/p/ul/li 를 요소 선택자로 건드리므로 모든 규칙을 #wfWrap 아래로 스코프한다.
   [중요] 미디어쿼리가 아니라 컨테이너 쿼리를 쓴다 — about-management.css 와 같은 이유.
          about 하위 페이지 본문은 좌측 메뉴 때문에 뷰포트보다 ~390px 좁아서, 뷰포트 기준 규칙은
          1025~1590px 구간에서 카드를 찌그러뜨린다. 기본은 좁은 화면(1열)이고 넓어질수록 규칙이 붙는다.

   글꼴: 국·영 Pretendard, 일 Pretendard JP, 중 Sarasa Gothic SC — kr/en/jpn 은 사이트 공통 글꼴 CSS 가
   전 페이지에 선언해 둔 이름을 그대로 쓴다. 파일이 있는 400/600 만 쓴다(700 이상은 가짜 굵은체로 번짐).
   중문은 사이트 전역 글꼴 'Sarasa Gothic SC'(chn/css/font-sarasa.css 가 .site 파일로 선언, 모든 중문 페이지가 이미 받는다)를
   그대로 쓴다 — 이 페이지 글자가 모두 들어 있어 추가로 받는 파일이 없다(2026-10-02 확인).
   [주의] .site 에 없는 글자(예: en dash '–')를 중문 문구에 넣으면 그 글자만 다른 글꼴로 찍힌다. */

#wfWrap.wf_lang_kr,
#wfWrap.wf_lang_en  { font-family: 'Pretendard', 'Pretendard JP', 'Noto Sans KR', sans-serif; }
#wfWrap.wf_lang_jpn { font-family: 'Pretendard JP', 'Pretendard', 'Meiryo', sans-serif; }
#wfWrap.wf_lang_chn { font-family: 'Sarasa Gothic SC', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; }

/* ── 공통 틀 ─────────────────────────────────────────────────────────── */
#wfWrap {
	container: wfwrap / inline-size;
	width: 100%;
	max-width: 960px;
	margin: 0 auto 80px;
	padding: 20px 0 0;
	box-sizing: border-box;
	color: #111;
	text-align: left;
}
#wfWrap *, #wfWrap *::before, #wfWrap *::after { box-sizing: border-box; }
/* 국문만 어절 단위로 끊는다. 일·중문은 띄어쓰기가 없어 keep-all 이면 좁은 화면에서 넘친다. */
#wfWrap.wf_lang_kr  { word-break: keep-all; }
#wfWrap.wf_lang_en  { overflow-wrap: break-word; }

#wfWrap .wf_sec + .wf_sec { margin-top: 56px; }

/* 섹션 머리: 왼쪽 'ABOV / Culture', 오른쪽 인물. 인물 발끝이 카드 윗선에 닿게 바닥 정렬. */
#wfWrap .wf_head {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	min-height: 96px;
}
#wfWrap .wf_ttl {
	margin: 0;
	padding: 0 0 18px;
	font-weight: 600;
	line-height: 1;
	background: none;
	border: 0;
}
#wfWrap .wf_abov {
	display: block;
	font-size: 20px;
	color: #000;
	letter-spacing: .01em;
}
#wfWrap .wf_name {
	display: block;
	margin-top: 6px;
	font-size: 34px;
	color: #B975DA;
	letter-spacing: .005em;
}
#wfWrap .wf_ill {
	display: block;
	flex: none;
	width: auto;
	height: 96px;
	margin-right: 4%;
	user-select: none;
	pointer-events: none;
}

/* 카드 */
#wfWrap .wf_cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#wfWrap .wf_card {
	margin: 0;
	padding: 18px 16px 20px;
	min-height: 0;
	background: #fff;
	border: 1.5px solid #E3E1E4;
	border-radius: 14px;
	list-style: none;
}
#wfWrap .wf_card_ttl {
	margin: 0 0 8px;
	padding: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: #111;
	background: none;
}
#wfWrap .wf_card_txt {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: #666;
}
#wfWrap .wf_card_txt span { display: block; }

/* ── 넓어질수록 ───────────────────────────────────────────────────────── */
/* 2열 */
@container wfwrap (min-width: 520px) {
	#wfWrap .wf_cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	#wfWrap .wf_card  { min-height: 120px; }
	#wfWrap .wf_ill   { height: 120px; }
	#wfWrap .wf_name  { font-size: 40px; }
	#wfWrap .wf_abov  { font-size: 22px; }
}
/* 3열 — 원본 이미지 배치. 인물 크기도 원본(약 140px)으로 돌아간다. */
@container wfwrap (min-width: 760px) {
	#wfWrap .wf_sec + .wf_sec { margin-top: 64px; }
	#wfWrap .wf_cards { grid-template-columns: repeat(3, 1fr); gap: 17px 23px; }
	#wfWrap .wf_card  { padding: 22px 18px 22px; min-height: 120px; }
	#wfWrap .wf_card_ttl { font-size: 17px; }
	#wfWrap .wf_ill   { height: 140px; margin-right: 5%; }
	#wfWrap .wf_ttl   { padding-bottom: 24px; }
	#wfWrap .wf_abov  { font-size: 26px; }
	#wfWrap .wf_name  { font-size: 46px; }
}

/* 컨테이너 쿼리를 모르는 브라우저: 데스크톱 폭에서만 3열을 준다. */
@supports not (container-type: inline-size) {
	@media (min-width: 1210px) {
		#wfWrap .wf_cards { grid-template-columns: repeat(3, 1fr); gap: 17px 23px; }
		#wfWrap .wf_ill   { height: 140px; }
		#wfWrap .wf_name  { font-size: 46px; }
		#wfWrap .wf_abov  { font-size: 26px; }
	}
}