@charset "utf-8";

/**
 * SOLUTION 세 지면 본문 반응형
 *   통합 솔루션  sub/content0101.php  (#sol)
 *   핵심 기술    sub/content0102.php  (#tech)
 *   적용 분야    sub/content0103.php  (#app)
 *
 * 껍데기는 dair-fluid.css 가 맡는다. 두 파일을 함께 읽어야 한다.
 *
 * 세 지면은 제 컨테이너를 이미 max-width + 좌우 여백으로 두었다. 그래서 넘침은
 * 껍데기에서만 오고, 여기서는 칸 수와 글자 크기만 폭에 맞춰 줄인다.
 *
 * 선택자에 #sub_content 를 덧댄 이유 : 지면 안쪽 <style> 이 이 파일보다 뒤에
 * 실리고 거기 규칙이 이미 #sol / #tech / #app 로 시작한다. 특이도가 같으면
 * 뒤가 이기므로 id 하나를 더 얹어야 한다. 미디어쿼리는 특이도를 올려 주지 않는다.
 */

/* ── 히어로 ── 세 지면이 같은 얼개다 ──────────────────────────── */
@media (max-width: 1024px) {
	#sub_content #sol .sol-hero,
	#sub_content #tech .tech-hero,
	#sub_content #app .app-hero { padding: 96px 0 88px; }
	#sub_content #sol .sol-hero-tit { font-size: 40px; }
	#sub_content #tech .tech-hero-tit { font-size: 36px; }
	#sub_content #app .app-hero-tit { font-size: 38px; }
	#sub_content #sol .sol-hero-sub { font-size: 21px; }
	#sub_content #sol .sol-hero-desc,
	#sub_content #tech .tech-hero-desc,
	#sub_content #app .app-hero-desc { font-size: 18px; line-height: 1.75; }
}
@media (max-width: 620px) {
	#sub_content #sol .sol-hero,
	#sub_content #tech .tech-hero,
	#sub_content #app .app-hero { padding: 70px 0 62px; }
	#sub_content #sol .sol-hero-tit { font-size: 29px; }
	#sub_content #tech .tech-hero-tit { font-size: 27px; }
	#sub_content #app .app-hero-tit { font-size: 28px; }
	#sub_content #sol .sol-hero-sub { font-size: 18px; }
	#sub_content #sol .sol-hero-desc,
	#sub_content #tech .tech-hero-desc,
	#sub_content #app .app-hero-desc { font-size: 16px; }
	/* 넓은 화면 기준으로 넣어 둔 줄바꿈은 좁아지면 어색한 자리에서 끊긴다 */
	#sub_content #sol .sol-hero-tit br,
	#sub_content #tech .tech-hero-tit br,
	#sub_content #app .app-hero-tit br { display: none; }
}

/* ── 통합 솔루션 (#sol) ───────────────────────────────────────── */
@media (max-width: 980px) {
	#sub_content #sol .sol-values,
	#sub_content #sol .sol-line { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	#sub_content #sol .sol-steps { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 680px) {
	/* 두 칸으로도 좁다 — 한 줄에 하나씩 세운다 */
	#sub_content #sol .sol-values,
	#sub_content #sol .sol-line,
	#sub_content #sol .sol-steps { grid-template-columns: 1fr; }
}

/* 상세 — 구성 요소 카드는 auto-fit 이라 스스로 접힌다. 여기서는 두 단짜리만 세운다 */
@media (max-width: 760px) {
	#sub_content #sol .sl-link { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
	#sub_content #sol .sl-why { padding: 20px 22px; }
	#sub_content #sol .sl-why-t { font-size: 17px; }
	#sub_content #sol .sp { padding: 18px 20px; gap: 14px; }
	#sub_content #sol .sp-ic { flex: 0 0 46px; width: 46px; height: 46px; }
	#sub_content #sol .sp-t { font-size: 16px; }
	#sub_content #sol .sarch__side { padding: 18px 20px 20px; }
	#sub_content #sol .sarch__n { font-size: 15px; padding: 9px 12px; }
	#sub_content #sol .sarch__tag { font-size: 13px; padding: 7px 13px; }
	#sub_content #sol .sl-gain { padding: 22px 22px 24px; }
	#sub_content #sol .sg-t { font-size: 17px; }
	#sub_content #sol .sg-d { font-size: 15px; }
}

/* ── 핵심 기술 (#tech) ────────────────────────────────────────── */
@media (max-width: 1100px) {
	#sub_content #tech .tech-adv { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 860px) {
	#sub_content #tech .tech-grid,
	#sub_content #tech .tech-adv { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
	/* 아이콘과 글을 나란히 두기엔 좁다 — 아이콘을 위로 올린다 */
	#sub_content #tech .tc-head { gap: 14px; }
	#sub_content #tech .tc-ic { flex: 0 0 58px; width: 58px; height: 58px; }
	#sub_content #tech .ta { flex-direction: column; gap: 16px; padding: 26px 22px; }
}

/* ── 적용 분야 (#app) ─────────────────────────────────────────── */
@media (max-width: 980px) {
	#sub_content #app .al-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	#sub_content #app .fl-cases { grid-template-columns: 1fr; }
	/* 배지와 제목이 한 줄에 들어가지 않으면 접히게 둔다 */
	#sub_content #app .ac-head { flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
}
@media (max-width: 560px) {
	#sub_content #app .al-grid { grid-template-columns: 1fr; }
	#sub_content #app .ac-badge { flex: 0 0 52px; width: 52px; height: 52px; }
}