/*
Theme Name: Iljin Theme
Author: Junhyuk
Version: 1.0
*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body.single-agri_product {
  background: white;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.page-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
header {
  padding: 20px 16px;
  text-align: center;
  background-color: #ffffff;
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 15px 16px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-right: 60px;
}

.logo-img {
  width: 120px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 20px;
}
.company-name {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 30px;
  color: rgb(20, 33, 129);
}
.company-subtext {
  margin-top: 5px;
  margin-bottom: 20px;
  font-size: 20px;
  color: rgb(4, 78, 16);
  margin-right: 30px;
}
.main-nav {
  width: 100%;
  border-top: 1px solid rgb(20, 33, 129);
  padding-top: 18px;
}
.main-nav-list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 100px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .main-nav-list {
    gap: 40px;
  }
}

.main-nav-list a {
  text-decoration: none;
  color: #111827;
  font-size: 23px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 10px;
  transition: background-color 0.5s ease;
}
.main-nav-list a:hover {
  background-color: #cdcdcd;
  color: rgb(20, 33, 129);
}

main {
  flex: 1;
  padding: 24px 16px 32px;
}
.content-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.main-slider {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 12px;
  background-color: black;
}
.slide {
  position: absolute;
  inset: 0;
  /* inset은 top, right, bottom, left모두 0을 넣은 것. */
  opacity: 0;
  transition: opacity 1s ease-in-out;
  /* opacity는 투명도 */
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide.active {
  opacity: 1;
}
.main-caption {
  position: absolute;
  left: 20px;
  bottom: 48px;
  color: rgb(255, 255, 255);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  font-size: 20px;
  font-weight: 600;
}

.cap-line {
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
}
.caption-animate .cap-line1 {
  animation: captionIn 1.5s ease-out forwards;
}
.caption-animate .cap-line2 {
  animation: captionIn 1.5s ease-out forwards;
  animation-delay: 1s;
}
@keyframes captionIn {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ✅ 메인 슬라이더 화살표 */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
  user-select: none;
  z-index: 5;
}

.slider-arrow.prev {
  left: 12px;
}
.slider-arrow.next {
  right: 12px;
}

.slider-arrow:hover {
  filter: brightness(0.95);
}

/* 모바일에서 버튼이 너무 커보이면 */
@media (max-width: 560px) {
  .slider-arrow {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}

.slider-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid #f9fafb;
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.slider-dot.active {
  background-color: #f9fafb;
}

.intro-section {
  border-radius: 10px;
  padding: 20px 18px;
  /* box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08); */
  line-height: 1.6;
  color: #1c3664;
  background-color: #fff;
}
.intro-section h2 {
  font-size: 30px;
  margin-bottom: 15px;
}
.intro-section p {
  font-size: 19px;
}

footer {
  background-color: #111827;
  color: #e5e7eb;
  padding: 16px 20px;
  font-size: 13px;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
}

.patent-section {
  border-radius: 10px;
  padding: 20px 18px;
  /* box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08); */
  color: #152a4d;
  background-color: #fff;
}
.patent-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 20px;
  margin-top: 10px;
}

.patent-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.patent-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  cursor: pointer;
}

/* ✅ 산업기계 갤러리 (3개 한줄) */
.machine-section {
  border-radius: 10px;
  padding: 20px 18px;
  /* box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08); */
  color: #152a4d;
  background-color: #fff;
}

.machine-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.machine-item {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  /* box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06); */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.machine-item:hover {
  transform: translateY(-2px);
  /* box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12); */
}

.machine-item img {
  width: 100%;
  aspect-ratio: 16 / 9; /* 임시 홈페이지처럼 가로형 사진 느낌 */
  object-fit: cover;
  display: block;
}

.machine-caption {
  padding: 12px 10px;
  text-align: center;
  background: #efefef; /* 임시 홈페이지 캡션 바 느낌 */
  font-size: 16px;
  font-weight: 600;
}

/* ✅ 농기계(제품컷 위주): 세로로 더 긴 카드 + 덜 잘리게 */
.machine-gallery--agri .machine-item img {
  aspect-ratio: 4 / 3; /* 16/9보다 세로가 늘어남(덜 납작) */
  object-fit: contain; /* ✅ 제품이 안 잘리게 */
  background: #ffffff; /* 투명 PNG/배경 제거된 이미지면 흰 배경 */
  padding: 2px; /* 가장자리 여백 */
}

/* ✅ 반응형: 태블릿 2개, 모바일 1개 */
@media (max-width: 900px) {
  .machine-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .machine-caption {
    font-size: 15px;
  }
}
@media (max-width: 560px) {
  .machine-gallery {
    grid-template-columns: 1fr;
  }
}

/* 반응형 처리 */
@media (max-width: 900px) {
  .header-inner {
    padding: 16px 12px 8px;
    gap: 10px;
  }

  .logo-img {
    width: 80px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 20px;
  }

  .company-name {
    font-size: 30px;
  }

  .main-caption {
    font-size: 16px;
    left: 12px;
    right: 12px;
    bottom: 40px;
  }

  main {
    padding: 16px 12px 24px;
  }

  .intro-section {
    border-radius: 10px;
    padding: 20px 18px;
    /* box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08); */
    font-size: 14px;
    line-height: 1.6;
    color: #21385e;
  }
  .intro-section h2 {
    font-size: 25px;
    margin-bottom: 13px;
  }
  .intro-section p {
    font-size: 17px;
  }

  .history-section h2 {
    font-size: 18px;
    margin-bottom: 8px;
  }
  .history-section p {
    font-size: 15px;
  }
  .history-section h3 {
    font-size: 15px;
  }
  .history-card h3 {
    font-size: 18px;
  }
  .history-card li {
    font-size: 15px;
  }
  .patent-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }
  .patent-card li {
    font-size: 15px;
  }

  footer {
    font-size: 12px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
  touch-action: pan-y pinch-zoom;
}
.lightbox.open {
  display: flex;
}
.lightbox-content {
  position: relative;
  max-width: min(1100px, 96vw);
  max-height: 90vh;
}
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  border-radius: 12px;
  background: #111;
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); */
}
/* ✅ 드래그 스와이프용 스테이지/트랙 */
.lightbox-stage {
  width: min(1100px, 96vw);
  height: 90vh;
  overflow: hidden;
  border-radius: 12px;
}

.lightbox-track {
  height: 100%;
  display: flex;
  transform: translateX(-100%); /* 가운데(현재) */
  will-change: transform;
}

/* 3장 모두 한 화면 너비씩 */
.lightbox-track .lightbox-img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y pinch-zoom;
}

.lightbox-close {
  position: fixed;
  top: 70px;
  right: 100px;
  width: 40px;
  height: 70px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  font-size: 22px;
  line-height: 1;
  z-index: 10000;
}
@media (max-width: 480px) {
  .lightbox-close {
    top: 50px;
    right: 20px;
  }
}
/* ✅ 라이트박스 버튼: 아이콘 + 문구(아래) */
.lightbox-close,
.lightbox-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 12px; /* 버튼 안쪽 여유 */
  width: auto; /* 기존 46px/40px 고정이면 글자 잘릴 수 있어서 */
  min-width: 54px; /* 동그랗게 유지하고 싶으면 최소 폭 */
}

.lb-icon {
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}

.lb-text {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  opacity: 0.9;
  white-space: nowrap;
}

/* ✅ 제품 상세 슬라이더(페이지 내부) */
.product-slider {
  position: relative;
  width: 100%;
  border-radius: 12px;
  background: white;
  overflow: hidden;
}

/* 스와이프 영역(회사소개 이미지 급 크기 느낌) */
.product-stage {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  touch-action: pan-y; /* 세로 스크롤은 허용, 가로 스와이프는 우리가 처리 */
  background: white;
}

/* 3장 트랙 */
.product-track {
  height: 100%;
  display: flex;
  transform: translateX(-100%);
  will-change: transform;
}

.product-img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
  padding: 12px;
  user-select: none;
  -webkit-user-drag: none;
}

/* ✅ 버튼 디자인: 라이트박스랑 같은 결(아이콘+문구) */
.product-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 12px;
  width: auto;
  min-width: 54px;

  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); */
  user-select: none;
  z-index: 5;
}

/* 닫기 버튼: 슬라이더 안 우상단 */

/* 좌/우 버튼: 슬라이더 가운데 */
.product-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 70px;
}

.product-nav.prev {
  left: 12px;
}
.product-nav.next {
  right: 12px;
}

/* ✅ 제품 상세 슬라이더 도트 */
.product-dots {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;
}

.product-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid #f9fafb;
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.product-dot.active {
  background-color: #f9fafb;
}

/* 모바일에서 글자 조금 줄이기 */
@media (max-width: 480px) {
  .product-nav.prev {
    left: 10px;
  }
  .product-nav.next {
    right: 10px;
  }
}

/* ✅ close 버튼은 아이콘이 너무 커 보이면 살짝 줄이기(선택) */
.lightbox-close .lb-icon {
  font-size: 22px;
}

/* ✅ 모바일에서는 글자 조금 더 작게 */
@media (max-width: 480px) {
  .lb-text {
    font-size: 11px;
  }
}

.lightbox-nav {
  position: fixed; /* ✅ 화면 기준 */
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 70px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.5);
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); */
  display: grid;
  place-items: center;
  user-select: none;
  z-index: 10001; /* ✅ 이미지 위로 */
}

.lightbox-nav.prev {
  left: 24px;
} /* ✅ 화면 왼쪽에 붙이기 */
.lightbox-nav.next {
  right: 24px;
} /* ✅ 화면 오른쪽에 붙이기 */

@media (max-width: 480px) {
  .lightbox-nav.prev {
    left: 12px;
  }
  .lightbox-nav.next {
    right: 12px;
  }
}

/* ===== 문의 페이지 ===== */
.contact-main .content-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 16px 50px;
}

.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  background: #fff;
  border-radius: 14px;
  padding: 34px;
  /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); */
}

.contact-right {
  font-size: 18px;
}

.contact-hello {
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 18px;
}

.contact-desc {
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 18px;
}

.contact-thanks {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 26px;
}

.contact-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 10px;
  font-size: 18px;
}

.mini-label {
  font-weight: 700;
  margin-bottom: 6px;
}

.mini-value {
  opacity: 0.85;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-field label {
  display: inline-block;
  font-weight: 700;
  margin-bottom: 8px;
}

.form-field .req {
  color: #d13b3b;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 1.5px solid #2f2e83;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 15px;
  outline: none;
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-submit {
  margin-top: 10px;
  width: 100%;
  font-size: 20px;
  border: 0;
  border-radius: 6px;
  padding: 12px 14px;
  font-weight: 800;
  cursor: pointer;
  background: #1b7a2e;
  color: #fff;
}

.contact-submit:hover {
  filter: brightness(0.95);
}

/* 모바일 */
@media (max-width: 860px) {
  .contact-wrap {
    grid-template-columns: 1fr;
    padding: 22px;
  }
  .contact-mini {
    grid-template-columns: 1fr;
  }
  .form-row.two {
    grid-template-columns: 1fr;
  }
}

/* ===== 전송 완료(Thanks) 페이지 ===== */
.thanks-main .content-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 16px 50px;
}

.thanks-card {
  background: #fff;
  border-radius: 14px;
  padding: 40px 34px;
  /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); */
  text-align: center;
}

.thanks-badge {
  width: 62px;
  height: 62px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  background: #1b7a2e;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
}

.thanks-title {
  font-size: 24px;
  margin-bottom: 12px;
}

.thanks-desc {
  font-size: 16px;
  line-height: 1.7;
  opacity: 0.9;
  margin-bottom: 22px;
}

.thanks-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.thanks-btn {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  text-decoration: none;
  font-weight: 800;
  color: #222;
  background: #fff;
}

.thanks-btn.primary {
  background: #1b7a2e;
  color: #fff;
  border: 0;
}

.thanks-btn:hover {
  filter: brightness(0.97);
}

.thanks-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 10px;
  text-align: left;
}

@media (max-width: 860px) {
  .thanks-card {
    padding: 28px 20px;
  }
  .thanks-mini {
    grid-template-columns: 1fr;
  }
}

/* ===== 상단 공지바 ===== */
.notice-bar {
  position: sticky; /* 스크롤 내려도 상단에 붙어있게 */
  top: 0;
  z-index: 10040;
  display: none; /* 기본 숨김 */
  background: #111827;
  color: #e5e7eb;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.notice-bar.show {
  display: block;
}

.notice-bar__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notice-bar__text {
  font-size: 14px;
  line-height: 1.4;
}

.notice-bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.notice-bar__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  user-select: none;
  white-space: nowrap;
}

.notice-bar__close {
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 800;
  background: #f3f4f6;
  color: #111827;
}

.notice-bar__close:hover {
  filter: brightness(0.95);
}

/* 모바일에서 줄바꿈/정렬 */
@media (max-width: 560px) {
  .notice-bar__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .notice-bar__actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* ✅ 농기계 상세페이지: 큰 대표 이미지(회사소개 이미지 급) */
.product-hero {
  width: 100%;
  aspect-ratio: 16 / 9; /* 회사소개 메인 이미지 느낌 */
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff;
}

.product-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 제품이 잘리지 않게 */
  display: block;
  padding: 12px; /* 가장자리 여백 */
}

/* ✅ 농기계 상세 hero: 모바일에서 더 크게(안 잘림 유지) */
@media (max-width: 560px) {
  .product-hero {
    aspect-ratio: 1 / 1; /* 16/9 → 4/3 (세로 높이 증가) */
  }

  .product-hero img {
    padding: 2px; /* 12px → 4px (실제 이미지 체감 크기 ↑) */
  }
}

/* 기본값(센터) + 변수 적용 */
.product-desc {
  color: var(--agri-color, #162c51);

  gap: 0;
}

.product-desc h2 {
  font-size: 30px;
  margin: 80px 0 40px;
}

.product-desc p {
  font-size: var(--agri-fs, 22px);
  line-height: 2; /* ✅ 기본보다 살짝 여유 */
}
.closing-desc p {
  text-align: center;
}

/* 정렬 옵션 */
.product-desc--left {
  align-items: flex-start;
  text-align: left;
}

.product-desc--center {
  align-items: center;
  text-align: center;
}

.product-desc--right {
  align-items: flex-end;
  text-align: right;
}

.product-desc .blink-rb {
  text-align: center;
  align-self: center;
  width: 100%;
  font-size: 26px;
  margin-top: 50px;
  margin-bottom: 50px;
}
.product-desc .desc-text {
  white-space: pre-wrap; /* ✅ 연속 줄바꿈/빈줄도 반영 */
}

@media (max-width: 560px) {
  .product-desc {
    gap: 15px;
  }
  .product-desc h2 {
    font-size: 25px;
  }
  .product-desc .blink-rb {
    font-size: 23px;
  }
}

/* 워드프레스용  */
.intro-split.is-reverse {
  direction: rtl;
}
.intro-split.is-reverse > * {
  direction: ltr;
}

/* 회사소개 좌우 분할 */
.intro-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: center;
}

.intro-image img {
  width: 100%;
  border-radius: 14px;
  object-fit: cover;
}

.intro-agriproduct-01 p {
  font-size: 20px;
}

/* 모바일 */
@media (max-width: 860px) {
  .intro-split {
    grid-template-columns: 1fr;
  }
}

.timeline-vertical {
  position: relative;
  margin-top: 30px;
  padding-left: 80px;
}

.timeline-line {
  position: absolute;
  left: 160px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #2f2e83;
}

.timeline-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  margin-bottom: 60px;
}

.timeline-year {
  text-align: right;
  font-weight: 700;
  color: #2f2e83;
  padding-right: 40px;
}

.timeline-content {
  padding-left: 40px;
}

.timeline-content p {
  margin-top: 4px;
  font-size: 15px;
  opacity: 0.85;
}

/* 모바일 */
@media (max-width: 860px) {
  .timeline-vertical {
    padding-left: 0;
  }

  .timeline-line {
    left: 50%;
  }

  .timeline-row {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .timeline-year {
    text-align: center;
    padding: 0;
    margin-bottom: 6px;
  }

  .timeline-content {
    padding: 0;
  }
}

/* ✅ 2열 레이아웃: 두 칸 높이 맞추기(스트레치) */
.company-mid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 18px;
  margin-top: 12px;
  align-items: stretch; /* ✅ 왼쪽/오른쪽 박스 높이 동일하게 */
}

/* 왼쪽 칸도 높이를 꽉 채우게 */
.company-mid-left {
  display: flex;
  height: 100%;
}

/* ✅ 왼쪽 카드: 내부를 위/아래로 벌리기 */
.mid-card {
  width: 100%;
  height: 100%; /* ✅ 오른쪽 박스 높이만큼 */
  display: flex; /* ✅ 내부 레이아웃 제어 */
  flex-direction: column;
  justify-content: space-between; /* ✅ 위(협력) / 아래(특허) 간격 자동으로 벌어짐 */
  gap: 48px;
  border-radius: 10px;
  padding: 20px 18px;
  /* box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08); */
  color: #19315b;
  background-color: #fff;
}

/* ✅ 모바일(1열)에서는 height가 auto라서 space-between이 의미가 줄어듦 → gap으로만 간다 */
@media (max-width: 860px) {
  .mid-card {
    height: auto;
    justify-content: flex-start;
    gap: 48px; /* 원하면 56px 같은 값으로 더 벌려도 됨 */
  }
}

/* 협력/특허 제목 간격이 너무 좁으면 이거 추가 */
.mid-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.mid-card li {
  font-size: 17px;
}

/* 오른쪽(연혁) 박스 */
.company-mid-right {
  border-radius: 10px;
  padding: 20px 18px;
  /* box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08); */
  color: #14284b;
}

.company-mid-right h2 {
  font-size: 20px;
  margin-bottom: 14px;
}

.t-year {
  font-weight: 800;
  color: #2f2e83;
  font-size: 18px;
}

.t-title {
  font-weight: 800;
  font-size: 16px;
}

.t-desc {
  font-size: 15px;
  opacity: 0.85;
}

/* ✅ 모바일: 1열로 쌓기 */
@media (max-width: 860px) {
  .company-mid {
    grid-template-columns: 1fr;
  }
}

/* ✅ 연혁: 중앙 세로줄 + 좌(년도) 우(내용) */
.timeline-center {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* 중앙 세로줄(박스 정중앙) */
.timeline-center::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 3px;
  transform: translateX(-50%);
  background: #2f2e83;
  border-radius: 999px;
}

/* 한 줄: 좌 / 중 / 우 */
.tc-item {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
}

/* 년도: 왼쪽 끝 */
.tc-left {
  text-align: left;
  font-weight: 900;
  font-size: 18px;
  color: #1c1b4c;
  padding-right: 12px;
}

/* 중앙선+점 영역 */
.tc-mid {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* 점 */
.tc-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #171641;
  display: inline-block;
}

/* 내용: 오른쪽 끝 */
.tc-right {
  text-align: right;
  padding-left: 12px;
}

.tc-title {
  font-weight: 900;
  font-size: 16px;
}

.tc-desc {
  margin-top: 4px;
  font-size: 15px;
  opacity: 0.85;
}

/* 모바일: 한줄로 쌓기(원하면) */
@media (max-width: 860px) {
  .timeline-center::before {
    left: 18px;
    transform: none;
  }
  .tc-item {
    grid-template-columns: 24px 1fr;
    gap: 12px;
  }
  .tc-left {
    grid-column: 2;
    text-align: left;
    padding: 0;
  }
  .tc-mid {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-content: flex-start;
  }
  .tc-right {
    grid-column: 2;
    text-align: left;
    padding: 0;
  }
}
/* ✅ 가로 강제(16:9) - 최종 통일본 기준 */
.product-video .video-frame--wide {
  aspect-ratio: 16 / 9;
  max-width: 1600px;
}

/* ✅ 농기계 상세페이지: 유튜브 영상(쇼츠) */
.product-video {
  margin-top: 12px;
  border-radius: 10px;
  padding: 18px 18px;
  /* box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08); */
  color: #162c51;
  background-color: #fff;
}

.product-video h3 {
  font-size: 25px;
  margin-bottom: 30px;
  text-align: center;
}
@media (max-width: 560px) {
  .product-video h3 {
    font-size: 23px;
  }
}

/* 기존(쇼츠용) 유지 */
.video-frame {
  width: 100%;
  max-width: 700px;
  aspect-ratio: 9 / 16;
  margin: 14px auto;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

/* ✅ 가로 영상용 */
.video-frame--wide {
  max-width: 900px;
  aspect-ratio: 16 / 9;
}

.video-frame {
  background: #fff; /* 검정 → 흰색 */
}

.video-frame video {
  object-fit: contain; /* 안 잘리게 */
  background: #fff; /* 남는 영역도 흰색 */
}

/* 모바일에서는 다시 꽉 차게 */
@media (max-width: 560px) {
  .video-frame--wide {
    max-width: 100%;
    aspect-ratio: 4 / 3; /* 모바일에서 체감 크기 ↑ */
  }
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.video-note {
  margin-top: 10px;
  font-size: 20px;
  opacity: 0.85;
  text-align: center;
}

.video-note a {
  color: rgb(20, 33, 129);
  font-weight: 700;
  text-decoration: none;
}

.video-note a:hover {
  text-decoration: underline;
}

/* ✅ 로고/회사명/서브텍스트 클릭하면 메인으로 */
.brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px; /* header-inner의 gap 느낌 유지 */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* 클릭/탭했을 때도 밑줄 안 생기게 */
.brand-link:visited {
  color: inherit;
}

/* 모바일 대응: 기존 header-inner 반응형 느낌 유지 */
@media (max-width: 900px) {
  .brand-link {
    gap: 10px;
  }
}

/* ✅ agriproduct-02 섹션만: 화면 줄여도 좌우 유지 + 이미지 작게 */
@media (max-width: 860px) {
  .intro-section.intro-split.intro-agriproduct-01 {
    grid-template-columns: 1fr 200px; /* ✅ 왼쪽 글 넓게, 오른쪽 사진 좁게 */
    gap: 16px;
    align-items: center;
  }

  .intro-section.intro-split.intro-agriproduct-01 .intro-image {
    justify-self: end; /* 오른쪽 끝으로 */
  }

  .intro-section.intro-split.intro-agriproduct-01 .intro-image img {
    width: 200px;
    max-height: 260px; /* ✅ 세로로 커지는 거 제한 */
    height: auto;
    object-fit: contain;
  }

  .intro-section.intro-split.intro-oduct-01 p {
    font-size: 16px; /* 모바일 글 크기 살짝 다운(선택) */
  }
}

/* ✅ 아주 작은 모바일에서는: 이미지 위 / 글 아래로 쌓기 */
@media (max-width: 750px) {
  /* agriproduct 섹션(두 군데 다 동일 클래스라 같이 적용됨) */
  .intro-section.intro-split.intro-agriproduct-01 {
    display: grid; /* grid 유지 */
    grid-template-columns: 1fr; /* 1열 */
    grid-template-areas:
      'image'
      'text'; /* ✅ 이미지 먼저 */
    gap: 14px;
    align-items: stretch;
  }

  .intro-section.intro-split.intro-agriproduct-01 .intro-image {
    grid-area: image;
    justify-self: stretch;
  }

  .intro-section.intro-split.intro-agriproduct-01 .intro-text {
    grid-area: text;
  }

  /* 이미지 크게 보이게 */
  .intro-section.intro-split.intro-agriproduct-01 .intro-image img {
    width: 100%;
    height: auto;
    max-height: 520px; /* 너무 길게 늘어나는 거 방지(원하면 조절) */
    object-fit: contain; /* ✅ 잘리지 않게 */
    border-radius: 12px;
  }
}

@media (max-width: 560px) {
  /* ✅ 글을 중앙 배치 */
  .intro-section.intro-split.intro-agriproduct-01 .intro-text {
    text-align: center; /* 글자 중앙 */
    margin: 0 auto; /* 블록 자체 중앙 */
    max-width: 520px; /* 너무 넓지 않게(원하면 조절/삭제) */
  }

  /* 체크리스트 줄바꿈/가독성 조금 보정(선택) */
  .intro-section.intro-split.intro-agriproduct-01 .intro-text p {
    margin: 0 auto;
  }
}
/* ✅ 제품 상세: 아래 썸네일(5장) */
.product-thumbs {
  margin-top: 12px;
}

.thumbs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.thumb-btn {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.thumb-btn:hover {
  transform: translateY(-2px);
}

.thumb-btn.active {
  border: 3px solid #23226e; /* 너 사이트 톤이랑 비슷 */
}

.thumb-btn img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

/* ✅ 맨 위로 버튼 (ID로 고정) */
#scrollTopBtn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  min-width: 54px;
  height: 70px;

  border: 0;
  border-radius: 999px;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 12px;

  background: rgba(255, 255, 255, 0.85);
  /* box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); */

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;

  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
  z-index: 10050;
}

#scrollTopBtn.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#scrollTopBtn:hover {
  filter: brightness(0.96);
}

@media (max-width: 480px) {
  #scrollTopBtn {
    right: 12px;
    bottom: 12px;
    height: 66px;
  }
}

/* ✅ 네브: 모바일에서도 한 줄 유지 */
@media (max-width: 700px) {
  .main-nav-list {
    flex-wrap: nowrap; /* ✅ 2줄 금지 */
    justify-content: center; /* ✅ 왼쪽부터 */
    gap: 15px; /* ✅ 간격 줄이기 */
    overflow-x: auto; /* ✅ 넘치면 가로 스크롤 */
    -webkit-overflow-scrolling: touch;
    padding: 0 10px 6px; /* 좌우 여백 + 아래 살짝 */
  }

  .main-nav-list a {
    white-space: nowrap; /* ✅ 글자 줄바꿈 금지 */
    font-size: 18px; /* ✅ 글씨 줄이기 */
    padding: 5px 8px; /* ✅ 버튼 패딩 줄이기 */
    border-radius: 8px;
  }

  /* (선택) 스크롤바 안 보이게 */
  .main-nav-list::-webkit-scrollbar {
    height: 0;
  }
}

/* ✅ 제품 상세 슬라이더: 모바일에서 더 크게 */
@media (max-width: 560px) {
  .product-stage {
    aspect-ratio: 4 / 3; /* 16/9보다 높이가 커짐 */
    /* 원하면 더 크게: aspect-ratio: 1 / 1; */
  }

  .product-img {
    padding: 6px; /* 12px → 6px (실제 이미지 체감 크기 커짐) */
  }

  /* 도트가 이미지랑 너무 겹치면 살짝 올리거나 내리기 */
  .product-dots {
    bottom: 14px;
  }
}

/* ✅ ACF 이미지블럭(단독 이미지): 커지는 거 제한 + 중앙 정렬 */
.agri-image-block {
  margin-top: 12px;
  border-radius: 10px;
  padding: 18px;
  /* box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08); */
  background: #fff;
  display: grid;
  justify-items: center; /* 가운데 정렬 */
  color: #162c51;
}

/* 이미지 자체는 "원본 비율 유지" + 과확대 방지 */
.agri-image-block img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 720px; /* ✅ 세로로 너무 커지는 거 방지 */
  object-fit: contain; /* ✅ 로고/제품 안 잘리게 */
  display: block;
}

/* ✅ 큰 버전: 오른쪽 스샷 정도만 크게(너무 과하지 않게) */
.agri-image-block--large img {
  max-width: 980px; /* 필요하면 680~860 사이로 조절 */
  max-height: 720px;
}

/* ✅ 작은 버전: 이것보다 좀 작게 */
.agri-image-block--small img {
  max-width: 720px; /* 필요하면 420~600 사이로 조절 */
  max-height: 520px;
}

.agri-image-caption {
  margin-top: 12px;
  text-align: center;
  font-size: 18px;
  opacity: 0.9;
}

/* 모바일: 화면 좁으면 자연스럽게 꽉 차게 */
@media (max-width: 560px) {
  .agri-image-block--large img,
  .agri-image-block--small img {
    max-width: 100%;
    max-height: 420px;
  }
}

/* =========================
  제품 상세 영상 프레임 (최종 통일본)
  - 기본: 유튜브 가로(16:9)
  - 쇼츠: 세로(9:16) + 높이 제한
  - 파일 video: 가로(16:9) 기본
========================= */

/* 공통 프레임 */
.product-video .video-frame {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 12px auto 0;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

/* 기본(가로 유튜브) */
.product-video .video-frame {
  aspect-ratio: 16 / 9;
}

/* 쇼츠(세로) */
.product-video .video-frame--shorts {
  max-width: 600px; /* ✅ 폭 더 줄이기 */
  aspect-ratio: 9 / 16;
  max-height: 82vh; /* ✅ 화면에서 너무 길어지지 않게 */
}

/* 파일 영상(video 태그) */
.product-video .video-frame--file {
  max-width: 1600px; /* 필요하면 유지 */
  /* aspect-ratio는 삭제! (기본 video-frame이 16:9라서 필요 없음) */
}
/* ✅ 파일 + 세로가 같이 붙으면 세로가 이긴다 */
.product-video .video-frame--file.video-frame--shorts {
  aspect-ratio: 9 / 16;
  max-width: 600px;
  max-height: 82vh;
}

/* iframe/video는 프레임 꽉 채우기 */
.product-video .video-frame iframe,
.product-video .video-frame video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.agri-image-caption {
  font-size: 20px;
}

.spec-table {
  width: 100%;
  max-width: 1600px;
  border-collapse: collapse;
  margin-top: 20px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  overflow: hidden;
}

.spec-table th,
.spec-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 18px;
}

.spec-table th {
  width: 40%;
  background: #f9fafb;
  font-weight: 700;
  text-align: left;
  color: #1c3664;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
  border-bottom: none;
}

/* =========================
  Promo Modal (1개 + 슬라이더)
========================= */
.promo-modal[aria-hidden='true'] {
  display: none;
}

.promo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.promo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.promo-modal__panel {
  position: relative;
  width: min(440px, calc(100% - 32px));
  margin: 0; /* ✅ layout에서 정렬 */
  background: #fff;
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

@media (max-width: 700px) {
  .promo-modal__panel {
    padding: 14px;
    max-height: none; /* ✅ layout에서 스크롤 처리 */
  }
}

/* ✅ 패널 단독 닫기용 */
.promo-modal__panel.is-closed {
  display: none;
}

/* =========================
  Promo Modal: 2패널 레이아웃
  - 데스크탑: 좌우(row)
  - 모바일: 위아래(column) (holiday가 위)
========================= */
.promo-modal__layout {
  position: relative;
  top: 90px;

  display: flex;
  justify-content: center; /* row일 때 가로 중앙 */
  align-items: flex-start; /* row일 때 위쪽 정렬 */

  gap: 16px;
  padding: 0 16px;

  /* ✅ 모바일에서 흔들림 방지용(안전) */
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .promo-modal__layout {
    top: 70px;
    flex-direction: column; /* ✅ 모바일 위아래 */
    gap: 12px;

    /* ✅ 핵심: column에서 가로 중앙은 align-items */
    align-items: center;

    /* ✅ 스크롤 생겨도 중앙 유지 */
    width: 100%;
    margin: 0 auto;

    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ✅ (선택) 카드/패널이 너무 넓어서 삐져나오면 중앙이 깨져 보일 수 있어서 제한 */
  .promo-modal__panel,
  .promo-card,
  .promo-slider {
    width: min(360px, 100%);
  }
}

.promo-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.promo-modal__title {
  font-size: 26px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 6px;
}

@media (max-width: 500px) {
  .promo-modal__title {
    font-size: 18px;
  }
}

.promo-modal__desc {
  margin: 0 0 12px;
  color: #444;
}

/* ✅ 문의 급증 중! 강조 */
.promo-modal__desc--blink {
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  margin: 6px 0 14px;
  animation: promoBlink 0.9s infinite;
}

/* ===== 카드(이미지) ===== */
.promo-card {
  display: block;
  text-decoration: none;
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  background: #fafafa;
}

.promo-card:hover {
  background: #f3f3f3;
}

.promo-card--image {
  padding: 0;
  overflow: hidden;
}

.promo-card__image {
  width: 100%;
  aspect-ratio: 16/9;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
}

.promo-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 4px;
}

.promo-card__content {
  padding: 14px 14px 16px;
}

.promo-card__badge {
  display: inline-block;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  margin-bottom: 8px;
}

.promo-card__name {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}

.promo-card__cta {
  font-size: 14px;
  color: #2a5bd7;
  font-weight: 700;
}

/* ===== 슬라이더 ===== */
.promo-slider {
  position: relative;
  margin: 6px 0 14px;
}

.promo-slider__stage {
  overflow: hidden;
  border-radius: 14px;
  touch-action: pan-y;
}

.promo-slider__track {
  display: flex;
  width: 100%;
  transform: translateX(0%);
  transition: transform 280ms ease;
  will-change: transform;
}

.promo-slider__slide {
  flex: 0 0 100%;
}

.promo-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.75);
  display: grid;
  place-items: center;
  user-select: none;
  z-index: 2;
}

.promo-slider__arrow.prev {
  left: 10px;
}
.promo-slider__arrow.next {
  right: 10px;
}

.promo-slider__dots {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.promo-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.promo-slider__dot.active {
  background: #111;
}

/* ===== 하단 ===== */
.promo-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.promo-modal__check {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: #333;
}

.promo-modal__btn {
  border: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #111;
  color: #fff;
  cursor: pointer;
}

/* ✅ 어디서든 빨강↔검정 깜빡 */
.blink-rb {
  animation: promoBlink 0.9s infinite;
  font-weight: 800;
}

/* 빨강 ↔ 검정 깜빡 */
@keyframes promoBlink {
  0% {
    color: #e11d48;
  }
  50% {
    color: #111;
  }
  100% {
    color: #e11d48;
  }
}

/* 표 value(td) 왼쪽 정렬 */
.spec-table td {
  text-align: left;
}

.product-title-top {
  position: relative;
  margin-top: 15px;
  margin-bottom: 25px;
  min-height: auto;
  overflow: visible;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.product-title-top h2 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;

  color: #0d1550; /* ✅ 로고 남색 계열 */
}

/* ✅ 농기계 상세 표: 모바일에서 왼쪽(th) 칸 넓히기 */
@media (max-width: 560px) {
  body.single-agri_product .spec-table {
    table-layout: fixed; /* 폭 계산 안정화 */
  }

  body.single-agri_product .spec-table th {
    width: 50%; /* ← 여기 숫자(38~45%)로 취향 조절 */
    white-space: normal;
    word-break: keep-all; /* 한글 글자 중간 쪼개짐 방지(띄어쓰기 기준 줄바꿈) */
    line-height: 1.25;
    padding: 12px 12px; /* 모바일에서 여백 살짝 줄여서 공간 확보 */
    font-size: 15px; /* 글씨도 살짝 줄이면 더 깔끔 */
  }

  body.single-agri_product .spec-table td {
    padding: 12px 12px;
    font-size: 16px;
  }
}

/* ✅ 모바일 네브 hover 사각형 잘림 방지 */
@media (max-width: 650px) {
  .main-nav-list {
    overflow-x: auto;
    overflow-y: visible; /* ✅ 세로로는 안 자르게 */
    padding: 3px 10px 10px; /* ✅ 위/아래 여유 조금 더 */
  }

  .main-nav-list a {
    display: inline-flex; /* ✅ 배경/라운드 안정적으로 */
    align-items: center;
    line-height: 1.2; /* ✅ 위아래 잘림 방지 */
  }
}

/* 유튜브/비디오 공통 */
.acf-youtube__wrap,
.acf-video__player {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

/* 유튜브 iframe 기본(가로) */
.acf-youtube__wrap {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}
.acf-youtube__wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ✅ 세로 영상(9:16) */
.acf-video-orientation--portrait .acf-youtube__wrap {
  max-width: 520px;
  padding-top: 177.78%; /* 9:16 */
}
/* 세로 프레임: 보더는 wrap에만 */
.acf-video-orientation--portrait .acf-video__wrap,
.acf-video-orientation--vertical .acf-video__wrap {
  max-width: 520px;
  aspect-ratio: 9 / 16;
  border-left: 10px solid #0d1550;
  border-right: 10px solid #0d1550;
  box-sizing: border-box;
  overflow: hidden;
}

/* 영상/포스터는 player가 꽉 채움 */
.acf-video-orientation--portrait .acf-video__player,
.acf-video-orientation--vertical .acf-video__player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 한번 재생되면 영구 제거 */
.acf-video-orientation--portrait .acf-video__wrap.is-played,
.acf-video-orientation--vertical .acf-video__wrap.is-played {
  border-left: 0 !important;
  border-right: 0 !important;
}

/* ✅ 가로 영상(16:9) */
.acf-video-orientation--landscape .acf-video__player {
  aspect-ratio: 16 / 9;
}

.acf-desc-box {
  margin-top: 50px;
  margin-bottom: 50px;
}
.acf-desc-box__text {
  line-height: 1.5;
}

.product-closing__text {
  margin-top: 30px;
  font-size: 25px;
  color: #0d1550;
  text-align: center;
}

/* ✅ ACF 파일영상(video 태그) 프레임: 꽉 채우기 + 검정 배경 */
.acf-video__wrap {
  width: 100%;
  max-width: 1300px; /* 너 content-inner가 1400이라 사실상 꽉 차 */
  margin: 0 auto;
  border-radius: 5px;
  overflow: hidden;
  background: #000; /* ✅ 재생 전/로딩 중에도 검정 */
  aspect-ratio: 16 / 9; /* 기본 가로 */
}

/* ✅ video는 반드시 block + 프레임을 꽉 채우게 */
.acf-video__player {
  display: block; /* ✅ 이게 오른쪽 공백(인라인 문제) 잡는 핵심 */
  width: 100%;
  height: 100%;
  background: #fff; /* ✅ poster가 없거나 로딩중에도 검정 */
  object-fit: contain; /* ✅ “꽉 채워” 원하면 cover / 안 잘리게면 contain */
}

/* ✅ 모든 ACF/본문 블록 타이틀: 이텔릭 */
.acf-block-title,
.acf-desc-box__title,
.acf-spec h2,
.product-video h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0d1550;
  margin-top: 20px;
  margin-bottom: 20px;
}
.acf-block-title {
  text-align: center;
  font-size: 28px;
}

/* ❌ 맨 위 제품명은 이텔릭 제외 */
.product-title-top h2 {
  font-style: normal;
}
@media (max-width: 560px) {
  .acf-desc-box {
    font-size: 20px;
  }
  .acf-block-title {
    font-size: 24px;
  }
  .acf-desc-box__title {
    font-size: 24px;
  }
  .product-closing__text {
    font-size: 20px;
  }
}
.acf-note {
  font-size: 23px;
  color: #0d1550;
  text-align: center;
}
.product-video .video-frame--vertical {
  max-width: 600px;
  aspect-ratio: 9 / 16;
  max-height: 82vh;
}
.acf-note a {
  color: rgb(20, 33, 129);
  font-weight: 700;
  text-decoration: none;
  margin-left: 8px;
}

.acf-note a:hover {
  text-decoration: underline;
}

/* =========================
  농기계(single-agri) 로컬 비디오: 세로 프레임 + 보더
   ========================= */

/* 세로(9:16) 프레임 */
.video-frame.video-frame--file.video-frame--shorts {
  max-width: 520px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  overflow: hidden;

  /* ✅ 산업기계처럼 보더 프레임 */
  border-left: 10px solid #0d1550;
  border-right: 10px solid #0d1550;
  background: #fff;
}

/* 포스터/영상 cover */
.video-frame.video-frame--file.video-frame--shorts > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #fff;
}
/* 재생 시작하면 보더 제거 */
.video-frame.is-playing {
  border-color: transparent !important;
}

/* =========================
  산업기계: 가로(16:9) 로컬 비디오 프레임 + 보더 + cover
   ========================= */

.acf-video-orientation--wide .acf-video__wrap {
  max-width: 1300px; /* 산업기계쪽은 기존 max-width 쓰던 값 있으면 그걸로 */
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;

  border: 10px solid #0d1550;
  background: #fff;
}

/* 영상 자체 cover */
.acf-video-orientation--wide .acf-video__player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #fff;
}

/* 재생중(is-playing)은 안 건드리고,
   한번이라도 재생되면(is-played) 보더 제거 */
.acf-video__wrap.is-played {
  border: 0 !important;
}

/* =========================
  농기계: 가로(16:9) 로컬 비디오 프레임 + 보더 + cover
   ========================= */

.video-frame.video-frame--file.video-frame--wide {
  max-width: 1100px; /* 농기계 기본 폭(원하는 값으로 조절 가능) */
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;

  border: 10px solid #0d1550;
  background: #fff;
}

/* 영상 자체 cover */
.video-frame.video-frame--file.video-frame--wide > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #fff;
}

/* 재생 시작 후 보더 제거(너가 쓰던 방식 유지) */
.video-frame.is-playing {
  border-color: transparent !important;
}

/* =========================
  FIX: ACF 로컬 비디오 poster/영상 cover 강제 (최종 승자)
========================= */

/* 세로/가로 선택된 경우에는 cover로 통일 */
.acf-video-orientation--portrait .acf-video__player,
.acf-video-orientation--vertical .acf-video__player,
.acf-video-orientation--wide .acf-video__player,
.acf-video-orientation--landscape .acf-video__player {
  object-fit: cover !important;
  object-position: center !important;
}

/* ACF 로컬 비디오 프레임 보더 강제 */
.acf-video__wrap {
  border-top: 10px solid #0d1550;
  border-bottom: 10px solid #0d1550;
  box-sizing: border-box;
}

/* 한번 재생되면 보더 제거(원하면 유지해도 됨) */
.acf-video__wrap.is-played {
  border: 0 !important;
}

/* 기본 indus 중앙 좌측정렬 설정 */
.acf-desc-box {
  margin-top: 50px;
  margin-bottom: 50px;
}

/* left/right는 그대로 */
.acf-desc-box--left {
  text-align: left;
}
.acf-desc-box--right {
  text-align: right;
}

/* ✅ 핵심: "센터 배치 + 내용은 왼쪽 줄맞춤" */
.acf-desc-box--center {
  text-align: center; /* 안쪽 inline-block을 가운데로 */
}

.acf-desc-box--center .acf-desc-box__text,
.acf-desc-box--center .acf-desc-box__title {
  display: inline-block; /* 내용 폭만큼 줄어들게 */
  text-align: left; /* 줄 시작점 왼쪽 정렬 */
  max-width: 100%; /* 모바일에서 삐져나오지 않게 */
}
/* ✅ 농기계 센터 옵션일 때, 문장만 왼쪽 줄맞춤 */
.product-desc--center .desc-text {
  display: inline-block;
  text-align: left;
  max-width: 100%;
}

/* =========================
  블록 하단 구분선 (공통)
========================= */
.acf-block {
  padding-bottom: 28px;
  margin-bottom: 28px;
}

.acf-block.has-divider {
  border-bottom: 1px solid #e5e7eb; /* 색 원하면 #0d1550 같은 톤으로 */
}

/* 마지막 블록은 구분선/간격 제거(선택) */
.acf-blocks .acf-block:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}