/* =====================================================
 SUB COMMON STYLES
 업종별 서브페이지(예: pharm_renew.html)가 공유하는 레이아웃/컴포넌트.
 페이지 전용 스타일(예: pharm_renew.css)에는 이 파일의 클래스를 그대로
 갖다 쓰고, 새 업종 서브페이지를 만들 때도 이 파일의 클래스를 재사용한다.
 클래스명은 업종명이 아니라 "업종을 가리지 않는" bus_ 접두사로 짓는다
 (예: pharm_img_card(X) -> bus_img_card(O)).
 선택자는 항상 2개 이상의 단순 선택자를 결합한 복합 선택자로 작성한다div.area.bus_intro .inner
 (예: div.area, .area .inner, .bus_feature-row .bus_feature-row__body).
===================================================== */

/* =====================================================
 LAYOUT - .area(섹션) > .inner(가운데 정렬 + 상하 패딩)
 예) <div class="area bus_banner"><div class="inner">...</div></div>
 섹션별 상하 패딩값만 .area에 붙는 수식 클래스(bus_*)로 다르게 주고,
 실제 padding 선언은 항상 .inner 한 곳에서만 관리한다.
===================================================== */
div.area { position: relative; background: #fff; overflow: visible; } 
div.area .inner { max-width: 1200px; margin: 0 auto; padding: 160px 20px; } 
/* .bus_sec-head를 감싸던 .inner를 걷어내고(아래 SECTION HEAD 참고)
 .area 자체에 상단 여백을 준다 - bus_feature-sticky 두 행은 원래도 .inner
 밖에 있었으므로 이 섹션은 이제 .inner를 전혀 쓰지 않는다. */
 div.area.bus_intro .inner { 
 padding: 0px 30px 160px; 
 } 
/* bus_intro .inner가 이미 하단 160px 여백을 주므로, 여기서 또 padding-top을
 더하면 스크롤해도 빈 공간만 한참 지나가고 bus_feature가 늦게 나타난다 -
 intro 카드 바로 다음에 바로 올라와 보이도록 이 섹션은 자체 padding-top을 두지 않는다. */

/* =====================================================
 BANNER - 서브페이지 최상단 배너(고정 높이 + 배경 이미지 + 중앙 헤딩)
 이미지는 수동 삽입 예정이라 배경 영역만 잡아둔다.
 진입 애니메이션: 로드 시 잠시 풀스크린(뷰포트 전체)으로 꽉 채워 보였다가,
 sub_common.js가 짧은 지연 후 .is-intro를 떼면 지정된 높이로 위로 접혀 올라간다
 (.inner가 flex 중앙 정렬이라 헤딩도 함께 자연스럽게 최종 위치로 모인다).
===================================================== */
div.area.bus_banner { 
 height: 314px; 
 overflow: hidden; 
 margin-top: 76px; 
 transition: height 1.1s var(--ease-smooth); 
 } 
div.area.bus_banner.is-intro { height: calc(100vh - 76px); } 
div.area.bus_banner .inner { 
 height: 100%; 
 display: flex; 
 align-items: center; 
 justify-content: center; 

 } 
/* 배경 이미지는 네트워크로 비동기 로드되는데, 로드 전에는 .area의 기본 흰 배경(위 LAYOUT 참고)이
 그대로 드러난다. 이미지가 그려지기 전에도 배너 영역이 밋밋한 흰 화면으로 비지 않도록 어두운
 폴백 색을 깔아 둔다. */
.bus_banner .bus_banner__bg { position: absolute; inset: 0; z-index: 0; background: var(--colors-dark); } 
.bus_banner__bg img,
.bus_banner__bg video { width: 100%; height: 100%; object-fit: cover; } 
.bus_banner__bg::after { 
 content: ''; 
 position: absolute; 
 inset: 0; 
 background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0.7)); 
 } 
.bus_banner .bus_banner__heading { 
 position: relative; 
 z-index: 1; 
 text-align: center; 
 font-family: 'Pretendard', sans-serif; 
 font-weight: 700; 
 font-size: 2.8rem; 
 line-height: 1.22; 
 letter-spacing: -0.025em; 
 } 
.bus_banner__heading .thin_txt { font-weight: 400; } 

/* =====================================================
 HERO (확장형 배너) - 좌측 정렬 타이틀 + 사진이 스크롤 한 번에 풀 사이즈로
 커지는 히어로. bus_banner(고정 크기 배너)와 달리, 페이지 최상단에서 wheel
 한 번을 감지해 .bus_hero-stage에 .is-expanded를 붙이는 JS(각 페이지 전용
 스크립트, 예: location_renew.js)가 필요하다 - 실제 "커지는/줄어드는"
 애니메이션 자체는 아래 CSS transition이 담당하고, JS는 클래스 토글만 한다.
 예) <div class="area bus_hero">
 <div class="bus_hero-stage" id="xxxHeroStage">
 <div class="bus_hero-stage__copy"><div class="bus_page-head">...</div></div>
 <div class="bus_hero-stage__media"><img ...></div>
 </div>
 </div>
===================================================== */
div.area.bus_hero { margin-top: 76px; } 
.bus_hero .bus_hero-stage { position: relative; height: 640px; } 

.bus_hero-stage .bus_hero-stage__copy { 
 position: absolute; 
 top: 64px; 
 left: max(32px, calc((100vw - 1200px) / 2)); 
 right: max(32px, calc((100vw - 1200px) / 2)); 
 z-index: 2; 
 transition: top .6s var(--ease-smooth); 
 } 
.bus_hero-stage__copy .bus_page-head { display: flex; flex-direction: column; gap: 6px; } 
.bus_page-head .bus_page-head__eyebrow { font-size: 1.25rem; font-weight: 600; color: var(--colors-primary); letter-spacing: -0.025em; transition: color .4s ease; } 
.bus_page-head .bus_page-head__title { font-size: 2.875rem; font-weight: 900; color: var(--colors-text-primary); letter-spacing: -0.025em; line-height: 1.22; transition: color .4s ease; } 
.bus_page-head .bus_page-head__sub { font-size: 1.25rem; color: var(--colors-text-secondary); letter-spacing: -0.025em; transition: color .4s ease; line-height: 1.3; } 

.bus_hero-stage .bus_hero-stage__media { 
 position: absolute; 
 top: 220px; 
 bottom: 40px; 
 left: max(32px, calc((100vw - 1200px) / 2)); 
 right: max(32px, calc((100vw - 1200px) / 2)); 
 z-index: 1; 
 border-radius: 30px; 
 overflow: hidden; 
 background: var(--colors-background); 

 transition: top .6s var(--ease-smooth), bottom .6s var(--ease-smooth), left .6s var(--ease-smooth), right .6s var(--ease-smooth), border-radius .6s var(--ease-smooth); 
 } 
.bus_hero-stage__media img { 
 width: 102%; 
 height: 100%; 
 object-fit: cover; 
 display: block; 
 margin-left: -1%; 
 } 
.bus_hero-stage__media::after { 
 content: ''; 
 position: absolute; 
 inset: 0; 
 background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 100%); 
 opacity: 0; 
 transition: opacity .5s ease; 
 } 

.bus_hero-stage.is-expanded .bus_hero-stage__copy { top: 420px; } 
.bus_hero-stage.is-expanded .bus_hero-stage__media { top: 0; bottom: 0; left: 0; right: 0; border-radius: 0; border-color: transparent; } 
.bus_hero-stage.is-expanded .bus_hero-stage__media::after { opacity: 1; } 
.bus_hero-stage.is-expanded .bus_page-head__title { color: #fff; } 
.bus_hero-stage.is-expanded .bus_page-head__sub { color: rgba(255, 255, 255, .8); } 
.bus_hero-stage.is-expanded .bus_page-head__eyebrow { color: #fff; } 

/* =====================================================
 INTRO CARD - 배너 하단에 얹는 "ONE STOP SOLUTION" 카드
 (좌/우 이미지 자리 + 우/좌 텍스트, .bus_intro-card--reverse로 순서 반전)
===================================================== */
div.area.bus_intro { padding-top: 0; } 

.inner .bus_intro-card { 
 display: flex; 
 align-items: stretch; 
 max-width: 1200px; 
 min-height: 423px; 
 margin: 0 auto; 
 background: #fff; 
 border: 1px solid var(--colors-border); 
 border-radius: var(--border-radius-xl); 
 box-shadow: 0 10px 32px var(--colors-primary-light); 
 overflow: hidden; 
 } 
.bus_intro-card.bus_intro-card--reverse { flex-direction: row-reverse; } 
.bus_intro-card .bus_intro-card__media { flex: 0 0 560px; background: var(--colors-dark); } 
.bus_intro-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } 
.bus_intro-card__media iframe { width: 100%; height: 100%; display: block; border: 0; } 
.bus_intro-card .bus_intro-card__body { 
 flex: 1; 
 display: flex; 
 flex-direction: column; 
 align-items: flex-start; 
 justify-content: center; 
 gap: 30px; 
 padding: 40px 56px; 
 } 
.bus_intro-card__body .bus_intro-card__eyebrow { 
 display: inline-flex; 
 align-items: center; 
 gap: 8px; 
 font-size: 1rem; 
 letter-spacing: -0.025em; 
 color: var(--colors-text-primary); margin-bottom: 10px; 
 } 
.bus_intro-card__eyebrow::before { content: ''; width: 4px; height: 12px; background: var(--colors-primary); } 
.bus_intro-card__body .bus_intro-card__title { 
 font-family: 'Pretendard', sans-serif; 
 font-weight: 800; 
 font-size: 2.25rem; 
 line-height: 1.28; 
 letter-spacing: -0.025em; 
 color: var(--colors-text-primary); 
 } 
.bus_intro-card .bus_intro-card__actions { display: flex; gap: 10px; } 

/* =====================================================
 SECTION HEAD - 작은 라인 + eyebrow + 타이틀 (기능/부가서비스/제품/추천조합 공용)
 어두운 배경(PLUS 등) 위에서는 .bus_sec-head--on-dark를 추가한다.
===================================================== */
.inner .bus_sec-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin-bottom: 56px; } 
.bus_sec-head .bus_sec-head__bar { width: 30px; height: 2px; background: var(--colors-primary); } 
.bus_sec-head .bus_sec-head__eyebrow { font-size: 1.25rem; color: var(--colors-primary); letter-spacing: -0.025em; } 
.bus_sec-head .bus_sec-head__title { 
 font-family: 'Pretendard', sans-serif; 
 font-weight: 800; 
 font-size: 2.25rem; 
 line-height: 1.28; 
 letter-spacing: -0.025em; 
 color: var(--colors-text-primary); 
 } 
.bus_sec-head.bus_sec-head--on-dark .bus_sec-head__title { color: #fff; } 

/* =====================================================
 CULTURE SEC HEAD - eyebrow + 타이틀 + 서브텍스트 섹션 헤딩 (기업문화 등
 회사정보 서브페이지 공용). bus_sec-head와 달리 장식용 bar가 없고 서브텍스트
 문단이 있다. 기본은 가운데 정렬이고, 좌측 정렬이 필요하면 .ver-left를 추가한다.
 예) <div class="bus_culture-sec-head ver-left">
 <span class="bus_culture-sec-head__eyebrow">...</span>
 <h2 class="bus_culture-sec-head__title">...</h2>
 <p class="bus_culture-sec-head__sub">...</p>
 </div>
===================================================== */
.inner .bus_culture-sec-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin-bottom: 60px; } 
.bus_culture-sec-head .bus_culture-sec-head__eyebrow { font-size: 1.25rem; font-weight: 600; color: var(--colors-primary); letter-spacing: -0.025em; } 
.bus_culture-sec-head .bus_culture-sec-head__title { font-size: 2.25rem; font-weight: 800; color: var(--colors-text-primary); letter-spacing: -0.025em; line-height: 1.28; } 
.bus_culture-sec-head .bus_culture-sec-head__sub { font-size: 1.25rem; color: var(--colors-text-secondary); letter-spacing: -0.025em; margin-top: 4px; line-height: 1.5; } 
.bus_culture-sec-head.ver-left { align-items: flex-start; text-align: left; } 

/* FEATURE STICKY 전용: .inner 밖으로 뺀 .bus_sec-head를 스크롤 중 상단(고정
 GNB 76px 아래)에 붙인다. 컨테이닝 블록이 .area.bus_feature 전체(두
 bus_feature-sticky 행 포함)가 되어야 그 구간 내내 붙어있을 수 있어서,
 헤딩만 감싸던 .inner를 걷어내고 .area.bus_feature의 직계 자식으로 옮겼다. */
div.area.bus_feature > .bus_sec-head { 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 gap: 8px; 
 text-align: center; 
 width: 100%; 
 margin: 0 0 56px; 
 padding: 40px 30px 20px; 
 position: sticky; 
 top: 76px; 
 z-index: 2; 
 background: #fff; 
 transition: background-color .3s ease; 
 } 
/* 두 번째 bus_feature-sticky--reverse 행(연한 파란 배경) 구간을 스크롤하는
 동안에는 sub_common.js가 이 클래스를 붙여, 계속 흰 배경인 채로 파란
 섹션 위에 붕 떠 보이지 않고 뒤에 깔린 배경색과 자연스럽게 어울리게 한다. */
div.area.bus_feature > .bus_sec-head.bus_sec-head--reverse-bg { background: var(--colors-primary-light); } 

/* =====================================================
 FEATURE ROW - 이미지 + 체크리스트가 좌우로 나열되는 기능 소개 행
 짝수 행은 .bus_feature-row--reverse(이미지 우측) + .bus_feature-row--tint(연한 배경)
===================================================== */
div.area .bus_feature-row { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 gap: 80px; 
 padding: 64px 32px; 
 } 
.bus_feature-row.bus_feature-row--reverse { flex-direction: row-reverse; background: var(--colors-primary-light); } 
.bus_feature-row .bus_feature-row__media { 
 flex: 0 0 auto; 
 width: 510px; 
 height: 330px; 
 background: var(--colors-background); 
 border: 1px solid var(--colors-border); 
 border-radius: var(--border-radius-xl); 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 overflow: hidden; 
 } 
.bus_feature-row__media img { max-width: 82%; max-height: 79%; object-fit: contain; border-radius: var(--border-radius-md); box-shadow: 0 0 8px rgba(0, 0, 0, .1); } 
.bus_feature-row .bus_feature-row__body { flex: 0 0 auto; width: 460px; display: flex; flex-direction: column; gap: 20px; } 
.bus_feature .bus_feature-row__title { 
 font-family: 'Pretendard', sans-serif; 
 font-weight: 800; 
 font-size: 2.25rem; 
 line-height: 1.28; 
 letter-spacing: -0.025em; 
 color: var(--colors-text-primary); 
 } 
.bus_feature .bus_feature-row__list { display: flex; flex-direction: column; gap: 10px; } 
.bus_feature-row__list .bus_feature-row__item { display: flex; align-items: flex-start; gap: 8px; font-size: 1rem; line-height: 1.6; letter-spacing: -0.025em; color: var(--colors-text-secondary); word-break: keep-all; align-items: center; } 
.bus_feature-row__item i { color: var(--colors-primary); font-size: 1.125rem; line-height: 1.6; } 
.bus_feature-row__item .txt_wrap { 
 display: flex; 
 align-items: center; 
 font-weight: 400; gap: 2px; 
 } 

/* =====================================================
 FEATURE STICKY - 좌측 이미지는 position:sticky로 고정되고 우측 스텝
 텍스트만 스크롤되다가, 스텝이 바뀌면 GSAP ScrollTrigger(sub_common.js)가
 활성 이미지를 크로스페이드로 전환한다. (참고: naver.com/service/portal
 nav-section과 동일한 "고정 이미지 + 스크롤 텍스트" 패턴)
 텍스트(title/list) 마크업은 .bus_feature-row__title/__list/__item을 그대로 재사용한다.
===================================================== */
div.area .bus_feature-sticky { display: flex; align-items: flex-start; justify-content: center; gap: 80px; padding: 160px 0px; } 
/* 이미지 우측 고정 + 텍스트 좌측 스크롤 (좌우반전 버전) */
.bus_feature-sticky.bus_feature-sticky--reverse { 
 flex-direction: row-reverse; 
 background: var(--colors-primary-light); 
 } 
.bus_feature-sticky .bus_feature-sticky__media { 
 flex: 0 0 510px; 
 height: 330px; 
 position: sticky; 
 /* 화면 전체가 아니라 상단 고정 bus_sec-head(GNB 76px + 자체 높이 약 148px = 224px)
 아래 남는 공간 기준으로 세로 중앙에 오도록 보정한다 - 224px의 절반(112px)만큼
 아래로 밀어야 위 여백/아래 여백이 균등해진다 (330px 높이의 절반 165px - 112px = 53px). */
 top: calc(50vh - 123px); 
 } 
.bus_feature-sticky__media .bus_feature-sticky__img { 
 position: absolute; 
 inset: 0; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 opacity: 0; 
 visibility: hidden; 
 transition: opacity .5s ease; 
 } 
.bus_feature-sticky__img.is-active { opacity: 1; visibility: visible; } 
.bus_feature-sticky__img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--border-radius-md); } 

.bus_feature-sticky .bus_feature-sticky__steps { flex: 0 0 auto; display: flex; flex-direction: column; } 
.bus_feature-sticky__steps .bus_feature-sticky__step { 
 width:553px; 
 min-height: 68vh; 
 display: flex; 
 flex-direction: column; 
 justify-content: flex-start; 
 gap: 40px; 
 opacity: .35; 
 transition: opacity .3s ease; 
 } 
.bus_feature-sticky__step.is-active { opacity: 1; } 

/* =====================================================
 PLUS - 부가서비스 카드 캐러셀(다크 섹션). Swiper로 구현(sub_common.js).
===================================================== */
div.area.bus_plus { background: var(--colors-dark); } 
.bus_plus .bus_plus-viewport { max-width: 1100px; margin: 56px auto 0; overflow: hidden; } 
/* 카드가 5장 미만인 업종은 Swiper를 초기화하지 않고(sub_common.js) 이 클래스만 붙는다 -
 .swiper-wrapper 기본 스타일(display:flex, width:100%)에 justify-content만 더해서
 카드 묶음 전체를 진짜로 가운데에 둔다(Swiper의 centeredSlides는 첫 슬라이드만 중앙에
 맞춰서 카드가 몇 장뿐일 때는 전체가 오른쪽으로 치우쳐 보인다). */
.bus_plus-track.bus_plus-track--static { justify-content: center; gap: 16px; } 
/* 슬라이드 폭/간격은 Swiper(slidesPerView:'auto', spaceBetween)가 관리한다 (sub_common.js) */
.bus_plus-track .bus_plus-card { 
 width: 250px; 
 height: 330px; 
 padding: 24px; 
 display: flex; 
 flex-direction: column; 
 gap: 12px; 
 background: #fff; 
 border-radius: var(--border-radius-xl); 
 box-shadow: 0 8px 30px rgba(48, 106, 255, .05), 0 2px 8px rgba(0, 0, 0, .02); 
 } 
.bus_plus-card .bus_plus-card__badge { align-self: flex-start; } 
.bus_plus-card .bus_plus-card__sub { font-size: 0.9rem; color: var(--colors-text-tertiary); } 
.bus_plus-card .bus_plus-card__title { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.025em; color: var(--colors-text-primary); margin-top: 6px; } 
.bus_plus-card .bus_plus-card__img { flex: 1; min-height: 160px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-md); } 
.bus_plus-card__img img { max-width:100%; max-height: 100%; object-fit: contain; } 

/* =====================================================
 PRODUCT GRID - 정적 3열 그리드 제품 카드(호버 시 "자세히 보기" 노출)
===================================================== */
/* grid(1fr 트랙)는 카드 개수가 3의 배수가 아닐 때 마지막 줄의 빈 트랙이 여백으로만
 남고 카드가 가운데로 오지는 않는다 - flexbox는 줄바꿈된 줄마다 독립적으로
 justify-content를 적용해줘서, 카드가 3의 배수가 아닌 업종(예: 5개)의 마지막 줄도
 가운데 정렬된다. 카드 폭은 각 반응형 구간의 grid-template-columns와 동일한 계산식을
 flex-basis로 옮겨서 열 개수/간격이 기존과 완전히 같게 유지한다. */
.inner .bus_product-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } 
.bus_product-grid .bus_product-card { 
 position: relative; 
 flex: 0 0 calc((100% - 40px) / 3); 
 padding: 24px; 
 border: 1px solid var(--colors-border); 
 border-radius: var(--border-radius-xl); 
 } 
.bus_product-card .bus_product-card__badge { margin-bottom: 14px; background: var(--colors-border); color: var(--colors-text-secondary); } 
.bus_product-card .bus_product-card__title { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.025em; color: var(--colors-text-primary); } 
.bus_product-card .bus_product-card__sub { margin-top: 6px; font-size: 0.9rem; color: var(--colors-text-secondary); word-break: keep-all; line-height: 1.5; } 
.bus_product-card .bus_product-card__img { height: 184px; margin-top: 20px; display: flex; align-items: center; justify-content: center; } 
.bus_product-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; } 

/* =====================================================
 RESPONSIVE
 브레이크포인트는 common_renew.css/main_renew.css와 동일하게
 1200 / 992 / 768 / 576을 쓴다.
===================================================== */
@media (max-width: 1200px) { 
 div.area .inner { padding: 120px 2%; } 
 div.area.bus_feature { padding-top: 120px; } 

 .bus_banner .bus_banner__heading { font-size: 2.6rem; } 
 .bus_sec-head .bus_sec-head__title,
 .bus_intro-card__body .bus_intro-card__title { font-size: 2rem; } 

 /* 두 컬럼 폭이 고정값(510+80+460)이라 992 이전에 좁은 화면에서 넘칠 수 있어
 구조를 바꾸기 전에 폭만 한 단계 줄여둔다 */
 div.area .bus_feature-row,
 div.area .bus_feature-sticky { gap: 40px; } 
 .bus_feature-row .bus_feature-row__media { width: 420px; } 
 .bus_feature-sticky .bus_feature-sticky__media { flex-basis: 420px; } 
 .bus_feature-row .bus_feature-row__body,
 .bus_feature-sticky__steps .bus_feature-sticky__step { width: 420px; } 
 .bus_feature .bus_feature-row__title { font-size: 1.8rem; } 

 .bus_hero-stage .bus_hero-stage__copy { top: 8%; } 

 } 

@media (max-width: 992px) { 
 div.area.bus_banner { height: 300px; } 
 .bus_banner .bus_banner__heading { font-size: 2.3rem; } 

 .bus_page-head .bus_page-head__title { font-size: 2.3rem; } 
 .bus_page-head .bus_page-head__sub { 
 font-size: 1.1rem; 
 } 

 .bus_culture-sec-head .bus_culture-sec-head__title { font-size: 1.9rem; } 
 .bus_hero .bus_hero-stage { height: 520px; } 
 .bus_hero-stage .bus_hero-stage__media { top: 190px; border-radius: 10px; } 
 .bus_hero-stage.is-expanded .bus_hero-stage__copy { top: 330px; } 
 .bus_culture-sec-head .bus_culture-sec-head__sub { 
 font-size: 1.1rem; 
 } 

 div.area .inner { padding: 100px 2%; } 
 div.area.bus_feature { padding-top: 100px; } 

 .bus_sec-head .bus_sec-head__title,
 .bus_intro-card__body .bus_intro-card__title { font-size: 1.9rem; } 
 .inner .bus_intro-card { flex-direction: column; } 
 .bus_intro-card.bus_intro-card--reverse { flex-direction: column; } 
 .bus_intro-card .bus_intro-card__media { flex-basis: 260px; width: 100%; } 
 .bus_intro-card .bus_intro-card__body { width: 100%; padding: 32px; } 

 div.area .bus_feature-row { flex-direction: column; gap: 32px; } 
 .bus_feature-row.bus_feature-row--reverse { flex-direction: column; } 
 .bus_feature-row .bus_feature-row__media,
 .bus_feature-row .bus_feature-row__body { width: 100%; } 
 .bus_feature-row__item .txt_wrap { gap: 1px; } 
 .bus_feature .bus_feature-row__title { font-size: 1.8rem; } 

 /* 이 구간까지는 이미지/텍스트 좌우 배치(+ sticky 고정/크로스페이드)를 데스크톱과
 동일하게 유지하고, 두 컬럼 폭만 화면에 맞게 한 단계 더 줄인다. 상하로 쌓는 건
 576px 이하부터다(아래 참고). */
 div.area .bus_feature-sticky { gap: 24px; } 
 .bus_feature-sticky .bus_feature-sticky__media { flex-basis: 270px; height: 260px; } 
 .bus_feature-sticky__steps .bus_feature-sticky__step { width: 430px; gap: 20px; } 

 .inner .bus_culture-sec-head { 
 margin-bottom: 6%; 
 } 

.inner .bus_product-grid { 
 gap: 10px; 
 } 
.bus_product-grid .bus_product-card { 
 padding: 2%; 
 border-radius: 12px; flex: 0 0 calc((100% - 20px) / 3); 
 } 
.bus_product-card .bus_product-card__badge { 
 margin-bottom: 5%; 
 } 
.bus_product-card .bus_product-card__title { 
 font-size: 1.1rem; 
 } 
.bus_product-card .bus_product-card__img { 
 height: 18vw; 
 margin-top: 0px; 
 } 
 } 

@media (max-width: 768px) { 
 div.area .inner { padding: 80px 2%; } 
 div.area.bus_feature { padding-top: 80px; } 
 
 .bus_page-head .bus_page-head__sub { 
 font-size: 1rem; 
 line-height: 1.5; 
 } 
 .bus_banner .bus_banner__heading { font-size: 2rem; } 
 .bus_sec-head .bus_sec-head__title,
 .bus_intro-card__body .bus_intro-card__title { font-size: 1.7rem; } 
 .bus_sec-head .bus_sec-head__eyebrow { font-size: 1.1rem; } 
 .inner .bus_sec-head { margin-bottom: 40px; } 
 div.area.bus_feature > .bus_sec-head { margin-bottom: 40px; } 

 .inner .bus_intro-card { 
 border-radius: 12px; 
 } 
 .bus_intro-card .bus_intro-card__actions { flex-wrap: wrap; } 

div.area .bus_feature-sticky { 
 padding: 3% 0px; 
 } 
 .bus_feature .bus_feature-row__title { font-size: 1.6rem; } 

 /* 이 화면부터 이미지/텍스트를 상하로 쌓는다(그 위 breakpoint는 좌우 배치 유지).
 이미지 영역은 배경색을 입힌 독립된 100% 폭 카드로 분리하고 - .bus_sec-head도 자연스러운
 문서 흐름으로 되돌린다 - 텍스트는 중앙 정렬하고 opacity와 함께 translateY도 같이
 트랜지션해서, 다음 스텝으로 넘어갈 때 위로 올라가며 사라지는 느낌이 나게 한다. */
 div.area.bus_feature > .bus_sec-head { position: static; } 
 div.area .bus_feature-sticky { flex-direction: column; gap: 16px; } 
 .bus_feature-sticky .bus_feature-sticky__media { 
 width: 100%; 
 height: 200px; 
 top: 76px; 
 z-index: 1; background: #fff; 
 } 
 .bus_feature-sticky.bus_feature-sticky--reverse .bus_feature-sticky__media { 
 background: var(--colors-primary-light); 
 } 
 .bus_feature-sticky__media .bus_feature-sticky__img { 
 padding: 20px 0; 
 } 
 .bus_feature-sticky .bus_feature-sticky__steps { width: 100%; align-items: center; margin-top: 16px; } 
 .bus_feature-sticky__steps .bus_feature-sticky__step { 
 width: 100%; 
 justify-content: center; 
 align-items: center; 
 text-align: center; 
 opacity: .35; 
 transform: translateY(-12px); 
 transition: opacity .4s ease, transform .4s ease; 
 } 
 .bus_feature-sticky__step.is-active { opacity: 1; transform: translateY(0); } 
 .bus_feature-sticky .bus_feature-row__list { align-items: center; } 

 .bus_plus .bus_plus-viewport { margin-top: 32px; } 

 .inner .bus_product-grid { gap: 12px; } 
 .bus_product-grid .bus_product-card { flex-basis: calc((100% - 24px) / 3); } 
 .bus_product-card .bus_product-card__badge { 
 font-weight: 500; 
 } 
 .bus_product-card .bus_product-card__title { 
 font-size: 1rem; word-break: keep-all; 
 } 
 .bus_product-card .bus_product-card__sub { 
 font-size: 0.8rem; 
 line-height: 1.4; 
 } 
 } 

@media (max-width: 576px) { 

 div.area.bus_banner { height: 260px; } 
 /* 이 구간부터 GNB가 54px로 줄어든다(common_renew.css) - margin-top/is-intro
 높이가 위 breakpoint의 76px 그대로면 줄어든 헤더 밑으로 빈 틈이 생긴다. */
 div.area.bus_banner { margin-top: 54px; } 
 div.area.bus_banner.is-intro { height: calc(100vh - 54px); } 
 div.area.bus_intro .inner { padding: 0px 30px 0px; } 
div.area .bus_feature-sticky {    padding: 64px 3% 44px;}
div.area.bus_recommend .inner {  padding: 0px 3% 64px;}

 .bus_banner .bus_banner__heading { font-size: 1.6rem; } 
 .bus_hero .bus_hero-stage { height: 420px; } 
 .bus_page-head .bus_page-head__sub { font-size: 1.05rem; } 
 .bus_page-head .bus_page-head__title { 
 font-size: 1.8rem; 
 font-weight: 800; 
 } 
 .bus_culture-sec-head .bus_culture-sec-head__eyebrow { 
 font-size: 1rem; 
 } 
 .bus_page-head .bus_page-head__sub { 
 font-size: 0.9rem; 
 } 
 .bus_culture-sec-head .bus_culture-sec-head__title { 
 font-size: 1.4rem; 
 } 
 .bus_culture-sec-head .bus_culture-sec-head__sub { 
 font-size: 0.9rem; 
 } 
.bus_trust-label .bus_trust-label__title { 
 font-size: 1.3rem; 
 } 

 .bus_hero-stage.is-expanded .bus_hero-stage__copy { top: 260px; } 
 .bus_hero-stage.is-expanded .bus_hero-stage__media { border-radius: 0; } 

 div.area .inner { padding: 64px 3%; } 
 div.area.bus_feature { padding-top: 64px; } 

 .bus_sec-head .bus_sec-head__title,
 .bus_intro-card__body .bus_intro-card__title { font-size: 1.4rem; } 
 .bus_sec-head .bus_sec-head__eyebrow { font-size: 1rem; } 

 .bus_intro-card .bus_intro-card__body { padding: 24px; gap: 20px; } 
 .bus_intro-card .bus_intro-card__actions { width: 100%; } 
 .bus_intro-card__actions .btn { flex: 1; } 

 .bus_feature .bus_feature-row__title { font-size: 1.4rem; } 

 /* 이 구간부터는 GNB 높이가 54px로 줄어든다(common_renew.css) - media의
 sticky top이 위 breakpoint의 76px 그대로면 줄어든 헤더 밑으로 빈 틈이 생긴다. */
 .bus_feature-sticky .bus_feature-sticky__media { top: 54px; } 
 .bus_feature-sticky .bus_feature-sticky__steps { 
 padding: 0 2%; 
 } 
 .bus_feature-sticky .bus_feature-row__list { width: 85vw; } 
 .bus_feature-row__list .bus_feature-row__item { 
 text-align: left; 
 font-size: 0.9rem; width: 100%; 
 } 
 .bus_feature-row__item .txt_wrap { 
 flex-wrap: wrap; 
 } 
 .bus_product-grid .bus_product-card { flex-basis: 48%; } 
 /* 2열로 좁아지면 카드마다 __sub 텍스트 줄바꿈 수(1~3줄)가 달라져 카드 높이가
 들쑥날쑥해진다 - 실제 줄 수와 무관하게 3줄 높이를 항상 확보해서 뒤에 오는
 이미지 영역이 카드마다 같은 위치에서 시작하도록 맞춘다. */
 .bus_product-card .bus_product-card__sub { min-height: calc(0.8rem * 1.4 * 3); } 
 } 

/* =====================================================
 SUB EVENTBAR — bus_feature 진입 시 하단 고정 CTA
 (include/eventbar_sub.html + sub_common.js loadSubEventbar로 제어)
===================================================== */
.package__eventbar { 
 position: fixed; 
 left: 50%; 
 bottom: 54px; 
 z-index: 3; 
 display: flex; 
 align-items: center; 
 gap: 14px; 
 background: #fff; 
 border: 1px solid var(--colors-border); 
 border-radius: var(--border-radius-full); 
 padding: 9px 11px 9px 19px; 
 width: 650px; 
 max-width: calc(100% - 40px); 
 box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); 
 opacity: 0; 
 visibility: hidden; 
 pointer-events: none; 
 transform: translateX(-50%) translateY(16px); 
 transition: opacity .3s ease, transform .3s ease, visibility .3s ease; 
 } 
.package__eventbar.show { 
 opacity: 1; 
 visibility: visible; 
 pointer-events: auto; 
 transform: translateX(-50%) translateY(0); 
 } 
.package__eventbar .badge { flex-shrink: 0; } 
.package__eventbar .package__event-text { flex: 1; font-size: 1rem; color: var(--colors-text-primary); } 

@media (max-width: 768px) { 
 .package__eventbar { flex-wrap: wrap; bottom: 12px; } 
 .package__eventbar.show { transform: translateX(-50%) translateY(0); } 
 } 
@media (max-width: 576px) { 
 .package__eventbar { 
 width: 100%; 
 max-width: inherit; 
 border-radius: 0; 
 left: 0; 
 bottom: 0; 
 padding: 9px 6px; 
 gap: 8px; 
 transform: inherit; 
 }
 .package__eventbar.show { transform: inherit; }
 }

/* =====================================================
 CONTENT PAGE BANNER - 배너 이미지 없이 흰 배경 + 제목만 있는 서브페이지 상단
 배너(고객지원 하위 페이지 공용: 공지사항/고객FAQ/자료실). bus_banner(업종
 페이지의 이미지 히어로 배너)와는 다른 컴포넌트다. 페이지마다 각자 CSS
 파일에서 다시 정의하면 서로 다른 폰트 크기로 흩어질 수 있어 여기 한 곳만
 관리한다 - 새 고객지원 하위 페이지를 만들 때도 이 클래스를 그대로 쓴다.
 예) <div class="wrapper"><div class="pf-banner banner"><h2>공지사항</h2></div>...
===================================================== */
.page-renew .wrapper {
    background: #fff;
    min-height: calc(100vh - 76px);
}

.page-renew .pf-banner.banner {
    background-image: none;
    background-color: #fff;
    background-attachment: initial;
    border-bottom: 1px solid var(--colors-border);
    margin-top: 76px;
    padding: 0;
}

.page-renew .pf-banner.banner > h2 {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--colors-text-primary);
    text-align: center;
    padding: 80px 0 72px;
    margin: 0;
}

@media (max-width: 768px) {
    .page-renew .pf-banner.banner > h2 {
        font-size: 1.75rem;
        padding: 56px 24px 48px;
    }
}

@media (max-width: 576px) {
    .page-renew .pf-banner.banner {
        margin-top: 54px;
    }

    .page-renew .pf-banner.banner > h2 {
        font-size: 1.5rem;
        padding: 48px 20px 40px;
    }
}

/* =====================================================
 SUPPORT INTRO - 배너 아래, 목록/아코디언 위에 오는 가운데 정렬 인트로 문구
 (고객지원 하위 페이지 공용: 공지사항/고객FAQ/자료실). 제목(__tit)은 있는
 페이지도 있고(고객FAQ) 없는 페이지도 있으므로(공지사항은 설명 문구만) 둘 다
 선택적으로 쓴다. 강조 텍스트 색은 common_renew.css의 전역 .accent 규칙이
 이미 처리하므로 여기서 따로 정의하지 않는다.
 예) <div class="support-intro">
      <p class="support-intro__tit">...<span class="accent">...</span>...</p>
      <p class="support-intro__desc">...</p>
     </div>
===================================================== */
.page-renew .support-intro {
    text-align: center;
    margin-bottom: 40px;
}

.page-renew .support-intro__tit {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--colors-text-primary);
    letter-spacing: -0.025em;
    margin: 0 0 10px;
}

.page-renew .support-intro__desc {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.2rem;
    color: var(--colors-text-secondary);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .page-renew .support-intro__desc {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .page-renew .support-intro__tit {
        font-size: 1.2rem;
    }
}