@charset "UTF-8";

/* 새로 추가한 컨테이너 */
.tab-menu-container {
  display: flex;
  justify-content: center;
  margin-top: 51px;
  /* 배경과 자연스럽게 연결되도록 위로 당김 */
  z-index: 10;
  position: relative;
}

/* 탭 메뉴 */
.tab-menu {
  /* background: rgba(255, 255, 255, 0.2); */
  /* 반투명 흰색 */
  /* backdrop-filter: blur(6px); */
  /* border-radius: 32px; */
  padding: 8px 16px;
  display: flex;
  gap: 56px;
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
  /* max-width: 960px; */
  /* width: fit-content; */
}

.tab-button {
  background: transparent;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 140%;
  letter-spacing: -0.025em;
  color: #000000;
}

.tab-button.active {
  /* background: #000; */
  color: var(--primary-color);
  border-bottom: 3px solid var(--primary-color);
  padding-bottom: 10px;
}

.solution-description {
  margin-top: 15px;
  font-size: 18px;
  opacity: 0.9;
}

.guide-section {
  padding: 50px 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.guide-list {
  list-style: disc;
  padding-left: 20px;
  background: #f5f0ff;
  padding: 20px;
  border-radius: 8px;
}

.upload-section {
  padding: 40px 20px;
  background: #f9f9f9;
  text-align: center;
}

.upload-tabs {
  margin-bottom: 20px;
}

.upload-tabs .tab {
  background: #eee;
  padding: 10px 20px;
  margin-right: 10px;
  border: none;
  cursor: pointer;
}

.upload-tabs .tab.active {
  background: #7f5af0;
  color: white;
}

.upload-box {
  border: 2px dashed #ccc;
  padding: 40px;
  border-radius: 10px;
  background: white;
  display: inline-block;
}

.upload-placeholder img {
  width: 50px;
  margin-bottom: 10px;
}

.result-section {
  padding: 50px 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.result-table {
  width: 100%;
  border-collapse: collapse;
}

.result-table th,
.result-table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

.status.success {
  color: green;
}

/*tab content*/
.tab-content {
  width: 100%;
  display: none;
}

.section-block {
  padding: 6rem max(40px, calc((100vw - 1440px) / 2));
}



.section-title {
  font-weight: 700;
  color: #000;
}

.section-sub-title {
  font-size: 1.4rem;
  margin-top: 2rem;
}

.section-sub-info {
  font-size: 1.3rem;
  color: #505050;
}

.image-box.image-2 img {
  width: 45%;
  /* 760 / 2, 두 개 나란히 */
  height: auto;
  /* 비율 유지 */
  max-width: 100%;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.image-box img.hover-img {
  width: 45%;
  /* 760 / 2, 두 개 나란히 */
  height: auto;
  /* 비율 유지 */
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.image-box img.hover-img:hover {
  /* transform: scale(1.03); */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

@media (max-width : 800px) {
  .image-box {
    flex-direction: column;
    gap: 30px;
  }

  .image-box img.hover-img {
    width: 90%;
  }
}

.section-description {
  padding: 1rem 3rem;
  font-weight: 500;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: -0.025em;
  color: #111111;
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

/* fade-in만 적용되는 경우: 천천히 부드럽게 나옴 */
.animate-on-scroll.fade-in {
  transition: opacity 2s ease-in;
  /* 더 천천히 페이드인 */
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.image-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 4rem auto;
  flex-wrap: wrap;
}

.certification-section {
  background-image: url('/images/promo/personal/demo-back.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.certification-content {
  display: flex;
  gap: 3rem;
  margin: 0 auto;
  /* flex-wrap: wrap; 반응형 대응 */
  flex-wrap: nowrap;
  align-items: center;
}

.certi-text {
  flex: 1 1 45%;
}

.certi-image {
  display: flex;
  padding: 1rem;
  flex: 1 1 45%;
  text-align: center;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
}

.certi-image img,
.certi-image video {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   특허/조달/GS 인증서 드래그 슬라이더
   ========================================================= */
.certi-image--slider {
  display: block !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
}

.certi-drag-slider {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
}

.certi-drag-slider::-webkit-scrollbar {
  display: none;
}

.certi-drag-slider.dragging {
  cursor: grabbing;
}

.certi-drag-track {
  display: flex;
  gap: 24px;
  padding: 16px 4px 24px;
  width: max-content;
}

.certi-card {
  flex: 0 0 auto;
  width: 280px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 5px 10px rgb(149 149 149 / 12%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.certi-image--slider .certi-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
}

.certi-card:hover {
  transform: translateY(-6px);
}

@media (max-width: 768px) {
  .certi-card {
    width: 220px;
  }
}

.certi-icon {
  margin-bottom: 1rem;
}

.certi-subtitle {
  font-size: 2rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

.certi-description {
  font-size: 1.2rem;
  line-height: 1.8;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.025em;
  color: #000;
}

.certi-title {
  font-weight: 700;
  font-size: 24px;
  line-height: 140%;
  /* identical to box height, or 34px */
  letter-spacing: -0.025em;
  color: #83D6FF;
}

.certi-image {
  /* 기존에 있던 padding: 1rem; 때문에 양옆 여백이 생기던 것을 제거 */
  padding: 0 !important;
  display: flex;
  flex: 1 1 45%;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

.certi-image img,
.certi-image video {
  width: 100% !important;
  /* 100%로 강제 지정하여 양옆 꽉 채움 */
  max-width: 100% !important;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  /* 부모 요소의 너비에 맞게 비율 유지하며 채움 */
}

/* 모바일/태블릿 반응형 */
@media screen and (max-width: 768px) {
  .enterprise-box h3 {
    font-size: 18px !important;
  }

  .enterprise-box li {
    font-size: 14px !important;
  }

  .certification-content {
    flex-direction: column;
    text-align: left;
    gap: 2rem !important;
    /* 텍스트와 영상 사이 간격 */
  }

  .certi-text,
  .certi-image {
    flex: 1 1 100%;
    width: 100% !important;
    /* 모바일에서 화면 너비 전체를 쓰도록 보장 */
  }
}

@media (max-width: 1280px) {
  .section-block {
    padding: 5rem 3rem;
  }
}



/* 반응형 대응 */
@media screen and (max-width: 768px) {
  .section-block {
    padding: 4rem 1rem;
  }

  .certification-content {
    flex-direction: column;
    text-align: left;
  }

  .certi-text,
  .certi-image {
    flex: 1 1 100%;
  }
}

.anim-effect-left,
.anim-effect-right {
  opacity: 0;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.anim-effect-left {
  transform: translateX(-100px);
}

.anim-effect-right {
  transform: translateX(100px);
}

.anim-effect-left.visible,
.anim-effect-right.visible {
  opacity: 1;
  transform: translateX(0);
  text-align: left;
}

.logo-marquee-container {
  max-width: 1520px;
  overflow: hidden;
  padding: 10px 0;
  box-sizing: border-box;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
}

.marquee-row {
  display: flex;
  gap: 20px;
  width: max-content;
  /* 이미지 크기 조절 */
}

.marquee-row img {
  height: auto;
  width: 160px;
}


/* 좌→우 흐름 애니메이션 */
@keyframes marquee-left-to-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* 우→좌 흐름 애니메이션 */
@keyframes marquee-right-to-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}


.left-to-right {
  animation: marquee-left-to-right 50s linear infinite;
  white-space: nowrap;
}

.right-to-left {
  animation: marquee-right-to-left 50s linear infinite;
  white-space: nowrap;
  margin-top: 40px;
}

.feature-section {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.feature-text {
  flex: 1;
}

.feature-text h2 {
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.025em;
  color: #111111;
}

.feature-text ul {
  list-style: disc;
  padding-left: 1.5rem;
  font-weight: 500;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: -0.025em;
  color: #505050;
}

.feature-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-image img,
.feature-image video {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
}

/* 반응형 처리 */
@media (max-width : 992px) {

  .feature-row {
    flex-direction: column;
    text-align: start;
    align-items: baseline;
  }

  .feature-text {
    text-align: left;
  }

  .feature-text ul {
    padding-left: 0;
    margin-left: 18px;
  }
}

/* your-custom-styles.css 또는 <style> 태그 안에 추가 */
.horizontal-scroll-section .owl-stage-outer {
  overflow: visible;
  /* 양옆 아이템이 보이도록 오버플로우 설정 */
}

/* Owl Carousel 아이템의 기본 스케일 설정 */
.horizontal-scroll-section .owl-item {
  transition: transform 0.4s ease-in-out;
  /* 부드러운 스케일 전환 효과 */
  transform: scale(0.8);
  /* 기본적으로 작게 보이도록 설정 */
  opacity: 0.7;
  /* 양옆 아이템의 투명도 조절 */
}

.owl-item .item * {
  text-align: center;
}

.owl-item .gradient-title {
  font-size: 1.5rem;
}

.owl-item .section-subtitle {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* 현재 활성화된 중앙 아이템을 원래 크기로 표시 */
.horizontal-scroll-section .owl-item.active.center {
  transform: scale(1);
  opacity: 1;
}

/* 네비게이션 버튼 (좌우 화살표) 스타일링 */
.horizontal-scroll-section .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 2em;
  padding: 10px 15px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}

.horizontal-scroll-section .owl-nav .owl-prev {
  left: -50px;
  /* 적절히 조절 */
}

.horizontal-scroll-section .owl-nav .owl-next {
  right: -50px;
  /* 적절히 조절 */
}

.horizontal-scroll-section .owl-nav button:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* 페이지네이션 (점) 스타일링 */
.horizontal-scroll-section .owl-dots {
  text-align: center;
  margin-top: 20px;
}

.horizontal-scroll-section .owl-dots .owl-dot span {
  background: #ccc;
  width: 12px;
  height: 12px;
  margin: 5px;
  border-radius: 50%;
  display: inline-block;
  transition: background 0.3s ease;
}

.horizontal-scroll-section .owl-dots .owl-dot.active span {
  background: #555;
  /* 활성화된 점 색상 */
}

/* 비디오 컨테이너 비율 유지 (기존 HTML에 inline style로 되어있으나 CSS로 분리 가능) */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 40.25%;
  height: 0;
  overflow: hidden;
  max-width: 1092px;
  max-height: 615px;
  min-height: 270px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.demo-section {
  padding: 5rem 0rem 10rem 0rem;
}

.horizontal-scroll-section .owl-item.active.center {
  transform: scale(1.2) !important;
  /* !important 추가 */
  opacity: 1 !important;
  /* !important 추가 */
}



.slide-container {
  width: 400%;
  /* 4개 슬라이드니까 100% * 4 */
  display: flex;
  transition: none;
  /* JS에서 animate 처리하므로 여기선 제거 */

  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

}

.slide-left {
  width: 50%;
}


.slide-right {
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-right img,
.slide-right video {
  width: 100%;
  border-radius: 16px;
}



.slide.active {
  opacity: 1;
  z-index: 1;
  position: relative;
}


.title-sub {
  font-size: 1rem;
  margin-bottom: 8px;
  font-weight: bold;
  opacity: 0.9;
  color: var(--primary-color);
}

.title-main {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: #111111;
  word-break: keep-all;

}

.function_main {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  color: #ffffff;
  word-break: keep-all;
}

.function-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 16px;
}

.function-list li {

  font-size: 14px;
  line-height: 160%;
  letter-spacing: -0.025em;
  color: #ffffff;
  padding-left: 1em;

}

.function-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ffffff;
}


.slide-right {
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-right img,
.slide-right video {
  width: 100%;
  border-radius: 16px;
}



.enterprise-box {
  background-color: #ffffff !important;
  /* 레퍼런스처럼 깨끗한 흰색 배경 */
  border: 1px solid #D6E4FF !important;
  /* 연한 파란색 테두리 */
  border-radius: 16px !important;
  /* 카드 전체 둥글기 */
  padding: 24px !important;
  /* 카드의 상하좌우 균일한 여백 */
  height: 100%;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.03) !important;
  /* 아주 은은한 그림자 */
  display: flex;
  flex-direction: column;
}

.enterprise-box img {
  width: 100% !important;
  border-radius: 8px !important;
  /* 이미지 모서리 살짝 둥글게 */
  margin-bottom: 24px !important;
  /* 이미지와 텍스트 사이의 정확한 간격 */
  object-fit: cover;
}

/* 내부 태그의 불필요한 기본 여백 강제 제거 */
.enterprise-box .padding-horizontal-8 {
  flex: 1;
}

.enterprise-box h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin-bottom: 16px !important;
  /* 타이틀과 리스트 사이 간격 */
  line-height: 1.4 !important;
  word-break: keep-all;
}

.enterprise-box ul {
  padding-left: 20px !important;
  /* 불릿 기호 위치 정렬 */
  margin-bottom: 0 !important;
}

.enterprise-box li,
.enterprise-box .text-secondary {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #505050 !important;
  line-height: 1.6 !important;
  word-break: keep-all;
}

.enterprise-box li:last-child {
  margin-bottom: 0 !important;
}

@media(max-width:768px) {

  /* 특허 등록 및 GS인증으로 검증된 품질 반응형 개선 (image_1.png 참조) */
  .certification-content {
    flex-direction: column;
    text-align: left;
    /* 텍스트 정렬 유지 */
  }

  .certi-text,
  .certi-image {
    flex: 1 1 100%;
    width: 100%;
    /* 너비 100% 명시 */
  }

  .certi-text {
    padding: 1rem;
    /* 패딩 추가 */
  }

  .certi-image {
    margin-top: 2rem;
    /* 상단 여백 추가 */
    padding: 0;
    /* 패딩 제거 */
  }

  .certi-image img,
  .certi-image video {
    width: 100%;
    /* 너비 100% 명시 */
  }

  /* 솔루션 특징 및 강점 카드 모바일 개선 */
  .enterprise-box h3 {
    font-size: 20px;
    /* 모바일 글꼴 크기 조정 */
  }

  .enterprise-box li,
  .text-secondary {
    font-size: 16px;
    /* 모바일 글꼴 크기 조정 */
    line-height: 150%;
  }
}

.scrollable-panel {
  max-height: 720px;
  overflow-y: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.scrollable-panel::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.icp-img {
  width: 100px;
  height: auto;
  flex-shrink: 0;
}

.icp-item ul {
  padding-left: 1rem;
  list-style-type: disc;
}

.integrated-control-panel-section {
  background-color: var(--primary-color);
  color: white;
  overflow-x: hidden;
}


.icp-img {
  width: 100px;
  height: auto;
  flex-shrink: 0;
}

.icp-item ul {
  padding-left: 1rem;
  list-style-type: disc;
}

.icp-subtitle {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
}

.icp-title {
  font-weight: 700;
  font-size: 38px;
  line-height: 140%;
  /* or 53px */
  letter-spacing: -0.025em;
}

.icp-description {
  font-weight: 500;
  font-size: 20px;
  line-height: 140%;
  /* or 28px */
  letter-spacing: -0.025em;
  margin-top: 1rem;

}

.icp-item {
  background-color: white;
  color: black;
  display: flex;
  align-content: center;
  gap: 20px;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 20px;
  min-height: 150px;
}


.icp-item:last-child {
  margin-bottom: 0px;
}

.icp-item img {
  width: 30%;
}

.icp-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.icp-card-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 140%;
  /* identical to box height, or 28px */
  letter-spacing: -0.025em;
  color: var(--primary-color);
}

.icp-list {
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  /* or 25px */
  letter-spacing: -0.025em;
  color: #505050;
}

.icp-frame {
  margin-top: 10rem;
}

/* usecases*/
/* 전체 영역 */
.use-cases-section {
  background-image: url('/images/promo/personal/areas_bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: auto;
  /* padding: 4rem 2rem; */
  box-sizing: border-box;
  overflow: hidden;
}

/* 헤더 */
.use-cases-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 2rem;
  flex-wrap: wrap;
  padding-right: 150px;
}

/* 제목 */
.use-cases-title-wrapper {
  flex: 1 1 60%;
  min-width: 280px;
}



.use-cases-inquiry-btn {
  border: 1px solid white;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px 0 22px;
  gap: 10px;
  margin: 0 auto;
  height: 56px;
  background: var(--primary-color);
  backdrop-filter: blur(5px);
  /* Note: backdrop-filter has minimal browser support */
  border-radius: 50px;
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 140%;
  letter-spacing: -0.025em;
  color: #FFFFFF;
}

/* 카드 영역: 2행 구조로 수평 스크롤 */
/* 드래그 지원 및 기본 스크롤 설정 */
.use-cases-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1rem;
  cursor: grab;
  height: 430px;
  scroll-behavior: smooth;
  padding-bottom: 20px;
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: var(--primary-color) #eaf3ff;
  /* Firefox */
}





@media(max-width:780px) {
  .use-cases-grid {
    grid-template-rows: repeat(20, auto);
  }

  .slide-wrapper {
    padding: 24px;
  }

  .function-list li {
    font-size: 16px;
  }


}


/* Webkit 브라우저용 */
.use-cases-grid::-webkit-scrollbar {
  height: 10px;
}

.use-cases-grid::-webkit-scrollbar-track {
  background: white;
  border-radius: 5px;
}

.use-cases-grid::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 5px;
}

/* 스크롤바 숨김 */
.use-cases-grid::-webkit-scrollbar {
  display: none;
}

.use-cases-grid {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 마우스 드래그 지원 */
.draggable-scroll {
  overflow: auto;
  scroll-behavior: smooth;
  user-select: none;
}

/* 카드 */
.use-case-card {
  padding: 1rem;
  max-width: 100%;
  min-width: 460px;
  height: auto;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.case-title {
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: clamp(14px, 1.333vw, 16px);
}

.case-subtitle {
  margin-bottom: 0.3rem;
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 140%;
  letter-spacing: -0.025em;
  color: #111111;
}

.case-info {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  font-size: clamp(12px, 1.167vw, 14px);
  line-height: 140%;
  /* identical to box height, or 28px */
  letter-spacing: -0.025em;
  color: #505050;
}

/* 기본: 현재 데스크톱/태블릿 동작은 유지 (수정 없음) */

@media (max-width:1280px) {

  .use-case-card {
    min-width: 320px;
    padding: 1rem;
  }

  .use-cases-section {
    height: auto;
  }

  .use-cases-header {
    padding-right: 3rem;
  }

  .use-cases-section {
    height: auto;
  }


}

/* 모바일: 768px 이하에서는 1열 N행로 세로 배치 */
@media (max-width: 768px) {
  .use-cases-grid {
    display: grid;
    /* 실제로 1열 그리드가 적용되도록 */
    grid-template-columns: 1fr;
    /* 1열 */
    gap: 16px;
    /* 모바일 표준 간격 16px로 통일 */
    overflow-x: hidden;
    /* 가로 스크롤 방지 */
    -ms-overflow-style: auto;
    scrollbar-width: auto;
    padding: 5px;
  }

  .draggable-scroll {
    /* 모바일에서는 드래그 스크롤 불필요하므로 가로 스크롤 해제 */
    overflow-x: hidden;
    overflow-y: visible;
    user-select: auto;
    scroll-behavior: auto;
  }

  .use-case-card {
    min-width: 0px;
    /* 데스크톱에서 쓰던 560px 최소폭 해제 */
    width: 100%;
    /* 뷰포트 너비에 맞게 꽉 차게 */
  }


}


.solution-video-container {
  display: flex;
  align-items: center;
}

.video-title-wrapper {
  width: 40%;

}


.intro-item {
  width: 50%;
}

.intro-item img,
.intro-item video {
  width: 100%;
  border-radius: 20px;
}






/* 전역 스크롤바 모던화 (데모 영역 내부만 적용되도록 안전하게 스코핑) */
.demo-wrap ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.demo-wrap ::-webkit-scrollbar-track {
  background: transparent;
}

.demo-wrap ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.demo-wrap ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 1. 전체 랩 및 패널 레이아웃 */
.demo-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: 60px auto 1fr;
  grid-template-areas:
    "nav    nav"
    "center left"
    "center right";
  height: 100vh;
  min-height: 0;
  background: #050a14;
  gap: 16px;
  /* 콘텐츠 최대 1440px(메인/솔루션 기준), 좌우 여백 40px — 배경은 풀와이드 유지 */
  padding: 16px max(40px, calc((100% - 1440px) / 2)) 24px;
  font-size: 13px;
  color: #c8d4e8;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: hidden;
}


/* 2. 네비게이션 영역 */
.nav {
  grid-area: nav;
  background: transparent;
  display: flex;
  align-items: center;
  padding: 0;
  gap: 32px;
  border: none;
}

.nav-logo {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
}

.nav-logo span {
  color: var(--primary-color);
}

.nav-links {
  display: flex;
  gap: 24px;
  flex: 1;
}

.nav-link {
  font-size: 13px;
  color: #8fa3c0;
  cursor: pointer;
  transition: color 0.2s;
}

.nav-link:hover {
  color: #fff;
}

.nav-btn {
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
  transition: background 0.2s;
}

.nav-btn:hover {
  background: #1f5acc;
}

/* 3. 패널 공통 스타일 (떠 있는 카드 UI) */
.left-panel,
.center-panel,
.right-panel {
  background: #0f192c;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ================== 좌측 패널 ================== */
.left-panel {
  grid-area: left;
  gap: 12px;
  align-self: start;
}

/* 업로드 탭일 때 비어있는 라벨이 하단 여백을 만들지 않도록 제거 */
#left-label:empty {
  display: none;
}

/* 좌측 패널용 탭 바 스타일 */
.tab-bar-left {
  display: flex;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 4px;
  width: 100%;
  margin-bottom: 0;
  box-sizing: border-box;
}

/* 좌측 탭 내의 버튼 텍스트 크기 미세 조정 (공간 확보) */
.tab-bar-left .tab {
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 8px !important;
}

.section-label,
.filter-label {

  font-size: 13px;
  color: #8fa3c0;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.sample-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

#sample-live.sample-grid {
  grid-template-columns: 1fr;
}

.sample-item {
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
  overflow: hidden;
  position: relative;
  background: #142138;
}

.sample-item:hover,
.sample-item.active {
  background: #1a2a46;
  border-color: var(--primary-color);
}

.sample-img-slot {
  width: 100%;
  aspect-ratio: 16/9;
  background: #09101d;
  position: relative;
  overflow: hidden;
}

.sample-img-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sample-label {
  font-size: 13px;
  color: #8fa3c0;
  text-align: center;
  padding: 10px 0;
  font-weight: 500;
  background: transparent;
  transition: color 0.2s;
}

.sample-item.active .sample-label {
  color: var(--primary-color);
  font-weight: 600;
}

.sample-play {
  width: 32px;
  height: 32px;
  background: rgba(10, 20, 40, 0.8);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-tri {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--primary-color);
  margin-left: 2px;
}

.sample-url-item {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sample-url {
  font-size: 13px;
  color: #c8d4e8;
  word-break: break-all;
}

/* 프리미엄 카드 */
.premium-card {
  margin-top: auto;
  padding-top: 16px;
}

.premium-card-inner {
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(145deg, rgba(42, 109, 232, 0.1), rgba(11, 21, 38, 0.5));
  border: 1px solid rgba(42, 109, 232, 0.2);
}

.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--primary-color);
  border-radius: 6px;
  padding: 4px 10px;
  margin-bottom: 12px;
}

.premium-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}

.premium-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.premium-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #c8d4e8;
}

.premium-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(42, 109, 232, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.premium-check svg {
  width: 10px;
  height: 10px;
  stroke: var(--primary-color);
}

.premium-cta {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: var(--primary-color);
  color: #fff;
  transition: all 0.2s;
}

.premium-cta:hover {
  background: #1f5acc;
  transform: translateY(-1px);
}


/* ================== 중앙 패널 ================== */
.center-panel {
  grid-area: center;
  gap: 16px;
  overflow-y: auto;
}

.tab-bar-center {
  display: flex;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50px;
  padding: 4px;
  gap: 0;
  max-width: 320px;
  margin: 0 auto 16px auto;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #8fa3c0;
  transition: all 0.2s;
  white-space: nowrap;
}

.tab.active {
  background: var(--primary-color);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(42, 109, 232, 0.3);
}

.tab:hover:not(.active) {
  color: #fff;
}

#view-upload,
#view-live {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
}

#view-live {
  display: none;
}

#view-live.visible {
  display: flex;
}

.upload-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-zone:hover {
  transform: translateY(-2px);
}

.cloud-icon,
.stream-icon {
  width: 120px;
  margin-bottom: 16px;
}

.cloud-icon img,
.stream-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.upload-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.upload-sub {
  font-size: 16px;
  color: #8fa3c0;
  margin-bottom: 8px;
}

.upload-info {
  font-size: 14px;
  color: #5a7a9e;
}

#preview-area {
  flex: 1;
  min-height: 320px;
  border-radius: 16px;
  background: #09101d;
  border: 1px solid rgba(255, 255, 255, 0.04);
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.stream-screen {
  flex: 1;
  min-height: 320px;
  border-radius: 16px;
  background: #09101d;
  border: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.stream-screen.playing {
  border-color: var(--primary-color);
}

.stream-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.stream-playing-wrap {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: #040810;
  position: relative;
}

.stream-playing-wrap.visible {
  display: flex;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-color) 50%, transparent);
  animation: scan 2.5s linear infinite;
}

.live-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: blink 1s infinite;
}

.fps-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
}

.face-box-stream {
  position: absolute;
  border: 2px solid var(--primary-color);
  border-radius: 4px;
}

.face-box-stream::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(42, 109, 232, 0.2);
  backdrop-filter: blur(8px);
}

.face-cnt {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 6px;
}

/* 실시간 지연 시간 뱃지 스타일 추가 */
.latency-badge {
  position: absolute;
  top: 16px;
  right: 80px;
  /* FPS 뱃지 좌측에 위치하도록 간격 조정 */
  background: rgba(42, 109, 232, 0.8);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}

.stream-input-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #142138;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 16px;
  border-radius: 50px;
}

.stream-input-bar:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(42, 109, 232, 0.1);
}

.stream-input-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 14px;
}

.stream-submit {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}

.stream-submit.active {
  background: var(--primary-color);
}

.play-tri-sm {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #fff;
  margin-left: 2px;
}

/* ── 수동 편집 모드 오버레이 스타일 ── */
#edit-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: crosshair;
  background: rgba(0, 0, 0, 0.25);
  /* 화면 어두워짐 */
  /* 격자 무늬 패턴 연출 */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  box-shadow: inset 0 0 120px rgba(0, 132, 255, 0.2);
  /* 내부 푸른 광원 */
  border: 2px solid var(--primary-color);
  border-radius: 12px;
}

/* ── 중앙 안내 가이드 스타일 ── */
.central-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  padding: 30px 50px;
  border-radius: 24px;
  z-index: 100;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  animation: fadeInOut 2.8s forwards;
}

.guide-icon-wrap {
  margin-bottom: 15px;
  position: relative;
  width: 60px;
  height: 60px;
}

/* ── 애니메이션 정의 ── */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.9);
  }

  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  85% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -55%) scale(0.9);
  }
}

@keyframes dragAction {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  50% {
    transform: translate(20px, 20px);
    opacity: 1;
  }

  100% {
    transform: translate(0, 0);
    opacity: 0.3;
  }
}

.drag-hand {
  animation: dragAction 1.5s infinite ease-in-out;
}

.manual-mask-box:hover {
  background: rgba(231, 76, 60, 0.4) !important;
  border-color: #e74c3c !important;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ================== 우측 패널 ================== */
.right-panel {
  grid-area: right;
  gap: 24px;
  overflow-y: auto;
}

/* 패널 전체가 스크롤되도록 내부 요소가 압축되지 않게 고정 */
.right-panel > * {
  flex-shrink: 0;
}

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

.mask-card {
  /* 테두리 두께를 2px로 고정해 active 전환 시 레이아웃 점프(틱틱) 방지 */
  border: 2px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  background: #152238;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  position: relative;
}

.mask-card:active {
  transform: scale(0.97);
}

.mask-card.active {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(42, 109, 232, 0.15);
}

.mask-img-slot {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  background: #09101d;
}

.mask-img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mask-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  z-index: 2;
  /* display 토글 대신 opacity/scale로 부드럽게 나타나도록 */
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mask-card.active .mask-check {
  opacity: 1;
  transform: scale(1);
}

.mask-name {
  font-size: 15px;
  color: #fff;
  padding: 2px 0;
  background: rgba(11, 21, 38, 0.6);
  backdrop-filter: blur(4px);
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-weight: 300;
}

.slider-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slider-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slider-title {
  font-size: 13px;
  color: #8fa3c0;
  font-weight: 600;
}

.slider-val {
  font-size: 13px;
  color: #fff;
  background: #1a2a46;
  border-radius: 6px;
  padding: 4px 10px;
}

.slider-wrap {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
}

.slider-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: #1a2a46;
  border-radius: 3px;
  overflow: hidden;
  pointer-events: none;
}

.slider-fill {
  height: 100%;
  background: var(--primary-color);
  border-radius: 3px;
}

.slider-input {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0 !important;
  cursor: pointer;
  margin: 0;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
}

.slider-thumb {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  border: 3px solid var(--primary-color);
  pointer-events: none;
  transform: translateX(-50%);
  top: 50%;
  margin-top: -9px;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.slider-tick {
  font-size: 14px;
  color: #5a7a9e;
}

.divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin: 0;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-dot {
  width: 8px;
  height: 8px;
  background: var(--primary-color);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── 파일 리스트 아이템 기본 레이아웃 ── */
.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #152238;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  position: relative;
  /* 💡 팝업의 기준점이 되도록 추가 */
}

.file-item:hover {
  background: #1a2a46;
  border-color: rgba(42, 109, 232, 0.4);
}

/* ── 파일명 말줄임 처리 ── */
.file-name {
  font-size: 13px;
  color: #c8d4e8;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 버튼 가로 정렬 ── */
.file-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── 파일 정보 팝업 (평소엔 숨김, open 클래스 붙을 때만 표시) ── */
.file-info-popup {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #1a2a46;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 14px;
  width: 240px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: none;
  /* 기본 상태: 숨김 */
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}

.file-info-popup.open {
  display: flex;
  /* 토글 시 표시 */
}

/* ── 팝업 내부 텍스트 정렬 ── */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 14px;
}

.info-row span:first-child {
  color: #8fa3c0;
  white-space: nowrap;
}

.info-row span:last-child {
  color: #fff;
  text-align: right;
  word-break: break-all;
  margin-left: 12px;
}

.file-btn {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px;
  color: #8fa3c0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}

.file-btn:hover {
  background: var(--primary-color);
  color: #fff;
}

.file-section-wrap {
  position: relative;
  min-height: 50px;
}

@media (max-width: 1260px) {
  .file-section-wrap {
    max-height: 350px;
    overflow-y: auto !important;
  }
}


.file-login-overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(15, 25, 44, 0.85);
  backdrop-filter: blur(4px);
  border-radius: 12px;
  z-index: 10;
  padding: 20px;
}

.lock-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(42, 109, 232, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lock-ico svg {
  width: 18px;
  height: 18px;
  stroke: var(--primary-color);
}

.login-txt {
  font-size: 13px;
  color: #fff;
}

.login-btn {
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
}

.login-btn:hover {
  background: #1f5acc;
}


/* =========================================================
   [데모 영역 반응형 미디어 쿼리]
   ========================================================= */
@media (max-width: 1260px) {
  .demo-wrap {
    height: auto;
    min-height: 100vh;
    /* 핵심 수정: Grid의 1fr 팽창 버그를 막기 위해 Flex 세로 배치로 변경 */
    display: flex;
    flex-direction: column;
    /* 상단 고정 헤더(.global-menu, 약 62px)에 좌측 탭바가 가려지지 않도록 상단 여백 확보 */
    padding: 80px 20px 24px 20px;
    gap: 20px;
  }

  /* 패널 순서 보장 (위에서 아래로) */
  .nav {
    order: 0;
  }

  .left-panel {
    order: 1;
  }

  .center-panel {
    order: 2;
  }

  .right-panel {
    order: 3;
  }

  .left-panel,
  .center-panel,
  .right-panel {
    width: 100%;
    overflow: visible;
    height: auto;
    box-sizing: border-box;
    /* 패딩이 너비를 초과하지 않게 방지 */
  }

  .left-panel {
    flex-direction: column;
  }

  .sample-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-behavior: smooth;
  }

  .sample-item {
    min-width: 160px;
    flex-shrink: 0;
  }

  .sample-url-item {
    min-width: 220px;
  }

  .premium-card {
    margin-top: 16px;
  }

  /* 마스크 카드는 3종뿐이므로 항상 3열 한 줄로 균형있게 배치.
     전체 너비 패널에서 정사각형이 과하게 커지지 않도록 max-width 로 상한만 둔다. */
  .mask-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 470px;
  }

  /* 핵심 수정: Flex 세로 배치(height:auto)에서는 부모 높이가 불명확해
     .stream-screen 이하의 height:100% 체인이 무너져 iframe(영상)이 0px로 접힘.
     명시적 높이를 부여해 실시간 영상이 정상 표시되도록 함. */
  #view-live {
    flex: 0 0 auto;
    min-height: 0;
  }

  .stream-screen {
    flex: 0 0 auto;
    height: min(56.25vw, 460px);
    min-height: 320px;
  }
}

/* 3. 모바일 화면 (기존 480px -> 768px로 상향하여 최신 스마트폰 완벽 커버) */
@media (max-width: 768px) {
  .demo-wrap {
    /* 💡 핵심 수정: 상단 패딩을 80px로 늘려 상단 헤더(로고 영역)와 겹치지 않게 띄워줍니다 */
    padding: 80px 12px 24px 12px;
    gap: 16px;
  }

  .nav {
    gap: 16px;
    height: auto;
    padding: 8px 0;
  }

  .nav-links {
    display: none;
  }

  .left-panel,
  .center-panel,
  .right-panel {
    padding: 16px;
    border-radius: 16px;
  }

  .upload-zone {
    min-height: 240px;
  }

  .stream-screen {
    min-height: 240px;
  }

  .cloud-icon,
  .stream-icon {
    width: 80px;
  }

  /* 모바일에서도 3열 한 줄 유지 (간격만 축소) */
  .mask-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .stream-input-bar {
    flex-direction: column;
    align-items: stretch;
    border-radius: 16px;
  }

  .stream-submit {
    width: 100%;
    border-radius: 8px;
    margin-top: 8px;
  }

  /* 탭 메뉴 텍스트 및 너비 모바일 최적화 */
  .tab-bar-center {
    max-width: 100%;
    width: 100%;
  }

  .tab {
    font-size: 13px;
    padding: 10px 8px;
  }
}

/* =========================================================
   [솔루션 페이지 전체 섹션] 1440px 중앙 정렬 및 여백 강제 통일
   ========================================================= */

/* 1. 상단 타이틀 및 모든 본문 섹션 (PC & 태블릿) */
.downloads-intro,
.section-block {
  /* 1440px을 넘어가면 중앙 정렬, 그 이하는 최소 40px 여백 유지 */
  padding-left: max(40px, calc((100vw - 1440px) / 2)) !important;
  padding-right: max(40px, calc((100vw - 1440px) / 2)) !important;
  box-sizing: border-box;
}

/* 2. 가로 스크롤 영역(공인인증시험 카드) 끝단 자연스럽게 잘림 처리 */
.certi-scroll-wrapper {
  /* 부모의 우측 패딩만큼 밖으로 마이너스 마진을 주어 화면 끝까지 스크롤 되게 함 */
  margin-right: calc(-1 * max(40px, calc((100vw - 1440px) / 2))) !important;
}

.certi-scroll-track {
  /* 끝까지 밀었을 때 마지막 카드 우측에 여백 보장 */
  padding-right: max(40px, calc((100vw - 1440px) / 2)) !important;
}


/* 3. 모바일 (768px 이하) 표준 여백(20px) 통합 */
@media (max-width: 768px) {

  .downloads-intro,
  .section-block {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* 모바일에서는 가로 스크롤 카드 여백 보정 해제 */
  .certi-scroll-wrapper {
    margin-right: -20px !important;
  }

  .certi-scroll-track {
    padding-right: 20px !important;
  }
}


/* 파란색 배경 박스 (위아래 여백 40px 추가하여 대칭 맞춤) */
.slide-wrapper {
  position: relative;
  width: 100%;
  margin: 2rem auto 0;
  background: #ffffff17;
  border-radius: 24px;
  padding: 30px;
  /* 기존 0px 55px 에서 변경됨 */
  overflow: hidden;
  color: white;
}

/* 타이틀과 화살표 버튼을 나란히 수직 중앙 정렬 */
.slide-top-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  width: 100%;
}

/* 화살표 버튼 그룹 (공중으로 띄우던 transform 속성 삭제) */
.slide-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-shrink: 0;
}

.slide-controls button {
  background: #ffffff4d;
  border: none;
  border-radius: 50%;
  width: 38px;
  /* 버튼 크기 살짝 조정 */
  height: 38px;
  font-size: 1.2rem;
  color: var(--primary-color);
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* 버튼 그림자 살짝 추가 */
}

.slide-controls button:hover {
  background: #ffffff96;
}


/* 기존 .manual-mask-box 스타일을 찾아서 아래와 같이 수정/추가합니다. */

.manual-mask-box {
  /* 소스 코드에서 생성 시점에 넣던 CSS 속성들을 여기에 클래스로 정의합니다. */
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid #ffffff;
  border-radius: 4px;
  backdrop-filter: blur(8px);
  cursor: pointer;
  z-index: 6;
  pointer-events: none;
  /* 드로잉 중 클릭 방지, 소스 코드와 동일 */
}

/* 수동 편집 드로잉 완료 후 (mouseup 시) 마우스 이벤트를 켜주기 위한 클래스 */
.manual-mask-box.ready {
  pointer-events: auto;
}

/* 마스크 박스 호버 시 테두리 색상 변경 및 X 버튼 표시 */
.manual-mask-box.ready:hover {
  background: rgba(231, 76, 60, 0.4) !important;
  /* 소스 코드 호버 연출과 동일 */
  border-color: #e74c3c !important;

}

/* 소스 코드에서 생성 시점에 넣던 X 버튼 CSS 속성들을 클래스로 정의합니다. */
.mask-close-btn {
  /* 소스 코드에서 생성 시점에 넣던 스타일 */
  position: absolute;
  top: -9px;
  right: -9px;
  width: 18px;
  height: 18px;
  background: #e74c3c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

  /* 마우스 호버 전 초기 상태: 숨김 */
  opacity: 0;
  transition: opacity 0.2s ease;
  /* 부드러운 전환 효과 추가 */
}

/* 부모 마스크 박스(.manual-mask-box.ready) 호버 시 X 버튼 표시 */
.manual-mask-box.ready:hover .mask-close-btn {
  opacity: 1;
}

/* 마스크 박스 기본 */
.manual-mask-box.ready {
  pointer-events: auto;
  cursor: move;
}

/* 삭제(X) 버튼 스타일 */
.mask-close-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background: #ff4d4d;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 리사이즈 핸들 스타일 (우측 하단 작은 사각형) */
.resizer {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid var(--primary-color);
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 2px;
}

/* 박스에 마우스 올리면 조절 핸들과 삭제 버튼 노출 */
.manual-mask-box.ready:hover {
  background: rgba(231, 76, 60, 0.2) !important;
  border-color: #e74c3c !important;
}

.manual-mask-box.ready:hover .mask-close-btn,
.manual-mask-box.ready:hover .resizer {
  opacity: 1;
}

/* 가이드 오버레이: 배경을 어둡게 */
#guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9998;
  display: none;
  pointer-events: auto;
}

/* 강조 영역: 특정 요소만 밝게 비춤 */
#guide-highlight {
  position: absolute;
  z-index: 9999;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
  border: 2px solid var(--primary-color);
  border-radius: 12px;
  transition: all 0.3s ease;
  pointer-events: none;
}

/* 가이드 설명창 */
#guide-tooltip {
  position: absolute;
  z-index: 10000;
  background: #fff;
  color: #111;
  padding: 20px;
  border-radius: 16px;
  width: 280px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: none;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s ease;
}

.guide-step-idx {
  color: var(--primary-color);
  font-weight: 800;
  font-size: 14px;
}

.guide-msg {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  word-break: keep-all;
}

.guide-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.guide-skip {
  background: none;
  border: none;
  color: #8fa3c0;
  cursor: pointer;
  font-size: 13px;
}

.guide-next {
  background: var(--primary-color);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}


/* =======================================================
   비식별 결과 목록 (테이블 / 카드 / 툴바)
   - personalUpload.js 가 .video-upload-table tbody 와 .card-list 에
     직접 행/카드를 그리므로, 그에 맞는 스타일을 여기에 둔다.
   - personal.html 의 인라인 <style> 을 대체하는 영역.
   ▶ personal.css 맨 끝에 그대로 붙여넣으세요.
   ======================================================= */

/* ── 다운로드 / 삭제 / 전체선택 툴바 ── */
.check-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-right: auto;
  color: #8fa3c0;
  font-size: 13px;
}

.check-wrap input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary-color);
  cursor: pointer;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
}

.download-btn {
  color: #fff;
  background: var(--primary-color);
  border: none;
}

.download-btn:hover {
  background: var(--primary-dark);
}

.delete-btn {
  border: 1px solid #1a2a46;
  color: #fff;
  background: #1a2a46;
}

.delete-btn:hover {
  background: #22355a;
}

/* ── 데스크탑 결과 테이블 (다크 테마) ── */
.video-upload-table {
  width: 100%;
  color: #c8d4e8;
  background-color: transparent;
  font-size: 13px;
  border-collapse: collapse;
  margin: 0;
}

.video-upload-table thead {
  background: rgba(0, 0, 0, 0.2);
}

.video-upload-table th {
  padding: 10px 6px;
  color: #8fa3c0;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  white-space: nowrap;
}

.video-upload-table td {
  padding: 12px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  text-align: center;
  color: #c8d4e8;
}

.video-upload-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* ── 상태 점 (JS: statusClass = 'success' | 'error') ── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.status-dot.success {
  background: #00b383;
}

.status-dot.error {
  background: #ff4d4d;
}

/* =====================================================================
   비식별화 파일 리스트 (카드형)
   - 우측 패널 폭(데스크톱 320px, 반응형 풀와이드)에서 5열 테이블은 항상 비좁고
     파일명이 길어지면 레이아웃이 깨지므로, 모든 폭에서 카드형으로 통일한다.
   - .video-upload-table / .card-list 는 이 데모(personal.html)에서만 쓰이므로 안전.
   ===================================================================== */
.file-section-wrap .video-upload-table {
  display: none !important;
}

.file-section-wrap .card-list {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}

.file-section-wrap .card {
  background: #152238;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  color: #c8d4e8;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.file-section-wrap .card:hover {
  border-color: rgba(55, 135, 255, 0.4);
  background: #1a2a46;
}

/* 상단: 체크박스 + 파일명 + 상태 뱃지 */
.file-section-wrap .card-row.top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-section-wrap .card-checkbox {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

.file-section-wrap .card-checkbox input {
  width: 15px;
  height: 15px;
  accent-color: var(--primary-color);
  cursor: pointer;
  margin: 0;
}

/* 파일명: 좁은 폭에서도 최대 2줄까지만 노출하고 말줄임(…) 처리 */
.file-section-wrap .card-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.file-section-wrap .card-title .preview-trigger {
  color: var(--primary-color) !important;
}

/* 상태 뱃지 */
.file-section-wrap .card-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #c8d4e8;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* 하단: 생성일 · 크기 (메타). 체크박스 폭만큼 들여써 파일명과 정렬 */
.file-section-wrap .card-row.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-left: 25px;
}

.file-section-wrap .card-date,
.file-section-wrap .card-size {
  font-size: 12px;
  color: #8fa3c0;
  white-space: nowrap;
}


/* =====================================================================
   PREVIEW MODAL STYLES
   ===================================================================== */
.preview-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 17, 17, 0.7); /* var(--color-text-primary) with opacity */
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.preview-modal-overlay.show {
    opacity: 1;
}

.preview-modal-content {
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-modal);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.preview-modal-overlay.show .preview-modal-content {
    transform: translateY(0);
}

.preview-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--surface-subtle);
}

.preview-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-strong);
    font-family: var(--font-sans);
}

.preview-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}

.preview-modal-close:hover {
    color: var(--color-error);
}

.preview-modal-body {
    padding: 24px;
    overflow-y: auto;
    background: var(--color-bg-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.preview-media-item {
    max-width: 100%;
    max-height: 60vh;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
}