@charset "utf-8";
/* 인재육성 페이지(/about/talent_development.php) 전용 스타일. 4개 언어 공통.
   2026-10-02 신설. 모양은 옛 국문 페이지(#sub0404_2_wrap, {lang}/css/style.css)를 따르되,
   그 페이지는 설명 세 개를 그림 높이에 기대 position:absolute 로 띄워서 그림이 안 뜨면
   글자가 카드 위로 겹쳤다(운영에서 실제로 그랬다). 여기서는 그리드로 배치해 그림 높이와 무관하다.

   [주의] 공통 PHP 가 <link> 로 직접 불러온다(이 페이지 한 곳에서만 쓴다).
   [주의] 레거시 style.css 들이 p/ul/li/strong 을 요소 선택자로 건드리므로 모든 규칙을 #tdWrap 아래로 스코프한다.
   [중요] 미디어쿼리가 아니라 컨테이너 쿼리를 쓴다 — about-management.css·about-welfare.css 와 같은 이유
          (about 하위 페이지 본문은 좌측 메뉴 때문에 뷰포트보다 ~390px 좁다). 기본은 좁은 화면이다.
   [중요] 원 안 문구는 그림 위에 얹은 HTML 이다. 위치(left/top %)는 원본 그림(486×451) 속 원래 글자의
          가운데를 잰 값이고, 글자 크기는 그림 폭 기준(cqw)이라 그림이 줄면 같이 준다.
          그림을 바꾸면 세 위치를 다시 재야 한다.

   글꼴: 국·영 Pretendard, 일 Pretendard JP — header 쪽 공통 CSS 가 선언한 이름을 쓴다. 굵기는 400/600 만.
   중문은 사이트 전역 글꼴 'Sarasa Gothic SC'(chn/css/font-sarasa.css, .site 파일)를 그대로 쓴다 — 이 페이지 글자가 모두 들어 있다. */

#tdWrap.td_lang_kr,
#tdWrap.td_lang_en  { font-family: 'Pretendard', 'Pretendard JP', 'Noto Sans KR', sans-serif; }
#tdWrap.td_lang_jpn { font-family: 'Pretendard JP', 'Pretendard', 'Meiryo', sans-serif; }
#tdWrap.td_lang_chn { font-family: 'Sarasa Gothic SC', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; }

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

/* ── ① 인재상 ───────────────────────────────────────────────────────── */
#tdWrap .td_talent {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	margin: 0 0 56px;
}
#tdWrap .td_fig {
	container: tdfig / inline-size;
	position: relative;
	width: 100%;
	max-width: 400px;
	margin: 0 auto 8px;
	padding: 0;
}
#tdWrap .td_fig .td_fig_bg { display: block; width: 100%; height: auto; aspect-ratio: 486 / 451; }
/* 가운데 로고 — 원본 그림 속 로고 자리(x 183~299, y 247~282 / 486x451)에 abov_ci_color.png(150x46, 여백 3·1px)를 맞춘 값 */
#tdWrap .td_fig .td_fig_logo {
	position: absolute;
	left: 37.16%;
	top: 54.59%;
	width: 25.08%;
	height: auto;
}

/* 원 안 문구 — 지운 원래 글자의 가운데(그림 기준 %)에 중심을 맞춘다 */
#tdWrap .td_circle {
	position: absolute;
	width: 24%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 3.5cqw;          /* 원본 17px ÷ 그림 폭 486px */
	font-weight: 600;
	line-height: 1.35;
	color: #222;
	pointer-events: none;
}
#tdWrap .td_circle span { display: block; }
#tdWrap .td_circle_1 { left: 49.2%;  top: 25.3%; }
#tdWrap .td_circle_2 { left: 19.86%; top: 78.6%; }
#tdWrap .td_circle_3 { left: 78.6%;  top: 79.4%; }
/* 영문은 단어가 길어 원 안에서 넘치지 않게 조금 줄인다 */
#tdWrap.td_lang_en .td_circle { font-size: 3.1cqw; }

/* 세 설명 — 좁은 화면에서는 그림 아래에 차례로 */
#tdWrap .td_info strong {
	position: relative;
	display: inline-block;
	margin: 0 0 22px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #222;
}
#tdWrap .td_info strong::after {
	content: '';
	position: absolute;
	left: 0; bottom: -12px;
	width: 100%; height: 2px;
	background: #00b0f0;
}
#tdWrap .td_info p {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.75;
	color: #444;
}

/* ── ② 교육체계 ─────────────────────────────────────────────────────── */
#tdWrap .td_cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#tdWrap .td_card {
	margin: 0;
	border: 1px solid #e4e4e4;
	border-top: 0;
	list-style: none;
	background: #fff;
}
#tdWrap .td_card_ttl {
	margin: 0;
	padding: 14px 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	background: #00adeb;
	text-align: center;
}
#tdWrap .td_card_list {
	margin: 0;
	padding: 16px 12px 18px;
	list-style: none;
}
#tdWrap .td_card_list li {
	position: relative;
	margin: 0;
	padding: 0 0 0 13px;
	font-size: 14px;
	line-height: 1.7;
	color: #333;
	list-style: none;
}
#tdWrap .td_card_list li::before {
	content: '';
	position: absolute;
	left: 0; top: .85em;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: #000;
	transform: translateY(-50%);
}

/* ── 넓어질수록 ───────────────────────────────────────────────────────── */
@container tdwrap (min-width: 560px) {
	#tdWrap .td_cards { grid-template-columns: repeat(3, 1fr); }
	#tdWrap .td_card_ttl { font-size: 17px; }
}
/* 원본 배치: 그림 가운데, 첫 설명은 오른쪽 위, 둘째는 왼쪽 아래(오른쪽 정렬), 셋째는 오른쪽 아래 */
@container tdwrap (min-width: 860px) {
	#tdWrap .td_talent {
		grid-template-columns: 1fr minmax(0, 486px) 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			".  fig i1"
			"i2 fig i3";
		gap: 0 28px;
		margin-bottom: 80px;
	}
	#tdWrap .td_fig    { grid-area: fig; max-width: 486px; margin: 0; }
	#tdWrap .td_info_1 { grid-area: i1; align-self: start; padding-top: 50px; }
	#tdWrap .td_info_2 { grid-area: i2; align-self: end; padding-bottom: 20px; text-align: right; }
	#tdWrap .td_info_3 { grid-area: i3; align-self: end; padding-bottom: 20px; }
	#tdWrap .td_info p { font-size: 16px; }
	#tdWrap .td_cards  { grid-template-columns: repeat(5, 1fr); gap: 24px; }
	#tdWrap .td_card_ttl { padding: 18px 8px; font-size: 18px; }
	#tdWrap .td_card_list li { font-size: 15px; }
}

/* 컨테이너 쿼리를 모르는 브라우저: 데스크톱 폭에서만 카드 5열을 준다(삼각형 배치는 세로 그대로). */
@supports not (container-type: inline-size) {
	#tdWrap .td_circle { font-size: 17px; }
	@media (min-width: 1210px) {
		#tdWrap .td_cards { grid-template-columns: repeat(5, 1fr); gap: 24px; }
	}
}