.solution-main { padding: 0; margin: 0; }

/* 🎥 비디오 히어로: 페이지 스코프 + svh */
.solution-main .video-hero{
  position: relative;
  width: 100%;
  min-height: 100svh;     /* 100vh → 100svh (모바일 주소창 안전) */
  overflow: hidden;
}
.solution-main .video-hero > video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.solution-main .video-hero .overlay{
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  padding-top: min(30svh, 30vh);
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* 🧭 소개 섹션 (배경+오버레이) */
.solution-intro{
  background-image: url('../../img/bg/solution-intro-bg.webp');
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  margin-top: 75px;
  text-align: center;
  overflow: hidden;
  padding: 4rem 1rem;
}
.solution-intro::before{
  content:'';
  position:absolute; inset:0;
  background-color: rgba(40, 80, 40, 0.5);
  z-index:-1; transition: background-color .3s ease;
}
.solution-intro:hover::before{ background-color: rgba(40, 80, 40, 0.7); }
.solution-intro h1{
  font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; color: #fff;
}
.solution-intro .intro-text h2{
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.45); /* 배경 위 가독성 */
}

/* ⌨️ 타이핑 — JS 전용(가로쓰기 + 줄바꿈 허용) */
.solution-main .typewriter{
  font-size: 1.2rem;
  font-weight: 700;
  font-family: 'Noto Sans KR', sans-serif;
  color: #fff;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: normal;   /* 줄바꿈 허용 */
  overflow: visible;     /* 잘림 방지 */
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
}

/* 🔡 모토 섹션 */
.moto-section{
  background: transparent;
  max-width: 900px;
  margin: 0 auto;
  padding: var(--section-padding) 2rem;
  text-align: center;
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: 1.8;
  border-radius: var(--border-radius-lg);
  box-shadow: none;
  opacity: 0; transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}
.moto-section.fade-in{ opacity: 1; transform: translateY(0); }
.moto-section h2{ font-size: var(--fs-h2); color: var(--color-accent); margin-bottom: var(--gap-md); }
.moto-section .keyword{ color: var(--color-primary); font-weight: 700; }

/* 📦 솔루션 카드 — 3열 */
.solution-cards .card-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  padding: 40px 20px;
  margin: 0 auto;
}
.solution-cards .card{
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;                               /* ← 흰 배경 */
  border: 1.5px solid var(--color-primary);       /* ← 녹색 테두리 */
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  transition: transform .3s ease;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.solution-cards .card-header,
.solution-cards .card-header *{
  color: var(--color-primary);
  background: transparent; /* 혹시 배경이 있다면 제거 */
  padding-top: 0.6rem;
}

.solution-cards .card:hover{ transform: translateY(-6px); }
.solution-cards .card-image img{
  width: 100%; height: auto; object-fit: cover; display: block; transition: opacity .3s ease;
}
.solution-cards .card-overlay{
  position:absolute; inset:0; background:#fff; opacity:0;
  padding:1.5rem; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  transition: opacity .3s ease; pointer-events:none; z-index:1;
}
.solution-cards .card:hover .card-image img{ opacity:0; }
.solution-cards .card:hover .card-overlay{ opacity:1; pointer-events:auto; }
.solution-cards .card-overlay h3{ font-size:1.4rem; color:#2e7d32; margin-bottom:.5rem; }
.solution-cards .card-overlay p{ font-size:.95rem; color:#4e684e; line-height:1.6; }

/* 📄 공통 섹션 */
.solution-section{
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--section-padding) 1.25rem; /* ← 좌우 여백 */
  text-align: center;
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: 1.8;
}
.solution-section h2{ font-size: var(--fs-h2); color: var(--color-primary); margin-bottom: var(--gap-sm); }
/* 💎 차별점 */
.differentiation-section{ max-width:1100px; margin:0 auto; padding: var(--section-padding) 1rem; text-align:center; }
.differentiation-section h2{ font-size: var(--fs-h2); color: var(--color-accent); margin-bottom: var(--gap-md); }
.differentiation-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap-md); margin-bottom: var(--gap-lg);
}
.diff-card{
  background:#f4fef8; border-left:4px solid var(--color-primary);
  padding:1.5rem; border-radius: var(--border-radius-md); box-shadow: var(--box-shadow-sm);
  text-align:left; transition: transform .3s ease;
}
.diff-card:hover{ transform: translateY(-4px); }
.diff-card strong{ font-size: var(--fs-base); color: var(--color-primary); display:block; margin-bottom:.5rem; }
.diff-card p{ font-size: var(--fs-sm); color: var(--color-text); line-height:1.6; }
.differentiation-desc p{
  font-size: var(--fs-base); line-height:1.8; color: var(--color-text);
  max-width:800px; margin:0 auto;
}

/* 📬 CTA 버튼 */
.solution-section .cta.primary{
  display:inline-block; margin-top:1rem; padding:.75rem 1.5rem;
  background: var(--color-accent); color:#fff; border-radius:6px; text-decoration:none;
  transition: background-color .3s ease, color .3s ease, border .3s ease;
}
.solution-section .cta.primary:hover{
  background:#fff; color: var(--color-primary); border:1px solid var(--color-primary);
}

/* ===== 반응형 ===== */
@media (max-width: 768px){
  .solution-main .video-hero{ min-height: 60svh; }
  .solution-main .video-hero .overlay{ padding-top: 12svh; font-size: 1rem; }

  .moto-section p{ text-align:left; }

  .solution-cards .card-container{
    grid-template-columns: 1fr;
    gap: 20px; padding: 24px 12px; overflow-x: visible;
  }
  .solution-cards .card{ max-width:100%; margin:0 auto; height:auto; }
  .solution-cards .card-overlay{ padding: 1rem; }
  .solution-cards .card-overlay h3{ font-size: 1.2rem; }
  .solution-cards .card-overlay p{ font-size: .95rem; line-height: 1.6; }

  /* 올바른 분리 규칙: 모바일에서 강제 줄바꿈 <br> 숨김 + 왼쪽 정렬 */
  .differentiation-desc p br{ display:none; }
  .differentiation-desc p{ text-align:left; }
}

/* ===== FP07-2 Override: solution ===== */
.solution-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
@media (max-width:1024px){ .solution-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:640px) { .solution-grid{ grid-template-columns: 1fr; } }

/* === 모바일 전용: 솔루션 카드 '내용 보기' 라벨 === */
@media (max-width: 768px), (hover: none), (pointer: coarse){
  .solution-cards .card{
    position: relative;          /* 이미 있으면 생략 가능 */
  }
  .solution-cards .card::after{
    content: "내용 보기";
    position: absolute;
    right: 12px;
    bottom: 10px;
    padding: .35rem .6rem;
    border-radius: 9999px;
    background: #fff;
    color: var(--color-primary);  /* 녹색 텍스트 */
    border: 1px solid var(--color-primary); /* 녹색 테두리 */
    font-size: .8rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    z-index: 2;                  /* 이미지/오버레이 위로 */
    pointer-events: none;        /* 힌트용(클릭 막지 않음) */
  }
}