@charset "UTF-8";

/* ══════════════════════════════════════════════════════════════════════
   mobile_style.css — 모바일 전용 스타일 (599px 이하) 단일 블록

   로드: theme/design/template/main/index.html — style.css **뒤**
   작업 규칙: md/모바일/mobile_process.md · 모바일_재구성.md · 줄바꿈_가이드.md
     - 이 파일의 @media 블록 안에서만 작업한다. PC(=바깥 파일) 절대 수정 금지.
     - 섹션 순서(main → con16)대로 append 한다. 미디어쿼리를 쪼개지 않는다.
     - 폰트 하한 3.3vw · line-height 하한 메인 1.2 / 서브 1.4
     - 정보성 요소는 숨기지 않는다(재조판). display:none 은 장식 한정.

   ── 전역 타이포 스케일 (섹션마다 제각각 잡지 말 것) ──
     섹션 타이틀     7.5vw  / line-height 1.3
     섹션 서브타이틀 4.6vw
     섹션 서브텍스트 3.5vw  / line-height 1.5
     라벨·캡션       3.3vw  (하한)
   ══════════════════════════════════════════════════════════════════════ */

@media screen and (max-width:599px) {

  /* ═══════════════════════ 공통 — 표시 토글 / 기본값 ═══════════════════════ */
  .pc {
    display: none !important;
  }

  .pc-inline {
    display: none !important;
  }

  .mobile {
    display: flex !important;
  }

  .mobile-inline {
    display: inline !important;
  }

  .mo_br {
    display: inline;
  }

  .pc_br {
    display: none;
  }

  section img {
    width: 100%;
  }

  /* 한글은 어절 단위로 접는다 (줄바꿈 가이드 §기본원칙 4) */
  section p,
  section h1,
  section h2,
  section h3,
  section li,
  section td {
    word-break: keep-all;
  }

  /* 마지막 줄에 한두 어절만 남는 것을 브라우저가 고르게 나눠 준다
     (줄바꿈_가이드 §기본원칙 5 — 미지원 브라우저는 normal 로 폴백) */
  section p,
  section h2,
  section h3,
  section li,
  section td {
    text-wrap: balance;
  }

  /* ═══════════════════════ MAIN — 메인비주얼 ═══════════════════════ */
  .main {
    /* 헤더가 fixed(15vw) — PC 의 88px 보정값으로는 헤더 밑에 깔린다 */
    margin-top: 15vw;
    padding-bottom: 0;
    /* 첫 화면을 메인비주얼이 채우도록 — 헤더(15vw) 를 뺀 남은 화면 전부.
       하단 고정 UI(퀵바 20.3vw + 그 위 side_quick 도크 = 화면 밑에서 34vw)에
       트럭이 가리지 않게 그만큼 뺀다. 15vw 는 fixed 헤더.
       svh 미지원 브라우저는 위 vh 로 폴백 */
    min-height: calc(100vh - 49vw);
    min-height: calc(100svh - 49vw);
    /* 줄무늬 주기: PC 값(15/1905)을 그대로 두면 모바일에서 3px 라 모아레가 생긴다 */
    background-image: repeating-linear-gradient(90deg, #1a4999 0, #1a4999 1px, #063486 1px, #063486 2.6vw);
    background-position: 0 0;
  }

  .main_video {
    box-sizing: border-box;
    width: 94vw;
    height: auto;
    /* PC 가로카드(1820/812) 비율 해제 — 높이는 카피가 만든다 */
    aspect-ratio: auto;
    /* .main 이 첫 화면만큼 늘어난 몫을 카드가 흡수 (트럭 돌출분은 흐름에 남는다) */
    flex-grow: 1;
    /* 카드가 커진 만큼 카피는 세로 가운데 — 하단 패딩이 커서 트럭 위에 자리잡는다 */
    justify-content: center;
    padding: 14vw 5vw 25vw;
    border-width: 1.2vw;
    border-radius: 0 0 7vw 7vw;
  }

  .main_video_bg {
    object-position: center 30%;
  }

  .main_eyebrow {
    font-size: 3.6vw;
    /* PC 는 1.6vw(=한 줄 고정) — 모바일에서 그대로 두면 줄이 겹친다 */
    line-height: 1.5;
    letter-spacing: -0.1vw;
    text-align: center;
  }

  .main_title {
    margin-top: 2vw;
    font-size: 10.4vw;
    line-height: 1.2;
    letter-spacing: -0.4vw;
    text-align: center;
  }

  .main_sub {
    margin-top: 3.6vw;
    font-size: 3.5vw;
    line-height: 1.6;
    letter-spacing: -0.06vw;
  }

  .main_awning {
    top: 0;
    width: 214vw;
  }

  /* 원본 PNG(1981) ÷ 영상카드 폭(1820) = 108.8% — PC 와 같은 스캘럽 크기 비율 */
  .main_awning img {
    width: 108.8%;
  }

  .main_truck {
    /* 영상카드 하단을 가로질러 걸치게 (PC -20.4vw 와 같은 연출) */
    margin-top: -22vw;
    width: 62vw;
  }

  /* ═══════════════════════ CON01 — 숫자로 증명하는 경쟁력 ═══════════════════════ */
  /* PC 좌우 2단(파란 패널 + 매출 슬라이드) → 세로 스택 */
  .con01 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 12vw;
    padding-bottom: 12vw;
  }

  .con01_left {
    box-sizing: border-box;
    margin-left: 0;
    width: 92vw;
    height: auto;
    padding: 9vw 5vw 8vw;
    border-radius: 6vw;
  }

  .con01_title {
    font-size: 7.5vw;
    line-height: 1.3;
    letter-spacing: -0.2vw;
  }

  .con01_sub {
    margin-top: 3.2vw;
    font-size: 3.5vw;
    line-height: 1.55;
    letter-spacing: -0.06vw;
  }

  .con01_best {
    box-sizing: border-box;
    margin-top: 6vw;
    width: 100%;
    height: auto;
    padding: 5vw 2vw 5.4vw;
    border-width: 1vw;
    border-radius: 4.6vw;
  }

  .con01_best_label {
    font-size: 3.8vw;
    line-height: 1.4;
    letter-spacing: -0.08vw;
  }

  .con01_best_num {
    margin-top: 2.4vw;
    font-size: 8.6vw;
    line-height: 1.2;
  }

  .con01_num_lg {
    letter-spacing: -0.3vw;
  }

  .con01_num_sm {
    margin-left: 0.6vw;
    font-size: 4.4vw;
    letter-spacing: -0.1vw;
  }

  .con01_best_note {
    margin-top: 1.8vw;
    font-size: 3.3vw;
    line-height: 1.4;
  }

  /* 2행 그리드 스와이퍼 — 카드 폭만 키워 1.4장이 보이게 (간격은 js/slide.js breakpoints) */
  .con01_slide {
    /* PC margin-left:2% 해제 — 모바일은 화면 끝까지 꽉 채운다 */
    margin-left: 0;
    margin-right: 0;
    margin-top: 7vw;
    width: 100%;
    /* 1행(js/slide.js breakpoints 0: grid.rows 1) — 카드 1장 높이.
       카피 하단 30.9vw + 상하 패딩 5vw 씩 */
    height: 36vw;
  }

  .con01_slide_item {
    width: 62vw;
  }

  .con01_card {
    width: 100%;
    height: 100%;
    padding-top: 5vw;
    border-radius: 4vw;
  }

  .con01_card_name {
    font-size: 4.2vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }

  .con01_card_tag {
    margin-top: 2.4vw;
    box-sizing: border-box;
    width: auto;
    height: 7.6vw;
    padding: 0 4vw;
    font-size: 3.3vw;
  }

  .con01_card_num {
    margin-top: 3.2vw;
    font-size: 5.6vw;
    line-height: 1.3;
    letter-spacing: -0.15vw;
  }

  /* 모바일 전용 슬라이드 네비 — 카드가 1행이라 드래그 외에 넘길 수단이 없었다.
     PC 는 .mobile 이 display:none (css/common.css) — 마크업만 늘고 렌더는 그대로 */
  .con01_navs {
    justify-content: center;
    margin-top: 6vw;
  }

  /* ═══════════════════════ CON02 — 투명하게 공개하는 수익 구조 ═══════════════════════ */
  /* PC 3단(원형 지표 + 링 + 표) → 원형 2개 한 줄 + 표 한 줄 */
  .con02_inner {
    padding-top: 13vw;
    padding-bottom: 12vw;
    /* PC 는 시안 캔버스 기준 고정 배율/좌표 — 모바일 높이를 못 덮어 바닥이 드러난다 */
    background-size: 100% 100%, cover;
    background-position: 0 0, center center;
    border-radius: 0 0 8vw 8vw;
  }

  .con02_title {
    font-size: 7.5vw;
    line-height: 1.3;
    letter-spacing: -0.2vw;
  }

  .con02_row {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 9vw;
    column-gap: 2vw;
    row-gap: 7vw;
  }

  .con02_visual {
    width: 68vw;
  }

  .con02_tag {
    box-sizing: border-box;
    width: auto;
    height: 5.4vw;
    padding: 0 3.2vw;
    font-size: 3.3vw;
  }

  .con02_tag_sm {
    width: auto;
    height: auto;
    padding: 2vw 4vw;
    font-size: 3.8vw;
  }

  .con02_num {
    margin-top: 1.6vw;
    font-size: 5vw;
    line-height: 1.25;
  }

  .con02_num_sm {
    margin-left: 0.5vw;
    font-size: 3.3vw;
  }

  .con02_ring {
    padding-bottom: 2vw;
    border-width: 3vw;
  }

  .con02_ring .con02_num {
    margin-top: 2.4vw;
    font-size: 7vw;
  }

  .con02_ring .con02_num_sm {
    font-size: 4.2vw;
  }

  .con02_basis {
    margin-top: 2vw;
    font-size: 3vw;
  }

  .con02_tbwrap {
    margin-left: 0;
    margin-top: 0;
    width: 100%;
  }

  .con02_table {
    width: 92vw;
    height: auto;
    border-radius: 4vw;
  }

  .con02_tb_head {
    height: auto;
  }

  /* ★ 행 패딩은 세로만 지정한다 (PC 와 같은 방식).
     `padding: 4.6vw 0 3.4vw` 처럼 단축형을 쓰면 .con02_tb_row td (0,1,1) 가
     .con02_tb_c3 (0,1,0) 의 padding-right 를 0 으로 덮어써
     금액이 카드 라운드 모서리에 그대로 붙는다(= "원" 이 잘려 보이던 원인) */
  .con02_tb_head td {
    padding-top: 4.6vw;
    padding-bottom: 3.4vw;
    font-size: 3.6vw;
  }

  /* 구분선을 좌우 텍스트 인셋(6vw / 7vw)에 맞춘다 — PC 도 같은 규칙(44px / 51px) */
  .con02_tb_line {
    margin-left: 6vw;
    width: 79vw;
  }

  .con02_tb_row {
    height: auto;
  }

  .con02_tb_row td {
    padding-top: 2.9vw;
    padding-bottom: 0;
    font-size: 3.4vw;
  }

  .con02_tb_row_last {
    height: auto;
  }

  .con02_tb_row_last td {
    padding-bottom: 3.8vw;
  }

  .con02_tb_sum {
    height: auto;
  }

  .con02_tb_sum td {
    padding-top: 4vw;
    padding-bottom: 4vw;
    font-size: 3.7vw;
  }

  /* 컬럼 비율은 PC(124 / 142 / 185 of 451) 그대로.
     인셋만 모바일 폭에 맞춰 줄였다(PC 환산 9vw/11.2vw 는 금액이 7px 여유로 아슬아슬) */
  .con02_tb_c1 {
    width: 27.5%;
    padding-left: 6vw;
  }

  .con02_tb_c2 {
    width: 31.5%;
  }

  .con02_tb_c3 {
    width: 41%;
    padding-right: 7vw;
  }

  .con02_note {
    margin-top: 3.4vw;
    width: 92vw;
    font-size: 3.3vw;
    line-height: 1.4;
    text-align: center;
  }

  /* 과일 데코 — 매출 원을 기준으로 배치 */
  .con02_apple {
    left: auto;
    right: -2vw;
    top: 0;
    width: 16vw;
  }

  .con02_lemon {
    left: -2vw;
    bottom: 0;
    width: 16vw;
  }

  /* ═══════════════════════ CON03 — 좋은 먹거리가 모이는 곳 ═══════════════════════ */
  .con03 {
    padding-top: 13vw;
    padding-bottom: 12vw;
    /* PC 주기(100/1905)는 모바일에서 9.8px 라 노이즈로 보인다 */
    background-image: repeating-linear-gradient(90deg, #fffdea 0, #fffdea 2.5vw, #fffbe5 2.5vw, #fffbe5 5.2vw);
    background-size: auto;
    background-position: 0 0;
  }

  .con03_title {
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
    letter-spacing: -0.2vw;
  }

  .con03_badge {
    box-sizing: border-box;
    margin-top: 2.4vw;
    width: auto;
    height: 14vw;
    padding: 0 7vw;
    font-size: 8.4vw;
    line-height: 1;
    border-width: 1vw;
  }

  .con03_sub {
    margin-top: 4vw;
    width: 88vw;
    font-size: 3.5vw;
    line-height: 1.6;
    letter-spacing: -0.06vw;
  }

  /* PC 는 타이틀 좌우 빈 자리에 원 4개를 흩어 놨다 → 모바일은 가운데 원(60vw) 둘레 네 귀퉁이에.
     세로 기준은 섹션 바닥 — 위 카피가 재개행돼도 원과 같이 움직인다.
     원중심 = padding-bottom 12 + 마퀴 50 + 마퀴여백 16 + 반지름 30 = 108vw
     bottom = 108 − 39.8(중심선→배지 바깥끝) = 68.2vw */
  .con03_cat {
    position: absolute;
    left: 0;
    bottom: 68.2vw;
    margin-top: 0;
    width: 100%;
    /* 자식이 전부 absol 이라 콘텐츠로 높이가 안 잡힌다 — 배지 대각 배치 박스 높이(39.8×2) */
    height: 79.7vw;
  }

  /* 45° 대각선상, 큰 원에 딱 맞닿게(중심거리 30+10.5+1).
     크림 배경 + 노란 원 옆에서 순검정은 혼자 튄다 → 위 맛KET 뱃지와 같은 브랜드 네이비로 */
  .con03_cat_item {
    position: absolute;
    width: 21vw;
    border-width: 1.2vw;
    border-color: var(--color-point);
    background-color: var(--color-point);
  }

  .con03_cat_item01 {
    left: 10.2vw;
    top: 0;
    margin-left: 0;
  }

  .con03_cat_item02 {
    right: 10.2vw;
    top: 0;
    margin-left: 0;
  }

  .con03_cat_item03 {
    left: 10.2vw;
    bottom: 0;
    margin-left: 0;
  }

  .con03_cat_item04 {
    right: 10.2vw;
    bottom: 0;
    margin-left: 0;
  }

  .con03_cat_txt {
    font-size: 3.6vw;
    letter-spacing: -0.12vw;
  }

  /* PC 는 원 뒤로 사진이 지나가지만 모바일은 폭이 좁아 서로 가린다 → 마퀴와 원을 위아래로 분리 */
  .con03_bottom {
    flex-direction: column;
    align-items: center;
    margin-top: 16vw;
  }

  /* 원이 먼저, 사진 마퀴가 그 아래 */
  .con03_rolls {
    position: relative;
    order: 2;
    margin-top: 16vw;
    flex-direction: column;
    justify-content: flex-start;
    left: auto;
    top: auto;
    height: auto;
    transform: none;
  }

  .con03_roll {
    margin-top: 0;
    height: 50vw;
  }

  /* 좌우 두 갈래 → 왼쪽 갈래 한 줄만. 원이 빠졌으니 안쪽으로 사라지는 마스크도 뗀다 */
  .con03_roll_l {
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* 같은 사진 두 줄이 겹쳐 보이니 모바일은 한 줄로 (PC 는 원 좌측 갈래로 필요) */
  .con03_roll_r {
    display: none;
  }

  /* 왼쪽 방향으로 흐르게 — 복제 세트는 오른쪽 끝에 붙여야 빈틈이 안 생긴다 */
  .con03_roll_track_l {
    animation-name: marqueeX;
  }

  .con03_roll_dup_l {
    right: auto;
    left: 100%;
  }

  .con03_card {
    margin-right: 3vw;
    width: 40vw;
    height: 50vw;
    border-radius: 3.6vw;
  }

  .con03_circle {
    order: 1;
    width: 60vw;
  }

  /* 원이 PC(30.4%)의 두 배라 같은 비율로 퍼지면 화면에서 두 배로 커 보인다 → 폭만 더 좁게 */
  .con03_circle::before,
  .con03_circle::after {
    --ripple-to: 1.06;
  }

  /* PC 픽셀 오프셋을 원 지름 대비 % 로 환산 (108/532 · -47/532 · 425/532) */
  .con03_circle_img {
    left: 20.3%;
    top: -8.8%;
    width: 79.9%;
  }

  /* ═══════════════════════ CON04 — 좋은 상품이 좋은 매장을 만듭니다 ═══════════════════════ */
  .con04 {
    padding-top: 13vw;
    padding-bottom: 12vw;
    /* PC 사선 주기(10.6/1905)는 모바일에서 2px 라 계단이 진다 */
    background-image: repeating-linear-gradient(135deg, #12408e 0, #12408e 0.7vw, #063486 0.7vw, #063486 2.8vw);
  }

  .con04_title {
    font-size: 6.6vw;
    line-height: 1.3;
    letter-spacing: -0.18vw;
  }

  .con04_title_lg {
    font-size: 8.2vw;
    letter-spacing: -0.22vw;
  }

  .con04_sub {
    margin-top: 3vw;
    width: 88vw;
    font-size: 3.5vw;
    line-height: 1.55;
    letter-spacing: -0.06vw;
  }

  .con04_card {
    box-sizing: border-box;
    width: 92vw;
    height: auto;
    border-radius: 6vw;
  }

  .con04_card01 {
    margin-top: 9vw;
    padding: 7vw 5vw 8vw;
  }

  .con04_card03 {
    margin-top: 5vw;
    padding: 8vw 5vw 8vw;
  }

  .con04_no {
    width: 13vw;
    height: 8.4vw;
    font-size: 3.6vw;
  }

  .con04_ctit {
    margin-top: 3vw;
    font-size: 5vw;
    line-height: 1.35;
    letter-spacing: -0.12vw;
  }

  .con04_lead {
    margin-top: 2.8vw;
    font-size: 3.7vw;
    line-height: 1.5;
    letter-spacing: -0.06vw;
  }

  .con04_desc {
    margin-top: 2.4vw;
    font-size: 3.4vw;
    line-height: 1.55;
    letter-spacing: -0.05vw;
  }

  .con04_desc_gap {
    margin-top: 3.4vw;
  }

  /* PC 는 5장 한 줄 → 모바일 3장 + 2장(가운데). 박스는 정사각에 가까운 171:178 */
  .con04_thumbs {
    flex-wrap: wrap;
    margin-top: 6vw;
    gap: 2.6vw;
  }

  .con04_thumb {
    width: 25.1vw;
    height: 26.1vw;
    border-radius: 3.4vw;
  }

  /* 모바일 박스는 PC(213:178)보다 좁다 → 피사체가 가운데 오도록 % 로 따로 잡는다
     (10~12 는 PC 규칙 — 박스 꽉 채움 + 세로 가운데 — 그대로) */
  .con04_thumb_img03 {
    left: -40.9%;
    top: -12.4%;
    width: 200%;
  }

  .con04_thumb_img04 {
    left: -32.7%;
    top: -23.6%;
    width: 178.9%;
  }

  .con04_thumbs_lg {
    margin-top: 6vw;
    gap: 2.6vw;
  }

  .con04_thumbs_lg .con04_thumb {
    width: 39vw;
    height: 26.1vw;
  }

  /* 02 — PC 좌우 2분할(텍스트 | 영상) → 세로 스택 */
  .con04_card02 {
    flex-direction: column;
    align-items: center;
    margin-top: 5vw;
    width: 92vw;
  }

  .con04_c2_txt {
    align-items: center;
    width: 100%;
    height: auto;
    padding: 8vw 5vw;
    border-radius: 6vw 6vw 0 0;
  }

  .con04_c2_txt .con04_ctit,
  .con04_c2_txt .con04_lead,
  .con04_c2_txt .con04_desc {
    text-align: center;
  }

  .con04_c2_txt .con04_lead {
    margin-top: 2.8vw;
  }

  .con04_c2_txt .con04_desc {
    margin-top: 2.4vw;
  }

  .con04_c2_media {
    width: 100%;
    height: 62vw;
    border-radius: 0 0 6vw 6vw;
  }

  .con04_video {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-position: center 35%;
  }

  /* 카드01 하단 연파랑 아치 — PC 는 카드 높이 비례였으나 모바일은 카드가 세로로 길어져
     아치가 썸네일 밑으로 내려간다. 썸네일 위 6vw 에서 시작하도록 재계산(a=79.5vw) */
  /* PC 카드 뒤 타원 데코 — 모바일은 카드 폭이 좁아 배경만 지저분해져 뺀다 */
  .con04_ellipse {
    display: none;
  }

  /* 돋보기 — PC 는 마지막(5번째) 썸네일 우상단. 모바일도 마지막 썸네일 우상단에 걸치게 →
     3+2 배치에서 비는 둘째 줄 오른쪽 자리. 하단 기준이라 위 카피가 재개행돼도 안 어긋난다 */
  .con04_search {
    left: 64vw;
    top: auto;
    bottom: 14vw;
    width: 22vw;
  }

  /* 택배 박스 — 카드03 좌하단(3번째 썸네일이 가운데라 비는 자리)에 걸친다.
     섹션 하단 기준으로 잡아야 위 카피가 재개행돼도 안 어긋난다 */
  .con04_box {
    left: 5vw;
    top: auto;
    bottom: 8vw;
    width: 26vw;
  }

  /* ═══════════════════════ 공통 — 슬라이드 네비 버튼 (con05 · con10) ═══════════════════════ */
  .sd_nav {
    width: 22vw;
    height: 11vw;
  }

  .sd_nav_arr {
    width: 5vw;
  }

  /* ═══════════════════════ CON05 — 비수기 매출 지원 ═══════════════════════ */
  .con05 {
    align-items: center;
    height: auto;
    padding-top: 13vw;
    padding-bottom: 12vw;
    /* 격자 주기 15/1905 → 모바일 3px 는 모아레. 시안과 같은 체감(15px)으로 */
    background-size: 4vw 4vw;
  }

  /* SUPPORT 워터마크 — 좌측 가장자리에 세로로 */
  .con05_fresh {
    left: -2vw;
    top: 4vw;
    font-size: 15vw;
    line-height: 1;
    letter-spacing: -0.5vw;
  }

  /* 래퍼를 평탄화해 화살표를 슬라이드 아래로 보낸다 (order) */
  .con05_left {
    display: contents;
  }

  .con05_title {
    position: relative;
    order: 1;
    width: 92vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
    letter-spacing: -0.2vw;
  }

  .con05_sub {
    position: relative;
    order: 2;
    margin-top: 3.6vw;
    width: 88vw;
    font-size: 3.5vw;
    line-height: 1.55;
    text-align: center;
    letter-spacing: -0.06vw;
  }

  .con05_sub_gap {
    margin-top: 2.6vw;
  }

  .con05_navs {
    order: 4;
    justify-content: center;
    margin-top: 6vw;
  }

  /* PC 는 우측 절반에 absol — 모바일은 텍스트 아래 흐름으로.
     세로형 카드(70vw × 105vw) 좌우로 앞뒤 카드가 걸치도록 컨테이너는 꽉 채운다 */
  .con05_slide {
    position: relative;
    order: 3;
    left: auto;
    top: auto;
    margin-top: 8vw;
    width: 100%;
    height: 105vw;
  }

  .con05_slide_item {
    width: 70vw;
  }

  .con05_photo {
    border-radius: 4vw;
  }

  /* ═══════════════════════ CON06 — 직접 비교해보세요 ═══════════════════════ */
  /* PC 는 좌(일반)·우(맛KET) 2단 카드 + 가운데 라벨 알약(.con06_row).
     모바일 폭에선 그 3단 배치가 안 되므로, PC 카드는 감추고
     모바일 전용 3열 비교표(.con06_mtable_wrap — 마크업은 index.html)를 대신 노출한다.
     .con06_row 에는 CTA 만 남는다. */
  .con06 {
    padding-top: 13vw;
    padding-bottom: 12vw;
  }

  .con06_title {
    font-size: 6.6vw;
    line-height: 1.3;
    letter-spacing: -0.18vw;
  }

  .con06_title_lg {
    font-size: 8.2vw;
    letter-spacing: -0.22vw;
  }

  .con06_sub {
    margin-top: 3vw;
    width: 88vw;
    font-size: 3.5vw;
    line-height: 1.55;
    text-align: center;
    letter-spacing: -0.06vw;
  }

  /* PC 카드 3형제는 표가 대신한다 */
  .con06_card_l,
  .con06_card_r,
  .con06_pills {
    display: none;
  }

  /* 남는 건 CTA 뿐 — PC 의 가로 row 를 세로 흐름으로 */
  .con06_row {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 0;
  }

  /* border-collapse 된 table 은 border-radius 로 셀이 잘리지 않아서 래퍼가 모서리를 맡는다.
     흰 배경 + 1px #dcdcdc 는 PC 좌카드(.con06_card_l)가 쓰던 값 그대로 (새 색·보더 아님) */
  .con06_mtable_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 8vw;
    width: 92vw;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 4vw;
  }

  .con06_mtable {
    width: 100%;
    table-layout: fixed;
  }

  .con06_mth,
  .con06_mcat,
  .con06_mtd {
    box-sizing: border-box;
    padding: 3.4vw 2.2vw;
    font-family: "Paperlogy";
    font-size: 3.3vw;
    line-height: 1.45;
    text-align: center;
    vertical-align: middle;
    word-break: keep-all;
  }

  /* 머리행은 한 띠로 읽혀야 한다 — 구분만 색이 있고 가운데가 흰색이면 세 칸이 따로 논다.
     맛KET 칸만 아래 .con06_mth_point 가 남색으로 덮어 강조를 남긴다 */
  .con06_mth {
    background-color: #dee9fd;
  }

  /* 행 구분선 — 마지막 행에 선이 남지 않게 border-top 으로 준다 */
  .con06_mcat,
  .con06_mtd {
    border-top: 1px solid #dcdcdc;
  }

  /* 구분 열 — 섹션 배경 줄무늬의 진한 쪽(#dee9fd) 재사용 */
  .con06_mth_cat,
  .con06_mcat {
    width: 21%;
    font-weight: 700;
    color: #063486;
    background-color: #dee9fd;
  }

  /* 일반 마트 열 머리 — PC .con06_l_tit 과 같은 서체 */
  .con06_mth_base {
    font-family: "Suit";
    font-weight: 800;
    color: #000000;
  }

  /* 일반 마트 열 본문 — PC .con06_list_l .con06_item 과 같은 굵기·색 */
  .con06_mtd {
    font-weight: 400;
    color: #4d4d4d;
  }

  /* 맛KET 열 — PC 우측 카드의 강조(남색 머리 + 연파랑 본문)를 열 전체로 이어 붙인다 */
  .con06_mth_point {
    background-color: #063486;
  }

  .con06_mlogo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* 22vw 면 칸 폭의 60% 라 옆 칸 글자(3.3vw)와 무게가 안 맞는다 */
    width: 17vw;
    aspect-ratio: 131 / 36;
  }

  .con06_mtd_point {
    font-weight: 600;
    color: #000000;
    background-color: #e6efff;
  }

  /* 원형 CTA — PC 는 카드 우측 absol. 모바일은 비교표 아래 가운데 */
  .con06_cta {
    position: relative;
    left: auto;
    top: auto;
    margin: 8vw 0;
    width: 38vw;
    box-shadow: 0 0 0 0.6vw #ffffff, 0 0 0 2vw #063486;
  }

  .con06_cta_txt {
    font-size: 5vw;
    line-height: 1.3;
  }

  /* PC 픽셀 좌표를 원 지름 대비 % 로 환산 (160/223 · 166/221 · 58/223) */
  .con06_cursor {
    left: 71.7%;
    top: 75.1%;
    width: 26%;
  }

  /* ═══════════════════════ CON07 — 검증된 운영으로 전국으로 성장 ═══════════════════════ */
  .con07 {
    padding-top: 13vw;
    padding-bottom: 12vw;
    /* PC 는 캔버스 고정배율 — 모바일에선 상단 일부만 칠해지고 아래가 단색으로 뚝 끊긴다 */
    background-size: 170% auto;
    background-position: center -6vw;
  }

  /* 지도 핀 — PC 좌표는 모바일에서 타이틀 글자 위로 온다(같은 노란색이라 글자가 먹힘).
     PC 처럼 타이틀 네 귀퉁이에 두되, 글자줄 x 범위 밖으로만 (1행 26.5~73.5 / 3행 33~67).
     섹션 최상단은 고정 헤더(15vw)에 가려지므로 피한다 */
  .con07_pin {
    width: 5.5vw;
  }

  .con07_pin01 {
    left: 5vw;
    top: 12vw;
  }

  .con07_pin02 {
    left: 12vw;
    top: 32vw;
  }

  .con07_pin03 {
    left: 89.5vw;
    top: 12vw;
  }

  .con07_pin04 {
    left: 82.5vw;
    top: 32vw;
  }

  .con07_title {
    position: relative;
    font-size: 6.6vw;
    line-height: 1.3;
    letter-spacing: -0.18vw;
  }

  .con07_sub {
    position: relative;
    margin-top: 3vw;
    width: 88vw;
    font-size: 3.5vw;
    line-height: 1.55;
    letter-spacing: -0.06vw;
  }

  .con07_title_lg {
    font-size: 8.2vw;
    letter-spacing: -0.22vw;
  }

  /* 4개 한 줄 → 2×2. PC 는 칸 사이 세로 하이라인으로 나누지만, 2×2 로 접으면
     그 선이 숫자 옆에만 뜨는 토막이 되고 주석이 붙은 칸만 키가 커져 행이 어긋난다.
     → 칸마다 하이라인 박스를 둘러 그룹을 명확히 하고, 같은 행은 높이를 맞춘다.
     (선 색 rgba(255,255,255,0.3) 은 PC 구분선이 쓰던 값 그대로) */
  .con07_stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    margin-top: 10vw;
    width: 92vw;
    gap: 3vw;
  }

  .con07_stat {
    box-sizing: border-box;
    justify-content: center;
    width: auto;
    padding: 4.6vw 2vw;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4vw;
  }

  .con07_stat:last-child {
    grid-column: 1 / -1;
  }

  .con07_stat_label,
  .con07_stat01 .con07_stat_label,
  .con07_stat02 .con07_stat_label,
  .con07_stat03 .con07_stat_label,
  .con07_stat04 .con07_stat_label {
    box-sizing: border-box;
    width: auto;
    height: 8vw;
    padding: 0 2.8vw;
    font-size: 3.4vw;
  }

  /* 칸 테두리가 구분을 맡으므로 PC 의 칸 사이 세로선은 끈다.
     높이도 고정하지 않고 숫자에 맡긴다 (주석 있는 칸만 늘어나던 원인) */
  .con07_stat_numbox {
    margin-top: 3vw;
    height: auto;
    border-left: 0;
  }

  .con07_stat:last-child .con07_stat_numbox {
    border-right: 0;
  }

  .con07_stat_num {
    margin-top: 0;
    line-height: 1.1;
  }

  .con07_num_lg {
    font-size: 9vw;
    letter-spacing: -0.4vw;
  }

  .con07_num_sm {
    margin-left: 1vw;
    font-size: 6vw;
  }

  .con07_stat_note {
    margin-top: 1.4vw;
    font-size: 3.3vw;
    line-height: 1.4;
  }

  .con07_roll {
    margin-top: 11vw;
    height: 34.4vw;
  }

  .con07_card {
    margin-right: 2.4vw;
    width: 52vw;
    height: 34.4vw;
    border-radius: 3vw;
  }

  /* ═══════════════════════ CON08 — 본사를 활용할 수 있는 프랜차이즈 ═══════════════════════ */
  .con08 {
    padding-top: 13vw;
    padding-bottom: 12vw;
  }

  .con08_topbg {
    height: 94vw;
    background-image: linear-gradient(#ffffff, #fff2e9 80vw);
  }

  .con08_title,
  .con08_title2 {
    font-size: 6.1vw;
    line-height: 1.3;
    letter-spacing: -0.18vw;
  }

  .con08_title_lg {
    font-size: 8.2vw;
    letter-spacing: -0.22vw;
  }

  /* 원 44vw 면 화면에 2.3장밖에 안 들어가 슬라이드로 안 읽힌다 → 3장이 잡히는 30vw.
     높이 = 원 30 + 아치 하강 6.3 (slide.js 9.21*p^1.875*--px, p≈4 기준) + 링 여유 */
  .con08_roll {
    /* 8 + 5.2 — 줄어든 높이(10.4vw)의 절반만큼 내려 그라데이션 띠 가운데에 앉힌다 */
    margin-top: 13.2vw;
    height: 38vw;
    padding-top: 1.2vw;
  }

  div.con08_roll_item {
    width: 30vw;
  }

  .con08_circle {
    width: 30vw;
    /* PC 링 10/원 230 = 4.35% 비율 유지 */
    box-shadow: 0 0 0 1.3vw rgba(233, 116, 30, var(--ring, 0));
  }

  /* 아치 커브 — 모바일 폭에선 곡률이 안 읽히므로 더 넓게 깔아 완만한 경계선으로.
     top 은 .con08_topbg 하단(94vw)을 가로지르도록 PC 비율대로 재계산 */
  .con08_curve {
    top: 87vw;
    width: 160%;
  }

  .con08_line {
    top: 94vw;
    height: 16vw;
  }

  /* 26 + 10.4 — 슬라이드가 10.4vw 낮아진 만큼 되돌려 아치 커브/띠(absol 87·94vw)와의
     간격을 그대로 유지한다 */
  .con08_title2 {
    margin-top: 31.2vw;
  }

  .con08_sub {
    margin-top: 3.4vw;
    width: 88vw;
    font-size: 3.5vw;
    line-height: 1.55;
    letter-spacing: -0.06vw;
  }

  .con08_panel {
    margin-top: 8vw;
    width: 92vw;
    padding: 8vw 4vw;
    border-radius: 6vw;
  }

  /* PC 4열 → 모바일 2열. flex-wrap 은 카드마다 설명 줄 수가 달라 행 높이가 들쭉날쭉해진다
     → grid 로 바꿔 행 높이·열 위치를 고정한다 (설명이 1줄이든 2줄이든 카드 상단이 일치) */
  .con08_cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 100%;
    padding-left: 0;
    column-gap: 3vw;
    row-gap: 6vw;
  }

  .con08_card {
    width: auto;
  }

  .con08_card_img {
    width: 100%;
    height: 29vw;
    border-radius: 2.6vw;
  }

  /* PC 픽셀 크롭 좌표 → 카드 이미지 박스(301×218) 대비 % (박스 비율 동일이라 크롭 유지) */
  .con08_card_photo01 {
    left: -20.3%;
    top: -1.8%;
    width: 138.2%;
  }

  .con08_card_photo02 {
    left: -18.9%;
    top: -11%;
    width: 124.6%;
  }

  .con08_card_photo03 {
    left: -0.3%;
    top: -33.9%;
    width: 101%;
  }

  .con08_card_photo04 {
    left: -2.3%;
    top: -25.7%;
    width: 107.6%;
  }

  .con08_card_photo05 {
    left: -15.9%;
    top: -16.5%;
    width: 127.2%;
  }

  .con08_card_photo06 {
    left: -1%;
    top: -35.3%;
    width: 106.3%;
  }

  .con08_card_photo07 {
    left: -20.6%;
    top: -25.7%;
    width: 138.2%;
  }

  .con08_card_photo08 {
    left: -3.3%;
    top: -53.2%;
    width: 104.3%;
  }

  .con08_card_tit {
    margin-top: 2.6vw;
    font-size: 3.9vw;
    line-height: 1.3;
  }

  .con08_card_desc {
    margin-top: 1.6vw;
    font-size: 3.3vw;
    line-height: 1.4;
    text-align: center;
    /* PC 한 줄 고정 — 모바일 카드 폭(40vw)에선 접혀야 한다 */
    white-space: normal;
  }

  .con08_cta {
    margin-top: 9vw;
    width: 64vw;
    height: 13.4vw;
    font-size: 4.6vw;
  }

  .con08_cta::before {
    background: radial-gradient(circle 30vw at var(--mx) var(--my), rgba(255, 222, 150, 0.95) 0%, rgba(255, 200, 110, 0.45) 35%, rgba(255, 190, 90, 0) 72%);
  }

  /* ═══════════════════════ CON09 — 광고보다 좋은 상품이 + 고객 만족이 증명합니다 ═══════════════════════
     PC: 상단 CCTV 영상존(타이틀·장바구니·신호등 배지 3개) + 그 아래를 파고드는 가로 3분할 카드,
         하단은 후기 마퀴 2줄 위에 「재방문율 90%」 원이 겹쳐 있다.
     모바일: 가로 3분할을 세로 1열로 펴고, 「겹쳐서 성립하던」 관계(배지↔카드 · 원↔마퀴)를 전부 해체한다.
         겹침이 사라지면 배지와 90% 원은 가리키던 대상을 잃으므로 각각 제거·흐름 전환한다. */
  .con09_top {
    height: auto;
    /* 고정 헤더(15vw) + 어닝 띠(4.6vw) 아래에서 타이틀이 시작하게 */
    padding-top: 24vw;
    padding-bottom: 16vw;
  }

  /* PC 는 160/94 가로 영상이 존을 덮지만 모바일은 존이 세로로 길어져 폭 기준으로 깔면 아래가 빈다
     → 존을 100% 덮고 cover 로 크롭한다. blur 은 --px 스케일이라 모바일에서 0.6px 로 사라져 vw 로 다시 잡는다 */
  .con09_video {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    filter: blur(0.4vw) brightness(0.32);
  }

  /* 100% 로 맞추면 차양 줄무늬가 모바일 폭에서 잘게 뭉개진다 → 뷰포트 초과(251%)로 늘려
     PC 와 비슷한 줄무늬 굵기를 유지 (섹션 overflow:hidden 이 우측을 잘라냄) */
  .con09_awning {
    left: 0;
    width: 251%;
  }

  /* PC 는 장바구니 + 배지 3개를 함께 감싸는 863px 후광이지만, 모바일은 배지를 뺐으므로
     장바구니 뒤 후광으로만 남긴다. 존 하단 기준(bottom) — 위쪽 텍스트 줄 수에 안 흔들린다 */
  .con09_glow {
    top: auto;
    /* 카트와 동심원 — 카트를 45vw 로 줄인 만큼 후광도 같은 비율(86→64vw)로 줄이고,
       존 하단 기준 오프셋을 다시 잡아 중심을 맞춘다. 아래로 삐져나간 부분은
       존 overflow:hidden + 카드가 덮으므로 안 보인다 */
    bottom: -18.7vw;
    width: 64vw;
  }

  .con09_title,
  .con09_title2 {
    font-size: 6.6vw;
    line-height: 1.3;
    letter-spacing: -0.18vw;
  }

  .con09_title_lg {
    font-size: 8.2vw;
    letter-spacing: -0.22vw;
  }

  .con09_sub,
  .con09_sub2 {
    width: 88vw;
    font-size: 3.5vw;
    line-height: 1.5;
    letter-spacing: -0.05vw;
  }

  .con09_sub {
    margin-top: 3vw;
  }

  /* 68vw 는 존을 꽉 채워 후광까지 잘린다 → 45vw 로 줄이고 아래로 내려,
     뒤따르는 카드가 카트 밑단을 살짝 덮게 한다(음수 margin-bottom 이 존을 끌어올림) */
  .con09_cart {
    position: relative;
    left: auto;
    top: auto;
    width: 45vw;
    margin-top: 12vw;
    margin-bottom: -19vw;
  }

  /* ★ 배지 3개 제거 — 두 가지 이유가 겹친다.
     ① 신호등(js/animation.js con09Pair)은 배지와 짝 카드가 한 화면에 같이 보여야 「짝」으로 읽힌다.
        카드가 세로 1열로 펴지면 배지는 화면 밖이라 연동이 전혀 전달되지 않는다.
        가리킬 대상을 잃은 배지는 왜 3개인지·왜 하나만 노란지 설명이 안 되는 장식이 된다.
     ② 문구(공동구매 / 신선한 농산물 / 높은 재방문)가 카드 01~03 제목과 의미 중복이다.
        정보 손실이 아니라 중복 제거다. */
  .con09_badge {
    display: none;
  }

  /* 가로 3분할 → 세로 1열. 상단 존을 파고드는 PC 의 겹침 의도는 음수 margin 으로 살린다 */
  .con09_cards {
    position: relative;
    top: auto;
    flex-direction: column;
    align-items: center;
    width: 90vw;
    margin-top: -10vw;
    gap: 3vw;
  }

  .con09_card {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 6vw 5vw;
    border-radius: 4vw;
  }

  /* ★ 신호등 타이머가 2.6초마다 .on 을 옮겨 다닌다. PC 는 가로 3분할이라 한 칸만 파래지는 게
     인덱스로 읽히지만, 세로로 3장이 다 보이는 모바일에서는 이유 없이 카드 색이 순환하는 노이즈다
     → 강조를 무효화해 흰 카드로 통일하고, 위계는 노란 번호 pill 이 준다 */
  .con09_card.on {
    background-color: #ffffff;
  }

  .con09_card.on .con09_card_tit,
  .con09_card.on .con09_card_txt {
    color: #000000;
  }

  .con09_card.on .con09_point {
    color: #063486;
  }

  .con09_card_no {
    width: 14vw;
    height: 7.8vw;
    font-size: 3.6vw;
    letter-spacing: 0;
  }

  /* PC 는 한 줄 확정이라 nowrap 이지만 모바일 폭에선 넘친다 */
  .con09_card_tit {
    margin-top: 2.5vw;
    font-size: 4.6vw;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    letter-spacing: -0.1vw;
  }

  /* PC line-height 가 1.4vw(고정단위)라 모바일에선 줄이 겹친다 → 배수로 */
  .con09_card_txt {
    margin-top: 2vw;
    font-size: 3.5vw;
    line-height: 1.5;
    letter-spacing: 0;
    text-wrap: pretty;
  }

  /* 카드가 90vw 로 넓어져 좌우에 걸칠 여백이 없다. 그대로 두면 카드 밑에 반쪽만 잘려 나온다 */
  .con09_melon,
  .con09_orange {
    display: none;
  }

  .con09_title2 {
    margin-top: 13vw;
  }

  .con09_sub2 {
    margin-top: 2vw;
  }

  .con09_reviews {
    flex-direction: column;
    height: auto;
    margin-top: 8vw;
  }

  /* PC 는 좌우 2줄이 중앙 원을 사이에 두고 반대로 흐르지만, 모바일은 원을 아래로 내렸으므로
     세로 흐름으로 바꾼다 */
  .con09_rolls {
    position: relative;
    order: 2;
    left: auto;
    top: auto;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 3vw;
  }

  .con09_roll,
  .con09_roll_l,
  .con09_roll_r {
    width: 100%;
    height: auto;
  }

  /* ★ 후기 캡처는 원본 318px 폭에 글자 10px 이 구워져 있다(실측). 2줄로 나눠 46vw 를 주면
     글자가 5.6px 로 뭉개져 「후기 캡처」라는 것조차 안 읽힌다 → 1줄로 줄이고 70vw(8.6px)로 키운다.
     좌우 롤은 같은 r1~r6 6장을 순서만 바꿔 쓰는 중복이라 한 줄만 남긴다 */
  .con09_roll_l {
    display: none;
  }

  .con09_rcard {
    width: 70vw;
    height: auto;
    aspect-ratio: 323 / 423;
    margin-right: 3vw;
  }

  /* ★ PC 는 좌우로 넓어 마퀴 한가운데를 원이 덮어도 후기가 남지만, 390px 에서는 원이 마퀴를
     통째로 가린다. 유일한 증거인 후기를 덮는 오버레이라 흐름으로 내린다 */
  .con09_rate {
    position: relative;
    /* 재방문율 90% 를 후기 마퀴보다 먼저 — 수치를 먼저 보여주고 후기가 그 근거로 따라오게.
       순서가 바뀌었으므로 간격도 위(margin-top)에서 아래(margin-bottom)로 옮긴다 */
    order: 1;
    left: auto;
    top: auto;
    width: 48vw;
    margin-top: 0;
    margin-bottom: 8vw;
  }

  /* 사선 텍스처가 --px 스케일이라 모바일에서 0.3px 로 뭉개진다 → 1px / 7px 주기로 다시 잡는다 */
  .con09_rate_in {
    background-image: repeating-linear-gradient(135deg, #1a4999 0, #1a4999 1px, #063486 1px, #063486 1.8vw);
  }

  .con09_rate_pill {
    width: 24vw;
    height: 8.7vw;
    font-size: 3.6vw;
    letter-spacing: 0;
  }

  .con09_rate_num {
    margin-top: 2vw;
    line-height: 1.1;
  }

  .con09_rate_lg {
    font-size: 13vw;
    letter-spacing: -0.3vw;
  }

  .con09_rate_sm {
    font-size: 6.5vw;
    letter-spacing: 0;
  }

  .con09_band {
    height: auto;
    margin-top: 12vw;
    padding: 3.5vw 0;
  }

  .con09_band_set {
    gap: 6vw;
    padding-right: 6vw;
  }

  .con09_band_txt {
    font-size: 4.2vw;
    letter-spacing: 0;
  }

  /* ═══════════════════════ CON10 — 점주가 직접 말하는 맛KET ═══════════════════════ */
  .con10 {
    align-items: center;
    height: auto;
    padding-top: 13vw;
    padding-bottom: 12vw;
  }

  /* 래퍼 평탄화 — 화살표·CTA 를 슬라이드 아래로 (order) */
  .con10_left {
    display: contents;
  }

  .con10_title {
    order: 1;
    width: 92vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
    letter-spacing: -0.2vw;
  }

  .con10_sub {
    order: 2;
    margin-top: 3.6vw;
    width: 88vw;
    font-size: 3.5vw;
    line-height: 1.55;
    text-align: center;
    letter-spacing: -0.06vw;
  }

  .con10_navs {
    order: 4;
    justify-content: center;
    margin-top: 7vw;
  }

  .con10_slide {
    position: relative;
    order: 3;
    box-sizing: border-box;
    left: auto;
    top: auto;
    margin-top: 8vw;
    width: 100%;
    height: 95vw;
    /* 가운데 정렬이라 좌우 대칭 — 활성 카드 box-shadow(1.4vw) 자리 */
    padding: 1.4vw;
  }

  .con10_vcard {
    width: 52vw;
    height: 92.2vw;
    border-radius: 3vw;
  }

  .con10_vcard.swiper-slide-active {
    box-shadow: 0 0 0 1.4vw #063486;
  }

  /* 원형 CTA — PC 는 슬라이드 좌측 absol. 모바일은 맨 아래 흐름으로 */
  .con10_cta {
    position: relative;
    order: 5;
    left: auto;
    top: auto;
    margin-top: 9vw;
    width: 38vw;
    box-shadow: 0 0 0 0.6vw #ffffff, 0 0 0 2vw #063486;
  }

  .con10_cta_txt {
    font-size: 5vw;
    line-height: 1.3;
  }

  /* PC 픽셀 좌표를 원 지름 대비 % 로 환산 (161/222 · 164/222 · 58/222) */
  .con10_cursor {
    left: 72.5%;
    top: 73.9%;
    width: 26.1%;
  }

  /* ═══════════════════════ CON11 — 부담은 낮추고 + 개설절차 안내 ═══════════════════════ */
  .con11 {
    padding-top: 12vw;
    padding-bottom: 12vw;
    background-image: repeating-linear-gradient(90deg, #1a4999 0, #1a4999 1px, #063486 1px, #063486 2.6vw);
    background-position: 0 0;
  }

  .con11_panel {
    width: 92vw;
    /* 좌우 4vw → 3vw. 안쪽 표가 쓸 수 있는 폭을 84vw 에서 86vw 로 넓힌다 */
    padding: 10vw 3vw;
    border-radius: 6vw;
  }

  .con11_title {
    font-size: 7.5vw;
    line-height: 1.3;
    letter-spacing: -0.2vw;
  }

  .con11_title2 {
    margin-top: 12vw;
  }

  .con11_sub {
    margin-top: 3.2vw;
    width: 84vw;
    font-size: 3.5vw;
    line-height: 1.5;
    text-align: center;
    letter-spacing: -0.06vw;
  }

  .con11_tablewrap {
    margin-top: 6vw;
    width: 100%;
  }

  .con11_std {
    font-size: 3.3vw;
  }

  .con11_table {
    margin-top: 1.6vw;
  }

  .con11_c1 {
    width: 20%;
  }

  /* 합계 "89,700,000원" 은 줄바꿈이 안 되는 한 덩어리 — 이 칸 폭이 곧 하한선 */
  .con11_c2 {
    width: 36%;
  }

  .con11_c3 {
    width: 44%;
  }

  .con11_head {
    height: auto;
  }

  .con11_head td {
    padding: 3vw 1vw;
    font-size: 3.4vw;
  }

  .con11_row {
    height: auto;
  }

  .con11_row td {
    padding: 2.6vw 1vw;
    font-size: 3.3vw;
    line-height: 1.45;
  }

  /* PNG 뱃지는 101/227px 폭에 문구가 구워져 있다 — 모바일 칸 폭(31/37vw)으로 줄이면
     글자가 3px 로 뭉개져 「0원!」·「50호점까지 면제!」가 안 읽힌다.
     → PC PNG 는 감추고, 같은 조형(남색 알약 + 흰 안쪽 링 + 노란 강조)을 텍스트로 다시 그린다.
     .mobile-inline 이 PC 에서 뱃지 텍스트를 숨기므로 PC 렌더는 영향 0 */
  .con11_badge_sm,
  .con11_badge_lg {
    display: none;
  }

  .con11_mbadge {
    /* .mobile-inline 의 display:inline !important 를 이 자리에서 되잡는다 */
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 1.7vw 3.6vw;
    font-family: Ria;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #063486;
    /* PNG 의 이중 링(바깥 남색 띠 + 안쪽 흰 링)은 3.3vw 글자 옆에서 테두리가 글자만큼
       두꺼워져 칸이 지저분해진다 → 단색 알약 하나로 정리 */
    border-radius: 50vw;
  }

  .con11_mbadge_sm {
    margin-top: 1.6vw;
    font-size: 4vw;
    color: #feca3a;
  }

  /* 9글자라 폭이 빠듯하다 — 칸을 꽉 채우는 띠로 늘리면 알약이 아니라 셀 배경처럼 보인다
     → 좌우 패딩만 줄여 글자에 맞춰 붙이고 칸 안에서 가운데 정렬되게 둔다 */
  .con11_mbadge_lg {
    padding-left: 2.4vw;
    padding-right: 2.4vw;
    font-size: 3.3vw;
    letter-spacing: -0.05vw;
  }

  .con11_mbadge_point {
    color: #feca3a;
  }

  .con11_total {
    height: auto;
  }

  .con11_total td {
    padding: 3.4vw 1vw;
    font-size: 3.3vw;
    line-height: 1.45;
  }

  .con11_note {
    margin-top: 3vw;
    font-size: 3.3vw;
    line-height: 1.5;
    padding-left: 1vw;
  }

  .con11_line {
    margin-top: 10vw;
  }

  /* PC 3열 + 화살표 → 모바일은 1열 세로 나열. 화살표는 오른쪽 이웃을 가리키는 장식이라 제거
     (순서는 01~06 번호가 그대로 전달한다) */
  .con11_steps {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    margin-top: 8vw;
    width: 84vw;
    row-gap: 4vw;
  }

  .con11_arrow {
    display: none;
  }

  .con11_step {
    width: 100%;
    height: auto;
    padding: 5vw 3vw 6vw;
    border-radius: 4vw;
  }

  .con11_step_no {
    width: 13vw;
    height: 7.4vw;
    font-size: 3.4vw;
  }

  .con11_step_tit {
    margin-top: 2.6vw;
    font-size: 4.2vw;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
  }

  .con11_step_desc {
    margin-top: 2vw;
    font-size: 3.3vw;
    line-height: 1.45;
  }

  /* 과일 데코 — PC 는 패널 우하단. 모바일도 섹션 우하단 모서리에 모아 걸친다 */
  .con11_basket {
    left: auto;
    right: -3vw;
    top: auto;
    bottom: -2vw;
    width: 28vw;
  }

  .con11_banana {
    left: auto;
    right: 2vw;
    top: auto;
    bottom: 11vw;
    width: 12vw;
  }

  .con11_apple {
    left: auto;
    right: 17vw;
    top: auto;
    bottom: 4vw;
    width: 10vw;
  }

  /* ═══════════════════════ CON12 — 10년의 경험이 만든 신뢰 (대표인사말) ═══════════════════════ */
  .con12 {
    align-items: center;
    height: auto;
    padding-top: 13vw;
    padding-bottom: 12vw;
  }

  .con12_left {
    align-items: center;
    margin-left: 0;
    margin-top: 0;
    width: 88vw;
  }

  .con12_eyebrow {
    font-size: 4.2vw;
    text-align: center;
    letter-spacing: -0.12vw;
  }

  .con12_title {
    margin-top: 2vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
    letter-spacing: -0.2vw;
  }

  .con12_body {
    margin-top: 5vw;
    font-size: 3.4vw;
    line-height: 1.65;
    text-align: center;
    letter-spacing: -0.05vw;
  }

  .con12_body_gap {
    margin-top: 4vw;
  }

  /* PC 우측 absol 세로 마퀴 2열 → 모바일은 본문 아래 위·아래 2줄 가로 마퀴.
     세로 마퀴는 사용자가 이미 스크롤 중인 축과 겹쳐 눈을 붙잡고, 좁은 폭에서 2열로 쪼개면
     창이 사진 한 장보다 얕아 늘 반쯤 잘린 사진만 보인다. 가로로 눕히면 화면 폭을 끝까지
     쓰면서 사진이 매 순간 온전히 잡힌다 */
  .con12_rolls {
    position: relative;
    flex-direction: column;
    left: auto;
    top: auto;
    margin-top: 10vw;
    width: 100vw;
    height: auto;
    gap: 3vw;
  }

  .con12_roll {
    width: 100%;
    height: 55.6vw;
  }

  /* 마퀴 축을 Y→X 로 (공통 유틸의 marqueeY 를 덮는다). 윗줄 ← / 아랫줄 → 로 반대로 흐른다.
     10초 주기(≈105px/s)는 폰에서 너무 빨라 사진이 안 읽힌다 → 26s */
  .con12_roll_track {
    flex-direction: row;
    animation-name: marqueeX;
    animation-duration: 26s;
  }

  .con12_roll_track_r {
    animation-name: marqueeX_r;
  }

  .con12_roll_set {
    flex-direction: row;
  }

  /* 이음매용 복제 세트 — 세로 오프셋(top/bottom 100%)을 가로(left/right)로 돌린다 */
  .con12_roll_dup {
    top: auto;
    left: 100%;
  }

  .con12_roll_dup_r {
    bottom: auto;
    right: 100%;
  }

  .con12_photo {
    margin-right: 3vw;
    margin-bottom: 0;
    width: 44.5vw;
    height: 55.6vw;
    border-radius: 3vw;
  }

  /* 세로 MATKET 워드마크 — 모바일엔 놓을 측면 여백이 없고, 브랜드 마크는
     헤더·con03 뱃지·con06 로고·con09 띠에 이미 반복 노출된다 (장식 중복 제거) */
  .con12_matket {
    display: none;
  }

  /* 원형 CTA — PC 는 사진 마퀴 좌측 absol. 모바일은 맨 아래 가운데 흐름으로 */
  .con12_cta {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 10vw;
    width: 38vw;
    box-shadow: 0 0 0 0.6vw #ffffff, 0 0 0 2vw #e9741e;
  }

  .con12_cta_txt {
    font-size: 5vw;
    line-height: 1.3;
  }

  /* ═══════════════════════ CON13 — 신뢰를 쌓아온 시간 (연혁) ═══════════════════════ */
  /* ★ 모바일 전용 재구성 — PC「좌 사진 + 우 세로 스크롤 연혁」과 구조 자체가 다르다.
     모바일은「위 사진(연도 바뀌면 fade 교체) + 아래 연도 카드 가로 슬라이드」.
     .con13_timeline 이 Swiper 컨테이너 · .con13_items 가 wrapper · .con13_item 이 슬라이드가 되며,
     swiper 클래스는 js/slide.js 가 599px 이하에서만 붙인다 (PC DOM 은 손대지 않음). */
  .con13 {
    padding-top: 13vw;
    padding-bottom: 12vw;
    /* 그라데이션 밴드 — 사진 + 연혁 슬라이드 뒤에 깔리게 (PC 캔버스 비례값 무효).
       ★ 섹션 아래끝에 붙여 앉힌다(50% 100%) — 위에서부터 재면 카피 줄수·폰트에 따라
       섹션이 몇 vw 자라는 순간 밴드 아래로 흰 여백이 드러난다 */
    background-size: 100% 170vw;
    background-position: 50% 100%;
  }

  .con13_title {
    font-size: 6.6vw;
    line-height: 1.3;
    letter-spacing: -0.18vw;
  }

  .con13_title_lg {
    font-size: 8.2vw;
    letter-spacing: -0.22vw;
  }

  .con13_sub {
    margin-top: 3vw;
    width: 88vw;
    font-size: 3.5vw;
    line-height: 1.55;
    letter-spacing: -0.06vw;
  }

  /* PC 좌(사진) · 우(연혁창) → 세로 스택 */
  .con13_row {
    flex-direction: column;
    align-items: center;
    margin-top: 8vw;
  }

  /* 사진 — 연도가 바뀌면 con13_photo_prev 가 걷히며 fade (js/animation.js) */
  .con13_photo {
    margin-left: 0;
    width: 92vw;
    height: auto;
    aspect-ratio: 703 / 461;
    border-radius: 4vw;
  }

  /* 세로 축선 · 연혁 점 — 세로 타임라인 메타포가 사라지므로 모바일엔 없다 */
  .con13_axis,
  .con13_dot {
    display: none;
  }

  /* Swiper 컨테이너 — 100vw 로 깔아야 양옆 카드가 살짝 걸쳐 보인다.
     PC 의 내부 세로 스크롤(overflow-y:auto · 커스텀 스크롤바)은 여기서 해제 */
  .con13_timeline {
    overflow: hidden;
    margin-left: 0;
    margin-top: 7vw;
    width: 100vw;
    height: auto;
  }

  /* flex-start — 카드는 각자 내용만큼만 높고 상단만 맞춘다.
     stretch 로 늘리면 항목 3개짜리 카드(2020·2022·2024) 아래로 흰 여백이 크게 뜬다.
     그래도 트랙(=섹션) 높이는 제일 긴 카드(2023, 6항목) 기준으로 고정된다 */
  .con13_items {
    flex-direction: row;
    align-items: flex-start;
    row-gap: 0;
  }

  /* 슬라이드 = 한 해 카드 (slidesPerView:auto + centeredSlides)
     ★ 활성/비활성 흐림 없음 (유저 지시) — 양옆에 걸친 카드도 또렷하게 다 보인다.
       .con13_item_on 은 위 사진 fade 교체용으로 계속 토글되지만 카드 외형은 안 바꾼다 */
  .con13_item {
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    width: 78vw;
    height: auto;
    padding: 6vw 5.5vw 6.5vw;
    background-color: #ffffff;
    border: 1px solid #dfe6f4;
    border-radius: 4vw;
  }

  .con13_year {
    width: auto;
    height: auto;
    font-size: 6.4vw;
    color: #063486;
    letter-spacing: -0.16vw;
  }

  .con13_body {
    margin-left: 0;
    margin-top: 2.6vw;
    width: 100%;
  }

  .con13_ytit {
    font-size: 4vw;
    line-height: 1.4;
    color: #000000;
    white-space: normal;
  }

  .con13_ul {
    margin-top: 3vw;
    row-gap: 1vw;
  }

  /* 활성/비활성 구분은 카드 opacity 가 맡는다 —
     PC 처럼 활성만 굵게 하면 autoHeight 가 넘길 때마다 높이를 다시 재서 카드가 튄다 */
  .con13_li,
  .con13_item_on .con13_li {
    font-size: 3.4vw;
    font-weight: 300;
    line-height: 1.6;
    color: #333333;
    white-space: normal;
  }

  /* 현재 위치 표시 — Swiper 가 이 안에 bullet 을 만든다 (js/slide.js) */
  .con13_pager {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 5.5vw;
    width: 100%;
    --swiper-pagination-bottom: 0;
    --swiper-pagination-bullet-size: 2vw;
    --swiper-pagination-bullet-horizontal-gap: 1.1vw;
    --swiper-pagination-color: #063486;
    --swiper-pagination-bullet-inactive-color: #b9c4da;
    --swiper-pagination-bullet-inactive-opacity: 1;
  }

  /* ═══════════════════════ CON14 — 자주 묻는 질문 (Q&A) ═══════════════════════ */
  .con14 {
    padding-top: 12vw;
    padding-bottom: 12vw;
  }

  .con14_panel {
    width: 92vw;
    padding: 10vw 4vw 11vw;
    border-radius: 6vw;
  }

  .con14_badge {
    width: 20vw;
    height: 11vw;
    font-size: 4.4vw;
  }

  .con14_badge::before {
    width: 18vw;
    height: 9vw;
  }

  .con14_title {
    margin-top: 3vw;
    font-size: 7.5vw;
    letter-spacing: -0.2vw;
  }

  .con14_list {
    margin-top: 7vw;
    width: 100%;
  }

  .con14_q {
    box-sizing: border-box;
    height: auto;
    min-height: 14vw;
    padding: 3.4vw 0;
  }

  .con14_mark {
    margin-left: 1vw;
    width: 8vw;
    height: 8vw;
    font-size: 3.4vw;
  }

  .con14_qtxt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-width: 0;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    margin-left: 3vw;
    /* 화살표(margin-left:auto)와 붙지 않게 최소 간격 확보 */
    margin-right: 3vw;
    font-size: 3.6vw;
    line-height: 1.4;
    text-align: left;
  }

  .con14_arrow {
    margin-right: 3vw;
    width: 2.8vw;
    height: 2.8vw;
    transform: translateY(-0.5vw) rotate(45deg);
  }

  .con14_item_on .con14_arrow {
    transform: translateY(0.5vw) rotate(225deg);
  }

  .con14_a_in {
    padding-top: 3.4vw;
    padding-bottom: 4.4vw;
  }

  .con14_atxt {
    margin-left: 3vw;
    font-size: 3.4vw;
    line-height: 1.6;
  }

  /* ═══════════════════════ CON15 — 맛KET 매장안내 ═══════════════════════ */
  .con15 {
    padding-top: 13vw;
  }

  .con15_title {
    order: 1;
    font-size: 7.5vw;
    text-align: center;
    letter-spacing: -0.2vw;
  }

  /* PC 는 검색창이 지도 위에 absol — 모바일은 타이틀 바로 아래 흐름으로 (order 로 앞당김) */
  .con15_search {
    position: relative;
    order: 2;
    box-sizing: border-box;
    left: auto;
    top: auto;
    margin-top: 6vw;
    width: 92vw;
    height: 13vw;
    padding-left: 5vw;
    border-radius: 6.5vw;
  }

  .con15_input {
    /* 16px 미만이면 iOS 가 포커스 시 화면을 확대한다 → 4.2vw = 16.4px */
    width: 62vw;
    font-size: 4.2vw;
  }

  .con15_sbtn {
    margin-right: 1.6vw;
    width: 10.6vw;
    height: 10.6vw;
  }

  .con15_sbtn img {
    width: 5vw;
  }

  /* PC 좌(목록) · 우(지도) → 세로 스택. 모바일은 지도가 위 */
  .con15_body {
    order: 3;
    flex-direction: column;
    margin-top: 5vw;
    width: 92vw;
    height: auto;
    border-radius: 5vw;
  }

  .con15_map {
    order: 1;
    width: 100%;
    height: 84vw;
  }

  .con15_list {
    order: 2;
    width: 100%;
    height: 88vw;
    border-right: 0;
    /* 세로 스택이라 구분선을 위쪽 모서리로 옮긴다 */
    border-top: 1px solid #063486;
  }

  .con15_thumb {
    left: auto;
    right: 2vw;
    top: 4vw;
    width: 1.2vw;
  }

  .con15_noshop {
    margin-top: 14vw;
    font-size: 3.6vw;
  }

  .con15_store {
    padding: 5vw 15vw 5vw 5vw;
  }

  .con15_store_txt {
    padding-right: 0;
  }

  .con15_band_link,
  .con15_kakao_link {
    margin-top: 3vw;
    padding: 2.4vw 4vw;
    min-height: 40px;
    box-sizing: border-box;
    font-size: 3.3vw;
  }

  .con15_store_name {
    font-size: 4.2vw;
    line-height: 1.3;
  }

  .con15_store_addr {
    margin-top: 1.6vw;
    font-size: 3.4vw;
    line-height: 1.45;
  }

  .con15_store_tel {
    margin-top: 1vw;
    font-size: 3.3vw;
    line-height: 1.4;
  }

  /* 터치 타깃 40px 이상 (10.4vw @390 = 40.6px) */
  .con15_plus {
    right: 4vw;
    top: auto;
    bottom: 3vw;
    width: 10.4vw;
    height: 10.4vw;
    font-size: 4.6vw;
  }

  /* 매장 일러스트 — PC 처럼 하단 OPEN 띠 위에 걸친다 */
  .con15_shop {
    display: none;
    order: 4;
    left: auto;
    right: -2vw;
    top: auto;
    bottom: 4vw;
    width: 42vw;
  }

  .con15_band {
    order: 5;
    margin-top: 10vw;
    height: 12vw;
  }

  .con15_band_item {
    margin-right: 6vw;
    font-size: 3.8vw;
    letter-spacing: -0.1vw;
  }

  /* ── 매장 상세 팝업 — 좌우 2단 → 세로 스택 ── */
  .popup {
    flex-direction: column;
    width: 88vw;
    border-radius: 5vw;
  }

  .popup_left {
    width: 100%;
    height: 52vw;
  }

  .popup_right {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 7vw 6vw 8vw;
  }

  .popup_close {
    top: 3vw;
    right: 3vw;
    padding: 3vw;
  }

  .popup_close::before,
  .popup_close::after {
    width: 6vw;
    height: 2px;
  }

  .popup_right_2nd {
    font-size: 5.6vw;
    line-height: 1.3;
  }

  .popup_line {
    margin-top: 3vw;
    width: 10vw;
    height: 0.8vw;
  }

  .popup_right_3rd,
  .popup_right_4th {
    font-size: 3.5vw;
    line-height: 1.5;
  }

  .popup_right_3rd {
    margin-top: 4vw;
  }

  .popup_right_4th {
    margin-top: 1.4vw;
  }

  .popup_right_3rd_left,
  .popup_right_4th_left {
    margin-right: 3vw;
  }

  .popup_links {
    margin-top: 5vw;
    gap: 3vw;
  }

  .popup_right_6th_left {
    padding: 3.4vw 7vw;
    font-size: 3.5vw;
  }

  /* ═══════════════════════ CON16 — 성공 창업, 지금부터 맛KET과 시작하세요 ═══════════════════════ */
  .con16 {
    padding-top: 12vw;
    padding-bottom: 15vw;
  }

  /* PC 좌(카피) · 우(폼) 2단 → 세로 스택 */
  .con16_card {
    flex-direction: column;
    align-items: center;
    width: 94vw;
    height: auto;
    padding: 16vw 4vw 12vw;
    border-width: 1.2vw;
    border-radius: 6vw;
  }

  /* 원본 PNG(1981) ÷ 카드 폭(1823) = 108.7%, 좌 오프셋 -89.5/1823 = -4.9% */
  .con16_awning {
    left: -4.9%;
    top: -0.2vw;
    width: 108.7%;
  }

  .con16_left {
    align-items: center;
    margin-top: 0;
    margin-left: 0;
    width: 100%;
  }

  .con16_title {
    font-size: 6.6vw;
    line-height: 1.3;
    text-align: center;
    letter-spacing: -0.18vw;
  }

  .con16_title_lg {
    font-size: 8.2vw;
    letter-spacing: -0.22vw;
  }

  .con16_sub {
    margin-top: 4vw;
    font-size: 3.5vw;
    line-height: 1.6;
    text-align: center;
    letter-spacing: -0.06vw;
  }

  .con16_form {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 8vw;
    width: 100%;
  }

  .con16_field {
    height: 12.5vw;
    padding-left: 4vw;
    border-radius: 2vw;
  }

  .con16_field + .con16_field {
    margin-top: 2vw;
  }

  .con16_req {
    margin-right: 2vw;
    width: 2.6vw;
    font-size: 4vw;
  }

  /* 라벨 컬럼 고정폭 (PC 와 같은 목적, 모바일 폰트 3.8vw 기준 실측 9.703 + 여유).
     PC 의 calc(var(--px)*49) 를 그대로 두면 --px 가 작아져 10px 로 찌그러진다 */
  .con16_lb {
    width: 9.8vw;
    margin-right: 3vw;
    font-size: 3.8vw;
    /* 줄상자를 .con16_textarea(4.2vw × 1.5 = 6.3vw)와 같게 맞춘다 */
    line-height: 6.3vw;
  }

  /* 16px 미만이면 iOS 가 포커스 시 화면을 확대한다 → 4.2vw = 16.4px */
  .con16_input {
    font-size: 4.2vw;
  }

  .con16_sel_val {
    font-size: 3.8vw;
  }

  .con16_sel_pick {
    margin-left: 3vw;
  }

  .con16_caret {
    right: 4vw;
    top: 5.6vw;
    border-left-width: 1.8vw;
    border-right-width: 1.8vw;
    border-top-width: 2.4vw;
  }

  .con16_sel_list {
    top: calc(100% + 1.2vw);
    padding: 2vw;
    border-radius: 2vw;
    transform: translateY(-1.6vw);
  }

  .con16_sel_open .con16_sel_list {
    transform: translateY(0);
  }

  .con16_sel_opt {
    height: 11vw;
    padding-left: 4vw;
    font-size: 3.6vw;
    border-radius: 1.6vw;
  }

  .con16_area {
    height: 32vw;
    padding-top: 3.4vw;
    /* 4(필드) + 2.6(req 폭) + 2(req margin) — `*` 가 없는 칸이라 라벨을 직접 밀어 맞춘다 */
    padding-left: 8.6vw;
  }

  .con16_textarea {
    height: 24vw;
    font-size: 4.2vw;
    line-height: 1.5;
  }

  .con16_agree {
    justify-content: center;
    margin-top: 3.4vw;
  }

  .con16_agree_box {
    width: 6.6vw;
    height: 6.6vw;
  }

  .con16_agree_dot {
    width: 3.2vw;
    height: 1.7vw;
    margin-top: -0.7vw;
  }

  .con16_agree_txt {
    margin-left: 2vw;
    margin-right: 0;
    font-size: 3.4vw;
  }

  /* 100% 폭이라 PC(305x66=4.62)보다 훨씬 납작해진다(13.4vw 면 6.27) — 위아래를 키워 눌러준다.
     입력칸(.con16_field 12.5vw / 글자 4.2vw)보다 확실히 커야 1차 CTA 로 읽힌다 */
  .con16_submit {
    margin-top: 5vw;
    width: 100%;
    height: 15vw;
    font-size: 5.5vw;
    border-radius: 2vw;
  }

  /* 과일 데코 — 카드 상단 좌우 모서리(타이틀 글자줄 밖) */
  .con16_strawberry {
    left: 0;
    top: 5vw;
    width: 15vw;
  }

  .con16_apple {
    left: auto;
    right: 0;
    top: 3vw;
    width: 18vw;
  }

  /* 바구니·키위 — PC 처럼 카드 하단을 뚫고 걸치되 문의 버튼은 안 가리게 */
  .con16_basket {
    left: -3vw;
    top: auto;
    bottom: 0vw;
    width: 30vw;
  }

  .con16_kiwi {
    left: 12vw;
    top: auto;
    bottom: 10vw;
    width: 12vw;
  }


  /* ── con15 지도 말풍선 ──────────────────────────────────────────────
     PC 는 calc(var(--px) * N) 인데 모바일에선 --px 가 0.2 수준이라
     폰트가 3.3px 로 뭉개진다(실측). 모바일은 raw vw 로 재지정한다. */
  .map_marker_text {
    padding: 1.4vw 3.4vw;
    font-size: 3.3vw;
  }

  .map_marker_tail {
    width: 2.6vw;
    height: 2.6vw;
    margin-top: -1.7vw;
  }

}