/* ============================================================
   [ rnd.css ] 연구개발(R&D) 전용 스타일
   ============================================================ */

/* ✨ 1. 첫 번째 인트로 구역 상단 여백을 다른 페이지(60px)와 완벽히 통일! */
.rnd-intro { padding: 60px 0 140px; text-align: center; }

/* (기존의 rnd-strategy 등의 CSS 코드들 유지...) */

/* 모바일 반응형 */
@media(max-width: 768px) {
    /* ✨ 모바일에서도 상단 여백을 50px로 통일! */
    .rnd-intro { padding: 50px 0 80px; }
}
/* ============================================================
   [ rnd.css ] 연구개발 (R&D Center) 전용 스타일
   (공통 타이틀 및 애니메이션은 layout.css에서 상속받음)
   ============================================================ */

/* ── 1. R&D 인트로 영역 (텍스트) ── */
.rnd-intro { 
  padding:  60px 0 80px; /* 전략 영역 전 시원한 여백 */
  text-align: center; 
}

/* ── 2. R&D STRATEGY (원형 다이어그램 영역) ── */
.rnd-strategy { 
  position: relative; /* ✨ 전체 배경을 깔기 위한 기준점 */
  z-index: 1;
  padding: 100px 0 120px; 
  text-align: center; 
}

/* ✨ CSS 마법: 콘텐츠는 1500px에 갇혀있지만, 배경색은 화면 전체(100vw)로 꽉 차게 확장! */
.rnd-strategy::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw; /* 브라우저 가로 100% 꽉 채움 */
  transform: translateX(-50%);
  background: #f4f5f5; /* 옅은 회색 배경 */
  z-index: -1; /* 내용들보다 뒤로 보내기 */
}

.strategy-header { margin-bottom: 100px; }

/* ✨ 타원형 & 가로선 래퍼 (최대 1500px 꽉 차게 와이드하게!) */
.strategy-circle-wrap {
  position: relative;
  width: 100%;
  max-width: 1500px; /* 1500px 기준에 완벽히 맞춤 */
  margin: 0 auto;
  padding: 100px 0; /* 타원이 통통해 보이도록 상하 여백 확보 */
}
/* 큰 타원형 테두리 */
.strategy-circle-wrap::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 1px solid #b5b9c5; 
  border-radius: 50%; /* 비율에 맞춰 타원형 생성 */
  z-index: 1;
}

/* 중심 가로선 */
.strategy-line {
  position: absolute;
  top: 50%; 
  left: 0; 
  right: 0; 
  height: 1px;
  background: #b5b9c5;
  z-index: 1;
}

/* 가로선 위 검은색 점 2개 (✨ 애니메이션 추가) */
.strategy-line .dot {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  background: #a2d28f; /* 점 색상 (조금 더 눈에 띄게 하려면 #a2d28f 도 좋습니다) */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  
  /* ✨ 6초 동안 일정한 속도로 무한 반복 이동 */
  animation: moveDotPC 6s linear infinite;
}

/* 두 점이 3초 간격으로 시간차를 두고 흘러가도록 설정 */
.strategy-line .dot-left { animation-delay: 0s; }
.strategy-line .dot-right { animation-delay: 3s; }

/* ✨ PC버전: 왼쪽 끝(0%)에서 오른쪽 끝(100%)으로 이동하는 키프레임 */
@keyframes moveDotPC {
  0%   { left: 0%; opacity: 0; }   /* 시작할 땐 투명하게 */
  5%   { opacity: 1; }             /* 스르륵 나타남 */
  95%  { opacity: 1; }             /* 끝까지 선명하게 유지 */
  100% { left: 100%; opacity: 0; } /* 끝에 닿으면 다시 투명하게 사라짐 */
}

/* 3개의 검은색 원형 아이템 배열 */
.strategy-grid { 
  position: relative;
  z-index: 2; /* 가로선 위로 올라오게 */
  display: flex; 
  justify-content: space-evenly; /* 1500px 안에서 3개가 균일하고 넓게 퍼짐 */
  align-items: center; 
}
.strategy-item { 
  width: 320px; /* 원 크기 듬직하게 키움 */
  height: 320px; 
  background: var(--c-darkgray); 
  border-radius: 50%; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.strategy-item:hover { transform: translateY(-15px); }

/* 원 안의 텍스트 스타일 */
.st-title { 
  font-family: var(--font-en), sans-serif; 
  font-size: 1.8rem; 
  font-weight: 400; 
  color: #a2d28f; 
  margin: 0 0 16px; 
  letter-spacing: 0;
}
.st-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #dddddd; 
  margin: 0;
  word-break: keep-all; overflow-wrap: break-word;
}


/* ── 3. 하단 다짐 메시지 ── */
.rnd-footer { text-align: center; padding: 100px 0 160px; }
.rnd-footer p { font-size: var(--fz-title); font-weight: 600; color: var(--c-darkgray); line-height: 1.4; letter-spacing: -0.02em; word-break: keep-all; overflow-wrap: break-word; margin: 0; }


/* ============================================================
   [ R&D 두 번째 메뉴 ] 제품 개발 라인업 전용 스타일
   ============================================================ */
.rnd-dev-intro { padding: 60px 0 80px; text-align: center; }
.rnd-dev-list { padding: 0 0 160px; }

.rnd-dev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px 30px; }
.rnd-dev-item { display: flex; flex-direction: column; }

.rnd-dev-item-header { margin-bottom: 16px; }
.rnd-dev-item-sub { display: block; font-size: 1.1rem; color: var(--c-gray); margin-bottom: 6px; font-weight: 400; }
.rnd-dev-item-title { font-family: var(--font-en), sans-serif; font-size: 2.2rem; font-weight: 500; color: var(--c-darkgray); margin: 0; line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; }

.rnd-dev-item-img { position: relative; width: 100%; aspect-ratio: 4 / 2; background: #f0f0f0; overflow: hidden; margin-bottom: 20px; }
.rnd-dev-item-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.rnd-dev-item:hover .rnd-dev-item-img img { transform: scale(1.05); }

.rnd-dev-badge { position: absolute; top: 15px; right: 15px; background: #000; color: #fff; padding: 5px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; z-index: 10; }

.rnd-dev-item-desc { font-size: 1rem; line-height: 1.6; color: #444; word-break: keep-all; overflow-wrap: break-word; margin: 0; }


/* ============================================================
   📱 모바일 및 태블릿 반응형 (R&D 공통)
   ============================================================ */
@media(max-width: 1024px) {
    /* 타원형 다이어그램 태블릿 (세로선으로 변경) */
  .strategy-circle-wrap { max-width: 100%; padding: 40px 0; }
  .strategy-circle-wrap::after { display: none; } 
  .strategy-line { top: 0; bottom: 0; left: 50%; right: auto; width: 1px; height: auto; transform: translateX(-50%); } 
  
  /* ✨ 모바일/태블릿버전: 세로로(top) 이동하는 애니메이션으로 교체 */
  .strategy-line .dot { 
    left: 50%; 
    animation: moveDotMO 6s linear infinite; 
  }
  .strategy-line .dot-left { animation-delay: 0s; }
  .strategy-line .dot-right { animation-delay: 3s; }

  /* 태블릿/모바일 카드 설정 유지 */
  .strategy-grid { flex-direction: column; gap: 40px; }
  .strategy-item { width: 280px; height: 280px; }
  
  /* 두 번째 메뉴 설정 유지 */
  .rnd-dev-grid { grid-template-columns: repeat(2, 1fr); gap: 60px 24px; }
  .rnd-dev-item-title { font-size: 2.4rem; }
}


@media(max-width: 768px) {
  /* ── 1. 첫 번째 메뉴 모바일 ── */
  .rnd-intro { padding: 0px 20px 60px !important; } 
  .rnd-strategy { padding: 60px 0 80px; margin-top: 0; } 
  .strategy-header { margin-bottom: 40px; }
  .strategy-item { width: 240px; height: 240px; padding: 20px; }
  .st-title { font-size: 1.4rem; margin-bottom: 12px; }
  .st-desc { font-size: 0.9rem; }

  .rnd-footer { padding: 40px 0 120px; }
  .rnd-footer p { font-size: 1.6rem; padding: 0 20px; }

  /* ── 2. 두 번째 메뉴 모바일 ── */
  .rnd-dev-intro { padding: 0 20px 60px !important; } 
  .rnd-dev-list { padding: 0 0 80px; }
  
  .rnd-dev-grid { grid-template-columns: 1fr; gap: 50px; }
  .rnd-dev-item-sub { font-size: 1.1rem; }
  .rnd-dev-item-title { font-size: clamp(2rem, 8vw, 2.6rem); word-break: keep-all; overflow-wrap: break-word; }
  
  .rnd-dev-item-img { aspect-ratio: 4 / 2; margin-bottom: 20px; }
  .rnd-dev-badge { top: 12px; right: 12px; padding: 5px 12px; font-size: 0.8rem; }
  .rnd-dev-item-desc { font-size: 1rem; }
}

/* ✨ 모바일버전 전용 키프레임 (위에서 아래로) */
@keyframes moveDotMO {
  0%   { top: 0%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ============================================================
   [ R&D 세 번째 메뉴 ] 특허증 및 상표등록 전용 스타일 & 확대 모달
   ============================================================ */

/* ── 1. 인트로 여백 ── */
.rnd-patent-intro { padding: 60px 0 80px; }
.rnd-patent-list { padding: 0 0 160px; }

/* ── 2. 특허증(2단) & 상표등록(3단) 그리드 ── */
.patent-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 0 60px; 
}
.trademark-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 0 60px; 
}

/* 개별 리스트 아이템 (가로 배치) */
.patent-item { 
  display: flex; 
  align-items: center; 
  padding: 40px 0; 
  border-bottom: 1px solid #eeeeee; 
}

/* 썸네일 이미지 영역 */
.patent-img { 
  position: relative; 
  flex: 0 0 180px; 
  aspect-ratio: 1 / 1.4; 
  border: 1px solid #ddd; 
  background: #fff; 
  overflow: hidden; 
  cursor: pointer; 
}
/* ✨ 3단 상표등록일 때는 공간이 좁으므로 썸네일 크기 살짝 축소 */
.trademark-grid .patent-img {
  flex: 0 0 180px;
}

.patent-img img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 0.4s ease; 
}
/* 돋보기 아이콘 오버레이 */
.zoom-icon { 
  position: absolute; 
  inset: 0; 
  background: rgba(0,0,0,0.5); 
  color: #fff; 
  font-size: 2rem; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  opacity: 0; 
  transition: opacity 0.3s ease; 
}
.patent-img:hover img { transform: scale(1.05); }
.patent-img:hover .zoom-icon { opacity: 1; }

/* 우측 텍스트 정보 */
.patent-info { 
  flex: 1; 
  padding-left: 30px; 
}
/* ✨ 3단 상표등록일 때는 좌측 패딩 축소 */
.trademark-grid .patent-info {
  padding-left: 20px;
}

.pt-no { 
  font-size: 1.15rem; 
  color: #111; 
  margin-bottom: 16px; 
}
.pt-no strong { 
  font-weight: 800; 
}
.pt-label { 
  font-size: 1rem; 
  color: #555; 
  margin-bottom: 4px; 
  font-weight: 500; 
}
.pt-title { 
  font-size: 1.1rem; 
  color: #333; 
  line-height: 1.5; 
  margin: 0; 
  word-break: keep-all; overflow-wrap: break-word; 
}

/* ── 3. 이미지 확대 모달 (Lightbox) ── */
.patent-modal { 
  position: fixed; 
  inset: 0; 
  z-index: 9999; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  opacity: 0; 
  visibility: hidden; 
  transition: all 0.3s ease; 
}
.patent-modal.active { 
  opacity: 1; 
  visibility: visible; 
}
.modal-bg { 
  position: absolute; 
  inset: 0; 
  background: rgba(0, 0, 0, 0.85); 
  backdrop-filter: blur(5px); 
}
.modal-content { 
  position: relative; 
  width: 90%; 
  max-width: 600px; 
  max-height: 90vh; 
  z-index: 2; 
  display: flex; 
  justify-content: center; 
}
.modal-content img { 
  max-width: 100%; 
  max-height: 90vh; 
  object-fit: contain; 
  box-shadow: 0 10px 40px rgba(0,0,0,0.5); 
}

/* 모달 닫기 버튼 */
.modal-close { 
  position: absolute; 
  top: -40px; 
  right: 0; 
  color: #fff; 
  font-size: 2rem; 
  cursor: pointer; 
  transition: transform 0.2s; 
}
.modal-close:hover { transform: rotate(90deg); }

/* 모달 좌우 화살표 */
.modal-nav { 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  color: #fff; 
  font-size: 3rem; 
  opacity: 0.6; 
  transition: opacity 0.2s, transform 0.2s; 
  padding: 20px; 
}
.modal-nav:hover { opacity: 1; }
.modal-nav.prev { left: -80px; }
.modal-nav.prev:hover { transform: translateY(-50%) translateX(-10px); }
.modal-nav.next { right: -80px; }
.modal-nav.next:hover { transform: translateY(-50%) translateX(10px); }

/* ✨ 모달 하단 텍스트 바 스타일 */
.modal-text-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.65); /* 반투명 검은색 배경 */
  color: #fff;
  padding: 24px 30px;
  z-index: 10;
  transform: translateY(100%); /* 처음엔 아래로 숨어있음 */
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.patent-modal.active .modal-text-bar {
  transform: translateY(0); /* 모달이 열리면 부드럽게 올라옴 */
}

.m-text-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}
.m-no {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}
.m-title {
  font-size: 1.1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  word-break: keep-all; overflow-wrap: break-word;
}




/* ============================================================
   📱 모바일 및 태블릿 반응형 (특허/상표증)
   ============================================================ */
@media(max-width: 1024px) {
  /* ✨ 태블릿에서 특허/상표 모두 2단으로 통일 */
  .patent-grid, .trademark-grid { grid-template-columns: repeat(2, 1fr); gap: 0 30px; }
  .patent-img, .trademark-grid .patent-img { flex: 0 0 140px; }
  .patent-info, .trademark-grid .patent-info { padding-left: 20px; }
}

@media(max-width: 768px) {
  .rnd-patent-intro { padding: 40 0 60px !important; } 
  .rnd-patent-list { padding: 0 0 80px; }
  
  /* ✨ 모바일은 무조건 1단 정렬 */
  .patent-grid, .trademark-grid { grid-template-columns: 1fr; gap: 0; }
  .patent-item { padding: 30px 0; }
  
  .patent-img, .trademark-grid .patent-img { flex: 0 0 180px; }
  .patent-info, .trademark-grid .patent-info { padding-left: 16px; }
  
  .pt-no { font-size: 1rem; margin-bottom: 12px; }
  .pt-label { font-size: 0.9rem; }
  .pt-title { font-size: 1rem; }

  /* 모바일 모달 화살표 위치 조절 (이미지 양옆 안쪽으로) */
  .modal-nav { font-size: 2rem; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 50%; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; }
  .modal-nav.prev { left: 10px; }
  .modal-nav.next { right: 10px; }
  .modal-close { top: -45px; right: 10px; }

    .modal-nav { font-size: 2rem; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 50%; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; }
  .modal-nav.prev { left: 10px; }
  .modal-nav.next { right: 10px; }
  .modal-close { top: -45px; right: 10px; }

  /* ✨ 모바일 모달 하단 텍스트 조절 */
  .modal-text-bar { padding: 16px 20px; }
  .m-no { font-size: 1.1rem; margin-bottom: 6px; }
  .m-title { font-size: 0.9rem; }
}