/* ═══════════════════════════════════════════════════════════
   garbom_content.css
   포트폴리오 & 뉴스 목록 / 뷰 전용 스타일
   04 Source/css/mobile.css 원본 기준

   • 모든 규칙은 .con-com-02 또는 .gcv-wrap 스코프 내에 정의
   • mobile.css 의 .con-com-02 규칙(3296~3297) 은 font-size/min-width 만
     정의하므로 레이아웃 전체를 여기서 추가 선언
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. 섹션 전체 여백  (원본: padding-top: 15em)
───────────────────────────────────────────── */
.con-com-02 {
	padding-top: 12em;
	padding-bottom: 10em;
	position: relative;
}

/* ─────────────────────────────────────────────
   2. 내부 박스 레이아웃
───────────────────────────────────────────── */
.con-com-02 .com-box-01 {
	margin: 0 auto;
	max-width: var(--full-width-pd);
	padding-left: 20px;
	padding-right: 20px;
}

.con-com-02 .con-box-01 {
	display: flex;
	align-items: flex-start;
}

/* ─────────────────────────────────────────────
   3. 탭 메뉴 (좌측 고정)
───────────────────────────────────────────── */
.con-com-02 .tab-menu {
	width: 25%;
	min-width: 22em;
	text-align: left;
	font-family: var(--font-3);
	padding-right: 3%;
	position: sticky;
	top: 120px;
}

.con-com-02 .tab-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 기본 탭 글자: 검정 */
.con-com-02 .tab-menu a {
	display: block;
	font-size: 6em;
	font-weight: 900;
	line-height: 1.25;
	color: #222;
	text-decoration: none;
	transition: color 0.15s;
}
.con-com-02 .tab-menu a:hover {
	color: #555;
}

/* 활성 탭: 민트 */
.con-com-02 .tab-menu .tab-active a {
	color: var(--color-1);
}

/* ─────────────────────────────────────────────
   4. 콘텐츠 영역 (우측)
───────────────────────────────────────────── */
.con-com-02 .con-area {
	width: 75%;
}

/* ─────────────────────────────────────────────
   5. 그리드 (4열, 간격 4px)
   ※ mobile.css 의 .con-com-02 .list-box img { width:100% } 를
      아래 규칙으로 덮어씁니다.
───────────────────────────────────────────── */
.con-com-02 .list-box {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin-right: -4px;
	overflow: hidden;
}

.con-com-02 .list-box .ls-list {
	width: calc(25% - 4px);
	margin-right: 4px;
	margin-bottom: 4px;
	position: relative;
	overflow: hidden;

	/* 등장 애니메이션 초기 상태 */
	opacity: 0;
	transform: scale(0.72);
	animation: ls-reveal 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
	animation-delay: calc(min(var(--ls-idx, 0), 20) * 60ms);
}

@keyframes ls-reveal {
	from {
		opacity: 0;
		transform: scale(0.72);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ─────────────────────────────────────────────
   6. 이미지 (세로 비율 3:4)
───────────────────────────────────────────── */
.con-com-02 .ls-list a {
	display: block;
	aspect-ratio: 3 / 4;   /* 세로 비율 강제 */
	overflow: hidden;
	position: relative;
}

.con-com-02 .ls-list a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.con-com-02 .ls-list a:hover img {
	transform: scale(1.05);
}

/* ─────────────────────────────────────────────
   7. 호버 오버레이 (검정 반투명 + 제목 + 연도)
   원본 a-hover 패턴 기준: flex 중앙 정렬, font-2(Poppins)
───────────────────────────────────────────── */
.con-com-02 .a-hover {
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.62);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 1em;
	box-sizing: border-box;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.con-com-02 .ls-list:hover .a-hover {
	opacity: 1;
}

.con-com-02 .a-hover .ls-subject {
	color: #fff;
	font-family: var(--font-1);
	font-size: 1em;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 0.35em;
	word-break: keep-all;
}

.con-com-02 .a-hover .ls-year {
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--font-3);
	font-size: 0.82em;
	font-weight: 500;
	margin: 0;
	letter-spacing: 0.08em;
}

/* ─────────────────────────────────────────────
   8. 빈 목록
───────────────────────────────────────────── */
.con-com-02 .gc-empty {
	width: 100%;
	padding: 80px 0;
	color: #bbb;
	font-size: 0.9em;
	text-align: center;
}

/* 탭 전환 시 숨겨진 항목 (애니메이션 재실행 없이 즉시 처리) */
.con-com-02 .list-box .ls-list[style*="display: none"] {
	animation: none;
}

/* ─────────────────────────────────────────────
   9. 반응형
───────────────────────────────────────────── */

/* 태블릿 ≤ 1024px */
@media (max-width: 1024px) {
	.con-com-02 {
		padding-top: 8em;
		padding-bottom: 6em;
	}
	.con-com-02 .tab-menu {
		min-width: 14em;
	}
	.con-com-02 .tab-menu a {
		font-size: 3.2em;
	}
	.con-com-02 .list-box .ls-list {
		width: calc(33.333% - 4px);
	}
}

/* 모바일 ≤ 768px: 탭 가로 텍스트, 그리드 2열 */
@media (max-width: 768px) {
	.con-com-02 {
		padding-top: 8em;
		padding-bottom: 4em;
	}
	.con-com-02 .con-box-01 {
		flex-direction: column;
	}
	.con-com-02 .tab-menu {
		position: static;
		width: 100%;
		min-width: unset;
		max-width: 360px;
		padding-right: 0;
		padding-bottom: 25px;
	}
	.con-com-02 .tab-menu ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0;
	}
	/* 모바일: 버튼 없이 텍스트만 — 원본 퍼블 기준 */
	.con-com-02 .tab-menu a {
		font-size: 1.8em;
		font-weight: 900;
		line-height: 1.25;
		color: #222;
		border: none;
		border-radius: 0;
		background: none;
		padding: 0;
	}
	.con-com-02 .tab-menu a:hover {
		color: #555;
		border: none;
		background: none;
	}
	.con-com-02 .tab-menu .tab-active a {
		color: var(--color-1);
		background: none;
		border: none;
	}
	.con-com-02 .con-area {
		width: 100%;
	}
	.con-com-02 .list-box {
		margin-right: -3px;
	}
	.con-com-02 .list-box .ls-list {
		width: calc(50% - 3px);
		margin-right: 3px;
		margin-bottom: 3px;
	}
}

/* ═══════════════════════════════════════════════════════════
   뷰 페이지 (con-com-03)
   PC  : con-area 전체폭, com-box-01·txt-box 이미지 위 겹침(absolute)
   모바일: 일반 흐름 (내용 → 이미지 → txt-box → 푸터)
   ═══════════════════════════════════════════════════════════ */

.con-com-03 {
	padding-top: 0;
	padding-bottom: 10em;
	position: relative;
}

/* ─── con-area: PC에서 전체 폭 ─── */
.con-com-03 .con-area {
	position: relative;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
}

/* ─── com-box-01: PC에서 이미지 위에 absolute 오버레이 ─── */
.con-com-03 .com-box-01 {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var(--full-width-pd);
	padding: 9em 20px 0;
	z-index: 3;
	box-sizing: border-box;
}

/* ─── head-box ─── */
.con-com-03 .head-box {
	font-family: var(--font-3);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.con-com-03 .head-box .head-top { text-align: left; }

.con-com-03 .head-box h3 {
	font-size: 3.9em;
	font-weight: 700;
}

.con-com-03 .head-box p {
	font-size: 2.7em;
	padding-top: 0.2em;
}

.con-com-03 .head-box .btn-box { margin-top: 4em; }

.con-com-03 .head-box .btn-box a {
	font-size: 1.1em;
	padding: 0.7em 2.3em;
	color: var(--bg-white, #fff);
	display: inline-block;
	background-color: var(--bg-black, #111);
	text-decoration: none;
	transition: background 0.2s;
}

.con-com-03 .head-box .btn-box a:hover { background: var(--color-1); }

.con-com-03 .head-symbol img {
	width: 90px;
	height: auto;
}

/* ─── img-box: 전체 폭 이미지, 일반 흐름 ─── */
.con-com-03 .img-box {
	position: relative;
	z-index: 1;
	width: 100%;
}

.con-com-03 .img-box img {
	width: 100%;
	height: auto;
	display: block;
}

/* ─── txt-box: PC에서 이미지 위에 absolute 오버레이 ─── */
.con-com-03 .txt-box {
	position: absolute;
	top: 700px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 100%;
	max-width: var(--full-width-pd);
	padding: 3em 20px;
	font-size: 1.1em;
	font-family: var(--font-3);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	pointer-events: none;
	box-sizing: border-box;
}

.con-com-03 .dl-box dl {
	text-align: left;
	display: flex;
	padding-bottom: 0.3em;
}

.con-com-03 .dl-box dt {
	width: 5em;
	font-weight: 700;
}

.con-com-03 .dl-box dd { color: var(--bg-gray-4, #939494); }

.con-com-03 .txt-copy { color: var(--bg-gray-4, #939494); }

/* ═══════════════════════════════════════════════════════════
   모바일 ≤ 768px: 일반 흐름 (겹침 없음)
   순서: com-box-01(제목) → img-box(이미지) → txt-box(정보)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	.con-com-03 {
		padding-top: 10em;
		padding-bottom: 4em;
	}

	/* con-area: 일반 폭, full-vw 해제 */
	.con-com-03 .con-area {
		width: 100%;
		left: auto;
		transform: none;
		display: flex;
		flex-direction: column;
	}

	/* com-box-01: 일반 흐름 (이미지 위에 놓임) */
	.con-com-03 .com-box-01 {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		padding: 0 20px;
		order: 1;
	}

	/* head-box: 모바일 → 심볼 위, 제목 아래 */
	.con-com-03 .head-box { flex-wrap: wrap; }
	.con-com-03 .head-box .head-top { order: 2; width: 100%; padding-top: 3em; }
	.con-com-03 .head-box .head-symbol { order: 1; text-align: right; width: 100%; }
	.con-com-03 .head-symbol img { width: 60px; }
	.con-com-03 .head-box h3 { font-size: 2.8em; }
	.con-com-03 .head-box p  { font-size: 2em; }
	.con-com-03 .head-box .btn-box { margin-top: 2em; }

	/* img-box: 일반 흐름, 세 번째 (이미지 마지막) */
	.con-com-03 .img-box {
		order: 3;
		margin-top: 2em;
	}

	/* txt-box: 일반 흐름, 이미지 위 두 번째 */
	.con-com-03 .txt-box {
		order: 2;
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		display: block;
		padding: 4em 20px 2em;
		pointer-events: auto;
	}

	.con-com-03 .txt-copy {
		text-align: left;
		padding-top: 2em;
	}
}