@media screen and (max-width:599px) {
  /* CON14: 모바일 = 사진 한 장 슬라이드 + 썸네일 페이지네이션 + 좌우 화살표.
     PC 는 「사진 왼쪽 + 원형 4칸 레일 오른쪽」 가로 배치다. 모바일 폭에선 원 4개가 82vw 를
     꽉 채워 좌우 여백이 0 이고, 등록된 7개 중 4개만 보이며(나머지 클리핑), 원 안 메뉴명
     (#b7cfd8)이 파란 물결 위에 얹혀 거의 안 읽혔다. → 사진을 주인공으로 키우고 썸네일은
     현재 위치만 알려주는 페이지네이션으로 내린다. 메뉴명은 사진 위 .con14_label 이 이미
     보여주므로 원 안에서는 뺀다(button aria-label 로 남아 스크린리더는 그대로 읽는다). */
  .con14 { padding-top: 0vw; padding-bottom: 8vw; }
  .con14_surface { width: 92%; padding-bottom: 8vw; border-radius: 5vw; }
  .con14_head { max-width: 94%; text-align: center; }
  .con14_word { font-size: 19vw; line-height: 20vw; }
  .con14_lead { font-size: 3.8vw; line-height: 6vw; }
  .con14_title { font-size: 6.4vw; line-height: 9vw; }
  .con14_menu { width: 100%; flex-direction: column; padding-left: 0; margin-top: 4vw; gap: 4.5vw; }
  /* 사진 — 화살표가 좌우로 3vw 씩만 겹치므로 74 + 8×2 = 90vw 로 surface(92vw) 안에 들어온다 */
  .con14_feature { width: 74vw; height: 62vw; }
  .con14_feature_img { width: calc(var(--menu-feature-width) * 74vw / 566); }
  .con14_star { left: 0vw; font-size: 12vw; line-height: 13vw; }
  .con14_label { font-size: 4vw; line-height: 6vw; padding: 1vw 2.5vw; bottom: 4vw; }
  /* 화살표 — PC 에는 없는 모바일 전용(.mobile-pc). 부모 .con14_feature 가 place-items:center
     라 top 은 안 준다(static position 이 세로 중앙) */
  .con14_arr {
    position: absolute;
    width: 11vw;
    height: 11vw;
    border: 1px solid var(--color-point);
    border-radius: 50%;
    background-color: #ffffff;
  }
  .con14_prev { left: -8vw; }
  .con14_next { right: -8vw; }
  .con14_arr_pic { width: 3vw; aspect-ratio: 9 / 16; }
  /* 레일 → 페이지네이션. PC 의 4칸 클리핑 창을 풀어 등록된 메뉴를 전부 보여준다 */
  .con14_rail { width: 100%; margin-top: 0; align-self: auto; overflow: visible; cursor: auto; }
  .con14_list { width: 100%; flex-wrap: wrap; justify-content: center; gap: 1.6vw; }
  .con14_select { width: 11vw; height: 11vw; transition: border-color 0.6s cubic-bezier(0.33, 0, 0.2, 1), background-color 0.6s cubic-bezier(0.33, 0, 0.2, 1); }
  .con14_thumb_stage { width: 7.4vw; height: 6.9vw; }
  .con14_thumb_img { width: calc(var(--menu-thumb-width) * 6.9vw / 145); transition: opacity 0.6s cubic-bezier(0.33, 0, 0.2, 1); }
  .con14_name { display: none; }
  .con14_item.is-active .con14_select { border-color: var(--color-point); background-color: var(--color-pale-blue); }
  .con14_item.is-active .con14_thumb_img { opacity: 1; }
  .con14_wave { top: auto; bottom: 0; width: 600vw; left: -60%; }
  .con14_wave_img { width: 300vw; }
  .con14_empty { font-size: 4vw; }
  /* CON19: 제목 → 검색 → 지도 → 매장 목록 */
  .con19 { padding: 8vw 0 15vw; background: var(--color-pale-blue); }
  .con19_heading { width: 92vw; padding-right: 0; }
  .con19_en { font-size: 12vw; line-height: 1; margin-bottom: 3vw; }
  .con19_title { margin-top: -2vw; font-size: 7vw; line-height: 1.2; }
  .con19_search {
    width: 92vw;
    height: 13vw;
    margin-top: 6vw;
    border-radius: 3vw;
  }
  .con19_search_input { font-size: 3.8vw; line-height: 1.4; padding-left: 4vw; }
  .con19_search_btn { width: 6vw; height: 6vw; margin-right: 4vw; }
  .con19_frame { width: 92vw; flex-direction: column; margin-top: 4vw; }
  /* PC 비율(1230:665)을 그대로 쓰면 92vw 폭에서 높이가 49.7vw(186px)뿐이라 마커 위치를 읽기 어렵다.
     PC 는 프레임 폭의 64%를 지도가 쓰는 주 콘텐츠이므로 모바일에서도 세로를 확보한다. */
  .con19_map { width: 100%; height: 60vw; order: 0; }
  /* PC 는 지도 오른쪽에 665px 고정 높이로 붙어 자체 스크롤한다. 모바일에서 height:auto 로 풀면
     등록 매장 수만큼 섹션이 끝없이 늘어난다 → 높이를 고정하고 목록만 스크롤 (PC 와 같은 동작).
     overscroll-behavior: contain 은 PC 규칙 그대로 상속 — 끝까지 내려도 페이지가 같이 밀리지 않는다. */
  .con19_list { width: 100%; height: 90vw; overflow-y: auto; order: 1; }
  .con19_list::-webkit-scrollbar { width: 1.6vw; }
  .con19_list::-webkit-scrollbar-track { margin-block: 3vw; }
  .con19_list::-webkit-scrollbar-thumb { border-width: 0.5vw; border-radius: 1.6vw; }
  .con19_store:nth-child(n) { padding: 5vw 6vw; }
  .con19_store_name { font-size: 4.5vw; line-height: 1.4; }
  .con19_store_info { font-size: 3.5vw; line-height: 1.6; }
  .con19_store_actions { height: 9vw; margin-top: 3vw; }
  .con19_naver { width: 32vw; height: 7.5vw; gap: calc(32vw * 7 / 135); }
  .con19_naver_icon { width: calc(100% * 14 / 135); }
  .con19_naver_text { font-size: 3.3vw; line-height: 1.2; }
  .con19_more { width: 9vw; height: 9vw; right: 6vw; bottom: 5vw; }
  .con19_more_icon { width: 37.5%; }
  .con19_noshop { padding: 6vw; font-size: 3.5vw; }
  .con19_dialog { width: 92vw; min-height: 0; flex-direction: column; border-radius: 4vw; }
  .con19_popup_info { padding: 6vw; font-size: 3.5vw; }
  .con19_popup_photo { width: 100%; min-height: 44vw; }
  .con19_popup_placeholder { gap: 3vw; font-size: 3.5vw; }
  .con19_popup_placeholder_icon { width: 9vw; }
  .con19_popup_close { top: 2vw; right: 2vw; width: 11vw; height: 11vw; font-size: 6vw; }
  .con19_popup_name { font-size: 4.5vw; }
  .con19_popup_line { width: 10vw; height: .6vw; margin: 3vw 0; }
  .con19_popup_detail { margin-top: 2vw; font-size: 3.5vw; }
  .con19_popup_naver { width: 100%; height: 11vw; margin-top: 5vw; font-size: 3.3vw; }

.main_stat {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 5vw 2vw;
    margin-top: 0;
  }
.con02_card {
    box-sizing: border-box;
    width: 92vw;
    height: auto;
    align-items: center;
    padding: 6vw 0;
    overflow: hidden;
    /* PC pill(50vw) 이 세로 카드에 먹으면 타원이 돼 인증서 모서리가 깎인다 → 일반 라운드로 */
    border-radius: 6vw;
  }
.con02_card_pic {
    box-sizing: border-box;
    position: static;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    align-items: center;
  }
  /* 배경 con02_05(1442x424 가로형)을 세로 카드에 cover 하면 중앙 크롭이라 받침대가 반만 잘려 뜬다.
     PC 에서 텍스트가 놓이는 우측(빈 패널+광선)만 쓰도록 우단 정렬 */
  .con02_card_bg img {
    object-position: 100% center;
  }
  .con03_card {
    box-sizing: border-box;
    grid-area: 1 / 2;
    width: 100%;
    margin: 0;
    padding: 5vw 0;
  }
  .con04_box {
    box-sizing: border-box;
    width: 92vw;
    padding: 10vw 0 12vw;
  }
  .con04_item {
    box-sizing: border-box;
    width: 70vw;
    height: auto;
    padding: 4vw 0;
  }
  .con05_panel {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 7vw 4vw 11vw;
    flex-direction: column;
    gap: 4vw;
  }
  .con07_panel {
    box-sizing: border-box;
    width: 96vw;
    padding: 12vw 3vw 12vw;
  }
  .con08_map_frame {
    box-sizing: border-box;
    width: 92vw;
    height: auto;
    flex-direction: column;
    padding: 0vw 0 6vw;
    gap: 0;
    margin-top: 6vw;
  }
  /* 원 안에 C·E사 회색 원형 로고를 넣는다 (기획 수정안 260930 — 모바일). 부모 .con08_points 가 프레임을 덮는 absolute 라 좌표는 프레임 기준이다.
     반경 원(지름 80vw, 중심 y 42vw) 안쪽이고 가운데 핀의 꼬리 양옆이다. 등장 모션(핀 → 로고)은 PC 와 같은 타임라인이 그대로 돈다. */
  .con08_competitor {
    box-sizing: border-box;
    right: auto;
    bottom: auto;
    width: 19vw;
    height: 19vw;
    padding: 0;
    flex-shrink: 0;
  }
  .con08_competitor_e {
    left: 16vw;
    top: 52.5vw;
  }
  .con08_competitor_c {
    left: 57vw;
    top: 52.5vw;
  }
  /* PLUS82 원 — 큰 핀의 머리 안에 얹혀 반경 원과 동심이다. 흐름에 두면 원과 어긋난다 */
  .con08_protection {
    box-sizing: border-box;
    position: absolute;
    inset: auto;
    top: 22vw;
    right: auto;
    bottom: auto;
    left: auto;
    justify-content: center;
    width: 30vw;
    height: 30vw;
    padding: 0;
  }
  /* 카드는 .con09_item_short 로 올라갔다 — 여기선 폭만 잡는 투명 래퍼 */
  .con09_panel {
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    outline: none;
    border-radius: 0;
    background: none;
  }
  /* 모바일에서는 「기존 공급 방식」(con10)·「형식적인 운영관리」(con11) 비교 박스를 빼고 PLUS82 박스만 보여 준다 (기획 수정안 260930). PC 는 그대로.
     이 박스 안의 화살표(.con10_arrow)도 같이 사라진다. 아래 .con10_legacy_* · .con11_legacy_* 모바일 값은 이제 화면에 안 쓰인다. */
  .con10_legacy,
  .con11_legacy {
    display: none;
  }
  .con10_plus {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 6vw 4vw;
    margin: 0;
    align-items: center;
    /* PC 글로우(0 0 54px / 0 0 103px 6.2px)는 고정 px 이라 1920 에선 폭의 2.8%/5.7% 지만 375 에선 14%/29% 로 부푼다.
       아래로 ~109px 번지는데 카드 밑 여백은 padding-bottom 10vw(37.5px)뿐 → section{overflow:hidden} 이
       con11 과의 경계에서 글로우를 싹둑 잘라 색 단차(ΔR 19)를 만들었다. PC 와 같은 비율로 vw 환산해 여백 안에서 사라지게 한다. */
    box-shadow: 0 0 2.8vw rgba(15, 74, 119, .25), 0 0 5.4vw 0.3vw rgba(6, 162, 219, .31);
  }
  .con10_legacy_item {
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    height: auto;
    padding: 3.5vw 1.5vw;
    margin-top: 0;
    gap: 2vw;
  }
  /* PC 의 .con10_legacy_item:nth-child(2)/(3) margin-top 은 특이도가 높아 위 margin-top:0 으로 안 지워진다.
     세로 리스트일 땐 1.4px 라 안 보였지만 3열이 되면 2·3번째 셀만 아래로 밀려 아이콘 줄이 어긋난다 */
  .con10_legacy_item:nth-child(2) {
    margin-top: 0;
  }
  .con10_legacy_item:nth-child(3) {
    margin-top: 0;
  }
  /* 2열이라 아이콘 옆 텍스트가 안 들어간다 → 세로로. 높이 고정해 4장 동일 */
  .con10_plus_card {
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    height: 36vw;
    padding: 4vw;
    gap: 3vw;
  }
  .main {
    /* 첫 화면 = 헤더 17vw ~ 퀵바 12.2vw. 그 사이에 4개 강점 카드까지 다 들어가야 한다(기획 수정안 260930 — 모바일 첫 화면에 4칸 모두 노출).
       가운데 둘 묶음 = 텍스트 45.3 + 로고~카드 간격 32(.main_stats margin-top) + 카드 2행 57.7 = 135.1vw. (164.3 = 17 + 12.2 + 135.1)
       화면이 낮으면(예: 아이폰 사파리 390×664) 남는 여백이 줄어 위 여백도 같이 줄고 최소 3vw 에서 멈춘다 — 이래야 카드 2행이 퀵바 위에 들어온다. */
    --hero-pad: max(3vw, calc((100svh - 164.3vw) / 2));
    margin-top: 17vw;
    height: auto;
    padding: 10vw 0 12vw;
    padding-top: var(--hero-pad);
    /* 배경 매장컷을 텍스트 묶음 바로 아래로 — .back_img 의 cover 는 세로를 섹션높이에 딱 맞춰서
       세로 여유가 0 이라 background-position 의 Y 가 아예 먹지 않는다. 폭 기준(260%)으로 재스케일해서 여유를 만든다.
       이미지높이 = 260vw / 1.7116 = 151.9vw, 그중 매장컷은 55.3~85.4% 구간 = 이미지 top 기준 84.0~129.7vw (상단 55% 는 백지).
       매장컷 top 을 (텍스트 묶음 45.3vw + 간격 11vw) 아래에 놓는다 → 오프셋 = --hero-pad + 45.3 + 11 − 84 = --hero-pad − 27.7vw.
       ※ 상수 vw 로 주면 안 된다 — 패딩이 100svh 기반이라 화면 높이가 바뀌면 텍스트만 움직여 간격이 틀어진다. */
    background-size: 260% auto;
    background-position: 50% calc(var(--hero-pad) - 27.7vw);
  }
  .con01 {
    height: auto;
    padding-block: 2vw;
    padding-bottom: 14vw;
  }
  /* 끌어올린 CON01(style.css .con01.is_tucked) — 제목이 로고에 붙지 않게 위 여백 2vw 와 합쳐 로고 아래 12vw 를 남긴다 */
  .con01.is_tucked {
    margin-top: calc(var(--hero-tail) * -1 + 10vw);
  }
  .con02 {
    height: auto;
    /* 하단 = 화살표 absol 영역. 정지 촉 38.8vw + 모션 하강분 + 여백 (PC 10.8vw 와 같은 역할) */
    padding-block: 3vw 42vw;
  }
  .con03 {
    height: auto;
    padding-top: 0vw;
    padding-bottom: 10vw;
    /* padding-block: 10vw; */
    background-size: 170vw auto;
    background-position: 50% 12vw;
  }
  .con04 {
    height: auto;
    padding-block: 0;
  }
  .con05 {
    height: auto;
    padding-block: 15vw;
    padding-bottom: 5vw;
  }
  .con06 {
    height: auto;
    padding-block: 10vw;
    /* PC 는 밴드/세로그리드 높이가 --px*762(=40vw) 로 차트 바닥선과 정확히 맞는다.
       모바일은 헤딩이 세로로 길어져 차트가 44vw 아래로 밀리므로 밴드가 헤딩에만 깔리고 차트 위에서 잘린다 → 바닥선(69.3vw)까지 늘린다.
       X 좌표(--px*261…1642)는 폭 비례라 그대로 맞는다 → background-position 은 건드리지 않는다. */
    background-size:
      1px 69.3vw, 1px 69.3vw,
      1px 69.3vw, 1px 69.3vw,
      1px 69.3vw, 100% 69.3vw;
  }
  .con07 {
    height: auto;
    padding-block: 10vw;
  }
  .con08 {
    height: auto;
    padding-block: 10vw;
  }
  .con09 {
    height: auto;
    padding-block: 10vw;
  }
  /* 합성본(1905x1040)을 100% 100% 로 375x1120 에 욱여넣어 세로 5.47배 늘어나 있었다.
     cover 로 왜곡 제거 — 대신 이미지에 구워진 연파랑 여백·라운드 프레임은 크롭돼 다크 밴드가 풀블리드가 된다 */
  .con10 {
    height: auto;
    padding-block: 10vw;
    background-size: cover;
    background-position: center;
  }
  .main_tit {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    gap: 5.2vw;
    font-size: 13vw;
    line-height: 1.25;
    letter-spacing: -0.5vw;
  }
  .main_desc {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    margin-top: 0.5vw;
    font-size: 4.6vw;
    line-height: 1.6;
    letter-spacing: -0.2vw;
  }
  .con01_title {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 6.4vw;
    line-height: 1.4;
    letter-spacing: -0.2vw;
  }
  .con02_title {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 6.4vw;
    line-height: 1.4;
    letter-spacing: -0.2vw;
  }
  .con02_desc {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 3.8vw;
    line-height: 1.6;
    letter-spacing: -0.1vw;
  }
  .con03_title {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
  }
  /* "/ 국가데이터처"(nbsp 로 묶임) 가 통째로 2줄로 내려가는 폭 — 첫 줄은 공정위 출처까지만 */
  .con03_source {
    max-width: 85vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 1.6;
    letter-spacing: -0.1vw;
  }
  .con04_title {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 5.6vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
  }
  .con04_lead {
    max-width: 84vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 3.8vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con05_title {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 6.4vw;
    line-height: 1.4;
    letter-spacing: -0.2vw;
  }
  .con06_title {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 6.4vw;
    line-height: 1.4;
    letter-spacing: -0.2vw;
  }
  .con06_desc {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 3.8vw;
    line-height: 1.6;
    letter-spacing: -0.1vw;
  }
  .con07_title {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 8vw;
    line-height: 1.4;
    letter-spacing: -0.2vw;
  }
  .con08_title {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 7.4vw;
    line-height: 1.4;
    margin-top: 4vw;
    letter-spacing: -0.2vw;
  }
  .con08_desc {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 3.8vw;
    line-height: 1.6;
    margin-top: 2vw;
    letter-spacing: -0.1vw;
  }
  .con09_title {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 7vw;
    line-height: 1.4;
    margin-top: 4vw;
    letter-spacing: -0.2vw;
  }
  .con09_desc {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 3.8vw;
    line-height: 1.6;
    margin-top: 2vw;
    letter-spacing: -0.1vw;
  }
  .con10_title {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 6.4vw;
    line-height: 1.4;
    letter-spacing: -0.2vw;
    margin-top: 8vw;
  }
  .con10_desc {
    max-width: 92vw;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    font-size: 3.8vw;
    line-height: 1.6;
    letter-spacing: -0.1vw;
  }
  /* PC 는 pre 로 「영업권   2KM   보장」 간격을 만든다. normal 로 풀면 공백이 축약돼 붙어버린다 */
  .con08_title_text {
    white-space: pre-wrap;
  }
  .con08_title_mark::before {
    width: 20vw;
    height: 9vw;
  }
  /* .con09_title_before/_point/_after 는 PC 의 white-space:pre 를 그대로 둔다.
     normal 로 덮으면 span 끝의 공백이 flex item 경계에서 잘려 "월 로열티20만 원고정" 으로 붙는다.
     7vw 로도 한 줄 폭이 65vw 라 92vw 안에 들어와 줄바꿈이 필요 없다. */
  .main_logo {
    width: 34.3vw;
    margin-top: 8.8vw;
  }
  .main_stats {
    width: 92vw;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 3vw;
    /* 배경 매장컷도 --hero-pad 에 묶여 있어서 매장컷과 카드 사이 거리는 화면 높이와 무관한 상수다 → svh 계산식 불필요.
       매장컷 = 로고 bottom + 11 ~ +56.7vw. 카드를 로고 bottom + 32vw 에서 시작하면 PC 처럼 카드가 매장 유리창 아랫부분에 얹히고
       (위쪽 21vw 는 간판·차양이 그대로 보인다) 카드 2행이 첫 화면에 다 들어온다. 예전엔 62.7vw 로 매장컷 아래에 따로 놓아 2행째가 퀵바에 가려졌다. */
    margin-top: 32vw;
  }
  .main_stat_dark {
    margin-top: 0;
  }
  .con01_head {
    max-width: 92vw;
  }
  .con01_stage {
    width: 100%;
    margin-top: 4vw;
  }
  .con01_slide {
    width: 100%;
    height: 55vw;
  }
  .con01_card_store {
    width: 82vw;
  }
  .con01_card_photo {
    width: 82vw;
  }
  .con01_reflect_store {
    top: 100%;
    width: 105.3685%;
  }
  .con01_reflect_photo {
    top: 100%;
    width: 100%;
  }
  .con02_cert_back {
    display: none;
  }
  .con02_light_front {
    display: none;
  }
  /* 상장 뒤 보조광 — 모바일은 뒷장(.con02_cert_back)·앞광(.con02_light_front)이 빠져서
     혼자 남으면 카드 좌측에 근거 없는 밝은 사각 얼룩만 남는다. */
  .con02_light_back {
    display: none;
  }
  /* PC 는 카드보다 큰 광선이 .con02_card_pic(overflow:hidden) 에 잘렸는데, 모바일은 card_pic 이
     static 이라 클리핑이 풀려 PC 크기 광선의 사각 경계가 카드 안에 그대로 드러났다(배경 잘림).
     카드를 덮고 넘치게 해서 .con02_card 의 overflow:hidden 이 자르게 한다.
     8% 블리드 = GSAP xPercent±3(=카드폭 3.5%)·yPercent±2 이동분을 덮는 여유. */
  .con02_light_ambient {
    top: -8%;
    left: -8%;
    width: 116%;
    height: 116%;
    aspect-ratio: auto;
  }
  .con02_light_ambient img {
    height: 100%;
    object-fit: cover;
  }
  .con02_cert_front {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none !important;
    width: 36%;
    margin: 0 auto;
    opacity: 1 !important;
  }
  .con02_card_txt {
    margin: 5vw 0 0;
    max-width: 84vw;
    align-items: center;
    text-align: center;
  }
  .con02_rank {
    padding: 1.5vw 2vw;
    font-size: 3.8vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con02_cta {
    margin-top: 6vw;
  }
  .con02_btn {
    width: 70vw;
    height: auto;
    padding-block: 4vw;
  }
  /* 화살표 — PC 값이 calc(var(--px)*235) 라 375px 에서 46px 로 쪼그라들어 버튼 뒤에 통째로 가려졌다.
     폭은 PC 의 버튼 대비 비율 그대로 환산(버튼폭 70vw × 235/323). top 은 비율 환산값(-11.4vw)이 아니라
     -19.4vw — 섹션 하단 padding 42vw 안에서 하강 모션 최저점까지 잘리지 않게 위로 더 올린 값이다. */
  .con02_arrow01 {
    top: -19.4vw;
    width: 50.9vw;
  }
  .con02_arrow02 {
    top: 0.9vw;
    width: 31vw;
  }
  /* 이동거리도 같이 환산 — PC 는 화살표 높이의 18.7%(2.9vw/295px) 를 내려간다.
     모바일은 화살표가 커져서 common.css 원본 2.9vw 로는 5% 밖에 안 움직인다.
     mobile_style.css 가 common.css 보다 뒤에 로드돼 599px 이하에서만 이 정의가 이긴다. */
  @keyframes con02_arrow01_flow {
    0% {
      transform: translateY(-2.5vw);
      opacity: 0;
    }
    30% {
      opacity: var(--con02-arrow-opacity);
    }
    65% {
      opacity: calc(var(--con02-arrow-opacity) * 0.8);
    }
    100% {
      transform: translateY(9.5vw);
      opacity: 0;
    }
  }
  @keyframes con02_arrow02_flow {
    0% {
      transform: translateY(-1.7vw);
      opacity: 0;
    }
    30% {
      opacity: var(--con02-arrow-opacity);
    }
    65% {
      opacity: calc(var(--con02-arrow-opacity) * 0.8);
    }
    100% {
      transform: translateY(7.4vw);
      opacity: 0;
    }
  }
  /* 장식 absol — PC 좌표 그대로라 모바일 콘텐츠를 덮어 판독 불가 → 숨김 (흰 대형 글자는 배경 발광이 없어 대비도 0) */
  .con03_word,
  .con03_arrow {
    display: none;
  }
  /* 평균 ↔ PLUS82 는 나란히 놔야 비교가 읽힌다 (시안 좌우 대조 유지) */
  .con03_stage {
    width: 94vw;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2vw;
    row-gap: 7vw;
    align-items: end;
    margin-top: 8vw;
  }
  .con03_avg {
    grid-area: 1 / 1;
    margin: 0;
    padding-bottom: 4.8vw;
  }
  .con03_ratio {
    grid-area: 2 / 1 / 3 / 3;
    margin: 0 auto;
    width: 30vw;
    height: 30vw;
    padding: 0;
  }
  .con03_card_panel {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    grid-area: 1 / 2;
    width: 100%;
    height: auto;
    justify-self: center;
    align-self: stretch;
  }
  .con03_avg_box {
    width: 34vw;
  }
  .con03_card_box {
    width: 40vw;
  }
  .con03_logo {
    width: 6.4vw;
    left: 30.3%;
    top: 23.6%;
  }
  .con03_label_avg {
    margin: 2vw 0 0;
    padding: 1.2vw 1.8vw;
    font-size: 3.3vw;
    line-height: 1.6;
    letter-spacing: -0.1vw;
  }
  .con03_label_brand {
    margin: 2vw 0 0;
    padding: 1.2vw 1.8vw;
    font-size: 3.3vw;
    line-height: 1.6;
    letter-spacing: -0.1vw;
  }
  .con03_result {
    width: 92vw;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    margin-top: 8vw;
  }
  .con03_swoosh {
    top: auto;
    right: auto;
    bottom: -3vw;
    left: auto;
    width: 42vw;
  }
  .con03_result_rank {
    margin-left: 0;
    font-size: 9vw;
    line-height: 1.2;
    letter-spacing: -0.2vw;
    /* 안드로이드·삼성인터넷 「웹페이지 다크모드」는 background-clip:text 그라데이션 글자를 배경으로 보고 색을 안 뒤집는다 →
       밝은 배경이 어두워진 자리에서 남색 글자가 안 보였다(2026-09-30 기획 수정안). 단색 글자는 다크모드에서 밝게 뒤집힌다. */
    background-image: none;
    color: #0d3260;
  }
  .con04_head {
    max-width: 84vw;
  }
  .con04_notice {
    max-width: 82vw;
    padding: 2vw;
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con04_notice_icon {
    width: 5vw;
    height: 5vw;
    flex-shrink: 0;
    margin-right: 2vw;
  }
  .con04_basis {
    align-self: center;
    margin: 4vw 0 0;
    font-size: 3.3vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con04_slider {
    width: 88vw;
    margin-top: 4vw;
  }
  .con04_arr {
    width: 7vw;
    height: 7vw;
    flex-shrink: 0;
  }
  .con04_arr_pic {
    width: 1.8vw;
  }
  .con04_slide {
    width: 72vw;
  }
  .con04_list {
    row-gap: 2vw;
  }
  .con05_why {
    margin: 0;
    font-size: 13vw;
    line-height: 1;
  }
  .con05_title_wrap {
    max-width: 92vw;
    margin-top: 1vw;
  }
  /* PC 는 캡슐 1개를 좌우로 가르고 이음매에 VS 원을 걸친 구조. 세로로 같은 언어로 옮긴다 —
     gap 0 으로 두 패널을 붙이고, 라운드는 바깥 모서리만, VS 는 음수 margin 으로 이음매에 걸침 */
  .con05_compare {
    width: 92vw;
    flex-direction: column;
    margin: 6vw 0 0;
    gap: 0;
  }
  .con05_circle {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 0;
    height: auto;
    width: 28vw;
    padding-block: 7vw;
  }
  .con05_vs_circle {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 0;
    /* height:auto + padding 이면 60x56.6 타원이 된다(PC 는 124x124 정원) → 폭과 같은 값으로 고정 */
    height: 16vw;
    width: 16vw;
    /* 자기 높이의 절반씩 → 흐름 점유 0(두 패널이 맞닿음) + 이음매 정중앙에 걸침 */
    margin-block: -8vw;
    order: 1;
  }
  .con05_panel_left {
    order: 0;
    border-radius: 14vw 14vw 0 0;
  }
  .con05_panel_right {
    order: 2;
    border-radius: 0 0 14vw 14vw;
    /* 좌 204.5 / 우 100.9 로 어두운 쪽이 절반이라 한 덩어리로 안 읽힘 → 위아래 여백 보강 */
    padding-block: 11vw;
  }
  .con05_logo_pic {
    width: 21vw;
    margin: 0;
  }
  .con05_left_copy {
    margin: 0;
    text-align: center;
  }
  /* 파란 스크리블 — PC 값 calc(var(--px)*123) 이 375px 에서 24px 로 줄어 강조어를 못 감쌈.
     PC 비율(링폭 123 / 본문 글자크기 42 = 2.93) 을 모바일 5.4vw 에 환산. left/top 은 % · vw 라 그대로 맞음 */
  .con05_ring_pic {
    width: 16vw;
  }
  .con05_right_text {
    margin: 0;
    text-align: center;
    font-size: 5.3vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con05_vs_pic {
    width: 10vw;
    margin: 0;
  }
  .con05_slide {
    margin-top: 8vw;
  }
  /* 마퀴용 등속 타이밍 → 페이지 단위 넘김이라 감속으로 */
  .con05_list {
    transition-timing-function: ease-out !important;
  }
  /* 화살표 — PC 에는 없는 모바일 전용(.mobile-pc). 부모 .con05_slide 가 align-items:center 라
     top 은 안 준다(static position 이 세로 중앙). 디자인은 con04 버튼과 동일 규격 */
  .con05_arr {
    position: absolute;
    width: 12vw;
    height: 12vw;
    border: 1px solid var(--color-point);
    border-radius: 50%;
    background-color: #ffffff;
  }
  .con05_prev {
    left: 2%;
  }
  .con05_next {
    right: 2%;
  }
  .con05_arr_pic {
    width: 3.2vw;
    aspect-ratio: 9 / 16;
  }
  .con05_item {
    width: 60vw;
  }
  .con05_card {
    width: 60vw;
    margin-left: 0;
  }
  .con05_card_copy {
    top: 20vw;
  }
  .con05_duration {
    width: 45vw;
    height: auto;
    padding-block: 2vw;
    font-size: 4.8vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con05_basis {
    align-self: center;
    margin: 4vw 0 0;
    font-size: 3.3vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  /* PC top:22.8vw 를 그대로 두면 모바일에선 desc(28.9~35vw) 위로 올라타 글자가 겹친다.
     PC 와 같은 비율(차트 높이의 32% 지점)로 차트 안에 넣는다 → 플롯 top 44 + 25.3*0.32 */
  .con06_wordmark {
    left: auto;
    top: 52.1vw;
  }
  /* 곡선 SVG 는 viewBox 고정(1905x482)이라 width:100% 면 높이가 25.3vw 로 고정된다.
     플롯을 height:auto 로 두면 32.5vw 로 커져서 바닥 기준으로 앉은 점들이 곡선 아래로 7.2vw 어긋난다 → 플롯을 곡선 높이에 맞춘다.
     margin-top 은 6→9vw: 213(5.6vw)+헤일로(8vw)가 플롯 위로 8.2vw 넘치는데 6vw 로는 desc 를 침범한다. */
  .con06_plot {
    height: 25.3vw;
    margin-top: 9vw;
  }
  .con06_milestone {
    width: 18.12%;
  }
  /* padding-bottom = (곡선 위 그 지점의 바닥기준 높이) − (점 반지름). 곡선 y 를 마일스톤 x 에서 풀어 얻은 값:
     바닥기준 2.49 / 10.55 / 15.04 / 18.08 / 22.18vw · 점 1.5vw(반 0.75) · 헤일로 8vw(반 4) */
  .con06_milestone_01 {
    padding-bottom: 1.7vw;
  }
  .con06_milestone_02 {
    padding-bottom: 9.8vw;
  }
  .con06_milestone_03 {
    padding-bottom: 14.3vw;
  }
  .con06_milestone_04 {
    padding-bottom: 17.3vw;
  }
  .con06_milestone_final {
    padding-bottom: 18.2vw;
  }
  .con06_number_final {
    margin-bottom: 0;
    font-size: 5.6vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }
  .con06_halo {
    width: 8vw;
    height: 8vw;
  }
  .con06_point {
    width: 1.5vw;
    height: 1.5vw;
  }
  .con06_year {
    margin-top: 2vw;
    font-size: 3.3vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  /* STORY 워터마크 — PC 좌표 그대로 타이틀 위에 얹히고, 패널과 같은 네이비라 형태도 안 읽힌다 */
  .con07_story {
    display: none;
  }
  .con07_row {
    flex-direction: column;
    align-items: center;
    gap: 5vw;
  }
  .con07_heading {
    margin-top: 0;
    align-items: center;
  }
  .con07_media {
    width: 100%;
  }
  .con07_stage {
    width: 100%;
  }
  .con07_play {
    width: 100%;
  }
  /* 재생버튼 — PC 의 --px*66 은 375px 에서 13px 로 찌부된다 */
  .con07_play_icon {
    width: 15vw;
  }
  .con07_play_icon::after {
    margin-left: 0.9vw;
    border-width: 2.1vw 0 2.1vw 3.6vw;
  }
  /* 썸네일 줄과 CTA 를 분리한다 — 한 줄에 같이 두면 썸네일이 잘리고 버튼도 작아진다 */
  .con07_controls {
    flex-direction: column;
    margin-top: 3vw;
    gap: 3vw;
  }
  .con07_choices {
    width: 100%;
  }
  .con07_select {
    width: 100%;
  }
  .con07_thumb_img {
    width: 100%;
  }
  .con07_more {
    width: 100%;
    margin-left: 0;
    flex-shrink: 0;
  }
  /* width·height 를 둘 다 주면 PC 의 aspect-ratio(185/151 세로형)는 무시된다 → 가로 띠로 전환 */
  /* con07_04.png(185x151 세로형)를 가로 띠로 누르면 왜곡된다 → 원본 픽셀값 그대로 뜬 그라데이션으로 대체 */
  .con07_more_img {
    width: 100%;
    height: 14vw;
    border-radius: 3.5vw;
    background-color: #0262c3;
    background-image: radial-gradient(ellipse 62% 190% at 50% 112%, #0effff 0%, #05f5fb 16%, #03d8f0 30%, #0385d0 52%, #0266c5 72%, #0262c3 88%);
  }
  .con07_more_art {
    display: none;
  }
  .con07_more_content {
    top: auto;
    flex-direction: row;
    align-items: center;
    gap: 3vw;
  }
  .con07_arrow_circle {
    width: 7vw;
    margin-top: 0;
  }
  .con08_tag {
    width: 70vw;
  }
  .con09_principle_img {
    width: 70vw;
  }
  .con10_tag {
    width: 70vw;
  }
  /* 지도 — PC 는 가로 프레임 중앙만 크롭해 쓴다. 모바일에선 세로 프레임 전체를 덮어
     「2KM 라벨 · 반경 원 · 경쟁사 마커」 가 전부 한 장의 지도 위에 얹히게 한다(= PC 와 같은 읽힘) */
  .con08_map_img {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  .con08_map_img img {
    height: 100%;
    object-fit: cover;
  }
  /* 보장상권 원은 한 개(y 42vw) — 안 로고·핀이 들어갈 자리를 위해 예전(70vw)보다 10vw 키웠다. 안쪽 원·글로우는 걷었다(클라이언트 2026-10-01 「원은 1개로」). 물결(.con08_ripple)은 이 원과 같은 크기라 같이 둔다 */
  .con08_radius_outer,
  .con08_ripple {
    width: 80vw;
    height: 80vw;
    top: 2vw;
  }
  /* 지도 위 작은 핀은 PC 좌표라 모바일에선 3~4px 로 형태도 안 보인다 */
  .con08_pin {
    display: none;
  }
  /* 프레임을 덮는 좌표 기준 상자 — 안의 C·E 로고를 프레임 기준으로 놓는다 (흐름에서 뺐다. 프레임 높이는 아래 「PLUS82 1개 매장」 칩이 잡는다) */
  .con08_points {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  /* 커다란 매장모양 핀 — 머리(38.4vw) 안에 흰 배지(30vw + 테두리 2vw)가 얹힌다. 머리 중심을 반경 원 중심(y 42vw)에 두면 꼬리가 길어 아래로 쳐져 보여
     5vw 올렸다(머리 중심 y 37vw). 뒤 반경 원은 그대로 */
  .con08_bigpin {
    width: 40vw;
    top: 17vw;
    filter: drop-shadow(0 1.6vw 2.4vw rgba(3, 78, 132, .38));
  }
  /* 「플러스82 보장 상권 2KM」 = 타이틀 「영업권 2KM 보장」 과 같은 말이다. 모바일에선 뺀다 */
  .con08_shop_img {
    display: none;
  }
  .con08_logo_img {
    width: 20vw;
  }
  .con08_protection_text {
    margin-top: 2vw;
    font-size: 3.6vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
  }
  /* 「1개 매장」 은 원 바깥의 강조 칩(.con08_solo)이 말한다 — 핀 머리 안에는 로고와 「보장상권」 만 둔다 */
  .con08_protection_count {
    display: none;
  }
  /* 원 바깥쪽에서 PLUS82 1개 매장을 강조 (기획 수정안 260930 — 모바일). 반경 원 아래, 프레임 흐름에 두어 프레임 높이를 잡는다 */
  .con08_solo {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 2.2vw;
    margin-top: 86vw;
    padding: 2vw 6.4vw 2.4vw;
    border-radius: 50vw;
    background: linear-gradient(90deg, #12b4ee 0%, #0466c4 100%);
    box-shadow: 0 0 0 0.7vw #ffffff, 0 1.6vw 4vw rgba(3, 90, 160, .38);
    font-family: "Paperlogy";
    font-size: 4.4vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
    white-space: nowrap;
  }
  .con08_solo_count {
    white-space: nowrap;
  }
  .con08_solo_num {
    font-size: 7.6vw;
    line-height: 1;
    color: #fbff89;
  }
  /* 읽는 순서: 제목 → 결론(112만 원 차이) → 근거(비교표) → 기준 주석.
     마크업은 PC 좌표 배치(화살표 위 원)에 맞춰져 있으므로 order 로만 바꾼다 */
  .con09_intro {
    order: 1;
    max-width: 92vw;
  }
  /* PC 는 space-between + align-items:flex-end 라 아이템 "바닥"만 맞고 금액줄은 83px 어긋난다.
     모바일에선 먼저 보이는 게 숫자라 금액선이 안 맞으면 비교표로 안 읽힌다 → 상단 정렬 + 동일 폭 */
  .con09_list {
    order: 3;
    justify-content: center;
    align-items: flex-start;
    width: 92vw;
    gap: 4vw;
    margin-top: 6vw;
  }
  .con09_item {
    width: 44vw;
  }
  /* 좌우를 같은 규격 카드로 맞춘다 — 같은 틀 안에서 막대 높이만 다르면 "높이 = 금액" 이 바로 읽힌다.
     PC 는 우측에만 카드가 있어도 폭이 넓어 비교가 되지만, 모바일에선 빈 흰 상자로만 보인다.
     좌측은 흐리게 둬서 주인공은 그대로 우측(PLUS82) */
  .con09_item_long,
  .con09_item_short {
    box-sizing: border-box;
    padding: 4vw 0;
    border-radius: 4vw;
  }
  .con09_item_long {
    background: rgba(255, 255, 255, 0.4);
  }
  .con09_item_short {
    outline: 1px solid #fff;
    background: rgba(255, 255, 255, 0.65098);
  }
  /* 금액줄 높이 고정 = 좌우 금액 하단선 일치 (좌 5.4vw / 우 7vw 로 글자 크기가 달라 자동으로는 안 맞는다) */
  .con09_price_long,
  .con09_price_short {
    align-items: flex-end;
    height: 9.2vw;
  }
  /* 막대영역 높이를 좌우 동일하게 박아 바닥선을 맞춘다.
     height 사유: 짧은 큐브(18x19.1vw)는 자기 높이로는 긴 기둥(45.9vw)과 같은 바닥에 설 수 없다.
     padding/margin 으로 밀면 큐브 크기가 바뀔 때마다 다시 계산해야 한다 */
  .con09_long_img {
    width: 17.2vw;
    margin-top: 3vw;
  }
  .con09_short_img {
    justify-content: flex-end;
    width: 18vw;
    height: 45.9vw;
    aspect-ratio: auto;
    margin-top: 3vw;
  }
  .con09_label_long,
  .con09_label_short {
    margin: 3vw 0 0;
    padding: 1.5vw 2.6vw;
    font-size: 3.4vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con09_difference {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    /* PC 는 158x158 정원 + border-radius:50%. height:auto + padding 으로 두면 36x24 타원이 된다 → 정사각 고정 */
    width: 34vw;
    height: 34vw;
    padding: 0;
    order: 2;
    margin: 7vw 0 0;
  }
  .con09_difference_copy {
    margin-bottom: 0;
    font-size: 4.6vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con09_note {
    order: 4;
    max-width: 92vw;
    white-space: normal;
    margin-top: 5vw;
    font-size: 3.3vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con10_bar {
    width: 92vw;
    padding: 3vw 0;
    margin-top: 6vw;
    font-size: 4.5vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con10_compare {
    width: 92vw;
    height: auto;
    flex-direction: column;
    gap: 2vw;
    margin-top: 4vw;
  }
  /* PC 는 기존→PLUS 로 오른쪽을 가리키는 화살표. 세로 스택이라 90도 돌려 아래를 가리키게 하고
     두 카드 사이 간격 중앙에 건다. 부모 .con10_legacy 가 align-items:center 라 가로 좌표는 안 준다 */
  .con10_arrow {
    top: auto;
    right: auto;
    bottom: -10.4vw;
    width: 11vw;
    transform: rotate(90deg);
  }
  .con10_legacy_title {
    margin: 0;
    text-align: center;
    font-size: 4.5vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con10_plus_title {
    margin: 0;
    text-align: center;
    margin-bottom: 4vw;
    font-size: 4.5vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  /* 기존 3항목은 부정 정보인데 세로 리스트(300px)로 PLUS82 강점(388px)과 지면을 반씩 나눠 써서 위계가 무너져 있었다.
     PLUS 카드와 같은 언어(아이콘 위·텍스트 아래)의 3열 1행으로 압축 → 「빈약한 1행 vs 충실한 2행」 대조가 성립한다 */
  .con10_legacy_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin: 4vw 0 0;
    gap: 2vw;
  }
  .con10_legacy_img {
    width: 10vw;
    margin-left: 0;
  }
  .con10_plus_inner {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
  }
  .con10_plus_column {
    width: 100%;
    margin-top: 0;
    align-items: center;
  }
  .con10_plus_list_right {
    width: 100%;
    margin-top: 0;
  }
  .con10_plus_list_left {
    width: 100%;
    margin-top: 0;
  }
  /* PC 2x2 배치 복원 — 세로 스택이라 .con10_plus 가 537.7px 로 늘어나 있었다.
     _list_left[달력|지도] · _list_right[SPC|재고] 가 각각 한 행이 돼 합쳐서 2행 2열 */
  .con10_plus_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2vw;
  }
  /* PC 는 아이콘 "높이"를 89.6/83.9/81.5/90.2 로 맞춰둔다. 같은 방식으로 높이 13vw 통일 →
     원본비(132/89 · 138/84 · 67/73 · 82/83)를 곱해 폭 산출 */
  .con10_plus_img_calendar {
    width: 19.3vw;
  }
  .con10_plus_img_map {
    width: 21.4vw;
  }
  .con10_plus_img_spc {
    width: 11.9vw;
    margin-top: 0;
  }
  .con10_plus_img_stock {
    width: 12.8vw;
    margin-top: 0;
  }
  .con10_plus_text {
    margin-top: 0;
    white-space: normal;
    flex-shrink: 1;
    text-align: center;
    font-size: 3.8vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .main_stat_label {
    font-size: 3.3vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .main_stat_value {
    font-size: 5.2vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .main_stat_note {
    font-size: 2.8vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con03_title_main {
    font-size: 7.7vw;
    line-height: 1.4;
    letter-spacing: -0.2vw;
    margin-top: 0vw;
  }
  .con02_btn_txt {
    font-size: 3.8vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con02_card_title {
    font-size: 5.4vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
  }
  .con03_title_top {
    font-size: 4.5vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con03_avg_price {
    font-size: 5vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
  }
  .con03_card_price {
    font-size: 6vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
  }
  .con03_avg_unit {
    font-size: 3.4vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con03_card_unit {
    font-size: 4vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con03_ratio_txt {
    font-size: 4vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con03_avg_num {
    font-size: 3.3vw;
    line-height: 1.6;
    letter-spacing: -0.1vw;
  }
  .con03_card_num {
    font-size: 3.3vw;
    line-height: 1.6;
    letter-spacing: -0.1vw;
  }
  .con03_ratio_num {
    font-size: 7vw;
    line-height: 1;
    letter-spacing: 0;
  }
  .con03_result_txt {
    font-size: 5vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
  }
  .con03_result_pct {
    font-size: 7vw;
    line-height: 1.2;
    letter-spacing: -0.1vw;
  }
  .con04_store {
    font-size: 4vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con04_sales_unit {
    font-size: 4vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con04_sales {
    font-size: 5.4vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con04_title_num {
    font-size: 6.4vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
    /* 같은 이유(웹페이지 다크모드가 그라데이션 글자를 어둡게 칠함) — 단색 하늘색으로 시안성 확보 */
    background-image: none;
    color: #8fe6ff;
  }
  .con04_title_unit {
    font-size: 6.4vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
  }
  .con05_left_text {
    font-size: 6.4vw;
    line-height: 1.4;
    letter-spacing: -0.1vw;
  }
  .con05_open {
    font-size: 3.3vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con05_store {
    font-size: 4.8vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con06_number {
    font-size: 3.3vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con06_store {
    font-size: 3.3vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con07_more_text {
    font-size: 3.6vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }
  .con07_arrow {
    font-size: 3.6vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }
  .con08_tag_first {
    font-size: 5.4vw;
    line-height: 1.2;
    letter-spacing: -0.1vw;
  }
  .con08_tag_second {
    font-size: 5.4vw;
    line-height: 1.2;
    letter-spacing: -0.1vw;
  }
  .con09_principle_first {
    font-size: 5.4vw;
    line-height: 1.2;
    letter-spacing: -0.1vw;
  }
  .con09_principle_second {
    font-size: 5.4vw;
    line-height: 1.2;
    letter-spacing: -0.1vw;
  }
  .con10_tag_label {
    font-size: 5.4vw;
    line-height: 1.2;
    letter-spacing: -0.1vw;
  }
  .con08_competitor_name {
    font-size: 3.3vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }
  .con08_competitor_count {
    align-items: baseline;
    gap: 0;
    font-size: 3.3vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }
  /* 17 / 22 가 이 섹션의 비교 축이다. 단위와 같은 크기면 대비가 죽는다 */
  .con08_competitor_num {
    font-size: 6.6vw;
    line-height: 1.1;
    letter-spacing: -0.1vw;
  }
  .con09_price_long {
    font-size: 5.4vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }
  .con09_price_long_small {
    font-size: 3.3vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con09_price_short {
    font-size: 7vw;
    line-height: 1.3;
    letter-spacing: -0.1vw;
  }
  .con09_price_short_small {
    font-size: 4vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }
  .con10_legacy_text {
    white-space: normal;
    word-break: keep-all;
    text-align: center;
    font-size: 3.6vw;
    line-height: 1.5;
    letter-spacing: -0.1vw;
  }

  /* con09 장식 일괄 숨김 — 전부 PC 좌표계 absol 이라 모바일 폭에서 콘텐츠를 덮는다.
     _word(적은/로열티): 흰 배경 패널 위 흰 글씨라 반쯤 지워진 라벨로 읽혔다.
     _arrow_img: 좌우 배치일 때만 방향을 가리킨다. 2열이 좁아지면 기둥·패널을 대각선으로 가로지르는 가림막이다.
     _panel_glow: 패널과 12px 어긋나 유령 그림자가 됐다(패널에 이미 흰 배경 + outline 이 있다).
     _shadow_*_img: 막대 바닥 그림자인데 PC 좌표라 라벨/큐브와 겹친다. */
  .con09_word,
  .con09_arrow_img,
  .con09_panel_glow,
  .con09_shadow_long_img,
  .con09_shadow_short_img {
    display: none;
  }
  /* con11-con20: mobile-lower plan, Evaluator PASS */
  .con11 {
    padding: 12vw 0;
  }
  /* 3vw(11px) 는 인접 섹션(12vw)의 1/4 이라 알약이 섹션 천장에 붙었다.
     PC 비율(상 12.7vw : 하 6vw)을 따라 위를 더 준다 */
  .con12 {
    padding: 9vw 0 4vw;
    align-items: center;
  }
  .con15 {
    padding: 7vw 0 3vw;
  }
  .con16 {
    padding: 12vw 0;
  }
  .con17 {
    padding: 12vw 0 0;
  }
  .con18 {
    padding: 12vw 0;
  }
  .con20 {
    padding: 9vw 0 12vw;
  }
  .con11,.con12,.con13,.con15,.con16,.con17,.con18,.con20 {
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    text-align: center;
  }
  .con11_bar,.con11_tag,.con11_legacy,.con11_plus,.con11_legacy_item,.con11_data_card,.con11_app_card,.con12_coupon,.con13_panel,.con15_capsule,.con15_item,.con17_card,.con18_search,.con18_item:nth-child(n) .con18_question,.con18_answer_inner,.con20_form,.con20_control,.con20_select,.con20_options,.con20_option,.con20_submit {
    box-sizing: border-box;
  }
  /* 폭만 모바일 값으로 두고 나머지는 PC 구성을 그대로 쓴다 — aspect-ratio 362/55 가 높이를 잡고,
     배경 이미지는 전역 section img(width:100%)로 채워지며, 두 문구는 absol 로 PC 의 left(7.1% / 68.6%)에 앉는다.
     이걸 flex+gap 으로 덮었더니 문구가 이미지 가운데 X 홈에 물려 "지키는원칙" 처럼 붙어 읽혔다.
     (.con11_tag 가 블록 두 개로 쪼개져 있던 것도 하나로 합침) */
  .con11_tag {
    width: 72vw;
    margin: 0;
  }
  /* PC 의 left(7.1% / 68.6%)는 "글자 왼쪽 끝" 좌표라 PC 글자 크기에서만 로브 가운데로 떨어진다.
     모바일은 글자가 로브 대비 작아 왼쪽으로 쏠린다 → 좌표 대신 로브 구간을 통째로 주고 그 안에서 가운데 정렬한다.
     값은 con11_02.png(362x55) 실측 — 왼쪽 로브 14~181, 오른쪽 로브 228~347 (노치를 피한 상·하단 기준 폭). */
  .con11_tag_lead {
    left: 3.9%;
    width: 46.1%;
  }
  .con11_tag_number {
    left: 63%;
    width: 32.9%;
  }
  .con11_title {
    max-width: 92vw;
    margin: 5vw 0 0;
    white-space: normal;
  }
  .con11_title_second {
    justify-content: center;
    flex-wrap: wrap;
  }
  .con11_title_highlight {
    width: 103%;
    left: 0;
    /* 웹페이지 다크모드가 흰 상자를 검게 뒤집어 보이던 것 → 안 뒤집히는 흰 판(common.css --plate-white) */
    background: var(--plate-white) center / 100% 100% no-repeat;
  }
  .con11_desc {
    max-width: 90vw;
    margin-top: 4vw;
    white-space: normal;
  }
  /* 웹페이지 다크모드(강제 변환)는 밝은 하늘색 배경 이미지(con11_01.png)는 그대로 두고 글자색만 밝게 뒤집어 제목·설명이 배경에 묻힌다.
     배경을 글자 모양으로 자른 글자(background-clip:text)는 안 뒤집히므로 글자색(currentColor)을 그대로 칠해 둔다 — 밝은 화면에선 같은 색이다.
     (마우스 광원 ink 구조와 같은 모양이지만 광원 엔진은 600px 미만·터치에선 돌지 않아 겹치지 않는다) */
  .con11_title_first,
  .con11_title_point_text,
  .con11_title_rest,
  .con11_desc {
    background-image: linear-gradient(currentColor, currentColor);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .con11_bar {
    width: 92vw;
    margin-top: 6vw;
    padding: 3vw;
  }
  .con11_compare {
    width: 92vw;
    height: auto;
    flex-direction: column;
    /* 자식이 legacy·plus 둘뿐이라 이 gap 은 정확히 둘 사이에만 걸린다. */
    gap: 2vw;
    margin-top: 5vw;
  }
  .con11_legacy,.con11_plus {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5vw 4vw;
    align-items: center;
  }
  .con11_legacy_title,.con11_plus_title {
    margin: 0;
    white-space: normal;
    text-align: center;
  }
  .con11_legacy_list {
    width: 100%;
    margin: 4vw 0 0;
    gap: 2vw;
  }
  /* center 면 문구 길이마다 텍스트 시작점이 달라져 훑기 어렵다. PC 처럼 아이콘 좌측 고정 + 텍스트 시작점 일치 */
  .con11_legacy_item {
    height: auto;
    justify-content: flex-start;
    column-gap: 4vw;
    padding: 3vw 5vw;
  }
  .con11_legacy_item02,.con11_legacy_item03 {
    margin-top: 0;
  }
  .con11_legacy_icon01,.con11_legacy_icon02,.con11_legacy_icon03 {
    width: 8vw;
    margin-left: 0;
  }
  .con11_plus_inner {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 3vw;
  }
  .con11_plus_left,.con11_app_card {
    width: 100%;
  }
  .con11_map,.con11_graph {
    margin-top: 3vw;
  }
  /* 사진을 흐름에 넣고 문구를 그 아래로 내렸더니 카드 하나가 46.4vw 였다.
     PC 처럼 사진을 카드 배경으로 깔고 문구를 우하단에 얹는다 — 사진 크기는 그대로 두고 카드만 36vw 로 줄어든다.
     (.con11_data_photo 의 position 리셋을 걷어내 PC 의 absol 을 그대로 쓴다) */
  /* 사진(84vw 폭 → 32.7vw 높이)을 카드보다 살짝 크게 두고 위아래 1.3vw 씩 잘라낸다.
     .con11_data_card 는 PC 에서 overflow:hidden 이라 잘린다 — 지도·그래프 둘 다 가장자리 여백이라 손실 없음 */
  .con11_data_card {
    height: 30vw;
    padding: 0;
  }
  .con11_data_copy {
    margin: auto 5vw 3vw 0;
  }
  /* PC 는 좁은 세로 컬럼이라 로고→설정→문구를 세로로 쌓는다. 모바일 카드는 84vw 로 넓은데 그대로 쌓으면
     카드 하나가 84vw(315px)를 먹는다 → 로고와 설정을 가로로 나란히 두고 문구만 아래 줄로 내린다(width:100% 가 줄바꿈). */
  .con11_app_card {
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 4vw;
    row-gap: 3vw;
    column-gap: 5vw;
  }
  .con11_app_logos {
    width: 40vw;
  }
  .con11_app_copy {
    width: 100%;
  }
  /* 로고 3개(.con11_app_logos / _baemin / _yogiyo / _coupang)는 모바일 오버라이드를 두지 않는다.
     PC 값이 전부 % 라 그대로 비례 축소되고, 쿠팡이츠가 absol 로 앞에 겹쳐 한 덩어리로 읽힌다.
     wrap + 쿠팡 relative 70% 로 덮었더니 쿠팡만 다음 줄로 떨어져 카드가 135.6vw 로 부풀었었다. */
  .con11_app_settings {
    width: 22vw;
    margin-top: 0;
  }
  .con11_app_copy {
    margin-top: 0;
  }
  .con12_row {
    width: 92vw;
    margin-left: 0;
    flex-direction: column;
    align-items: center;
    gap: 6vw;
  }
  .con12_left {
    width: 100%;
    margin-top: 0;
    align-items: center;
  }
  .con12_pill_img {
    width: 76vw;
    aspect-ratio: auto;
    padding: 3vw 0;
  }
  .con12_pill_img > img {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  .con12_pill_copy {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
  }
  .con12_title {
    margin: 5vw 0 0;
    align-items: center;
  }
  .con12_title_line {
    justify-content: center;
  }
  .con12_apps {
    margin: 5vw 0 0;
    gap: 2vw;
  }
  .con12_app:nth-child(n) {
    margin-left: 0;
  }
  .con12_app_img,.con12_app:nth-child(n+2) .con12_app_img {
    width: 18vw;
  }
  /* 시안은 쿠폰이 폰 화면을 가로질러 겹친다 — "이 앱 화면의 할인을 본사가 전액 부담" 이 한 장면이다.
     세로로 풀어 놓으면 폰 따로 쿠폰 따로가 돼 둘의 관계가 끊긴다 → 흐름은 유지하고 음수 마진으로 겹친다 */
  .con12_stage {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
  }
  /* 쿠폰(76vw)과의 비율을 시안(431:338 = 1.27)에 맞춘다. 48vw 로는 1.58 이라 쿠폰이 폰을 압도했다 */
  .con12_phone_front_img {
    width: 60vw;
    margin-left: 0;
    margin-right: 15.8vw;
  }
  .con12_phone_back_img,.con12_phone_clip_img {
    width: 44vw;
    left: 43.4%;
    top: 8vw;
  }
  .con12_phone_shadow_img {
    width: 80vw;
    left: 2%;
    top: 14vw;
  }
  .con12_percent_img {
    display: none;
  }
  /* 폰 아래로 47vw 끌어올려 화면 하단(쿠폰받기 영역) 위에 얹는다.
     absol 로 띄우지 않는 이유 — 흐름에 두어야 쿠폰 하단까지가 stage 높이가 된다(높이를 박지 않는다).
     margin-left 는 시안의 우측 치우침 재현용(가운데정렬 대용이 아니다) */
  .con12_coupon {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 55vw;
    flex-direction: column;
    margin-top: -26vw;
    margin-left: 24vw;
    padding: 8.1vw 0 4vw;
  }
  .con12_coupon_effect {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .con12_coupon_shadow_img {
    width: 100%;
    top: 10vw;
  }
  .con12_coupon_body_img {
    width: 100%;
  }
  .con12_coupon_logo_img {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 14.5vw;
    margin-right: 2.3vw;
  }
  .con12_coupon_title,.con12_coupon_copy {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: rotate(-9.028deg);
  }
  .con12_coupon_title {
    margin-top: 2.1vw;
    margin-right: 1.2vw;
  }
  .con12_coupon_copy {
    margin-top: 0.7vw;
    margin-left: 2.7vw;
  }
  /* 메뉴 사진은 각 메뉴 카드 바로 위에 놓는다 — 사진 · 카드 · 사진 · 카드 순의 2x2 (기획 수정안 260930).
     .con13_list 를 display:contents 로 풀어 li(카드)와 사진을 같은 격자에 넣고, 제목·설명·출처는 두 칸을 가로지른다.
     열 폭 44.62vw ×2 + 사이 2.76vw = 92vw (예전 .con13_list 폭 92vw · 카드 폭 48.5% 와 같다). */
  .con13_surface {
    display: grid;
    grid-template-columns: repeat(2, 44.62vw);
    justify-content: center;
    align-items: start;
    width: 100%;
    padding: 12vw 0;
    column-gap: 2.76vw;
  }
  /* .mobile-pc 의 display:flex 를 br 에만 되돌린다. br 이 블록이 되면 <p> 가 anonymous block 으로
     쪼개져 폭이 줄고, 부모 .con13_surface 가 row+wrap 이라 음식 이미지가 같은 줄로 올라온다 */
  br.mobile-pc {
    display: inline !important;
  }
  .con13_title,.con13_desc {
    max-width: 90vw;
    white-space: normal;
  }
  /* PC 의 white-space:pre 를 normal 로 덮으면 span 끝 공백이 flex item 경계에서 잘려
     "출시하지않습니다." 로 붙는다. 줄바꿈은 .con13_title 의 normal 이 담당한다 */
  .con13_title_leaf {
    white-space: pre;
  }
  .con13_title {
    grid-area: 1 / 1 / 2 / 3;
    justify-self: center;
  }
  .con13_desc {
    grid-area: 2 / 1 / 3 / 3;
    justify-self: center;
    width: 90vw;
    margin-top: 4vw;
  }
  /* 좌우 가장자리 absol 이라 화면 밖으로 절반이 잘리고 카드까지 덮었다.
     메뉴 사진은 이 섹션의 콘텐츠지 장식이 아니다 → 흐름으로 끌어내려 온전히 보여주고, 각자 자기 카드 칸 바로 위 칸에 앉힌다.
     부유(con13-m05)·하나만 선명 순환(con13-m07) 은 그대로 동작한다. 폭은 PC 사진 폭(334·390·343·315)의 비율을 따르되
     세로가 긴 계란빵만 줄였다. */
  .con13_food_img {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    align-self: end;
    justify-self: center;
    margin-top: 6vw;
  }
  .con13_food_waffle {
    grid-area: 3 / 1;
    width: 28vw;
  }
  .con13_food_egg {
    grid-area: 3 / 2;
    width: 26vw;
  }
  .con13_food_tea {
    grid-area: 5 / 1;
    width: 26vw;
    margin-top: 7vw;
  }
  .con13_food_tteok {
    grid-area: 5 / 2;
    width: 27vw;
    margin-top: 7vw;
  }
  /* PC 와 같은 2x2 로 되돌린다 — 세로 4장이면 섹션이 1083px 로 늘어나
     판매량 4개를 서로 비교할 수 없다(멀리 떨어져 한 화면에 안 들어온다) */
  .con13_list {
    display: contents;
  }
  .con13_item {
    width: 100%;
  }
  .con13_item_waffle {
    grid-area: 4 / 1;
  }
  .con13_item_egg {
    grid-area: 4 / 2;
  }
  .con13_item_tea {
    grid-area: 6 / 1;
  }
  .con13_item_tteok {
    grid-area: 6 / 2;
  }
  .con13_badge,.con13_badge_waffle,.con13_badge_tea {
    padding: 1.6vw 3.4vw;
  }
  /* 카드 폭이 167px 로 줄어 좌우 2열로는 "약 700,000개" 가 안 들어간다 → 지표를 위아래로 */
  .con13_panel {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: -2.4vw;
    padding: 6.5vw 4vw 5vw;
  }
  .con13_metric_time,.con13_metric_sales,.con13_metric_sales_right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    column-gap: 2vw;
  }
  .con13_clock_img,.con13_store_img {
    width: 6vw;
    margin-top: 0;
  }
  .con13_caption_time,.con13_caption_sales {
    margin-top: 0;
  }
  .con13_value {
    width: 100%;
    margin-top: 1.4vw;
  }
  /* PC 는 좌우 2열 사이 세로선이다. 위아래 2행이 됐으니 가로선으로 눕힌다 */
  .con13_divider,.con13_divider_waffle,.con13_divider_other {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: 1px;
    margin: 3.4vw 0;
  }
  .con13_source {
    grid-area: 7 / 1 / 8 / 3;
    justify-self: center;
    max-width: 90vw;
    margin-top: 5vw;
    white-space: normal;
  }
  .con15_heading,.con15_title,.con15_desc {
    max-width: 92vw;
  }
  .con15_title {
    padding-right: 0;
  }
  .con15_title_line,.con15_desc_line {
    white-space: normal;
  }
  .con15_impact {
    margin-top: 1vw;
  }
  /* 웹페이지 다크모드에선 그라데이션 글자(남색 → 하늘색)가 안 뒤집혀 어두운 바탕에 앞쪽 「직접」이 묻힌다 — con03 「상위 1%」와 같은 이유로
     모바일은 단색(그라데이션의 평균색). 밝은 화면에선 비슷하게 보이고 다크모드에선 밝게 뒤집혀 읽힌다. */
  .con15_impact_text {
    background-image: none;
    color: #0670a0;
  }
  /* 글로우는 '직접합니다' 뒤에 깔리는 빛번짐 — 세로 중심이 글자 중심과 맞아야 한다. 22vw 면 1.7vw 아래로 쏠린다 */
  .con15_glow {
    width: 72vw;
    top: 20.3vw;
  }
  .con15_divider {
    height: 7vw;
    margin-top: 4vw;
  }
  .con15_desc {
    margin-top: 4vw;
  }
  .con15_desc_emphasis {
    margin-top: 2vw;
    padding: 1vw 2vw;
  }
  .con15_capsule {
    width: 92vw;
    margin-top: 7vw;
    padding: 7vw 0;
    border-radius: 7vw;
  }
  /* 6개를 1열로 쌓아 리스트만 317.6vw 였다 → 2열 3행. 셀 폭은 (100% − gap) / 2 로 잡아 반올림 오차가 안 쌓이게 한다. */
  .con15_list {
    width: 88%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3vw;
  }
  /* (100% − gap)/2 로 딱 맞추면 375px 에서 반올림으로 합이 컨테이너를 넘겨 3행째부터 1개씩 떨어진다 → 0.6vw 여유 */
  .con15_item {
    width: calc(50% - 1.8vw);
    padding: 3vw 0 4vw;
  }
  .con15_photo,.con15_item:nth-child(6) > div {
    width: 84%;
  }
  .con15_caption {
    margin-top: 3vw;
  }
  /* 2열 3행이라 화살표는 가로로 붙는 쌍(1-2 · 3-4 · 5-6) 사이에만 둔다. 행이 바뀌는 자리(2→3, 4→5)는 뺀다.
     left 를 auto 로 되돌리면 캡슐(.flex)의 static position = 가로 정중앙 46vw 에 놓이는데,
     실측상 두 열 사이 틈 중심이 정확히 46vw 라 좌표를 따로 안 줘도 맞는다.
     top 은 각 행 사진 중심(19.3 / 57.0 / 94.7vw) − 반지름 3.5vw. 320·375·599 에서 동일한 값으로 확인. */
  .con15_arrow {
    width: 7vw;
    height: 7vw;
    box-shadow: 0 0 1.6vw rgba(7, 35, 70, .36);
  }
  .con15_arrow_2,
  .con15_arrow_4 {
    display: none;
  }
  .con15_arrow_1 {
    left: auto;
    top: 15.8vw;
  }
  .con15_arrow_3 {
    top: 53.5vw;
  }
  .con15_arrow_5 {
    left: auto;
    top: 91.2vw;
  }
  .con15_arrow_icon {
    width: 2vw;
    height: 3.4vw;
  }
  .con16_head {
    max-width: 92vw;
    padding-right: 0;
  }
  .con16_title {
    flex-wrap: wrap;
    justify-content: center;
  }
  .con16_gallery {
    box-sizing: border-box;
    width: 92vw;
    margin-top: 6vw;
    padding-bottom: 12vw;
  }
  .con16_main_swiper.swiper {
    width: 100%;
  }
  .con16_prev {
    width: 9vw;
    top: auto;
    bottom: 0;
    left: 33%;
  }
  .con16_next {
    width: 9vw;
    top: auto;
    bottom: 0;
    right: 33%;
  }
  .con16_arrow {
    width: 2vw;
    height: 3.5vw;
  }
  .con16_thumbs.swiper {
    width: 92vw;
    margin-top: 4vw;
  }
  .con16_thumb_item.swiper-slide {
    margin-right: 0;
  }
  .con16_bgword {
    top: auto;
    left: 4%;
    font-size: 16vw;
    line-height: 1;
  }
  .con16_bgword {
    bottom: 13vw;
  }
  .con16_star {
    top: 16.5vw;
    left: 0.5%;
    font-size: 10.7vw;
    line-height: 1;
  }
  /* PC 는 캔버스가 넓어 타원의 좌우 곡률이 화면 밖으로 빠지고 위아래 완만한 호만 보인다.
     모바일(493px 타원 / 375px 화면)에선 곡률이 그대로 화면에 들어와 사진 옆·썸네일 아래로
     흰 초승달이 삐져나온다. 배경은 pale-blue 한 겹으로 두고 사진이 서게 한다. */
  .con16::before {
    display: none;
  }
  .con17_head {
    max-width: 92vw;
  }
  .con17_label {
    padding: 2vw 4vw;
    /* PC 글로우는 1905 캔버스 비례(ellipse 219x115 at y115 / 라벨 높이 50)라 코어가 라벨 "아래"에 앉는다.
       모바일은 라벨이 10vw 로 상대적으로 4배 두꺼워져 그 코어가 한가운데로 들어와 흰 얼룩이 됐다.
       PC 와 같은 비율(rx 4.38H · ry 2.31H · cy 2.29H)로 10vw 기준 재계산. 첫 슬롯의 --light-layer 는 유지 */
    background-image: var(--light-layer, none), radial-gradient(ellipse 43.8vw 23.1vw at 50.6% 22.9vw, #04ffff 54.5%, #04c1e7 60%, #039cd9 65%, #0384d0 70%, #0275ca 75%, #026cc7 80%, #0267c5 85%, #0265c4 90%, #0263c3 100%);
  }
  .con17_title {
    margin-top: 3vw;
    white-space: normal;
  }
  .con17_desc {
    max-width: 90vw;
    margin-top: 4vw;
    white-space: normal;
  }
  /* PC 는 블러 처리된 비용표를 카드가 한가운데서 덮는다(= 잠긴 정보). 모바일은 카드를 표 아래로 내려서
     그 은유가 사라져 있었다. 표를 카드보다 크게 세워 배경으로 돌리고 카드를 그 위에 얹는다 */
  .con17_table {
    width: 100%;
    height: 112vw;
    object-fit: cover;
    object-position: left center;
    margin-top: -4vw;
    margin-bottom: -95.6vw;
    opacity: 0.3;
  }
  .con17_card {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 84vw;
    margin-top: 0;
    margin-bottom: 17.4vw;
    padding: 5vw;
  }
  .con17_lock {
    width: 8vw;
  }
  .con17_card_title {
    margin-top: 2.5vw;
    white-space: normal;
  }
  .con17_card_desc {
    margin-top: 2.5vw;
    white-space: normal;
  }
  .con17_card_title_line,.con17_card_desc_line {
    white-space: normal;
  }
  /* 폭을 열어두면 첫 문장이 「…투자금과 / 수익 구조를」 로 끊겨 둘째 줄이 두 어절만 남는다.
     세 줄 폭이 고르게 떨어지는 지점까지 좁히고 어절 중간 분리를 막는다 */
  .con17_card_desc {
    max-width: 55vw;
    word-break: keep-all;
  }
  .con17_call {
    width: 64vw;
    margin-top: 3.5vw;
    padding: 2.5vw 0;
  }
  .con18_search {
    width: 92vw;
    margin-top: 5vw;
    padding: 3vw 4vw;
  }
  .con18_search_input {
    margin-top: 0;
  }
  .con18_search_icon {
    width: 6vw;
  }
  .con18_list {
    width: 92vw;
    margin-top: 6vw;
    flex-grow: 0;
  }
  /* 뱃지를 첫 줄에 붙인다 — flexrow 유틸의 align-items:center 를 그대로 두면
     질문이 두 줄일 때 Q 가 두 줄 사이 허공에 뜬다 */
  .con18_item:nth-child(n) .con18_question {
    align-items: flex-start;
    padding: 4vw;
    gap: 3vw;
  }
  .con18_item:nth-child(n) .con18_question_text {
    margin: 0;
  }
  .con18_question_text {
    min-width: 0;
  }
  /* 이 섹션은 .con18 그룹 규칙의 text-align:center 를 물려받아 질문·답변이 가운데로 몰려 있었다.
     FAQ 는 훑어 읽는 글이라 매 줄 시작점이 달라지면 읽는 속도가 떨어진다 → PC 와 같은 좌측 정렬 */
  .con18_question_text,.con18_answer_text {
    text-align: left;
  }
  .con18_badge {
    width: 8vw;
    padding: 1vw 0;
  }
  /* 뱃지(26px)가 본문 첫 줄(22.8px)보다 커서 top 을 맞추면 1.6px 내려앉는다 — PC 와 같은 광학 보정 */
  .con18_item:nth-child(n) .con18_badge_q,.con18_badge_a {
    margin-top: -0.4vw;
  }
  /* 펼침 버튼은 질문 블록 전체를 제어하므로 첫 줄이 아니라 세로 중앙에 둔다 */
  .con18_toggle {
    align-self: center;
    width: 8vw;
  }
  .con18_chevron {
    width: 3vw;
  }
  /* 우측 패딩 = 질문 쪽 토글(8vw) + gap(3vw) + 기본(2vw). 답변만 41px 더 뻗어 Q/A 우측 끝이 어긋나 있었다 */
  .con18_answer_inner {
    align-items: flex-start;
    height: auto;
    padding: 4vw 15vw 5vw 4vw;
    gap: 3vw;
    overflow-y: visible;
  }
  .con18_answer_text {
    min-width: 0;
    margin: 0;
  }
  .con18_pager {
    margin-top: 5vw;
    gap: 2vw;
  }
  .con18_page_control {
    width: 11vw;
    height: 11vw;
  }
  .con18_arrow_icon {
    width: 2vw;
    height: 3vw;
  }
  .con18_empty {
    width: 92vw;
    padding: 6vw 0;
  }
  .con20_logo_wrap {
    width: 25vw;
  }
  .con20_title {
    margin-top: 4vw;
  }
  .con20_form {
    width: 92vw;
    margin-top: 6vw;
    padding: 8vw 0 7vw;
  }
  .con20_fields {
    width: 84%;
  }
  .con20_row {
    flex-direction: column;
    align-items: center;
    gap: 4.5vw;
  }
  /* 폼 입력만 좌측 정렬 — 라벨이 자기 입력칸 왼쪽 위에 붙어야 어느 칸 라벨인지 바로 읽히고,
     타이핑 커서도 왼쪽에 고정된다(가운데 정렬은 글자가 늘 때마다 커서가 좌우로 흔들린다).
     로고·타이틀·동의문구는 가운데 유지 = 모바일 중앙정렬 원칙 그대로. */
  .con20_field,.con20_message {
    width: 100%;
    align-items: flex-start;
    gap: 1.8vw;
  }
  .con20_label {
    padding-left: 1vw;
    text-align: left;
  }
  .con20_row_second,.con20_message {
    margin-top: 4.5vw;
  }
  .con20_name .con20_control,.con20_phone .con20_control,.con20_location .con20_control,.con20_select {
    padding: 3.6vw 4.5vw;
    min-height: 13vw;
    text-align: left;
  }
  /* 흰 폼 위 흰 입력칸 + 연한 하늘 테두리라 "어디를 눌러야 하는지"가 안 보였다 → 옅은 바탕으로 칸을 드러낸다 */
  .con20_control,.con20_select {
    background: #f4fafd;
    border-color: #d3e7f0;
  }
  /* 리스트를 열면 JS 가 첫 옵션으로 포커스를 옮기므로 :focus 만으론 열린 칸이 표시되지 않는다 */
  .con20_control:focus,.con20_select:focus,.con20_select[aria-expanded="true"] {
    background: #fff;
    border-color: var(--color-point);
    outline: none;
    box-shadow: 0 0 0 3px rgba(6, 162, 219, 0.14);
  }
  .con20_select {
    justify-content: space-between;
  }
  .con20_arrow {
    transition: transform var(--transition-ui) var(--ease-ui);
    color: #9ab6c5;
  }
  .con20_select[aria-expanded="true"] .con20_arrow {
    transform: rotate(180deg);
  }
  /* 펼쳐도 폼 높이는 그대로 — 흐름에 넣지 않고 PC 처럼 select 아래로 띄운다.
     7개를 다 펼치면 섹션 overflow 에 잘리므로 높이를 제한하고 안에서 스크롤시킨다. */
  .con20_options {
    top: calc(100% + 2vw);
    padding: 1.5vw;
    max-height: 48vw;
    border-color: #d3e7f0;
    box-shadow: 0 2vw 5vw rgba(2, 98, 195, 0.16);
  }
  .con20_option {
    padding: 3.2vw 4vw;
    text-align: left;
    border-radius: 2vw;
  }
  .con20_message .con20_control {
    height: auto;
    min-height: 28vw;
    padding: 4vw 4.5vw;
    text-align: left;
    resize: none;
  }
  .con20_consent {
    width: 100%;
    margin: 5.5vw 0 0;
    padding-left: 1vw;
    justify-content: flex-start;
    gap: 2.2vw;
  }
  .con20_check {
    width: 5.4vw;
    height: 5.4vw;
    flex-shrink: 0;
    border-color: #cbdfe9;
  }
  /* 체크가 ✓ 문자만 켜지는 방식이라 눌렀는지 확인이 약했다 → 칸을 포인트색으로 채운다 */
  .con20_check:checked {
    background: var(--color-point);
    border-color: var(--color-point);
    color: #fff;
  }
  /* 버튼 = 입력칸과 같은 폭의 풀바. PC 는 247x69 pill 이미지를 깔지만 그 폭에서 가로로 늘리면
     이미지의 반원 끝이 타원이 되어 border-radius 곡선과 어긋나 양 끝에 흰 틈이 생긴다
     → 같은 색 그라디언트로 대체 (색은 con20_03.png 세로 스캔값: #0262c3 → #04dbf1) */
  .con20_submit {
    width: 84%;
    margin-top: 6vw;
    padding: 4.4vw 6vw;
    justify-content: center;
    align-items: center;
    gap: 2.6vw;
    background: var(--light-layer, none) center / 100% 100% no-repeat,
                linear-gradient(180deg, #0262c3 0%, #0262c3 52%, #026fc8 70%, #0281cf 83%, #039ad9 93%, #04bbe5 100%);
    box-shadow: 0 1.4vw 3.6vw rgba(2, 98, 195, 0.26);
  }
  .con20_submit:disabled {
    background-image: linear-gradient(180deg, #0262c3 0%, #0262c3 52%, #026fc8 70%, #0281cf 83%, #039ad9 93%, #04bbe5 100%);
  }
  .con20_icon_wrap {
    width: 5vw;
  }
  .con20_submit_text {
    margin-top: 0;
  }
  .con20_status {
    width: 84%;
    margin-top: 4vw;
  }
  /* 4vw 는 로브 대비 글자가 작아 pill 안이 허전하다. PC 비율(로브 폭의 약 44%)에 맞춰 키움 */
  .con11_tag_lead,.con11_tag_number {
    font-size: 4.6vw;
    letter-spacing: -0.1vw;
    line-height: 1.4;
  }
  .con11_title_first {
    font-size: 6vw;
    letter-spacing: -0.2vw;
    line-height: 1.3;
  }
  .con11_title_second {
    font-size: 7vw;
    letter-spacing: -0.2vw;
    line-height: 1.3;
  }
  .con11_desc,.con11_legacy_title,.con11_plus_title {
    font-size: 4vw;
    letter-spacing: -0.1vw;
    line-height: 1.5;
  }
  .con11_bar {
    font-size: 4.2vw;
    letter-spacing: -0.1vw;
    line-height: 1.5;
  }
  .con11_legacy_copy,.con11_data_copy,.con11_app_copy {
    font-size: 3.8vw;
    letter-spacing: -0.1vw;
    line-height: 1.5;
  }
  .con12_pill_copy {
    font-size: 4.2vw;
    letter-spacing: -0.1vw;
    line-height: 1.4;
  }
  .con12_title {
    font-size: 8vw;
    letter-spacing: -0.2vw;
    line-height: 1.3;
  }
  .con12_coupon_title {
    font-size: 8vw;
    letter-spacing: -0.2vw;
    line-height: 1.2;
  }
  .con12_coupon_copy {
    font-size: 4.1vw;
    letter-spacing: -0.1vw;
    line-height: 1.4;
  }
  .con13_title,.con15_title,.con16_title,.con17_title,.con18_title,.con20_title {
    font-size: 7vw;
    letter-spacing: -0.2vw;
    line-height: 1.3;
  }
  .con13_desc,.con15_desc_line,.con15_desc_emphasis,.con17_desc {
    font-size: 4vw;
    letter-spacing: -0.1vw;
    line-height: 1.6;
  }
  .con13_badge {
    font-size: 4vw;
    letter-spacing: -0.1vw;
    line-height: 1.4;
  }
  .con13_caption {
    font-size: 3.5vw;
    letter-spacing: -0.1vw;
    line-height: 1.5;
  }
  .con13_value {
    font-size: 5.4vw;
    letter-spacing: -0.2vw;
    line-height: 1.3;
  }
  .con13_source {
    font-size: 3.3vw;
    letter-spacing: -0.1vw;
    line-height: 1.6;
  }
  .con15_impact {
    font-size: 8vw;
    letter-spacing: -0.2vw;
    line-height: 1.3;
  }
  .con15_caption,.con15_item:nth-child(n+4) > p {
    font-size: 4vw;
    letter-spacing: -0.1vw;
    line-height: 1.5;
  }
  .con16_lead {
    font-size: 4.5vw;
    letter-spacing: -0.1vw;
    line-height: 1.5;
  }
  .con17_label {
    font-size: 4vw;
    letter-spacing: -0.1vw;
    line-height: 1.5;
  }
  .con17_card_title {
    font-size: 5vw;
    letter-spacing: -0.1vw;
    line-height: 1.4;
  }
  .con17_card_desc {
    font-size: 3.5vw;
    letter-spacing: -0.1vw;
    line-height: 1.5;
  }
  .con17_call_label {
    font-size: 3.5vw;
    letter-spacing: -0.1vw;
    line-height: 1.5;
  }
  .con17_call_number {
    font-size: 6vw;
    letter-spacing: -0.1vw;
    line-height: 1.4;
  }
  .con18_search_input,.con18_question_text,.con18_answer_text,.con18_empty {
    font-size: 3.8vw;
    letter-spacing: -0.1vw;
    line-height: 1.6;
  }
  .con18_badge,.con18_page {
    font-size: 3.5vw;
    letter-spacing: -0.1vw;
    line-height: 1.4;
  }
  .con20_label,.con20_phone .con20_label,.con20_inflow .con20_label {
    font-size: 3.8vw;
    letter-spacing: -0.1vw;
    line-height: 1.5;
  }
  .con20_control,.con20_phone .con20_control,.con20_select,.con20_option {
    font-size: 4.2vw;
    letter-spacing: -0.1vw;
    line-height: 1.5;
  }
  .con20_consent_text,.con20_status {
    font-size: 3.6vw;
    letter-spacing: -0.1vw;
    line-height: 1.5;
  }
  .con20_arrow {
    font-size: 2.9vw;
    letter-spacing: -0.1vw;
    line-height: 1.5;
  }
  .con20_check {
    font-size: 3.5vw;
    letter-spacing: -0.1vw;
    line-height: 1;
  }
  .con20_submit_text {
    font-size: 4.5vw;
    letter-spacing: -0.1vw;
    line-height: 1.4;
  }
  /* 회전 별표 — PC 의 기준 글자 대비 오프셋·크기비(제목 글자크기 em)를 모바일 제목 크기로 환산 (con16_star 는 con16 블록) */
  .con01_star {
    top: -2.4vw;
    left: 16.6%; /* 두 줄 제목(2026-10-02 문구 변경)의 첫 줄 왼쪽 위 — 첫 줄은 가운데 정렬이라 안쪽에서 시작한다. 이전 0.6% */
    font-size: 9.8vw;
    line-height: 1;
  }
  .con02_star {
    top: -1.9vw;
    left: 13.1%;
    font-size: 9.8vw;
    line-height: 1;
  }
  /* 형광펜 마커 — PC 는 별표와 같은 left(32.2%), 폭은 제목 글자크기의 2.95배(177/60).
     모바일 제목 6.4vw → 6.4*2.95 = 18.9vw. 세로는 top 미지정(부모 flex 중앙정렬)이 맞춘다 */
  .con02_scribble {
    left: 13.1%;
    width: 18.9vw;
  }
  .con04_star {
    top: -1.3vw;
    left: 91.7%;
    font-size: 7.4vw;
    line-height: 1;
  }
  .con05_star {
    top: -1.8vw;
    left: -5.3%;
    font-size: 9.8vw;
    line-height: 1;
  }
  .con06_star {
    top: 7.2vw;
    left: -9.5%;
    font-size: 9.8vw;
    line-height: 1;
  }
  .con07_star {
    top: -2.4vw;
    left: 7.2%;
    font-size: 9.8vw;
    line-height: 1;
  }

  :root {
  }


section img {
  width: 100%;
}






  /* ─────────────────────────────────────────────────────────────
     모바일 보더라디우스 승격
     PC 는 calc(var(--px)*N) / calc(N/1905*100vw) 라 375px 폭에서 1~8px 로 찌부된다
     (N=8 → 1.6px · N=12 → 2.4px · N=21 → 4.1px · N=40 → 7.9px = 거의 직각).
     모바일에서만 vw 로 다시 잡는다 — PC 5·8 → 2vw / 12 → 2.5vw / 20~22 → 3vw /
     25~34 → 4vw / 40 → 5vw. 원(50%)·pill(50vw)·inherit 은 폭 비례라 대상 아님.
     ───────────────────────────────────────────────────────────── */
  /* main · con02 */
  .main_stat { border-radius: 4vw; }
  .con02_rank { border-radius: 2vw; }
  /* con03 */
  .con03_card_panel { border-radius: 3vw; }
  .con03_label_avg { border-radius: 2vw; }
  .con03_label_brand { border-radius: 2vw; }
  /* con04 */
  .con04_box { border-radius: 5vw; }
  .con04_item { border-radius: 3vw; }
  /* con05 */
  .con05_duration { border-radius: 2.5vw; }
  /* con07 */
  .con07_panel { border-radius: 5vw; }
  .con07_stage { border-radius: 4vw; }
  .con07_thumb_img { border-radius: 2.5vw; }
  /* con08 */
  .con08_map_frame { border-radius: 5vw; }
  /* con09 */
  .con09_label_long { border-radius: 2vw; }
  .con09_label_short { border-radius: 2vw; }
  /* con10 */
  .con10_bar { border-radius: 2.5vw; }
  .con10_legacy { border-radius: 3vw; }
  .con10_legacy_item { border-radius: 2.5vw; }
  .con10_plus { border-radius: 4vw; }
  .con10_plus_card { border-radius: 3vw; }
  /* con11 */
  .con11_bar { border-radius: 2.5vw; }
  .con11_legacy { border-radius: 3vw; }
  .con11_legacy_item { border-radius: 2.5vw; }
  .con11_plus { border-radius: 3vw; }
  .con11_data_card { border-radius: 3vw; }
  .con11_app_card { border-radius: 3vw; }
  /* con13 */
  .con13_panel { border-radius: 4vw; }
  /* con14 — 기존 1.5vw(5.6px) 는 라벨 높이 30px 대비 모서리가 안 읽힌다 */
  .con14_label { border-radius: 2vw; }
  /* con15 */
  .con15_item { border-radius: 3vw; }
  /* con16 */
  .con16_main_photo { border-radius: 3vw; }
  .con16_thumb_photo { border-radius: 2.5vw; }
  /* con17 */
  .con17_label { border-radius: 2.5vw; }
  .con17_card { border-radius: 3vw; }
  .con17_call { border-radius: 2.5vw; }
  /* con18 */
  /* PC 의 mask 스톱이 전부 vw(1905 기준 px)라 모바일에선 172px 에서 전부 투명해진다.
     연하늘 박스가 제목 바로 밑에서 끊겨 나머지가 흰 바탕이 됐다
     → PC 와 같은 비율(불투명 34% → 91% 소멸)을 % 로 다시 쓴다 */
  .con18::before {
    width: 98vw;
    border-radius: 4vw;
    mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 34%,
      rgba(0, 0, 0, 0.8) 48%,
      rgba(0, 0, 0, 0.5) 62%,
      rgba(0, 0, 0, 0.25) 74%,
      rgba(0, 0, 0, 0.08) 84%,
      rgba(0, 0, 0, 0.01) 91%);
  }
  .con18_search { border-radius: 3vw; }
  /* con19 */
  .con19_frame { border-radius: 3vw; }
  .con19_naver { border-radius: 2vw; }
  .con19_popup_naver { border-radius: 2vw; }
  /* con20 */
  .con20_form { border-radius: 4vw; }
  .con20_control { border-radius: 3vw; }
  .con20_select { border-radius: 3vw; }
  .con20_options { border-radius: 3vw; }

}