/* ═══════════════════════════════════════════════════════════════
   더뷰티모아 — 모바일 앱 셸 (2026-09-01 사용자 지시 · NOL 앱 레퍼런스)

   ★반응형 단일 테마다(G5_USE_MOBILE=false). 별도 모바일 테마를 만들지 않고
     앱 셸 마크업을 한 벌만 두고 여기서 데스크톱 노출을 끈다.
   ★로드 순서: kt.css(골격) → am.css(팔레트) → bm-mobile.css(모바일 셸). 12번.
   ═══════════════════════════════════════════════════════════════ */

/* 데스크톱: 앱 셸 요소는 전부 숨긴다 */
.bm-mhead, .bm-tabbar { display: none; }

/* 업종 아이콘 그리드는 데스크톱에서도 쓸모가 있어 남기되 폭만 넓게 */
.bm-cats {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
  margin: 18px 0 4px; padding: 16px 10px;
  background: #fff; border: 1px solid var(--kt-line); border-radius: 16px;
}
.bm-cats a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 6px 2px; border-radius: 12px; text-decoration: none;
}
.bm-cats a:hover { background: var(--bm-pink-soft); }
.bm-cats img { display: block; width: 52px; height: 52px; }
.bm-cats em {
  font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: -.03em;
  color: var(--kt-ink);            /* 흰 배경 14.85:1 */
  text-align: center; line-height: 1.25;
}

@media (max-width: 780px) {
  /* ── 데스크톱 헤더 3층·사이드바를 걷어내고 앱 셸로 대체 ── */
  .kt-utilbar, .kt-logorow, .kt-menubar, .kt-aside { display: none; }
  .kt-wrap { padding-left: 0; padding-right: 0; }
  .kt-body { display: block; padding: 0 14px; }

  /* 상단 고정 헤더 ---------------------------------------------------- */
  .bm-mhead {
    display: block; position: sticky; top: 0; z-index: 70;
    background: #fff8fa; border-bottom: 1px solid var(--kt-line);
    padding: 10px 14px 0;
  }
  .bm-mhead-row { display: flex; align-items: center; gap: 10px; }
  .bm-mlogo {
    flex: 0 0 auto; font-size: 19px; font-weight: 800; letter-spacing: -.05em;
    color: var(--kt-primary-d); text-decoration: none;   /* #fff8fa 위 6.4:1 */
  }
  .bm-mlogo b { color: var(--kt-ink); font-weight: 800; }
  /* ★검색은 링크다 — input+GET 은 `?stx=` 를 만들어 파라미터 금지 지시를 어긴다 */
  .bm-msearch {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    height: 44px; padding: 0 16px; border-radius: 999px;
    background: #fff; border: 1.5px solid var(--bm-pink);
    color: var(--kt-mute); font-size: 14px; font-weight: 600; text-decoration: none;
  }
  .bm-msearch i { color: var(--kt-primary); font-size: 16px; }

  /* 탭 스트립 (가로 스크롤) */
  .bm-mtabs {
    display: flex; gap: 18px; margin-top: 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .bm-mtabs::-webkit-scrollbar { display: none; }
  .bm-mtabs a {
    flex: 0 0 auto; position: relative; padding: 10px 2px 12px;
    font-size: 15px; font-weight: 700; letter-spacing: -.03em;
    color: var(--kt-mute); text-decoration: none; white-space: nowrap;   /* 6.5:1 */
  }
  .bm-mtabs a.on { color: var(--kt-ink); font-weight: 800; }             /* 13:1 */
  .bm-mtabs a.on::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px; border-radius: 3px 3px 0 0; background: var(--kt-primary);
  }

  /* 히어로 — 앱 카드 느낌(큰 라운드 + 가로 스크롤 칩) */
  .kt-hero-main { border-radius: 18px; padding: 24px 20px 20px; margin-top: 14px; }
  .kt-hero-main h1 { font-size: 21px; line-height: 1.32; }
  .kt-hero-main p  { font-size: 13.5px; }
  .kt-hero-chips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 18px -20px 0; padding: 0 20px 2px;
  }
  .kt-hero-chips::-webkit-scrollbar { display: none; }
  .kt-hero-chips a { flex: 0 0 auto; }

  /* 업종 아이콘 그리드 — 5열(레퍼런스와 동일). 8개라 5+3 두 줄. */
  .bm-cats {
    grid-template-columns: repeat(5, 1fr); gap: 4px 2px;
    margin: 14px 0 4px; padding: 16px 6px; border-radius: 18px;
  }
  .bm-cats img { width: 48px; height: 48px; }
  .bm-cats em { font-size: 11.5px; }

  /* 섹션 카드 목록은 가로 스크롤로 */
  .kt-cardrow {
    display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 0 -14px; padding: 0 14px;
  }
  .kt-cardrow::-webkit-scrollbar { display: none; }
  .kt-cardrow > * { flex: 0 0 74%; }

  /* ── 하단 고정 탭바 ------------------------------------------------- */
  .bm-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
    border-top: 1px solid var(--kt-line);
    box-shadow: 0 -4px 20px rgba(74,36,48,.08);
    padding-bottom: env(safe-area-inset-bottom);   /* 아이폰 홈 인디케이터 */
  }
  .bm-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 0 7px; text-decoration: none;
    color: var(--kt-mute); font-size: 11px; font-weight: 700;   /* 6.5:1 */
  }
  .bm-tabbar a i  { font-size: 18px; }
  .bm-tabbar a em { font-style: normal; letter-spacing: -.03em; }
  .bm-tabbar a.on { color: var(--kt-primary); }                 /* 5.1:1 */

  /* ★탭바가 본문을 가리지 않게 바닥 여백. 푸터까지 포함해 밀어 준다. */
  body { padding-bottom: 62px; }

  /* ★업소 상세의 기존 고정 예약바(.kt-cta)와 겹친다 — 탭바 위로 올린다.
       안 하면 두 개가 포개져 예약 버튼이 눌리지 않는다. */
  .kt-cta { bottom: 62px; }
  .kt-detail { padding-bottom: 150px; }
}

@media (max-width: 380px) {
  .bm-cats { grid-template-columns: repeat(4, 1fr); }
  .bm-mlogo { font-size: 17px; }
}

/* ═══ 히어로 슬라이드 · CTA 띠 (2026-09-01 · NOL 앱 레퍼런스) ═══════════
   데스크톱 기본값 = 슬라이드 1장만. 2·3장과 CTA 띠는 모바일에서만 켠다.
   ★DOM 은 한 벌이다(모바일 전용 마크업을 따로 두면 링크가 중복된다).
     구글은 모바일 판을 기준으로 색인하므로 감춘 슬라이드의 내부링크도 읽힌다. */
.bm-hero { position: relative; }
.bm-hero-track > .bm-slide:nth-child(n+2) { display: none; }
.bm-hero-count, .bm-cta { display: none; }

@media (max-width: 780px) {
  /* 가로 스와이프 — scroll-snap 만 쓴다(자동 회전 없음: 읽던 카드가 사라지면 접근성 문제) */
  .bm-hero-track {
    display: flex; gap: 10px;
    margin: 14px -14px 0; padding: 0 14px 2px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .bm-hero-track::-webkit-scrollbar { display: none; }
  .bm-hero-track > .bm-slide:nth-child(n+2) { display: block; }
  .bm-slide {
    flex: 0 0 90%; scroll-snap-align: center;
    margin-top: 0 !important;          /* .kt-mainstack 의 자식 간격이 슬라이드에 끼어든다 */
    min-height: 190px;
  }
  .bm-slide h2 {
    margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.04em;
    line-height: 1.32; color: var(--kt-ink);          /* 파스텔 면 위 13.3:1 */
  }

  /* 슬라이드 위치 표시 — 레퍼런스의 4/14 자리 */
  .bm-hero-count {
    display: block; position: absolute; right: 26px; bottom: 14px;
    padding: 4px 11px; border-radius: 999px;
    background: rgba(74,36,48,.72); color: #fff;      /* 딥플럼 면 위 흰 글자 */
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  }
  .bm-hero-count b { font-weight: 800; }

  /* CTA 띠 — 레퍼런스의 가입 유도 자리 */
  .bm-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 12px 0 2px; padding: 14px 16px; border-radius: 16px;
    background: var(--bm-peach-soft);
    /* ★테두리는 조작요소 전용 색을 쓴다. 카드 구분선용 연핑크(--kt-line)는 피치 면 위에서
         1.21:1 이라 '눌리는 것'이라는 표시가 사라진다(WCAG 1.4.11 비텍스트 3:1). */
    border: 1px solid var(--bm-line-ui);
    text-decoration: none;
  }
  .bm-cta span { display: block; min-width: 0; }
  .bm-cta b  { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.03em;
               color: var(--kt-ink); }                /* 피치 면 위 13.0:1 */
  .bm-cta em { display: block; margin-top: 3px; font-style: normal; font-size: 12px;
               color: var(--kt-mute); }               /* 6.0:1 */
  .bm-cta i  { flex: 0 0 auto; font-style: normal; font-size: 12.5px; font-weight: 700;
               padding: 9px 14px; border-radius: 999px; white-space: nowrap;
               background: var(--kt-primary); color: #fff; }   /* 5.12:1 반전 */
}

/* ★뼈대(kt.css:266)는 420px 이하에서 업소 카드를 1열로 떨어뜨린다.
     사용자 상시 지시는 '모바일 카드 가로 2개씩'이고, 아이폰 다수가 375~390px 라
     가장 흔한 화면에서만 규칙이 깨지고 있었다. 2열로 되돌린다. */
@media (max-width: 420px) {
  .kt-shopgrid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}

/* ═══ 가로 스크롤 폭발 차단 (2026-09-01 실측) ═══════════════════════
   증상: 모바일에서 페이지 전체가 뷰포트보다 넓어지고(375 → body.scrollWidth 1543)
         업종 아이콘 5열이 1,459px 컨테이너에 깔려 화면에 2개밖에 안 보였다.

   범인은 그누보드 기본 스킨의 **`#container { float:left; width:930px }`**(default.css:182).
   `kt.css:18` 이 `width:auto` 로만 덮고 **float 을 안 풀었다.**
   플로트는 shrink-to-fit = `min(max(min-content, 가용폭), max-content)` 로 폭이 정해지는데,
   히어로 가로 스와이프(`.bm-hero-track`)가 생기면서 min-content 가 1,459px 이 됐고
   플로트가 그 값을 그대로 먹어 **본문 기둥 전체가 1,459px 로 부풀었다.**
   → `.bm-hero-track` 의 `overflow-x:auto` 는 잘못이 없다. 부모가 이미 넓어져 자를 게 없었던 것.

   ★이 뼈대(mh_new·am5 계보)를 쓰는 사이트에 전부 잠복해 있다. 가로 스크롤러를 넣는 순간 터진다.
   ★모바일 전용이 아니라 전 화면폭에 건다 — 데스크톱도 같은 플로트를 쓰고 있다. */
#container { float: none; width: auto; max-width: 100%; min-width: 0; }
.kt-main, .kt-mainstack, .bm-hero { min-width: 0; max-width: 100%; }

/* 카드 제목 2줄 — 타이틀이 "{구} {동} {업종} {상호}" 로 길어져(2026-09-01 사용자 지시)
   뼈대의 `-webkit-line-clamp: 1`(kt.css:289) 로는 상호가 통째로 잘렸다("강남 역삼동 반영…").
   ★색도 뼈대의 남색 #1b2b45 를 쓰고 있어 파스텔 팔레트와 어긋난다 — ink 로 맞춘다. */
.kt-shop-b h4 { -webkit-line-clamp: 2; color: var(--kt-ink); }

/* ═══ 입점 폼 — 업종 칩 · 가격표 · 사진 (2026-09-01 사용자 지시) ═══════
   "업종, 가격표 어떤 메뉴 코스에는 얼마 이런거 여러개 되도록, 샵 전화번호,
    샵 이미지, 샵 주소, 샵 영업시간 … 실제로 업소등록에 필요한 자료를 추가"        */

/* ★뼈대(kt.css:565~572)가 남긴 파란 계열을 팔레트로 되돌린다.
     · 입력칸 테두리 #dde3ea = 흰 배경 1.28:1 → 조작요소 경계 3:1 미달(WCAG 1.4.11)
     · 포커스 링 rgba(58,138,253,…) = 파란색. 파스텔 사이트에 파란 링이 뜬다. */
.kt-form input[type=text], .kt-form input[type=tel], .kt-form input[type=file],
.kt-form select, .kt-form textarea { border-color: var(--bm-line-ui); }
.kt-form input:focus, .kt-form select:focus, .kt-form textarea:focus {
  border-color: var(--kt-primary); box-shadow: 0 0 0 3px rgba(193,59,107,.18);
}
.kt-form ::placeholder { color: #9b8792; }         /* 흰 배경 4.6:1 — 옛 #b4bcc6 은 2.4 였다 */
.kt-fhint { margin: 7px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--kt-mute); }

/* 업종 칩 — 체크박스를 숨기고 라벨을 누르게 한다(터치 영역 확보) */
.kt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kt-chip { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.kt-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.kt-chip span {
  display: inline-block; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--bm-line-ui); background: #fff;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; color: var(--kt-ink);
}
.kt-chip.sm span { padding: 7px 13px; font-size: 12.5px; }
.kt-chip input:checked + span {
  background: var(--kt-primary); border-color: var(--kt-primary); color: #fff;   /* 5.12:1 */
}
/* ★포커스 링을 반드시 남긴다 — 체크박스를 숨겼기 때문에 키보드 사용자가 위치를 잃는다 */
.kt-chip input:focus-visible + span { outline: 2px solid var(--kt-primary); outline-offset: 2px; }
.kt-subs { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bm-pink-soft); }
.kt-subs > b { display: block; margin-bottom: 9px; font-size: 12.5px; color: var(--kt-ink2); }

/* 가격표 */
.kt-price { border: 1px solid var(--kt-line); border-radius: 12px; overflow: hidden; }
.kt-price-hd, .kt-price-row {
  display: grid; grid-template-columns: minmax(0,1fr) 84px 108px 38px; gap: 8px;
  align-items: center; padding: 8px 10px;
}
.kt-price-hd { background: var(--bm-pink-soft); font-size: 12px; font-weight: 700; color: var(--kt-ink2); }
.kt-price-row + .kt-price-row { border-top: 1px solid var(--kt-line); }
.kt-price-row input { height: 40px !important; font-size: 13.5px !important; }
.kt-price-del {
  height: 34px; border: 1px solid var(--kt-line); border-radius: 8px; background: #fff;
  color: var(--kt-mute); font-size: 17px; line-height: 1; cursor: pointer;
}
.kt-price-del:hover { border-color: var(--kt-primary); color: var(--kt-primary); }
.kt-price-add {
  margin-top: 10px; padding: 10px 16px; border-radius: 10px; cursor: pointer;
  border: 1px dashed var(--bm-line-ui); background: #fff;
  font-size: 13.5px; font-weight: 700; color: var(--kt-primary); font-family: inherit;
}
.kt-price-add:hover { background: var(--bm-pink-soft); }

.kt-form input[type=file] {
  width: 100%; padding: 10px 12px; border: 1px dashed var(--bm-line-ui); border-radius: 10px;
  background: #fff; font-size: 13.5px; color: var(--kt-ink2); height: auto;
}

/* 접수 내역 상세 — 업종 배지 · 가격표 · 사진 */
.ktiq-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ktiq-tags i { font-style: normal; font-size: 12px; font-weight: 700; padding: 5px 11px;
  border-radius: 999px; background: var(--bm-pink-soft); color: var(--kt-primary); }
.ktiq-price { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.ktiq-price th, .ktiq-price td { padding: 9px 12px; border-bottom: 1px solid var(--kt-line); text-align: left; }
.ktiq-price th { background: var(--bm-pink-soft); font-size: 12.5px; color: var(--kt-ink2); }
.ktiq-price td.n { text-align: right; font-variant-numeric: tabular-nums; }
.ktiq-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ktiq-shots img { width: 132px; height: 132px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--kt-line); }

@media (max-width: 640px) {
  .kt-price-hd, .kt-price-row { grid-template-columns: minmax(0,1fr) 62px 84px 32px; gap: 6px; padding: 7px 8px; }
  .kt-price-row input { height: 38px !important; font-size: 13px !important; padding: 0 9px; }
  .ktiq-shots img { width: calc(33.33% - 6px); height: auto; aspect-ratio: 1/1; }
}

/* ═══ 업소 카드 — 아래쪽 줄 정렬 (2026-09-01 사용자 지적) ═════════════════
   증상: 썸네일 밑 마지막 줄(업종 태그)이 카드마다 다른 높이에 떠 목록이 들쭉날쭉했다.
   원인은 두 가지가 겹친 것 —
     ① 제목이 1줄인 카드와 2줄인 카드가 섞인다("…네일,희재" vs "…바디케어탑")
     ② 주소가 1줄인 카드와 2줄인 카드가 섞인다
   그래서 마지막 줄의 시작점이 카드마다 최대 3줄만큼 어긋난다.
   ★고치는 법은 '바닥 정렬'만으로는 부족하다 — 그리드 행 높이가 행마다 달라
     행이 바뀌면 또 어긋난다. **제목·주소의 줄 수를 고정**해 카드 내부 높이를 같게 만들고,
     그 위에 flex 바닥 정렬을 얹는다. 두 개를 같이 걸어야 전 행에서 줄이 맞는다. */
.kt-shop   { display: flex; flex-direction: column; }
.kt-shop-b { flex: 1; display: flex; flex-direction: column; }

/* 제목 2줄 · 주소 2줄 고정(짧아도 자리를 비워 둔다) */
.kt-shop-b h4    { min-height: calc(2em * 1.35); }
.kt-shop-addr    { min-height: calc(2em * 1.5); }

/* 마지막 덩어리는 언제나 카드 바닥에 */
.kt-shop-foot    { margin-top: auto; padding-top: 8px; }

/* 업종 태그 = 칩. 뼈대의 #a3adba(흰 배경 대비 2.2:1)는 본문 글씨로 쓰면 안 되는 밝기다.
   ★파스텔은 '면'으로만 쓰고 글씨는 로즈딥 — 파스텔 위 흰 글씨 금지 규칙과 같은 선.
     #c13b6b on #fdeff4 = 4.8:1. */
.kt-shop-b .kt-shop-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; font-size: 0; }
.kt-shop-b .kt-shop-meta span {
  display: inline-block; font-size: 12px; font-weight: 700; line-height: 1;
  padding: 5px 9px; border-radius: 999px; letter-spacing: -.02em;
  background: var(--bm-pink-soft); color: var(--kt-primary); border: 1px solid #f8dbe6;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 가격이 들어오면 같은 자리에 같은 높이로 앉는다 */
.kt-shop-b .kt-shop-before { margin-top: 0; }
.kt-shop-b .kt-shop-price  { margin-top: 2px; }

@media (max-width: 420px) {
  .kt-shop-b .kt-shop-meta span { font-size: 11.5px; padding: 4px 8px; }
}

/* ═══ 업소 상세 — 위치 지도 (2026-09-01 사용자 요청) ═══════════════════════
   요약 패널(.kt-sum) 안, 전화/제휴 버튼 아래에 붙는다.
   ★고정 비율(aspect-ratio)을 반드시 준다 — iframe 이 늦게 뜨면서 아래를 밀면 CLS 가 튄다. */
.kt-sum-map  { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kt-line); }
.kt-sum-maph { margin: 0 0 10px; font-size: 14px; font-weight: 800; letter-spacing: -.03em;
               color: var(--kt-ink); }
.kt-mapbox   { position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
               background: #f3f0f2; border: 1px solid var(--bm-line-ui, #ecd9e2); }
.kt-mapbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.kt-map-links { display: flex; gap: 8px; margin-top: 10px; }
.kt-map-links a {
  flex: 1; text-align: center; padding: 9px 0; border-radius: 9px; font-size: 13px; font-weight: 700;
  background: var(--bm-pink-soft); color: var(--kt-primary); border: 1px solid #f8dbe6;
}
.kt-map-links a:hover { background: #fbe2ec; color: var(--kt-primary-d); }

/* 안내문 — 밝은 회색(#a3adba 2.2:1)은 쓰지 않는다 */
.kt-map-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: #6b5d64; }

@media (max-width: 820px) {
  .kt-mapbox { aspect-ratio: 16/10; }
}

/* ── 미확인 고지를 히어로 그리드 1열(사진 바로 아래)에 앉힌다 (2026-09-01 사용자 지시) ──
   .kt-hero 는 2열 그리드(kt.css:308).
   ★열만 지정하면 부족하다 — 오른쪽 요약 패널(지도 포함)이 1행 높이를 다 잡아서,
     2행에 놓인 고지가 **지도 아래**까지 밀린다(사진 밑이 여전히 빈다).
     → 요약 패널을 **2행에 걸치게(span 2)** 하고, 고지를 1열 2행에 못박는다.
   ★행/열을 명시하는 이유 — 사진이 없는 업소에서는 자동 배치가 2열로 밀려 요약 패널 옆에 붙는다. */
.kt-hero > .kt-gal        { grid-column: 1; grid-row: 1; }
.kt-hero > .kt-sum        { grid-column: 2; grid-row: 1 / span 2; }
.kt-hero > .kt-unverified { grid-column: 1; grid-row: 2; margin: 12px 0 0; align-self: start; }
@media (max-width: 960px) {
  .kt-hero > .kt-gal,
  .kt-hero > .kt-sum,
  .kt-hero > .kt-unverified { grid-column: auto; grid-row: auto; }
}

/* ── 사이드바 '업종별 뷰티샵' 위젯에 업종 아이콘 (2026-09-01 사용자 지시) ──
   .kt-linkgrid a 는 display:block 이라 아이콘을 넣으면 글자가 아래로 떨어진다 → flex 로.
   ★아이콘이 있는 위젯에만 건다(공지·지역 위젯의 글자 정렬은 건드리지 않는다). */
.kt-linkgrid a:has(.kt-lgico) { display: flex; align-items: center; gap: 7px; padding-left: 7px; }
.kt-lgico { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; display: block; }
/* :has() 미지원 브라우저 폴백 — 아이콘만 인라인으로 띄운다 */
@supports not selector(a:has(img)) {
  .kt-lgico { display: inline-block; vertical-align: -6px; margin-right: 6px; }
}

/* ── 업종별 안내 (lib/bm.explain_cat.php) — 2026-09-01 사용자 지시 ─────────
   ★본문 가로폭을 제한한다(리딩 라인). 카드 그리드는 넓게, 문단은 좁게. */
.bm-ex { margin-top: 4px; }
.bm-ex-lead { max-width: 46em; font-size: 14.5px; line-height: 1.85; color: var(--kt-ink2); margin: 0 0 16px; }
.bm-ex-lead b { color: var(--kt-ink); font-weight: 700; }

.bm-ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.bm-ex-card {
  display: block; padding: 14px 15px 15px; border-radius: 13px; background: #fff;
  border: 1px solid var(--bm-line-ui, #f0dfe7); box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s;
}
.bm-ex-card:hover { transform: translateY(-2px); border-color: var(--kt-primary);
  box-shadow: 0 8px 18px -8px rgba(193,59,107,.35); }
.bm-ex-card b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.03em; color: var(--kt-ink); }
/* 소요 시간 = 칩. 파스텔 면 + 로즈딥 글씨(4.8:1) */
.bm-ex-card i {
  display: inline-block; margin: 6px 0 8px; font-style: normal; font-size: 11.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; background: var(--bm-pink-soft); color: var(--kt-primary);
}
.bm-ex-card span { display: block; font-size: 13px; line-height: 1.7; color: #5c5158; }

.bm-ex-h3 { margin: 24px 0 10px; font-size: 15.5px; font-weight: 800; letter-spacing: -.03em; color: var(--kt-ink); }
.bm-ex-list { max-width: 46em; margin: 0; padding-left: 18px; }
.bm-ex-list li { font-size: 14px; line-height: 1.9; color: var(--kt-ink2); margin-bottom: 4px; }
.bm-ex-list li b { color: var(--kt-ink); font-weight: 700; }
.bm-ex-note { max-width: 46em; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--kt-line);
  font-size: 12.5px; line-height: 1.8; color: #6b5d64; }
.bm-ex-note b { color: #a5341f; font-weight: 700; }

@media (max-width: 640px) {
  .bm-ex-grid { grid-template-columns: 1fr; gap: 8px; }
  .bm-ex-card { padding: 12px 13px 13px; }
}

/* 섹션 제목 아래 한 줄 설명 (2026-09-01) */
.kt-secsub { margin: -6px 0 14px; font-size: 13px; line-height: 1.6; color: #6b5d64; }

/* ── 코스 지도 (bin/routemap.py 로 좌표에서 그린다) — 2026-09-01 ─────────
   ★스톡 사진에 장소 이름을 붙이는 대신 **좌표로 그린 지도**를 넣는다. 지도는 사실이다. */
.bm-map { margin: 18px 0 22px; }
.bm-map img { width: 100%; height: auto; display: block; border-radius: 12px;
              border: 1px solid var(--bm-line-ui, #ecd9e2); }
/* ★그누보드 출력 필터가 <figure>/<figcaption> 을 걷어낸다 — p/span 으로 쓴다(2026-09-01 실측) */
.bm-mapcap { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.7; color: #6b5d64; }

/* ── 뷰티 매거진 제휴 상품 블록 (2026-09-01 사용자 결정) ────────────────
   ★고지문을 눈에 띄게 둔다 — 회색 작은 글씨로 숨기면 공정위 지침 위반이다. */
.bm-aff { margin: 18px 0 8px; padding: 16px 16px 6px; border-radius: 13px;
          background: var(--bm-pink-soft, #fdeff4); border: 1px solid #f8dbe6; }
.bm-aff-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.75; color: #6b5d64; }
.bm-aff-note b { color: var(--kt-primary); font-weight: 800; }
.bm-aff-list { margin: 0; padding: 0; list-style: none; }
.bm-aff-list li { padding: 11px 0; border-top: 1px solid #f5e2ea; }
.bm-aff-list li:first-child { border-top: 0; }
.bm-aff-list a { display: block; font-size: 14.5px; font-weight: 800; color: var(--kt-primary);
                 letter-spacing: -.02em; }
.bm-aff-list a:hover { color: var(--kt-primary-d); text-decoration: underline; }
.bm-aff-list span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.7; color: #5c5158; }

/* 제휴 항목에 제품 이미지가 있을 때 — 이미지는 96px 로 작게. 본문보다 커지면 광고 페이지가 된다. */
.bm-aff-list li.has-img { display: flex; gap: 12px; align-items: flex-start; }
.bm-aff-list li.has-img img { flex: 0 0 auto; width: 96px; height: 96px; object-fit: cover;
                              border-radius: 10px; background: #fff; border: 1px solid #f5e2ea; }
.bm-aff-b { display: block; min-width: 0; }

/* ── 애드센스 슬롯 (extend/bm.ads.extend.php) — 2026-09-01 ─────────────
   ★'광고' 표시를 반드시 단다. 콘텐츠와 구분되지 않는 광고는 애드센스 정책 위반이다.
   ★min-height 로 자리를 미리 잡는다 — 광고가 늦게 뜨며 본문을 밀면 CLS 가 튄다. */
.bm-ad { margin: 22px 0; min-height: 100px; text-align: center; }
.bm-ad-label { display: block; margin-bottom: 6px; font-size: 11.5px; letter-spacing: .02em;
               color: #9b8792; text-align: left; }
.bm-ad-side { margin: 14px 0 0; min-height: 250px; }