/*
 * 맘스토어 v2 시안 — 맘맵 화면 배치(7차 — SPEC 7절, 참고 그림 docs/mockups/reference/맘맵_예시.png)
 * 공통 모양(조건 칸 #obox · 판정 배지 · 띠 · 알약 칩 · 머리글 아이콘 버튼)은 css/v3-components.css. 이 파일은 맘맵 배치(여백·지도·시트·카드·상세·제보)만.
 * 이름은 모두 mm- 로 시작한다. 360px 모바일 기준 · 누르는 곳 44px 이상 · 14px 미만 한글은 굵기 600 이하 · 글자 대비 AA(값은 주석).
 * 지도 색(땅·길·덩어리)과 소아 의료 점 빨강(#d64545)은 장식 — 값은 tokens.css 의 --map-* (아래 var(…, 기본값)은 같은 값).
 */

/* ---------- 틀: 맘맵 화면은 흰 바탕, 첫 줄이 지역(참고 그림처럼 글자 로고 머리글 없이 — 화면이 U.shell header:false 로 그린다) ---------- */
.ms-app--web:has(.mm-page) {
  background: var(--card, #ffffff);
}

.mm-page {
  width: 100%;
  background: var(--card, #ffffff);
  color: var(--ink, #342a34);
}

.mm-pad {
  padding-left: 16px;
  padding-right: 16px;
}

/* 회색 한 줄(어긋난 곳 뒤로 · 외출 조건 답하기 안내 · 제휴 설명) — 회색 흰 5.58 */
.mm-note {
  margin: 4px 0 8px;
  font-size: var(--fs-13, 0.8125rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray, #75636d);
}

/* 화면 맨 아래 회색 한 줄("예시 정보입니다" · "장소 이름·거리·시간은 모두 예시예요") */
.mm-foot {
  margin: 14px 0 0;
  font-size: var(--fs-13, 0.8125rem);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--gray, #75636d);
}

.mm-foot + .mm-foot {
  margin-top: 2px;
}

/* ---------- ① 지역 줄: [예시동 ▾](28px 800) + 회색 "예시 위치" · 오른쪽 검색·저장(.ms-hicon 44px) ---------- */
.mm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 60px;
  padding-top: 8px;
}

.mm-region {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mm-region__btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin-left: -4px;
  padding: 0 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink, #342a34);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  white-space: nowrap;
  cursor: pointer;
}

.mm-region__chev {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  stroke-width: 2.6;
}

.mm-region__note {
  font-size: var(--fs-14, 0.875rem);
  font-weight: 500;
  color: var(--gray, #75636d);              /* 흰 5.58 */
  white-space: nowrap;
}

.mm-top__acts {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-right: -10px;                       /* 아이콘 선을 오른쪽 16px 여백에 맞춘다(버튼 안쪽 빈 곳만큼) */
}

/* ---------- ② 분류 칩(가로 스크롤 — 화면 끝까지 · 첫 칩은 16px 여백에서 시작) ---------- */
.mm-cats {
  margin: 6px -16px 0;
}

.mm-cats__scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 16px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mm-cats__scroll::-webkit-scrollbar {
  display: none;
}

.mm-cat {
  gap: 8px;
  padding: 0 16px 0 14px;
}

/* 분류 점 8px(장식, aria-hidden) — 수유·돌봄 분홍 · 위생·편의 파랑 · 소아 의료 빨강 · 놀이·체험 청록 */
.mm-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mm-dot--care { background: var(--brand, #ef6195); }
.mm-dot--hygiene { background: var(--info, #0b6a9a); }
.mm-dot--medical { background: var(--map-medical, #d64545); }
.mm-dot--play { background: var(--ok, #0f766e); }

/* ---------- ③ 외출 조건 줄(#obox — 모양은 v3-components.css .ms-cbox--inline) ---------- */
.mm-page #obox {
  margin-top: 12px;
}

.mm-page #map-reorder-band {
  margin: 10px 0 0;
}

/* 지도 보기에서 띠는 조건 칸 아래(지도 위) 16px 여백 안에 */
.mm-page--map #map-reorder-band {
  margin-bottom: 0;
}

/* ---------- ④ 지도(가짜 SVG · 높이 320 — 아래 28px 는 시트가 덮는다) ---------- */
.mm-map {
  position: relative;
  height: 320px;
  margin-top: 16px;
  overflow: hidden;
  background: var(--map-land, #f3f0ee);
}

.mm-art {
  display: block;
  width: 100%;
  height: 100%;
}

.mm-art__land { fill: var(--map-land, #f3f0ee); }

.mm-art__road {
  fill: none;
  stroke: var(--card, #ffffff);
  stroke-width: 14;
  stroke-linecap: round;
}

.mm-art__lane {
  fill: none;
  stroke: var(--card, #ffffff);
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0.85;
}

.mm-art__blk { fill: var(--map-block, #ebe4ec); }
.mm-art__park { fill: var(--map-park, #dcf0e5); }

/* 덩어리 이름(장식 — 지도 그림 전체가 aria-hidden. 그래도 읽히게 진한 회색) */
.mm-art__name {
  fill: var(--map-label, #6b5a66);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-anchor: middle;
}

.mm-art__name--park { fill: var(--map-label-park, #3f6f5c); }

/* 파란 현재 위치 점(--info, 흰 테두리 + 연한 파란 원 — 장식) */
.mm-art__halo { fill: var(--info, #0b6a9a); fill-opacity: 0.16; }

.mm-art__here {
  fill: var(--info, #0b6a9a);
  stroke: var(--card, #ffffff);
  stroke-width: 3;
}

/* 위쪽을 흰 바탕에서 지도로 부드럽게(장식) */
.mm-map__fade {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 26px;
  background: linear-gradient(var(--card, #ffffff), rgb(255 255 255 / 0));
  pointer-events: none;
}

/* 주색 핀: 44 × 44 링크, 핀 끝이 (x %, y %) 자리 */
.mm-pin {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: end center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  transform: translate(-50%, -100%);
}

.mm-pin__svg {
  display: block;
  width: 30px;
  height: 38px;
  overflow: visible;
  filter: drop-shadow(0 3px 3px rgb(52 42 52 / 0.24));
}

.mm-pin__body {
  fill: var(--primary, #c72964);
  stroke: var(--card, #ffffff);
  stroke-width: 2;
}

.mm-pin__dot { fill: var(--card, #ffffff); }

.mm-pin:hover .mm-pin__body { fill: var(--primary-hover, #b2255a); }

.mm-pin:focus-visible {
  outline: 3px solid var(--focus-ring, #b2255a);
  outline-offset: 0;
}

/* [지도 | 목록] 전환 — 지도 오른쪽 위(흰 알약 + 그림자), 선택 = 잉크 바탕 흰 글씨 */
.mm-view {
  display: inline-flex;
  flex: none;
  align-items: stretch;
  padding: 0;
  border-radius: var(--radius-pill, 999px);
  background: var(--card, #ffffff);
}

.mm-map .mm-view {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  box-shadow: 0 4px 14px rgb(52 42 52 / 0.16);
}

.mm-view__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill, 999px);
  color: var(--ink, #342a34);
  font-size: var(--fs-15, 0.9375rem);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mm-view__item[aria-current="true"] {
  background: var(--ink, #342a34);           /* 흰 글씨 13.75 */
  color: var(--on-dark, #ffffff);
}

/* 목록 보기: 전환은 목록 위 오른쪽(테두리 알약) */
.mm-viewrow {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.mm-viewrow .mm-view {
  border: 1px solid var(--chip-line, #e3d8de);
}

/* ---------- ⑤ 아래에서 올라온 시트(지도 아래를 덮는 흰 판 · 손잡이 막대는 장식 — 끌기 없음) ---------- */
.mm-sheet {
  position: relative;
  z-index: 4;
  margin-top: -28px;
  padding: 10px 16px 4px;
  border-radius: 24px 24px 0 0;
  background: var(--card, #ffffff);
  box-shadow: 0 -8px 20px rgb(52 42 52 / 0.08);
}

.mm-sheet__handle {
  display: block;
  width: 40px;
  height: 5px;
  margin: 0 auto 8px;
  border-radius: 3px;
  background: #ddd2d8;
}

/* 목록 보기: 시트 모양 없이 보통 목록 */
.mm-sheet--flat {
  margin-top: 6px;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.mm-listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
}

.mm-listhead__title {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-20, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink, #342a34);
}

.mm-sortbtn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin-right: -6px;
  padding: 0 6px 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink, #342a34);
  font-size: var(--fs-15, 0.9375rem);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.mm-sortbtn__chev {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

/* ---------- ⑥ 장소 카드(줄 전체가 상세 링크) ---------- */
.mm-list {
  margin: 4px -16px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft, #f1e9ed);
}

.mm-card {
  border-bottom: 1px solid var(--line-soft, #f1e9ed);
}

.mm-card__link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 44px;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.mm-card__link:hover {
  background: var(--pink-pale, #fff7fa);
}

.mm-card__link:focus-visible {
  outline: 3px solid var(--focus-ring, #b2255a);
  outline-offset: -3px;
}

/* 사진 자리 아이콘(64px 둥근 사각 — 분류 틴트 + 분류 아이콘, 선 색 = 틴트의 진한 색) */
.mm-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
}

.mm-tile .ms-ico {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}

.mm-tile--pink { background: var(--pink-soft, #fff0f5); color: var(--pink-ink, #c72964); }
.mm-tile--sky { background: var(--sky, #e8f4fb); color: var(--sky-ink, #0b6a9a); }
.mm-tile--peach { background: var(--peach, #fff3ec); color: var(--peach-ink, #a24a17); }
.mm-tile--mint { background: var(--mint, #eefaf5); color: var(--mint-ink, #0f766e); }

.mm-tile .ms-ico--f .ms-ico__f {
  fill: currentColor;
  fill-opacity: 0.14;
}

.mm-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-top: 1px;
}

.mm-card__name {
  font-size: var(--fs-17, 1.0625rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink, #342a34);
}

.mm-card__meta {
  font-size: var(--fs-14, 0.875rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--gray, #75636d);              /* 흰 5.58 */
}

/* 「오래된 정보」 회색 태그(출처 확인일 뒤 — 바탕이 있어 "·" 없이 띄운다. 줄이 바뀌면 태그째 다음 줄로) — 회색 글자 --muted 위 4.93 */
.mm-stale {
  display: inline-block;
  padding: 0 6px;
  white-space: nowrap;
  border-radius: 6px;
  background: var(--muted, #f6eff2);
  font-size: var(--fs-13, 0.8125rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray, #75636d);
}

.mm-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

/* 「제휴」 작은 회색 태그(순서·판정과 무관 — 표시만) */
.mm-ptag {
  display: inline-block;
  margin-left: 2px;
  padding: 0 6px;
  border: 1px solid var(--chip-line-strong, #cdbfc7);
  border-radius: 6px;
  font-size: var(--fs-12, 0.75rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  vertical-align: 2px;
  color: var(--gray, #75636d);
}

.mm-ptag--lg {
  font-size: var(--fs-13, 0.8125rem);
  vertical-align: 0;
}

/* ---------- 소아 의료 안내 상자(크림 바탕 · 전화 아이콘) ----------
 * 지도 보기 = 외출 조건 바로 아래(지도 위 — 360 × 640 첫 화면에서도 탭 바 위에 다 보이게) · 목록 보기 = 목록 제목 위 */
.mm-medbox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 10px;
  padding: 14px 16px;
  border: 1px solid var(--note-cream-border, #f1e3a8);
  border-radius: 14px;
  background: var(--cream, #fff8dc);
}

.mm-pad > .mm-medbox {
  margin: 12px 0 0;
}

.mm-medbox__ico,
.mm-sticky__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card, #ffffff);
  color: var(--check, #8a650f);
}

.mm-medbox__ico .ms-ico,
.mm-sticky__ico .ms-ico {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.mm-medbox__title {
  margin: 0;
  font-size: var(--fs-15, 0.9375rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink, #342a34);
}

.mm-medbox__sub {
  margin: 2px 0 0;
  font-size: var(--fs-13, 0.8125rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--gray, #75636d);              /* 크림 위 5.0 */
}

/* ---------- 장소 상세(/map/place/:id) ---------- */
/* 소아 의료: 화면 맨 위 붙박이 안내 */
.mm-sticky {
  position: sticky;
  top: var(--tb-h, 0px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--note-cream-border, #f1e3a8);
  background: var(--cream, #fff8dc);
}

/* 목업 전용: 떠 있는 「예시 화면(시안)」 알약(.ms-sian-float — 틀 위쪽 가운데, 높이 약 20px · js/app.js)이 보이는 동안은
 * 붙박이 안내를 알약 아래(24px)에 붙이고, 알약 뒤 24px 도 크림색으로 덮는다 — 알약이 "전화로 확인" 글자를 가리지 않게.
 * 붙박이 자리만 바뀌므로 화면 흐름은 밀리지 않는다 */
:root:has(.ms-sian-float:not([hidden])) .mm-sticky {
  top: calc(var(--tb-h, 0px) + 24px);
}

:root:has(.ms-sian-float:not([hidden])) .mm-sticky::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 24px;
  background: var(--cream, #fff8dc);
}

.mm-sticky__ico {
  width: 32px;
  height: 32px;
}

.mm-sticky__text {
  margin: 0;
  font-size: var(--fs-15, 0.9375rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink, #342a34);
}

/* 위쪽 분류 틴트 판 + 가운데 큰 분류 아이콘 · 왼쪽 위 원형 뒤로 · 왼쪽 아래 분류 표시 */
.mm-hero {
  position: relative;
  display: grid;
  place-items: center;
  height: 184px;
}

.mm-hero--pink { background: var(--pink-soft, #fff0f5); color: var(--pink-ink, #c72964); }
.mm-hero--sky { background: var(--sky, #e8f4fb); color: var(--sky-ink, #0b6a9a); }
.mm-hero--peach { background: var(--peach, #fff3ec); color: var(--peach-ink, #a24a17); }
.mm-hero--mint { background: var(--mint, #eefaf5); color: var(--mint-ink, #0f766e); }

.mm-hero__ico .ms-ico {
  width: 56px;
  height: 56px;
  stroke-width: 1.7;
}

.mm-hero__ico .ms-ico--f .ms-ico__f {
  fill: currentColor;
  fill-opacity: 0.12;
}

.mm-back {
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card, #ffffff);
  box-shadow: 0 2px 10px rgb(52 42 52 / 0.12);
  color: var(--ink, #342a34);
}

.mm-back .ms-ico {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}

.mm-back:focus-visible {
  outline: 3px solid var(--focus-ring, #b2255a);
  outline-offset: 2px;
}

/* 분류 표시 칩: 흰 바탕 + 정보색 글자(흰 5.93) */
.mm-hero__cat {
  position: absolute;
  bottom: 14px;
  left: 16px;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 999px);
  background: var(--card, #ffffff);
  color: var(--info, #0b6a9a);
  font-size: var(--fs-14, 0.875rem);
  font-weight: 600;
  line-height: 1.4;
}

.mm-place {
  padding-top: 20px;
}

.mm-place__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.mm-place__name {
  margin: 0;
  font-size: var(--fs-24, 1.5rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--ink, #342a34);
}

.mm-place__meta {
  margin: 6px 0 0;
  font-size: var(--fs-15, 0.9375rem);
  line-height: 1.45;
  color: var(--gray, #75636d);
}

/* 판단 정보 표(둥근 테두리 상자 — 한 줄 = 항목 · 값 · 판정) */
.mm-facts {
  margin-top: 18px;
  padding: 0 16px;
  border: 1px solid var(--chip-line, #e3d8de);
  border-radius: 16px;
}

.mm-facts__list {
  margin: 0;
}

.mm-fact {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  min-height: 54px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft, #f1e9ed);
}

.mm-fact:first-child {
  border-top: 0;
}

.mm-fact__label {
  font-size: var(--fs-15, 0.9375rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--gray, #75636d);
}

.mm-fact__val {
  margin: 0;
  font-size: var(--fs-16, 1rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink, #342a34);
  word-break: keep-all;
}

.mm-fact__badge {
  margin: 0;
}

/* 값의 " · " 조각은 조각마다 한 줄("평일 09:00～18:30" / "토 09:00～13:00" — 줄 끝에 "·"가 남지 않게. 조각이 칸보다 길면 그 안에서 바뀐다) */
.mm-seg {
  display: block;
}

/* 11차: 편의 정보(전자레인지 · 비상용 기저귀) — 두 칸 나란히, 칸마다 이름 · 회색 한 줄 · 판정 3색 배지(있음 · 없음 · 확인 필요) */
.mm-amen {
  margin-top: 14px;
}

.mm-amen__title {
  margin: 0 0 8px;
  font-size: var(--fs-14, 0.875rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink, #342a34);
}

.mm-amen__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-amen__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--chip-line, #e3d8de);
  border-radius: 14px;
}

.mm-amen__k {
  margin: 0;
  font-size: var(--fs-15, 0.9375rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink, #342a34);
  word-break: keep-all;
}

.mm-amen__hint {
  margin: 0 0 6px;
  font-size: var(--fs-13, 0.8125rem);
  line-height: 1.4;
  color: var(--gray, #75636d);
  word-break: keep-all;
}

/* 찾아가는 길(연한 회색 상자) */
.mm-dir {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--muted, #f6eff2);
}

.mm-dir__title {
  margin: 0 0 4px;
  font-size: var(--fs-14, 0.875rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink, #342a34);
}

.mm-dir__text {
  margin: 0;
  font-size: var(--fs-15, 0.9375rem);
  line-height: 1.5;
  color: var(--ink, #342a34);
}

/* 출처 줄: 출처 배지(정보색) [+ 「오래된 정보 · 확인 필요」 노랑] + 회색 확인일 */
.mm-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 14px;
}

.mm-srcbadge,
.mm-stalebadge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: var(--fs-13, 0.8125rem);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.mm-srcbadge {
  background: var(--info-bg, #e8f4fb);
  color: var(--info, #0b6a9a);               /* 5.30 */
}

.mm-stalebadge {
  background: var(--check-bg, #fff7df);
  color: var(--check, #8a650f);              /* 4.97 */
}

.mm-stalebadge__ico {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.mm-source__text {
  flex: 1 1 210px;
  margin: 0;
  font-size: var(--fs-13, 0.8125rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--gray, #75636d);
}

/* [전화] [길찾기] — 같은 폭 52px 알약 */
.mm-acts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.mm-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 999px);
  font-size: var(--fs-16, 1rem);
  font-weight: 700;
  cursor: pointer;
}

.mm-act--line {
  border-color: var(--chip-line-strong, #cdbfc7);
  background: var(--card, #ffffff);
  color: var(--ink, #342a34);
}

.mm-act--fill {
  border-color: var(--primary, #c72964);
  background: var(--primary, #c72964);       /* 흰 글씨 5.34 */
  color: var(--primary-foreground, #ffffff);
}

.mm-act--fill:hover {
  background: var(--primary-hover, #b2255a);
}

/* "이 정보가 아직 맞나요?" [네, 그대로예요] [달라졌어요] — 참고 그림처럼 한 줄(왼쪽 질문 · 오른쪽 작은 알약 둘).
 * 질문은 남는 폭에서 두 줄까지 접힌다. 질문 칸이 88px 보다 좁아지면(아주 좁은 화면) 알약이 다음 줄로 */
.mm-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft, #f1e9ed);
}

.mm-confirm__q {
  flex: 1 1 88px;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-15, 0.9375rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink, #342a34);
  word-break: keep-all;
}

.mm-confirm__btns {
  display: flex;
  flex: none;
  gap: 6px;
  margin-left: auto;
}

/* 제보를 보낸 뒤 초록 상자 · "고마워요, 확인했다고 남겼어요"는 줄 전체 */
.mm-confirm > .mm-thanks,
.mm-confirm__done {
  flex: 1 1 100%;
}

.mm-cbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--chip-line-strong, #cdbfc7);
  border-radius: var(--radius-pill, 999px);
  background: var(--card, #ffffff);
  color: var(--ink, #342a34);
  font-size: var(--fs-14, 0.875rem);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.mm-cbtn[aria-pressed="true"] {
  border-color: var(--ink, #342a34);
  background: var(--ink, #342a34);           /* 흰 글씨 13.75 */
  color: var(--on-dark, #ffffff);
}

.mm-cbtn__ico {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}

.mm-confirm__done {
  margin: 2px 0 0;
  font-size: var(--fs-14, 0.875rem);
  font-weight: 500;
  color: var(--gray, #75636d);
}

/* 제보를 보낸 뒤 초록 상자 #place-thanks(--ok-bg 위 --ok 4.94) */
.mm-thanks {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ok-bg, #e6f7f3);
  color: var(--ok, #0f766e);
}

.mm-thanks__ico {
  flex: none;
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}

.mm-thanks__text {
  margin: 0;
  font-size: var(--fs-15, 0.9375rem);
  font-weight: 700;
  line-height: 1.45;
}

.mm-thanks__sub {
  margin: 2px 0 0;
  font-size: var(--fs-13, 0.8125rem);
  font-weight: 500;
  line-height: 1.45;
}

/* ---------- 제보 양식(/map/place/:id/report) ---------- */
.mm-rtop {
  padding-top: 8px;
}

.mm-back--plain {
  position: static;
  margin-left: -10px;
  background: transparent;
  box-shadow: none;
}

.mm-report__title {
  margin: 6px 0 0;
  font-size: var(--fs-24, 1.5rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--ink, #342a34);
}

.mm-report__place {
  margin: 4px 0 16px;
  font-size: var(--fs-15, 0.9375rem);
  color: var(--gray, #75636d);
}

.mm-report__set {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mm-report__legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: var(--fs-14, 0.875rem);
  font-weight: 500;
  color: var(--gray, #75636d);
}

.mm-rcheck + .mm-rcheck {
  margin-top: 8px;
}

.mm-rcheck .ms-check {
  align-items: center;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--chip-line, #e3d8de);
  border-radius: 12px;
  background: var(--card, #ffffff);
  font-size: var(--fs-16, 1rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink, #342a34);
}

.mm-rcheck .ms-check:has(input:checked) {
  border-color: var(--ink, #342a34);
}

.mm-rcheck .ms-check:has(input:focus-visible) {
  outline: 3px solid var(--focus-ring, #b2255a);
  outline-offset: 2px;
}

.mm-report__err {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
}

.mm-report__erricon {
  flex: none;
  width: 18px;
  height: 18px;
}

.mm-report .ms-field {
  margin-top: 18px;
}

.mm-report__acts {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.mm-report .mm-note {
  margin-top: 12px;
}

/* ---------- 시트 안 고르기(지역 · 정렬): 줄 버튼 52px, 고른 것 = 잉크 테두리 + 체크 ---------- */
.mm-opts {
  display: grid;
  gap: 8px;
}

.mm-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--chip-line, #e3d8de);
  border-radius: 12px;
  background: var(--card, #ffffff);
  color: var(--ink, #342a34);
  font-size: var(--fs-16, 1rem);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

/* 고른 줄: 맘스토어 시기·정렬 시트(.s3-opt)·조건 칸(.ms-cq__opt)과 같이 잉크 채움 + 흰 글씨 + 흰 체크 */
.mm-opt[aria-pressed="true"],
.mm-opt[aria-pressed="true"]:hover {
  border: 1px solid var(--ink, #342a34);
  background: var(--ink, #342a34);
  color: var(--on-dark, #ffffff);
  font-weight: 700;
}

.mm-opt[aria-pressed="true"] .mm-opt__ico {
  color: var(--on-dark, #ffffff);
}

.mm-opt__ico {
  flex: none;
  width: 20px;
  height: 20px;
  stroke-width: 2.6;
  color: var(--ink, #342a34);
}

.mm-sheetnote {
  margin: 4px 0 0;
  font-size: var(--fs-13, 0.8125rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray, #75636d);
}