/* ========================================
   mj_onepack.css
   랜딩4 - 원팩시스템 전용 CSS
   ======================================== */

/* ========================================
   Hero
   ======================================== */

.mj_onepack_hero {
  position: relative;
  width: 100%;
  height: 900px;
  overflow: hidden;
}

/* z1: 배경 */
.mj_ophero_bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.mj_ophero_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* z2: 왼쪽 - 주방장 */
.mj_ophero_left {
  position: absolute;
  left: 50px;
  bottom: -5%;
  z-index: 2;
  animation: mj_op_enter_left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
    0.6s;
}
.mj_ophero_chef {
  width: 520px;
}
.mj_ophero_chef img {
  width: 100%;
  height: auto;
  display: block;
}

/* z2: 오른쪽 - 원팩 제품 */
.mj_ophero_right {
  position: absolute;
  right: -30px;
  bottom: 0;
  z-index: 2;
  animation: mj_op_enter_right 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
    0.9s;
}
.mj_ophero_onepack {
  width: 630px;
}
.mj_ophero_onepack img {
  width: 100%;
  height: auto;
  display: block;
}

/* z3: 왼쪽 텍스트 — 왼쪽 1/3 영역 세로 가운데 */
.mj_ophero_left_txt {
  position: absolute;
  left: calc(100% / 7); /* 1:1.5:1 → 왼쪽 2/7 구역 중심 = 1/7 */
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-size: 44px;
  font-weight: 300;
  color: #fff;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  animation: mj_op_enter_left_mid 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
    0.6s;
}
.mj_ophero_left_txt strong {
  font-weight: 800;
}

/* z3: 오른쪽 텍스트 — 오른쪽 1/3 영역 세로 가운데 */
.mj_ophero_right_txt {
  position: absolute;
  left: calc(100% * 6 / 7); /* 1:1.5:1 → 오른쪽 2/7 구역 중심 = 6/7 */
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-size: 44px;
  font-weight: 300;
  color: #fff;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  animation: mj_op_enter_right_mid 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both 0.9s;
}
.mj_ophero_right_txt em {
  font-style: normal;
  font-weight: 800;
  /* 빨간색 없음 — 흰색 그대로 */
}

/* z4: 타이틀 배경 + 좌우 세로 구분선 — 정확히 1/3 너비로 분할선 역할 */
.mj_ophero_title_bg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: calc(100% * 3 / 7); /* 1:1.5:1 비율 → 가운데 3/7 */
  height: 100%;
  z-index: 4;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.5) 60%,
    rgba(0, 0, 0, 0.2) 100%
  );
}
.mj_ophero_title_bg::before,
.mj_ophero_title_bg::after {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--mj_red, #e00);
  opacity: 0.7;
}
.mj_ophero_title_bg::before {
  left: 0;
}
.mj_ophero_title_bg::after {
  right: 0;
}

/* z5: 가운데 타이틀 영역 — 세로 가운데 */
.mj_ophero_center {
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translate(-50%, -50%);
  z-index: 5;
  text-align: center;
  width: 760px;
  animation: mj_op_enter_up_mid 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
    0s;
}

/* 뱃지 */
.mj_ophero_badge {
  display: inline-block;
  padding: 6px 22px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  margin-bottom: 24px;
}

/* 타이틀 슬롯머신 래퍼 */
.mj_ophero_titles_wrap {
  height: 160px; /* active 108px + 다음 타이틀 힌트 52px */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

/* 슬롯 트랙 — JS 가 translateY 로 이동 */
.mj_ophero_titles_track {
  display: flex;
  flex-direction: column;
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 각 타이틀 슬롯 */
.mj_ophero_title {
  height: 108px; /* 슬롯 고정 높이 (JS 와 맞춤) */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 84px;
  font-weight: 200;
  line-height: 1;
  color: #fff;
  font-family: var(--mj_font_point, sans-serif);
  white-space: nowrap;
  transform: scale(0.62);
  transform-origin: center top;
  opacity: 0.45;
  transition:
    transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.75s ease;
}
.mj_ophero_title.mj_op_active {
  transform: scale(1);
  opacity: 1;
}
.mj_ophero_title em {
  color: var(--mj_red, #e00);
  font-style: normal;
}

/* z6: 음식 이미지 수평 슬라이드 — 3개가 히어로 가로를 꽉 채움 */
.mj_ophero_foods {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -330px; /* 컨테이너 중심이 히어로 하단에 맞춰짐 → 이미지 절반 노출 */
  z-index: 6;
  height: 560px;
  overflow: visible; /* scale로 키운 이미지가 컨테이너에 잘리지 않게, 히어로가 최종 클리핑 */
  animation: mj_op_enter_up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.3s;
}
/* 트랙: 5슬롯 × (1/3 hero) = 5/3 hero 너비 */
.mj_ophero_foods_track {
  display: flex;
  flex-direction: row;
  width: calc(100% * 5 / 3);
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 각 슬롯: 트랙의 1/5 = hero의 1/3 */
.mj_ophero_food {
  width: 20%;
  height: 560px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transform: scale(1.6); /* 사이드: 겹치도록 확대, 여백 최소화 */
  transform-origin: center center;
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 가운데 활성 이미지: 1920px 기준 1300px → scale ≈ 2.03 + 최상위 */
.mj_ophero_food.mj_op_center {
  transform: scale(2.03);
  z-index: 10;
}
.mj_ophero_food img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* z7: 말풍선 — entrance는 figure에, float은 img에 분리 적용 */
.mj_ophero_msg {
  position: absolute;
  z-index: 7;
}
.mj_ophero_msg img {
  height: 88px;
  width: auto;
  display: block;
  animation: mj_op_float 2.6s ease-in-out infinite;
}
.mj_ophero_msg_l {
  left: 480px;
  bottom: 320px;
  animation: mj_op_enter_left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
    1.2s;
}
.mj_ophero_msg_l img {
  animation-delay: 2s; /* entrance 끝난 후 float 시작 */
}
.mj_ophero_msg_r {
  right: 400px;
  bottom: 350px;
  animation: mj_op_enter_right 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
    1.4s;
}
.mj_ophero_msg_r img {
  animation-delay: 2.2s;
}

/* 루프 리셋 시 모든 자식 transition 즉시 차단 */
.mj_op_jumping * {
  transition: none !important;
}

/* 모바일 전용 캐릭터 — PC에서 숨김 */
.mj_ophero_mo_chars {
  display: none;
}

/* ── 등장 애니메이션 keyframes ── */

/* 일반 요소용 (transform 없는 요소) */
/* 모바일 히어로 원팩 캐릭터 — 아래서 위로 등장 */
@keyframes mj_ophero_mo_rise {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mj_op_enter_up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes mj_op_enter_left {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes mj_op_enter_right {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* translate(-50%,-50%) 포지셔닝 요소용 (기본 transform 유지) */
@keyframes mj_op_enter_up_mid {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 40px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
@keyframes mj_op_enter_left_mid {
  from {
    opacity: 0;
    transform: translate(calc(-50% - 60px), -50%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes mj_op_enter_right_mid {
  from {
    opacity: 0;
    transform: translate(calc(-50% + 60px), -50%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes mj_op_float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

/* ========================================
   섹션 1
   ======================================== */

.mj_onepack_sec1 {
  position: relative;
  width: 100%;
  height: 1100px;
  overflow: hidden;
}

/* z1: 배경 */
.mj_opsec1_bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.mj_opsec1_bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.mj_opsec1_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* z3: 타이틀 영역 */
.mj_opsec1_title_area {
  position: absolute;
  left: 50%;
  top: 120px;
  transform: translateX(-50%);
  z-index: 4;
  text-align: center;
  white-space: nowrap;
}

/* 서브텍스트 */
.mj_opsec1_sub {
  font-size: 38px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 10px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 1);
}
.mj_opsec1_sub strong {
  font-weight: 700;
  color: #fff;
}

/* 강조 em_wrap — 텍스트에 직접 클래스, ::after로 강조선 (z2) */
.mj_opsec1_em_wrap {
  position: relative;
  display: inline-block;
  isolation: isolate; /* ::after z:-1이 텍스트 뒤에만 위치하도록 */
}
.mj_opsec1_em_wrap::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0px;
  right: -8px;
  height: 26px;
  z-index: -1;
  background-image: var(--line-img, none);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 강조선 트리거 — 부모 p가 mj_active 될 때 → 지연 후 전개 */
.mj_opsec1_sub.mj_active .mj_opsec1_em_wrap::after {
  clip-path: inset(0 0% 0 0);
  transition-delay: 0.5s;
}
.mj_opsec1_btm_p2.mj_active .mj_opsec1_em_wrap::after {
  clip-path: inset(0 0% 0 0);
  transition-delay: 0.4s;
}

/* 메인 타이틀 */
.mj_opsec1_title {
  font-size: 72px;
  font-weight: 200;
  font-family: var(--mj_font_point);
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
  opacity: 0; /* JS가 mj_active 추가 전 숨김 */
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.mj_opsec1_title strong {
  color: var(--mj_color_yellow);
}

/* 타이핑 효과 — char 단위 순차 등장 */
.mj_opsec1_title .mj_char {
  transform: none; /* common .mj_char의 translateY 오버라이드 */
}
[data-mj-opsec1-title].mj_active {
  opacity: 1; /* 부모 h2 투명 해제 */
}
[data-mj-opsec1-title].mj_active .mj_char {
  animation: mj_opsec1_char_appear 0.001s linear forwards;
  animation-delay: calc(var(--mj_ci) * 0.055s + 0.15s);
}
@keyframes mj_opsec1_char_appear {
  to {
    opacity: 1;
  }
}

/* z4: 음식 이미지 */
.mj_opsec1_food {
  position: absolute;
  left: -160px;
  top: -160px;
  width: 670px;
  z-index: 3;
}
.mj_opsec1_food img {
  width: 100%;
  height: auto;
  display: block;
}
.mj_opsec1_food.mj_active img {
  animation: mj_opsec1_food_rotate 10s linear infinite;
  transform-origin: center center;
}

/* z5/z6: 카드 공통 */
.mj_opsec1_card {
  position: absolute;
  top: 340px;
  width: 600px;
}
.mj_opsec1_card img {
  width: 100%;
  height: auto;
  display: block;
}

/* 일반업체 카드 (z5) */
.mj_opsec1_card_normal {
  right: calc(50% + 60px);
  z-index: 5;
}

/* 포차천국 카드 (z6) */
.mj_opsec1_card_pocha {
  left: calc(50% + 60px);
  z-index: 6;
}

/* z7: 강조뱃지 */
.mj_opsec1_badge {
  position: absolute;
  left: 50%;
  top: 580px;
  transform: translate(-50%, -50%);
  z-index: 7;
  width: 380px;
}
.mj_opsec1_badge img {
  width: 100%;
  height: auto;
  display: block;
}
/* mj_reveal의 transition 취소 + 팝 → wobble 체인
   ※ transition: none이 transition-delay까지 무효화하므로
      animation-delay로 1.6s를 직접 지정 */
.mj_opsec1_badge.mj_active {
  transition: none !important;
  animation:
    mj_opsec1_badge_pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both,
    mj_opsec1_badge_wobble 2.2s ease-in-out 1.9s infinite;
}
@keyframes mj_opsec1_badge_pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.22) rotate(-5deg);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.97) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(-2.5deg);
  }
}
@keyframes mj_opsec1_badge_wobble {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(-2.5deg);
  }
  25% {
    transform: translate(-50%, calc(-50% - 14px)) scale(1.05) rotate(-2.5deg);
  }
  50% {
    transform: translate(-50%, calc(-50% + 5px)) scale(0.97) rotate(-2.5deg);
  }
  75% {
    transform: translate(-50%, calc(-50% - 6px)) scale(1.02) rotate(-2.5deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(-2.5deg);
  }
}
@keyframes mj_opsec1_food_rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* z9: 하단 텍스트 */
.mj_opsec1_btm_text {
  position: absolute;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  z-index: 9;
  text-align: center;
  white-space: nowrap;
}
.mj_opsec1_btm_text p {
  font-size: 52px;
  font-weight: 200;
  font-family: var(--mj_font_point);
  color: #fff;
  line-height: 1.4;
}
.mj_opsec1_btm_text em {
  font-style: normal;
  color: #fff;
}

/* 섹션1 전용 딜레이 */
.mj_opsec1_d3 {
  transition-delay: 0.4s;
} /* 음식 */
.mj_opsec1_d4 {
  transition-delay: 0.8s;
} /* 일반 카드 */
.mj_opsec1_d5 {
  transition-delay: 1.2s;
} /* 포차 카드 */
.mj_opsec1_d6 {
  transition-delay: 1.4s;
} /* 뱃지 */
.mj_opsec1_d7 {
  transition-delay: 0.2s;
} /* 하단 p1 — 뷰포트 진입 후 바로 등장 */
.mj_opsec1_d8 {
  transition-delay: 0.4s;
} /* 하단 p2 + 강조선2 연쇄 */

/* ========================================
   Responsive - 1480px
   ======================================== */
@media (max-width: 1480px) {
  /* ── Sec1 ── */
  .mj_onepack_sec1 {
    height: 1000px;
  }

  .mj_opsec1_sub {
    font-size: 34px;
  }
  .mj_opsec1_title {
    font-size: 62px;
  }
  .mj_opsec1_em_wrap::after {
    height: 22px;
  }

  .mj_opsec1_food {
    width: 560px;
    left: -130px;
    top: -130px;
  }

  .mj_opsec1_card {
    width: 520px;
    top: 300px;
  }
  .mj_opsec1_card_normal {
    right: calc(50% + 50px);
  }
  .mj_opsec1_card_pocha {
    left: calc(50% + 50px);
  }

  .mj_opsec1_badge {
    width: 340px;
    top: 520px;
  }

  .mj_opsec1_btm_text {
    bottom: 100px;
  }
  .mj_opsec1_btm_text p {
    font-size: 46px;
  }

  /* Hero */
  .mj_onepack_hero {
    height: 800px;
  }
  .mj_ophero_chef {
    width: 400px;
  }
  .mj_ophero_onepack {
    width: 460px;
  }
  .mj_ophero_left_txt,
  .mj_ophero_right_txt {
    font-size: 36px;
  }
  .mj_ophero_center {
    width: 640px;
  }
  .mj_ophero_titles_wrap {
    height: 130px;
  }
  .mj_ophero_title {
    font-size: 68px;
    height: 88px;
  }
  .mj_ophero_msg_l {
    left: 360px;
    bottom: 270px;
  }
  .mj_ophero_msg_r {
    right: 310px;
    bottom: 300px;
  }
  .mj_ophero_foods {
    bottom: -280px;
    height: 500px;
  }
  .mj_ophero_food {
    height: 500px;
  }
}

/* ========================================
   Responsive - 1280px
   ======================================== */
@media (max-width: 1280px) {
  /* ── Sec1 ── */
  .mj_onepack_sec1 {
    height: 960px;
  }

  .mj_opsec1_sub {
    font-size: 28px;
  }
  .mj_opsec1_title {
    font-size: 54px;
  }
  .mj_opsec1_em_wrap::after {
    height: 20px;
  }

  .mj_opsec1_food {
    width: 470px;
    left: -110px;
    top: -110px;
  }

  .mj_opsec1_card {
    width: 440px;
    top: 300px;
  }
  .mj_opsec1_card_normal {
    right: calc(50% + 40px);
  }
  .mj_opsec1_card_pocha {
    left: calc(50% + 40px);
  }

  .mj_opsec1_badge {
    width: 300px;
    top: 470px;
  }

  .mj_opsec1_btm_text {
    bottom: 130px;
  }
  .mj_opsec1_btm_text p {
    font-size: 40px;
  }

  /* Hero */
  .mj_onepack_hero {
    height: 760px;
  }
  .mj_ophero_chef {
    width: 340px;
  }
  .mj_ophero_onepack {
    width: 400px;
  }
  .mj_ophero_left_txt,
  .mj_ophero_right_txt {
    font-size: 30px;
  }
  .mj_ophero_center {
    width: 560px;
  }
  .mj_ophero_titles_wrap {
    height: 110px;
  }
  .mj_ophero_title {
    font-size: 56px;
    height: 74px;
  }
  .mj_ophero_msg_l {
    left: 300px;
    bottom: 220px;
  }
  .mj_ophero_msg_r {
    right: 260px;
    bottom: 250px;
  }
  .mj_ophero_foods {
    bottom: -240px;
    height: 440px;
  }
  .mj_ophero_food {
    height: 440px;
  }
}

/* ========================================
   Responsive - 1024px
   ======================================== */
@media (max-width: 1024px) {
  /* ── Sec1 ── */
  .mj_onepack_sec1 {
    height: 900px;
  }

  .mj_opsec1_title_area {
    top: 110px;
  }
  .mj_opsec1_sub {
    font-size: 24px;
  }
  .mj_opsec1_title {
    font-size: 46px;
  }
  .mj_opsec1_em_wrap::after {
    height: 18px;
  }

  .mj_opsec1_food {
    width: 390px;
    left: -90px;
    top: -90px;
  }

  .mj_opsec1_card {
    width: 380px;
    top: 300px;
  }
  .mj_opsec1_card_normal {
    right: calc(50% + 30px);
  }
  .mj_opsec1_card_pocha {
    left: calc(50% + 30px);
  }

  .mj_opsec1_badge {
    width: 260px;
    top: 440px;
  }

  .mj_opsec1_btm_text {
    bottom: 100px;
  }
  .mj_opsec1_btm_text p {
    font-size: 34px;
  }

  /* Hero */
  .mj_onepack_hero {
    height: 660px;
  }
  .mj_ophero_chef {
    width: 280px;
  }
  .mj_ophero_onepack {
    width: 340px;
  }
  .mj_ophero_left_txt,
  .mj_ophero_right_txt {
    font-size: 24px;
  }
  .mj_ophero_center {
    width: 460px;
  }
  .mj_ophero_titles_wrap {
    height: 100px;
  }
  .mj_ophero_title {
    font-size: 48px;
    height: 66px;
  }
  .mj_ophero_msg_l {
    left: 230px;
    bottom: 180px;
  }
  .mj_ophero_msg_r {
    right: 200px;
    bottom: 200px;
  }
  .mj_ophero_foods {
    bottom: -200px;
    height: 380px;
  }
  .mj_ophero_food {
    height: 380px;
  }
}

/* ========================================
   Responsive - 768px (모바일)
   ======================================== */
@media (max-width: 768px) {
  /* ── Hero (모바일) ── */
  .mj_onepack_hero {
    height: 100vh;
  }
  /* title_bg 딤/구분선 제거 */
  .mj_ophero_title_bg {
    width: 100%;
    left: 0;
    transform: none;
    background: none;
  }
  .mj_ophero_title_bg::before,
  .mj_ophero_title_bg::after {
    display: none;
  }
  /* PC 전용 요소 숨김 */
  .mj_ophero_left,
  .mj_ophero_right,
  .mj_ophero_left_txt,
  .mj_ophero_right_txt {
    display: none;
  }
  /* 중앙 타이틀 */
  .mj_ophero_center {
    width: 90%;
    top: 22%;
  }
  .mj_ophero_badge {
    font-size: 13px;
    padding: 5px 16px;
    margin-bottom: 14px;
  }
  .mj_ophero_titles_wrap {
    height: 110px;
  }
  .mj_ophero_title {
    font-size: 48px;
    height: 72px;
  }
  /* 말풍선 */
  .mj_ophero_msg_l {
    left: 4%;
    bottom: 18%;
  }
  .mj_ophero_msg_r {
    right: 4%;
    bottom: 22%;
  }
  .mj_ophero_msg img {
    height: 60px;
  }
  /* foods */
  .mj_ophero_foods {
    bottom: -130px;
    height: 440px;
  }
  .mj_ophero_food {
    height: 440px;
  }
  .mj_ophero_food.mj_op_center {
    transform: scale(2.6);
  }
  /* ── 모바일 전용 캐릭터 ── */
  .mj_ophero_mo_chars {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2%;
    height: 65%;
    z-index: 3;
    pointer-events: none;
  }
  /* 모바일 — 원팩 이미지만 표시 */
  .mj_ophero_mo_chef {
    display: none;
  }
  .mj_ophero_mo_onepack {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 4;
    padding: 60px 24px 0;
    animation: mj_ophero_mo_rise 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
      0.4s;
  }
  .mj_ophero_mo_onepack img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ── Sec1 ── */
  .mj_onepack_sec1 {
    height: 1060px;
  }

  /* 타이틀 영역 — 모바일 줄바꿈 허용 */
  .mj_opsec1_title_area {
    top: 100px;
    white-space: normal;
    width: calc(100% - 60px);
    text-align: center;
  }
  .mj_opsec1_sub {
    font-size: 18px;
  }
  .mj_opsec1_title {
    font-size: 32px;
  }
  .mj_opsec1_em_wrap::after {
    height: 14px;
  }

  /* 음식 이미지 — 좌상단 데코로 축소 */
  .mj_opsec1_food {
    width: 280px;
    left: -70px;
    top: -70px;
  }

  /* 카드 세로 배열 — left/right 동시 0 + margin auto = 수평 중앙 */
  .mj_opsec1_card {
    width: 82%;
    max-width: 360px;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto;
  }
  .mj_opsec1_card_normal {
    top: 200px;
  }
  .mj_opsec1_card_pocha {
    top: 490px;
  }

  /* 뱃지 — 두 카드 사이 */
  .mj_opsec1_badge {
    width: 200px;
    top: 770px;
  }

  /* 하단 텍스트 — 줄바꿈 허용 */
  .mj_opsec1_btm_text {
    bottom: 100px;
    white-space: normal;
    width: calc(100% - 60px);
  }
  .mj_opsec1_btm_text p {
    font-size: 26px;
  }
}

/* ========================================
   Responsive - 425px
   ======================================== */
@media (max-width: 425px) {
  /* ── Sec1 ── */
  .mj_onepack_sec1 {
    height: 1040px;
  }

  .mj_opsec1_sub {
    font-size: 17px;
  }
  .mj_opsec1_title {
    font-size: 28px;
  }
  .mj_opsec1_em_wrap::after {
    height: 13px;
  }

  .mj_opsec1_food {
    width: 200px;
    left: -80px;
    top: -80px;
  }

  .mj_opsec1_card {
    width: 86%;
    max-width: 340px;
  }
  .mj_opsec1_card_normal {
    top: 190px;
  }
  .mj_opsec1_card_pocha {
    top: 470px;
  }

  .mj_opsec1_badge {
    width: 180px;
    top: 780px;
  }

  .mj_opsec1_btm_text {
    bottom: 90px;
  }
  .mj_opsec1_btm_text p {
    font-size: 23px;
  }

  /* Hero */
  .mj_onepack_hero {
    height: 100vh;
  }
  .mj_ophero_center {
    width: 98%;
    top: 24%;
  }
  .mj_ophero_titles_wrap {
    height: 100px;
  }
  .mj_ophero_title {
    font-size: 44px;
    height: 66px;
  }
  .mj_ophero_foods {
    bottom: -130px;
    height: 380px;
  }
  .mj_ophero_food {
    height: 380px;
  }
  /* ── 425px Hero 모바일 캐릭터 (겹침 구조 — width/position 오버라이드 불필요) ── */
  .mj_ophero_msg_l {
    left: 4%;
    bottom: 16%;
  }
  .mj_ophero_msg_r {
    right: 4%;
    bottom: 20%;
  }
  .mj_ophero_msg img {
    height: 54px;
  }
}

/* ========================================
   Responsive - 360px
   ======================================== */
@media (max-width: 360px) {
  /* ── Sec1 ── */
  .mj_onepack_sec1 {
    height: 1020px;
  }

  .mj_opsec1_title_area {
    width: calc(100% - 40px);
    top: 44px;
  }
  .mj_opsec1_sub {
    font-size: 16px;
  }
  .mj_opsec1_title {
    font-size: 25px;
  }
  .mj_opsec1_em_wrap::after {
    height: 12px;
  }

  .mj_opsec1_food {
    width: 210px;
    left: -50px;
    top: -50px;
  }

  .mj_opsec1_card {
    width: 88%;
    max-width: 300px;
  }
  .mj_opsec1_card_normal {
    top: 180px;
  }
  .mj_opsec1_card_pocha {
    top: 450px;
  }

  .mj_opsec1_badge {
    width: 160px;
    top: 710px;
  }

  .mj_opsec1_btm_text {
    bottom: 80px;
  }
  .mj_opsec1_btm_text p {
    font-size: 20px;
  }

  /* Hero */
  .mj_onepack_hero {
    height: 100vh;
  }
  .mj_ophero_center {
    top: 30%;
  }
  .mj_ophero_titles_wrap {
    height: 90px;
  }
  .mj_ophero_title {
    font-size: 38px;
    height: 60px;
  }
  .mj_ophero_foods {
    bottom: -170px;
    height: 320px;
  }
  .mj_ophero_food {
    height: 320px;
  }
  /* ── 360px Hero 모바일 캐릭터 (겹침 구조 — width/position 오버라이드 불필요) ── */
  .mj_ophero_msg_l {
    left: 4%;
    bottom: 14%;
  }
  .mj_ophero_msg_r {
    right: 4%;
    bottom: 18%;
  }
  .mj_ophero_msg img {
    height: 48px;
  }
}