/* 스마트팜 카테고리 전용 스타일.
   styles2.css(Bootstrap 5) 위에 얹는다. 여기 없는 것은 부트스트랩 유틸리티로 해결할 것 —
   페이지마다 style="" 을 흩뿌리면 6개 화면이 서로 다르게 흘러간다.

   구성
     1. 랜딩(스마트팜 첫 화면) — 사이드바 없이 사진이 화면을 채운다
     2. 사진 밴드 · 갤러리 — 본문 사이에 전면 사진을 깔아 글이 이어지지 않게 끊는다
     3. 상세 화면 공통 — 사이드바가 있는 5개 단계 화면 */

/* ══ 1. 랜딩 히어로 ═══════════════════════════════════════ */

.sf-landing {
	/* 상단 고정 내비게이션(layout/header.jsp) 높이만큼 비워 둔다 */
	padding-top: 72px;
}

.sf-hero-full {
	position: relative;
	height: calc(100vh - 72px);
	min-height: 460px;
	max-height: 860px;
	overflow: hidden;
	background-color: #16211c;
}

/* 사진을 겹쳐 두고 차례로 교차 페이드시킨다.
   영상 파일 없이도 화면이 계속 움직이게 만드는 부분 — 실제 홍보 영상이 생기면
   이 블록을 <video> 하나로 갈아 끼우면 된다. */
.sf-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-size: cover;
	background-position: center;
	animation: sfHeroCycle 21s infinite;
	will-change: opacity, transform;
}

.sf-hero-slide:nth-child(1) { animation-delay: 0s; }
.sf-hero-slide:nth-child(2) { animation-delay: 7s; }
.sf-hero-slide:nth-child(3) { animation-delay: 14s; }

@keyframes sfHeroCycle {
	0%   { opacity: 0; transform: scale(1.00); }
	5%   { opacity: 1; }
	33%  { opacity: 1; transform: scale(1.09); }
	38%  { opacity: 0; transform: scale(1.10); }
	100% { opacity: 0; transform: scale(1.10); }
}

/* 홍보 영상 층 — 사진 슬라이드 위에 깔린다.
   영상이 로드되기 전과 저사양·데이터 절약 환경에서는 사진 슬라이드가 그대로 보이므로
   영상은 "되면 좋고 안 되면 그만" 인 장식이다. 교차는 JS(sf-hero-video.js)가 한다. */
.sf-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
	z-index: 1;
}

.sf-hero-video.is-on { opacity: 1; }

/* 움직임을 줄여 달라는 환경에서는 영상을 아예 틀지 않는다(JS 도 같은 조건을 본다). */
@media (prefers-reduced-motion: reduce) {
	.sf-hero-video { display: none; }
}

/* 사진 위에 흰 글자를 올리므로 아래쪽을 어둡게 깐다 */
.sf-hero-full::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .35) 100%);
	pointer-events: none;
}

.sf-hero-body {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 0 3.5rem;
	color: #fff;
}

.sf-hero-eyebrow {
	display: inline-block;
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: .3rem .8rem;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 2rem;
	margin-bottom: 1.1rem;
}

.sf-hero-title {
	font-size: clamp(1.9rem, 4.4vw, 3.4rem);
	font-weight: 700;
	line-height: 1.22;
	margin-bottom: 1rem;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.sf-hero-lead {
	font-size: clamp(.95rem, 1.35vw, 1.15rem);
	/* 넓은 화면에서 한 줄로 떨어지게 잡은 폭. 좁아지면 자연스럽게 접힌다 */
	max-width: 54rem;
	margin-bottom: 1.6rem;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.sf-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 1rem;
	transform: translateX(-50%);
	z-index: 2;
	color: rgba(255, 255, 255, .8);
	font-size: 1.3rem;
	animation: sfBob 2.2s ease-in-out infinite;
}

@keyframes sfBob {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 8px); }
}

/* 이 카테고리의 주요 버튼은 사이트 기본색(초록)을 따른다.
   styles2.css(Bootstrap 5 기본)가 뒤에 로드돼 btn-primary 를 파랑으로 덮어쓰기 때문에
   여기서 다시 되돌린다. 안 하면 메인 화면 버튼은 초록인데 이 카테고리만 파랑이 된다. */
.sf-landing .btn-primary,
#layoutSidenav .btn-primary {
	background-color: #1abc9c;
	border-color: #1abc9c;
}

.sf-landing .btn-primary:hover,
.sf-landing .btn-primary:focus,
#layoutSidenav .btn-primary:hover,
#layoutSidenav .btn-primary:focus {
	background-color: #17a689;
	border-color: #17a689;
}

.sf-landing .btn-outline-primary,
#layoutSidenav .btn-outline-primary {
	color: #17a689;
	border-color: #1abc9c;
}

.sf-landing .btn-outline-primary:hover,
#layoutSidenav .btn-outline-primary:hover {
	background-color: #1abc9c;
	border-color: #1abc9c;
	color: #fff;
}

.sf-landing .text-primary { color: #1abc9c !important; }

/* ══ 2. 사진 밴드 · 갤러리 ════════════════════════════════ */

/* 화면 폭을 꽉 채우는 사진 띠. 글 사이를 사진으로 끊는다. */
.sf-band {
	position: relative;
	min-height: 380px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	color: #fff;
	margin: 0 0 0;
}

.sf-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, .72), rgba(0, 0, 0, .3));
}

.sf-band-inner {
	position: relative;
	z-index: 1;
	padding: 3.5rem 0;
}

.sf-band h2 {
	font-size: clamp(1.35rem, 2.6vw, 2.1rem);
	font-weight: 700;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

.sf-band p {
	/* 위와 같은 이유 — 데스크톱에서 한 줄, 모바일에서는 접힘 */
	max-width: 58rem;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

/* 사진이 주인공인 카드 — 글은 사진 위에 얹는다 */
.sf-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: .5rem;
	color: #fff;
	text-decoration: none;
	background-color: #16211c;
}

.sf-tile img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}

@supports not (aspect-ratio: 4 / 3) {
	.sf-tile img { height: 260px; }
}

.sf-tile:hover img,
.sf-tile:focus img { transform: scale(1.06); }

.sf-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, 0) 100%);
}

.sf-tile-copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 1.1rem 1.2rem;
	color: #fff;
}

.sf-tile-copy h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: .3rem;
}

.sf-tile-copy p {
	font-size: .85rem;
	margin-bottom: 0;
	color: rgba(255, 255, 255, .88);
}

.sf-tile-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background-color: #1abc9c;
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
	margin-right: .45rem;
	vertical-align: middle;
}

/* 상세 화면 상단의 넓은 사진 배너 */
.sf-banner {
	position: relative;
	border-radius: .5rem;
	overflow: hidden;
	background-color: #16211c;
}

.sf-banner img {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	display: block;
}

@supports not (aspect-ratio: 21 / 9) {
	.sf-banner img { height: 300px; }
}

.sf-banner-copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.5rem;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
}

.sf-banner-copy h1,
.sf-banner-copy p { text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.sf-banner-copy p { margin-bottom: 0; }

/* ══ 3. 공통 요소 ═════════════════════════════════════════ */

.sf-figure { overflow: hidden; border-radius: .5rem; }

.sf-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sf-figure-4x3 img { aspect-ratio: 4 / 3; }
.sf-figure-16x9 img { aspect-ratio: 16 / 9; }

@supports not (aspect-ratio: 4 / 3) {
	.sf-figure-4x3 img { height: 240px; }
	.sf-figure-16x9 img { height: 200px; }
}

.sf-card-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

@supports not (aspect-ratio: 16 / 9) {
	.sf-card-img { height: 180px; }
}

.sf-step-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: #1abc9c;
	color: #fff;
	font-weight: 700;
	font-size: .9rem;
	flex: 0 0 auto;
}

.sf-chain {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin-bottom: 1.5rem;
}

.sf-chain .sf-chain-item {
	padding: .35rem .75rem;
	border: 1px solid #dee2e6;
	border-radius: 2rem;
	font-size: .875rem;
	text-decoration: none;
	color: #2c3e50;
	background-color: #fff;
	white-space: nowrap;
}

.sf-chain .sf-chain-item:hover { background-color: #f1f3f5; }

.sf-chain .sf-chain-item.is-current {
	background-color: #1abc9c;
	border-color: #1abc9c;
	color: #fff;
}

.sf-chain .sf-chain-sep { color: #adb5bd; }

.sf-spec { margin: 0; }

.sf-spec > div {
	display: flex;
	gap: .75rem;
	padding: .5rem 0;
	border-bottom: 1px solid #f1f3f5;
}

.sf-spec > div:last-child { border-bottom: 0; }

.sf-spec dt {
	flex: 0 0 7.5rem;
	font-weight: 600;
	font-size: .875rem;
	color: #2c3e50;
}

.sf-spec dd {
	margin: 0;
	font-size: .875rem;
	color: #6c757d;
}

/* ══ 반응형 ═══════════════════════════════════════════════ */

@media (max-width: 767.98px) {
	.sf-hero-full { height: calc(100vh - 60px); min-height: 420px; }
	.sf-hero-body { padding-bottom: 2.5rem; }
	.sf-band { min-height: 300px; }
	.sf-band::before { background: rgba(0, 0, 0, .6); }
	.sf-band-inner { padding: 2.5rem 0; }
	.sf-banner img { aspect-ratio: 16 / 9; }
	.sf-spec > div { flex-direction: column; gap: .15rem; }
	.sf-spec dt { flex: none; }
}

/* 움직임을 줄여 달라는 설정이면 전환만 남기고 확대는 멈춘다 */
@media (prefers-reduced-motion: reduce) {
	.sf-hero-slide { animation-duration: 21s; }
	.sf-hero-slide,
	.sf-scroll-cue { animation-name: sfHeroFadeOnly; }
	.sf-tile img { transition: none; }
}

@keyframes sfHeroFadeOnly {
	0%   { opacity: 0; }
	5%   { opacity: 1; }
	33%  { opacity: 1; }
	38%  { opacity: 0; }
	100% { opacity: 0; }
}

/* ══ 9. 좌측 메뉴 폭에 맞춘 본문 여백 (스마트팜 한정) ══════════════════ */
/*
	공용 styles2.css 는 sb-nav-fixed 본문에 왼쪽 500px · 오른쪽 225px 를 준다.
	그런데 좌측 메뉴 폭은 225px 뿐이다. 그래서 1440 노트북에서 본문이 715px 로 줄고
	(화면의 절반) 좌우 여백도 275 대 225 로 어긋나 화면이 왼쪽으로 치우쳐 보인다.
	브라우저로 실측해 확인한 값이다.

	그 규칙은 이 사이트 24개 화면과 다른 모듈까지 함께 쓰므로 건드리지 않는다.
	스마트팜 화면에만 sf-page 를 붙여 여기서 메뉴 폭에 맞게 되돌린다.

	992px 미만은 손대지 않는다. 그 구간은 메뉴가 화면 밖으로 숨고 본문의 음수 마진이
	같은 크기의 여백을 상쇄해 이미 전체 폭을 쓴다 — 실측으로 확인했다.
	여기를 함께 고치려다 그 상쇄를 깨면 모바일이 도리어 망가진다.
*/
@media ( min-width : 992px) {
	.sf-page.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
		padding-left: 225px;
		padding-right: 0;
	}
}

/* ══ 10. 모바일 상단 가로 서브메뉴 (992px 미만) ═════════════════════════ */
/*
	992px 미만에서는 좌측 목차가 화면 밖으로 숨는다. 그동안은 머리띠 왼쪽의 햄버거로
	서랍처럼 열었는데, 오른쪽에도 사이트 전역 MENU 가 있어 메뉴를 여는 곳이 좌우에
	하나씩 생겼다. 어느 쪽이 스마트팜 메뉴인지 눌러 봐야 아는 상태였다.

	그래서 모바일에서는 좌측 햄버거를 감추고, 스마트팜 메뉴를 머리띠 바로 아래
	가로 칩으로 늘 띄운다. 누르지 않아도 다른 단계가 있다는 것이 보인다.
	992px 이상은 손대지 않는다 — 좌측 목차가 그대로다.
*/
.sf-subnav { display: none; }

@media ( max-width : 991.98px) {

	/* 좌측 목차를 여는 햄버거. 칩바가 그 일을 대신하므로 감춘다.
	   이 단추는 사이트 공통 머리띠에 있어 다른 화면도 쓴다 — sf-page 로 스마트팜만 막는다. */
	.sf-page #sidebarToggle { display: none !important; }

	.sf-subnav {
		display: flex;
		position: relative;
		background: #212529;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
	}

	.sf-subnav-scroll {
		display: flex;
		gap: 8px;
		padding: 10px 14px;
		overflow-x: auto;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.sf-subnav-scroll::-webkit-scrollbar { display: none; }

	.sf-chip {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 16px;
		border: 1px solid rgba(255, 255, 255, .28);
		border-radius: 999px;
		color: rgba(255, 255, 255, .86);
		font-size: 13px;
		text-decoration: none;
		white-space: nowrap;
	}
	.sf-chip:hover, .sf-chip:focus { color: #ffffff; border-color: rgba(255, 255, 255, .5); }

	.sf-chip.is-current {
		background: #1abc9c;
		border-color: #1abc9c;
		color: #ffffff;
		font-weight: 500;
	}

	/* 화살표는 기본이 숨김이다. 스크롤 위치에 따라 자바스크립트가 has-prev · has-next 를
	   붙였다 떼었다 한다. 처음에는 왼쪽 끝이라 좌측이 안 보이고, 끝까지 밀면 우측이 사라진다.
	   그냥 늘 띄워 두면 더 밀 것이 없는데도 밀라고 하는 셈이라 거짓 표시가 된다. */
	.sf-subnav-arrow {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 44px;
		display: none;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		color: #ffffff;
		font-size: 14px;
		z-index: 2;
	}
	.sf-subnav-prev { left: 0;  background: linear-gradient(90deg,  #212529 58%, rgba(33, 37, 41, 0) 100%); }
	.sf-subnav-next { right: 0; background: linear-gradient(270deg, #212529 58%, rgba(33, 37, 41, 0) 100%); }

	.sf-subnav.has-prev .sf-subnav-prev { display: flex; }
	.sf-subnav.has-next .sf-subnav-next { display: flex; }
}