@charset "utf-8";

/* =========================================================
   모바일 앱 스타일 — PC 메인 전용 (단계적 적용)
   ---------------------------------------------------------
   ● 이 파일은 기존 main.css 를 "덮어쓰지" 않습니다.
   ● 모든 규칙은 .app-mode 안에서만 동작합니다.
   ● 되돌리려면(원상복구):
       theme/noble/shop/index.php 에서
         1) 이 파일을 부르는 <link> 한 줄
         2) <div class="wrapper app-mode"> 의 'app-mode' 한 단어
       이 두 가지만 지우면 됩니다.
   ========================================================= */


/* ---------------------------------------------------------
   [1단계] 가운데 좁은 폭 컨테이너 (앱 화면 틀)
   - 본문을 휴대폰처럼 가운데 좁은 컬럼으로 모읍니다.
   - 안쪽 구역(아이콘 격자, 카드 등)의 세부 모양은
     다음 단계에서 하나씩 정리합니다.
   --------------------------------------------------------- */

.app-mode {
  /* 앱 컬럼의 최대 폭 (휴대폰 화면 느낌) */
  --app-max-width: 480px;

  /* 좁은 컬럼이 가운데 떠 보이도록 바깥쪽 배경색 */
  background: #f2f2f4;
}

/* 본문 영역을 앱 폭으로 가운데 정렬 */
.app-mode .base_container {
  max-width: var(--app-max-width);
  margin: 0 auto;
  background: #ffffff;
}

/* 맨 위 배너도 본문과 같은 폭으로 가운데 정렬 */
.app-mode .slider_container.pc_only {
  max-width: var(--app-max-width);
  margin: 0 auto;
  /* 좁은 컬럼 밖(양옆 빈 공간)으로 다음 슬라이드가 새어 보이지 않도록 잘라냄.
     배너 요소에 swiper 클래스가 없어 CDN의 overflow:hidden 이 안 걸리는 것을 보완. */
  overflow: hidden;
}

/* 실제 Swiper 뷰포트(.topswiper)에서도 한 번 더 잘라 한 장만 노출 */
.app-mode .slider_container.pc_only .topswiper {
  overflow: hidden;
}


/* ---------------------------------------------------------
   [2단계] 검색창을 앱 스타일(흰 알약 + 핑크 돋보기)로
   - 핑크 각진 바 → 흰 바탕, 모서리 둥근 알약형
   - 돋보기 아이콘을 왼쪽으로, 핑크 포인트 색으로
   - 안내 문구는 연한 회색, 주변 여백 추가
   - 검색 기능(엔터/돋보기 클릭 제출)은 그대로
   --------------------------------------------------------- */

/* selheader: 배너 위로 끌어올리던 음수 top·고정 높이·overflow 해제하여
   둥근 알약이 잘리지 않게 하고, 주변 여백을 줌 */
.app-mode #section1 .selheader {
  top: 0;
  height: auto;
  overflow: visible;
  border-bottom: 0;
  padding: 8px 14px;
  box-sizing: border-box;
}

/* 검색 영역: 핑크 배경 제거 + 모바일 테두리 제거(PC처럼) */
.app-mode #section1 .selheader .search {
  width: 100%;
  background: transparent;
  text-align: left;
  border: 0;
}

/* 흰 알약 바: 아이콘 + 입력칸 가로 정렬 */
.app-mode #section1 .selheader .search form {
  display: flex;
  align-items: center;
  width: 100%;
  background: #ffffff;
  border: 1px solid #ececef;
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

/* 돋보기 버튼: 왼쪽 배치 + 흰색 SVG를 핑크색으로 마스킹 */
.app-mode #section1 .selheader .search form button {
  order: -1;            /* 입력칸보다 앞(왼쪽)으로 */
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0 9px 0 0;
  padding: 0;
  border: 0;
  background-color: #E0A41C;   /* 돋보기 색(핑크 포인트) */
  cursor: pointer;
  -webkit-mask: url('/theme/noble/img/mainSearchBtn.svg') no-repeat center center;
  mask: url('/theme/noble/img/mainSearchBtn.svg') no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* 원래 흰색 아이콘 이미지는 숨김(마스크로 대체) */
.app-mode #section1 .selheader .search form button img {
  display: none;
}

/* 입력칸: 투명 배경 + 진한 회색 글자 + 왼쪽 정렬 */
.app-mode #section1 .selheader .search input {
  flex: 1 1 auto;
  width: auto;
  background: transparent;
  border: 0;
  outline: 0;
  color: #333333;
  font-size: 14px;
  text-align: left;
}

/* 안내 문구(placeholder): 연한 회색 */
.app-mode #section1 .selheader .search input::placeholder {
  color: #b5b5bd;
}

/* 검색창을 '지역 선택 페이지로 가는 버튼'(링크)으로 — 기존 알약 모양 그대로 */
.app-mode #section1 .selheader .search .search-link {
  display: flex;
  align-items: center;
  width: 100%;
  background: #ffffff;
  border: 1px solid #ececef;
  border-radius: 999px;
  padding: 13px 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* 돋보기 아이콘(왼쪽, 핑크 마스크) */
.app-mode #section1 .selheader .search .search-link .search-ico {
  flex: 0 0 auto;
  order: 2;              /* 텍스트보다 뒤 → 오른쪽 끝 */
  width: 20px;
  height: 20px;
  margin: 0 0 0 10px;
  background-color: #E0A41C;   /* 허니타임 노랑 포인트 */
  -webkit-mask: url('/theme/noble/img/mainSearchBtn.svg') no-repeat center center;
  mask: url('/theme/noble/img/mainSearchBtn.svg') no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* 안내 문구(버튼 라벨): placeholder 와 같은 연한 회색 */
.app-mode #section1 .selheader .search .search-link .search-text {
  flex: 1 1 auto;
  order: 1;             /* 돋보기보다 앞 → 왼쪽 */
  color: #b5b5bd;
  font-size: 15px;
  text-align: left;
}


/* ---------------------------------------------------------
   [3단계] 검색창 아래 앱 스타일 아이콘 격자 메뉴
   - 한 줄 5개 × 2줄 = 10개, 칸 간격 균등
   - 칸 = 위 둥근 아이콘 + 아래 작은 메뉴 이름
   - 아이콘/색은 임시(기본 톤). 추후 실제 아이콘·톤으로 교체
   --------------------------------------------------------- */

/* app-mode 밖(원래 화면)에서는 숨김 — main.css 는 건드리지 않음 */
.app-menu-grid {
  display: none;
}

/* 격자: 한 줄 5칸, 자동 줄바꿈으로 2줄 */
.app-mode .app-menu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 16px;
  column-gap: 8px;
  padding: 14px;
  box-sizing: border-box;
}

/* 각 칸: 아이콘 + 이름 세로 정렬, 가운데 */
.app-mode .app-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* 둥근 아이콘: 원형 + 연회색 배경(임시), 가운데 이모지 */
.app-mode .app-menu-item .ami-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f4f4f6;
  font-size: 22px;
  line-height: 1;
}

/* 누를 때 살짝 눌리는 느낌(앱처럼) */
.app-mode .app-menu-item:active .ami-icon {
  background: #e9e9ee;
  transform: scale(0.96);
}

/* 메뉴 이름: 작고 깔끔한 회색 글자 */
.app-mode .app-menu-item .ami-label {
  font-size: 12px;
  line-height: 1.2;
  color: #555560;
  text-align: center;
  word-break: keep-all;
}

/* 겹침 해소: 기존 지역 아이콘 목록(.selcontents)이 main.css 의
   top:-50.7px 로 위로 끌려 올라가 새 격자와 겹치던 문제 해제.
   ([2단계]에서 .selheader 만 top:0 으로 풀어 어긋났던 것을 맞춤) */
.app-mode #section1 .selcontents {
  top: 0;
  border: 0;             /* 지역 아이콘을 감싸는 네모 박스 테두리 제거 */
}

/* 지역 영역 안내문구 (스페셜 업소와 같은 .sec-title 스타일 재사용) */
.app-mode .region-head {
  margin-top: 28px;
  padding: 0 14px 4px;
}


/* ---------------------------------------------------------
   [4단계] 인기순위 카드(#section2) → 앱 스타일 가로 스크롤 카드
   - 참고 앱의 '스페셜 업소'처럼 한 줄로 펼쳐 옆으로 스크롤
   - 좁은 카드에 맞춰 글자 크기만 정리(구조/내용은 그대로)
   - 색/톤은 기본 유지
   --------------------------------------------------------- */

/* 인기순위(베스트 업체) 섹션 전체 숨김
   - 제목 '베스트 업체' + 인기순위 카드가 모두 #section2 안에 있음
   - 코드는 보존하고 화면에서만 감춤 → 되살리려면 아래 display:none 한 줄만 삭제
   - (이 블록 아래 카드/제목 스타일은 숨김 상태라 보이지 않지만, 되살릴 때 쓰려고 그대로 둠) */
/* 추천 섹션(#section3: '힐링터치가 자신있게 추천합니다' + 지역별 텍스트 목록) 전체 숨김
   - 코드는 보존하고 화면에서만 감춤 → 되살리려면 이 display:none 한 줄만 삭제 */
.app-mode #section3 {
  display: none;
}

.app-mode #section2 {
  display: none;
  margin-top: 24px;
}
.app-mode #section2 .inner {
  padding: 0 14px;
}
.app-mode #section2 .inner h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  line-height: 1.3;
  word-break: keep-all;
}
.app-mode #section2 .inner .content {
  margin-top: 0;
}

/* 카드 줄: 한 줄로 펼치고 옆으로 스크롤 */
.app-mode #section2 .inner .content ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 12px;
  /* inner 좌우 패딩(14px)을 상쇄해 화면 끝까지 스크롤되게,
     아래 여백은 카드 그림자가 잘리지 않도록 확보 */
  margin: 0 -14px;
  padding: 4px 14px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
/* 스크롤바 숨김(앱 느낌) */
.app-mode #section2 .inner .content ul::-webkit-scrollbar {
  display: none;
}
.app-mode #section2 .inner .content ul {
  scrollbar-width: none;
}

/* 카드 한 장: 고정 폭(줄어들지 않음) → 약 2장 + 살짝 더 보여 스크롤 힌트 */
.app-mode #section2 .inner .content ul li {
  flex: 0 0 auto;
  width: 165px;
  scroll-snap-align: start;
}

/* 썸네일: 높이 고정해 카드 높이 정렬 */
.app-mode #section2 .inner .content ul li a .image {
  width: 100%;
  height: 110px;
}
.app-mode #section2 .inner .content ul li a .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 좁은 카드에 맞춰 내부 글자 크기만 정리 */
.app-mode #section2 .nemo-info-wrap {
  line-height: 1.45;
  padding: 10px 12px 14px;
  margin-bottom: 0;
}
.app-mode #section2 .ne-Name-cover {
  height: auto;
  padding-right: 0;
}
.app-mode #section2 .name-ne,
.app-mode #section2 .shop-name {
  font-size: 15px;
  letter-spacing: 0;
}
.app-mode #section2 .shop-type-nemo {
  position: static;
  display: inline-block;
  margin-top: 4px;
  height: auto;
  line-height: 1.4;
  font-size: 11px;
}
.app-mode #section2 .nemo-juso {
  height: auto;
  font-size: 12px;
}
.app-mode #section2 .subject-nemo {
  font-size: 12px;
  margin-bottom: 9px;
}
/* 가격: 좁은 카드에 맞게 — 라벨 배지 + 강조 가격 축소 */
.app-mode #section2 .price-nemo {
  gap: 6px;
  margin-bottom: 8px;
}
.app-mode #section2 .price-label {
  font-size: 10px;
  padding: 4px 7px;
}
.app-mode #section2 .price-txt {
  font-size: 15px;
}
/* 테마 해시태그: 좁은 카드용 축소 */
.app-mode #section2 .nemo-themes {
  gap: 2px 8px;
}
.app-mode #section2 .nemo-themes .theme-tag {
  font-size: 12px;
}


/* ---------------------------------------------------------
   [5단계] 맨 위 큰 배너 → 앱 스타일 납작한 가로 띠 배너
   - 높이 60vh → 약 120px 의 띠로 축소
   - 슬라이드 자동 넘김(swiper) 기능은 그대로, 높이만 변경
   - 모서리 둥글게 + 좌우 여백으로 앱 느낌
   - '환영합니다' 글자는 이미지에 박혀 있어 CSS로 제거 불가 →
     object-position 으로 글자가 덜 보이는 영역을 보여주도록 조정
     (완전 제거는 추후 글자 없는 가로 배너 이미지로 교체 권장)
   --------------------------------------------------------- */

/* 배너 컨테이너: 좌우 여백 + 둥근 모서리 (overflow:hidden 은 [1단계]에 있음) */
.app-mode .slider_container.pc_only {
  margin: 12px auto 0;
  /* 좌우 14px 여백을 주되 max-width 안에서 유지 */
  width: calc(100% - 28px);
  border-radius: 14px;
}

/* 슬라이드 줄 높이: 60vh → 납작한 띠 */
.app-mode .slider_container .swiper-wrapper {
  height: 120px;
}

/* 한 장 한 장도 같은 높이로 고정 */
.app-mode .slider_container .swiper-slide {
  height: 120px;
}

/* 띠 안에 이미지를 꽉 채우되 가운데를 보여줌(글자 노출 최소화) */
.app-mode .slider_container .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}


/* ---------------------------------------------------------
   [6단계] 섹션 제목(큰글자+작은글자) + '스페셜 업소' 가로 스크롤 영역
   - 제목: .sec-title 안에 .st-main(큰글자) / .st-sub(작은 부제)
   - 스페셜 업소: 인기순위와 같은 가로 스크롤, 가로로 긴 카드(임시 회색 박스)
   --------------------------------------------------------- */

/* 공통 섹션 제목: 큰글자 + 아래 작은 부제 */
.app-mode .sec-title {
  margin: 0 0 12px;
  padding: 0;
}
.app-mode .sec-title .st-main {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #222;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.app-mode .sec-title .st-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #8a8a90;
  line-height: 1.3;
  word-break: keep-all;
}
/* 스페셜 업소 안내문구 2줄: 윗줄 크게, 아랫줄 작게 */
.app-mode #sectionSpecial .sec-title .sp-sub1 {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 500;
}
.app-mode #sectionSpecial .sec-title .sp-sub2 {
  margin-top: 5px;
  font-size: 13px;
}

/* --- 스페셜 업소 영역 --- */
.app-mode #sectionSpecial {
  margin-top: 28px;
}
.app-mode #sectionSpecial .inner {
  padding: 0 14px;
}

/* 카드 줄: 한 줄로 펼치고 옆으로 스크롤 (인기순위와 동일 방식) */
.app-mode #sectionSpecial .special-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0 -14px;            /* inner 좌우 패딩 상쇄 → 화면 끝까지 스크롤 */
  padding: 4px 14px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 자동 가로 흐름(JS)과 충돌해 덜컹이지 않도록 스냅 해제 */
  scroll-snap-type: none;
}
.app-mode #sectionSpecial .special-scroll::-webkit-scrollbar {
  display: none;
}
.app-mode #sectionSpecial .special-scroll {
  scrollbar-width: none;
}

/* 카드 래퍼: 가로로 긴 형태, 줄어들지 않음 (관리자 버튼 띄울 기준) */
.app-mode #sectionSpecial .special-item {
  position: relative;
  flex: 0 0 auto;
  width: 280px;
  height: 160px;            /* 560×320 비율(1.75:1)에 맞춤 */
  scroll-snap-align: start;
}

/* 카드 본체: 이미지(또는 빈 회색 박스) */
.app-mode #sectionSpecial .special-card {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: #e9e9ee;        /* 이미지 없을 때 자리표시 색 */
  overflow: hidden;
  text-decoration: none;
}
.app-mode #sectionSpecial .special-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 이미지 없을 때 안내 글자 */
.app-mode #sectionSpecial .special-card .sp-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: #9a9aa2;
}

/* --- 관리자 전용 버튼 (방문자에겐 HTML 자체가 출력되지 않음) --- */

/* ＋배너 추가: 제목 영역 우측에 작게 */
.app-mode #sectionSpecial .inner {
  position: relative;
}
.app-mode #sectionSpecial .sp-add-btn {
  position: absolute;
  top: 0;
  right: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #E0A41C;        /* 검색 돋보기와 같은 핑크 포인트 */
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* 카드 위 수정/삭제: 카드 우측 상단에 떠 있게 */
.app-mode #sectionSpecial .sp-admin {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.app-mode #sectionSpecial .sp-admin a {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}
.app-mode #sectionSpecial .sp-admin .sp-del {
  background: rgba(220, 50, 50, 0.85);
}


/* ---------------------------------------------------------
   [7단계] 지역 지도 아이콘을 탭으로 + 2단 그리드 카드 (새로고침 없이 JS 토글)
   - 원래 지도 아이콘 목록(selcontents)을 그대로 탭으로 사용(디자인은 main.css 유지)
   - 아이콘 클릭 시 아래 해당 지역 alliance 업체를 2단 그리드 카드로 표시
   --------------------------------------------------------- */

/* 지도 아이콘은 main.css 디자인 그대로 두고, 클릭 가능 + 선택 지역만 강조 */
.app-mode #section1 .selcontents .categorylist[type="loc"] a {
  cursor: pointer;
}
.app-mode #section1 .selcontents .categorylist[type="loc"] a.region-active .txt {
  color: #E0A41C;
  font-weight: 700;
}

/* 카드 패널 영역 */
.app-mode .region-panels {
  padding: 4px 14px 18px;
}

/* --- 패널: 활성만 표시 --- */
.app-mode .region-panel {
  display: none;
}
.app-mode .region-panel.active {
  display: block;
}

/* --- 2단 그리드 카드 --- */
.app-mode .region-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
/* 폰(≤600px): 메인 지역탭 카드도 한 줄에 하나씩 (가격·글자 안 잘리게) */
@media screen and (max-width: 600px) {
  .app-mode .region-cards { grid-template-columns: 1fr; }
}
.app-mode .region-card {
  display: block;
  border: 1px solid #ececef;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}
/* 지역 탭 카드 — 다른 카드와 동일한 새 디자인(.image + .nemo-info-wrap) */
.app-mode .region-card .image {
  width: 100% !important;
  height: 150px !important;       /* 모든 카드 썸네일 같은 높이로 고정 */
  background: #f4f4f6;
  overflow: hidden;               /* 넘치는 사진 잘라서 박스 크기 통일 */
}
.app-mode .region-card .image img {
  width: 100% !important;
  height: 100% !important;        /* 박스에 꽉 차게 (자연 비율로 들쭉날쭉 방지) */
  object-fit: cover !important;   /* 비율 유지하며 박스 채우고 넘침은 크롭 */
  display: block;
}
.app-mode .region-card .image .thumb-empty {
  width: 100% !important;
  height: 150px !important;
  min-height: 0 !important;
  background-size: 60% auto;
}
/* 좁은 2단 카드용 글자 크기 정리 (전역 .nemo-info-wrap 디자인은 그대로 상속) */
.app-mode .region-card .nemo-info-wrap { padding: 10px 11px 12px; }
.app-mode .region-card .name-ne,
.app-mode .region-card .shop-name { font-size: 14px; }
.app-mode .region-card .nemo-juso { font-size: 12px; margin: 3px 0 8px; }
.app-mode .region-card .price-nemo { margin-bottom: 8px; }
.app-mode .region-card .price-label { font-size: 10px; padding: 4px 7px; }
.app-mode .region-card .price-txt { font-size: 15px; }
.app-mode .region-card .nemo-themes { gap: 2px 8px; }
.app-mode .region-card .nemo-themes .theme-tag { font-size: 12px; }

/* 빈 지역 안내 */
.app-mode .region-panel .region-empty {
  grid-column: 1 / -1;
  margin: 18px 0;
  text-align: center;
  font-size: 13px;
  color: #9a9aa2;
}

/* 더보기 버튼 */
.app-mode .region-more {
  display: block;
  margin: 14px auto 0;
  width: fit-content;
  padding: 9px 22px;
  border-radius: 999px;
  border: 1px solid #e2e2e7;
  background: #fff;
  color: #555560;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}


/* ===========================================================
   모바일(≤1024px) 지역 선택을 PC처럼 '지도 마크'로 통일 (2026-06-26)
   - PC용 지도 아이콘(selcontents.pc-only) 표시, 모바일용 탭+격자(m-only) 숨김
   - 지도 아이콘 한 줄 4칸으로 (폰에서 보기 좋게)
   - 지역 클릭 기능은 기존 JS 그대로 동작(마크업/JS 안 건드림)
   - PC(>1024)는 영향 없음
   =========================================================== */
@media screen and (max-width: 1024px) {
  .app-mode #section1 .selcontents.pc-only { display: block !important; }
  .app-mode #section1 .selcontents.m-only  { display: none !important; }

  /* 지도 아이콘: PC처럼 두 줄 (16개 지역 → 한 줄 8칸) */
  .app-mode #section1 .selcontents.pc-only .categorylist[type="loc"] a {
    flex-basis: 12.5% !important;   /* main.css 의 25%!important(4칸) 를 이김 → 8칸/2줄 */
    max-width: 12.5% !important;
    box-sizing: border-box;
    margin-bottom: 14px;
  }
  .app-mode #section1 .selcontents.pc-only .categorylist[type="loc"] a .img {
    height: 38px;
    border-right: 0;            /* PC 11칸용 칸 구분선 제거 */
  }
  /* 지도 아이콘 이미지 크기 통일 — 지도 모양이 달라도 모두 같은 높이로 */
  .app-mode #section1 .selcontents.pc-only .categorylist[type="loc"] a .img img {
    height: 32px !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 32px !important;
    object-fit: contain;
  }
  .app-mode #section1 .selcontents.pc-only .categorylist[type="loc"] a:nth-child(-n+11) {
    border-bottom: 0;           /* PC 11칸용 첫 줄 밑줄 제거 */
    padding-bottom: 0;
  }
  /* 선택된 지역 표시(JS가 region-active 부여) — 살짝 강조 */
  .app-mode #section1 .selcontents.pc-only .categorylist[type="loc"] a.region-active .txt {
    color: #E0A41C; font-weight: 700;
  }
}


/* ===========================================================
   모바일(≤600px) 메인 지역카드를 '목록 페이지 카드'와 같은 크기로 (2026-06-26)
   - 사진 크게(전체폭 자연비율) · 글자 크게(상호 21/가격 18) · 좌우 여백 줄여 꽉 차게
   - 기존 2단용 작은 override(150px·14px 등)를 목록 카드 크기로 덮어씀
   - 전부 @media 안 → PC는 영향 없음
   =========================================================== */
@media screen and (max-width: 600px) {
  /* 카드 좌우 여백 줄여 화면 꽉 차게 */
  .app-mode .region-panels { padding: 4px 6px 18px; }

  /* 사진: 목록처럼 큰 사진(전체 폭, 자연 비율) — 150px 고정 해제 */
  .app-mode .region-card .image { height: auto !important; }
  .app-mode .region-card .image img { height: auto !important; }
  .app-mode .region-card .image .thumb-empty { height: auto !important; min-height: 190px !important; }

  /* 글자·여백: 목록 카드(v3) 크기로 */
  .app-mode .region-card .nemo-info-wrap { padding: 13px 14px 14px; }
  .app-mode .region-card .name-ne,
  .app-mode .region-card .shop-name { font-size: 21px; }
  .app-mode .region-card .nemo-juso { font-size: 13px; margin: 3px 0 11px; }
  .app-mode .region-card .price-label { font-size: 12px; padding: 4px 9px; }
  .app-mode .region-card .price-txt { font-size: 18px; }
  .app-mode .region-card .nemo-themes { gap: 3px 10px; }
  .app-mode .region-card .nemo-themes .theme-tag { font-size: 13px; }
}