/* 기본 스타일 초기화 */
/** {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}*/

/* Header */
/*header {
  width: 100%;
  background-color: #2b2b2b; /!* 배경색 설정 *!/
  padding: 1rem 0; /!* 상하 여백 *!/
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}*/

/* Logo */
.logo-img {
  width: 3rem;
  height: 3rem;
}

/* Navigation Links */
.nav-links {
  display: flex;
  justify-content: center;
  gap: 2rem; /* 링크 간 간격 */
}
/*
.nav-link {
  text-decoration: none;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #e0e0e0;
}*/

/* Icons on the right */
.icons {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.icon-img {
  width: 1.5rem;
  height: 1.5rem;
}

/* 산업 카드 섹션 스타일 */
.industries-section {
  background-color: white;
  padding: 40px 0;
  margin-top: 80px; /* 헤더를 고려한 여백 추가 */
}

.industries-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.industry-card {
  width: 200px;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.default-icon,
.selected-icon,
.hand-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}

.selected-icon {
  display: none;
}

.hand-icon {
  display: none;
}

.industry-text {
  font-size: 14px;
  font-weight: bold;
}

/* .industry-card의 선택된 상태 */
.industry-card.selected .default-icon {
  display: none;
}

.industry-card.selected .selected-icon {
  display: block;
}

.industry-card.selected .hand-icon {
  display: block;
}

/* 산업 카드의 호버 스타일 */
.industry-card:hover {
  transform: scale(1.05);
  transition: all 0.3s ease-in-out;
}

/* 반응형: 모바일 화면에서의 레이아웃 */
@media (max-width: 768px) {
  .industries-container {
    flex-direction: column;
    align-items: center;
  }

  .industry-card {
    width: 100%;
    margin-bottom: 16px;
  }
}

/* 제품 정보 섹션 */
.product-section {
  padding: 40px 0;
  background-color: #e0f2f1;
}

.choose-product-text {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
}

/* 제품 큰 원과 인증 정보 */
.product-display-container {
  position: relative;
  margin-top: 48px;
  margin-bottom: 48px;
}

/* 큰 원 */
.big-circle {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid #16a34a;
}

.product-img {
  width: 100%;
  height: 100%;
}

/* 인증 항목 */
.cert-item {
  position: absolute;
  width: 100px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #000;
}

.cert1 {
  top: 10%;
  left: 10%;
}

.cert2 {
  top: 10%;
  right: 10%;
}

.cert3 {
  bottom: 10%;
  left: 10%;
}

.cert4 {
  bottom: 10%;
  right: 10%;
}

.cert-logo {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}

/* 하단 정보 박스 */
.info-box {
  margin-top: 64px;
}

.steps-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 32px;
}

.step {
  display: flex;
  align-items: flex-start;
}

.step-number {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.step-number h4 {
  font-size: 24px;
  font-weight: bold;
}

.vertical-line {
  width: 2px;
  height: 40px;
  background-color: #000;
  margin-left: 8px;
}

.step-content {
  flex: 1;
}

.standard-box {
  font-weight: bold;
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
  margin-bottom: 16px;
}

.cert-detail p {
  font-size: 14px;
  margin-bottom: 10px;
}

/* SVG 컨테이너 */
.svg-container {
  width: 100%;
  max-width: 525px;
  margin: -72px auto;
}

/* 나라 정보 박스 스타일 */
.country-info {
  position: absolute;
  background-color: white;
  color: black;
  padding: 16px;
  text-align: center;
}

/* 나라 정보 아이템 */
.country-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #38b2ac;
  color: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.country-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

/*.country-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 16px;
}*/

.country-flag {
  width: 40px;
  height: 40px;
}

/* 회사 이름 */
.company-name {
  font-weight: 600;
  font-size: 1.125rem;
}

/* 연락처 정보 항목 스타일 */
.contact-item {
  display: flex;
  align-items: center;
  background-color: #edf2f7;
  color: black;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.contact-icon {
  width: 24px;
  height: 24px;
  margin-right: 16px;
}

.company-email,
.company-phone,
.company-address {
  font-size: 1rem;
}

/* 나라 경계 스타일 - SVG 내 나라를 선택 시 색상 변경 */
.country {
  fill: #d1d5db; /* 밝은 회색 */
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.country:hover {
  fill: #fbbf24; /* 노란색 */
  transform: translateY(-5px);
}

.country.selected {
  fill: #ef4444; /* 빨간색 */
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.3);
}

#None {
  fill: #d1d5db;
  pointer-events: none;
}

.country-name {
  font-size: 6px; /* 글씨 크기를 16px로 설정 */
  fill: black; /* 텍스트 색상 */
  font-weight: bold; /* 폰트 두께 */
  text-anchor: middle; /* 텍스트 중앙 정렬 */
  pointer-events: none; /* 클릭 이벤트가 텍스트에 영향을 미치지 않도록 */
}


/* more country 돋보기 버튼 스타일 */
.magnifier-icon {
  position: absolute;
  top: 120px; /* 화면 상단에서 20px 떨어짐 */
  right: 95px; /* 오른쪽에 20px 여백 */
  background-color: white;
  border: none; /* 외각선 제거 */
  border-radius: 50%; /* 원형 버튼 */
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px; /* 아이콘 크기 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 약간의 그림자 효과 */
  transition: transform 0.2s ease; /* 클릭/호버 시 애니메이션 */
}

.magnifier-icon img {
  width: 30px; /* 이미지 크기 */
  height: 30px; /* 이미지 크기 */
}

/* 돋보기 버튼 호버 효과 */
.magnifier-icon:hover {
  transform: scale(1.1); /* 살짝 확대 */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* 더 강한 그림자 */
}

/* 확대 모달 스타일 */
.magnifier-modal {
  position: absolute; /* 부모 컨테이너를 기준으로 위치 설정 */
  top: 25%; /* 페이지 상단에서 50% */
  left: 56%; /* 페이지 좌측에서 50% */
  transform: translate(-50%, -50%); /* 중앙 정렬 */
  width: auto; /* 화면 전체 너비 */
  height: 90%; /* 화면 전체 높이 */
  /*display: flex;*/ /* 모달 내용을 중앙에 배치하기 위한 Flexbox */
  align-items: center; /* 세로 중앙 정렬 */
  justify-content: center; /* 가로 중앙 정렬 */
  z-index: 1000; /* 다른 요소 위에 표시 */
  float: right;
}

.magnifier-modal.hidden {
  display: none; /* 모달 숨기기 */
}

/* 모달 내부 컨텐츠 */
.magnifier-modal-content {
  background: white; /* 모달 컨텐츠 배경 */
  padding: 20px; /* 내부 여백 */
  border-radius: 10px; /* 모서리를 둥글게 */
  width: 178%; /* 너비 설정 */
  height: 70%; /* 내용에 맞게 높이 조정 */
  max-width: 600px; /* 최대 너비 제한 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
  position: relative; /* 닫기 버튼 등 내부 요소 위치 기준 */
  top: 0; /* 기본 값 */
  left: 0; /* 기본 값 */
  border: 4px solid #10914e;
}

.magnifier-modal-content svg {
  transform: scale(2) translateY(40px); /* 1.5배 확대 */
  transform-origin: center; /* 확대 중심을 SVG의 가운데로 설정 */
  width: 100%; /* 모달 크기 안에서 너비 유지 */
  height: auto; /* 비율에 맞게 높이 조정 */
}

/* 모달 닫기 버튼 */
.close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1100;
  background: transparent;
  border: none;
  font-size: 23px;
  cursor: pointer;
  color: #333; /* 어두운 색상 */
  transition: color 0.2s ease; /* 색상 변화 애니메이션 */
  font-weight: bold;
}

.close-modal:hover {
  color: #ff0000; /* 빨간색으로 변경 */
}

text.country {
  pointer-events: visiblePainted; /* 텍스트에 클릭 이벤트 활성화 */
  cursor: pointer; /* 클릭 가능한 커서 표시 */
}

.magnifier-modal-content .country-name {
  font-size: 0.8em;
  font-weight: bold;
}