.smartfarm-main { padding: 0; margin: 0; }

/* 🎥 Hero — 페이지 스코프 + svh */
.smartfarm-main .video-hero{
  position: relative;
  width: 100%;
  min-height: 100svh;             /* 100vh → 100svh (모바일 주소창 안전) */
  overflow: hidden;
}
.smartfarm-main .video-hero > video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.smartfarm-main .video-hero .overlay{
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  padding-top: min(30svh, 30vh);
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
}

/* 🧩 공통 섹션 스타일 */
.smartfarm-section{
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 20px;
  text-align: center;
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: 1.75;
}
.smartfarm-section h2{
  font-size: var(--fs-h2);
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.smartfarm-section p{
  max-width: 720px;
  margin: 0 auto 2rem;
  color: var(--color-text-subtle);
}

/* 🌱 스마트팜 브랜드 소개 */
.smartfarm-info{
  background-image: url('../../img/bg/smartfarm-intro-bg.webp');
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  margin-top: 75px;
  text-align: center;
  overflow: hidden;
  padding: 4rem 1rem;
}
.smartfarm-info::before{
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(30, 60, 30, 0.5);
  z-index: -1;
  transition: background-color 0.3s ease;
}
.smartfarm-info:hover::before{ background-color: rgba(30, 60, 30, 0.7); }
.smartfarm-info h2{
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #fff;
}

/* ⌨️ 타이핑 — JS 전용(가로쓰기 + 줄바꿈 허용) */
.typewriter{
  font-size: 1.125rem;
  color: var(--color-text);
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: normal;
  overflow: visible;
  max-width: 720px;
  margin: 1rem auto;
}
.smartfarm-info .typewriter{ color:#fff; }

/* 📊 전통 농법 vs 스마트팜 바 차트 비교 */
.smartfarm-bar-compare{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 2rem;
}
.bar-card{
  background: #fcfcfc;
  padding: 1.25rem;
  border-radius: 12px;
  box-shadow: var(--box-shadow-sm);
  text-align: center;
  font-weight: 600;
  transition: transform 0.3s ease;
}
.bar-card:hover{ transform: translateY(-6px); }
.bar-card h3{ color: var(--color-primary); margin-bottom: 1rem; }

.bar-track{
  background-color: #eee;
  border-radius: 8px;
  overflow: hidden;
  height: 24px;
  margin-bottom: 1rem;
}
.bar{
  width: 0;
  height: 100%;
  color: white;
  font-weight: bold;
  line-height: 24px;
  text-align: right;
  padding-right: 12px;
  transition: width 1s ease-in-out;
}
.bar.left{ background-color: #8d6e63; }   /* 전통 농법 */
.bar.right{ background-color: #81c784; }  /* 스마트팜 */

/* 📘 비교 메시지 */
.semantic-note{
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--color-text-subtle);
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* 📈 생산성 비교 막대 그래프 */
.bar-wrapper{
  max-width: 640px;
  margin: 2rem auto;
  text-align: left;
}
.bar-title{
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}
.bar.old{ background-color: #8d6e63; }  /* 기존 농법 */
.bar.smart{ background-color: #81c784; }/* 스마트팜 */

/* 🔁 스마트 농업 핵심 흐름 */
.smartfarm-flow-wrapper{
  position: relative;
  margin: 3rem 0;
  height: 160px;
}
.smartfarm-flow-line{
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 0;
}
.line-path{
  stroke: url(#flowGradient);
  stroke-width: 16;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawLine 2s ease forwards, glowLine 2s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px #81c784);
}
.smartfarm-flow{
  display: flex;
  justify-content: space-around;
  position: relative;
  z-index: 1;
  padding: 2rem 0;
}
.flow-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
  animation: fadeUp .8s forwards;
  animation-delay: calc(0.4s + var(--i) * 0.4s);
  opacity: 0;
}
.flow-step img{
  width: 150px; height: 150px; object-fit: contain;
  margin-bottom: .5rem;
  filter: drop-shadow(0 0 6px #a5d6a7);
  animation: iconGlow 3s ease-in-out infinite alternate;
  background: #fff; border-radius: 12px; padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform .3s ease;
}
.flow-step:hover{ transform: scale(1.05); }
.flow-step:hover img{ transform: scale(1.08); }
.flow-label{ font-size: 1.2rem; color: #1b5e20; font-weight: 600; margin-bottom: .5rem; }
.flow-step p{ font-size: 1rem; text-align: center; line-height: 1.4; color: var(--color-text); }
.flow-arrow{
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: bold; color: var(--color-primary);
  animation: arrowFade .6s forwards;
  animation-delay: calc(0.6s + var(--i) * 0.4s);
  opacity: 0;
}
.smartfarm-flow .flow-step:nth-child(odd),
.smartfarm-flow .flow-arrow:nth-of-type(even){ animation-delay: calc(0.3s + (var(--i) * 0.3s)); }

/* 📋 도입 기술 리스트 */
.benefit-list{
  list-style: none;
  padding: 0;
  margin-top: 2rem;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-left: auto;
  margin-right: auto;
}
.benefit-list li{
  background: #f4fef8;
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius-md);
  font-weight: 600; color: var(--color-primary);
  box-shadow: var(--box-shadow-sm);
  text-align: center;
}

/* 🏛️ 정책 및 법령 섹션 */
.smartfarm-policy{ background:#fff; }
.smartfarm-policy h2{ font-size: var(--font-size-xl); }
.smartfarm-policy p{ color: var(--color-text-subtle); }

/* ✅ 공용 버튼(.cta) 사용 시 간격만 현지화 */
.smartfarm-policy .cta{ margin-top: 1rem; }

/* 🎞️ 키프레임 (타자 키프레임은 제거) */
@keyframes drawLine{ to { stroke-dashoffset: 0; } }
@keyframes glowLine{ 0%{ stroke:#a5d6a7; } 100%{ stroke:#2e7d32; } }
@keyframes iconGlow{ 0%{ filter: drop-shadow(0 0 0px #81c784); transform: scale(1); } 100%{ filter: drop-shadow(0 0 6px #a5d6a7); transform: scale(1.05); } }
@keyframes fadeUp{ 0%{ transform: translateY(30px); opacity: 0; } 100%{ transform: translateY(0); opacity: 1; } }
@keyframes arrowFade{ 0%{ transform: scale(.8); opacity: 0; } 100%{ transform: scale(1); opacity: 1; } }

/* 🎯 커서 효과 원형 */
.cursor-circle{
  position: fixed;
  width: 24px; height: 24px;
  background: rgba(0,150,0,.2);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) !important;
  z-index: 9999;
  transition: transform .2s ease-out, background .3s ease;
}

/* ⬆️ Scroll-To-Top 버튼 */
#toTop{
  position: fixed;
  bottom: 32px; right: 32px;
  background: var(--color-primary);
  color: #fff; font-size: 1.25rem;
  padding: 10px 14px; border-radius: 50%; border: none;
  cursor: pointer; z-index: 999; transition: background-color .3s ease;
}
#toTop:hover{ background: var(--color-accent); }

/* ===== Responsive ===== */
@media (max-width: 768px){
  .smartfarm-main .video-hero{ min-height: 60svh; }

  /* 섹션 자체의 모바일 패딩(디자인 유지) */
  .smartfarm-section{
    padding: 28px 16px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
  }
  .smartfarm-section h2{ margin-bottom: 10px; }
  .smartfarm-section p{ margin: .5rem auto 1rem; }

  .smartfarm-info{ margin-top: 28px; padding: 2rem 1rem; }

  .smartfarm-flow-wrapper{ overflow-x: auto; padding: 1rem; margin: 2rem 0; }
  .smartfarm-flow{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
    justify-items: center;
    padding: 1rem 0;
  }
  .flow-step{ width: 100%; max-width: 180px; text-align: center; margin: 0 auto; }
  .flow-step img{ width: 100px; height: auto; margin-bottom: .5rem; }
  .flow-arrow, .smartfarm-flow-line{ display: none; }

  .benefit-list{ grid-template-columns: 1fr; }
  .bar-card{ font-size: .95rem; }

  /* ✅ 공용 버튼(.cta) — 모바일 레일/폭 보정 */
  .smartfarm-policy .cta{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 16px;
    line-height: 1;
    margin: 8px 0;
    width: 100%;
  }

}

@media (max-width: 480px){
  .smartfarm-section{ padding: 24px 14px; margin-bottom: 12px; }
}

/* ===== FP07-2 Override: smartfarm ===== */
.smart-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
@media (max-width:1024px){ .smart-cards{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:640px) { .smart-cards{ grid-template-columns: 1fr; } }

.smart-table{ overflow-x:auto; }
.smart-table table{ min-width: 720px; }

/* 히어로 ↔ 인트로 간격 보정 */
@media (max-width: 768px){
  .video-hero + .smartfarm-info,
  #smartfarm-hero + .smartfarm-info,
  .smartfarm-hero + .smartfarm-info,
  .video-hero + .smartfarm-section,
  #smartfarm-hero + .smartfarm-section,
  .smartfarm-hero + .smartfarm-section{
    margin-top: 24px !important;
    padding-top: 16px !important;
  }
}
@media (min-width: 769px){
  #smartfarm-benefit.content-section{ padding-bottom: 28px; }
  #smartfarm-learnmore.content-section{ padding-top: 24px; }
}
