@charset "utf-8";

/**
 * PRODUCTS 두 지면 본문 반응형 — sub/content0201.php · sub/content0202.php.
 * 껍데기는 dair-fluid.css 가 맡는다. 두 파일을 함께 읽어야 한다.
 *
 * 선택자에 #sub_content 를 붙인 이유 : 지면 안쪽 <style> 이 이 파일보다 뒤에
 * 실려 특이도가 같으면 그쪽이 이긴다. 미디어쿼리는 특이도를 올려 주지 않는다.
 */

/* ── 4. 첫머리·구역 제목 ───────────────────────────────────────── */
@media (max-width: 860px) {
	#sub_content .p-intro { margin-bottom: 72px; }
	#sub_content .p-intro-sub { font-size: 17px; }
	#sub_content .p-intro-tit { font-size: 28px; }
	#sub_content .sub_stit35 { font-size: 28px; line-height: 1.4; }
	#sub_content .sub_text27 { font-size: 19px; line-height: 1.7; }
	/* 넓은 화면 기준으로 넣어 둔 줄바꿈은 좁아지면 어색한 자리에서 끊긴다 */
	#sub_content .p-intro br,
	#sub_content .sub_text27 br { display: none; }
}
@media (max-width: 520px) {
	#sub_content .p-intro-tit { font-size: 24px; }
	#sub_content .sub_stit35 { font-size: 23px; }
	#sub_content .sub_text27 { font-size: 17px; }
}

/* ── 5. 도입 프로세스 6단계 ────────────────────────────────────── */
@media (max-width: 1180px) {
	#sub_content .pflow-grid { grid-template-columns: repeat(2, 1fr); column-gap: 56px; }
	/* 진행 방향 꺾쇠는 줄 끝에서만 지운다 — 열 수가 바뀌면 지울 자리도 바뀐다 */
	#sub_content .pflow-step:nth-child(3n)::after { display: block; }
	#sub_content .pflow-step:nth-child(2n)::after { display: none; }
}
@media (max-width: 820px) {
	#sub_content .pflow-grid { grid-template-columns: 1fr; row-gap: 24px; }
	#sub_content .pflow-step { padding: 26px 24px 24px; }
	/* 한 열로 서면 옆으로 잇는 꺾쇠가 가리킬 곳이 없다 — 번호가 순서를 말한다 */
	#sub_content .pflow-step::after,
	#sub_content .pflow-step:nth-child(3n)::after,
	#sub_content .pflow-step:nth-child(2n)::after { display: none; }
}

/* ── 6. 제품 카드 목록 · 상세 ──────────────────────────────────── */
@media (max-width: 1180px) {
	#sub_content .ao-grid { gap: 30px 26px; }
	#sub_content .uav-grid { gap: 34px 32px; }
	#sub_content .pv-head { gap: 36px; }
	#sub_content .pv-model { font-size: 36px; }
}
@media (max-width: 980px) {
	/* 사진과 이름만 있는 카드라 좁아져도 두 장은 나란히 선다 */
	#sub_content .ao-grid { grid-template-columns: repeat(2, 1fr); }
	/* 상세는 한 단으로 세운다 — 사진을 크게 두고 글을 아래로 */
	#sub_content .pv-head { grid-template-columns: 1fr; gap: 26px; margin-bottom: 40px; }
	#sub_content .pv-model { font-size: 32px; }
	#sub_content .pv-desc { font-size: 17px; }
	#sub_content .pv-spec { grid-template-columns: 170px 1fr; }
}
@media (max-width: 620px) {
	#sub_content .ao-grid,
	#sub_content .uav-grid { grid-template-columns: 1fr; }
	#sub_content .pv-model { font-size: 28px; }
	/* 라벨 칸을 따로 두기엔 좁다 — 값을 아래로 내린다 */
	#sub_content .pv-spec { display: block; }
	#sub_content .pv-spec dt { padding: 14px 0 3px; border-bottom: 0; }
	#sub_content .pv-spec dd { padding: 0 0 14px; }
}

/* ── 7. 필터 ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
	#sub_content .ao-fgroup,
	#sub_content .uav-filter { flex-wrap: wrap; row-gap: 8px; }
	#sub_content .ao-flabel,
	#sub_content .uav-flabel { width: 100%; margin-bottom: 2px; }
	#sub_content .ao-chip,
	#sub_content .uav-chip { padding: 8px 15px; font-size: 15px; }
}