@charset "UTF-8";
/* 옥된장 모바일 전용 스타일 (신규 작성 영역)
   - 브레이크포인트: @media screen and (max-width:599px)
   - style.css(데스크톱) 뒤에 로드되어 calc(var(--px)*N) 값을 vw/%로 덮어씀
   - 규칙: md/모바일/mobile_process.md, md/줄바꿈_가이드.md */

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

  /* ============================================================
     con01 — 메인 히어로 (배경영상 + 아치로고 + 타이틀 + 전골 그릇)
     PC 2.1:1 와이드 → 모바일 세로 히어로. 영상/딤/글로우는 full cover 유지,
     전골 그릇은 바닥중앙 앵커로 크게, 김은 그릇 위. 텍스트는 vw.
     ============================================================ */
  .con01 {
    height: 107vw;
  }

  #section_wrap {
    padding-top: 15vw;
  }

  .con01_glow_img {
    display: none;
  }

  .con01_iner {
    padding-top: 15vw;
  }

  .con01_arch_img {
    width: 43vw;
  }

  .con01_t1 {
    margin-top: 4.5vw;
    font-size: 3.9vw;
  }

  .con01_t2 {
    margin-top: 3vw;
    font-size: 7.5vw;
    line-height: 1.3;
  }

  .con01_bowl_img {
    width: 92vw;
    bottom: -18vw;
  }

  .con01_smoke_img {
    width: 76vw;
    bottom: -11vw;
  }

  /* ============================================================
     con02 — 쉴 틈 없는 옥된장의 낮과 밤 (낮/밤 2분할)
     PC 좌우 2컬럼 풀높이 → 모바일 세로 스택. 지붕/배지는 상단 헤더,
     텍스트 중앙정렬, 문(메뉴 데코)은 숨김, 된장/수육 전골 원판은
     각 블록 하단에 풀접시로 재배치(스핀 유지).
     ============================================================ */
  .con02 {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding-top: 18vw;
    padding-bottom: 0;
  }

  .con02_roof_img {
    width: 420vw;
    left: auto;
  }

  .con02_badge {
    top: 109.1vw;
    width: 66vw;
    z-index: 100;
  }

  .con02_btxt {
    font-size: 4.2vw;
  }

  .con02_lr {
    width: 100%;
    height: 97vw;
  }

  .con02_iner {
    padding-top: 15vw;
  }

  /* 타이틀 묶음 중앙정렬 (PC는 좌/우 치우침) */
  .con02_ltwrap,
  .con02_rtwrap {
    align-items: center;
    padding-left: 0;
    padding-right: 0;
  }

  .con02_lt1,
  .con02_rt1 {
    font-size: 4.6vw;
    text-align: center;
  }

  .con02_lt2,
  .con02_rt2 {
    margin-top: 2.4vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  /* 본문 중앙정렬 + 폭 확보 (PC 좌/우 인셋 해제) */
  .con02_lbody,
  .con02_rbody {
    padding-left: 0;
    padding-right: 0;
    margin-top: 4vw;
    font-size: 4vw;
    text-align: center;
  }

  /* 문(메뉴 카빙 데코) 숨김 — 사진/텍스트가 콘텐츠, 문은 프레이밍 장식 */
  .con02_ldoor_img,
  .con02_rdoor_img {
    display: none;
  }

  /* 된장/수육 전골 원판 = 각 블록 하단에 "절반만" 보이게.
     ★ dbowl/sbowl 은 .con02(섹션) 자식이라 .con02_lr(블록) overflow:hidden 으론
       안 잘림 → 접시 래퍼 자체를 [고정높이(절반) + overflow:hidden] "창"으로 만들고
       안의 img 는 풀사이즈(width:100%) + align-items:flex-start(위쪽 노출) → 상단 절반만.
     창 바닥을 각 블록 하단(blockTop 18 + lr 97)에 맞춤: dbowl 115−36=79 / sbowl 212−36=176.
     (본문↔접시 gap 10vw = lr 97: textOffset 51 + gap 10 + 창 36. 접시 폭·창 비례 확대) */
  .con02_dbowl,
  .con02_sbowl {
    left: auto;
    right: auto;
    bottom: auto;
    width: 68vw;
    height: 36vw;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
  }

  .con02_dbowl {
    top: 79vw;
  }

  .con02_sbowl {
    top: 176vw;
  }

  .con02_dbowl img,
  .con02_sbowl img {
    position: relative;
    width: 100%;
    height: auto;
    left: auto;
    right: auto;
    top: auto;
  }

  /* ============================================================
     con03 — 매출 강조 (식사~주류 크로스페이드 + 매출숫자)
     PC 좌(텍스트/숫자)·우(접시) 분할 → 모바일 세로 스택.
     소제목·타이틀·숫자 중앙정렬 → 알약(식사부터→주류까지) → 접시.
     구분선 숨김, 세로 라벨은 접시 위 그대로.
     ============================================================ */
  .con03_iner {
    align-items: center;
    padding-top: 15vw;
    padding-bottom: 4vw;
    padding-left: 0;
  }

  .con03_t1 {
    font-size: 4.6vw;
    text-align: center;
    line-height: 1.4;
  }

  .con03_title {
    margin-top: 4vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  .con03_data {
    align-items: center;
    margin-top: 7vw;
  }

  .con03_box {
    width: 54vw;
    margin-left: 0;
  }

  .con03_numrow {
    margin-top: 6vw;
  }

  .con03_num {
    font-size: 9.5vw;
  }

  .con03_won {
    margin-left: 2.5vw;
    font-size: 4.4vw;
  }

  /* 구분선 숨김 (PC 레이아웃용 수평선) */
  .con03_line {
    display: none;
  }

  /* 알약(식사부터→주류까지) : in-flow 중앙, 가로 row 배치(알약2 좌우 + 연결선 가로) */
  .con03_process {
    position: relative;
    left: auto;
    top: auto;
    flex-direction: row;
    align-items: center;
    width: auto;
    margin: 7vw auto 0;
  }

  .con03_pill {
    width: auto;
    height: 8.5vw;
    padding: 0 4.5vw;
    font-size: 3.5vw;
  }

  /* 세로 연결선 → 가로선 (알약 사이) */
  .con03_line_v {
    width: 6vw;
    height: 1px;
    margin: 0 2vw;
  }

  /* 접시(된장↔수육 크로스페이드) : in-flow 중앙, 크게 */
  .con03_dish {
    position: relative;
    right: auto;
    top: auto;
    margin-top: 6vw;
    margin-right: -29vw;
    justify-content: center;
    align-items: center;
  }

  .con03_dimg {
    width: 82vw;
  }

  .con03_simg {
    width: 76vw;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }

  /* 세로 "옥된장" 라벨 : 접시 우측에 겹쳐 (접시 기준 재배치) */
  .con03_label {
    left: auto;
    right: 61vw;
    top: auto;
    bottom: 8vw;
    width: 30vw;
  }

  /* ============================================================
     con04 — 점심·저녁 매출 비율 (2회전 구조)
     PC 가로 pill(좌 데이터/우 파이) → 모바일 세로 스택 pill.
     데이터(총매출/월평균) → 비율 라벨 → 파이차트 → 접시 악센트.
     ============================================================ */
  .con04_iner {
    padding-top: 15vw;
    padding-bottom: 10vw;
  }

  .con04_t1 {
    font-size: 4.6vw;
  }

  .con04_t2 {
    margin-top: 3vw;
    font-size: 7.5vw;
    line-height: 1.3;
  }

  .con04_box {
    flex-direction: column;
    align-items: center;
    width: 92vw;
    height: auto;
    padding-top: 10vw;
    padding-bottom: 3vw;
    padding-left: 0;
    border-radius: 7vw;
    margin-top: 6vw;
  }

  .con04_left {
    align-items: center;
    width: 100%;
  }

  .con04_data {
    margin-left: 0;
    font-size: 3.5vw;
    text-align: center;
  }

  .con04_badge1 {
    margin-top: 5vw;
    width: 19vw;
    height: 6vw;
  }

  .con04_badge2 {
    margin-top: 5vw;
    width: 26vw;
    height: 6vw;
  }

  .con04_btxt {
    font-size: 3.3vw;
  }

  .con04_amount {
    margin-left: 0;
    justify-content: center;
  }

  .con04_amount1,
  .con04_amount2 {
    margin-top: 3vw;
  }

  .con04_num {
    font-size: 7vw;
  }

  .con04_won {
    font-size: 3.6vw;
  }

  .con04_won1 {
    margin-left: 4.9vw;
  }

  .con04_won2 {
    margin-left: 4.5vw;
  }

  .con04_divider {
    margin-top: 4.5vw;
    margin-left: 0;
    width: 64vw;
  }

  /* 비율 라벨 → 파이 위로 (order로 데이터 아래·파이 위) */
  .con04_ratio {
    position: relative;
    order: 1;
    top: auto;
    right: auto;
    width: 52vw;
    margin: 8vw auto -15vw;
    z-index: 10;
  }

  .con04_ratio_txt {
    font-size: 5.1vw;
  }

  /* 파이차트 in-flow 중앙 */
  .con04_pie_img {
    position: relative;
    order: 2;
    right: -2vw;
    top: auto;
    width: 85.8vw;
    margin: 0 auto;
  }

  /* 고기접시 = 파이 우하단 악센트 (박스 기준 재배치) */
  .con04_dish_img {
    bottom: -17vw;
    right: -11vw;
    width: 70vw;
  }

  /* ============================================================
     con05 — 비수기 없는 성장세 / 19.5평의 기적 (성장 그래프 타임라인)
     PC 곡선 위 4노드 → 모바일: 그래프·곡선점·프레임 버리고, con05 를 flex-wrap
     row 로 전환 → iner(헤더) order:-1 맨위, 4마일스톤 in-flow 2×2 wrap, 설명 order:1.
     (absol 앵커 없음 → node width·gap 만으로 수정, padding-bottom 하드코딩 불필요)
     ============================================================ */
  .con05 {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 6vw;
    height: auto;
    padding-top: 20vw;
    padding-bottom: 15vw;
  }

  /* 1958 : 프레임 제거했으니 양쪽 선을 화면 끝까지(여백 0) */
  .con05_num {
    top: 4vw;
    left: 0;
    right: 0;
    gap: 5vw;
  }

  .con05_nimg2 {
    width: 18vw;
  }

  .con05_t1 {
    font-size: 4.6vw;
    text-align: center;
  }

  .con05_t2 {
    margin-top: 3vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  .con05_price {
    margin-top: 6vw;
    width: 74vw;
    height: auto;
    padding: 6vw 0;
    border-radius: 6vw;
  }

  .con05_price_top {
    gap: 4vw;
  }

  .con05_pt1 {
    font-size: 3.7vw;
  }

  .con05_pt2 {
    font-size: 3.3vw;
  }

  .con05_price_num {
    margin-top: 2vw;
  }

  .con05_pnum {
    font-size: 8vw;
  }

  .con05_pwon {
    margin-left: 3.5vw;
    font-size: 3.7vw;
  }

  /* ★ 그래프·곡선점·금테 프레임 제거 → 노이즈 없이 깔끔 (con05_num만 유지) */
  .con05_graph,
  .con05_dot,
  .con05_frame {
    display: none;
  }

  /* 헤더(타이틀+매출) 맨 위로 (DOM상 iner가 마지막이라 order로 끌어올림) */
  .con05_iner {
    order: -1;
  }

  /* 4 마일스톤 = absol 해제 → in-flow flex-wrap 2×2 (수정 용이: node width·gap만) */
  .con05_node {
    position: relative;
    order: 0;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 30vw;
  }

  .con05_nimg {
    margin-top: 0;
    width: 80%;
  }

  /* 설명 = 그리드 아래 (in-flow, 풀폭) */
  .con05_desc {
    position: relative;
    order: 1;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    font-size: 3.6vw;
    text-align: center;
    margin-top: 4vw;
  }

  /* ============================================================
     con06 — 전국 주요 지점 매출 성과 (지도 + 지점별 매출)
     PC 지도 위 7마커 + 리더선 라벨 → 모바일: 지도는 상단 비주얼,
     마커·리더선은 픽셀튜닝이라 숨김, 7개 지점매출(정보성)은
     지도 아래 2열 그리드로 표출. 설명 맨아래.
     ============================================================ */
  .con06 {
    padding-top: 5vw;
    padding-left: 3vw;
    padding-right: 3vw;
    padding-bottom: 5vw;
  }

  .con06_iner_box {
    height: auto;
    border-radius: 4vw;
  }

  /* iner_box_iner : 2열 wrap 컨테이너. gap 미사용 → 각 요소 margin 으로 간격.
     (desc 도 in-flow 라 padding-bottom 은 최소만) */
  .con06_iner_box_iner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    padding-top: 15vw;
    padding-bottom: 10vw;
  }

  .con06_head {
    position: static;
    top: auto;
  }

  .con06_t1 {
    font-size: 4.6vw;
  }

  .con06_t2 {
    margin-top: 3vw;
    font-size: 7.5vw;
    line-height: 1.3;
  }

  .con06_map {
    position: relative;
    margin-top: 2vw;
    top: auto;
    width: 60vw;
  }

  /* ★ 마커 복원 → 지도 위 PC 비율대로 재배치.
     지도 in-flow(컨테이너 기준 top 44vw / 좌 18% / 폭 63.8% / 높이 102.3vw) 실측 →
     각 마커 left%(컨테이너) = 18 + relX×63.8, top(vw) = 44 + relY×102.3.
     transform: translate(-50%,-50%) 로 좌표=마커 중심. (지도 이동 시 top값 재계산) */
  .con06_store_map {
    display: flex;
    width: 13vw;
    height: 13vw;
    transform: translate(-50%, -50%);
  }

  .con06_sm_ic {
    left: 32.6%;
    top: 63.6vw;
  }

  .con06_sm_gg {
    left: 44.7%;
    top: 72.1vw;
  }

  .con06_sm_cj {
    left: 44.7%;
    top: 84.7vw;
  }

  .con06_sm_dj {
    left: 50.2%;
    top: 94.3vw;
  }

  .con06_sm_gj {
    left: 41.2%;
    top: 110vw;
  }

  .con06_sm_bs {
    left: 71.9%;
    top: 106.4vw;
  }

  .con06_sm_gw {
    left: 62.9%;
    top: 68.9vw;
  }

  .con06_scope {
    width: 13vw;
    height: 13vw;
  }

  .con06_dot {
    width: 9vw;
    height: 9vw;
  }

  .con06_dtt {
    font-size: 2.7vw;
  }

  /* 리더선(PC 라벨→마커 연결선)은 숨김 유지 */
  .con06_store_price::after,
  .con06_sp_ic::before,
  .con06_sp_dj::before,
  .con06_sp_gj::before {
    display: none;
  }

  /* 지점 매출 라벨 → in-flow 2열 (gap 대신 margin: 상7vw 좌우2vw 로 간격) */
  .con06_store_price {
    position: relative;
    left: auto;
    top: auto;
    width: 40vw;
    margin: 7vw 1vw 0;
    align-items: center;
    row-gap: 1vw;
  }

  .con06_spn {
    font-size: 3.4vw;
  }

  .con06_spnum {
    font-size: 4.6vw;
  }

  .con06_spw,
  .con06_sp_dj .con06_spw,
  .con06_sp_gj .con06_spw,
  .con06_sp_gw .con06_spw {
    margin-left: 3vw;
    font-size: 3.3vw;
  }

  /* 설명 = in-flow(rltv) 풀폭, 위 요소와 margin 으로 간격 */
  .con06_desc {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin-top: 8vw;
    font-size: 3.5vw;
    line-height: 1.5;
    text-align: center;
  }

  /* ============================================================
     con07 — 투명하게 공개하는 영업이익 데이터 (도넛 + P&L 표)
     PC 가로 pill(좌 도넛/우 표) → 모바일 세로 스택: 배지 → 도넛(33.4%)
     → P&L 표(정보성, 풀폭). 음식은 장식이라 숨김.
     ============================================================ */
  .con07_iner {
    padding-top: 15vw;
    padding-bottom: 10vw;
  }

  .con07_t1 {
    font-size: 4.3vw;
    line-height: 1.4;
    text-align: center;
  }

  .con07_t2 {
    margin-top: 4vw;
    line-height: 1.3;
    font-size: 7.5vw;
  }

  .con07_boxwrap {
    width: 94vw;
    margin-top: 16vw;
  }

  .con07_box {
    flex-direction: column;
    width: 94vw;
    height: auto;
    border-radius: 6vw;
  }

  /* box_iner : 요소 in-flow 재배치 (position:relative → 33.4% 오버레이 기준).
     도넛·표는 흐름으로, 58vw 패딩 하드코딩 제거 */
  .con07_box_iner {
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    padding-top: 10vw;
    padding-bottom: 8vw;
  }

  /* 음식(도넛 뒤 장식) 숨김 */
  .con07_food_img {
    display: none;
  }

  /* 도넛 차트 : in-flow(rltv) 상단 중앙 */
  .con07_chart_img {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0 auto;
    width: 91vw;
  }

  /* 중앙 순수익 33.4% : 도넛 홀에 겹치는 오버레이(absol, box_iner 기준).
     도넛 flow-top 10 + 높이47.2/2 − 텍스트높이/2 ≈ top 28vw */
  .con07_center {
    left: auto;
    right: auto;
    top: 40vw;
    width: auto;
  }

  .con07_c_val {
    font-size: 11vw;
  }

  .con07_c_pct {
    font-size: 7vw;
    margin-left: 2.8vw;
    margin-right: -2.9vw;
  }

  /* P&L 표 : in-flow 풀폭 (도넛 아래, margin 으로 간격) */
  .con07_table {
    position: relative;
    left: auto;
    top: auto;
    width: 84vw;
    margin: 6vw auto 0;
  }

  .con07_trow {
    height: auto;
    min-height: 7.5vw;
  }

  .con07_thead,
  .con07_ttotal {
    height: auto;
    min-height: 8.5vw;
  }

  .con07_tc1,
  .con07_tc2,
  .con07_tc3 {
    font-size: 3.5vw;
  }

  .con07_tc1 {
    padding-left: 3.5vw;
  }

  .con07_tc3 {
    padding-right: 3.5vw;
  }

  .con07_thead span,
  .con07_ttotal span {
    font-size: 3.4vw;
  }

  /* 배지 "옥된장 SU점" : 박스 상단 걸침 */
  .con07_badge {
    top: -4vw;
    width: 39vw;
    height: 10vw;
  }

  .con07_badge_tx {
    font-size: 5.7vw;
  }

  /* ============================================================
     con08 — 익숙함에 가치를 더해 창업의 경쟁력 (POINT 4카드)
     PC 1행 4카드 → 모바일 2×2 그리드. 헤더 중앙, 카드 비율 유지.
     ============================================================ */
  .con08 {
    height: auto;
    padding-top: 12vw;
    padding-bottom: 12vw;
  }

  .con08_label {
    width: 44vw;
    border-width: 1vw;
  }

  .con08_label_txt {
    font-size: 4.6vw;
  }

  .con08_t1 {
    margin-top: 6vw;
    font-size: 4.6vw;
    text-align: center;
  }

  .con08_t2 {
    margin-top: 3vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  .con08_cards {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 3vw;
    margin-top: 8vw;
  }

  .con08_card {
    width: 44vw;
    height: 40vw;
    border-radius: 3vw;
  }

  .con08_card_iner {
    padding-top: 11vw;
  }

  .con08_card_tit {
    font-size: 3.8vw;
  }

  .con08_card_desc {
    margin-top: 1.1vw;
    font-size: 3.3vw;
  }

  .con08_bottom {
    margin-top: 8vw;
    font-size: 3.6vw;
  }

  /* ============================================================
     con09 — 어떻게 압도적 수익률을? (2단 밀고들어오기)
     PC 좌우 2블록(카키/화이트) → 모바일 세로 스택, 각 블록은
     음식 이미지 위 + 텍스트 아래(중앙). 전골/타이틀/문구 중앙.
     ============================================================ */
  .con09 {
    padding-bottom: 15vw;
  }

  .con09_pot_img {
    margin-top: -23vw;
    width: 95vw;
  }

  .con09_bracket_img {
    margin-top: -1vw;
    width: 32vw;
  }

  .con09_twrap {
    margin-top: 6vw;
  }

  .con09_t1 {
    font-size: 4.6vw;
    text-align: center;
  }

  .con09_t2 {
    margin-top: 3vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  /* 2col → 세로 스택 */
  .con09_2col {
    flex-direction: column;
    margin-top: 6vw;
    align-items: center;
    gap: 3vw;
  }

  .con09_lr {
    width: 90vw;
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: visible;
    padding: 6vw 0;
    background-color: #fff;
    border: none;
    border-radius: 3vw;
  }

  .con09_right {
    border-left: none;
  }

  /* 음식 이미지 : in-flow 상단 중앙 */
  .con09_limg {
    top: auto;
    left: auto;
    width: 64vw;
    display: none;
  }

  .con09_rimg {
    top: auto;
    right: auto;
    width: 58vw;
    display: none;
  }

  /* 텍스트 : in-flow 이미지 아래 중앙정렬 */
  .con09_ltwrap,
  .con09_rtwrap {
    position: relative;
    top: auto;
    left: auto;
    align-items: center;
    margin-top: 0;
    width: 100%;
  }

  .con09_num {
    font-size: 3.7vw;
    color: #b9aa6d;
  }

  .con09_stt {
    margin-top: 3vw;
    font-size: 4.6vw;
    text-align: center;
  }

  .con09_sbody {
    margin-top: 2.5vw;
    font-size: 3.5vw;
    text-align: center;
  }

  .con09_desc {
    margin-top: 8vw;
    font-size: 3.5vw;
    text-align: center;
  }

  .con09_final {
    margin-top: 4vw;
    font-size: 6.5vw;
  }

  /* ============================================================
     con10 — 조리 시스템 (1분→완성, 영상 seek)
     PC 영상 좌우 "1분/완성" 플랭킹 + 하단 STEP nav → 모바일: 영상 축소,
     양옆 "1분/완성" 유지, STEP nav 영상 하단 걸침.
     ============================================================ */
  .con10_iner {
    padding: 23vw 0 15vw;
  }

  .con10_band {
    left: auto;
    width: 240vw;
  }

  .con10_t1 {
    font-size: 4.6vw;
    text-align: center;
  }

  .con10_t2 {
    margin-top: 4vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  /* 비디오 : in-flow 16:9 풀폭 + 사각 라운드 (PC 타원 border-radius:50% → 4vw) */
  .con10_video {
    margin-top: 6vw;
    width: 95vw;
    aspect-ratio: 16 / 9;
    border-radius: 4vw;
  }

  .con10_num {
    font-size: 7vw;
  }

  /* 1분/완성 : 비디오 위 대각 오버레이 (좌상 / 우하) — 비디오 flow 기준 top */
  .con10_02 {
    left: 5vw;
    top: 60vw;
  }

  .con10_03 {
    left: auto;
    right: 6vw;
    top: 102vw;
  }

  /* STEP nav : absol → rltv flex row (세로 스택 참여), 버튼도 in-flow */
  .con10_nav_wrap {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin-top: 4vw;
    gap: 4vw;
    width: 100%;
  }

  .con10_nav {
    position: relative;
    left: auto;
    right: auto;
    width: auto;
    height: auto;
    padding: 3vw 6vw;
    border-radius: 3vw;
  }

  /* active : 크기변화 없이 색상만 (배경 흰색은 PC 규칙 유지) */
  .con10_nav.active {
    width: auto;
    height: auto;
  }

  .con10_nav_01,
  .con10_nav_03 {
    left: auto;
    right: auto;
  }

  .con10_step {
    margin-bottom: 1.2vw;
    font-size: 3.2vw;
  }

  .con10_nav.active .con10_step {
    margin-bottom: 1.2vw;
    font-size: 3.2vw;
  }

  .con10_name,
  .con10_nav.active .con10_name {
    font-size: 5vw;
    margin-top: 1vw;
  }

  .con10_desc {
    margin-top: 8vw;
    font-size: 3.5vw;
    text-align: center;
  }

  /* ============================================================
     con11 — 수익 구조 = 운영의 효율 (신호등3 + 뚝배기 + 곡선)
     흰 박스: 타이틀 → 신호등 3원(가운데 on) → 뚝배기(위 오버레이 텍스트)
     → 하단 곡선 arc. 박스 height auto, 뚝배기 in-flow로 높이 형성.
     ============================================================ */
  .con11 {
    padding-top: 5vw;
    padding-bottom: 15vw;
  }

  .con11_box {
    width: 94vw;
    height: auto;
    border-radius: 4vw;
  }

  .con11_box_iner {
    padding-top: 15vw;
    padding-bottom: 0;
  }

  .con11_t1 {
    font-size: 4.6vw;
    text-align: center;
  }

  .con11_t2 {
    margin-top: 2vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  /* 신호등 3원 (가로 스프레드, 가운데 raised) */
  .con11_signal {
    top: 45vw;
    width: 24vw;
    height: 24vw;
    box-shadow: 0 1.5vw 2vw rgba(0, 0, 0, 0.2);
  }

  .con11_signal_01 {
    left: 7vw;
  }

  .con11_signal_02 {
    left: auto;
  }

  .con11_signal_03 {
    left: auto;
    right: 7vw;
  }

  .con11_signal.on {
    transform: translateY(-10vw);
  }

  .con11_signal_txt {
    font-size: 3.8vw;
    line-height: 1.3;
    font-weight: 600;
    margin-top: 0.6vw;
  }

  /* 뚝배기 : in-flow 중앙 (박스 높이 형성) */
  .con11_pot_img {
    position: relative;
    top: auto;
    margin-top: 41vw;
    width: 121vw;
    margin-bottom: -24vw;
    order: 10;
  }

  /* 하단 곡선 arc (박스 하단, viewport 초과로 넓게) */
  .con11_cream_img {
    width: 118vw;
    display: none;
  }

  .con11_khaki_img {
    width: 102vw;
    display: none;
  }

  /* 뚝배기 위 오버레이 텍스트 (흰색 → 뚝배기 위에서만 보임) */
  .con11_btm {
    top: auto;
    bottom: 13vw;
  }

  .con11_b1 {
    font-size: 5.3vw;
  }

  .con11_b2 {
    margin-top: 3vw;
    font-size: 3.6vw;
    text-align: center;
  }

  /* ============================================================
     con12 — 옥된장은 점주에게 (약속 3카드 + 지원 5아이템)
     헤더 중앙, 약속 카드 3개 세로 스택, 지원 5시스템은 라벨 가독성
     위해 3+2 그리드(둥근박스)로 wrap, 관통선 숨김.
     ============================================================ */
  .con12_iner {
    padding-bottom: 0;
  }

  .con12_bracket {
    width: 19vw;
  }

  .con12_t1 {
    margin-top: 5vw;
    font-size: 4.6vw;
    text-align: center;
  }

  .con12_t2 {
    margin-top: 3vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  .con12_sub {
    margin-top: 4vw;
    font-size: 3.5vw;
    text-align: center;
  }

  .con12_cards {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    margin-top: 6vw;
  }

  .con12_card {
    width: 45vw;
    height: 42.5vw;
    padding: 2vw 2vw 0;
    border-radius: 4vw;
  }

  .con12_cimg {
    width: 100%;
    border-radius: 2.5vw;
  }

  .con12_ctit {
    margin-top: 3.7vw;
    font-size: 3.7vw;
    letter-spacing: -0.5vw;
    white-space: nowrap;
    text-align: center;
  }

  .con12_cdesc {
    margin-top: 2vw;
    font-size: 3.3vw;
  }

  /* 지원 5시스템 : PC 가로 스타디움 완전 탈피 → 모바일 전용 2열(2+2+1) 큰 원.
     흰 원이 도드라지게 다크 라운드박스, 원 크게(38vw)+여백 넉넉. 활성 초록링 순환(JS). */
  .con12_pill {
    width: 100%;
    height: auto;
    border-radius: 0;
    margin-top: 8vw;
    padding: 6vw 0 8vw;
    background: rgba(0, 0, 0, 0.4);
  }

  .con12_track {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 4vw;
    height: auto;
  }

  .con12_line {
    display: none;
  }

  .con12_item {
    width: 27.9vw;
    margin-bottom: 0;
  }

  .con12_iimg {
    width: 100%;
  }

  .con12_ring {
    width: 34vw;
    border-width: 4vw;
    top: -0.5vw;
  }

  /* ============================================================
     con13 — 한 끼 식사부터 한 상 술상까지 (메뉴 탭 Swiper)
     크림 박스 56vw→94vw. 스와이퍼는 slide.js 브레이크포인트(0:2열×2행)로
     이미 모바일 그리드 처리 → CSS는 박스/카드/탭 사이즈만.
     ============================================================ */
  .con13_box {
    width: 100vw;
  }

  .con13_box_iner {
    padding-top: 10vw;
    padding-bottom: 10vw;
  }

  /* 1958 엠블럼 : con13_year = con20_year 공통 (gap 3vw / img 20vw) */
  .con13_year,
  .con20_year {
    gap: 3vw;
  }

  .con13_year_img,
  .con20_yimg {
    width: 20vw;
  }

  .con20_year {
    display: none;
  }

  .con13_title {
    margin-top: 6vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  .con13_tabs {
    gap: 2vw;
    margin-top: 7vw;
  }

  .con13_tab {
    height: 9vw;
    padding: 0 4vw;
    font-size: 3.8vw;
  }

  .con13_tabline {
    width: 2vw;
    display: none;
  }

  .con13_body {
    margin-top: 6vw;
  }

  .con13_swiper {
    width: 84vw;
    height: 92vw;
  }

  .con13_sitem {
    width: 38vw;
    height: 42vw;
    padding-top: 4vw;
    border-radius: 3vw;
  }

  .con13_pimg {
    width: 26vw;
    height: 26vw;
  }

  .con13_stt {
    margin-top: 3vw;
    font-size: 3.5vw;
  }

  .con13_btn_wrap {
    width: 94vw;
  }

  .con13_btn_wrap .swiper_btn {
    width: 11vw;
    height: 11vw;
  }

  .con13_btn_wrap .swiper_btn img {
    width: 4vw;
  }

  .con13_botline {
    margin-top: 6vw;
    display: none;
  }

  /* ============================================================
     con14 — 전통주 하나 시켰을뿐인데 (마퀴 히어로)
     상/하단 초록bar 유지. 히어로: 금색 아치+옹기병(상단 데코) → 타이틀
     → 전통주 마퀴(가로 스크롤 밴드). 흐린 병 실루엣은 숨김(declutter).
     ============================================================ */
  .con14_topbar,
  .con20_topbar {
    height: 12vw;
  }

  .con14_top_img,
  .con20_top_img {
    width: 92vw;
  }

  .con14_hero {
    height: auto;
    padding-top: 33vw;
    padding-bottom: 8vw;
  }

  /* 흐린 병 실루엣 = 장식, 모바일 노이즈 → 숨김 */
  .con14_ghost_img {
    display: none;
  }

  .con14_arch_img {
    width: 88vw;
    top: 6vw;
  }

  .con14_pot_img {
    width: 8vw;
    top: 17vw;
  }

  .con14_tt {
    order: 1;
    margin-top: 0;
  }

  .con14_t1 {
    font-size: 4.6vw;
    text-align: center;
  }

  .con14_t2 {
    margin-top: 1vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  .con14_t3 {
    margin-top: 2.5vw;
    font-size: 3.5vw;
    text-align: center;
  }

  /* 전통주 마퀴 : in-flow(타이틀 아래), 밴드 높이 확보 위해 폭 확대 */
  .con14_marquee {
    position: relative;
    order: 2;
    top: auto;
    margin-top: 7vw;
  }

  /* ★ 병 크기 = image_sd 폭(× 332/1872). wrap 이 display:flex 라 image_sd 가
     flex-shrink:1 로 100vw 까지 강제 축소돼 폭이 안 먹었음 → flex-shrink:0 으로 해제.
     이제 width 만 키우면 병이 그대로 커짐 (더 키우려면 width ↑). */
  .con14_marquee .image_sd {
    flex-shrink: 0;
    width: 280vw;
    animation-duration: 11s;
  }

  .con14_botbar {
    height: 12vw;
  }

  .con14_bottxt {
    font-size: 3.6vw;
  }

  /* ============================================================
     con15 — 직원마저 점주가 되는 곳, 성공의 이름 옥된장
     PC 좌(매장건물)·우(OPEN 카드그리드=1장 머지이미지) → 모바일 세로 스택.
     카드 텍스트는 정보성 → 크게 표출.
     ============================================================ */
  .con15 {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }

  .con15_glow {
    top: 2vw;
    width: 120vw;
  }

  .con15_t1 {
    font-size: 4.6vw;
    text-align: center;
  }

  .con15_t2 {
    margin-top: 2vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  .con15_sub {
    margin-top: 3vw;
    font-size: 3.5vw;
    text-align: center;
  }

  .con15_body {
    flex-direction: column;
    align-items: center;
    height: auto;
    margin-top: 6vw;
  }

  .con15_store {
    position: relative;
    left: 7.9vw;
    top: auto;
    width: 97vw;
  }

  .con15_cards {
    position: relative;
    left: auto;
    top: auto;
    width: 86vw;
    margin-top: 5vw;
  }

  /* ============================================================
     con16 — 점주님들의 솔직한 인터뷰 (그린패널 + 다크 영상패널)
     PC 좌우 2패널 → 모바일 세로 스택: 그린 헤더(뱃지/타이틀/화살표)
     위, 다크 영상(스와이퍼 1장 fade)+지점탭 아래. 간판 숨김.
     ============================================================ */
  .con16 {
    flex-direction: column;
  }

  .con16_left {
    width: 100%;
  }

  .con16_liner {
    padding: 15vw 0 6vw;
    align-items: center;
  }

  .con16_badge {
    width: 54vw;
  }

  .con16_badge_tx {
    font-size: 5.1vw;
  }

  .con16_tt {
    margin-top: 6vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
    transform-origin: center;
  }

  .con16_nav {
    margin-top: 6vw;
    justify-content: center;
    gap: 5vw;
  }

  .con16_nav .swiper_btn {
    width: 11vw;
    height: 11vw;
  }

  .con16_nav .swiper_btn img {
    width: 4vw;
  }

  .con16_right {
    width: 100%;
    padding: 7vw 0 15vw;
  }

  .con16_glow_img {
    width: 130%;
  }

  .con16_swiper {
    width: 88vw;
  }

  /* ★ 공통 영상 재생 버튼 (con16_play = con18_play 동일 구조) — 모바일 크게(터치타깃 ↑).
     PC 66--px(≈3.5vw) → 15vw 원 + 안쪽 흰 삼각형(::after) 비례 확대. 두 섹션 한 규칙으로 통일. */
  .con16_play,
  .con18_play {
    width: 15vw;
    height: 15vw;
  }

  .con16_play::after,
  .con18_play::after {
    margin-left: 1vw;
    border-width: 2.3vw 0 2.3vw 3.9vw;
  }

  .con16_vlabel {
    height: 10vw;
  }

  .con16_vlabel_tx {
    font-size: 3.4vw;
  }

  .con16_tabs {
    width: 88vw;
    flex-wrap: wrap;
    gap: 2vw;
    margin-top: 5vw;
  }

  .con16_tab {
    height: 9vw;
    padding: 0 5vw;
    font-size: 3.5vw;
    border-radius: 5vw;
  }

  /* 우측 세로 간판 = 데코, 스택 레이아웃서 부자연 → 숨김 */
  .con16_sign_img {
    display: none;
  }

  /* ============================================================
     con17 — 상생의 자부심 우수 매장 (원형 뱃지 + 카드 슬라이더)
     원형 뱃지 확대, 배경 相生 한자는 원과 충돌 → 숨김. 매장 카드는
     centeredSlides(auto)라 CSS 카드폭만 모바일 조정.
     ============================================================ */
  .con17 {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* 섹션 리듬 : iner 상하 15vw */
  .con17_iner {
    padding-top: 7vw;
    padding-bottom: 15vw;
  }

  /* ★ hero 자식(원/한자/라인)이 전부 absol → height:auto 면 0 이 돼 슬라이더가
     원 위로 겹쳐 올라옴. 데스크톱처럼 원 크기만큼 height 주고, margin 으로 카드 상단을
     원 하단에 살짝 물림(데스크톱 -25% 패턴). */
  .con17_hero {
    height: 62vw;
    margin-bottom: -13vw;
  }

  /* 배경 相 / 生 한자 = 원 양옆에 배치 (DOM상 원 뒤 → 원과 겹치는 안쪽은 가려지고
     바깥쪽만 노출되어 원을 좌우로 감싸는 상생 데코). 화면 끝에 살짝 걸침. */
  .con17_han_l,
  .con17_han_r {
    top: 15vw;
    width: 18vw;
  }

  .con17_han_l {
    left: 8vw;
  }

  .con17_han_r {
    left: auto;
    right: 8vw;
  }

  .con17_circle {
    width: 62vw;
  }

  .con17_badge {
    top: 13vw;
  }

  .con17_bracket {
    width: 16vw;
  }

  .con17_t1 {
    margin-top: 4vw;
    font-size: 4.6vw;
    text-align: center;
  }

  .con17_t2 {
    margin-top: 1.5vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  .con17_swiper .swiper-slide {
    width: 42vw;
  }

  .con17_sitem {
    width: 40vw;
  }

  /* ============================================================
     con18 — 미디어가 주목하는 1등 브랜드 파워 (영상 슬라이더 + 로고)
     헤더 중앙, centeredSlides 영상(액티브 크게), 제목/설명 바,
     방송 로고 7개 페이지네이션. 카드폭 CSS만 조정.
     ============================================================ */
  .con18_iner {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }

  .con18_t1 {
    font-size: 4.6vw;
    text-align: center;
  }

  .con18_t2 {
    margin-top: 2vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  .con18_sub {
    margin-top: 3vw;
    font-size: 3.5vw;
    line-height: 1.4;
    text-align: center;
  }

  .con18_slidebox {
    margin-top: 7vw;
  }

  .con18_swiper .swiper-slide {
    width: 90vw;
  }

  .con18_vfrm {
    width: 100%;
  }

  .con18_btn_wrap {
    top: 66vw;
    width: 100%;
    justify-content: center;
    gap: 5vw;
  }

  .con18_btn_wrap .swiper_btn {
    width: 11vw;
    height: 11vw;
  }

  .con18_btn_wrap .swiper_btn img {
    width: 4vw;
  }

  .con18_bar {
    width: 90vw;
    height: 11vw;
    padding: 0 4vw 0 3vw;
  }

  .con18_bar_tit {
    height: 7vw;
    padding: 0 3vw;
    border-radius: 3.5vw;
    font-size: 3.2vw;
  }

  .con18_bar_desc {
    font-size: 3.1vw;
  }

  /* 방송 로고 페이지네이션 : 7개 1행이면 작음 → wrap 2행(4+3)으로 큼직하게.
     관통선은 2행서 어색 → 숨김 */
  .con18_nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2vw;
    margin-top: 19.3vw;
  }

  .con18_line {
    display: none;
  }

  .con18_logo {
    width: 28vw;
  }

  /* ============================================================
     con19 — SNS 속 옥된장 이야기 (네이버 리뷰 + 폰 + 인스타)
     PC 폰 중심 좌우 배치 → 모바일 세로 스택(flex order):
     아이콘+타이틀 → 폰(인스타 피드) → @okdj+설명 → 네이버 리뷰 마퀴.
     우측 인스타 슬라이드는 현재 검은 플레이스홀더(연동 대기) → 숨김.
     ============================================================ */
  .con19 {
    padding-bottom: 0;
  }

  .con19_box {
    width: 100vw;
    border-radius: 0;
  }

  .con19_box_iner {
    padding-top: 10vw;
    padding-bottom: 10vw;
  }

  .con19_ic {
    position: relative;
    order: 0;
    top: auto;
    left: 2.4vw;
    width: 14vw;
    margin: 0 auto;
  }

  .con19_title {
    position: relative;
    order: 1;
    left: auto;
    top: auto;
    align-items: center;
    margin-top: -1vw;
  }

  .con19_t1,
  .con19_t2 {
    font-size: 7.5vw;
    line-height: 1.2;
    text-align: center;
    transform-origin: center;
  }

  .con19_phone {
    order: 2;
    width: 40vw;
    margin: 6vw auto 0;
  }

  .con19_okdj {
    position: relative;
    order: 3;
    left: auto;
    top: auto;
    margin-top: -1vw;
    font-size: 7vw;
    text-align: center;
    transform-origin: center;
    z-index: 100;
  }

  .con19_desc {
    position: relative;
    order: 4;
    left: auto;
    top: auto;
    margin-top: 4vw;
    font-size: 3.9vw;
    text-align: center;
  }

  /* 네이버 리뷰 마퀴 : in-flow 맨 아래 (order 5), 카드 가독폭 */
  .con19_lslide {
    position: relative;
    order: 6;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 4vw;
  }

  .con19_lswiper .swiper-slide {
    width: 48vw;
  }

  .con19_lcard {
    width: 45vw;
    border-radius: 3vw;
  }

  .con19_lbadge {
    top: 3vw;
    right: 3vw;
    width: 6vw;
  }

  /* 인스타 피드 마퀴 : absol(상단 우측 튐) → in-flow 정리. order 5 = 네이버(6)보다 먼저.
     아이콘/타이틀/폰/계정 → 인스타 피드 → 네이버 리뷰 순. */
  .con19_rslide {
    position: relative;
    order: 5;
    left: auto;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 6vw;
  }

  .con19_rswiper .swiper-slide {
    width: 48vw;
  }

  .con19_rcard {
    width: 45vw;
    border-radius: 3vw;
  }

  .con19_rbadge {
    top: 3vw;
    right: 3vw;
    width: 6vw;
  }

  /* ============================================================
     con20 — 창업비용 투명 공개 테이블
     PC 반폭 3열 표(내용/비용/비고) → 모바일 풀폭(92vw). 폰트 상향,
     비용셀은 세로 스택(원가+할인뱃지 / 최종가), 화살표 숨김, 이름/비고 wrap.
     ============================================================ */



  /* 프레임(금색 좌우 보더) 제거 — 모바일 카드형이라 불필요 */
  .con20_frame {
    width: 100vw;
    padding-top: 15vw;
    margin-bottom: 15vw;
    border-left: none;
    border-right: none;
  }

  .con20_badge {
    width: 46vw;
  }

  .con20_badge_tx {
    font-size: 4.8vw;
  }

  .con20_title {
    margin-top: 5vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  .con20_sub {
    width: 92vw;
    margin-top: 6vw;
    font-size: 3.5vw;
  }

  /* ★ PC 3열 표 → 모바일 "항목별 세로 카드". 좁게 몰린 표를 벗어나
     각 항목(이름 → 비용 → 비고)을 넉넉히 한눈에. PC는 그대로.
     규칙상 새 배경/보더 금지 → 기존 행 border-bottom(구분선) + 여유 패딩으로 카드 분리. */
  .con20_table {
    width: 92vw;
    margin-top: 2vw;
  }

  /* 열 헤더(내용/비용/비고) = 카드형엔 불필요 → 숨김 */
  .con20_thead {
    display: none;
  }

  /* 각 데이터행 = 세로 카드 (이름 → 비용 → 비고) */
  .con20_trow {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 5vw 3vw;
  }

  .con20_cell {
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .con20_trow .con20_cell {
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
  }

  /* 항목명 = 카드 제목 (크게·굵게) */
  .con20_trow .col_name p {
    font-size: 5vw;
  }

  /* 비용 = [원가 취소선 + 할인뱃지] + 최종가(크게) 한 줄 */
  .con20_trow .col_cost {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1vw 3vw;
    margin-top: 2.5vw;
  }

  .con20_cost {
    flex-direction: row;
    align-items: baseline;
    gap: 2vw;
    margin-right: 0;
  }

  .cost_org {
    font-size: 3.5vw;
  }

  .cost_badge {
    height: 5.3vw;
    padding: 0 3vw;
    font-size: 3.2vw;
  }

  /* 화살표 숨김 (취소선+최종가로 전환 전달) */
  .cost_arrow {
    display: none;
  }

  .cost_final {
    margin: 0;
    font-size: 4.7vw;
  }

  /* 비고 = 회색 보조설명 (좌측정렬) */
  .con20_trow .col_note {
    margin-top: 2.5vw;
  }

  .con20_trow .col_note p {
    font-size: 3.5vw;
    text-align: left;
    line-height: 1.4;
  }

  /* 합계 = 초록 강조 바 유지 (좌 합계 / 우 총액), 크게 */
  .con20_sum {
    min-height: 13vw;
    padding: 0 5vw;
    justify-content: space-between;
  }

  .con20_sum .con20_cell {
    width: auto;
    height: auto;
    min-height: 0;
  }

  .con20_sum .col_note {
    display: none;
  }

  .col_name,
  .con20_cell {
    border-right: none;
  }

  .con20_sum .col_name p {
    font-size: 4.3vw;
    letter-spacing: 0.5vw;
  }

  .con20_sum .sum_total {
    font-size: 5vw;
  }

  .con20_notice {
    width: 90vw;
    margin-top: 3vw;
  }

  /* 안내문 : 3vw + 행잉 인덴트(줄바뀜 시 이어지는 줄이 "- " 뒤 텍스트에 정렬) */
  .con20_notice p {
    font-size: 3vw;
    line-height: 1.6;
    word-break: keep-all;
    padding-left: 4vw;
    text-indent: -4vw;
  }

  .con20_year {
    margin-top: 10vw;
  }

  /* con20_yimg 크기는 공통 규칙(.con13_year_img, .con20_yimg = 20vw)에서 통일 */

  /* ============================================================
     con21 — 옥된장 가맹 문의 (문의 폼)
     PC 한 행 3필드 → 모바일 1필드/행 풀폭 스택(터치 높이 확보).
     장식 문(門)은 폼 침범 → 숨김. 헤더·제출 중앙.
     ============================================================ */
  .con21 {
    padding-top: 25vw;
    padding-bottom: 15vw;
  }

  .con21_roof_img {
    width: 300vw;
    left: auto;
  }

  /* 좌·우 문 = 장식 프레이밍, 좁은 폭서 폼 침범 → 숨김 */
  .con21_ldoor_img,
  .con21_rdoor_img {
    display: none;
  }

  .con21_bracket_img {
    width: 28vw;
  }

  .con21_t1 {
    margin-top: 6vw;
    font-size: 4.6vw;
    text-align: center;
  }

  .con21_t2 {
    margin-top: 2vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  .con21_card {
    width: 92vw;
    margin-top: 6vw;
    padding: 8vw 6vw;
  }

  /* 행 → 세로 스택, 필드 풀폭 */
  .con21_row {
    flex-direction: column;
  }

  .con21_row+.con21_row {
    margin-top: 5vw;
  }

  .con21_field {
    width: 100%;
    height: 12vw;
    padding-left: 2vw;
  }

  .con21_field+.con21_field {
    margin-top: 5vw;
  }

  .con21_field_full {
    width: 100%;
    margin-top: 5vw;
  }

  .con21_lb {
    margin-right: 4vw;
    font-size: 3.5vw;
  }

  .con21_inp {
    font-size: 3.5vw;
  }

  .con21_sel_val {
    font-size: 3.5vw;
  }

  .con21_sel_arw {
    width: 4vw;
  }

  .con21_sel_list {
    max-height: 60vw;
    margin-top: 2vw;
    padding: 2vw;
    border-radius: 3vw;
  }

  .con21_sel_opt {
    height: 10vw;
    border-radius: 2vw;
    font-size: 3.6vw;
  }

  .con21_storefield {
    column-gap: 6vw;
  }

  .con21_store_lb {
    font-size: 3.5vw;
  }

  .con21_toggle {
    column-gap: 1.5vw;
    margin-bottom: 2vw;
  }

  .con21_tg {
    width: 22vw;
    height: 9vw;
    font-size: 3.5vw;
  }

  .con21_agree_wrap {
    margin-top: 6vw;
  }

  .con21_radio {
    width: 5.6vw;
    height: 5.6vw;
  }

  .con21_agree_chk:checked+.con21_radio::after {
    width: 3vw;
    height: 3vw;
  }

  .con21_agree {
    gap: 2vw;
  }

  .con21_agree_txt {
    font-size: 3.5vw;
    letter-spacing: 0;
  }

  .con21_submit {
    width: 44vw;
    height: 13vw;
    margin-top: 6vw;
  }

  .con21_submit_txt {
    font-size: 4.2vw;
  }

  /* ============================================================
     con22 — 전국 매장 안내 (지역필터 + 매장리스트 + 카카오 지도)
     PC 좌(패널)·우(지도) → 모바일 세로 스택: 필터+리스트(스크롤) 위,
     지도 아래(고정 높이). 상세 팝업은 모바일 카드로.
     ============================================================ */
  .con22 {
    padding-top: 15vw;
  }

  .con22_head {
    margin-bottom: 6vw;
  }

  .con22_t1 {
    font-size: 4.6vw;
    text-align: center;
  }

  .con22_t2 {
    margin-top: 1.5vw;
    font-size: 7.5vw;
    line-height: 1.3;
    text-align: center;
  }

  .con22_map {
    width: 94vw;
  }

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

  .con22_left {
    width: 100%;
    padding: 4vw 4vw 5vw;
    border-radius: 0 0 4vw 4vw;
  }

  .con22_selects {
    gap: 2vw;
  }

  .con22_sel {
    height: 12vw;
    border-radius: 2vw;
  }

  .con22_sel select {
    padding: 0 8vw 0 4vw;
    font-size: 3.5vw;
  }

  .con22_sel::after {
    right: 4vw;
    width: 2.4vw;
    height: 2.4vw;
  }

  .con22_input {
    margin-top: 2vw;
    padding: 0 4vw;
    height: 12vw;
    border-radius: 2vw;
  }

  .con22_input input {
    font-size: 3.5vw;
  }

  .map_search {
    margin-left: 2vw;
    width: 8vw;
  }

  .con22_list {
    margin-top: 4vw;
    padding: 0 4vw;
    border-radius: 2vw;
    max-height: 92vw;
  }

  .store {
    padding: 5vw 3vw 6vw;
  }

  .con22_store_name {
    font-size: 4vw;
  }

  .con22_store_addr {
    margin-top: 2vw;
    font-size: 3.6vw;
  }

  .con22_store_tel {
    margin-top: 1.5vw;
    font-size: 3.5vw;
  }

  .map_link {
    right: 3vw;
    bottom: 3vw;
    width: 28vw;
  }

  .noshop {
    font-size: 3.3vw;
  }

  /* 카카오 지도 슬롯 : 풀폭 고정 높이 (연동 전 파랑 placeholder) */
  .con22_right {
    width: 100%;
    height: 72vw;
    order: -1;
    border-radius: 4vw 4vw 0 0;
  }

  /* 상세 팝업 → 모바일 세로 카드 */
  .popup {
    flex-direction: column;
    width: 90vw;
    height: auto;
    border-radius: 4vw;
  }

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

  .popup_right {
    padding: 6vw;
  }

  .popup_close {
    top: 3vw;
    right: 4vw;
    width: 8vw;
    height: 8vw;
    font-size: 7vw;
  }

  .popup_right_2nd {
    font-size: 5vw;
  }

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

  .popup_right_3rd,
  .popup_right_4th,
  .popup_right_5th {
    margin-top: 2vw;
    font-size: 3.4vw;
  }

  .popup_right_6th_left {
    width: 30vw;
    margin-top: 4vw;
  }

  /* ============================================================
     con23 — 임대료·인건비·유행 → 옥된장 (메시지 + 지역 지도)
     그린 박스 세로 스택: 메시지 스와이퍼(3해답) → 지도(지역배지) →
     정답문구 → 로고. 좌 세로선·음식 데코 숨김, 메시지 중앙정렬.
     배지는 지도 % 기준이라 지도만 키우면 함께 스케일(텍스트만 vw).
     ============================================================ */
  .con23 {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }

  .con23_box {
    width: 94vw;
    height: auto;
    border-width: 2vw;
    box-sizing: border-box;
  }

  .con23_box_iner {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 7vw 0 10vw;
  }

  /* 좌 세로선·음식 = 데코, 세로 스택서 불필요 → 숨김 */
  .con23_vline,
  .con23_food {
    display: none;
  }

  /* 메시지 세로 스와이퍼 : 모바일은 1해답만(slidesPerView:1) → 높이 축소, in-flow 중앙 */
  .con23_tbox {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 26vw;
  }

  .con23_tswiper .swiper-slide {
    align-items: center;
  }

  .con23_tset {
    align-items: center;
  }

  /* esco(scale 1.15·transform-origin:left) 는 왼쪽기준 확대라 우측으로 밀려 잘리고 센터가 틀어짐
     → 모바일은 확대 해제해서 텍스트 중앙에 정확히·좌우 안잘리게 */
  .con23_tsub,
  .con23_tmain {
    transform-origin: center;
  }

  .con23_tsub {
    font-size: 4.6vw;
    text-align: center;
  }

  .con23_tmw {
    margin-top: 2vw;
    padding-right: 0;
    justify-content: center;
  }

  .con23_tmain {
    font-size: 6.8vw;
    line-height: 1.3;
    text-align: center;
  }

  /* 지도(지역 배지 포함) : in-flow 중앙, 배지는 % 스케일 유지
     → 지도 확대(80→90vw)로 배지·라벨 함께 키워 지역명 가독성 확보 */
  .con23_map {
    position: relative;
    left: auto;
    top: auto;
    width: 80vw;
    margin-top: 0vw;
    /* PNG 아트워크(반도+배지)가 우측으로 쏠려 있음 → 폭 살짝 줄이고 좌로 당겨 시각 중앙 */
    transform: translateX(-5vw);
  }

  .con23_bnm {
    font-size: 2.9vw;
  }

  .con23_bnum {
    margin-top: 0.3vw;
    font-size: 3.1vw;
  }

  /* 정답 문구 : in-flow 중앙 */
  .con23_answer {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 8vw;
    font-size: 3.6vw;
    line-height: 1.5;
    text-align: center;
  }

  /* 하단 로고 : 박스 하단 걸침 */
  .con23_logo {
    width: 46vw;
    display: none;
  }

  .con23_logo_mark {
    width: 23vw;
  }


  .con23_ground {
    display: none;
  }

  .con23_badge {
    padding-top: 0.9vw;
    box-shadow: 0 2vw 2vw rgba(0, 0, 0, 0.4);
  }


}