@charset "utf-8";
/* ------------------------------------------------------------
   컬렉팅 계열 서브페이지 공용 CSS  (collect.css)

   사용 페이지 : /page/collecting.html , /page/tips.html
   - style.css 에 실재하는 클래스만 사용하고,
     없는 것은 이 파일에서 정의합니다.
   - 브레이크포인트는 사이트 기준(1200 / 768 / 480).
   - style.css 뒤에 로드하세요.
------------------------------------------------------------ */

/* ── 섹션 간격 ─────────────────────────────── */
.collect-sec1,
.collect-sec2,
.collect-sec3 { margin-bottom:80px; }

.collect-sec1 .title-s,
.collect-sec2 .title-s,
.collect-sec3 .title-s { margin-bottom:24px; }

.collect-sec1 .txt-md,
.collect-sec2 .txt-md { margin-bottom:20px; }

.collect-sec2 .table-scroll-auto { margin-bottom:12px; }


/* ── 강조 ─────────────────────────────────── */
.collect-sec1 strong,
.collect-sec3 strong,
.collect-sec4 strong { font-weight:700; color:#222; }

.pt-em { font-weight:700; color:var(--concept-color); }


/* ── 상단 비주얼 ────────────────────────────
   폭이 넓어 보이면 max-width 만 조절 (1000~1300)   */
.collect-visual {
	max-width:1300px;
	margin:0 auto 50px;
	border-radius:4px;
}
.collect-visual img { display:block; width:100%; height:auto; border-radius:4px; }
.collect-visual figcaption {
	font-size:12px; color:#999; text-align:right;
	letter-spacing:0; padding:8px 2px 0;
}

.collect-lead { color:#666; margin-bottom:40px; }


/* ── 번호 목록 (컬렉팅 4개 / 팁 6개 공용) ────── */
.point-list { border-top:1px solid #dfdfdf; }

.point-list > li {
	display:flex;
	align-items:flex-start;
	gap:34px;
	padding:38px 0;
	border-bottom:1px solid #dfdfdf;
}

.point-list .pt-num { flex:0 0 76px; }
.point-list .pt-num span {
	display:block;
	width:76px; height:76px; line-height:76px;
	text-align:center;
	border-radius:50%;
	font-family:"Jost", 'Pretendard';
	font-size:22px; font-weight:700; letter-spacing:0;
	color:#fff;
	background:var(--concept-color);
}
/* 번호가 내려갈수록 옅어지는 그러데이션 (최대 6단계) */
.point-list > li:nth-child(2) .pt-num span { background:#63368a; }
.point-list > li:nth-child(3) .pt-num span { background:#77519b; }
.point-list > li:nth-child(4) .pt-num span { background:#8c6cac; }
.point-list > li:nth-child(5) .pt-num span { background:#a087bd; }
.point-list > li:nth-child(6) .pt-num span { background:#b5a2cd; }

.point-list .pt-cont { flex:1 1 auto; min-width:0; }

.point-list .pt-tit {
	font-weight:700; font-size:24px; color:#000;
	line-height:1.35; letter-spacing:0;
	margin:8px 0 4px;
}
.point-list .pt-eng {
	font-family:"Jost", 'Pretendard';
	font-weight:400; font-size:13px; color:#a08cb0;
	letter-spacing:0.04em; text-transform:uppercase;
	margin-bottom:14px;
}
.point-list .pt-cont .txt-md:last-child { margin-bottom:0; }


/* ── 마무리 + 문의 ──────────────────────────
   .container 가 padding:100px 0 이므로
   아래 여백은 컨테이너에 맡깁니다.                 */
.collect-sec4 {
	text-align:center;
	background:#faf8fc;
	border-radius:4px;
	padding:60px 40px;
}
.collect-sec4 .txt-md { line-height:1.9; margin-bottom:20px; }
.collect-sec4 .btn-group {
	display:flex; justify-content:center;
	max-width:280px; margin:40px auto 0;
}


/* ── 반응형 (사이트 기준 : 1200 / 768 / 480) ─── */
@media all and (max-width:1200px) {
	.collect-visual { max-width:100%; margin-bottom:40px; }
	.collect-sec1, .collect-sec2, .collect-sec3 { margin-bottom:60px; }
	.point-list > li { gap:26px; padding:32px 0; }
	.point-list .pt-num { flex:0 0 64px; }
	.point-list .pt-num span { width:64px; height:64px; line-height:64px; font-size:19px; }
	.point-list .pt-tit { font-size:21px; }
	.collect-sec4 { padding:50px 30px; }
}

@media all and (max-width:768px) {
	.collect-sec1, .collect-sec2, .collect-sec3 { margin-bottom:50px; }
	.point-list > li { display:block; padding:28px 0; }
	.point-list .pt-num { margin-bottom:14px; }
	.point-list .pt-num span {
		width:auto; height:34px; line-height:34px;
		display:inline-block; padding:0 16px;
		border-radius:17px; font-size:14px;
	}
	.point-list .pt-tit { font-size:19px; margin-top:0; }
	.point-list .pt-eng { font-size:12px; margin-bottom:10px; }
	.collect-sec4 { padding:40px 20px; }
	.collect-sec4 .txt-md br { display:none; }
}

@media all and (max-width:480px) {
	.collect-lead { margin-bottom:30px; }
	.point-list .pt-tit { font-size:18px; }
	.collect-sec4 .btn-group { max-width:100%; }
}


/* ------------------------------------------------------------
   space-and-art.html 추가분
------------------------------------------------------------ */

/* 사례 이미지 2장 나란히 */
.case-images {
	display:flex;
	gap:20px;
	margin-bottom:12px;
}
.case-images figure { flex:1 1 0; min-width:0; }
.case-images img {
	display:block; width:100%; height:auto;
	border-radius:4px;
}
.case-caption { margin-bottom:40px; }

/* 번호 목록 안에 표가 들어가는 경우 */
.point-list .pt-cont .table-scroll-auto { margin-top:20px; }
.point-list .pt-cont .txt-md + .txt-md { margin-top:16px; }

@media all and (max-width:768px) {
	.case-images { gap:12px; }
	.case-caption { margin-bottom:30px; }
}

@media all and (max-width:480px) {
	.case-images { display:block; }
	.case-images figure + figure { margin-top:12px; }
}