/* service.css — service.html, managed_services.html, web_app_dev.html 전용 스타일을 모아둔 파일. 세 페이지가 모두 공유하는 요소(.sub_page, .sub_hero, 섹션 공통 타이틀, .explore_section 등)는 sub_common.css에 있다 */
/* solution — service.html 전용 솔루션 리스트/스와이퍼/팝업 */
.solution_section{overflow:hidden;width:100%;padding:60px 0 180px;}
.solution_inner{/*max-width:1920px;*/margin:0 auto;padding:0 30px;}
/* solution head */
.solution_head{display:flex;width:100%;margin-bottom:20px;align-items:flex-end;gap:20px;}
.solution_head_tit{font-family:'Inter',sans-serif;font-weight:800;font-size:24px;line-height:120%;letter-spacing:-0.04em;color:var(--color-text-dark);flex-shrink:0;}
/* solution swiper */
.solution_swiper_wrap{position:relative;width:100%;}
.solution_swiper.swiper{overflow:visible;width:100%;}
.solution_swiper .swiper-wrapper{align-items:stretch;}
/* solution jump — 스와이퍼 위 우측에 떠 있는 바로가기 버튼 목록. 클릭하면 해당 슬라이드로 슬라이드 이동한다. 버튼 스타일은 sub_common.css의 .pill_filter_btn 공통 스타일을 그대로 쓴다 */
.solution_jump{display:flex;z-index:6;width:fit-content;margin-left:auto;align-items:center;gap:10px;}
/* process section — managed_services.html, web_app_dev.html이 공통으로 쓰는 프로세스 아코디언 리스트. 원래 web_app_dev.css에 있던 것을 이 파일로 통합했다 */
.process_section{position:relative;width:100%;padding:22px 0;margin-bottom:180px;background: linear-gradient(#D9D9D9, #D9D9D9) no-repeat left 30px bottom 0 / calc(100% - 60px) 1px;}
.process_section::before,.process_section::after{content:'';display:block;position:absolute;bottom:-4px;width:8px;height:8px;background:#F3F3EF;border:1px solid #67635F;}
.process_section::before{left:30px;}
.process_section::after{right:30px;}
/* process marquee — 메인 페이지 portfolio_marquee와 같은 방식(marquee_loop, 옅은 배경 텍스트)을 재사용한다 */
.process_marquee{display:flex;overflow:hidden;width:100%;background: #fff;padding: 10px 0;}
.process_marquee_track{display:flex;align-items:center;width:max-content;will-change:transform;animation:marquee_loop 40s linear infinite;}
.process_marquee_text{margin-right:10px;font-family:'Inter',sans-serif;font-weight:900;font-size:80px;line-height:1;letter-spacing: -5%; color: #F1F1EE;white-space:nowrap;}
.process_marquee_dot{margin-right:10px;font-family:'Inter',sans-serif;font-weight:900;font-size:80px;line-height:1;color:#F1F1EE;white-space:nowrap;}
/* process inner */
.process_inner{display:flex;max-width:1260px;margin:0 auto;padding:0 30px;flex-direction:column;gap:80px;}
/* process head */
.process_head{display:flex;flex-direction:column;align-items:center;gap:25px;text-align:center;}
.process_head_en{font-family:'Inter',sans-serif;font-weight:700;font-size:36px;line-height:1.3;letter-spacing:-0.03em;color:var(--color-text-dark);}
.process_head_kr{font-family:'Pretendard',sans-serif;font-weight:500;font-size:15px;line-height:1.5;letter-spacing:-0.02em;color:var(--color-text-secondary);}
.process_tagline{margin-top:15px;font-family:'Pretendard',sans-serif;font-weight:700;font-size:22px;line-height:1.4;letter-spacing:-0.03em;color:var(--color-text-dark);}
/* process list — sub_common.css로 이동함(web_app_dev.html, managed_services.html, careers.html이 모두 쓰는 공통 아코디언 리스트) */
/* why syworks — web_app_dev.html 전용 "왜 싸이웍스인가" 타임라인 섹션. 원래 sub_common.css에 있었으나 web_app_dev.html에서만 쓰여 이 파일로 옮겼다 */
.why_section{width:100%;padding:160px 0 160px;}
.why_inner{max-width:1920px;margin:0 auto;padding:0 30px;}
/* why timeline head (Project Start / Finish 라벨) */
.why_timeline_head{display:none;width:100%;margin-bottom:5px;justify-content:space-between;}
.why_timeline_head span{font-family:'Inter',sans-serif;font-weight:700;font-size:16px;letter-spacing:-0.04em;text-transform:uppercase;color:var(--color-text-secondary);}
/* why diagram — 축(고정)과 5개의 why_col로 구성된다. 각 why_col은 pill+커넥터+텍스트를 하나로 묶은 컬럼이라 스크롤 리빌 시 컬럼 전체가 한 덩어리로 순차적으로 내려온다.
x좌표(left, width)는 컨테이너 폭에 대한 %로 잡아 뷰포트가 좁아져도 가로 스크롤 없이 함께 줄어든다. y좌표(top)는 계단 높이 값이라 px로 고정한다 */
.why_diagram{position:relative;width:100%;height:550px;margin-top:40px;border-bottom: 1px solid #D9D5D2;}
.why_axis{position:absolute;top:0;left:0;width:100%;height:1px;background:var(--color-axis-line);}
.why_axis_dot{display:block;position:absolute;top:0;width:8px;height:8px;border:1px solid var(--color-text-secondary);border-radius:2px;background:var(--color-bg);z-index:6;transform:translate(-50%,-50%);}
.why_axis:after {content: ""; position: absolute;right: -5px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 3px solid transparent;border-bottom: 3px solid transparent;border-left: 6px solid #5f5b55;}
.why_line_col_1{left: 1.35%;}
.why_line_col_2{left: 20.95%;}
.why_line_col_3{left: 40.6%;}
.why_line_col_4{left: 60.2%;}
.why_line_col_5{left: 79.85%;}
/* why col — pill·커넥터(점선+점)·텍스트를 한 단위로 묶은 컬럼. 커넥터는 이 컬럼의 ::before(점선)·::after(점)로 구현해, 컬럼 전체가 하나의 요소로 함께 페이드·이동한다 */
.why_col{position:absolute;top:0;width:21.51%;}
.why_col::before{content:'';display:block;position:absolute;top:0;left:25px;width:0;height:410px;border-left:1px dashed var(--color-accent-red);z-index:1;}
.why_col::after{content:'';display:block;position:absolute;top:409px;left:22px;width:7px;height:7px;border-radius:50%;background:var(--color-accent-red);}
.why_step{display:flex;position:absolute;width:100%;height:55px;padding:0 15px;border-radius:2px;background:var(--color-text-dark);align-items:center;gap:7px;z-index:2;}
.why_step_num{display:flex;width: 22px;height: 22px;border-radius: 50%; background: var(--color-bg); font-family: 'Inter', sans-serif;font-weight: 800; font-size: 17px; letter-spacing: -0.04em;letter-spacing:-0.04em;color:var(--color-text-dark);justify-content:center;align-items:center;}
.why_step_tit{font-family:'Inter',sans-serif;font-weight:600;font-size:22px;letter-spacing:-0.04em;color:var(--color-bg);}
.why_step_text{position:absolute;top:400px;left:42px;width:75%;word-break:keep-all;overflow-wrap:break-word;}
.why_step_text_tit{margin-bottom:15px;font-family:'Pretendard',sans-serif;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-0.03em;color:var(--color-text-dark);}
.why_step_text_desc{font-family:'Pretendard',sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:150%;letter-spacing:-0.7px;color:var(--color-text-secondary);
text-align: left; word-break: keep-all; overflow-wrap: break-word;}
.why_step_col_1{left:0;z-index:5;}
.why_step_col_1 .why_step{top:37px;}
.why_step_col_2{left:19.62%;z-index:4;}
.why_step_col_2 .why_step{top:105px;}
.why_step_col_3{left:39.25%;z-index:3;}
.why_step_col_3 .why_step{top:172px;}
.why_step_col_4{left:58.87%;z-index:2;}
.why_step_col_4 .why_step{top:238px;}
.why_step_col_5{left:78.49%;z-index:1;}
.why_step_col_5 .why_step{top:304px;}
/* our difference — managed_services.html 전용 "왜 차별화되는가" 벤다이어그램 섹션. 원래 sub_common.css에 있었으나 managed_services.html에서만 쓰여 이 파일로 옮겼다 */
.our_difference_section{width:100%;padding:100px 0;}
.difference_inner{max-width:1920px;margin:0 auto;padding:0 30px;}
.difference_subtitle{margin-top:-55px;margin-bottom:80px;font-family:'Inter',sans-serif;font-weight:700;font-size:20px;line-height:1em;letter-spacing:-0.04em;text-align:center;color:var(--color-text-dark);}
/* difference diagram — 원 4개가 겹치는 벤다이어그램. 컬럼(difference_col)은 flex row로 흘려보내고, 원은 자기 컬럼 폭(겹침 전 간격)보다 넓게 만들어 다음 컬럼 쪽으로 자연스럽게 겹치게 한다.
마지막 컬럼은 겹칠 다음 원이 없어 폭을 원 지름만큼만 차지한다(:last-child로 예외 처리) */
.difference_diagram{position:relative;display:flex;width:100%;max-width:1505px;height:580px;margin:0 auto;margin-top:40px;}
.difference_col{display:flex;flex:0 0 24.25%;flex-direction:column;align-items:flex-start;gap:40px;}
.difference_col:last-child{flex-basis:27.24%;}
.difference_circle{display:flex;width:112.33%;height:410px;border:1px solid #67635F;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:20px;}
.difference_col:last-child .difference_circle{width:100%;}
.difference_circle_tit{font-family:'Inter',sans-serif;font-weight:700;font-size:28px;line-height:0.99em;letter-spacing:-0.05em;text-align:center;color:var(--color-text-dark);}
.difference_circle_kr{font-family:'Pretendard',sans-serif;font-weight:600;font-size:18px;line-height:0.99em;letter-spacing:-0.05em;text-align:center;color:#353533;}
.difference_text{position:relative;width:79.45%;margin-left:16.45%;font-family:'Pretendard',sans-serif;font-weight:600;font-size:20px;line-height:1.5em;letter-spacing:-0.02em;text-align:center;color:var(--color-text-dark);word-break:keep-all;overflow-wrap:break-word;}
.difference_col:nth-child(n+2) .difference_text:before {content:'';position:absolute;left:-38px;top:50%;transform:translateY(-50%);width:1px;height:287px;border-left: 1px dashed #a6a6a6;}
.difference_col:last-child .difference_text{width:70.75%;margin-left:14.65%;}
/* difference overlay — 원이 겹치는 3개 경계에만 얹히는 장식(렌즈, 마커, 점선). 문서 흐름과 무관한 오버레이라 absolute를 쓴다 */
.difference_intersect{display:block;position:absolute;top:108px;width:3%;height:195px;}
.difference_intersect_col_1{left:24.25%;}
.difference_intersect_col_2{left:48.50%;}
.difference_intersect_col_3{left:72.76%;}
.difference_marker{display:block;position:absolute;width:8px;height:8px;background:var(--color-bg);border:1px solid var(--color-accent-red);transform:translate(-50%,-50%);}
.difference_marker_top{top:113px;}
.difference_marker_bottom{top:297px;}
.difference_marker_col_1{left:25.75%;}
.difference_marker_col_2{left:50%;}
.difference_marker_col_3{left:74.25%;}
.difference_connector{display:block;position:absolute;top:310px;width:0;height:140px;border-left:1px dashed var(--color-connector-gray);}
/* solution card */
.solution_card.swiper-slide{width:min(880px,45.8vw);height:auto;flex-shrink:0;}
.solution_card{display:flex;width:100%;flex-direction:column;}
.solution_card_link{display:flex;width:100%;flex-direction:column;color:inherit;text-decoration:none;cursor:pointer;}
/* solution card media */
.solution_card_media{display:flex;overflow:hidden;position:relative;width:100%;height:460px;border-radius:2px;}
.solution_card_bg{display:block;width:100%;height:100%;transition:transform var(--transition-slow);will-change:transform;object-fit:cover;}
.solution_card_link:hover .solution_card_bg{transform:scale(1.05);}
/* 썸네일 딤드 — Figma 상 카드마다 딤 강도가 다르다(기본 10%, is_strong 15%) */
.solution_card_dim{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.1);pointer-events:none;}
.solution_card_dim.is_strong{background:rgba(0,0,0,0.15);}
.solution_card_name{position:absolute;top:30px;left:30px;font-family:'Zalando Sans Expanded',sans-serif;font-weight:800;font-size:70px;line-height:0.9;letter-spacing:-0.02em;color:var(--color-white);}
.solution_card_head{display:flex;position:absolute;top:10px;left:0;align-items:center;gap:5px;}
.solution_card_head .solution_card_name{position:static;top:auto;left:auto;}
.solution_card_badge{display:block;width:130px;height:auto;border-radius:12px;flex-shrink:0;}
.solution_card_arrow{display:flex;overflow:hidden;position:absolute;right:0;bottom:0;width:95px;height:95px;transition:transform var(--transition-base),background-color var(--transition-base);justify-content:center;align-items:center;}
.solution_card_arrow img{width:100%;height:100%;object-fit:cover;}
.solution_card_link:hover .solution_card_arrow{transform:scale(1.1) rotate(10deg);}
/* solution card body */
.solution_card_body{display:flex;width:100%;padding:40px 30px;background:var(--color-white);border-radius:0 0 2px 2px;align-items:center;gap:35px;}
.solution_card_text{display:flex;flex:1;flex-direction:column;gap:15px;}
.solution_card_tit{font-family:'Pretendard',sans-serif;font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-0.02em;text-transform:uppercase;color:var(--color-text-dark);}
.solution_card_desc{font-family:'Pretendard',sans-serif;font-weight:500;font-size:18px;line-height:1.5;letter-spacing:-0.01em;color:var(--color-text-secondary);word-break:keep-all;overflow-wrap:break-word;}
.solution_card_tags{display:flex;flex-direction:column;flex-shrink:0;align-items:flex-end;gap:3px;}
.solution_card_tags li{font-family:'Pretendard',sans-serif;font-weight:600;font-size:13px;line-height:1.4;letter-spacing:-0.01em;color:#AFABA2;white-space:nowrap;}
/* solution popup — 팝업 마크업은 1개뿐이라 클릭한 카드 데이터를 sub.js가 채워 넣는다. 카드마다 해시가
달라 :target으로 구분이 안 되므로 is_open 클래스로 표시 여부를 제어한다 */
/* 열릴 때 opacity는 즉시(0s) 1로 — clone이 이미 화면을 덮고 있어 안 보이지만, 배경을 미리 완성해둬야
clone이 사라질 때 배경·텍스트가 동시에 반투명해지는 유령 현상이 없다. 닫을 때는 0.6s로 페이드아웃 */
.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;opacity:0;pointer-events:none;transition:opacity 0.6s ease,visibility 0s linear 0.6s;}
.solution_popup.is_open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity 0s,visibility 0s linear 0s;}
.solution_popup_inner{overflow:hidden;position:relative;width:100%;height:100%;background:#B5B5A6;}
/* popup bg — 리스트 카드의 썸네일과 동일한 이미지. 확대 모션은 clone이 전담하므로 여기선 정적으로 둔다 */
.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.7);pointer-events:none;}
/* 카드 확장 클론 — sub.js가 클릭한 카드 썸네일을 복제해 transform만으로 전체화면까지 키운다.
팝업(z-index:300) 위, 커스텀 커서(999) 아래에 있어 애니메이션 동안 팝업을 가리다가 사라진다 */
.solution_card_expand_clone{display:block;overflow:hidden;position:fixed;top:0;left:0;z-index:310;width:100vw;height:100vh;pointer-events:none;will-change:transform,opacity;}
.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 */
.solution_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;}
.solution_popup_close::before,
.solution_popup_close::after{content:'';display:block;position:absolute;width:28px;height:2px;background:var(--color-white);}
.solution_popup_close::before{transform:rotate(45deg);}
.solution_popup_close::after{transform:rotate(-45deg);}
/* popup content — 클론이 다 사라진 뒤(0.6s 지연)에야 페이드+슬라이드업으로 등장한다 */
/* popup content — 내용이 뷰포트보다 길어질 때만 이 영역 안에서 스크롤된다(auto라 넘치지 않으면 스크롤바도 안 생긴다).
스크롤을 _inner가 아니라 _content가 맡는 이유 — _bg·_badge·_close는 _inner 기준 absolute 형제라, _content만 스크롤시키면 배경·뱃지·닫기버튼이 그대로 고정된다.
overscroll-behavior:contain은 끝까지 스크롤했을 때 뒤 페이지로 스크롤이 넘어가는 것(scroll chaining)을 막는다.
마크업의 data-lenis-prevent도 함께 필요하다 — PC는 Lenis(smoothWheel)가 휠을 가로채서 이 속성이 없으면 팝업 대신 뒤 페이지가 굴러간다(실측 확인) */
.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;opacity:0;transform:translateY(20px);transition:opacity 0.45s ease,transform 0.45s ease;}
.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;font-weight:800;font-size:90px;line-height:0.9;letter-spacing:-0.02em;color:var(--color-white);}
/* 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;}
.solution_popup_headline{font-family:'Pretendard',sans-serif;font-weight:700;font-size:40px;line-height:1.2;letter-spacing:0em;text-transform:uppercase;color:var(--color-white);}
.solution_popup_desc{font-family:'Pretendard',sans-serif;font-weight:500;font-size:24px;line-height:1.5;letter-spacing:0em;color:rgba(255,255,255,0.8);max-width: 1000px;}
.solution_popup_tags{display:flex;flex-wrap:wrap;gap:5px;}
.solution_popup_tags li{padding:10px 12px 8px;border-radius:2px;background:#000000;font-family:'Pretendard',sans-serif;font-weight:600;font-size:18px;line-height:1.4;letter-spacing:0em;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:6px 8px;background:var(--color-white);font-family:'Pretendard',sans-serif;font-weight:700;font-size:24px;line-height:1.14;letter-spacing:0em;color:var(--color-text-dark);}
.solution_popup_stat_desc{font-family:'Pretendard',sans-serif;font-weight:400;font-size:20px;line-height:1.44;letter-spacing:0em;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;opacity:0;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;}
/*GIF SIZE*/
.sub_hero_mascot{position:absolute;top:180px;right:30px;width:331px;height:265px;}
/* PC 비율 축소 (1025px~1920px) — 1920 디자인 기준 px를 vw로 변환해 레이아웃 재배치 없이 비율만 축소한다. 계산식: vw = px / 1920 * 100 */
@media screen and (min-width:1025px) and (max-width:1920px){
.solution_section{padding:3vw 0 9.5vw;}
.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_col:nth-child(n+2) .difference_text:before{left:-1.979vw;height:14.479vw;}
.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;*/}
}
@media only screen and (max-width:1024px){
.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 diagram mobile — PC는 가로 축(.why_axis) 위에 5개 컬럼을 absolute로 계단처럼 배치하지만, 모바일은 좌측 세로 점선 축 + 스텝 세로 스택이다.
그래서 컬럼을 absolute에서 flex 흐름으로 되돌리고, 가로 축은 숨긴다. 커넥터는 PC와 동일하게 .why_col의 ::before(점선)·::after(점)를 재사용하고,
점선만 자기 pill 중앙(18px)에서 다음 컬럼 pill 중앙(컬럼 하단 + gap 40px + 18px = 58px)까지 이어지도록 top/bottom으로 늘린다.
수치는 Figma 모바일 프레임(375px) 값을 px 고정으로 쓴다 */
.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 기준으로 넣은
이라 모바일에선 자연 줄바꿈에 맡긴다 */
.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:42px;}
.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가 남긴 빈
이 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_desc br {display:none;}
.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);}
.difference_diagram{flex-direction:column;margin-top:60px;height:auto;gap:clamp(30px,6.2vw,60px);}
.difference_col{align-items:center;gap:30px;}
.difference_col + .difference_col {padding-top:clamp(30px,6.2vw,60px);position:relative;}
.difference_col + .difference_col:before {content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:clamp(120px,20vw,200px);height:1px;border-top:1px dashed #B71C1C;}
.difference_circle{width: clamp(220px, 38vw, 400px);aspect-ratio: 1 / 1;height:auto;gap: clamp(6px, 2vw, 20px);}
.difference_text{margin-left:0;font-size: clamp(16px, 2.7vw, 20px);}
.difference_circle_tit{font-size:clamp(20px,2.8vw,28px);}
.difference_circle_kr{font-size:clamp(14px,1.8vw,18px);}
.difference_col:nth-child(n+2) .difference_text:before,.difference_intersect, .difference_marker{display:none;}
}
@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:50px;letter-spacing:-2.5px;}
.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;}
}