/* ============================================================
   플랫폼 소개 콘텐츠 공용 스타일 (.pfi)
   ============================================================
   [2026-08-13] 원래 이 스타일은 T_CONT 본문 첫머리의 <style> 블록으로만 존재했다.
   콘텐츠를 본문만 붙여넣거나 에디터가 style 을 걷어내면 소개 페이지가 통째로
   스타일 없이 나오는 문제가 있어, 같은 내용을 CSS 파일로도 제공한다.
   원본 : /contents/ctmg/intro_2027/_style.html (내용을 바꿀 때 두 곳을 함께 고칠 것)
   본문에 <style> 이 남아 있어도 동일 규칙이라 충돌하지 않는다.
   ============================================================ */

.pfi { font-size: 16px; line-height: 1.75; color: var(--g27-text, #27333a); word-break: keep-all; }
.pfi * { margin: 0; padding: 0; box-sizing: border-box; }
/* 프레임 본문 기본꼴(.g27-prose·레거시 contents.css)이 침투하지 못하게 하는 방어벽.
   list-style 은 상속이라 ul/ol 에만 none 을 줘도 li 직격 규칙에 진다 — li 에 직접, 리셋과 같은
   특이도(0,0,1,2)로 명시한다. 이 <style> 은 문서에서 가장 나중에 오므로 동률이면 항상 이긴다. */
div.pfi li { list-style: none; }
.pfi li::marker { content: none; }
.pfi ul, .pfi ol { margin: 0; padding: 0; }   /* .pfi * 의 '*' 는 특이도 0 — prose ul(0,1,1)에 지므로 명시 */
.pfi .pfi-cta a { color: #fff; text-decoration: none; }
.pfi .pfi-cta a.gho { color: var(--g27-heading, #12377e); }
.pfi a.pfi-tel { text-decoration: none; }
.pfi p.pfi-note { margin-top: 14px; }
.pfi-sec { margin-bottom: 52px; }
.pfi-sec:last-child { margin-bottom: 8px; }

/* ── 도입 리드 배너 ─────────────────────────────── */
.pfi-lead {
	position: relative; overflow: hidden;
	display: flex; align-items: center; gap: 30px;
	padding: 32px 36px; margin-bottom: 44px; border-radius: 18px;
	background: var(--g27-t50, #e9f7f9);
	border: 1px solid var(--g27-t100, #cbeef2);
	animation: pfiUp .5s ease-out both;
}
.pfi-lead::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
	background: linear-gradient(180deg, #68b848 0 33.3%, #0092a2 33.3% 66.6%, #00298c 66.6% 100%);
}
.pfi-lead::after {  /* 우측 워터마크 링 */
	content: ""; position: absolute; right: -46px; top: 50%; transform: translateY(-50%);
	width: 190px; height: 190px; border-radius: 50%;
	border: 26px solid rgba(0, 146, 162, .07);
}
.pfi-lead__txt { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.pfi-lead h4 {
	font-size: 24px; font-weight: 800; color: var(--g27-heading, #12377e);
	line-height: 1.35; margin-bottom: 10px; letter-spacing: -0.02em;
}
.pfi-lead h4 em { font-style: normal; color: var(--g27-primary-strong, #007c8b); }
.pfi-lead p { position: relative; max-width: 620px; font-size: 16px; color: var(--g27-text, #27333a); }
/* 리드 일러스트 — 사이트 일러스트(SVG, 자체 애니메이션 내장)를 그대로 쓴다 */
.pfi-lead__art { position: relative; z-index: 1; flex: 0 0 auto; }
.pfi-lead__art img { display: block; width: 208px; height: auto; animation: pfiFloat 5.5s ease-in-out infinite alternate; }

/* ── 핵심 수치 (리드 아래 알약) ─────────────────── */
.pfi-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; list-style: none; }
.pfi-stats > li {
	display: inline-flex; align-items: baseline; gap: 6px;
	padding: 8px 14px; border-radius: 999px;
	background: #fff; border: 1px solid var(--g27-t100, #cbeef2);
	font-size: 12px; color: var(--g27-text-sub, #5d6d77); white-space: nowrap;
}
.pfi-stats strong {
	font-size: 14px; font-weight: 800; letter-spacing: -0.01em;
	color: var(--g27-primary-deep, #026373);
	font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

/* ── 섹션 제목 ─────────────────────────────────── */
.pfi-sec__t {
	position: relative; padding-left: 15px; margin-bottom: 20px;
	font-size: 24px; font-weight: 800; color: var(--g27-heading, #12377e); line-height: 1.35;
	letter-spacing: -0.02em;
}
.pfi-sec__t::before {
	content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 4px; border-radius: 2px;
	background: var(--g27-primary, #0092a2);
}
.pfi-sec__d { margin: -10px 0 18px 15px; font-size: 14px; color: var(--g27-text-sub, #5d6d77); }
.pfi p + p { margin-top: 6px; }

/* ── 안내 노트 ─────────────────────────────────── */
.pfi-note {
	display: flex; gap: 10px; align-items: flex-start;
	margin-top: 14px; padding: 13px 16px; border-radius: 12px;
	background: var(--g27-c50, #f4f8fa); border: 1px solid var(--g27-line-soft, #eaf0f3);
	font-size: 14px; line-height: 1.7; color: var(--g27-text-sub, #5d6d77);
}
.pfi-note svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--g27-primary-strong, #007c8b); }

/* ── 두 갈래 소개 카드 ─────────────────────────── */
.pfi-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; list-style: none; }
.pfi-duo > li {
	position: relative; overflow: hidden;
	padding: 26px 26px 24px; border-radius: 16px;
	background: #fff; border: 1px solid var(--g27-line-soft, #eaf0f3);
	box-shadow: 0 8px 22px -14px rgba(18, 55, 126, .14);
	transition: transform .18s ease, box-shadow .18s ease;
}
.pfi-duo > li:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(18, 55, 126, .2); }
.pfi-duo > li::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
}
.pfi-duo > li:nth-child(1)::before { background: var(--g27-primary, #0092a2); }
.pfi-duo > li:nth-child(2)::before { background: var(--g27-heading, #12377e); }
.pfi-duo__ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; margin-bottom: 14px; border-radius: 13px;
	background: var(--g27-primary-soft, #e9f7f9); color: var(--g27-primary-strong, #007c8b);
}
.pfi-duo > li:nth-child(2) .pfi-duo__ico { background: #eef3fb; color: var(--g27-heading, #12377e); }
.pfi-duo__ico svg { width: 24px; height: 24px; }
.pfi-duo h4 { font-size: 16px; font-weight: 800; color: var(--g27-heading, #12377e); margin-bottom: 6px; }
.pfi-duo p { font-size: 14px; color: var(--g27-text-sub, #5d6d77); }

/* ── 절차 플로우 ───────────────────────────────── */
.pfi-flow__who {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 22px 0 12px; padding: 6px 14px; border-radius: 999px;
	background: var(--g27-primary-soft, #e9f7f9);
	font-size: 14px; font-weight: 700; color: var(--g27-primary-deep, #026373);
}
.pfi-flow__who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g27-primary, #0092a2); }
.pfi-flow__who.alt { background: #eef3fb; color: var(--g27-heading, #12377e); }
.pfi-flow__who.alt::before { background: var(--g27-heading, #12377e); }
.pfi-flow {
	/* [2026-08-11] 카드 사이 간격 10 → 22.
	   화살표(9x9 를 45° 회전 → 실제 폭 12.7px)가 10px 틈보다 넓어서
	   카드 테두리·라운드 모서리를 밟고 있었다. 간격을 벌려 틈 안에만 놓는다. */
	display: flex; flex-wrap: wrap; align-items: stretch; gap: 22px;
	list-style: none; counter-reset: pfistep;
}
.pfi-flow > li {
	counter-increment: pfistep; position: relative;
	flex: 1 1 132px; min-width: 132px; padding: 18px 12px 16px; text-align: center;
	background: #fff; border: 1px solid var(--g27-line, #dde5ea); border-radius: 14px;
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.pfi-flow > li:hover {
	transform: translateY(-3px); border-color: var(--g27-primary, #0092a2);
	box-shadow: 0 12px 22px -14px rgba(0, 146, 162, .35);
}
.pfi-flow > li::before {
	content: counter(pfistep, decimal-leading-zero);
	display: block; margin-bottom: 8px;
	font-size: 12px; font-weight: 800; letter-spacing: .14em;
	color: var(--g27-primary-strong, #007c8b);
}
.pfi-flow > li:last-child { border-style: solid; border-color: var(--g27-heading, #12377e); background: #f7f9fd; }
.pfi-flow > li:last-child::before { color: var(--g27-heading, #12377e); }
.pfi-flow__ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin-bottom: 9px; border-radius: 50%;
	background: var(--g27-primary-soft, #e9f7f9); color: var(--g27-primary-strong, #007c8b);
}
.pfi-flow > li:last-child .pfi-flow__ico { background: #eef3fb; color: var(--g27-heading, #12377e); }
.pfi-flow__ico svg { width: 20px; height: 20px; }
.pfi-flow > li h5 { font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--g27-text, #27333a); }
.pfi-flow > li p { margin-top: 6px; font-size: 12px; color: var(--g27-text-sub, #5d6d77); }
/* 카드 사이 연결 화살표 — 22px 틈의 가운데(-11px)에 놓는다.
   회전 전 박스가 9x9(7+테두리 2) 라 중심이 left+4.5 → left:-15.5 가 정확한 가운데다.
   (예전 값 -9 는 화살표 폭 12.7 의 절반이 카드 안으로 들어가 겹쳐 보였다) */
.pfi-flow > li + li::after {
	content: ""; position: absolute; left: -15.5px; top: 50%; transform: translateY(-50%) rotate(45deg);
	width: 7px; height: 7px;
	border-top: 2px solid var(--g27-c300, #b9c6cf); border-right: 2px solid var(--g27-c300, #b9c6cf);
}

/* ── 항목 카드 (상담분야 등) ───────────────────── */
.pfi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; list-style: none; counter-reset: pfigrid; }
.pfi-grid > li {
	counter-increment: pfigrid; position: relative;
	padding: 22px 24px 20px; border: 1px solid var(--g27-line-soft, #eaf0f3); border-radius: 16px;
	background: #fff; box-shadow: 0 8px 22px -16px rgba(18, 55, 126, .12);
	transition: transform .16s ease, box-shadow .16s ease;
}
.pfi-grid > li:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(18, 55, 126, .2); }
.pfi-grid > li::before {
	content: counter(pfigrid, decimal-leading-zero);
	position: absolute; right: 20px; top: 16px;
	font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
	color: var(--g27-primary-line, #cbeef2);
}
.pfi-grid > li h4 {
	max-width: calc(100% - 52px);
	font-size: 16px; font-weight: 800; color: var(--g27-heading, #12377e);
	padding-bottom: 10px; margin-bottom: 11px; border-bottom: 1px solid var(--g27-line-soft, #eaf0f3);
}
.pfi-grid > li p { font-size: 14px; line-height: 1.72; color: var(--g27-text-sub, #5d6d77); }

/* ── 정보 리스트 (상담방법 등) ─────────────────── */
.pfi-info { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pfi-info > li {
	display: flex; gap: 16px; align-items: flex-start;
	padding: 22px 24px; border-radius: 16px;
	background: var(--g27-c50, #f4f8fa); border: 1px solid var(--g27-line-soft, #eaf0f3);
}
.pfi-info__ico {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 12px;
	background: #fff; color: var(--g27-primary-strong, #007c8b);
	border: 1px solid var(--g27-line-soft, #eaf0f3);
}
.pfi-info__ico svg { width: 21px; height: 21px; }
.pfi-info strong { display: block; font-size: 16px; font-weight: 800; color: var(--g27-heading, #12377e); margin-bottom: 5px; }
.pfi-info ul { list-style: none; }
.pfi-info ul li { position: relative; padding-left: 12px; font-size: 14px; line-height: 1.75; color: var(--g27-text-sub, #5d6d77); }
.pfi-info ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 4px; height: 4px; border-radius: 50%; background: var(--g27-primary, #0092a2); }
.pfi-tel {
	font-weight: 800; font-size: 16px; color: var(--g27-primary-deep, #026373) !important;
	text-decoration: none; letter-spacing: .01em;
}
.pfi-tel:hover { text-decoration: underline; }

/* ── 하단 바로가기 ─────────────────────────────── */
.pfi-cta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 46px; }
.pfi-cta a {
	display: inline-flex; align-items: center; gap: 8px;
	height: 50px; padding: 0 28px; border-radius: 12px;
	font-size: 16px; font-weight: 700; text-decoration: none;
	transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.pfi-cta a:hover { transform: translateY(-2px); }
.pfi-cta .pri { background: var(--g27-primary-strong, #007c8b); border: 1px solid var(--g27-primary-strong, #007c8b); color: #fff; }
.pfi-cta .pri:hover { background: var(--g27-primary-deep, #026373); }
.pfi-cta .gho { background: #fff; border: 1px solid var(--g27-line, #dde5ea); color: var(--g27-heading, #12377e); }
.pfi-cta .gho:hover { border-color: var(--g27-primary, #0092a2); }
.pfi-cta svg { width: 15px; height: 15px; }

/* ── 모션 ──────────────────────────────────────── */
@keyframes pfiUp    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pfiFloat { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* ── 반응형 ────────────────────────────────────── */
@media (max-width: 760px) {
	.pfi-lead { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 20px; }
	.pfi-lead::after { display: none; }
	.pfi-lead h4 { font-size: 20px; }
	/* 일러스트는 아래로 — 좁은 화면에서는 본문이 먼저 */
	.pfi-lead__art { order: 9; align-self: center; }
	.pfi-lead__art img { width: 168px; }
	.pfi-stats > li { padding: 7px 12px; }
	.pfi-duo, .pfi-grid, .pfi-info { grid-template-columns: 1fr; }
	/* [v3.1] 절차 흐름도 — 세로 나열 대신 한 줄 가로 스와이프.
	   단계 카드가 순서대로 옆으로 이어져 '흐름'이 그대로 읽힌다. */
	.pfi-flow {
		flex-wrap: nowrap; gap: 16px;
		overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
		scrollbar-width: none; padding-bottom: 8px;
	}
	.pfi-flow::-webkit-scrollbar { display: none; }
	/* 좁은 화면도 화살표가 틈 가운데(-8px) 에 오도록 다시 맞춘다 */
	.pfi-flow > li + li::after { left: -12.5px; }
	.pfi-flow > li { flex: 0 0 122px; min-width: 122px; padding: 14px 10px 12px; scroll-snap-align: start; }
	.pfi-flow__ico { width: 34px; height: 34px; margin-bottom: 7px; }
	.pfi-flow > li h5 { font-size: 12px; }
	.pfi-flow > li p { font-size: 12px; }
	.pfi-cta a { flex: 1 1 100%; justify-content: center; }
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
	.pfi-lead { animation: none; }
	.pfi-lead__art img { animation: none; }
}