@charset "utf-8";
/* =====================================================
   Introduce — introduction/css/introduce.css
   ===================================================== */

/* 대표 이미지: 박스를 꽉 채우고 'IMAGE' 플레이스홀더 위를 덮음 */
.introduce .intro-visual .img-empty img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2;}

/* 대표 문구 : 좌측 브랜드 액센트 바 + 리드 텍스트 */
.introduce .intro-visual p {position:relative; padding-left:24px; color:#3f3f3f; font-weight:400; word-break:keep-all;}
.introduce .intro-visual p::before {content:''; position:absolute; left:0; top:7px; bottom:7px; width:4px; border-radius:3px; background:var(--c_base2);}

/* 리드 문구 아래 오른쪽 로고 (여백 채움 · 반투명 워터마크) */
.introduce .intro-visual .iv-text {display:flex; flex-direction:column;}
.introduce .intro-visual .iv-logo {align-self:flex-end; width:250px; max-width:60%; height:auto; opacity:.2;}

/* ── 데스크탑 (1200px~) ── */
@media screen and (min-width: 1200px), print {
	.introduce .intro-visual {display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:start;}
	.introduce .intro-visual p {font-size:var(--fs20); line-height:1.6; padding:10px 0 10px 30px; letter-spacing:-.2px; margin-top: 20px;}
	.introduce .intro-visual .img-empty {border-radius:14px; aspect-ratio:2/1;}
	.introduce .intro-visual .iv-text {align-self:stretch;}
	.introduce .intro-visual .iv-logo {margin-top:auto;}
	.introduce .vision-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
	.introduce .vision-card {background:#fff; border:1px solid var(--border1); border-radius:10px; padding:40px 36px; transition:all .3s;}
	.introduce .vision-card:hover {box-shadow:0 16px 40px rgba(13,37,54,.08); transform:translateY(-4px);}
	.introduce .vc-num {display:inline-block; color:var(--c_base2); font-size:var(--fs32); font-weight:800; margin-bottom:18px;  line-height: 1;}
	.introduce .vc-tit {color:var(--c_base1); font-size:var(--fs22); font-weight:700; margin-bottom:14px; line-height: 1;}
	.introduce .vc-desc {color:#777; font-size:var(--fs16); line-height:1.75;}

	.introduce .focus-list {display:grid; grid-template-columns:repeat(2,1fr); gap:0 60px;}
	.introduce .focus-list li {display:flex; gap:24px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--border1);}
	.introduce .focus-list li strong {flex:0 0 160px; color:var(--c_base1); font-size:var(--fs18); font-weight:700;}
	.introduce .focus-list li span {color:#777; font-size:var(--fs16); line-height:1.7;}
}

/* ── 태블릿 (~1199px) ── */
@media screen and (max-width: 1199px) {
	.introduce .intro-visual {display:block;}
	.introduce .intro-visual p {font-size:var(--fs18); line-height:1.4; margin-top:20px; margin-bottom:26px;padding: 10px 0 10px 20px;}
	.introduce .intro-visual .img-empty {border-radius:10px; aspect-ratio:2/1;}
	.introduce .vision-grid {display:grid; grid-template-columns:1fr; gap:16px;}
	.introduce .vision-card {background:#fff; border:1px solid var(--border1); border-radius:10px; padding:30px;}
	.introduce .vc-num {display:inline-block; color:var(--c_base2); font-size:var(--fs30); font-weight:800; margin-bottom:12px;}
	.introduce .vc-tit {color:var(--c_base1); font-size:var(--fs20); font-weight:700; margin-bottom:10px;}
	.introduce .vc-desc {color:#777; font-size:var(--fs16); line-height:1.7;}

	.introduce .focus-list li {display:flex; gap:16px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--border1);}
	.introduce .focus-list li strong {flex:0 0 130px; color:var(--c_base1); font-size:var(--fs17); font-weight:700;}
	.introduce .focus-list li span {color:#777; font-size:var(--fs15); line-height:1.6;}
}

/* ── 모바일 (~767px) ── */
@media screen and (max-width: 767px) {
	.introduce .focus-list li {flex-direction:column; gap:6px; padding:18px 0;}
	.introduce .focus-list li strong {flex:none;}
}

/* ── 빈 이미지 플레이스홀더 (공용 유틸 · 이미지 수령 후 교체) ── */
.img-empty {position:relative; width:100%; background:var(--bg1); border:1px solid var(--border1); overflow:hidden;}
.img-empty::after {content:'IMAGE'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#c9c2ba; font-size:var(--fs14); font-weight:700; letter-spacing:2px;}
.img-empty.ratio-43 {aspect-ratio:4/3;}
.img-empty.ratio-11 {aspect-ratio:1/1;}
.img-empty.ratio-45 {aspect-ratio:4/5;}
.img-empty.ratio-169 {aspect-ratio:16/9;}