.solution_popup{display:flex;position:fixed;top:0;left:0;z-index:300;width:100%;height:100%;justify-content:center;align-items:center;visibility:hidden;pointer-events:none;transition:opacity 0.6s ease,visibility 0s linear 0.6s;}
.solution_popup.is_open{visibility:visible;opacity:1;pointer-events:auto;}
.solution_popup_inner{overflow:hidden;position:relative;width:100%;height:100%;background:#B5B5A6;}
.visual_marquee_video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}


.solution_popup_bg{position:absolute;top:0;left:0;width:100%;height:100%;}
.solution_popup_bg_img{display:block;width:100%;height:100%;object-fit:cover;}
/* 팝업 딤 — 가독성을 위해 리스트보다 훨씬 진하게(클론의 최종 딤 값과 동일) */
.solution_popup_dim{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);pointer-events:none;}

.solution_card_expand_clone{display:block;overflow:hidden;position:fixed;top:0;left:0;z-index:310;width:100vw;height:100vh;pointer-events:none;}
.solution_card_expand_clone_img{display:block;width:100%;height:100%;object-fit:cover;}
.solution_card_expand_clone_dim{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:#000000;}

/* popup close */
.service_card_popup_close{display:flex;overflow:hidden;position:absolute;top:0;right:0;z-index:5;width:98px;height:98px;background:#000000;justify-content:center;align-items:center;cursor:pointer;}
.service_card_popup_close::before,
.service_card_popup_close::after{content:'';display:block;position:absolute;width:28px;height:2px;background:var(--color-white);}
.service_card_popup_close::before{transform:rotate(45deg);}
.service_card_popup_close::after{transform:rotate(-45deg);}

.solution_popup_content{display:flex;overflow-y:auto;overscroll-behavior:contain;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;padding:80px 90px;flex-direction:column;justify-content:space-between;}
.solution_popup.is_open .solution_popup_content{opacity:1;transform:translateY(0);}
.solution_popup.is_open.is_direct_open .solution_popup_content{transition-delay:0.05s;}
.solution_popup_name{ font-family: 'Zalando Sans Expanded', sans-serif;color: var(--color-white);font-size: 128px;font-style: normal; font-weight: 800; line-height: 90%; letter-spacing: -6.4px;z-index: 1;}

/* popup top text */
.solution_popup_top{display:flex;width:calc(100% - 280px);flex-direction:column;gap:40px;word-break:keep-all;overflow-wrap:break-word;z-index: 1;}
.solution_popup_headline{font-family:'Pretendard',sans-serif;font-weight:700;font-size:40px;line-height:1.2;letter-spacing:-0.04em;text-transform:uppercase;color:var(--color-white);}
.solution_popup_desc{font-family:'Pretendard',sans-serif;font-weight:600;font-size:20px;line-height:1.4;letter-spacing:-0.02em;color:rgba(255,255,255,0.8);}
.solution_popup_tags{display:flex;flex-wrap:wrap;gap:5px;}
.solution_popup_tags li{padding:8px 12px;border-radius:2px;background:#000000;font-family:'Pretendard',sans-serif;font-weight:600;font-size:16px;line-height:1.4;letter-spacing:-0.01em;color:var(--color-white);}

/* popup stats — 카드에 4단 상세 데이터(solution_popup_data 템플릿)가 없으면 sub.js가 hidden 속성을 붙인다 */
.solution_popup_stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));width:100%;padding-top:1px;border-top:1px solid rgba(255,255,255,0.3);}
.solution_popup_stats[hidden]{display:none;}
.solution_popup_stat{display:flex;position:relative;flex:1;padding:30px 20px 0 0;flex-direction:column;justify-content:space-between;gap:20px;}
.solution_popup_stat + .solution_popup_stat{padding-left:20px;border-left:1px solid rgba(255,255,255,0.2);}
.solution_popup_stat + .solution_popup_stat::before{content:'';display:block;position:absolute;top:0;left:0;width:10px;height:10px;background:#8D8D81;transform:translate(-50%,-50%);}
.solution_popup_stat_text{display:flex;flex-direction:column;gap:20px;}
.solution_popup_stat_label{display:inline-block;width:fit-content;padding:2px 8px;background:var(--color-white);font-family:'Pretendard',sans-serif;font-weight:700;font-size:22px;line-height:1.14;letter-spacing:-0.02em;color:var(--color-text-dark);}
.solution_popup_stat_desc{font-family:'Pretendard',sans-serif;font-weight:500;font-size:18px;line-height:1.44;letter-spacing:-0.02em;color:rgba(255,255,255,0.8);word-break:keep-all;overflow-wrap:break-word;}
.solution_popup_stat_icon{display:block;width:80px;height:80px;align-self:flex-end;}

/* popup badge — 리스트 카드와 같은 배지 이미지. 콘텐츠보다 조금 더 늦게 페이드인한다 */
.solution_popup_badge{display:flex;position:absolute;top:clamp(160px,20vh,275px);right:20px;z-index:1;width:365px;height:330px;justify-content:center;align-items:center;transition:opacity 0.45s ease;}
.solution_popup.is_open .solution_popup_badge{opacity:1;}
.solution_popup.is_open.is_direct_open .solution_popup_badge{transition-delay:0.15s;}
.solution_popup_badge::before{content:'';display:block;position:absolute;bottom:8%;width:79%;height:18%;border-radius:50%;background:#000000;opacity:0.41;filter:blur(40px);}
.solution_popup_badge_img{display:block;position:relative;width:100%;height:100%;object-fit:cover;}

.service_card_popup{overflow-y:auto;position:fixed;top:0;left:0;z-index:200;width:100%;height:100%;padding:60px;background:var(--color-bg);visibility:hidden;opacity:0;transform:scale(0.96);pointer-events:none;will-change:transform,opacity;transition:opacity 0.6s ease,transform 0.6s ease,visibility 0s linear 0.6s;}
.service_card_popup.is_open{visibility:visible;opacity:1;transform:scale(1);pointer-events:auto;transition:opacity 0.6s ease,transform 0.6s ease,visibility 0s linear 0s;}

.service_card_popup_close{display: flex;overflow: hidden;position: absolute; top: 0;right: 0; z-index: 5; width: 98px;height: 98px; background: #000000; justify-content: center;align-items: center;}

.service_card_popup::after{ content:'';position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:-1;}
.service_card_popup.is_open{display: flex;flex-direction: column;justify-content: space-evenly;}
.honeycom_popup.is_open {width: 100%;height: 100%;background: url(/main/images/home_main/main_service_thumb_honeycomb.jpg) no-repeat 50% 50%; background-size: cover;}
.wess_popup.is_open { width: 100%;height: 100%;background: url(/main/images/home_main/main_service_thumb_wess.webp) no-repeat 50% 50%; background-size: cover;}
.lamp_popup.is_open { width: 100%;height: 100%;background: url(/main/images/sub/service/solution-detail_20260731.jpg) no-repeat 50% 50%; background-size: cover;}
.innobridge_popup.is_open { width: 100%;height: 100%;background: url(/main/images/sub/service/solution-detail-7_20260731.jpg) no-repeat 50% 50%; background-size: cover;}
.creaction_popup.is_open { width: 100%;height: 100%;background: url(/main/images/sub/service/solution-detail-4_20260731.jpg) no-repeat 50% 50%; background-size: cover;}
.uniLink_popup.is_open { width: 100%;height: 100%;background: url(/main/images/sub/service/solution-detail-6_20260731.jpg) no-repeat 50% 50%; background-size: cover;}
.unigate_popup.is_open { width: 100%;height: 100%;background: url(/main/images/sub/service/solution-detail-1_20260731.jpg) no-repeat 50% 50%; background-size: cover;}
.campuson_popup.is_open { width: 100%;height: 100%;background: url(/main/images/sub/service/solution-detail-5_20260731.jpg) no-repeat 50% 50%; background-size: cover;}

/* PC 비율 축소 (1025px~1920px) — 1920 디자인 기준 px를 vw로 변환해 레이아웃 재배치 없이 비율만 축소한다. 계산식: vw = px / 1920 * 100 */
@media screen and (min-width:1025px) and (max-width:1920px){
  .solution_section{padding:1.0417vw 0 2.8646vw;}
  .solution_inner{padding:0 1.5625vw;}
  .solution_head{margin-bottom:1.0417vw;gap:1.0417vw;}
  .solution_head_tit{font-size:1.25vw;}
  .solution_jump{gap:0.5208vw;}
  .process_marquee_text{margin-right:0.521vw;font-size:4.167vw;}
  .process_marquee_dot{margin-right:0.521vw;font-size:4.167vw;}
  .process_inner{padding:0 1.5625vw;gap:4.1667vw;}
  .process_head{gap:1.3021vw;}
  .process_head_en{font-size:1.875vw;}
  .process_head_kr{font-size:0.7813vw;}
  .process_tagline{margin-top:0.7813vw;font-size:1.1458vw;}
  .why_section{padding:9.375vw 0 8.333vw;}
  .why_inner{padding:0 1.5625vw;}
  .why_timeline_head{margin-bottom:0.2604vw;}
  .why_timeline_head span{font-size:0.8333vw;}
  .why_diagram{height:29.1667vw;margin-top:2.083vw;}
  .why_axis_dot{width:0.4167vw;height:0.4167vw;border-radius:0.1042vw;}
  .why_col::before{left:1.302vw;height:21.354vw;}
  .why_col::after{top:21.302vw;left:1.146vw;width:0.365vw;height:0.365vw;}
  .why_step{height:2.8646vw;padding:0 0.7813vw;border-radius:0.1042vw;gap:0.3646vw;}
  .why_step_num{width:1.1458vw;height:1.1458vw;font-size:0.8854vw;}
  .why_step_tit{font-size:1.1458vw;}
  .why_step_text{top:20.8333vw;left:2.1875vw;}
  .why_step_text_tit{margin-bottom:0.7813vw;font-size:1.1458vw;}
  .why_step_text_desc{font-size:0.7813vw;}
  .why_step_col_1 .why_step{top:1.9271vw;}
  .why_step_col_2 .why_step{top:5.4688vw;}
  .why_step_col_3 .why_step{top:8.9583vw;}
  .why_step_col_4 .why_step{top:12.3958vw;}
  .why_step_col_5 .why_step{top:15.8333vw;}
  .our_difference_section{padding:5.2083vw 0;}
  .difference_inner{padding:0 1.5625vw;}
  .difference_subtitle{margin-top:-2.8646vw;margin-bottom:4.1667vw;font-size:1.0417vw;}
  .difference_diagram{max-width:78.3854vw;height:30.2083vw;margin-top:2.083vw;}
  .difference_col{gap:2.0833vw;}
  .difference_circle{height:21.3542vw;gap:1.0417vw;}
  .difference_circle_tit{font-size:1.4583vw;}
  .difference_circle_kr{font-size:0.9375vw;}
  .difference_text{font-size:1.0417vw;}
  .difference_intersect{top:5.625vw;height:10.1563vw;}
  .difference_marker{width:0.4167vw;height:0.4167vw;}
  .difference_marker_top{top:5.8854vw;}
  .difference_marker_bottom{top:15.4688vw;}
  .difference_connector{top:16.1458vw;height:7.2917vw;}
  .solution_card_media{height:23.9583vw;border-radius:0.1042vw;}
  .solution_card_name{top:1.5625vw;left:1.5625vw;font-size:3.6458vw;}
  .solution_card_head{top:0.5208vw;gap:0.2604vw;}
  .solution_card_badge{width:6.7708vw;border-radius:0.625vw;}
  .solution_card_arrow{width:4.9479vw;height:4.9479vw;}
  .solution_card_body{padding:2.0833vw 1.5625vw;border-radius:0 0 0.1042vw 0.1042vw;gap:1.8229vw;}
  .solution_card_text{gap:0.7813vw;}
  .solution_card_tit{font-size:1.6667vw;}
  .solution_card_desc{font-size:0.9375vw;}
  .solution_card_tags{gap:0.1563vw;}
  .solution_card_tags li{font-size:0.6771vw;}
 /* .solution_popup_close{width:5.1042vw;height:5.1042vw;}
  .solution_popup_close::before,.solution_popup_close::after{width:1.4583vw;}
  .solution_popup_content{padding:4.1667vw 4.6875vw;transform:translateY(1.0417vw);}
  .solution_popup_name{font-size:4.6875vw;}
  .solution_popup_top{gap:2.0833vw;}
  .solution_popup_headline{font-size:2.0833vw;}
  .solution_popup_desc{font-size:1.0417vw;}
  .solution_popup_tags{gap:0.2604vw;}
  .solution_popup_tags li{padding:0.4167vw 0.625vw;border-radius:0.1042vw;font-size:0.8333vw;}
  .solution_popup_stat{padding:1.5625vw 1.0417vw 0 0;gap:1.0417vw;}
  .solution_popup_stat + .solution_popup_stat{padding-left:1.0417vw;}
  .solution_popup_stat + .solution_popup_stat::before{width:0.5208vw;height:0.5208vw;}
  .solution_popup_stat_text{gap:1.0417vw;}
  .solution_popup_stat_label{padding:0.1042vw 0.4167vw;font-size:1.1458vw;}
  .solution_popup_stat_desc{font-size:0.9375vw;}
  .solution_popup_stat_icon{width:4.1667vw;height:4.1667vw;}
  .solution_popup_badge{top:14.3229vw;right:1.0417vw;width:19.0104vw;height:17.1875vw;}*/
  .sub_hero_mascot{top:1.5625vw;right:7.8125vw;width:17.2396vw;height:13.8021vw;}
}

@media only screen and (max-width:1280px){
  .solution_popup_content{padding:70px;}
  .solution_popup_name{padding-bottom:30px;}
  .solution_popup_top{margin-top:auto;}
  .solution_popup_badge{top:205px;}
  .solution_popup_stats{grid-template-columns: 1fr 1fr;/*overflow-y:auto;*/}
   .service_card_popup{padding:70px;}
}

@media only screen and (max-width:1024px){
  .service_card_popup{overscroll-behavior:contain;padding:0 18px;}
  .service_card_popup_close{width:62px;height:62px;}
  .process_inner{padding:0 15px;}
  .process_section{margin-bottom:80px;}
  .process_item_num_big{font-size:clamp(16px,3vw,24px);width: clamp(34px, 5.2vw, 50px);height: clamp(34px, 5.2vw, 50px);}
	.process_head_en{font-size: clamp(22px,4vw,36px);}
  .process_item_tit_big{font-size: clamp(22px, 3.2vw, 30px);}
  .why_section{padding:clamp(100px,17vw,180px) 0;}
  .why_inner{padding: 0 15px;}
  .why_diagram{display:flex;position:static;height:auto;margin-top:40px;border-bottom:0;flex-direction:column;gap:40px;}
  .why_axis{display:none;}
  .why_col{position:relative;top:auto;left:auto;width:100%;padding-left:20px;}
  .why_col::before{top:18px;bottom:-58px;left:0;height:auto;}
  .why_col:last-child::before{display:none;}
  .why_col::after{top:18px;left:0;width:7px;height:7px;transform:translate(-50%,-50%);}

  /* why step (pill) — PC는 높이 고정 absolute pill, 모바일은 padding으로 높이가 잡히는 흐름 요소.
     번호 배지도 채움형(밝은 배경 + 어두운 숫자)에서 테두리형(투명 배경 + 흰 숫자)으로 바뀐다 */
  .why_step{position:static;height:auto;padding:10px;gap:7px;}
  .why_step_num{width:16px;height:16px;border:1px solid var(--color-bg);background:none;font-size:10px;color:var(--color-bg);}
  .why_step_tit{font-weight:500;font-size:15px;line-height:1;}

  /* why step text — PC는 pill과 떨어진 absolute 텍스트, 모바일은 pill 바로 아래에 붙는 흐름 요소. 줄바꿈은 PC 기준으로 넣은 <br>이라 모바일에선 자연 줄바꿈에 맡긴다 */
  .why_step_text{position:static;top:auto;left:auto;width:100%;margin-top:15px;padding-left:10px;}
  .why_step_text_tit{margin-bottom:10px;font-size:16px;line-height:0.99;letter-spacing:-0.05em;}
  .why_step_text_desc{font-size:13px;line-height:1.4;letter-spacing:-0.05em;opacity:0.8;}
  .why_step_text_desc br{display:none;}

  .solution_jump {display:none;}
  .solution_section {padding-top:110px;}
  .solution_head_tit{font-size:clamp(20px,2.5vw,24px);}
  
  .solution_inner{padding:0 15px;}
  .solution_swiper .swiper-wrapper {display:grid;grid-template-columns: 1fr 1fr;gap:15px;transform: translate3d(0, 0, 0) !important;}
  .solution_swiper .solution_card {margin:0 !important;width: 100%;}
  .solution_card_name{font-size:38px;}
  .solution_card_badge{width:83px;}
  .solution_card_media{height:auto;aspect-ratio: 345 / 302;}
  .solution_card_arrow{width:60px;height:60px;}
  .solution_card_body{padding:25px 20px; gap:15px;flex-direction:column;flex: 1;}
  .solution_card_text{gap:10px;width:100%;}
  .solution_card_tit{font-size:20px;}
  .solution_card_desc{font-size:14px;}
  .solution_card_link{height:100%;}
  .solution_card_tags{width: 100%;flex-direction: row;flex-wrap: wrap;}
  .solution_card_tags li{font-size:12px;}
  
   .solution_popup_close{width: 62px;height: 62px;}

   /* solution popup mobile — PC는 뷰포트를 꽉 채우는 고정 패널(배경이 화면 전체, _content가 스크롤)이지만,
      모바일은 상단 420px 히어로 밴드 아래로 본문이 이어지는 세로 스크롤 문서다. 그래서 스크롤 주체를 _content에서 팝업 자체로 옮긴다.
      (마크업의 data-lenis-prevent도 _content에서 .solution_popup으로 함께 올렸다 — 히어로 위에 커서가 있을 때도 Lenis가 휠을 가로채지 않아야 한다)
      수치는 Figma 모바일 프레임 375px 기준 vw 환산(px/375*100), font-size는 clamp(Figma px, vw, Figma px*1.5) */
   .solution_popup{overflow-y:auto;overscroll-behavior:contain;align-items:flex-start;}
   .solution_popup_inner{overflow:visible;height:auto;min-height:100%;background:var(--color-bg-dark);}

   /* popup bg — 화면 전체 → 상단 히어로 밴드. 밴드 하단 60px을 검정으로 페이드시켜 아래 본문 배경과 이어붙인다 */
   .solution_popup_bg{height: 60vw;}
   .solution_popup_bg::after{content:'';display:block;position:absolute;bottom:0;left:0;width:100%;height:16vw;background:linear-gradient(to top,var(--color-bg-dark),rgba(0,0,0,0));}
   .solution_popup_dim{background:rgba(0,0,0,0.2);}

   /* popup content — absolute 스크롤 박스 → 문서 흐름. 마크업에 CMS가 남긴 빈 <br>이 flex 아이템으로 잡혀 여백을 만들기 때문에 숨긴다 */
   .solution_popup_content{overflow:visible;position:static;height:auto;padding: 0 18px;justify-content:flex-start;}
   .solution_popup_content>br,.solution_popup_top>br{display:none;}

   /* popup name — 히어로 밴드 높이를 그대로 차지해 밴드 위에 얹힌다(absolute 없이 흐름 유지) */
   .solution_popup_name{height: 60vw;padding: 25vw 0 0;font-size:clamp(55px,14.6667vw,82px);}

   /* popup top text */
   .solution_popup_top{width:100%;margin-top:5.3333vw;gap: 5.4vw;}
   .solution_popup_headline{font-size:clamp(22px,5.8667vw,33px);}
   .solution_popup_desc{width:84vw;font-weight:500;font-size:clamp(15px,4vw,22px);}
   .solution_popup_desc br {display:none;}

   /* popup tags — PC는 검정 채움이지만 모바일은 테두리형이다 */
   .solution_popup_tags{gap:0.8vw;}
   .solution_popup_tags li{padding:1.6vw 2.6667vw;border:0.5px solid #CCCCCC;background:none;font-size:clamp(13px,3.4667vw,19px);letter-spacing:-0.07em;}

   /* popup stats — 다열 그리드 → 1열 리스트. 구분선이 좌측 세로선에서 상단 가로선으로 바뀌고 교차점 사각 마커는 쓰지 않는다. 첫 선만 흰색이고 나머지는 40% */
   .solution_popup_stats{display:flex;margin-top: 10vw;border-top-color:var(--color-white);flex-direction:column;margin-bottom:30px;}
   .solution_popup_stat{padding: 6.4vw 0 4vw;flex:none;gap:0;}
   .solution_popup_stat+.solution_popup_stat{padding-left:0;border-top:1px solid rgba(255,255,255,0.4);border-left:0;}
   .solution_popup_stat+.solution_popup_stat::before{display:none;}
   .solution_popup_stat:last-child{border-bottom:1px solid rgba(255,255,255,0.4);}
   .solution_popup_stat_text{gap:4vw;}
   .solution_popup_stat_label{padding:0.8vw 1.6vw;font-size:clamp(17px,4.5333vw,25px);}
   .solution_popup_stat_desc{width:69.3333vw;font-size:clamp(15px,2.2vw,22px);letter-spacing:-0.03em;}
   .solution_popup_stat_icon{width:12vw;height:12vw;}

   /* popup badge — 우측 중단 → 좌상단으로 이동해 히어로 밴드 위에 겹친다. 그림자 blur도 배지 축소 비율(126/365)만큼 줄인다 */
   .solution_popup_badge{top: 2.2vw;right:auto;left:0;width: 18.6vw;height: 18.6vw;}
   .solution_popup_badge::before{filter:blur(3.7vw);}
}


@media only screen and (max-width:1024px){
    .service_card_popup{background:var(--color-bg-dark);}
    .service_card_popup::before{background:rgba(0,0,0,0.2);}
    .service_card_popup.is_open{background: #000; padding: 0 18px;justify-content: flex-start;}
    
}


@media only screen and (max-width:768px){
  .solution_swiper .swiper-wrapper{grid-template-columns: 1fr;gap:10px;}
  
  .solution_popup_badge {width: 126px;height: 126px;left: -8px;}
  .solution_popup_name {height: 440px;padding: 160px 0 0;font-size:49px;letter-spacing:-2.5px; margin-bottom: 220px;}
  .solution_popup_bg {height:440px;}
  .solution_popup_top{margin-top:20px;gap:24px;}
  .solution_popup_headline{font-size:22px;}
  .solution_popup_desc {width:100%;font-size:15px;}
  .solution_popup_tags{gap:3px;}
  .solution_popup_tags li{font-size:13px;padding: 5px 10px;}
  .solution_popup_stats{margin-top:50px;}
  .solution_popup_stat{padding:28px 0 15px;}
  .solution_popup_stat_text{gap:15px;}
  .solution_popup_stat_label{font-size:17px;padding:3px 6px;}
  .solution_popup_stat_icon{width:45px; height:45px;}
  .solution_popup_stat_desc br {display: none;}
}