@charset "utf-8";

/* ==========================================================================
   mj_common.css
   향택 랜딩페이지 - 공통 변수 / 공통 스타일
   작성자 : mj
   ========================================================================== */

/* ==========================================================================
   1. Color Tokens
   ========================================================================== */
:root {
  /* 브랜드 컬러 */
  --mj_color_green_dark: #18230f; /* 메인 다크그린 - 배경/헤더/CTA */
  --mj_color_green_base: #2a3d1a; /* 그린 베이스 - 버튼/배지 */
  --mj_color_green_accent: #1e8c45; /* 그린 액센트 - 강조텍스트/링크/포인트 */
  --mj_color_red_point: #a42e2c; /* 레드 포인트 - 강조배지/CTA/브러시 */
  --mj_color_red_sub: #b33636; /* 서브 레드 (보관용) */
  --mj_color_beige_light: #f5f0e2; /* 밝은 베이지 - 메인 배경 */
  --mj_color_beige_dark: #ccc2aa; /* 톤다운 베이지 - 보더/구분선/서브배경 */
  --mj_color_beige_deep: #f1eac5; /* 진한 옐로베이지 - 포인트 배경 변형 */
  --mj_color_brown: #8c6a4d; /* 우드 브라운 - 보조색 */
  --mj_color_brown_dark: #2a1d11; /* 다크 브라운 - 그라디언트/오버레이 */
  --mj_color_brown_dark_40: rgba(
    42,
    29,
    17,
    0.4
  ); /* 다크 브라운 40% - 밝은 텍스트용 연한 쉐도우 */
  --mj_color_gray_dark: #1a1a1a; /* 다크 그레이 (블랙 대체) - 텍스트/배경 */

  /* 순수 화이트 / 블랙 */
  --mj_color_white: #ffffff;
  --mj_color_black: #000000;

  /* 화이트 투명도 스케일 (10~90) */
  --mj_color_white_90: rgba(255, 255, 255, 0.9);
  --mj_color_white_80: rgba(255, 255, 255, 0.8);
  --mj_color_white_70: rgba(255, 255, 255, 0.7);
  --mj_color_white_60: rgba(255, 255, 255, 0.6);
  --mj_color_white_50: rgba(255, 255, 255, 0.5);
  --mj_color_white_40: rgba(255, 255, 255, 0.4);
  --mj_color_white_30: rgba(255, 255, 255, 0.3);
  --mj_color_white_20: rgba(255, 255, 255, 0.2);
  --mj_color_white_10: rgba(255, 255, 255, 0.1);

  /* 블랙 투명도 스케일 (10~90) */
  --mj_color_black_90: rgba(0, 0, 0, 0.9);
  --mj_color_black_80: rgba(0, 0, 0, 0.8);
  --mj_color_black_70: rgba(0, 0, 0, 0.7);
  --mj_color_black_60: rgba(0, 0, 0, 0.6);
  --mj_color_black_50: rgba(0, 0, 0, 0.5);
  --mj_color_black_40: rgba(0, 0, 0, 0.4);
  --mj_color_black_30: rgba(0, 0, 0, 0.3);
  --mj_color_black_20: rgba(0, 0, 0, 0.2);
  --mj_color_black_10: rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   2. Web Fonts
   - Pretendard : 노멀 폰트 (본문/UI 전체) - mj_reset.css 에서 로드
   - 경복궁 수문장 제목체 L : 포인트 폰트 (헤드라인/타이틀)
   - SF함박눈 : 숫자 강조 전용 (통계/가격/퍼센트 등)
   ========================================================================== */

@font-face {
  font-family: 'SumunjangTitleL';
  src:
    url('https://cdn.jsdelivr.net/gh/projectnoonnu/2511-3@1.0/Sumunjang_TitleL.woff2')
      format('woff2'),
    url('../theme/hyangtek/font/SumunjangTitleL.woff2') format('woff2'),
    url('../theme/hyangtek/font/SumunjangTitleL.woff') format('woff'),
    url('../theme/hyangtek/font/SumunjangTitleL.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SfHambakneun';
  src:
    url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_HambakSnow.woff')
      format('woff'),
    url('../theme/hyangtek/font/SfHambakneun.woff2') format('woff2'),
    url('../theme/hyangtek/font/SfHambakneun.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2-1. 전역 줄바꿈 - 한글은 단어(어절) 단위로만 끊기게 강제
   ========================================================================== */
body {
  word-break: keep-all;
  overflow-wrap: normal;
}

/* ==========================================================================
   3. Font Family Tokens
   ========================================================================== */
:root {
  --mj_font_normal:
    'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', dotum, sans-serif; /* 노멀 폰트 */
  --mj_font_point:
    'SumunjangTitleL', 'Malgun Gothic', sans-serif; /* 포인트 폰트 - 헤드라인 */
  --mj_font_number:
    'SfHambakneun', 'Malgun Gothic', sans-serif; /* 숫자 강조 전용 */

  --mj_font_weight_point: 300; /* 수문장 제목체 L 은 300(Light) 굵기 고정 */
}

/* ==========================================================================
   4. Font Weight Tokens (Pretendard)
   ========================================================================== */
:root {
  --mj_font_weight_light: 300;
  --mj_font_weight_regular: 400;
  --mj_font_weight_medium: 500;
  --mj_font_weight_bold: 700;
  --mj_font_weight_extrabold: 800;
}

/* ==========================================================================
   5. Font Size Tokens (px 고정, 이름에 px 값 그대로 사용)
   ========================================================================== */
:root {
  --mj_font_size_12: 12px; /* 초소형 캡션, 보조 링크 */
  --mj_font_size_14: 14px; /* 캡션, 뱃지 */
  --mj_font_size_16: 16px; /* 보조 텍스트 */
  --mj_font_size_18: 18px; /* 기본 본문 */
  --mj_font_size_20: 20px; /* 강조 본문 */
  --mj_font_size_24: 24px; /* 소제목 */
  --mj_font_size_28: 28px; /* 카드 타이틀 */
  --mj_font_size_32: 32px; /* 섹션 헤드라인 */
  --mj_font_size_38: 38px; /* 섹션5 하이라이트 서브 숫자 */
  --mj_font_size_40: 40px; /* 섹션 헤드라인 (큰 사이즈) */
  --mj_font_size_48: 48px; /* 섹션5 하이라이트 메인 숫자 - 1280px 구간 */
  --mj_font_size_52: 52px; /* 메인 임팩트 타이틀 */
  --mj_font_size_54: 54px; /* 섹션5 하이라이트 메인 숫자 */
  --mj_font_size_72: 72px; /* 메인 임팩트 타이틀 (큰 사이즈) */
  --mj_font_size_120: 120px; /* 초대형 숫자/타이틀 (SF함박눈 등) */
}

/* ==========================================================================
   6. Line Height Tokens
   ========================================================================== */
:root {
  --mj_line_height_small: 1; /* 초대형 타이틀, 숫자 강조 */
  --mj_line_height_normal: 1.4; /* 헤드라인 */
  --mj_line_height_medium: 1.5; /* 기본 본문 */
  --mj_line_height_large: 1.6; /* 여러 줄 본문, 문단 텍스트 */
}

/* ==========================================================================
   7. Spacing Tokens
   ========================================================================== */
:root {
  --mj_spacing_8: 8px;
  --mj_spacing_10: 10px;
  --mj_spacing_12: 12px;
  --mj_spacing_16: 16px;
  --mj_spacing_20: 20px;
  --mj_spacing_22: 22px;
  --mj_spacing_24: 24px;
  --mj_spacing_32: 32px;
  --mj_spacing_40: 40px;
  --mj_spacing_42: 42px;
  --mj_spacing_48: 48px;
  --mj_spacing_54: 54px;
  --mj_spacing_60: 60px;
  --mj_spacing_64: 64px;
  --mj_spacing_80: 80px;
  --mj_spacing_120: 120px; /* 섹션 상하 여백 (PC 기준 normal) */
  --mj_spacing_180: 180px;
  --mj_spacing_200: 200px;

  /* 섹션 상하 여백 - 반응형 (뷰포트별 미디어쿼리와 함께 사용) */
  --mj_section_gap_pc: 120px; /* ~1280px */
  --mj_section_gap_tablet: 80px; /* 1280~768px */
  --mj_section_gap_mobile: 48px; /* 768~320px */

  --mj_section_gap_6_pc: 120px; /* ~1280px */
  --mj_section_gap_6_1280: 100px; /* 1280~1028px */
  --mj_section_gap_6_1028: 80px; /* 1028~768px */
  --mj_section_gap_6_768: 60px; /* 768~425px */
  --mj_section_gap_6_425: 60px; /* 425~360px */
  --mj_section_gap_6_360: 40px; /* ~360px */
}

/* ==========================================================================
   8. Layout Tokens - Container
   - mj_container      : 1640px 제한 + 좌우 여백 (기본 콘텐츠 폭)
   - mj_container_full : 폭 제한 없음 (풀와이드 배경/이미지 섹션용)
   ========================================================================== */
:root {
  --mj_container_max: 1640px;
  --mj_container_padding_pc: 40px; /* 1640px 미만으로 줄어들 때 좌우 여백 (PC~태블릿) */
  --mj_container_padding_mobile: 20px; /* 모바일 좌우 여백 */
}

.mj_container {
  width: 100%;
  max-width: var(--mj_container_max);
  margin: 0 auto;
  padding-left: var(--mj_container_padding_pc);
  padding-right: var(--mj_container_padding_pc);
}

.mj_container_full {
  width: 100%;
}

/* 섹션 상하 여백 공통 클래스 */
.mj_section {
  padding-top: var(--mj_section_gap_pc);
  padding-bottom: var(--mj_section_gap_pc);
}

#mj_wrapper {
  /* padding-top: 100px; */
}

/* ==========================================================================
   8.5 Radius Tokens (px 고정, 이름에 px 값 그대로 사용)
   - 기존에 컴포넌트마다 흩어져 있던 border-radius 값을 공통 토큰으로 정리.
   - 새 컴포넌트를 만들 때도 이 중에서 골라 쓸 것 (임의의 새 px 값 추가 지양).
   ========================================================================== */
:root {
  --mj_radius_4: 4px; /* 체크박스 등 아주 작은 요소 */
  --mj_radius_6: 6px; /* 인풋, 버튼 */
  --mj_radius_12: 12px; /* 갤러리 이미지 카드 등 */
  --mj_radius_16: 16px; /* 카드형 컴포넌트(퀵폼, 팝업 등) */
  --mj_radius_20: 20px; /* 큰 카드(섹션 카드 등) */
  --mj_radius_22: 22px; /* 폰트 리사이즈 등 특수 큰 카드 */
  --mj_radius_28: 28px; /* 섹션 단위 큰 라운드 - 태블릿 축소값 */
  --mj_radius_32: 32px; /* 섹션 단위 큰 라운드 - PC 축소값 */
  --mj_radius_40: 40px; /* 섹션 단위 큰 라운드 */
  --mj_radius_circle: 50%; /* 원형(TOP 버튼 등) */
}

/* ==========================================================================
   9. Breakpoint 기준 (참고용 - 실제 분기는 각 css 파일에서 media query로 작성)
   - ~1280px  : PC
   - 1280~768px : 태블릿 (가로 1024-768, 834-1194, 800-1280 등 세로형 다수 고려)
   - 768~320px  : 모바일 (360px 에서 추가 분기, 320px까지 깨짐없이 대응)
   ========================================================================== */

@media (max-width: 1280px) {
  .mj_container {
    padding-left: var(--mj_container_padding_pc);
    padding-right: var(--mj_container_padding_pc);
  }

  .mj_section {
    padding-top: var(--mj_section_gap_tablet);
    padding-bottom: var(--mj_section_gap_tablet);
  }
}

@media (max-width: 768px) {
  .mj_container {
    padding-left: var(--mj_container_padding_mobile);
    padding-right: var(--mj_container_padding_mobile);
  }

  .mj_section {
    padding-top: var(--mj_section_gap_mobile);
    padding-bottom: var(--mj_section_gap_mobile);
  }

  #mj_wrapper {
    /* padding-top: 64px; */
  }
}

@media (max-width: 360px) {
  .mj_container {
    padding-left: var(--mj_spacing_16);
    padding-right: var(--mj_spacing_16);
  }
}

/* ==========================================================================
   10. 공통 스크롤 모션 시스템
   - mj_motion_self  : 요소 자기 자신이 뷰포트에 들어올 때 개별 트리거
   - mj_motion_group : 부모 [data-mj-motion-group] 가 뷰포트에 들어올 때
                       그 안의 모든 mj_motion_group 요소가 함께 트리거
   - 트리거는 mj_common.js(IntersectionObserver)가 담당, 활성화 시 요소에
     mj_motion_active 클래스를 추가함
   - 방향 : mj_motion_up / mj_motion_down / mj_motion_left / mj_motion_right
   - 딜레이 : mj_delay_1(0.1s) ~ mj_delay_6(0.6s)
   - 사용 예 : <div class="mj_motion_self mj_motion_left mj_delay_2">...</div>
   - 그룹 사용 예 :
       <section data-mj-motion-group>
         <div class="mj_motion_group mj_motion_up">...</div>
         <div class="mj_motion_group mj_motion_up mj_delay_2">...</div>
       </section>
   ========================================================================== */

:root {
  --mj_motion_duration: 0.8s;
  --mj_motion_ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mj_motion_distance: 40px;
}

/* 초기(비활성) 상태 - 방향별로 시작 위치와 투명도 지정 */
.mj_motion_self,
.mj_motion_group {
  opacity: 0;
  transition:
    opacity var(--mj_motion_duration) var(--mj_motion_ease),
    transform var(--mj_motion_duration) var(--mj_motion_ease);
  will-change: opacity, transform;
}

.mj_motion_up {
  transform: translateY(var(--mj_motion_distance));
}

.mj_motion_down {
  transform: translateY(calc(var(--mj_motion_distance) * -1));
}

.mj_motion_left {
  transform: translateX(calc(var(--mj_motion_distance) * -1));
}

.mj_motion_right {
  transform: translateX(var(--mj_motion_distance));
}

/* 활성화 상태 - JS 가 부여 */
.mj_motion_active {
  opacity: 1;
  transform: translate(0, 0);
}

/* 바운스 모디파이어 - mj_motion_up/down/left/right 와 함께 사용
   (opacity 는 기본 이징 유지, transform 만 오버슈트 있는 바운스 이징으로 교체) */
.mj_motion_bounce {
  transition:
    opacity var(--mj_motion_duration) var(--mj_motion_ease),
    transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 딜레이 단계 (0.1s 단위, 필요시 확장) */
.mj_delay_1 {
  transition-delay: 0.1s;
}
.mj_delay_2 {
  transition-delay: 0.2s;
}
.mj_delay_3 {
  transition-delay: 0.3s;
}
.mj_delay_4 {
  transition-delay: 0.4s;
}
.mj_delay_5 {
  transition-delay: 0.5s;
}
.mj_delay_6 {
  transition-delay: 0.6s;
}
.mj_delay_7 {
  transition-delay: 0.7s;
}
.mj_delay_8 {
  transition-delay: 0.8s;
}
.mj_delay_9 {
  transition-delay: 0.9s;
}
.mj_delay_10 {
  transition-delay: 1s;
}
.mj_delay_12 {
  transition-delay: 0.4s;
}
.mj_delay_20 {
  transition-delay: 0.8s;
}

/* 접근성 - 모션 최소화 설정 사용자는 즉시 노출 */
@media (prefers-reduced-motion: reduce) {
  .mj_motion_self,
  .mj_motion_group {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   공통 스크롤 모션 시스템 끝
   ========================================================================== */

/* ==========================================================================
   11. 공통 컴포넌트
   - mj_stamp_badge : "香宅" 도장 모양 뱃지(stamp_badge.svg). 여러 섹션의 타이틀
     옆에 장식으로 재사용. 크기/위치는 사용하는 곳에서 개별 클래스로 지정.
   ========================================================================== */

.mj_stamp_badge {
  width: 23px;
  height: auto;
}

/* ==========================================================================
   공통 컴포넌트 끝
   ========================================================================== */

/* ==========================================================================
   HEADER 시작
   - 배경 : black_20 고정 (스크롤 무관)
   - PC/태블릿(768px 초과) : 가로형 GNB 노출, 햄버거 숨김
   - 모바일(768px 이하)    : 햄버거 + 슬라이드 GNB
   ========================================================================== */

.mj_hd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: var(--mj_color_black_20);
  z-index: 1000;
}

.mj_hd_h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mj_to_content {
  position: absolute;
  top: -9999px;
  left: 0;
}

.mj_to_content a:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  padding: var(--mj_spacing_8) var(--mj_spacing_16);
  background-color: var(--mj_color_green_dark);
  color: var(--mj_color_white);
  font-family: var(--mj_font_normal);
  font-size: var(--mj_font_size_14);
}

.mj_hd_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--mj_container_max);
  height: 100%;
  margin: 0 auto;
  padding-left: var(--mj_container_padding_pc);
  padding-right: var(--mj_container_padding_pc);
}

/* 로고 */
.mj_logo {
  flex-shrink: 0;
}

.mj_logo a {
  display: block;
}

.mj_logo img {
  display: block;
  height: 40px;
  width: auto;
}

/* 로고와 동일 크기의 투명 spacer (GNB 가운데 정렬용, PC/태블릿 전용) */
.mj_logo_spacer {
  flex-shrink: 0;
  visibility: hidden;
  pointer-events: none;
}

.mj_logo_spacer img {
  display: block;
  height: 40px;
  width: auto;
}

/* PC 가로형 GNB - 로고/spacer 사이 가운데 정렬 */
.mj_gnb_pc {
  flex: 1;
  display: flex;
  justify-content: center;
}

.mj_gnb_pc_ul {
  display: flex;
  align-items: center;
  gap: var(--mj_spacing_64);
}

.mj_gnb_pc_ul a {
  display: block;
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  font-size: var(--mj_font_size_24);
  line-height: var(--mj_line_height_small);
  color: var(--mj_color_white);
  transition: opacity 0.2s ease;
}

.mj_gnb_pc_ul a:hover {
  opacity: 0.7;
}

/* 우측 영역 (햄버거 버튼 등) */
.mj_hd_right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 모바일 햄버거 버튼 */
.mj_gnb_open {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  cursor: pointer;
}

.mj_gnb_open_bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--mj_color_white);
}

/* 모바일 슬라이드 GNB - PC/태블릿에서는 숨김 */
.mj_gnb_mobile {
  display: none;
}

/* 모바일 GNB 딤(배경 오버레이) */
.mj_gnb_dim {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--mj_color_black_60);
  z-index: 1050;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mj_gnb_dim.mj_active {
  display: block;
  opacity: 1;
}

@media (max-width: 1280px) {
  .mj_hd_wrapper {
    padding-left: var(--mj_container_padding_pc);
    padding-right: var(--mj_container_padding_pc);
  }

  .mj_logo_spacer {
    display: none;
  }

  .mj_gnb_pc {
    justify-content: flex-end;
  }

  .mj_gnb_pc_ul {
    gap: var(--mj_spacing_32);
  }
}

@media (max-width: 1028px) {
  .mj_logo img,
  .mj_logo_spacer img {
    height: 34px;
  }

  .mj_gnb_pc_ul {
    gap: var(--mj_spacing_16);
  }

  .mj_gnb_pc_ul a {
    font-size: var(--mj_font_size_20);
  }
}

@media (max-width: 768px) {
  .mj_hd {
    height: 64px;
  }

  .mj_hd_wrapper {
    padding-left: var(--mj_container_padding_mobile);
    padding-right: var(--mj_container_padding_mobile);
  }

  .mj_logo img {
    height: 20px;
  }

  .mj_gnb_pc,
  .mj_logo_spacer {
    display: none;
  }

  .mj_gnb_open {
    display: flex;
  }

  .mj_gnb_mobile {
    display: block;
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100%;
    background-color: var(--mj_color_green_dark);
    z-index: 1100;
    padding: var(--mj_spacing_24);
    transition: right 0.3s ease;
    overflow-y: auto;
  }

  .mj_gnb_mobile.mj_active {
    right: 0;
  }

  .mj_gnb_close {
    display: block;
    position: relative;
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .mj_gnb_close_bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background-color: var(--mj_color_white);
  }

  .mj_gnb_close_bar:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .mj_gnb_close_bar:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .mj_gnb_mobile_ul {
    margin-top: var(--mj_spacing_24);
  }

  .mj_gnb_mobile_ul li {
    border-bottom: 1px solid var(--mj_color_white_20);
  }

  .mj_gnb_mobile_ul a {
    display: block;
    padding: var(--mj_spacing_16) 0;
    font-family: var(--mj_font_point);
    font-weight: var(--mj_font_weight_point);
    font-size: var(--mj_font_size_18);
    color: var(--mj_color_white);
  }
}

@media (max-width: 360px) {
  .mj_gnb_mobile {
    width: 240px;
    right: -240px;
  }
}

/* ==========================================================================
   HEADER 끝
   ========================================================================== */

/* ==========================================================================
   FOOTER 시작
   ========================================================================== */

.mj_footer {
  background-color: var(--mj_color_beige_dark);
  padding-top: var(--mj_spacing_64);
  padding-bottom: var(--mj_spacing_64);
  text-align: center;
  position: relative;
}

.mj_footer_inner {
  width: 100%;
  max-width: var(--mj_container_max);
  margin: 0 auto;
  padding-left: var(--mj_container_padding_pc);
  padding-right: var(--mj_container_padding_pc);
}

.mj_quick_form_wrap {
  position: fixed;
  left: 0;
  bottom: var(--mj_spacing_40);
  width: 100%;
  padding: 0 var(--mj_spacing_40);
  display: flex;
  justify-content: center;
  z-index: 400;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.mj_quick_form_wrap.mj_hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mj_quick_form_card {
  display: contents;
}

.mj_quick_form_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mj_spacing_24);
  width: 100%;
  max-width: 1400px;
  height: 80px;
  padding: 0 var(--mj_spacing_32);
  background-color: var(--mj_color_black_70);
  border: 1px solid var(--mj_color_white_20);
  border-radius: var(--mj_radius_16);
}

.mj_quick_form_call {
  flex: 0 0 auto;
}

.mj_quick_form_call img {
  display: block;
  height: 50px;
  width: auto;
}

.mj_quick_form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mj_spacing_24);
  flex: 1;
  min-width: 0;
}

.mj_quick_form_hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 인풋(성함/연락처/지역) 묶음 - 8px 간격 */
.mj_quick_form_inputs {
  display: flex;
  align-items: center;
  gap: var(--mj_spacing_8);
  flex: 1;
  min-width: 0;
}

/* 개인정보동의 + 창업문의 버튼 묶음 - 12px 간격 */
.mj_quick_form_actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.mj_quick_form_input,
.mj_quick_form_select {
  flex: 1 1 200px;
  min-width: 0;
  height: 48px;
  padding: 0 var(--mj_spacing_16);
  border: 0;
  border-radius: var(--mj_radius_6);
  background-color: var(--mj_color_white);
  font-family: var(--mj_font_normal);
  font-size: var(--mj_font_size_16);
  color: var(--mj_color_gray_dark);
}

.mj_quick_form_input::placeholder {
  color: var(--mj_color_black_40);
}

.mj_quick_form_input:focus,
.mj_quick_form_select:focus {
  outline: 2px solid var(--mj_color_green_accent);
  outline-offset: -2px;
}

.mj_quick_form_select {
  flex: 1 1 200px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
}

.mj_quick_form_select:invalid {
  color: var(--mj_color_black_40);
}

.mj_quick_form_agree {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.mj_quick_form_agree input[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.mj_quick_form_agree label {
  display: inline-flex;
  align-items: center;
  gap: var(--mj_spacing_8);
  font-family: var(--mj_font_normal);
  font-size: var(--mj_font_size_14);
  color: var(--mj_color_white_80);
  cursor: pointer;
}

.mj_quick_form_agree_box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid var(--mj_color_white_40);
  border-radius: var(--mj_radius_4);
  background-color: transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.mj_quick_form_agree
  input[type='checkbox']:checked
  + label
  .mj_quick_form_agree_box {
  background-color: var(--mj_color_green_base);
  border-color: var(--mj_color_green_base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5L8.5 14L15 6.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.mj_quick_form_agree
  input[type='checkbox']:focus-visible
  + label
  .mj_quick_form_agree_box {
  outline: 2px solid var(--mj_color_green_accent);
  outline-offset: 2px;
}

.mj_quick_form_submit {
  flex: 0 0 auto;
  height: 52px;
  padding: 0 var(--mj_spacing_32);
  border: 0;
  border-radius: var(--mj_radius_6);
  background-color: var(--mj_color_green_base);
  color: var(--mj_color_white);
  font-family: var(--mj_font_normal);
  font-size: var(--mj_font_size_16);
  font-weight: var(--mj_font_weight_bold);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mj_quick_form_submit:hover {
  background-color: var(--mj_color_green_accent);
}

.mj_quick_form_submit:disabled {
  background-color: var(--mj_color_black_30);
  cursor: not-allowed;
}

.mj_quick_form_toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--mj_spacing_24);
  border: 1px solid var(--mj_color_white_20);
  border-radius: var(--mj_radius_16);
  background-color: var(--mj_color_black_70);
  color: var(--mj_color_white);
  font-family: var(--mj_font_normal);
  font-size: var(--mj_font_size_16);
  font-weight: var(--mj_font_weight_bold);
  cursor: pointer;
}

.mj_quick_form_toggle_icon {
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  transition: transform 0.2s ease;
}

.mj_quick_form_toggle[aria-expanded='true'] .mj_quick_form_toggle_icon {
  transform: rotate(180deg);
}

@media (max-width: 1440px) {
  .mj_quick_form_wrap {
    padding-left: var(--mj_container_padding_pc);
    padding-right: var(--mj_container_padding_pc);
  }
}

@media (max-width: 1028px) {
  .mj_quick_form_wrap {
    padding: var(--mj_spacing_16) var(--mj_container_padding_pc);
  }

  .mj_quick_form_inner {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    max-width: none;
    padding: var(--mj_spacing_16);
    gap: var(--mj_spacing_16);
  }

  .mj_quick_form_call img {
    height: 36px;
  }

  .mj_quick_form {
    flex-wrap: wrap;
    width: 100%;
  }

  .mj_quick_form_inputs {
    flex-wrap: nowrap;
    width: 100%;
  }

  .mj_quick_form_input,
  .mj_quick_form_select {
    flex: 1 1 0;
  }

  .mj_quick_form_actions {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .mj_quick_form_wrap {
    bottom: var(--mj_spacing_16);
    padding: var(--mj_spacing_16) var(--mj_container_padding_mobile);
    display: block;
  }

  .mj_quick_form_card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--mj_color_white_20);
    border-radius: var(--mj_radius_16);
    background-color: var(--mj_color_black_70);
    overflow: hidden;
  }

  .mj_quick_form_toggle {
    display: flex;
    height: 48px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    padding: 0 var(--mj_spacing_12) 0 var(--mj_spacing_16);
  }

  .mj_quick_form_inner {
    display: none;
    flex-wrap: wrap;
    gap: var(--mj_spacing_16);
    padding: 0 var(--mj_spacing_16) var(--mj_spacing_16);
    max-width: none;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .mj_quick_form_wrap.mj_active .mj_quick_form_inner {
    display: flex;
  }

  .mj_quick_form_call {
    width: 100%;
  }

  .mj_quick_form_call img {
    height: 30px;
  }

  .mj_quick_form {
    flex-wrap: wrap;
    gap: var(--mj_spacing_16);
    width: 100%;
  }

  .mj_quick_form_inputs {
    flex-wrap: wrap;
    gap: var(--mj_spacing_8);
    width: 100%;
  }

  .mj_quick_form_input,
  .mj_quick_form_select {
    flex: 1 1 100%;
    height: 44px;
  }

  .mj_quick_form_actions {
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
  }

  .mj_quick_form_agree {
    flex: 1 1 100%;
  }

  .mj_quick_form_submit {
    flex: 1 1 100%;
    height: 46px;
  }
}

.mj_footer_logo {
  margin-bottom: var(--mj_spacing_40);
}

.mj_footer_logo img {
  display: inline-block;
  height: 52px;
  width: auto;
}

.mj_footer_info {
  margin-bottom: var(--mj_spacing_16);
}

.mj_footer_info_line1,
.mj_footer_info_line2 {
  font-family: var(--mj_font_normal);
  font-size: var(--mj_font_size_14);
  font-weight: var(--mj_font_weight_regular);
  line-height: var(--mj_line_height_normal);
  color: var(--mj_color_gray_dark);
}

.mj_footer_info_line1 {
  margin-bottom: var(--mj_spacing_8);
}

.mj_footer_copy {
  font-family: var(--mj_font_normal);
  font-size: var(--mj_font_size_14);
  font-weight: var(--mj_font_weight_regular);
  line-height: var(--mj_line_height_normal);
  color: var(--mj_color_black_50);
}

.mj_top_btn {
  position: fixed;
  right: var(--mj_spacing_40);
  bottom: var(--mj_spacing_40);
  width: 72px;
  height: 72px;
  border-radius: var(--mj_radius_circle);
  background-color: var(--mj_color_black_80);
  border: 1px solid var(--mj_color_white_20);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mj_top_btn:hover {
  background-color: var(--mj_color_black_90);
}

.mj_top_btn img {
  width: 44px;
  height: auto;
}

@media (max-width: 1280px) {
  .mj_footer_inner {
    padding-left: var(--mj_container_padding_pc);
    padding-right: var(--mj_container_padding_pc);
  }
}

@media (max-width: 768px) {
  .mj_footer {
    padding-top: var(--mj_spacing_48);
    padding-bottom: var(--mj_spacing_48);
  }

  .mj_footer_inner {
    padding-left: var(--mj_container_padding_mobile);
    padding-right: var(--mj_container_padding_mobile);
  }

  .mj_footer_logo {
    margin-bottom: var(--mj_spacing_24);
  }

  .mj_footer_logo img {
    height: 32px;
  }

  .mj_footer_info_line1,
  .mj_footer_info_line2 {
    display: block;
    word-break: keep-all;
  }

  .mj_top_btn {
    right: var(--mj_spacing_16);
    bottom: var(--mj_spacing_16);
    width: 44px;
    height: 44px;
  }

  .mj_top_btn img {
    width: 26px;
    height: auto;
  }
}

@media (max-width: 360px) {
  .mj_footer_info_line1,
  .mj_footer_info_line2 {
    font-size: var(--mj_font_size_14);
  }
}

/* ==========================================================================
   FOOTER 끝
   ========================================================================== */

/* ==========================================================================
   관리자 플로팅 버튼 시작
   - 회원레벨 9 이상 로그인시 좌측 노출 (head.php)
   - 창업문의 / 관리자 이동 버튼 2개, 시안A(흰색 pill) 스타일 통일
   ========================================================================== */
.mj_admin_float {
  position: fixed;
  left: var(--mj_spacing_40);
  bottom: 20%;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: var(--mj_spacing_8);
}

.mj_admin_float_btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 34px;
  border-radius: var(--mj_radius_22);
  background-color: var(--mj_color_white);
  border: 1px solid var(--mj_color_gray_dark);
  color: var(--mj_color_gray_dark);
  font-family: var(--mj_font_normal);
  font-size: var(--mj_font_size_16);
  font-weight: var(--mj_font_weight_bold);
  text-decoration: none;
  box-shadow: 0 4px 12px var(--mj_color_black_20);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  justify-content: center;
}

.mj_admin_float_btn:hover {
  background-color: var(--mj_color_gray_dark);
  color: var(--mj_color_white);
}

.mj_admin_float_logout {
  border-color: var(--mj_color_black_20);
  color: var(--mj_color_black_40);
}

.mj_admin_float_logout:hover {
  background-color: var(--mj_color_black_20);
  color: var(--mj_color_white);
}

@media (max-width: 768px) {
  .mj_admin_float {
    left: var(--mj_spacing_16);
  }

  .mj_admin_float_btn {
    height: 40px;
    padding: 0 var(--mj_spacing_16);
    font-size: var(--mj_font_size_18);
  }
}

/* ==========================================================================
   관리자 플로팅 버튼 끝
   ========================================================================== */

/* ==========================================================================
   팝업레이어 (bbs/newwin.inc.php) 시작
   ========================================================================== */

.mj_hd_pops {
  border-radius: var(--mj_radius_16) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;
}

.mj_hd_pops_con {
}

.mj_hd_pops_footer {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
  background-color: var(--mj_color_white) !important;
  text-align: center !important;
}

.mj_hd_pops_footer button {
  padding: 14px 0 !important;
  border: 0 !important;
  border-right: 1px solid #e6e6e6 !important;
  background-color: var(--mj_color_white) !important;
  color: #333 !important;
  font-family: var(--mj_font_normal) !important;
  font-size: var(--mj_font_size_16) !important;
  font-weight: var(--mj_font_weight_bold) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  position: static !important;
}

.mj_hd_pops_footer button:last-child {
  border-right: 0 !important;
}

.mj_hd_pops_footer button:hover {
  background-color: #f5f5f5 !important;
}

@media (max-width: 1280px) {
  #hd_pop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
  }

  .mj_hd_pops {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - var(--mj_container_padding_mobile) * 2) !important;
    max-width: 400px !important;
    pointer-events: auto;
  }

  .mj_hd_pops:nth-of-type(1) {
    z-index: 1001;
  }
  .mj_hd_pops:nth-of-type(2) {
    z-index: 1002;
  }
  .mj_hd_pops:nth-of-type(3) {
    z-index: 1003;
  }
  .mj_hd_pops:nth-of-type(4) {
    z-index: 1004;
  }
  .mj_hd_pops:nth-of-type(5) {
    z-index: 1005;
  }

  .mj_hd_pops_con {
    width: 100% !important;
    height: auto !important;
  }

  .mj_hd_pops_con img {
    width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   팝업레이어 끝
   ========================================================================== */

/* ==========================================================================
   개인정보처리방침 모달 시작
   ========================================================================== */

html.mj_no_scroll {
  overflow: hidden;
}

.mj_privacy_view_btn {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mj_font_normal);
  font-size: var(--mj_font_size_12);
  color: var(--mj_color_white_60);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.mj_privacy_view_btn:hover {
  color: var(--mj_color_white);
}

.mj_privacy_modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
}

.mj_privacy_modal.mj_active {
  display: block;
}

.mj_privacy_modal_dim {
  position: absolute;
  inset: 0;
  background-color: var(--mj_color_black_60);
}

.mj_privacy_modal_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: calc(100% - var(--mj_spacing_40) * 2);
  max-width: 640px;
  max-height: 80vh;
  background-color: var(--mj_color_beige_light);
  border-radius: var(--mj_radius_20);
  overflow: hidden;
  box-shadow: 0 20px 60px var(--mj_color_black_40);
}

.mj_privacy_modal_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: var(--mj_spacing_24) var(--mj_spacing_32);
  background-color: var(--mj_color_green_dark);
}

.mj_privacy_modal_title {
  margin: 0;
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_bold);
  font-size: var(--mj_font_size_20);
  color: var(--mj_color_white);
}

.mj_privacy_modal_close {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.mj_privacy_modal_close_bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background-color: var(--mj_color_white);
}

.mj_privacy_modal_close_bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mj_privacy_modal_close_bar:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mj_privacy_modal_body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--mj_spacing_32);
  background-color: var(--mj_color_white);
  font-family: var(--mj_font_normal);
  font-size: var(--mj_font_size_14);
  line-height: var(--mj_line_height_large);
  color: var(--mj_color_gray_dark);
}

.mj_privacy_modal_intro {
  margin: 0 0 var(--mj_spacing_24);
}

.mj_privacy_modal_body h4 {
  margin: var(--mj_spacing_24) 0 var(--mj_spacing_8);
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_bold);
  font-size: var(--mj_font_size_16);
  color: var(--mj_color_green_dark);
}

.mj_privacy_modal_body h4:first-of-type {
  margin-top: 0;
}

.mj_privacy_modal_body p {
  margin: 0 0 var(--mj_spacing_8);
}

.mj_privacy_modal_body ul {
  margin: 0 0 var(--mj_spacing_8);
  padding-left: var(--mj_spacing_20);
}

.mj_privacy_modal_body li {
  margin-bottom: var(--mj_spacing_8);
}

.mj_privacy_modal_date {
  margin-top: var(--mj_spacing_24) !important;
  color: var(--mj_color_gray_dark);
  opacity: 0.6;
}

@media (max-width: 768px) {
  .mj_privacy_modal_box {
    width: calc(100% - var(--mj_container_padding_mobile) * 2);
    max-height: 78vh;
    border-radius: var(--mj_radius_16);
  }

  .mj_privacy_modal_header {
    padding: var(--mj_spacing_20) var(--mj_spacing_24);
  }

  .mj_privacy_modal_body {
    padding: var(--mj_spacing_24);
  }
}

@media (max-width: 425px) {
  .mj_privacy_modal_box {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-height: 85vh;
    border-radius: var(--mj_radius_16) var(--mj_radius_16) 0 0;
  }
}

/* ==========================================================================
   개인정보처리방침 모달 끝
   ========================================================================== */

/* ==========================================================================
   HERO 시작
   ========================================================================== */

.mj_hero {
  position: relative;
  width: 100%;
}

.mj_hero_article1 {
  position: relative;
  width: 100vw;
  aspect-ratio: 1920 / 1080;
  line-height: 0;
}

.mj_hero_video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mj_hero_article2 {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1036;
}

@media (max-width: 1028px) {
  .mj_hero_article2 {
    aspect-ratio: 750 / 1000;
  }
}

/* -------------------- PC 버전 (1028px 이상) -------------------- */
.mj_hero_art02_pc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
}

.mj_hero_art02_bg,
.mj_hero_art02_food_wrap,
.mj_hero_art02_food {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mj_hero_art02_bg {
  z-index: 1;
  display: block;
}

.mj_hero_art02_food_wrap {
  z-index: 2;
}

.mj_hero_art02_food {
  opacity: 0;
  transform: rotate(-6deg) scale(1.02);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  pointer-events: none;
}

.mj_hero_art02_food.mj_active {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  pointer-events: auto;
}

.mj_hero_art02_badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 100%;
  height: auto;
  animation: mj_hero_art02_badge_pulse 2.2s ease-in-out infinite;
}
@keyframes mj_hero_art02_badge_pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.015);
  }
}

.mj_hero_art02_text_left,
.mj_hero_art02_text_right {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mj_hero_art02_copy {
  position: absolute;
  left: 50%;
  bottom: var(--mj_section_gap_6_pc);
  z-index: 4;
  width: 100%;
  max-width: var(--mj_container_max);
  padding: 0 var(--mj_container_padding_pc);
  transform: translateX(-50%);
  text-align: center;
}

.mj_hero_art02_title {
  margin: 0;
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  font-size: clamp(52px, 5vw, 72px);
  line-height: var(--mj_line_height_medium);
  color: var(--mj_color_beige_light);
  text-shadow: 0 2px 8px var(--mj_color_brown_dark_40);
}

.mj_hero_art02_title.mj_motion_group {
  opacity: 1;
  transform: none;
  transition: none;
}

.mj_hero_art02_title .mj_char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s var(--mj_motion_ease),
    transform 0.3s var(--mj_motion_ease);
  transition-delay: calc(0.8s + var(--i) * 0.04s);
}

.mj_hero_art02_title.mj_motion_active .mj_char {
  opacity: 1;
  transform: translateY(0);
}

.mj_hero_art02_subtext {
  margin: 20px 0 0;
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_regular);
  font-size: clamp(20px, 1.5vw, 24px);
  line-height: var(--mj_line_height_normal);
  color: var(--mj_color_beige_light);
  text-shadow: 0 1px 6px var(--mj_color_brown_dark_40);
}

/* PC/모바일 전용 줄바꿈 유틸리티 */
.mj_only_pc {
  display: inline;
}

.mj_only_mo {
  display: none;
}

.mj_only_425 {
  display: none;
}

@media (max-width: 425px) {
  .mj_only_425 {
    display: inline;
  }
}

.mj_only_900 {
  display: none;
}

@media (max-width: 900px) {
  .mj_only_900 {
    display: inline;
  }
}

@media (max-width: 768px) {
  .mj_only_900 {
    display: none;
  }
}

/* -------------------- 반응형 전환 (1028px 기준, 이미지 레이어만) -------------------- */
.mj_hero_art02_mo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
}

@media (max-width: 1280px) {
  .mj_hero_art02_copy {
    bottom: var(--mj_section_gap_6_1280);
  }
}

@media (max-width: 1028px) {
  .mj_hero_art02_pc {
    display: none;
  }

  .mj_hero_art02_mo {
    display: block;
  }

  .mj_hero_art02_copy {
    bottom: var(--mj_section_gap_6_1028);
  }

  .mj_only_pc {
    display: none;
  }

  .mj_only_mo {
    display: inline;
  }
}

@media (max-width: 768px) {
  .mj_hero_art02_copy {
    bottom: var(--mj_section_gap_6_768);
  }

  .mj_hero_art02_title {
    font-size: clamp(28px, 6vw, 52px);
  }

  .mj_hero_art02_subtext {
    font-size: 16px;
    margin-top: var(--mj_spacing_16);
  }
}

@media (max-width: 425px) {
  .mj_hero_art02_copy {
    bottom: calc(var(--mj_section_gap_6_425) - var(--mj_spacing_20));
  }

  .mj_hero_art02_subtext {
    font-size: 15px;
    margin-top: var(--mj_spacing_12);
  }
}

@media (max-width: 360px) {
  .mj_hero_art02_copy {
    bottom: var(--mj_section_gap_6_360);
  }
}

/* ==========================================================================
   HERO 끝
   ========================================================================== */

/* ==========================================================================
   SECTION 01 시작 - 브랜드 소개
   (PC 1920 기준 퍼블리싱, 이하 뷰포트는 비율/단계로 반응형 처리)
   ========================================================================== */

.mj_sec01 {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: var(--mj_section_gap_6_pc);
  padding-bottom: var(--mj_section_gap_6_pc);
  background-image: url('../img/hyangtek/sec01_bg_pc.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.mj_sec01_inner {
  position: relative;
}

/* -------------------- 헤드라인 (타이틀 + 서브텍스트) -------------------- */
.mj_sec01_head {
  text-align: center;
}

.mj_sec01_title,
.mj_sec02_art1_title,
.mj_sec02_art2_title,
.mj_sec03_title,
.mj_sec04_art2_title,
.mj_sec05_art1_title,
.mj_sec05_art2_title,
.mj_sec06_cta_title {
  font-size: 52px;
  line-height: var(--mj_line_height_medium);
}

.mj_sec01_title {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  color: var(--mj_color_gray_dark);
}

.mj_sec01_title_accent {
  color: var(--mj_color_green_base);
}

.mj_sec01_title_badge_anchor {
  position: relative;
  display: inline-block;
}

.mj_sec01_title_badge {
  position: absolute;
  top: -18px;
  right: -14px;
  z-index: -1;
}

.mj_sec01_desc,
.mj_sec02_art1_desc,
.mj_sec02_art2_desc,
.mj_sec03_desc,
.mj_sec04_art2_desc,
.mj_sec05_art1_desc,
.mj_sec05_art2_desc,
.mj_sec06_cta_desc {
  font-size: 24px;
  line-height: var(--mj_line_height_normal);
}

.mj_sec01_desc {
  margin: 24px 0 0;
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_regular);
  color: var(--mj_color_gray_dark);
}

.mj_sec01_desc strong {
  font-weight: var(--mj_font_weight_bold);
}

/* -------------------- 카드 3개 -------------------- */
.mj_sec01_cards {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  margin-top: 100px;
}

.mj_sec01_card {
  display: flex;
  flex-direction: column;
  flex: 1 1 440px;
  width: 440px;
  max-width: 440px;
  min-width: 0;
  min-height: 0;
  background-color: var(--mj_color_white);
  border: 1px solid var(--mj_color_beige_dark);
  border-radius: var(--mj_radius_20);
  box-shadow: 0 4px 12px var(--mj_color_black_20);
  overflow: visible;
}

.mj_sec01_card_photo {
  position: relative;
  width: 100%;
  aspect-ratio: 446 / 297;
  overflow: hidden;
  border-radius: var(--mj_radius_20) var(--mj_radius_20) 0 0;
}

.mj_sec01_card_photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.mj_sec01_card:hover .mj_sec01_card_photo img {
  transform: scale(1.08);
}

.mj_sec01_card_text_wrap {
  padding: 24px;
}

.mj_sec01_card_text {
  display: block;
  width: 100%;
  aspect-ratio: 446 / 226;
  object-fit: contain;
}

/* -------------------- 모바일 전용 카드 (768px 이하) -------------------- */
.mj_sec01_cards_mo {
  display: none;
}

.mj_sec01_card_mo_item {
  display: block;
  width: 100%;
  border: 1px solid var(--mj_color_beige_dark);
  border-radius: var(--mj_radius_16);
  box-shadow: 0 4px 12px var(--mj_color_black_20);
  overflow: hidden;
}

.mj_sec01_card_mo_item img {
  display: block;
  width: 100%;
  height: auto;
}

/* -------------------- 우측 하단 고정 장식 이미지 -------------------- */
.mj_sec01_deco_food {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 520px;
  height: auto;
  pointer-events: none;
}

/* -------------------- 반응형 -------------------- */

/* 1280px 이하 */
@media (max-width: 1280px) {
  .mj_sec01 {
    padding-top: var(--mj_section_gap_6_1280);
    padding-bottom: var(--mj_section_gap_6_1280);
  }

  .mj_sec01_title,
  .mj_sec02_art1_title,
  .mj_sec02_art2_title,
  .mj_sec03_title,
  .mj_sec04_art2_title,
  .mj_sec05_art1_title,
  .mj_sec05_art2_title,
  .mj_sec06_cta_title {
    font-size: 44px;
  }

  .mj_sec01_desc,
  .mj_sec02_art1_desc,
  .mj_sec02_art2_desc,
  .mj_sec03_desc,
  .mj_sec04_art2_desc,
  .mj_sec05_art1_desc,
  .mj_sec05_art2_desc,
  .mj_sec06_cta_desc {
    font-size: 20px;
  }

  .mj_sec01_cards {
    gap: 20px;
    margin-top: 60px;
  }

  .mj_sec01_deco_food {
    width: 400px;
  }
}

/* 1028px~768px */
@media (max-width: 1028px) {
  .mj_sec01 {
    padding-top: var(--mj_section_gap_6_1028);
    padding-bottom: var(--mj_section_gap_6_1028);
  }

  .mj_sec01_cards {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 60px;
  }

  .mj_sec01_card {
    flex-direction: row;
    align-items: stretch;
    width: 90vw;
    max-width: 90vw;
    max-height: 300px;
  }

  .mj_sec01_card_photo {
    position: relative;
    flex: 0 0 50%;
    aspect-ratio: auto;
    align-self: stretch;
    border-radius: var(--mj_radius_20) 0 0 var(--mj_radius_20);
  }

  .mj_sec01_card_photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .mj_sec01_card_text_wrap {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 0;
    padding: 32px;
  }

  .mj_sec01_deco_food {
    width: 320px;
  }

  .mj_sec01_desc {
    margin-top: var(--mj_spacing_22);
  }
}

/* 768px 이하 */
@media (max-width: 768px) {
  .mj_sec01 {
    padding-top: var(--mj_section_gap_6_768);
    padding-bottom: var(--mj_section_gap_6_768);
    background-image: url('../img/hyangtek/sec01_bg_mo.jpg');
  }

  .mj_sec01_cards {
    display: none;
  }

  .mj_sec01_cards_mo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin: 48px auto 0;
    width: 90%;
    max-width: 440px;
  }

  .mj_sec01_title,
  .mj_sec02_art1_title,
  .mj_sec02_art2_title,
  .mj_sec03_title,
  .mj_sec04_art2_title,
  .mj_sec05_art1_title,
  .mj_sec05_art2_title,
  .mj_sec06_cta_title {
    font-size: 32px;
  }

  .mj_sec01_desc,
  .mj_sec02_art1_desc,
  .mj_sec02_art2_desc,
  .mj_sec03_desc,
  .mj_sec04_art2_desc,
  .mj_sec05_art1_desc,
  .mj_sec05_art2_desc,
  .mj_sec06_cta_desc {
    font-size: 16px;
  }

  .mj_sec01_desc {
    margin-top: var(--mj_spacing_20);
  }

  .mj_sec01_deco_food {
    z-index: 0;
    width: 70%;
  }
}

/* 425px 이하 */
@media (max-width: 425px) {
  .mj_sec01 {
    padding-top: var(--mj_section_gap_6_425);
    padding-bottom: var(--mj_section_gap_6_425);
  }

  .mj_sec01_title,
  .mj_sec02_art1_title,
  .mj_sec02_art2_title,
  .mj_sec03_title,
  .mj_sec04_art2_title,
  .mj_sec05_art1_title,
  .mj_sec05_art2_title,
  .mj_sec06_cta_title {
    font-size: 26px;
  }

  .mj_sec01_desc,
  .mj_sec02_art1_desc,
  .mj_sec02_art2_desc,
  .mj_sec03_desc,
  .mj_sec04_art2_desc,
  .mj_sec05_art1_desc,
  .mj_sec05_art2_desc,
  .mj_sec06_cta_desc {
    font-size: 15px;
  }

  .mj_sec01_desc {
    margin-top: var(--mj_spacing_16);
  }
}

/* 360px 이하 */
@media (max-width: 360px) {
  .mj_sec01 {
    padding-top: var(--mj_section_gap_6_360);
    padding-bottom: var(--mj_section_gap_6_360);
  }

  .mj_sec01_title,
  .mj_sec02_art1_title,
  .mj_sec02_art2_title,
  .mj_sec03_title,
  .mj_sec04_art2_title,
  .mj_sec05_art1_title,
  .mj_sec05_art2_title,
  .mj_sec06_cta_title {
    font-size: 24px;
  }
}

/* ==========================================================================
   SECTION 01 끝
   ========================================================================== */

/* ==========================================================================
   SECTION 02 시작
   ========================================================================== */

.mj_sec02 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mj_sec02_article2 {
  position: relative;
  width: 100%;
}

/* -------------------- 아티클 1 -------------------- */
.mj_sec02_article1 {
  position: relative;
  width: 100%;
}
.mj_sec02_art1_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mj_sec02_art1_bg_mo {
  display: none;
}
.mj_sec02_art1_dark {
  position: relative;
  z-index: 3;
  width: 100%;
}
.mj_sec02_art1_food {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.mj_sec02_art1_food_01 {
  top: -120px;
  left: -120px;
  width: 29%;
}
.mj_sec02_art1_food_02 {
  top: 820px;
  right: -120px;
  width: 33%;
}
.mj_sec02_art1_inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--mj_container_max);
  margin: 0 auto;
  padding: var(--mj_spacing_120) var(--mj_container_padding_pc);
  text-align: center;
}
.mj_sec02_art1_title_deco {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100px;
  width: auto;
}
.mj_sec02_art1_title {
  margin-top: var(--mj_spacing_10);
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  color: var(--mj_color_white);
}
.mj_sec02_art1_title_accent {
  color: var(--mj_color_green_accent);
}
.mj_sec02_art1_desc {
  margin: var(--mj_spacing_24) 0 0;
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_regular);
  color: var(--mj_color_white_80);
}
.mj_sec02_art1_desc strong {
  font-weight: var(--mj_font_weight_bold);
  color: var(--mj_color_white);
}

/* 비교표 - 뱃지 없는 표 이미지 위에 뱃지 있는 표 이미지를 겹쳐서(같은 크기)
   두둥 하고 나타나게 한다. 둘 다 이미지, 코딩 요소 없음. */
.mj_sec02_art1_table {
  position: relative;
  max-width: 1200px;
  margin: var(--mj_spacing_64) auto 0;
}
.mj_sec02_art1_table_stack {
  position: relative;
  width: 100%;
}
.mj_sec02_art1_table_base {
  display: block;
  width: 100%;
  height: auto;
}
.mj_sec02_art1_table_base_mo {
  display: none;
}
.mj_sec02_art1_table_badge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(0.85);
  transition:
    opacity var(--mj_motion_duration) var(--mj_motion_ease) 1.3s,
    transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s;
}
.mj_sec02_art1_table_badge.mj_motion_active {
  transform: scale(1);
}
.mj_sec02_art1_table_badge.mj_pulse {
  animation: mj_sec02_art1_badge_pulse 2.2s ease-in-out infinite;
}
@keyframes mj_sec02_art1_badge_pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.015);
  }
}
.mj_sec02_art1_table_badge_mo {
  display: none;
}

/* 하단 비교 박스 2개 */
.mj_sec02_art1_light {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: var(--mj_spacing_200) 0 var(--mj_spacing_120);
}
.mj_sec02_art1_light_inner {
  display: flex;
  flex-direction: column;
  gap: var(--mj_spacing_24);
  width: 100%;
  max-width: var(--mj_container_max);
  margin: 0 auto;
  padding: 0 var(--mj_container_padding_pc);
}
.mj_sec02_art1_box {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mj_spacing_40);
  width: 80%;
  margin: 0 auto;
  padding: var(--mj_spacing_80);
  border-radius: var(--mj_radius_20);
  overflow: hidden;
}
.mj_sec02_art1_box_reverse {
  flex-direction: row-reverse;
}
.mj_sec02_art1_box_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(178, 132, 92, 0.1), rgba(178, 132, 92, 0.1)),
    url('../img/hyangtek/sec02_art1_box_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.mj_sec02_art1_box_diagram {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 38%;
  max-width: 420px;
  height: auto;
}
.mj_sec02_art1_box_diagram_bg {
  display: block;
  width: 100%;
  height: auto;
}
.mj_sec02_art1_box_diagram_emphasis {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.mj_sec02_art1_box1_diagram_emphasis {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--mj_motion_ease);
  transition-delay: 1s;
}
.mj_sec02_art1_box.mj_motion_active .mj_sec02_art1_box1_diagram_emphasis {
  clip-path: inset(0 0 0 0);
}
.mj_sec02_art1_box2_diagram_emphasis {
  transform: scale(1.2);
  opacity: 0;
  transition:
    transform 0.8s var(--mj_motion_ease),
    opacity 0.8s var(--mj_motion_ease);
  transition-delay: 1s;
}
.mj_sec02_art1_box.mj_motion_active .mj_sec02_art1_box2_diagram_emphasis {
  transform: scale(1);
  opacity: 1;
}
.mj_sec02_art1_box_desc {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  font-size: var(--mj_font_size_32);
  line-height: var(--mj_line_height_large);
  color: var(--mj_color_gray_dark);
}
.mj_sec02_art1_box_desc strong {
  font-weight: var(--mj_font_weight_bold);
  color: var(--mj_color_red_point);
}
.mj_sec02_art1_box_desc_line {
  display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s var(--mj_motion_ease);
}
.mj_sec02_art1_box.mj_motion_active .mj_sec02_art1_box_desc_line {
  clip-path: inset(0 0 0 0);
}
.mj_sec02_art1_box.mj_motion_active .mj_sec02_art1_box_desc_line:nth-child(1) {
  transition-delay: 1s;
}
.mj_sec02_art1_box.mj_motion_active .mj_sec02_art1_box_desc_line:nth-child(2) {
  transition-delay: 1.15s;
}
.mj_sec02_art1_box.mj_motion_active .mj_sec02_art1_box_desc_line:nth-child(3) {
  transition-delay: 1.3s;
}

@media (max-width: 1440px) {
  .mj_sec02_art1_box {
    width: 90%;
  }
}
@media (max-width: 1280px) {
  .mj_sec02_art1_inner {
    padding: var(--mj_section_gap_6_1280) var(--mj_container_padding_pc);
  }
  .mj_sec02_art1_food_01 {
    top: -80px;
    left: -80px;
    width: 32%;
  }
  .mj_sec02_art1_food_02 {
    top: 800px;
    right: -160px;
    width: 37%;
  }
  .mj_sec02_art1_box_desc {
    font-size: var(--mj_font_size_28);
  }
  .mj_sec02_art1_box {
    width: 100%;
    padding: var(--mj_spacing_40);
  }
  .mj_sec02_art1_light {
    padding: var(--mj_spacing_180) 0 var(--mj_spacing_80);
  }
}
@media (max-width: 1028px) {
  .mj_sec02_art1_bg_pc {
    display: none;
  }
  .mj_sec02_art1_bg_mo {
    display: block;
  }
  .mj_sec02_art1_box_desc {
    font-size: var(--mj_font_size_24);
  }
  .mj_sec02_art1_table_base_pc {
    display: none;
  }
  .mj_sec02_art1_table_base_mo {
    display: block;
  }
  .mj_sec02_art1_table_badge_pc {
    display: none;
  }
  .mj_sec02_art1_table_badge_mo {
    display: block;
  }
  .mj_sec02_art1_table_stack {
    margin: 0 auto;
    width: 70%;
  }
  .mj_sec02_art1_inner {
    padding: var(--mj_section_gap_6_1028) var(--mj_container_padding_pc);
  }
  .mj_sec02_art1_food_01 {
    top: -80px;
    left: -80px;
    width: 35%;
  }
  .mj_sec02_art1_food_02 {
    top: 690px;
    right: -110px;
    width: 35%;
  }
  .mj_sec02_art1_box {
    flex-direction: column;
    width: 100%;
    text-align: center;
  }
  .mj_sec02_art1_box_reverse {
    flex-direction: column;
  }
  .mj_sec02_art1_box_diagram {
    max-width: 550px;
    width: 58%;
  }
  .mj_sec02_art1_desc {
    margin-top: var(--mj_spacing_22);
  }
  .mj_sec02_art1_light {
    padding: var(--mj_spacing_120) 0 var(--mj_spacing_64);
  }
}
@media (max-width: 768px) {
  .mj_sec02_art1_inner {
    padding: var(--mj_section_gap_6_768) var(--mj_container_padding_mobile);
  }
  .mj_sec02_art1_title_deco {
    height: 60px;
  }
  .mj_sec02_art1_desc {
    margin-top: var(--mj_spacing_20);
  }
  .mj_sec02_art1_table {
    margin-top: var(--mj_spacing_48);
  }
  .mj_sec02_art1_food_01 {
    top: -100px;
    left: -100px;
    width: 40%;
  }
  .mj_sec02_art1_food_02 {
    top: 530px;
    right: -100px;
    width: 38%;
  }
  .mj_sec02_art1_light_inner {
    padding: 0 var(--mj_container_padding_mobile);
  }
  .mj_sec02_art1_box {
    padding: var(--mj_spacing_32);
    width: 100%;
  }
  .mj_sec02_art1_box_desc {
    font-size: var(--mj_font_size_20);
  }
  .mj_sec02_art1_light {
    padding: var(--mj_spacing_80) 0 var(--mj_spacing_48);
  }
}
@media (max-width: 570px) {
  .mj_sec02_art1_table_stack {
    width: 90%;
  }
}
@media (max-width: 425px) {
  .mj_sec02_art1_inner {
    padding: var(--mj_section_gap_6_425) var(--mj_container_padding_mobile);
  }
  .mj_sec02_art1_food_01 {
    top: -42px;
    left: -42px;
    width: 32%;
  }
  .mj_sec02_art1_food_02 {
    top: 400px;
    right: -72px;
    width: 40%;
  }
  .mj_sec02_art1_box_diagram {
    width: 180px;
  }
  .mj_sec02_art1_box {
    padding: var(--mj_spacing_24);
    width: 100%;
  }
  .mj_sec02_art1_box_desc {
    font-size: var(--mj_font_size_16);
  }
  .mj_sec02_art1_desc {
    margin-top: var(--mj_spacing_16);
  }
  .mj_sec02_art1_light {
    padding: var(--mj_spacing_64) 0 var(--mj_spacing_40);
  }
}
@media (max-width: 360px) {
  .mj_sec02_art1_inner {
    padding: var(--mj_section_gap_6_360) var(--mj_container_padding_mobile);
  }
  .mj_sec02_art1_food_01 {
    width: 34%;
  }
  .mj_sec02_art1_food_02 {
    width: 48%;
  }
  .mj_sec02_art1_light {
    padding: var(--mj_spacing_48) 0 var(--mj_spacing_32);
  }
}

/* -------------------- 아티클 2 -------------------- */
.mj_sec02_article2 {
  height: clamp(360px, calc(50vw - 280px), 680px);
  background-color: var(--mj_color_green_dark);
  overflow: hidden;
}

.mj_sec02_art2_inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

/* 타이틀 영역 : 아티클 폭의 절반, 콘텐츠는 1600px 컨테이너 좌측 정렬 기준 */
.mj_sec02_art2_head {
  position: relative;
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: max(var(--mj_container_padding_pc), calc(50vw - 780px));
  padding-right: var(--mj_spacing_40);
  background-image: url('../img/hyangtek/sec02_art2_deco.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.mj_sec02_art2_badge {
  width: 40px;
  margin-bottom: 10px;
}

.mj_sec02_art2_title {
  margin: 0;
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  color: var(--mj_color_white);
}

.mj_sec02_art2_desc {
  margin: 24px 0 0;
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_regular);
  line-height: var(--mj_line_height_medium);
  color: var(--mj_color_white);
}

.mj_sec02_art2_head .mj_motion_group {
  --mj_motion_duration: 0.4s;
}

/* 카드 영역 : 아티클 폭의 절반, 카드 3개 hover 아코디언 */
.mj_sec02_art2_cards {
  display: flex;
  align-items: stretch;
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
}

.mj_sec02_art2_card {
  position: relative;
  flex: 0 0 140px;
  width: 140px;
  height: 100%;
  background-color: var(--mj_color_green_dark);
  border-left: 1px solid var(--mj_color_beige_dark);
  overflow: hidden;
  cursor: pointer;
  will-change: flex-basis, width;
  transition:
    flex-basis 0.8s var(--mj_motion_ease),
    width 0.8s var(--mj_motion_ease);
}

.mj_sec02_art2_card.mj_active {
  flex: 0 0 clamp(360px, calc(50vw - 280px), 680px);
  width: clamp(360px, calc(50vw - 280px), 680px);
}

/* 모바일(768px 이하) 전용 개별 등장 모션 */
.mj_sec02_art2_card.mj_motion_self.mj_motion_up {
  opacity: 1;
  transform: none;
  transition:
    flex-basis 0.8s var(--mj_motion_ease),
    width 0.8s var(--mj_motion_ease);
}

.mj_sec02_art2_card_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.8s var(--mj_motion_ease);
}

.mj_sec02_art2_card.mj_active .mj_sec02_art2_card_bg {
  opacity: 1;
}

.mj_sec02_art2_card_open_text {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  padding: 0 clamp(24px, calc(2.5vw - 8px), 40px)
    clamp(40px, calc(6.25vw - 40px), 80px);
  opacity: 0;
  transform: translateY(80px);
  transition:
    opacity 0.8s var(--mj_motion_ease),
    transform 0.8s var(--mj_motion_ease);
}

.mj_sec02_art2_card.mj_active .mj_sec02_art2_card_open_text {
  opacity: 1;
  transform: translateY(0);
}

.mj_sec02_art2_card_title {
  margin: 0;
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  font-size: clamp(32px, calc(1.25vw + 16px), 40px);
  line-height: var(--mj_line_height_small);
  color: var(--mj_color_white);
}

.mj_sec02_art2_card_desc {
  margin: 16px 0 0;
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_light);
  font-size: clamp(16px, calc(0.625vw + 8px), 20px);
  line-height: var(--mj_line_height_medium);
  color: var(--mj_color_white);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s var(--mj_motion_ease),
    transform 0.8s var(--mj_motion_ease);
}

.mj_sec02_art2_card.mj_active .mj_sec02_art2_card_desc {
  opacity: 1;
  transform: translateY(0);
}

/* 접힌 상태 텍스트 : 카드 안 가로 가운데, 하단정렬 + 하단패딩 80 */
.mj_sec02_art2_card_closed_text {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding-bottom: 80px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.mj_sec02_art2_card.mj_active .mj_sec02_art2_card_closed_text {
  opacity: 0;
}

.mj_sec02_art2_card_closed_text span {
  writing-mode: vertical-rl;
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  font-size: clamp(24px, calc(1.25vw + 8px), 32px);
  color: var(--mj_color_white);
  white-space: nowrap;
}

/* -------------------- 아티클 2 반응형 -------------------- */

/* 1600px~1280px : 카드 정사각형 벗어나며 높이 보정 */
@media (max-width: 1600px) {
  .mj_sec02_article2 {
    height: clamp(460px, calc(18.75vw + 220px), 520px);
  }
}

/* 1280px 이하 : 좌우 구조 유지, 폭만 유연 축소 */
@media (max-width: 1280px) {
  .mj_sec02_article2 {
    height: clamp(360px, calc(50vw - 200px), 460px);
  }

  .mj_sec02_art2_head {
    padding-top: var(--mj_spacing_60);
    padding-bottom: var(--mj_spacing_80);
    padding-left: var(--mj_container_padding_pc);
  }

  .mj_sec02_art2_card.mj_active {
    flex: 1 1 auto;
  }

  .mj_sec02_art2_card {
    flex: 0 0 100px;
    width: 100px;
  }
}

/* 1028px~768px : 타이틀 상단 / 카드 하단으로 상하 배치, 카드는 가로나열 + hover 유지 */
@media (max-width: 1028px) {
  .mj_sec02_article2 {
    height: auto;
  }

  .mj_sec02_art2_inner {
    flex-direction: column;
  }

  .mj_sec02_art2_head {
    flex: 0 0 auto;
    width: 100%;
    padding: var(--mj_spacing_64) var(--mj_container_padding_pc);
  }

  .mj_sec02_art2_cards {
    flex: 0 0 auto;
    width: 100%;
    height: 420px;
  }

  .mj_sec02_art2_card_desc {
    width: 80%;
  }

  .mj_sec02_art2_desc {
    margin-top: var(--mj_spacing_22);
  }
}

/* 768px 이하 : 카드 3개 모두 항상 열림, 세로 나열 */
@media (max-width: 768px) {
  .mj_sec02_art2_head {
    padding: var(--mj_spacing_48) var(--mj_container_padding_mobile);
  }

  .mj_sec02_art2_desc {
    margin-top: var(--mj_spacing_20);
  }

  .mj_sec02_art2_cards {
    flex-direction: column;
    height: auto;
  }

  .mj_sec02_art2_card,
  .mj_sec02_art2_card.mj_active {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 2 / 1.7;
    border-left: none;
    border-bottom: 1px solid var(--mj_color_beige_dark);
  }

  .mj_sec02_art2_card_bg,
  .mj_sec02_art2_card_open_text {
    opacity: 1;
    transform: translateY(0);
  }

  .mj_sec02_art2_card_closed_text {
    display: none;
  }

  .mj_sec02_art2_card_open_text {
    padding: 0 24px 40px;
  }

  .mj_sec02_art2_card_title {
    font-size: 28px;
  }

  .mj_sec02_art2_card_desc {
    font-size: 14px;
    transition-delay: 0.4s;
  }

  .mj_sec02_art2_card.mj_motion_active .mj_sec02_art2_card_desc {
    opacity: 1;
    transform: translateY(0);
  }

  .mj_sec02_art2_card.mj_motion_self.mj_motion_up {
    opacity: 0;
    transform: translateY(var(--mj_motion_distance));
    transition:
      opacity var(--mj_motion_duration) var(--mj_motion_ease),
      transform var(--mj_motion_duration) var(--mj_motion_ease);
  }

  .mj_sec02_art2_card.mj_motion_self.mj_motion_up.mj_motion_active {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 425px) {
  .mj_sec02_art2_desc {
    margin-top: var(--mj_spacing_16);
  }
}

/* ==========================================================================
   SECTION 02 끝
   ========================================================================== */

/* ==========================================================================
   SECTION 03 시작 : 메뉴안내
   ========================================================================== */

.mj_sec03 {
  position: relative;
  width: 100%;
}

.mj_sec03_pin {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.mj_sec03_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../img/hyangtek/sec03_menu_bg_pc.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.mj_sec03_inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--mj_container_max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--mj_container_padding_pc);
}

.mj_sec03_text {
  flex: 0 0 44%;
  width: 44%;
  align-self: flex-start;
  padding-top: var(--mj_section_gap_6_pc);
}

.mj_sec03_title {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  color: var(--mj_color_green_dark);
}

.mj_sec03_badge {
  position: absolute;
  top: -21px;
  right: -34px;
  width: 32px;
  opacity: 0.6;
}

.mj_sec03_desc {
  margin: var(--mj_spacing_24) 0 0;
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_regular);
  line-height: var(--mj_line_height_large);
  color: var(--mj_color_gray_dark);
}

.mj_sec03_desc strong {
  font-weight: var(--mj_font_weight_bold);
}

/* 메뉴판 - PC : 통 이미지 1장, 핀-스크롤로 원본비율 유지하며 스크롤 공개 */
.mj_sec03_board {
  position: relative;
  flex: 0 0 56%;
  width: 56%;
  height: 100%;
  overflow: hidden;
}

@media (min-width: 1029px) {
  .mj_sec03_board {
    cursor: grab;
    touch-action: pan-y;
  }

  .mj_sec03_board.mj_dragging {
    cursor: grabbing;
  }
}

.mj_sec03_board_track {
  display: block;
  padding: 40px 0;
  will-change: transform;
}

.mj_sec03_board_img_full {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}

.mj_sec03_board_mo_list {
  display: none;
}

@media (max-width: 1280px) {
  .mj_sec03_text {
    padding-top: var(--mj_section_gap_6_1280);
  }
}

/* 1028px 이하 : 모바일 - pin 해제, 상하 구조 + 세로 순차등장 */
@media (max-width: 1028px) {
  .mj_sec03_pin {
    position: static;
    display: block;
    height: auto;
    overflow: visible;
    padding: var(--mj_section_gap_6_1028) 0;
  }

  .mj_sec03_bg {
    background-image: url('../img/hyangtek/sec03_menu_bg_mo.jpg');
  }

  .mj_sec03_inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    height: auto;
    padding: 0 var(--mj_container_padding_mobile);
  }

  .mj_sec03_text {
    flex: 0 0 auto;
    width: 100%;
    padding-top: 0;
  }

  .mj_sec03_board {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .mj_sec03_board_track {
    display: none;
  }

  .mj_sec03_board_mo_pin {
    overflow: visible;
  }

  .mj_sec03_board_mo_list {
    display: flex;
    flex-direction: row;
    margin-top: var(--mj_spacing_32);
    gap: var(--mj_spacing_16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
  }

  .mj_sec03_board_mo_list:active {
    cursor: grabbing;
  }

  .mj_sec03_board_mo_list::-webkit-scrollbar {
    display: none;
  }

  .mj_sec03_board_img {
    display: block;
    flex: 0 0 auto;
    width: 66%;
    height: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    -webkit-user-drag: none;
  }

  .mj_sec03_board_img:last-child {
    scroll-snap-align: end;
  }

  .mj_sec03_desc {
    margin-top: var(--mj_spacing_22);
  }
}

@media (max-width: 768px) {
  .mj_sec03_pin {
    padding: var(--mj_section_gap_6_768) 0;
  }

  .mj_sec03_desc {
    margin-top: var(--mj_spacing_20);
  }
}

@media (max-width: 425px) {
  .mj_sec03_pin {
    padding: var(--mj_section_gap_6_425) 0;
  }

  .mj_sec03_desc {
    margin-top: var(--mj_spacing_16);
  }
}

@media (max-width: 360px) {
  .mj_sec03_pin {
    padding: var(--mj_section_gap_6_360) 0;
  }
}

/* ==========================================================================
   SECTION 03 끝
   ========================================================================== */

/* ==========================================================================
   SECTION 04 시작 : 인테리어
   ========================================================================== */
.mj_sec04 {
  position: relative;
  width: 100%;
}
/* -------------------- 아티클 1 : 패럴랙스 히어로 -------------------- */
.mj_sec04_article1 {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  background-color: var(--mj_color_green_dark);
}
.mj_sec04_art1_media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mj_sec04_art1_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  will-change: transform;
}
.mj_sec04_art1_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  height: 28%;
  width: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* -------------------- 아티클 2 : 인테리어 갤러리 -------------------- */
.mj_sec04_article2 {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--mj_section_gap_6_pc) 0;
  background-color: var(--mj_color_beige_light);
}
.mj_sec04_art2_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.mj_sec04_art2_bg_pc {
  background-image: url('../img/hyangtek/sec04_art2_bg_pc.jpg');
}
.mj_sec04_art2_bg_mo {
  display: none;
  background-image: url('../img/hyangtek/sec04_art2_bg_mo.jpg');
}
.mj_sec04_art2_inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--mj_container_max);
  margin: 0 auto;
  padding: 0 var(--mj_container_padding_pc);
}
.mj_sec04_art2_badge {
  width: 40px;
  margin-bottom: 10px;
}
.mj_sec04_art2_title {
  margin: 0;
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  color: var(--mj_color_gray_dark);
}
.mj_sec04_art2_title.mj_motion_group {
  opacity: 1;
  transform: none;
  transition: none;
}
.mj_sec04_art2_title .mj_char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.15s var(--mj_motion_ease),
    transform 0.15s var(--mj_motion_ease);
  transition-delay: calc(0.02s + var(--i) * 0.008s);
}
.mj_sec04_art2_title.mj_motion_active .mj_char {
  opacity: 1;
  transform: translateY(0);
}
.mj_sec04_art2_title_accent {
  color: var(--mj_color_green_base);
}
.mj_sec04_art2_desc {
  margin: 24px 0 0;
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_regular);
  line-height: var(--mj_line_height_normal);
  color: var(--mj_color_gray_dark);
}
.mj_sec04_art2_gallery {
  position: relative;
  width: 100vw;
  margin-top: var(--mj_spacing_64);
  margin-left: calc(50% - 50vw);
  --mj-slide-w: clamp(480px, 46vw, 860px);
}
.mj_sec04_art2_track {
  display: flex;
  gap: var(--mj_spacing_24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 calc(50vw - (var(--mj-slide-w) / 2));
  cursor: grab;
  user-select: none;
}
.mj_sec04_art2_stair_track {
  display: none;
}
.mj_sec04_art2_track.mj_dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.mj_sec04_art2_track::-webkit-scrollbar {
  display: none;
}
.mj_sec04_art2_slide_group {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mj_sec04_art2_slide {
  flex: 0 0 auto;
  width: var(--mj-slide-w);
  aspect-ratio: 100 / 114;
  margin: 0;
  border: 1px solid var(--mj_color_beige_dark);
  border-radius: var(--mj_radius_12);
  overflow: hidden;
  list-style: none;
  scroll-snap-align: center;
}
.mj_sec04_art2_slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: transform 0.4s ease;
}
.mj_sec04_art2_slide:hover img {
  transform: scale(1.08);
}
.mj_sec04_art2_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mj_spacing_40);
  margin-top: var(--mj_spacing_54);
}
.mj_sec04_art2_arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.mj_sec04_art2_arrow img {
  display: block;
  width: 100%;
  height: 100%;
}
.mj_sec04_art2_tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--mj_spacing_12);
  padding: var(--mj_spacing_20);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.mj_sec04_art2_tabs:active {
  cursor: grabbing;
}
.mj_sec04_art2_tabs::-webkit-scrollbar {
  display: none;
}
.mj_sec04_art2_tab {
  flex: 0 0 auto;
  padding: var(--mj_spacing_12) var(--mj_spacing_20);
  border: 0;
  border-radius: var(--mj_radius_6);
  background-color: rgba(204, 194, 170, 0.5);
  color: var(--mj_color_gray_dark);
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  font-size: var(--mj_font_size_24);
  white-space: nowrap;
  scroll-snap-align: start;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.mj_sec04_art2_tab.mj_active {
  background-color: var(--mj_color_green_dark);
  color: var(--mj_color_white);
}
/* -------------------- 반응형 -------------------- */
@media (max-width: 1280px) {
  .mj_sec04_article2 {
    padding: var(--mj_section_gap_6_1280) 0;
  }
  .mj_sec04_art2_inner {
    padding: 0 var(--mj_container_padding_pc);
  }
  .mj_sec04_art2_nav {
    gap: var(--mj_spacing_16);
  }
  .mj_sec04_art2_arrow {
    width: 40px;
    height: 40px;
  }
  .mj_sec04_art2_tabs {
    gap: var(--mj_spacing_8);
    padding: var(--mj_spacing_12);
  }
  .mj_sec04_art2_tab {
    padding: var(--mj_spacing_8) var(--mj_spacing_12);
    font-size: var(--mj_font_size_16);
  }
}
@media (max-width: 1028px) {
  .mj_sec04_art2_bg_pc {
    display: none;
  }
  .mj_sec04_art2_bg_mo {
    display: block;
  }
  .mj_sec04_article2 {
    padding: var(--mj_section_gap_6_1028) 0;
  }
  .mj_sec04_art2_nav {
    gap: var(--mj_spacing_12);
  }
  .mj_sec04_art2_arrow {
    width: 32px;
    height: 32px;
  }
  .mj_sec04_art2_tabs {
    gap: var(--mj_spacing_8);
    padding: var(--mj_spacing_8);
  }
  .mj_sec04_art2_tab {
    padding: var(--mj_spacing_8);
    font-size: var(--mj_font_size_14);
  }
  .mj_sec04_art2_desc {
    margin-top: var(--mj_spacing_22);
  }
}
@media (min-width: 769px) and (max-width: 1028px) {
  .mj_sec04_art2_gallery {
    margin-top: var(--mj_spacing_80);
    --mj-slide-w: 33vw;
  }
  .mj_sec04_art2_track {
    padding: 0 calc(var(--mj-slide-w) / 2);
    scroll-snap-type: none;
  }
}
@media (min-width: 1029px) {
  .mj_sec04_art2_head {
    position: relative;
    z-index: 2;
  }
  .mj_sec04_art2_gallery {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-left: 0;
    margin-top: calc(-1 * var(--mj_spacing_120));
  }
  .mj_sec04_art2_track {
    display: none;
  }
  .mj_sec04_art2_stair_track {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mj_sec04_art2_stair_strip {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: var(--mj_spacing_24);
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.5s ease;
    will-change: transform, opacity;
  }
  .mj_sec04_art2_stair_strip.mj_active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }
  .mj_sec04_art2_stair_strip .mj_sec04_art2_slide {
    display: block;
    flex: 0 0 auto;
    aspect-ratio: 100 / 114;
    border: 1px solid var(--mj_color_beige_dark);
    border-radius: var(--mj_radius_12);
    overflow: hidden;
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mj_sec04_art2_stair_strip .mj_sec04_art2_slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
  }
}
@media (min-width: 1440px) {
  .mj_sec04_art2_gallery {
    margin-top: calc(-1 * var(--mj_spacing_180));
  }
}
@media (max-width: 768px) {
  .mj_sec04_article1 {
    aspect-ratio: 2 / 1;
  }
  .mj_sec04_article2 {
    padding: var(--mj_section_gap_6_768) 0;
  }
  .mj_sec04_art2_inner {
    padding: 0 var(--mj_container_padding_mobile);
  }
  .mj_sec04_art2_gallery {
    margin-top: var(--mj_spacing_48);
    --mj-slide-w: 70vw;
  }
  .mj_sec04_art2_nav {
    margin-top: var(--mj_spacing_32);
  }
  .mj_sec04_art2_arrow {
    display: none;
  }
  .mj_sec04_art2_tab {
    height: 40px;
    padding: 0 var(--mj_spacing_16);
    font-size: var(--mj_font_size_14);
  }
  .mj_sec04_art2_desc {
    margin-top: var(--mj_spacing_20);
  }
}
@media (max-width: 425px) {
  .mj_sec04_article2 {
    padding: var(--mj_section_gap_6_425) 0;
  }
  .mj_sec04_art2_desc {
    margin-top: var(--mj_spacing_16);
  }
}
@media (max-width: 360px) {
  .mj_sec04_article2 {
    padding: var(--mj_section_gap_6_360) 0;
  }
}
/* ==========================================================================
   SECTION 04 끝
   ========================================================================== */

/* ==========================================================================
   SECTION 05 시작
   ========================================================================== */

.mj_sec05 {
  position: relative;
  width: 100%;
  padding: var(--mj_spacing_40);
  background-color: var(--mj_color_brown);
  overflow: hidden;
}

.mj_sec05_article1,
.mj_sec05_article2 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mj_sec05_article1 {
  border-radius: var(--mj_radius_40) var(--mj_radius_40) 0 0;
}

/* -------------------- 아티클 1 (다크) -------------------- */
.mj_sec05_art1_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mj_sec05_art1_bg_mo {
  display: none;
}
.mj_sec05_art1_food {
  --mj_sec05_art1_food_top: 0;
  --mj_sec05_art1_food_right: 0;
  --mj_sec05_art1_food_width: 22%;
  position: absolute;
  top: var(--mj_sec05_art1_food_top);
  right: var(--mj_sec05_art1_food_right);
  z-index: 1;
  width: var(--mj_sec05_art1_food_width);
  height: auto;
  pointer-events: none;
}
.mj_sec05_art1_inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--mj_container_max);
  margin: 0 auto;
  padding: var(--mj_section_gap_6_pc) var(--mj_container_padding_pc);
  text-align: center;
}
.mj_sec05_art1_title_deco {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100px;
  width: auto;
}
.mj_sec05_art1_head {
  margin-bottom: var(--mj_spacing_64);
}
.mj_sec05_art1_title {
  margin: var(--mj_spacing_10) 0 0;
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  color: var(--mj_color_white);
}
.mj_sec05_art1_title_accent {
  position: relative;
  display: inline-block;
  color: var(--mj_color_green_accent);
  transform: scale(0.5);
  opacity: 0;
  transform-origin: bottom center;
  transition:
    transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 1s var(--mj_motion_ease);
}
.mj_sec05_art1_title.mj_motion_active .mj_sec05_art1_title_accent {
  transform: scale(1);
  opacity: 1;
}
.mj_sec05_art1_title_accent::before,
.mj_sec05_art1_title_accent::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--mj_color_green_accent);
  opacity: 0;
  transform-origin: bottom center;
  pointer-events: none;
}
@keyframes mj_sec05_title_accent_echo {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.mj_sec05_art1_title_accent.mj_pulse::before,
.mj_sec05_art1_title_accent.mj_pulse::after {
  animation: mj_sec05_title_accent_echo 2.2s ease-out infinite;
}
.mj_sec05_art1_title_accent.mj_pulse::after {
  animation-delay: 1.1s;
}
.mj_sec05_art1_desc {
  margin: var(--mj_spacing_24) 0 0;
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_regular);
  color: var(--mj_color_white);
}

.mj_sec05_art1_highlight {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.mj_sec05_art1_hl_scale {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--mj_spacing_64);
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0 auto;
  transform-origin: center top;
}
.mj_sec05_art1_hl_block {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--mj_spacing_24);
}
.mj_sec05_art1_hl_stamp {
  flex: 0 0 auto;
  width: 180px;
  height: auto;
}
.mj_sec05_art1_hl_text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mj_spacing_8);
  text-align: left;
}
.mj_sec05_art1_hl_store {
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  font-size: var(--mj_font_size_24);
  line-height: var(--mj_line_height_small);
  color: var(--mj_color_white);
}
.mj_sec05_art1_hl_row {
  display: flex;
  align-items: baseline;
  gap: var(--mj_spacing_12);
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  font-size: var(--mj_font_size_24);
  line-height: var(--mj_line_height_medium);
  color: var(--mj_color_beige_deep);
}
.mj_sec05_art1_hl_row_sub {
  font-size: var(--mj_font_size_16);
  color: var(--mj_color_white_60);
}
.mj_sec05_art1_hl_label {
  flex: 0 0 auto;
}
.mj_sec05_art1_hl_num {
  display: inline-block;
  font-family: var(--mj_font_number);
  font-weight: var(--mj_font_weight_extrabold);
  font-size: var(--mj_font_size_54);
  line-height: var(--mj_line_height_small);
  font-variant-numeric: tabular-nums;
  color: var(--mj_color_beige_deep);
}
.mj_sec05_art1_hl_num_sub {
  font-family: var(--mj_font_number);
  font-weight: var(--mj_font_weight_regular);
  font-size: var(--mj_font_size_38);
}
.mj_sec05_art1_hl_unit_sub {
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
}
.mj_sec05_art1_hl_unit {
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  font-size: var(--mj_font_size_24);
  color: var(--mj_color_beige_deep);
}
.mj_sec05_art1_hl_divider {
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--mj_spacing_8);
}
.mj_sec05_art1_hl_divider_img {
  display: block;
  width: 2px;
  height: 100px;
  object-fit: cover;
}

.mj_sec05_art1_cards {
  width: 100vw;
  margin-left: 50%;
  margin-top: var(--mj_spacing_120);
  transform: translateX(-50%);
}
.mj_sec05_art1_cards_track {
  display: flex;
  align-items: flex-start;
  gap: var(--mj_spacing_40);
  width: max-content;
  animation: mj_sec05_art1_marquee 26s linear infinite;
}
.mj_sec05_art1_cards_track.mj_paused {
  animation-play-state: paused;
}
@keyframes mj_sec05_art1_marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.mj_sec05_art1_card {
  position: relative;
  flex: 0 0 auto;
  width: 320px;
}
.mj_sec05_art1_card_img {
  display: block;
  width: 100%;
  height: auto;
}
.mj_sec05_art1_card_label {
  position: absolute;
  top: calc(-2 * var(--mj_spacing_20));
  right: calc(-1 * var(--mj_spacing_42));
  z-index: 1;
  width: 220px;
  height: auto;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mj_sec05_art1_card:hover .mj_sec05_art1_card_label {
  transform: scale(1.1) rotate(-3deg);
}

/* -------------------- 아티클 2 (라이트) -------------------- */
.mj_sec05_art2_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mj_sec05_art2_bg_mo {
  display: none;
}
.mj_sec05_art2_border {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0.6;
  pointer-events: none;
}
.mj_sec05_art2_border_mo {
  display: none;
}
.mj_sec05_art2_food {
  --mj_sec05_art2_food_top: 0;
  --mj_sec05_art2_food_left: 0;
  --mj_sec05_art2_food_width: 20%;
  position: absolute;
  top: var(--mj_sec05_art2_food_top);
  left: var(--mj_sec05_art2_food_left);
  z-index: 4;
  width: var(--mj_sec05_art2_food_width);
  height: auto;
  pointer-events: none;
}
.mj_sec05_art2_inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--mj_container_max);
  margin: 0 auto;
  padding: var(--mj_section_gap_6_pc) var(--mj_container_padding_pc);
  text-align: center;
}
.mj_sec05_art2_head {
  margin-bottom: var(--mj_spacing_64);
}
.mj_sec05_art2_title {
  margin: 0;
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  color: var(--mj_color_gray_dark);
}
.mj_sec05_art2_title_accent {
  display: inline-block;
  height: 1.3em;
  width: auto;
  vertical-align: baseline;
  margin: 0 var(--mj_spacing_8);
  transform: scale(0.4);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s var(--mj_motion_ease);
  transition-delay: 0.3s;
}
.mj_sec05_art2_title_accent.mj_motion_active {
  transform: scale(1);
  opacity: 1;
}
.mj_sec05_art2_desc {
  margin: var(--mj_spacing_24) 0 0;
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_regular);
  color: var(--mj_color_gray_dark);
}
.mj_sec05_art2_desc strong {
  font-weight: var(--mj_font_weight_bold);
}

.mj_sec05_art2_chart_wrap {
  position: relative;
  --mj_sec05_art2_donut_width: 540px;
  --mj_sec05_art2_profit_num_width: 340px;
  margin-top: var(--mj_spacing_40);
}

/* 왼쪽 - 순수익 텍스트 박스 (도넛 기준 절대배치) */
.mj_sec05_art2_profit {
  position: absolute;
  top: 80%;
  right: calc(
    40% + (var(--mj_sec05_art2_donut_width) / 2) + var(--mj_spacing_64)
  );
  transform: translateY(-50%);
  z-index: 99;
}
.mj_sec05_art2_profit_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mj_sec05_art2_profit_store {
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  font-size: var(--mj_font_size_24);
  line-height: var(--mj_line_height_medium);
  margin-bottom: var(--mj_spacing_12);
  padding-left: var(--mj_spacing_40);
  color: var(--mj_color_gray_dark);
}
.mj_sec05_art2_profit_num {
  position: relative;
  display: inline-block;
  width: var(--mj_sec05_art2_profit_num_width);
}
.mj_sec05_art2_profit_num_img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
.mj_sec05_art2_profit_num_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--mj_motion_ease);
}
.mj_sec05_art2_chart_wrap.mj_art2_num_done .mj_sec05_art2_profit_num_bg {
  clip-path: inset(0 0 0 0);
}
.mj_sec05_art2_profit_note {
  margin: var(--mj_spacing_12) 0 0;
  padding-left: var(--mj_spacing_40);
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_medium);
  font-size: var(--mj_font_size_20);
  line-height: var(--mj_line_height_medium);
  color: var(--mj_color_gray_dark);
  text-align: left;
}

/* 가운데 - 원형 그래프(배경 이미지 + 모션 svg 겹침), 섹션 가로 기준 가운데 정렬 */
.mj_sec05_art2_donut {
  position: relative;
  width: var(--mj_sec05_art2_donut_width);
  height: var(--mj_sec05_art2_donut_width);
  margin: 0 auto;
}
.mj_sec05_art2_donut_bg,
.mj_sec05_art2_donut_motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@property --mj_sec05_art2_donut_sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.mj_sec05_art2_donut_motion {
  --mj_sec05_art2_donut_sweep: 0deg;
  -webkit-mask-image: conic-gradient(
    from 0deg,
    #000 0deg,
    #000 var(--mj_sec05_art2_donut_sweep),
    transparent var(--mj_sec05_art2_donut_sweep)
  );
  mask-image: conic-gradient(
    from 0deg,
    #000 0deg,
    #000 var(--mj_sec05_art2_donut_sweep),
    transparent var(--mj_sec05_art2_donut_sweep)
  );
  transition: --mj_sec05_art2_donut_sweep 2.5s var(--mj_motion_ease);
}
.mj_sec05_art2_chart_wrap.mj_art2_donut_done .mj_sec05_art2_donut_motion {
  --mj_sec05_art2_donut_sweep: 360deg;
}

/* 오른쪽 - 뱃지(도넛과는 분리된 요소, 도넛 기준으로 절대배치, 아래→위 등장) */
.mj_sec05_art2_badge {
  --mj_sec05_art2_badge_top: 20%;
  --mj_sec05_art2_badge_left: calc(
    60% + (var(--mj_sec05_art2_donut_width) / 2)
  );
  --mj_sec05_art2_badge_width: 260px;
  position: absolute;
  top: var(--mj_sec05_art2_badge_top);
  left: var(--mj_sec05_art2_badge_left);
  width: var(--mj_sec05_art2_badge_width);
  height: auto;
  transform: translate(-50%, calc(-50% + 60vh));
  opacity: 0;
  transition:
    opacity var(--mj_motion_duration) var(--mj_motion_ease),
    transform var(--mj_motion_duration) var(--mj_motion_ease);
}
.mj_sec05_art2_chart_wrap.mj_art2_badge_done .mj_sec05_art2_badge {
  transform: translate(-50%, -50%);
  opacity: 1;
  animation: mj_sec05_art2_badge_float 2.6s ease-in-out
    var(--mj_motion_duration) infinite;
}
@keyframes mj_sec05_art2_badge_float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

/* -------------------- 반응형 -------------------- */
@media (max-width: 1400px) {
  .mj_sec05_art2_chart_wrap {
    --mj_sec05_art2_profit_num_width: 300px;
  }
  .mj_sec05_art2_profit_store {
    font-size: var(--mj_font_size_20);
  }
  .mj_sec05_art2_profit_note {
    font-size: var(--mj_font_size_18);
  }
}
@media (max-width: 1280px) {
  .mj_sec05_article1 {
    border-radius: var(--mj_radius_32) var(--mj_radius_32) 0 0;
  }
  .mj_sec05_art1_inner,
  .mj_sec05_art2_inner {
    padding: var(--mj_section_gap_6_1280) var(--mj_container_padding_pc);
  }
  .mj_sec05_art1_hl_scale {
    gap: var(--mj_spacing_48);
  }
  .mj_sec05_art1_hl_stamp {
    width: 150px;
  }
  .mj_sec05_art1_hl_store {
    font-size: var(--mj_font_size_20);
  }
  .mj_sec05_art1_hl_row {
    font-size: var(--mj_font_size_20);
  }
  .mj_sec05_art1_hl_num {
    font-size: var(--mj_font_size_48);
  }
  .mj_sec05_art1_hl_row_sub .mj_sec05_art1_hl_num_sub {
    font-size: var(--mj_font_size_32);
  }
  .mj_sec05_art1_hl_unit {
    font-size: var(--mj_font_size_20);
  }
  .mj_sec05_art2_chart_wrap {
    --mj_sec05_art2_donut_width: 400px;
    --mj_sec05_art2_profit_num_width: 260px;
  }
  .mj_sec05_art2_badge {
    --mj_sec05_art2_badge_width: 200px;
  }
  .mj_sec05_art2_profit_store {
    font-size: var(--mj_font_size_18);
  }
  .mj_sec05_art2_profit_note {
    font-size: var(--mj_font_size_16);
  }
}

@media (max-width: 1028px) {
  .mj_sec05 {
    padding: var(--mj_spacing_32);
  }
  .mj_sec05_article1 {
    border-radius: var(--mj_radius_28) var(--mj_radius_28) 0 0;
  }
  .mj_sec05_art1_bg_pc,
  .mj_sec05_art2_bg_pc {
    display: none;
  }
  .mj_sec05_art1_bg_mo,
  .mj_sec05_art2_bg_mo {
    display: block;
  }
  .mj_sec05_art2_border_pc {
    display: none;
  }
  .mj_sec05_art2_border_mo {
    display: block;
  }
  .mj_sec05_art1_inner,
  .mj_sec05_art2_inner {
    padding: var(--mj_section_gap_6_1028) var(--mj_container_padding_pc);
  }
  .mj_sec05_art1_food {
    --mj_sec05_art1_food_width: 30%;
  }
  .mj_sec05_art2_food {
    --mj_sec05_art2_food_width: 26%;
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
    transform: scale(-1, -1);
  }
  .mj_sec05_art1_hl_scale {
    flex-direction: column;
    gap: var(--mj_spacing_32);
  }
  .mj_sec05_art1_hl_divider {
    width: 50%;
    height: 2px;
    margin: 0 auto;
  }
  .mj_sec05_art1_hl_divider_img {
    transform: rotate(90deg);
  }
  .mj_sec05_art2_chart_wrap {
    --mj_sec05_art2_donut_width: 96vw;
    --mj_sec05_art2_profit_num_width: 220px;
    display: block;
  }
  .mj_sec05_art2_donut {
    height: auto;
    width: 60%;
    aspect-ratio: 1 / 1;
  }
  /* 텍스트 박스 - 도넛 왼쪽 하단에 겹치게 배치 */
  .mj_sec05_art2_profit {
    top: auto;
    bottom: -20px;
    right: auto;
    left: 30px;
    transform: none;
  }
  .mj_sec05_art2_profit_store {
    font-size: var(--mj_font_size_16);
    padding-left: var(--mj_spacing_24);
  }
  .mj_sec05_art2_profit_note {
    font-size: var(--mj_font_size_14);
    padding-left: var(--mj_spacing_24);
  }
  /* 뱃지 - 도넛 오른쪽 위에 겹치게 배치 */
  .mj_sec05_art2_badge {
    top: 0;
    left: auto;
    right: 170px;
    transform: translate(50%, calc(-1 * var(--mj_motion_distance)));
    opacity: 0;
  }
  .mj_sec05_art2_chart_wrap.mj_art2_badge_done .mj_sec05_art2_badge {
    transform: translate(50%, 0);
    opacity: 1;
  }
  .mj_sec05_art1_desc,
  .mj_sec05_art2_desc {
    margin-top: var(--mj_spacing_22);
  }
}

@media (max-width: 768px) {
  .mj_sec05 {
    padding: var(--mj_spacing_16);
  }
  .mj_sec05_article1 {
    border-radius: var(--mj_radius_24) var(--mj_radius_24) 0 0;
  }
  .mj_sec05_art1_inner,
  .mj_sec05_art2_inner {
    padding: var(--mj_section_gap_6_768) var(--mj_container_padding_mobile);
  }
  .mj_sec05_art2_inner {
    padding-bottom: 140px;
  }
  .mj_sec05_art1_head,
  .mj_sec05_art2_head {
    margin-bottom: var(--mj_spacing_40);
  }
  .mj_sec05_art1_title_deco {
    height: 60px;
  }
  .mj_sec05_art1_card_label {
    top: calc(-1 * var(--mj_spacing_20));
    right: calc(-0.5 * var(--mj_spacing_42));
    width: 120px;
  }
  .mj_sec05_art1_hl_stamp {
    width: 132px;
  }
  .mj_sec05_art1_hl_store {
    font-size: var(--mj_font_size_20);
  }
  .mj_sec05_art1_hl_row {
    font-size: var(--mj_font_size_20);
  }
  .mj_sec05_art1_hl_num {
    font-size: var(--mj_font_size_40);
  }
  .mj_sec05_art1_hl_row_sub .mj_sec05_art1_hl_num_sub {
    font-size: var(--mj_font_size_24);
  }
  .mj_sec05_art1_hl_unit {
    font-size: var(--mj_font_size_20);
  }
  .mj_sec05_art1_card {
    width: 260px;
  }
  .mj_sec05_art1_cards {
    margin-top: var(--mj_spacing_24);
  }
  .mj_sec05_art1_cards_track {
    animation-duration: 40s;
  }
  .mj_sec05_art2_chart_wrap {
    --mj_sec05_art2_donut_width: 240px;
  }
  .mj_sec05_art2_profit {
    bottom: -60px;
    left: 60px;
  }
  .mj_sec05_art2_profit_store {
    font-size: 16px;
    padding-left: 24px;
  }
  .mj_sec05_art2_profit_note {
    font-size: 14px;
    padding-left: 24px;
  }
  .mj_sec05_art2_badge {
    width: 110px;
    top: -20px;
    right: 160px;
  }
  .mj_sec05_art2_profit_num {
    width: 220px;
  }
  .mj_sec05_art1_desc,
  .mj_sec05_art2_desc {
    margin-top: var(--mj_spacing_20);
  }
}

@media (max-width: 600px) {
  .mj_sec05_art2_inner {
    padding-bottom: 180px;
  }
  .mj_sec05_art2_profit {
    bottom: -120px;
    left: 20px;
  }
  .mj_sec05_art2_profit_store {
    font-size: 16px;
    padding-left: 24px;
  }
  .mj_sec05_art2_profit_note {
    font-size: 14px;
    padding-left: 24px;
  }
  .mj_sec05_art2_badge {
    width: 90px;
    top: -20px;
    right: 120px;
  }
  .mj_sec05_art2_profit_num {
    width: 220px;
  }
}

@media (max-width: 425px) {
  .mj_sec05 {
    padding: var(--mj_spacing_16);
  }
  .mj_sec05_article1 {
    border-radius: var(--mj_radius_20) var(--mj_radius_20) 0 0;
  }
  .mj_sec05_art1_inner,
  .mj_sec05_art2_inner {
    padding: var(--mj_section_gap_6_425) var(--mj_container_padding_mobile);
  }
  .mj_sec05_art2_inner {
    padding-bottom: 210px;
  }
  .mj_sec05_art2_profit {
    bottom: -110px;
  }
  .mj_sec05_art2_profit_store {
    font-size: 16px;
    padding-left: 24px;
  }
  .mj_sec05_art2_profit_note {
    font-size: 14px;
    padding-left: 24px;
  }
  .mj_sec05_art1_food {
    --mj_sec05_art1_food_width: 34%;
  }
  .mj_sec05_art2_food {
    --mj_sec05_art2_food_width: 30%;
  }
  .mj_sec05_art1_hl_block {
    gap: var(--mj_spacing_16);
  }
  .mj_sec05_art1_hl_stamp {
    width: 108px;
  }
  .mj_sec05_art1_hl_store {
    font-size: var(--mj_font_size_18);
  }
  .mj_sec05_art1_hl_row {
    font-size: var(--mj_font_size_18);
  }
  .mj_sec05_art1_hl_row_sub .mj_sec05_art1_hl_num_sub {
    font-size: var(--mj_font_size_20);
  }
  .mj_sec05_art1_hl_unit {
    font-size: var(--mj_font_size_18);
  }
  .mj_sec05_art1_hl_num {
    font-size: var(--mj_font_size_28);
  }
  .mj_sec05_art1_card {
    width: 220px;
  }
  .mj_sec05_art2_chart_wrap {
    --mj_sec05_art2_donut_width: 200px;
  }
  .mj_sec05_art2_badge {
    width: 80px;
    top: -20px;
    right: 80px;
  }
  .mj_sec05_art2_profit_num {
    width: 200px;
  }
  .mj_sec05_art1_desc,
  .mj_sec05_art2_desc {
    margin-top: var(--mj_spacing_16);
  }
}

@media (max-width: 360px) {
  .mj_sec05_art1_inner,
  .mj_sec05_art2_inner {
    padding: var(--mj_section_gap_6_360) var(--mj_container_padding_mobile);
  }
  .mj_sec05_art2_inner {
    padding-bottom: 230px;
  }
  .mj_sec05_art2_profit {
    bottom: -120px;
    left: 0px;
  }
  .mj_sec05_art2_profit_store {
    font-size: 16px;
    padding-left: 24px;
  }
  .mj_sec05_art2_profit_note {
    font-size: 14px;
    padding-left: 24px;
  }
  .mj_sec05_art2_badge {
    width: 80px;
    top: -20px;
    right: 70px;
  }
  .mj_sec05_art2_profit_num {
    width: 190px;
  }
  .mj_sec05_art1_card {
    width: 200px;
  }
  .mj_sec05_art2_chart_wrap {
    --mj_sec05_art2_donut_width: 180px;
  }
}

/* -------------------- 모션 축소 대응 -------------------- */
@media (prefers-reduced-motion: reduce) {
  .mj_sec05_art1_cards_track {
    animation: none;
  }
  .mj_sec05_art2_donut_motion,
  .mj_sec05_art2_badge,
  .mj_sec05_art2_profit_num_bg {
    transition: none !important;
  }
  .mj_sec05_art2_chart_wrap.mj_art2_badge_done .mj_sec05_art2_badge {
    animation: none !important;
  }
}

/* ==========================================================================
   SECTION 05 끝
   ========================================================================== */

/* ==========================================================================
   SECTION 06 시작 : CTA(창업문의)
   ========================================================================== */

.mj_sec06 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mj_sec06_cta_bg,
.mj_sec06_cta_smoke {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.mj_sec06_cta_bg {
  z-index: 0;
  background-image: url('../img/hyangtek/sec06_cta_bg_pc.jpg');
}

.mj_sec06_cta_smoke {
  z-index: 1;
  background-image: url('../img/hyangtek/sec06_cta_smoke_pc.png');
  background-size: 100% 140%;
  background-position: center 0%;
  animation: mj_sec06_smoke_rise 14s linear infinite;
}

/* 연기가 아래에서 위로만 피어오르도록 한 방향으로만 이동(왕복 없음).
   루프가 끊기는 지점(100%→0% 순간)은 시작/끝 모두 opacity 페이드로
   서서히 생겼다 서서히 사라지게 해서 감춘다. */
@keyframes mj_sec06_smoke_rise {
  0% {
    background-position: center 0%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    background-position: center 100%;
    opacity: 0;
  }
}

.mj_sec06_cta_inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mj_spacing_64);
  width: 100%;
  max-width: var(--mj_container_max);
  margin: 0 auto;
  padding: var(--mj_spacing_120) var(--mj_container_padding_pc) 140px;
}

/* -------------------- 텍스트 영역 -------------------- */
.mj_sec06_cta_text {
  align-self: flex-start;
  flex: 1 1 auto;
  max-width: 640px;
}

.mj_sec06_cta_text_top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mj_sec06_cta_badge {
  width: 40px;
  margin-bottom: 10px;
}

.mj_sec06_cta_title {
  margin: 0;
  font-family: var(--mj_font_point);
  font-weight: var(--mj_font_weight_point);
  color: var(--mj_color_white);
}
.mj_sec06_cta_title.mj_motion_group {
  opacity: 1;
  transform: none;
  transition: none;
}
.mj_sec06_cta_title .mj_char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.15s var(--mj_motion_ease),
    transform 0.15s var(--mj_motion_ease);
  transition-delay: calc(0.02s + var(--i) * 0.008s);
}
.mj_sec06_cta_title.mj_motion_active .mj_char {
  opacity: 1;
  transform: translateY(0);
}

.mj_sec06_cta_desc {
  margin: 24px 0 0;
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_regular);
  line-height: var(--mj_line_height_large);
  color: var(--mj_color_white);
}

.mj_cta_form_hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* -------------------- 폼 영역 -------------------- */
.mj_sec06_cta_form {
  position: relative;
  z-index: 2;
  flex: 0 0 560px;
  width: 560px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 60px 48px 40px;
  background-color: var(--mj_color_black_70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--mj_color_white_20);
  border-radius: var(--mj_radius_20);
}

.mj_sec06_cta_form_inputs {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mj_sec06_cta_form_row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--mj_spacing_16);
}

.mj_sec06_cta_form_row_top {
  align-items: flex-start;
}

.mj_sec06_cta_form_row label {
  flex: 0 0 110px;
  width: 110px;
  font-family: var(--mj_font_normal);
  font-weight: var(--mj_font_weight_bold);
  font-size: var(--mj_font_size_16);
  color: var(--mj_color_white);
}

.mj_sec06_cta_form_row_top label {
  padding-top: var(--mj_spacing_16);
}

.mj_sec06_cta_required {
  margin-left: 2px;
  color: var(--mj_color_red_point);
}

.mj_sec06_cta_input,
.mj_sec06_cta_select,
.mj_sec06_cta_textarea {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--mj_spacing_16);
  border: 1px solid var(--mj_color_white_30);
  border-radius: var(--mj_radius_6);
  background-color: transparent;
  font-family: var(--mj_font_normal);
  font-size: var(--mj_font_size_16);
  color: var(--mj_color_white);
}

.mj_sec06_cta_input,
.mj_sec06_cta_select {
  height: 52px;
}

.mj_sec06_cta_input::placeholder,
.mj_sec06_cta_textarea::placeholder {
  font-weight: var(--mj_font_weight_light);
  color: var(--mj_color_white_20);
}

.mj_sec06_cta_input:focus,
.mj_sec06_cta_select:focus,
.mj_sec06_cta_textarea:focus {
  outline: 2px solid var(--mj_color_green_accent);
  outline-offset: -2px;
}

.mj_sec06_cta_select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
}

.mj_sec06_cta_select:invalid {
  color: var(--mj_color_white_40);
}

/* 드롭다운 옵션 목록 배경 */
.mj_sec06_cta_select option {
  background-color: var(--mj_color_gray_dark);
  color: var(--mj_color_white);
}

.mj_sec06_cta_textarea {
  min-height: 120px;
  padding-top: var(--mj_spacing_16);
  padding-bottom: var(--mj_spacing_16);
  resize: none;
}

.mj_sec06_cta_agree {
  display: flex;
  align-items: center;
  gap: var(--mj_spacing_8);
}

.mj_sec06_cta_agree input[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.mj_sec06_cta_agree label {
  display: inline-flex;
  align-items: center;
  gap: var(--mj_spacing_8);
  font-family: var(--mj_font_normal);
  font-size: var(--mj_font_size_14);
  color: var(--mj_color_white_80);
  cursor: pointer;
}

.mj_sec06_cta_agree_box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid var(--mj_color_white_40);
  border-radius: var(--mj_radius_4);
  background-color: transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.mj_sec06_cta_agree
  input[type='checkbox']:checked
  + label
  .mj_sec06_cta_agree_box {
  background-color: var(--mj_color_green_base);
  border-color: var(--mj_color_green_base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5L8.5 14L15 6.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.mj_sec06_cta_agree
  input[type='checkbox']:focus-visible
  + label
  .mj_sec06_cta_agree_box {
  outline: 2px solid var(--mj_color_green_accent);
  outline-offset: 2px;
}

.mj_sec06_cta_submit {
  align-self: center;
  height: 52px;
  padding: 0 var(--mj_spacing_32);
  border: 0;
  border-radius: var(--mj_radius_6);
  background-color: var(--mj_color_green_base);
  color: var(--mj_color_white);
  font-family: var(--mj_font_normal);
  font-size: var(--mj_font_size_16);
  font-weight: var(--mj_font_weight_bold);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mj_sec06_cta_submit:hover {
  background-color: var(--mj_color_green_accent);
}

.mj_sec06_cta_submit:disabled {
  background-color: var(--mj_color_black_30);
  cursor: not-allowed;
}

/* -------------------- 반응형 -------------------- */

/* 1280px 이하 : 좌우 구조 유지, 폼 카드 폭만 축소 */
@media (max-width: 1280px) {
  .mj_sec06_cta_inner {
    gap: var(--mj_spacing_40);
  }

  .mj_sec06_cta_form {
    flex: 0 0 480px;
    width: 480px;
  }
}

/* 1028px 이하 : 상하 배열로 전환, 배경/연기 이미지 모바일용으로 교체 */
@media (max-width: 1028px) {
  .mj_sec06_cta_bg {
    background-image: url('../img/hyangtek/sec06_cta_bg_mo.jpg');
  }

  .mj_sec06_cta_smoke {
    background-image: url('../img/hyangtek/sec06_cta_smoke_mo.png');
  }

  .mj_sec06_cta_inner {
    flex-direction: column;
    align-items: stretch;
    padding-top: var(--mj_section_gap_6_1028);
    padding-bottom: var(--mj_section_gap_6_1028);
    gap: var(--mj_spacing_48);
  }

  .mj_sec06_cta_text {
    max-width: none;
  }

  .mj_sec06_cta_form {
    flex: 0 0 auto;
    width: 100%;
  }

  .mj_sec06_cta_desc {
    margin-top: var(--mj_spacing_22);
  }
}

/* 768px 이하 */
@media (max-width: 768px) {
  .mj_sec06_cta_inner {
    padding-top: var(--mj_section_gap_6_768);
    padding-bottom: var(--mj_section_gap_6_768);
    padding-left: var(--mj_container_padding_mobile);
    padding-right: var(--mj_container_padding_mobile);
    gap: var(--mj_spacing_32);
  }

  .mj_sec06_cta_form {
    padding: var(--mj_spacing_24);
    gap: var(--mj_spacing_24);
  }

  .mj_sec06_cta_desc {
    margin-top: var(--mj_spacing_20);
  }
}

/* 425px 이하 */
@media (max-width: 425px) {
  .mj_sec06_cta_inner {
    padding-top: var(--mj_section_gap_6_425);
    padding-bottom: var(--mj_section_gap_6_425);
  }

  .mj_sec06_cta_desc {
    margin-top: var(--mj_spacing_16);
  }

  .mj_sec06_cta_form_row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mj_spacing_8);
  }

  .mj_sec06_cta_form_row label {
    flex: 0 0 auto;
    width: auto;
  }

  .mj_sec06_cta_form_row_top label {
    padding-top: 0;
  }
}

/* 360px 이하 */
@media (max-width: 360px) {
  .mj_sec06_cta_inner {
    padding-top: var(--mj_section_gap_6_360);
    padding-bottom: var(--mj_section_gap_6_360);
  }
}

/* ==========================================================================
   SECTION 06 끝
   ========================================================================== */