/* =====================================================
   (주)케이엔텍 홈페이지 - 브랜드 디자인
   CI 로고에 맞춘 브랜드 컬러
     Navy        #2B2A68 (남색 - 제목/주요버튼/신뢰감)
     Green       #6AB23C (잎녹색 - 자연/강조/CTA)
     Green-dark  #4E9E54 (진녹색 - 그라데이션 보조)
     BG          #F7F6F2 (배경 베이지)
   ===================================================== */

:root {
  --kn-navy: #2B2A68;
  --kn-green: #6AB23C;
  --kn-green-dark: #4E9E54;
  --kn-bg: #F7F6F2;
}

/* sticky 네비게이션 높이만큼 앵커 스크롤 위치 보정 (#online-store 등) */
html {
  scroll-padding-top: 90px;
}

body {
  font-family: "Pretendard", "Noto Sans KR", -apple-system, "Malgun Gothic", sans-serif;
  color: #333;
}

/* 상단 네비게이션 로고 이미지 */
.brand-logo-img {
  height: 44px;
  width: auto;
}

/* 하단 푸터 로고
   어두운 배경에서 흰 박스가 너무 튀어, 로고를 깔끔한 흰색 실루엣으로
   처리해 박스 없이 자연스럽게 어울리도록 함 */
.footer-logo {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* 영문 제품 상세 모달 — Detail layout */
.product-detail-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  align-items: start;
}
@media (max-width: 767.98px) {
  .product-detail-grid { grid-template-columns: 1fr; padding: 1rem; }
}
.product-detail-img-wrap {
  background-color: #fafaf7;
  border: 1px solid #e5e3da;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.product-detail-img-wrap img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
}
.product-detail-info .product-name-en {
  color: var(--kn-navy);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.product-detail-info .product-name-ko {
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.product-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 1rem;
}
.product-meta-pill {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.78rem;
  background-color: var(--kn-bg);
  border: 1px solid #e5e3da;
  border-radius: 12px;
  color: #555;
}
.product-meta-pill.green {
  background-color: var(--kn-green);
  border-color: var(--kn-green);
  color: #fff;
  font-weight: 600;
}
.product-overview {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 0;
}
.product-detail-section {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid #eceae3;
}
@media (max-width: 767.98px) {
  .product-detail-section { padding: 1rem; }
}
.product-detail-section h6 {
  color: var(--kn-navy);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.85rem;
  padding-left: 0.6rem;
  border-left: 3px solid var(--kn-green);
}
.product-detail-section ul {
  padding-left: 1.3rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 0;
}
.product-detail-section p { color: #555; line-height: 1.65; margin-bottom: 0; }
.product-usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: #fff;
  border: 1px solid #e5e3da;
  border-radius: 6px;
  overflow: hidden;
}
.product-usage-table th {
  background-color: var(--kn-green-dark);
  color: #fff;
  padding: 0.55rem 0.85rem;
  font-weight: 600;
  text-align: left;
}
.product-usage-table td {
  padding: 0.5rem 0.85rem;
  border-top: 1px solid #eceae3;
  color: #555;
}
.product-stub-message {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: #888;
  font-size: 0.95rem;
  line-height: 1.7;
}
.product-stub-message .stub-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  opacity: 0.4;
}

/* 영문 제품 카드 클릭 가능 표시 */
#en-products .product-card[data-product] {
  cursor: pointer;
}
#en-products .product-card[data-product]:focus {
  outline: 3px solid var(--kn-green);
  outline-offset: 2px;
}

/* 언어 전환 토글 (KO / EN) */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid #d9d6cc;
  font-size: 0.9rem;
}
.lang-switcher a {
  color: #888;
  text-decoration: none;
  padding: 0.25rem 0.4rem;
  font-weight: 500;
  transition: color 0.15s ease;
}
.lang-switcher a:hover { color: var(--kn-green-dark); }
.lang-switcher a.active {
  color: var(--kn-navy);
  font-weight: 700;
}
.lang-switcher .lang-sep { color: #ccc; margin: 0 2px; }
@media (max-width: 991.98px) {
  .lang-switcher {
    margin: 0.5rem 0 0 0; padding-left: 0; border-left: none;
  }
}

/* 네비게이션 메뉴 색상 */
.navbar .nav-link {
  color: #333;
  font-weight: 500;
  margin: 0 0.4rem;
}
.navbar .nav-link:hover {
  color: var(--kn-green);
}

/* 섹션 공통 */
.section-title {
  color: var(--kn-navy);
  font-weight: 700;
}
.bg-section {
  background-color: var(--kn-bg);
}

/* ① HERO 캐러셀 (3개 슬라이드 자동 순환)
   각 슬라이드는 배경 사진 + 그 위에 남색·녹색 반투명 막 + 흰 글자.
   슬라이드 사진을 바꾸려면 .hero-slide-1/2/3 의 background-image 만 교체. */
.hero { min-height: 70vh; }
.hero .carousel,
.hero .carousel-inner { min-height: 70vh; }
.hero .carousel-item { min-height: 70vh; }
.hero-slide {
  min-height: 70vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero-slide-1 { background-image: url('../images/brand-soil.jpg'); }
.hero-slide-2 { background-image: url('../images/hero.jpg'); }
.hero-slide-3 { background-image: url('../images/golf/golf6.jpg'); }
.hero-overlay {
  min-height: 70vh;
  background: linear-gradient(135deg, rgba(43,42,104,0.55) 0%, rgba(46,110,60,0.55) 100%);
}
.hero h1,
.hero .lead {
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
/* 슬라이드 점(인디케이터)과 좌우 화살표 위치 살짝 띄움 */
.hero .carousel-indicators { margin-bottom: 1.2rem; }
.hero .carousel-control-prev,
.hero .carousel-control-next { width: 6%; }

/* =====================================================
   모바일 화면 보정 (768px 이하)
   ===================================================== */
@media (max-width: 767.98px) {
  /* Hero 텍스트 — 모바일에서 display-4 그대로면 잘림 */
  .hero h1.display-4 { font-size: 1.85rem; line-height: 1.35; }
  .hero .lead { font-size: 1rem; line-height: 1.55; }
  .hero .btn-lg { font-size: 0.95rem; padding: 0.55rem 1rem; }

  /* Carousel 좌우 화살표 - 터치 영역 확보 */
  .hero .carousel-control-prev,
  .hero .carousel-control-next { width: 12%; }

  /* 섹션 상하 패딩 축소 */
  .content-section { padding: 2.5rem 0; }

  /* 페이지 상단 띠 패딩 축소 */
  .page-header { padding: 2rem 0; }
  .page-header h1 { font-size: 1.75rem; }

  /* 모달 본문 모바일 — 좌우 여백 축소 (사진을 더 크게) */
  #caseDetailModal .modal-body .case-section,
  #caseDetailModal .modal-body .case-stat-grid,
  #caseDetailModal .modal-body .case-tags { padding-left: 1rem; padding-right: 1rem; }

  /* 모달 통계 카드 — 모바일에선 2열 강제 */
  .case-stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* 사례 카드 이미지 비율 — 모바일에선 살짝 더 짧게 */
  .case-card-img { aspect-ratio: 16 / 9; }

  /* 데이터 표 글자 살짝 축소 */
  .case-data-table { font-size: 0.82rem; }
  .case-data-table th, .case-data-table td { padding: 0.45rem 0.5rem; }

  /* 인증서 썸네일 높이 축소 */
  .cert-thumb { height: 200px; }

  /* 푸터 우측 정렬 → 모바일에선 좌측 정렬 (text-md-end 클래스 동작 확인용) */
  /* Bootstrap text-md-end 가 이미 처리하므로 별도 불필요 */
}

/* 매우 좁은 화면(작은 휴대폰) - 360px 미만 */
@media (max-width: 359.98px) {
  .hero h1.display-4 { font-size: 1.55rem; }
  .case-stat-grid { grid-template-columns: 1fr; }
}

/* 이미지 자리 표시 (실제 사진 들어오기 전 임시) */
.placeholder-img {
  background-color: #e9e7df;
  color: #9a958a;
  border: 1px dashed #c5c0b3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  font-size: 0.95rem;
  border-radius: 6px;
}

/* 제품 카드 */
.product-card {
  border: 1px solid #e5e3da;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
/* 클릭 가능한(카탈로그 모달 연결된) 카드 - 마우스 커서 손가락 모양 */
.product-card[data-product] {
  cursor: pointer;
}
.product-card[data-product]:focus {
  outline: 3px solid var(--kn-green);
  outline-offset: 2px;
}
.product-card .placeholder-img {
  min-height: 200px;
  border: none;
  border-radius: 6px 6px 0 0;
}
.product-card .card-img-top {
  height: 200px;
  object-fit: contain;
  background-color: #fff;
  padding: 12px;
  border-radius: 6px 6px 0 0;
}

/* 기술력 박스 */
.tech-box {
  background-color: var(--kn-bg);
  border-radius: 8px;
}

/* 문의 CTA 띠 (남색 배경 - 신뢰감) */
.cta-band {
  background-color: var(--kn-navy);
}

/* 주요 버튼 - 남색 (가장 강조되는 행동 유도) */
.btn-accent {
  background-color: var(--kn-navy);
  border-color: var(--kn-navy);
  color: #fff;
}
.btn-accent:hover {
  background-color: #1f1e4f;
  border-color: #1f1e4f;
  color: #fff;
}

/* 보조 버튼 - 녹색 외곽선 (자연/제품 관련) */
.btn-outline-primary-brand {
  border: 1px solid var(--kn-green);
  color: var(--kn-green-dark);
  background-color: transparent;
}
.btn-outline-primary-brand:hover {
  background-color: var(--kn-green);
  color: #fff;
}

/* =====================================================
   하위 페이지 공통 (회사소개/제품소개 등)
   ===================================================== */

/* 페이지 상단 제목 띠 */
.page-header {
  background: linear-gradient(135deg, var(--kn-navy) 0%, #1f1e4f 100%);
  color: #fff;
  padding: 3rem 0;
  text-align: center;
}
.page-header h1 {
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.page-header .breadcrumb-line {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
}
.page-header .breadcrumb-line a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}
.page-header .breadcrumb-line a:hover {
  color: #fff;
}

/* 하위 페이지 안의 소제목 구역 */
.content-section {
  padding: 3.5rem 0;
}
.content-section + .content-section {
  border-top: 1px solid #eceae3;
}
.subsection-title {
  color: var(--kn-navy);
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-left: 0.75rem;
  border-left: 4px solid var(--kn-green);
}

/* =====================================================
   적용사례 페이지 — 사례 카드 그리드 + 상세 모달
   ===================================================== */

/* 사례 카드 */
.case-card {
  background: #fff;
  border: 1px solid #e5e3da;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.10);
  border-color: var(--kn-green);
}
.case-card:focus {
  outline: 3px solid var(--kn-green);
  outline-offset: 2px;
}
.case-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #f5f4ef;
  background-size: cover;
  background-position: center;
}
.case-card-body {
  padding: 1.25rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.case-card-tag {
  display: inline-block;
  background-color: rgba(106, 178, 60, 0.12);
  color: var(--kn-green-dark);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  align-self: flex-start;
}
.case-card-title {
  color: var(--kn-navy);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.case-card-summary {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 0;
  flex-grow: 1;
}
.case-card-more {
  margin-top: 0.85rem;
  color: var(--kn-green-dark);
  font-size: 0.85rem;
  font-weight: 600;
}
.case-card:hover .case-card-more::after {
  margin-left: 4px;
  content: "→";
  display: inline-block;
}

/* 사례 상세 모달 */
#caseDetailModal .modal-content { border-radius: 12px; overflow: hidden; }
#caseDetailModal .modal-header {
  background: linear-gradient(135deg, var(--kn-navy) 0%, #1f1e4f 100%);
  color: #fff;
  padding: 1.1rem 1.5rem;
  border-bottom: none;
}
#caseDetailModal .modal-title { color: #fff; font-weight: 700; }
#caseDetailModal .btn-close { filter: brightness(0) invert(1); opacity: 0.85; }
#caseDetailModal .modal-body { padding: 0; }

.case-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0.85rem 1.5rem;
  background-color: var(--kn-bg);
  border-bottom: 1px solid #eceae3;
}
.case-tag-pill {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.82rem;
  background-color: #fff;
  border: 1px solid #d9d6cc;
  border-radius: 14px;
  color: #555;
}
.case-tag-pill.green {
  background-color: var(--kn-green);
  border-color: var(--kn-green);
  color: #fff;
  font-weight: 600;
}

.case-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background-color: #fff;
  border-bottom: 1px solid #eceae3;
}
.case-stat-card {
  text-align: center;
  padding: 0.9rem 0.5rem;
  background-color: var(--kn-bg);
  border-radius: 8px;
}
.case-stat-number {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--kn-green-dark);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
.case-stat-label {
  font-size: 0.85rem;
  color: #555;
  margin: 0;
}

.case-section {
  padding: 1.5rem;
  border-top: 1px solid #eceae3;
}
.case-section:first-of-type { border-top: none; }
.case-section-title {
  color: var(--kn-navy);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  padding-left: 0.65rem;
  border-left: 4px solid var(--kn-green);
}
.case-section p { color: #555; line-height: 1.7; }
.case-section figure { margin: 1rem 0; }
.case-section figure img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: block;
}
.case-section figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #888;
  text-align: center;
}

.case-data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9rem;
  background-color: #fff;
  border: 1px solid #e5e3da;
  border-radius: 6px;
  overflow: hidden;
}
.case-data-table th, .case-data-table td {
  padding: 0.55rem 0.85rem;
  text-align: center;
  border-bottom: 1px solid #eceae3;
}
.case-data-table th {
  background-color: var(--kn-green-dark);
  color: #fff;
  font-weight: 600;
}
.case-data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.case-data-table tr:nth-child(even) td { background-color: #fafaf7; }
.case-data-table tr:last-child td { border-bottom: none; }

.case-video {
  position: relative;
  padding-top: 56.25%;
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  margin: 1rem 0;
}
.case-video video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}

.case-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}
.case-gallery img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.case-conclusion {
  background-color: #f3f7ee;
  border-left: 4px solid var(--kn-green);
  padding: 0.9rem 1.1rem;
  border-radius: 0 6px 6px 0;
  margin-top: 1rem;
  color: #2c4a1d;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* 홈 적용분야 3장 (농업·골프장·홈가드닝) - 동일 비율로 통일 */
.applied-area-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 6px;
}

/* 기술소개 본문 이미지 - 텍스트와 시각 균형 (높이 상한) */
.tech-section-img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 8px;
}

/* 적용사례 사진 갤러리 */
.case-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.case-photo:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  transform: translateY(-3px);
}

/* 연혁 타임라인 */
.history-list .history-year {
  padding: 1rem 0;
  border-bottom: 1px solid #eceae3;
}
.history-list .history-year:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.history-list .history-year:first-child {
  padding-top: 0;
}
.history-list .history-year p {
  color: #444;
  line-height: 1.6;
}
.history-list .history-year .text-secondary {
  display: inline-block;
  min-width: 1.8em;
  font-variant-numeric: tabular-nums;
}

/* 인증서(공시서) 썸네일 */
.cert-thumb {
  width: 100%;
  height: 260px;
  object-fit: contain;
  border: 1px solid #d9d6cc;
  border-radius: 6px;
  background-color: #fff;
  padding: 8px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.cert-thumb:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

/* =====================================================
   홈가드닝 — 상황별 추천 카드 + Plantlogue 블로그 카드
   ===================================================== */

/* 상황별 추천 제품 카드 — product-card 재사용하며 상황 라벨 표시 */
.scenario-tag {
  display: inline-block;
  background-color: var(--kn-bg);
  color: var(--kn-navy);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}

/* Plantlogue 블로그 글 카드 (썸네일 없이 텍스트 중심) */
.blog-post-card {
  display: block;
  border: 1px solid #e5e3da;
  border-radius: 8px;
  background-color: #fff;
  text-decoration: none;
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}
.blog-post-card:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
  transform: translateY(-4px);
  border-color: var(--kn-green);
}
.blog-post-card .blog-card-band {
  height: 8px;
  background: linear-gradient(90deg, var(--kn-green) 0%, var(--kn-green-dark) 100%);
}
.blog-post-card .blog-card-body {
  padding: 1.25rem;
}
.blog-post-card .blog-card-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--kn-green-dark);
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}
.blog-post-card .blog-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #222;
  line-height: 1.5;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-post-card .blog-card-more {
  font-size: 0.85rem;
  color: var(--kn-green-dark);
  font-weight: 500;
}

/* Plantlogue 최신 글 (RSS 자동) 카드 스타일 — 인기 글과 구분 */
.blog-post-card.is-latest .blog-card-band {
  background: linear-gradient(90deg, #e63946 0%, #c62631 100%);
  height: 6px;
}
.blog-post-card .blog-new-badge {
  display: inline-block;
  background-color: #e63946;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.05em;
  margin-right: 6px;
  vertical-align: 2px;
}
.blog-post-card .blog-card-date {
  font-size: 0.78rem;
  color: #999;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}
.latest-posts-intro {
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.latest-posts-intro .badge-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background-color: #e63946;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}

/* Plantlogue 브랜드 머리말 (감성 톤) */
.plantlogue-header {
  background: linear-gradient(135deg, #f4f9ee 0%, #ffffff 100%);
  border-left: 4px solid var(--kn-green);
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
}
.plantlogue-header .plantlogue-brand {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.5rem;
  color: var(--kn-navy);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.plantlogue-header .plantlogue-sub {
  color: #5a5a5a;
  font-size: 0.95rem;
  margin: 0;
}

/* =====================================================
   메인 페이지 — 영상(YouTube) 카드 + 판매처 카드
   ===================================================== */

/* 영상 카드 (클릭 시 모달 재생) */
.video-card {
  display: block;
  background-color: #fff;
  border: 1px solid #e5e3da;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  height: 100%;
}
.video-card:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  transform: translateY(-4px);
  border-color: var(--kn-green);
  color: inherit;
}
.video-thumb {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  background-size: cover;
  background-position: center;
  background-color: #000;
}
.video-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
  transition: background 0.2s ease;
}
.video-card:hover .video-thumb::before {
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.65) 100%);
}
.video-play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.92);
  color: #cc0000;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 2;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.video-card:hover .video-play-icon {
  transform: translate(-50%, -50%) scale(1.08);
  background-color: #fff;
}
.video-card-body {
  padding: 1rem 1.1rem 1.15rem;
}
.video-tag {
  display: inline-block;
  background-color: var(--kn-bg);
  color: var(--kn-navy);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
.video-title {
  font-size: 1rem;
  font-weight: 600;
  color: #222;
  margin: 0;
  line-height: 1.5;
}

/* 영상 모달 - iframe 박스 */
#videoModal .modal-body {
  background-color: #000;
}
#videoModal .modal-content {
  border: none;
  border-radius: 10px;
  overflow: hidden;
}
#videoModal .modal-header {
  border-bottom: 1px solid #2a2a2a;
  background-color: #1a1a1a;
  color: #fff;
}
#videoModal .modal-header .btn-close {
  filter: invert(1) opacity(0.85);
}

/* 판매처 카드 — 자재1번가 / 스마트한농부 / 케이엔텍 공식 */
.store-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #e5e3da;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.store-card:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  transform: translateY(-4px);
  border-color: var(--kn-green);
  color: inherit;
}
.store-card-header {
  padding: 1.5rem 1.5rem 1.35rem;
  background: linear-gradient(135deg, var(--kn-navy) 0%, #1f1e4f 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.store-card[data-store="jajae1"] .store-card-header {
  background: linear-gradient(135deg, #2E6B3E 0%, var(--kn-green-dark) 100%);
}
.store-card[data-store="smartfarmer"] .store-card-header {
  background: linear-gradient(135deg, #C68A2C 0%, #A06A1E 100%);
}
.store-logo-badge {
  flex-shrink: 0;
  width: 112px;
  height: 56px;
  background-color: #fff;
  border-radius: 10px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  background-repeat: no-repeat;
  overflow: hidden;
}
.store-logo-badge img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* 자재1번가·스마트한농부 로고는 A4 PNG의 좌상단에만 있어 background-image로 잘라서 표시 */
.store-card[data-store="jajae1"] .store-logo-badge,
.store-card[data-store="smartfarmer"] .store-logo-badge {
  padding: 0;
}
.store-card[data-store="jajae1"] .store-logo-badge img,
.store-card[data-store="smartfarmer"] .store-logo-badge img {
  display: none;
}
.store-card[data-store="jajae1"] .store-logo-badge {
  background-image: url('../images/stores/store-jajae1.png');
  background-size: 280px auto;
  background-position: 5px 10px;
}
.store-card[data-store="smartfarmer"] .store-logo-badge {
  background-image: url('../images/stores/store-smartfarmer.png');
  background-size: 300px auto;
  background-position: 6px 6px;
}
.store-name {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.store-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.store-products {
  font-size: 1rem;
  font-weight: 600;
  color: var(--kn-navy);
  margin: 0 0 0.35rem;
}
.store-detail {
  color: #6c6c6c;
  font-size: 0.88rem;
  margin: 0 0 1.1rem;
  flex-grow: 1;
}
.store-cta {
  display: inline-block;
  color: var(--kn-green-dark);
  font-weight: 600;
  font-size: 0.95rem;
  border-top: 1px dashed #e1ddd0;
  padding-top: 0.9rem;
}
.store-card:hover .store-cta {
  color: var(--kn-navy);
}