/* Google Fonts에서 DM Sans와 Manrope를 불러옵니다. 실패하면 아래 시스템 글꼴로 대체합니다. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
/* 사이트 전체 디자인 변수와 기본 글꼴에 적용할 선택자: :root. */
:root {
  /* --paper — 사이트 기본 아이보리 배경. 공통 CSS 변수 정의: #fff8f1. */
  --paper: #fff8f1;
  /* --white — 카드와 버튼의 밝은 배경. 공통 CSS 변수 정의: #fffdfa. */
  --white: #fffdfa;
  /* --ink — 기본 텍스트 색. 공통 CSS 변수 정의: #48272b. */
  --ink: #48272b;
  /* --muted — 보조 텍스트 색. 공통 CSS 변수 정의: #836760. */
  --muted: #836760;
  /* --wine — 주요 액션과 마커의 버건디. 공통 CSS 변수 정의: #792f40. */
  --wine: #792f40;
  /* --peach — 아이콘과 강조 요소의 피치색. 공통 CSS 변수 정의: #f6c4a7. */
  --peach: #f6c4a7;
  /* --line — 구분선 색. 공통 CSS 변수 정의: #ebdcd3. */
  --line: #ebdcd3;
  /* --shadow — 공통 그림자. 공통 CSS 변수 정의: 0 8px 30px #572a2915. */
  --shadow: 0 8px 30px #572a2915;
  /* font-family — 앞에서부터 사용 가능한 글꼴 선택. 스타일 설정. */
  font-family:
    /* 글꼴 대체 순서의 한 항목입니다. 앞 글꼴이 없으면 다음 항목을 사용합니다: 'DM Sans', */
    'DM Sans',
    /* 글꼴 대체 순서의 한 항목입니다. 앞 글꼴이 없으면 다음 항목을 사용합니다: -apple-system, */
    -apple-system,
    /* 글꼴 대체 순서의 한 항목입니다. 앞 글꼴이 없으면 다음 항목을 사용합니다: BlinkMacSystemFont, */
    BlinkMacSystemFont,
    /* 글꼴 대체 순서의 한 항목입니다. 앞 글꼴이 없으면 다음 항목을 사용합니다: 'Apple SD Gothic Neo', */
    'Apple SD Gothic Neo',
    /* 글꼴 대체 순서의 한 항목입니다. 앞 글꼴이 없으면 다음 항목을 사용합니다: 'Noto Sans KR', */
    'Noto Sans KR',
    /* 글꼴 대체 순서의 한 항목입니다. 앞 글꼴이 없으면 다음 항목을 사용합니다: sans-serif; */
    sans-serif;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--ink). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--ink);
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--paper). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--paper);
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 모든 요소에 적용할 선택자: *. */
* {
  /* box-sizing — 너비·높이에 padding과 border를 포함할지 결정. 스타일 설정: border-box. */
  box-sizing: border-box;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 문서 본문에 적용할 선택자: body. */
body {
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0. */
  margin: 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 공통 버튼에 적용할 선택자: button. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
button,
/* input에 적용할 선택자: input. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
input,
/* 공통 선택 상자에 적용할 선택자: select. */
select {
  /* font — 글꼴 관련 속성을 함께 지정. 스타일 설정: inherit. */
  font: inherit;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 공통 버튼에 적용할 선택자: button. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
button,
/* 공통 링크에 적용할 선택자: a. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
a,
/* 공통 선택 상자에 적용할 선택자: select. */
select {
  /* -webkit-tap-highlight-color — 모바일 탭 강조 배경 색. 스타일 설정: transparent. */
  -webkit-tap-highlight-color: transparent;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 공통 버튼에 적용할 선택자: button. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
button,
/* 공통 선택 상자에 적용할 선택자: select. */
select {
  /* cursor — 마우스 포인터 모양. 스타일 설정: pointer. */
  cursor: pointer;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 공통 버튼에 적용할 선택자: button. */
button {
  /* color — 글자·currentColor 색상. 스타일 설정: inherit. */
  color: inherit;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 공통 링크에 적용할 선택자: a. */
a {
  /* color — 글자·currentColor 색상. 스타일 설정: inherit. */
  color: inherit;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 공통 SVG 아이콘에 적용할 선택자: svg. */
svg {
  /* width — 너비. 스타일 설정: 20px. */
  width: 20px;
  /* height — 높이. 스타일 설정: 20px. */
  height: 20px;
  /* fill — SVG 도형 내부 색. 스타일 설정: none. */
  fill: none;
  /* stroke — SVG 선 색. 스타일 설정: currentColor. */
  stroke: currentColor;
  /* stroke-width — SVG 선 두께. 스타일 설정: 1.7. */
  stroke-width: 1.7;
  /* stroke-linecap — SVG 선 끝 모양. 스타일 설정: round. */
  stroke-linecap: round;
  /* stroke-linejoin — SVG 선 연결부 모양. 스타일 설정: round. */
  stroke-linejoin: round;
  /* flex-shrink — 공간 부족 시 줄어드는 비율. 스타일 설정: 0. */
  flex-shrink: 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 공통 버튼에 적용할 선택자: button. */
button {
  /* border — 테두리 두께·스타일·색. 스타일 설정: 0. */
  border: 0;
  /* background — 배경 색 또는 이미지. 스타일 설정: none. */
  background: none;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 공통 버튼에 적용할 선택자: button:focus-visible. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
button:focus-visible,
/* 공통 링크에 적용할 선택자: a:focus-visible. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
a:focus-visible,
/* 공통 선택 상자에 적용할 선택자: select:focus-visible. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
select:focus-visible,
/* input:focus-visible에 적용할 선택자: input:focus-visible. */
input:focus-visible {
  /* outline — 키보드 초점 표시 등 외곽선. 스타일 설정: 3px solid #c56d51. */
  outline: 3px solid #c56d51;
  /* outline-offset — 외곽선과 요소 사이 거리. 스타일 설정: 4px. */
  outline-offset: 4px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 공통 버튼에 적용할 선택자: button:disabled. */
button:disabled {
  /* opacity — 전체 불투명도. 스타일 설정: 0.5. */
  opacity: 0.5;
  /* cursor — 마우스 포인터 모양. 스타일 설정: wait. */
  cursor: wait;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* [hidden]에 적용할 선택자: [hidden]. */
[hidden] {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: none !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
  display: none !important;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* .icon-definitions에 적용할 선택자: .icon-definitions. */
.icon-definitions {
  /* position — 배치 좌표의 기준 방식. 스타일 설정: absolute. */
  position: absolute;
  /* width — 너비. 스타일 설정: 0. */
  width: 0;
  /* height — 높이. 스타일 설정: 0. */
  height: 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* .sr-only에 적용할 선택자: .sr-only. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
.sr-only,
/* .skip-link:not(:focus)에 적용할 선택자: .skip-link:not(:focus). */
.skip-link:not(:focus) {
  /* position — 배치 좌표의 기준 방식. 스타일 설정: absolute. */
  position: absolute;
  /* width — 너비. 스타일 설정: 1px. */
  width: 1px;
  /* height — 높이. 스타일 설정: 1px. */
  height: 1px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0. */
  padding: 0;
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: -1px. */
  margin: -1px;
  /* overflow — 넘치는 내용을 숨기거나 스크롤하는 방식. 스타일 설정: hidden. */
  overflow: hidden;
  /* clip — 시각적으로 숨길 영역 지정. 스타일 설정: rect(0, 0, 0, 0). */
  clip: rect(0, 0, 0, 0);
  /* white-space — 공백과 줄바꿈 처리. 스타일 설정: nowrap. */
  white-space: nowrap;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* .skip-link:focus에 적용할 선택자: .skip-link:focus. */
.skip-link:focus {
  /* position — 배치 좌표의 기준 방식. 스타일 설정: fixed. */
  position: fixed;
  /* top — 위쪽 기준 위치. 스타일 설정: 8px. */
  top: 8px;
  /* left — 왼쪽 기준 위치. 스타일 설정: 8px. */
  left: 8px;
  /* z-index — 겹치는 요소의 앞뒤 순서. 스타일 설정: 9999. */
  z-index: 9999;
  /* background — 배경 색 또는 이미지. 스타일 설정: white. */
  background: white;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 16px. */
  padding: 16px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 상단 브랜드·탐색 바에 적용할 선택자: .topbar. */
.topbar {
  /* height — 높이. 스타일 설정: 80px. */
  height: 80px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 32px. */
  padding: 0 32px;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 30px. */
  gap: 30px;
  /* border-bottom — 아래쪽 테두리. 스타일 설정: 1px solid var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
  border-bottom: 1px solid var(--line);
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--paper). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--paper);
  /* position — 배치 좌표의 기준 방식. 스타일 설정: relative. */
  position: relative;
  /* z-index — 겹치는 요소의 앞뒤 순서. 스타일 설정: 1100. */
  z-index: 1100;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* Mapick 브랜드 링크에 적용할 선택자: .brand. */
.brand {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* text-decoration — 링크 밑줄 등 텍스트 장식. 스타일 설정: none. */
  text-decoration: none;
  /* font-family — 앞에서부터 사용 가능한 글꼴 선택. 스타일 설정: Manrope, sans-serif. */
  font-family: Manrope, sans-serif;
  /* font-size — 글자 크기. 스타일 설정: 31px. */
  font-size: 31px;
  /* font-weight — 글자 굵기. 스타일 설정: 800. */
  font-weight: 800;
  /* letter-spacing — 글자 사이 간격. 스타일 설정: -1.7px. */
  letter-spacing: -1.7px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 브랜드 핀 아이콘에 적용할 선택자: .brand-mark. */
.brand-mark {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: grid. */
  display: grid;
  /* place-items — grid 자식의 양 축 정렬. 스타일 설정: center. */
  place-items: center;
  /* width — 너비. 스타일 설정: 35px. */
  width: 35px;
  /* height — 높이. 스타일 설정: 39px. */
  height: 39px;
  /* margin-right — 오른쪽 바깥 여백. 스타일 설정: 9px. */
  margin-right: 9px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 브랜드 핀 아이콘에 적용할 선택자: .brand-mark svg. */
.brand-mark svg {
  /* width — 너비. 스타일 설정: 29px. */
  width: 29px;
  /* height — 높이. 스타일 설정: 34px. */
  height: 34px;
  /* stroke-width — SVG 선 두께. 스타일 설정: 2.4. */
  stroke-width: 2.4;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 브랜드 끝의 점에 적용할 선택자: .brand-period. */
.brand-period {
  /* color — 글자·currentColor 색상. 스타일 설정: #c66c50. */
  color: #c66c50;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 브랜드 옆 소개 문구에 적용할 선택자: .brand-line. */
.brand-line {
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
  /* letter-spacing — 글자 사이 간격. 스타일 설정: 0.1px. */
  letter-spacing: 0.1px;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--muted). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--muted);
  /* border-left — 왼쪽 테두리. 스타일 설정: 1px solid var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
  border-left: 1px solid var(--line);
  /* padding-left — 왼쪽 안쪽 여백. 스타일 설정: 26px. */
  padding-left: 26px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 상단 브랜드·탐색 바에 적용할 선택자: .topbar nav. */
.topbar nav {
  /* margin-left — 왼쪽 바깥 여백. 스타일 설정: auto. */
  margin-left: auto;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 25px. */
  gap: 25px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* .text-button에 적용할 선택자: .text-button. */
.text-button {
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 12px 0. */
  padding: 12px 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 언어 선택 영역에 적용할 선택자: .language. */
.language {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 5px. */
  gap: 5px;
  /* padding-left — 왼쪽 안쪽 여백. 스타일 설정: 22px. */
  padding-left: 22px;
  /* border-left — 왼쪽 테두리. 스타일 설정: 1px solid var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
  border-left: 1px solid var(--line);
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 공통 선택 상자에 적용할 선택자: select. */
select {
  /* background — 배경 색 또는 이미지. 스타일 설정: transparent. */
  background: transparent;
  /* border — 테두리 두께·스타일·색. 스타일 설정: 0. */
  border: 0;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--ink). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--ink);
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
  /* min-height — 최소 높이. 스타일 설정: 36px. */
  min-height: 36px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 언어 선택 영역에 적용할 선택자: .language-globe. */
.language-globe {
  /* font-size — 글자 크기. 스타일 설정: 23px. */
  font-size: 23px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 지도와 장소 탐색 영역 전체에 적용할 선택자: .workspace. */
.workspace {
  /* height — 높이. 스타일 설정: calc(100dvh - 80px). 주소창 변화가 반영되는 동적 화면 높이 단위입니다. */
  height: calc(100dvh - 80px);
  /* min-height — 최소 높이. 스타일 설정: 550px. */
  min-height: 550px;
  /* position — 배치 좌표의 기준 방식. 스타일 설정: relative. */
  position: relative;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: grid. */
  display: grid;
  /* grid-template-columns — grid의 열 너비와 개수. 스타일 설정: 410px 1fr. */
  grid-template-columns: 410px 1fr;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 지도 영역에 적용할 선택자: .map-panel. */
.map-panel {
  /* grid-column — grid에서 차지할 열. 스타일 설정: 2. */
  grid-column: 2;
  /* grid-row — grid에서 차지할 행. 스타일 설정: 1. */
  grid-row: 1;
  /* position — 배치 좌표의 기준 방식. 스타일 설정: relative. */
  position: relative;
  /* min-width — 최소 너비. 스타일 설정: 0. */
  min-width: 0;
  /* background — 배경 색 또는 이미지. 스타일 설정: #f0e4d8. */
  background: #f0e4d8;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 지도 영역에 적용할 선택자: .map-panel #map. */
.map-panel #map {
  /* height — 높이. 스타일 설정: 100%. */
  height: 100%;
  /* width — 너비. 스타일 설정: 100%. */
  width: 100%;
  /* z-index — 겹치는 요소의 앞뒤 순서. 스타일 설정: 0. */
  z-index: 0;
  /* background — 배경 색 또는 이미지. 스타일 설정: #f0e4d8. */
  background: #f0e4d8;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 지도 설명 배지에 적용할 선택자: .map-caption. */
.map-caption {
  /* position — 배치 좌표의 기준 방식. 스타일 설정: absolute. */
  position: absolute;
  /* top — 위쪽 기준 위치. 스타일 설정: 25px. */
  top: 25px;
  /* left — 왼쪽 기준 위치. 스타일 설정: 25px. */
  left: 25px;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 10px. */
  gap: 10px;
  /* z-index — 겹치는 요소의 앞뒤 순서. 스타일 설정: 400. */
  z-index: 400;
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--white). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--white);
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 12px 16px. */
  padding: 12px 16px;
  /* border-radius — 모서리 둥글기. 스타일 설정: 100px. */
  border-radius: 100px;
  /* box-shadow — 요소 주변 그림자. 스타일 설정: var(--shadow). var()는 :root에 정의한 공통 값을 참조합니다. */
  box-shadow: var(--shadow);
  /* font-size — 글자 크기. 스타일 설정: 11px. */
  font-size: 11px;
  /* letter-spacing — 글자 사이 간격. 스타일 설정: 0.3px. */
  letter-spacing: 0.3px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 테라코타 강조 점에 적용할 선택자: .live-dot. */
.live-dot {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: inline-block. */
  display: inline-block;
  /* width — 너비. 스타일 설정: 6px. */
  width: 6px;
  /* height — 높이. 스타일 설정: 6px. */
  height: 6px;
  /* border-radius — 모서리 둥글기. 스타일 설정: 50%. */
  border-radius: 50%;
  /* background — 배경 색 또는 이미지. 스타일 설정: #c46c50. */
  background: #c46c50;
  /* flex-shrink — 공간 부족 시 줄어드는 비율. 스타일 설정: 0. */
  flex-shrink: 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 지도 제어 버튼 묶음에 적용할 선택자: .map-actions. */
.map-actions {
  /* position — 배치 좌표의 기준 방식. 스타일 설정: absolute. */
  position: absolute;
  /* right — 오른쪽 기준 위치. 스타일 설정: 22px. */
  right: 22px;
  /* top — 위쪽 기준 위치. 스타일 설정: 25px. */
  top: 25px;
  /* z-index — 겹치는 요소의 앞뒤 순서. 스타일 설정: 400. */
  z-index: 400;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: grid. */
  display: grid;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 9px. */
  gap: 9px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 지도 제어 버튼에 적용할 선택자: .map-button. */
.map-button {
  /* width — 너비. 스타일 설정: 42px. */
  width: 42px;
  /* height — 높이. 스타일 설정: 42px. */
  height: 42px;
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--white). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--white);
  /* border — 테두리 두께·스타일·색. 스타일 설정: 1px solid #ead7cc. */
  border: 1px solid #ead7cc;
  /* border-radius — 모서리 둥글기. 스타일 설정: 12px. */
  border-radius: 12px;
  /* box-shadow — 요소 주변 그림자. 스타일 설정: var(--shadow). var()는 :root에 정의한 공통 값을 참조합니다. */
  box-shadow: var(--shadow);
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: grid. */
  display: grid;
  /* place-items — grid 자식의 양 축 정렬. 스타일 설정: center. */
  place-items: center;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 지도 제어 버튼에 적용할 선택자: .map-button:hover. */
.map-button:hover {
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--peach). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--peach);
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소 탐색 패널에 적용할 선택자: .explorer. */
.explorer {
  /* grid-column — grid에서 차지할 열. 스타일 설정: 1. */
  grid-column: 1;
  /* grid-row — grid에서 차지할 행. 스타일 설정: 1. */
  grid-row: 1;
  /* min-height — 최소 높이. 스타일 설정: 0. */
  min-height: 0;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* flex-direction — flex 자식의 배치 방향. 스타일 설정: column. */
  flex-direction: column;
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--paper). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--paper);
  /* border-right — 오른쪽 테두리. 스타일 설정: 1px solid var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
  border-right: 1px solid var(--line);
  /* z-index — 겹치는 요소의 앞뒤 순서. 스타일 설정: 500. */
  z-index: 500;
  /* box-shadow — 요소 주변 그림자. 스타일 설정: 10px 0 30px #572a2906. */
  box-shadow: 10px 0 30px #572a2906;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 소개·검색·필터 영역에 적용할 선택자: .discovery. */
.discovery {
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 32px 26px 20px. */
  padding: 32px 26px 20px;
  /* border-bottom — 아래쪽 테두리. 스타일 설정: 1px solid var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
  border-bottom: 1px solid var(--line);
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 작은 보조 제목에 적용할 선택자: .eyebrow. */
.eyebrow {
  /* font-size — 글자 크기. 스타일 설정: 9px. */
  font-size: 9px;
  /* letter-spacing — 글자 사이 간격. 스타일 설정: 1.5px. */
  letter-spacing: 1.5px;
  /* font-weight — 글자 굵기. 스타일 설정: 700. */
  font-weight: 700;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 7px. */
  gap: 7px;
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 0 15px. */
  margin: 0 0 15px;
  /* color — 글자·currentColor 색상. 스타일 설정: #a14d45. */
  color: #a14d45;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* h1에 적용할 선택자: h1. */
h1 {
  /* font-family — 앞에서부터 사용 가능한 글꼴 선택. 스타일 설정: Manrope, sans-serif. */
  font-family: Manrope, sans-serif;
  /* font-size — 글자 크기. 스타일 설정: 29px. */
  font-size: 29px;
  /* font-weight — 글자 굵기. 스타일 설정: 600. */
  font-weight: 600;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.24. */
  line-height: 1.24;
  /* letter-spacing — 글자 사이 간격. 스타일 설정: -1.2px. */
  letter-spacing: -1.2px;
  /* max-width — 최대 너비. 스타일 설정: 320px. */
  max-width: 320px;
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 0 10px. */
  margin: 0 0 10px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 소개 문장에 적용할 선택자: .intro. */
.intro {
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.7. */
  line-height: 1.7;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--muted). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--muted);
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 0 22px. */
  margin: 0 0 22px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 검색 입력 영역에 적용할 선택자: .search-box. */
.search-box {
  /* height — 높이. 스타일 설정: 47px. */
  height: 47px;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 10px. */
  gap: 10px;
  /* border — 테두리 두께·스타일·색. 스타일 설정: 1px solid #ead9cd. */
  border: 1px solid #ead9cd;
  /* border-radius — 모서리 둥글기. 스타일 설정: 10px. */
  border-radius: 10px;
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--white). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--white);
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 12px. */
  padding: 0 12px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 검색 입력 영역에 적용할 선택자: .search-box svg. */
.search-box svg {
  /* color — 글자·currentColor 색상. 스타일 설정: #a16c60. */
  color: #a16c60;
  /* width — 너비. 스타일 설정: 17px. */
  width: 17px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 검색 입력 영역에 적용할 선택자: .search-box input. */
.search-box input {
  /* width — 너비. 스타일 설정: 100%. */
  width: 100%;
  /* min-width — 최소 너비. 스타일 설정: 0. */
  min-width: 0;
  /* border — 테두리 두께·스타일·색. 스타일 설정: 0. */
  border: 0;
  /* background — 배경 색 또는 이미지. 스타일 설정: none. */
  background: none;
  /* outline — 키보드 초점 표시 등 외곽선. 스타일 설정: none. */
  outline: none;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--ink). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--ink);
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
  /* height — 높이. 스타일 설정: 100%. */
  height: 100%;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 검색 입력 영역에 적용할 선택자: .search-box:focus-within. */
.search-box:focus-within {
  /* border-color — 테두리 색. 스타일 설정: #c56d51. */
  border-color: #c56d51;
  /* box-shadow — 요소 주변 그림자. 스타일 설정: 0 0 0 2px #c56d5122. */
  box-shadow: 0 0 0 2px #c56d5122;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 검색 입력 영역에 적용할 선택자: .search-box input::placeholder. */
.search-box input::placeholder {
  /* color — 글자·currentColor 색상. 스타일 설정: #8a6d60. */
  color: #8a6d60;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 검색 입력 영역에 적용할 선택자: .search-box kbd. */
.search-box kbd {
  /* font-size — 글자 크기. 스타일 설정: 11px. */
  font-size: 11px;
  /* color — 글자·currentColor 색상. 스타일 설정: #91978b. */
  color: #91978b;
  /* border — 테두리 두께·스타일·색. 스타일 설정: 1px solid var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
  border: 1px solid var(--line);
  /* border-radius — 모서리 둥글기. 스타일 설정: 3px. */
  border-radius: 3px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 1px 5px. */
  padding: 1px 5px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 지역·태그 필터 줄에 적용할 선택자: .filter-row. */
.filter-row {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 7px. */
  gap: 7px;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* margin-top — 위쪽 바깥 여백. 스타일 설정: 13px. */
  margin-top: 13px;
  /* flex-wrap — flex 자식의 다음 줄 배치 여부. 스타일 설정: wrap. */
  flex-wrap: wrap;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 지역 선택 영역에 적용할 선택자: .region. */
.region {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 3px. */
  gap: 3px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 지역 선택 영역에 적용할 선택자: .region svg. */
.region svg {
  /* width — 너비. 스타일 설정: 13px. */
  width: 13px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 지역 선택 영역에 적용할 선택자: .region select. */
.region select {
  /* font-size — 글자 크기. 스타일 설정: 11px. */
  font-size: 11px;
  /* max-width — 최대 너비. 스타일 설정: 110px. */
  max-width: 110px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* .filter-divider에 적용할 선택자: .filter-divider. */
.filter-divider {
  /* height — 높이. 스타일 설정: 17px. */
  height: 17px;
  /* width — 너비. 스타일 설정: 1px. */
  width: 1px;
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--line);
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 3px. */
  margin: 0 3px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 태그 필터 버튼에 적용할 선택자: .chip. */
.chip {
  /* border — 테두리 두께·스타일·색. 스타일 설정: 1px solid var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
  border: 1px solid var(--line);
  /* border-radius — 모서리 둥글기. 스타일 설정: 20px. */
  border-radius: 20px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 9px 12px. */
  padding: 9px 12px;
  /* font-size — 글자 크기. 스타일 설정: 10px. */
  font-size: 10px;
  /* white-space — 공백과 줄바꿈 처리. 스타일 설정: nowrap. */
  white-space: nowrap;
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--white). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--white);
  /* min-height — 최소 높이. 스타일 설정: 36px. */
  min-height: 36px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 선택된 태그 필터에 적용할 선택자: .chip.active. */
.chip.active {
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--wine). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--wine);
  /* border-color — 테두리 색. 스타일 설정: var(--wine). var()는 :root에 정의한 공통 값을 참조합니다. */
  border-color: var(--wine);
  /* color — 글자·currentColor 색상. 스타일 설정: white. */
  color: white;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 추천 계정 선택 영역에 적용할 선택자: .creator-filter. */
.creator-filter {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* justify-content — flex/grid 자식의 주축 정렬. 스타일 설정: space-between. */
  justify-content: space-between;
  /* font-size — 글자 크기. 스타일 설정: 10px. */
  font-size: 10px;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--muted). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--muted);
  /* margin-top — 위쪽 바깥 여백. 스타일 설정: 9px. */
  margin-top: 9px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 추천 계정 선택 영역에 적용할 선택자: .creator-filter select. */
.creator-filter select {
  /* font-size — 글자 크기. 스타일 설정: 10px. */
  font-size: 10px;
  /* max-width — 최대 너비. 스타일 설정: 230px. */
  max-width: 230px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소 목록·상세 bottom sheet에 적용할 선택자: .results. */
.results {
  /* min-height — 최소 높이. 스타일 설정: 0. */
  min-height: 0;
  /* overflow — 넘치는 내용을 숨기거나 스크롤하는 방식. 스타일 설정: auto. */
  overflow: auto;
  /* flex — flex 자식의 늘어남·줄어듦·기본 크기. 스타일 설정: 1. */
  flex: 1;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 22px 18px. */
  padding: 0 22px 18px;
  /* scrollbar-width — 스크롤바 두께. 스타일 설정: thin. */
  scrollbar-width: thin;
  /* scrollbar-color — 스크롤바 손잡이와 배경 색. 스타일 설정: #e2c7b8 transparent. */
  scrollbar-color: #e2c7b8 transparent;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 결과 제목·개수 줄에 적용할 선택자: .results-header. */
.results-header {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* justify-content — flex/grid 자식의 주축 정렬. 스타일 설정: space-between. */
  justify-content: space-between;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 23px 4px 15px. */
  padding: 23px 4px 15px;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 10px. */
  gap: 10px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 결과 제목·개수 줄에 적용할 선택자: .results-header h2. */
.results-header h2 {
  /* font-size — 글자 크기. 스타일 설정: 13px. */
  font-size: 13px;
  /* font-weight — 글자 굵기. 스타일 설정: 600. */
  font-weight: 600;
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0. */
  margin: 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 결과 제목·개수 줄에 적용할 선택자: .results-header > span. */
.results-header > span {
  /* font-size — 글자 크기. 스타일 설정: 10px. */
  font-size: 10px;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--muted). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--muted);
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소 카드에 적용할 선택자: .place-card. */
.place-card {
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--white). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--white);
  /* border — 테두리 두께·스타일·색. 스타일 설정: 1px solid var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
  border: 1px solid var(--line);
  /* border-radius — 모서리 둥글기. 스타일 설정: 14px. */
  border-radius: 14px;
  /* overflow — 넘치는 내용을 숨기거나 스크롤하는 방식. 스타일 설정: hidden. */
  overflow: hidden;
  /* box-shadow — 요소 주변 그림자. 스타일 설정: 0 3px 12px #572a2903. */
  box-shadow: 0 3px 12px #572a2903;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소 상세를 여는 카드 버튼에 적용할 선택자: .card-open. */
.card-open {
  /* width — 너비. 스타일 설정: 100%. */
  width: 100%;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0. */
  padding: 0;
  /* text-align — 텍스트의 수평 정렬. 스타일 설정: left. */
  text-align: left;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: block. */
  display: block;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 카드 사진 영역에 적용할 선택자: .card-photo. */
.card-photo {
  /* position — 배치 좌표의 기준 방식. 스타일 설정: relative. */
  position: relative;
  /* height — 높이. 스타일 설정: 188px. */
  height: 188px;
  /* overflow — 넘치는 내용을 숨기거나 스크롤하는 방식. 스타일 설정: hidden. */
  overflow: hidden;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 카드 사진 영역에 적용할 선택자: .card-photo img. */
.card-photo img {
  /* width — 너비. 스타일 설정: 100%. */
  width: 100%;
  /* height — 높이. 스타일 설정: 100%. */
  height: 100%;
  /* object-fit — 이미지 박스 안의 크기 맞춤 방식. 스타일 설정: cover. */
  object-fit: cover;
  /* object-position — 이미지가 잘릴 때 기준으로 삼는 위치. 스타일 설정: 50% 46%. */
  object-position: 50% 46%;
  /* transition — 속성이 변할 때 부드럽게 전환. 스타일 설정: transform 0.35s. */
  transition: transform 0.35s;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소 상세를 여는 카드 버튼에 적용할 선택자: .card-open:hover img. */
.card-open:hover img {
  /* transform — 요소의 이동·크기 변형. 스타일 설정: scale(1.025). */
  transform: scale(1.025);
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 사진 위 지역 배지에 적용할 선택자: .photo-badge. */
.photo-badge {
  /* position — 배치 좌표의 기준 방식. 스타일 설정: absolute. */
  position: absolute;
  /* top — 위쪽 기준 위치. 스타일 설정: 12px. */
  top: 12px;
  /* left — 왼쪽 기준 위치. 스타일 설정: 12px. */
  left: 12px;
  /* background — 배경 색 또는 이미지. 스타일 설정: #fff8f1ed. */
  background: #fff8f1ed;
  /* backdrop-filter — 요소 뒤쪽 배경의 흐림 효과. 스타일 설정: blur(8px). */
  backdrop-filter: blur(8px);
  /* border-radius — 모서리 둥글기. 스타일 설정: 20px. */
  border-radius: 20px;
  /* font-size — 글자 크기. 스타일 설정: 9px. */
  font-size: 9px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 6px 10px. */
  padding: 6px 10px;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 5px. */
  gap: 5px;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 사진 위 지역 배지에 적용할 선택자: .photo-badge svg. */
.photo-badge svg {
  /* width — 너비. 스타일 설정: 11px. */
  width: 11px;
  /* height — 높이. 스타일 설정: 11px. */
  height: 11px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 사진 위 카드 번호에 적용할 선택자: .photo-number. */
.photo-number {
  /* position — 배치 좌표의 기준 방식. 스타일 설정: absolute. */
  position: absolute;
  /* bottom — 아래쪽 기준 위치. 스타일 설정: 11px. */
  bottom: 11px;
  /* right — 오른쪽 기준 위치. 스타일 설정: 12px. */
  right: 12px;
  /* color — 글자·currentColor 색상. 스타일 설정: white. */
  color: white;
  /* font-size — 글자 크기. 스타일 설정: 10px. */
  font-size: 10px;
  /* background — 배경 색 또는 이미지. 스타일 설정: #792f40cf. */
  background: #792f40cf;
  /* border-radius — 모서리 둥글기. 스타일 설정: 20px. */
  border-radius: 20px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 4px 8px. */
  padding: 4px 8px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 카드의 텍스트 영역에 적용할 선택자: .card-copy. */
.card-copy {
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 17px 17px 15px. */
  padding: 17px 17px 15px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 지역·분류 표시에 적용할 선택자: .place-meta. */
.place-meta {
  /* text-transform — 영문 대소문자 표시 변환. 스타일 설정: uppercase. */
  text-transform: uppercase;
  /* font-size — 글자 크기. 스타일 설정: 9px. */
  font-size: 9px;
  /* letter-spacing — 글자 사이 간격. 스타일 설정: 1px. */
  letter-spacing: 1px;
  /* color — 글자·currentColor 색상. 스타일 설정: #a05a4e. */
  color: #a05a4e;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 7px. */
  gap: 7px;
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 0 8px. */
  margin: 0 0 8px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소명과 화살표 줄에 적용할 선택자: .place-title-row. */
.place-title-row {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* justify-content — flex/grid 자식의 주축 정렬. 스타일 설정: space-between. */
  justify-content: space-between;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 15px. */
  gap: 15px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소명과 화살표 줄에 적용할 선택자: .place-title-row h3. */
.place-title-row h3 {
  /* font-size — 글자 크기. 스타일 설정: 22px. */
  font-size: 22px;
  /* letter-spacing — 글자 사이 간격. 스타일 설정: -0.7px. */
  letter-spacing: -0.7px;
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0. */
  margin: 0;
  /* font-weight — 글자 굵기. 스타일 설정: 600. */
  font-weight: 600;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소명과 화살표 줄에 적용할 선택자: .place-title-row > svg. */
.place-title-row > svg {
  /* width — 너비. 스타일 설정: 17px. */
  width: 17px;
  /* color — 글자·currentColor 색상. 스타일 설정: #ac786a. */
  color: #ac786a;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 대표 메뉴와 가격에 적용할 선택자: .card-dish. */
.card-dish {
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 8px 0 12px. */
  margin: 8px 0 12px;
  /* color — 글자·currentColor 색상. 스타일 설정: #825d52. */
  color: #825d52;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* justify-content — flex/grid 자식의 주축 정렬. 스타일 설정: space-between. */
  justify-content: space-between;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 8px. */
  gap: 8px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 대표 메뉴와 가격에 적용할 선택자: .card-dish strong. */
.card-dish strong {
  /* font-weight — 글자 굵기. 스타일 설정: 500. */
  font-weight: 500;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--ink). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--ink);
  /* white-space — 공백과 줄바꿈 처리. 스타일 설정: nowrap. */
  white-space: nowrap;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 태그 묶음에 적용할 선택자: .tags. */
.tags {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 5px. */
  gap: 5px;
  /* flex-wrap — flex 자식의 다음 줄 배치 여부. 스타일 설정: wrap. */
  flex-wrap: wrap;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 개별 장소 태그에 적용할 선택자: .tag. */
.tag {
  /* font-size — 글자 크기. 스타일 설정: 9px. */
  font-size: 9px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 5px 9px. */
  padding: 5px 9px;
  /* border-radius — 모서리 둥글기. 스타일 설정: 5px. */
  border-radius: 5px;
  /* color — 글자·currentColor 색상. 스타일 설정: #935846. */
  color: #935846;
  /* background — 배경 색 또는 이미지. 스타일 설정: #fae9dc. */
  background: #fae9dc;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 추천 출처 표시에 적용할 선택자: .card-source. */
.card-source {
  /* border-top — 위쪽 테두리. 스타일 설정: 1px solid #efdfd3. */
  border-top: 1px solid #efdfd3;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 12px 16px. */
  padding: 12px 16px;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 9px. */
  gap: 9px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 출처 계정의 장식 원에 적용할 선택자: .avatar. */
.avatar {
  /* width — 너비. 스타일 설정: 27px. */
  width: 27px;
  /* height — 높이. 스타일 설정: 27px. */
  height: 27px;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: grid. */
  display: grid;
  /* place-items — grid 자식의 양 축 정렬. 스타일 설정: center. */
  place-items: center;
  /* border-radius — 모서리 둥글기. 스타일 설정: 50%. */
  border-radius: 50%;
  /* background — 배경 색 또는 이미지. 스타일 설정: #f4dfcc. */
  background: #f4dfcc;
  /* font-family — 앞에서부터 사용 가능한 글꼴 선택. 스타일 설정: Georgia, serif. */
  font-family: Georgia, serif;
  /* font-size — 글자 크기. 스타일 설정: 13px. */
  font-size: 13px;
  /* color — 글자·currentColor 색상. 스타일 설정: #9c5d42. */
  color: #9c5d42;
  /* font-style — 글자의 기울임 스타일. 스타일 설정: italic. */
  font-style: italic;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 출처 계정 설명에 적용할 선택자: .source-copy. */
.source-copy {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* flex-direction — flex 자식의 배치 방향. 스타일 설정: column. */
  flex-direction: column;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 2px. */
  gap: 2px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 출처 계정 설명에 적용할 선택자: .source-copy small. */
.source-copy small {
  /* font-size — 글자 크기. 스타일 설정: 8px. */
  font-size: 8px;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--muted). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--muted);
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 출처 계정 설명에 적용할 선택자: .source-copy a. */
.source-copy a {
  /* font-size — 글자 크기. 스타일 설정: 10px. */
  font-size: 10px;
  /* text-decoration — 링크 밑줄 등 텍스트 장식. 스타일 설정: none. */
  text-decoration: none;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 원문 게시물 링크에 적용할 선택자: .source-post. */
.source-post {
  /* margin-left — 왼쪽 바깥 여백. 스타일 설정: auto. */
  margin-left: auto;
  /* color — 글자·currentColor 색상. 스타일 설정: #a57c6b. */
  color: #a57c6b;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: grid. */
  display: grid;
  /* place-items — grid 자식의 양 축 정렬. 스타일 설정: center. */
  place-items: center;
  /* width — 너비. 스타일 설정: 30px. */
  width: 30px;
  /* height — 높이. 스타일 설정: 30px. */
  height: 30px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 원문 게시물 링크에 적용할 선택자: .source-post svg. */
.source-post svg {
  /* width — 너비. 스타일 설정: 15px. */
  width: 15px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소 목록 아래 안내에 적용할 선택자: .list-footer. */
.list-footer {
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 25px 10px 0. */
  padding: 25px 10px 0;
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: flex-start. */
  align-items: flex-start;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 10px. */
  gap: 10px;
  /* justify-content — flex/grid 자식의 주축 정렬. 스타일 설정: center. */
  justify-content: center;
  /* color — 글자·currentColor 색상. 스타일 설정: #8e6556. */
  color: #8e6556;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* .tiny-flower에 적용할 선택자: .tiny-flower. */
.tiny-flower {
  /* font-size — 글자 크기. 스타일 설정: 23px. */
  font-size: 23px;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.3. */
  line-height: 1.3;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소 목록 아래 안내에 적용할 선택자: .list-footer p. */
.list-footer p {
  /* font-size — 글자 크기. 스타일 설정: 10px. */
  font-size: 10px;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.7. */
  line-height: 1.7;
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0. */
  margin: 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 모바일 패널 펼침 버튼에 적용할 선택자: .sheet-toggle. */
.sheet-toggle {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: none. */
  display: none;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* .leaflet-container에 적용할 선택자: .leaflet-container. */
.leaflet-container {
  /* font — 글꼴 관련 속성을 함께 지정. 스타일 설정: inherit. */
  font: inherit;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* .leaflet-control-attribution에 적용할 선택자: .leaflet-control-attribution. */
.leaflet-control-attribution {
  /* font-size — 글자 크기. 스타일 설정: 9px !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
  font-size: 9px !important;
  /* background — 배경 색 또는 이미지. 스타일 설정: #fff8f1e8 !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
  background: #fff8f1e8 !important;
  /* color — 글자·currentColor 색상. 스타일 설정: #825d52. */
  color: #825d52;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* .leaflet-control-zoom에 적용할 선택자: .leaflet-control-zoom. */
.leaflet-control-zoom {
  /* border — 테두리 두께·스타일·색. 스타일 설정: 1px solid #e5cec0 !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
  border: 1px solid #e5cec0 !important;
  /* border-radius — 모서리 둥글기. 스타일 설정: 10px !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
  border-radius: 10px !important;
  /* overflow — 넘치는 내용을 숨기거나 스크롤하는 방식. 스타일 설정: hidden. */
  overflow: hidden;
  /* box-shadow — 요소 주변 그림자. 스타일 설정: var(--shadow) !important. !important로 라이브러리 기본값보다 우선 적용합니다. var()는 :root에 정의한 공통 값을 참조합니다. */
  box-shadow: var(--shadow) !important;
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 22px 32px 0 !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
  margin: 0 22px 32px 0 !important;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* .leaflet-control-zoom a에 적용할 선택자: .leaflet-control-zoom a. */
.leaflet-control-zoom a {
  /* color — 글자·currentColor 색상. 스타일 설정: var(--wine) !important. !important로 라이브러리 기본값보다 우선 적용합니다. var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--wine) !important;
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--white) !important. !important로 라이브러리 기본값보다 우선 적용합니다. var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--white) !important;
  /* font-weight — 글자 굵기. 스타일 설정: 400 !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
  font-weight: 400 !important;
  /* width — 너비. 스타일 설정: 38px !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
  width: 38px !important;
  /* height — 높이. 스타일 설정: 37px !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
  height: 37px !important;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 37px !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
  line-height: 37px !important;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* Leaflet 장소 마커에 적용할 선택자: .place-marker. */
.place-marker {
  /* background — 배경 색 또는 이미지. 스타일 설정: transparent. */
  background: transparent;
  /* border — 테두리 두께·스타일·색. 스타일 설정: 0. */
  border: 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소 이름이 있는 핀에 적용할 선택자: .marker-pill. */
.marker-pill {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 8px. */
  gap: 8px;
  /* border — 테두리 두께·스타일·색. 스타일 설정: 3px solid var(--white). var()는 :root에 정의한 공통 값을 참조합니다. */
  border: 3px solid var(--white);
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--wine). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--wine);
  /* color — 글자·currentColor 색상. 스타일 설정: white. */
  color: white;
  /* box-shadow — 요소 주변 그림자. 스타일 설정: 0 5px 15px #792f4040. */
  box-shadow: 0 5px 15px #792f4040;
  /* border-radius — 모서리 둥글기. 스타일 설정: 30px. */
  border-radius: 30px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 8px 15px 8px 10px. */
  padding: 8px 15px 8px 10px;
  /* position — 배치 좌표의 기준 방식. 스타일 설정: relative. */
  position: relative;
  /* white-space — 공백과 줄바꿈 처리. 스타일 설정: nowrap. */
  white-space: nowrap;
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
  /* font-weight — 글자 굵기. 스타일 설정: 600. */
  font-weight: 600;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소 이름이 있는 핀에 적용할 선택자: .marker-pill:after. */
.marker-pill:after {
  /* content — 가상 요소에 생성할 내용. 스타일 설정: ''. */
  content: '';
  /* position — 배치 좌표의 기준 방식. 스타일 설정: absolute. */
  position: absolute;
  /* left — 왼쪽 기준 위치. 스타일 설정: 50%. */
  left: 50%;
  /* bottom — 아래쪽 기준 위치. 스타일 설정: -9px. */
  bottom: -9px;
  /* border-left — 왼쪽 테두리. 스타일 설정: 7px solid transparent. */
  border-left: 7px solid transparent;
  /* border-right — 오른쪽 테두리. 스타일 설정: 7px solid transparent. */
  border-right: 7px solid transparent;
  /* border-top — 위쪽 테두리. 스타일 설정: 8px solid var(--white). var()는 :root에 정의한 공통 값을 참조합니다. */
  border-top: 8px solid var(--white);
  /* transform — 요소의 이동·크기 변형. 스타일 설정: translateX(-50%). */
  transform: translateX(-50%);
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소 이름이 있는 핀에 적용할 선택자: .marker-pill svg. */
.marker-pill svg {
  /* width — 너비. 스타일 설정: 18px. */
  width: 18px;
  /* height — 높이. 스타일 설정: 18px. */
  height: 18px;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--peach). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--peach);
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 장소 이름이 있는 핀에 적용할 선택자: .marker-pill.selected. */
.marker-pill.selected {
  /* background — 배경 색 또는 이미지. 스타일 설정: #b9563d. */
  background: #b9563d;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 지도 장애 안내에 적용할 선택자: .map-status. */
.map-status {
  /* position — 배치 좌표의 기준 방식. 스타일 설정: absolute. */
  position: absolute;
  /* bottom — 아래쪽 기준 위치. 스타일 설정: 45px. */
  bottom: 45px;
  /* left — 왼쪽 기준 위치. 스타일 설정: 15px. */
  left: 15px;
  /* right — 오른쪽 기준 위치. 스타일 설정: 80px. */
  right: 80px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 12px 15px. */
  padding: 12px 15px;
  /* border-radius — 모서리 둥글기. 스타일 설정: 10px. */
  border-radius: 10px;
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--white). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--white);
  /* box-shadow — 요소 주변 그림자. 스타일 설정: var(--shadow). var()는 :root에 정의한 공통 값을 참조합니다. */
  box-shadow: var(--shadow);
  /* font-size — 글자 크기. 스타일 설정: 11px. */
  font-size: 11px;
  /* z-index — 겹치는 요소의 앞뒤 순서. 스타일 설정: 401. */
  z-index: 401;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.6. */
  line-height: 1.6;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 임시 상태 알림에 적용할 선택자: .toast. */
.toast {
  /* position — 배치 좌표의 기준 방식. 스타일 설정: fixed. */
  position: fixed;
  /* left — 왼쪽 기준 위치. 스타일 설정: 50%. */
  left: 50%;
  /* bottom — 아래쪽 기준 위치. 스타일 설정: 30px. */
  bottom: 30px;
  /* transform — 요소의 이동·크기 변형. 스타일 설정: translateX(-50%). */
  transform: translateX(-50%);
  /* z-index — 겹치는 요소의 앞뒤 순서. 스타일 설정: 1500. */
  z-index: 1500;
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--wine). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--wine);
  /* color — 글자·currentColor 색상. 스타일 설정: white. */
  color: white;
  /* box-shadow — 요소 주변 그림자. 스타일 설정: var(--shadow). var()는 :root에 정의한 공통 값을 참조합니다. */
  box-shadow: var(--shadow);
  /* border-radius — 모서리 둥글기. 스타일 설정: 10px. */
  border-radius: 10px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 13px 20px. */
  padding: 13px 20px;
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
  /* max-width — 최대 너비. 스타일 설정: 90vw. */
  max-width: 90vw;
  /* width — 너비. 스타일 설정: max-content. */
  width: max-content;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 상세 화면 뒤로가기 줄에 적용할 선택자: .detail-toolbar. */
.detail-toolbar {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* justify-content — flex/grid 자식의 주축 정렬. 스타일 설정: space-between. */
  justify-content: space-between;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 15px 0. */
  padding: 15px 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 목록으로 돌아가기 버튼에 적용할 선택자: .back-button. */
.back-button {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 4px. */
  gap: 4px;
  /* font-size — 글자 크기. 스타일 설정: 11px. */
  font-size: 11px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 8px 0. */
  padding: 8px 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 상세 사진에 적용할 선택자: .detail-image. */
.detail-image {
  /* width — 너비. 스타일 설정: 100%. */
  width: 100%;
  /* height — 높이. 스타일 설정: 215px. */
  height: 215px;
  /* object-fit — 이미지 박스 안의 크기 맞춤 방식. 스타일 설정: cover. */
  object-fit: cover;
  /* border-radius — 모서리 둥글기. 스타일 설정: 12px. */
  border-radius: 12px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 상세 장소명에 적용할 선택자: .detail-heading. */
.detail-heading {
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 20px 0 10px. */
  margin: 20px 0 10px;
  /* font-size — 글자 크기. 스타일 설정: 28px. */
  font-size: 28px;
  /* letter-spacing — 글자 사이 간격. 스타일 설정: -1px. */
  letter-spacing: -1px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 상세 설명에 적용할 선택자: .detail-description. */
.detail-description {
  /* font-size — 글자 크기. 스타일 설정: 13px. */
  font-size: 13px;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.9. */
  line-height: 1.9;
  /* color — 글자·currentColor 색상. 스타일 설정: #7e5a50. */
  color: #7e5a50;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 상세 정보 구획에 적용할 선택자: .detail-block. */
.detail-block {
  /* border-top — 위쪽 테두리. 스타일 설정: 1px solid var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
  border-top: 1px solid var(--line);
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 18px 0. */
  padding: 18px 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 상세 정보 구획에 적용할 선택자: .detail-block h3. */
.detail-block h3 {
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 0 12px. */
  margin: 0 0 12px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 주소·영업시간 행에 적용할 선택자: .info-row. */
.info-row {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 10px. */
  gap: 10px;
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.8. */
  line-height: 1.8;
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 0 10px. */
  margin: 0 0 10px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 주소·영업시간 행에 적용할 선택자: .info-row svg. */
.info-row svg {
  /* width — 너비. 스타일 설정: 16px. */
  width: 16px;
  /* margin-top — 위쪽 바깥 여백. 스타일 설정: 3px. */
  margin-top: 3px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 주소·영업시간 행에 적용할 선택자: .info-row p. */
.info-row p {
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0. */
  margin: 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 주소·영업시간 행에 적용할 선택자: .info-row small. */
.info-row small {
  /* color — 글자·currentColor 색상. 스타일 설정: var(--muted). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--muted);
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: block. */
  display: block;
  /* font-size — 글자 크기. 스타일 설정: 11px. */
  font-size: 11px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 메뉴 목록에 적용할 선택자: .menu-list. */
.menu-list {
  /* list-style — 목록 기호의 표시 방식. 스타일 설정: none. */
  list-style: none;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0. */
  padding: 0;
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0. */
  margin: 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 메뉴 목록에 적용할 선택자: .menu-list li. */
.menu-list li {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* justify-content — flex/grid 자식의 주축 정렬. 스타일 설정: space-between. */
  justify-content: space-between;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: flex-start. */
  align-items: flex-start;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 14px. */
  gap: 14px;
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.6. */
  line-height: 1.6;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 8px 0. */
  padding: 8px 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 메뉴 목록에 적용할 선택자: .menu-list strong. */
.menu-list strong {
  /* font-size — 글자 크기. 스타일 설정: 11px. */
  font-size: 11px;
  /* white-space — 공백과 줄바꿈 처리. 스타일 설정: nowrap. */
  white-space: nowrap;
  /* font-weight — 글자 굵기. 스타일 설정: 500. */
  font-weight: 500;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 메뉴 목록에 적용할 선택자: .menu-list small. */
.menu-list small {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: block. */
  display: block;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--muted). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--muted);
  /* font-size — 글자 크기. 스타일 설정: 10px. */
  font-size: 10px;
  /* margin-top — 위쪽 바깥 여백. 스타일 설정: 2px. */
  margin-top: 2px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 외부 지도 링크 묶음에 적용할 선택자: .external-actions. */
.external-actions {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: grid. */
  display: grid;
  /* grid-template-columns — grid의 열 너비와 개수. 스타일 설정: 1fr 1fr. */
  grid-template-columns: 1fr 1fr;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 8px. */
  gap: 8px;
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 16px 0. */
  margin: 16px 0;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 외부 지도 링크 묶음에 적용할 선택자: .external-actions a. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
.external-actions a,
/* Instagram 원문 버튼에 적용할 선택자: .instagram-action. */
.instagram-action {
  /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
  display: flex;
  /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
  align-items: center;
  /* justify-content — flex/grid 자식의 주축 정렬. 스타일 설정: center. */
  justify-content: center;
  /* gap — 자식 요소 사이 간격. 스타일 설정: 8px. */
  gap: 8px;
  /* text-decoration — 링크 밑줄 등 텍스트 장식. 스타일 설정: none. */
  text-decoration: none;
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--wine). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--wine);
  /* color — 글자·currentColor 색상. 스타일 설정: white. */
  color: white;
  /* border-radius — 모서리 둥글기. 스타일 설정: 9px. */
  border-radius: 9px;
  /* min-height — 최소 높이. 스타일 설정: 44px. */
  min-height: 44px;
  /* font-size — 글자 크기. 스타일 설정: 11px. */
  font-size: 11px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 외부 지도 링크 묶음에 적용할 선택자: .external-actions a:nth-child(2). */
.external-actions a:nth-child(2) {
  /* background — 배경 색 또는 이미지. 스타일 설정: #f5e0d1. */
  background: #f5e0d1;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--wine). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--wine);
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 외부 지도 링크 묶음에 적용할 선택자: .external-actions svg. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
.external-actions svg,
/* Instagram 원문 버튼에 적용할 선택자: .instagram-action svg. */
.instagram-action svg {
  /* width — 너비. 스타일 설정: 14px. */
  width: 14px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* Instagram 원문 버튼에 적용할 선택자: .instagram-action. */
.instagram-action {
  /* background — 배경 색 또는 이미지. 스타일 설정: transparent. */
  background: transparent;
  /* border — 테두리 두께·스타일·색. 스타일 설정: 1px solid var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
  border: 1px solid var(--line);
  /* color — 글자·currentColor 색상. 스타일 설정: var(--wine). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--wine);
  /* margin-bottom — 아래쪽 바깥 여백. 스타일 설정: 12px. */
  margin-bottom: 12px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 정보 제공일 안내에 적용할 선택자: .checked. */
.checked {
  /* font-size — 글자 크기. 스타일 설정: 9px. */
  font-size: 9px;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.7. */
  line-height: 1.7;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--muted). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--muted);
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 검색 결과 없음·오류 상태에 적용할 선택자: .empty-state. */
.empty-state {
  /* text-align — 텍스트의 수평 정렬. 스타일 설정: center. */
  text-align: center;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 35px 18px. */
  padding: 35px 18px;
  /* border — 테두리 두께·스타일·색. 스타일 설정: 1px dashed var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
  border: 1px dashed var(--line);
  /* border-radius — 모서리 둥글기. 스타일 설정: 12px. */
  border-radius: 12px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 검색 결과 없음·오류 상태에 적용할 선택자: .empty-state h3. */
.empty-state h3 {
  /* font-size — 글자 크기. 스타일 설정: 16px. */
  font-size: 16px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 검색 결과 없음·오류 상태에 적용할 선택자: .empty-state p. */
.empty-state p {
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
  /* color — 글자·currentColor 색상. 스타일 설정: var(--muted). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--muted);
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.8. */
  line-height: 1.8;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 검색 결과 없음·오류 상태에 적용할 선택자: .empty-state button. */
.empty-state button {
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--wine). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--wine);
  /* color — 글자·currentColor 색상. 스타일 설정: white. */
  color: white;
  /* border-radius — 모서리 둥글기. 스타일 설정: 8px. */
  border-radius: 8px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 12px 18px. */
  padding: 12px 18px;
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 초기 로딩 안내에 적용할 선택자: .loading. */
.loading {
  /* font-size — 글자 크기. 스타일 설정: 13px. */
  font-size: 13px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 20px. */
  padding: 20px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* JavaScript 비활성 안내에 적용할 선택자: .noscript. */
.noscript {
  /* position — 배치 좌표의 기준 방식. 스타일 설정: fixed. */
  position: fixed;
  /* bottom — 아래쪽 기준 위치. 스타일 설정: 0. */
  bottom: 0;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 15px. */
  padding: 15px;
  /* background — 배경 색 또는 이미지. 스타일 설정: white. */
  background: white;
  /* z-index — 겹치는 요소의 앞뒤 순서. 스타일 설정: 2000. */
  z-index: 2000;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 소개 대화상자에 적용할 선택자: dialog. */
dialog {
  /* border — 테두리 두께·스타일·색. 스타일 설정: 1px solid var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
  border: 1px solid var(--line);
  /* border-radius — 모서리 둥글기. 스타일 설정: 20px. */
  border-radius: 20px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 40px. */
  padding: 40px;
  /* max-width — 최대 너비. 스타일 설정: 440px. */
  max-width: 440px;
  /* width — 너비. 스타일 설정: calc(100% - 36px). */
  width: calc(100% - 36px);
  /* color — 글자·currentColor 색상. 스타일 설정: var(--ink). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--ink);
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--paper). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--paper);
  /* box-shadow — 요소 주변 그림자. 스타일 설정: 0 20px 80px #572a2940. */
  box-shadow: 0 20px 80px #572a2940;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 소개 대화상자에 적용할 선택자: dialog::backdrop. */
dialog::backdrop {
  /* background — 배경 색 또는 이미지. 스타일 설정: #572a2966. */
  background: #572a2966;
  /* backdrop-filter — 요소 뒤쪽 배경의 흐림 효과. 스타일 설정: blur(4px). */
  backdrop-filter: blur(4px);
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 소개 대화상자에 적용할 선택자: dialog h2. */
dialog h2 {
  /* font-size — 글자 크기. 스타일 설정: 30px. */
  font-size: 30px;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.25. */
  line-height: 1.25;
  /* letter-spacing — 글자 사이 간격. 스타일 설정: -1px. */
  letter-spacing: -1px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 소개 대화상자에 적용할 선택자: dialog p. */
dialog p {
  /* font-size — 글자 크기. 스타일 설정: 13px. */
  font-size: 13px;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.9. */
  line-height: 1.9;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 소개 대화상자에 적용할 선택자: dialog .muted. */
dialog .muted {
  /* color — 글자·currentColor 색상. 스타일 설정: var(--muted). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--muted);
  /* font-size — 글자 크기. 스타일 설정: 11px. */
  font-size: 11px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 소개 창 닫기 버튼에 적용할 선택자: .dialog-close. */
.dialog-close {
  /* position — 배치 좌표의 기준 방식. 스타일 설정: absolute. */
  position: absolute;
  /* right — 오른쪽 기준 위치. 스타일 설정: 12px. */
  right: 12px;
  /* top — 위쪽 기준 위치. 스타일 설정: 10px. */
  top: 10px;
  /* font-size — 글자 크기. 스타일 설정: 28px. */
  font-size: 28px;
  /* width — 너비. 스타일 설정: 40px. */
  width: 40px;
  /* height — 높이. 스타일 설정: 40px. */
  height: 40px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 1300px 이상 넓은 화면에서는 사이드 패널과 사진을 조금 더 크게 표시합니다. */
@media (min-width: 1300px) {
  /* 지도와 장소 탐색 영역 전체에 적용할 선택자: .workspace. */
  .workspace {
    /* grid-template-columns — grid의 열 너비와 개수. 스타일 설정: 440px 1fr. */
    grid-template-columns: 440px 1fr;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 소개·검색·필터 영역에 적용할 선택자: .discovery. */
  .discovery {
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 35px 32px 20px. */
    padding: 35px 32px 20px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 장소 목록·상세 bottom sheet에 적용할 선택자: .results. */
  .results {
    /* padding-left — 왼쪽 안쪽 여백. 스타일 설정: 28px. */
    padding-left: 28px;
    /* padding-right — 오른쪽 안쪽 여백. 스타일 설정: 28px. */
    padding-right: 28px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 카드 사진 영역에 적용할 선택자: .card-photo. */
  .card-photo {
    /* height — 높이. 스타일 설정: 205px. */
    height: 205px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 뷰포트가 760px 이하일 때 적용할 모바일 레이아웃입니다. 아래 규칙이 기본 스타일을 덮어씁니다. */
@media (max-width: 760px) {
  /* 상단 브랜드·탐색 바에 적용할 선택자: .topbar. */
  .topbar {
    /* height — 높이. 스타일 설정: 64px. */
    height: 64px;
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 18px. */
    padding: 0 18px;
    /* gap — 자식 요소 사이 간격. 스타일 설정: 10px. */
    gap: 10px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* Mapick 브랜드 링크에 적용할 선택자: .brand. */
  .brand {
    /* font-size — 글자 크기. 스타일 설정: 27px. */
    font-size: 27px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 브랜드 핀 아이콘에 적용할 선택자: .brand-mark. */
  .brand-mark {
    /* width — 너비. 스타일 설정: 28px. */
    width: 28px;
    /* margin-right — 오른쪽 바깥 여백. 스타일 설정: 5px. */
    margin-right: 5px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 브랜드 핀 아이콘에 적용할 선택자: .brand-mark svg. */
  .brand-mark svg {
    /* width — 너비. 스타일 설정: 25px. */
    width: 25px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 브랜드 옆 소개 문구에 적용할 선택자: .brand-line. */
  .brand-line {
    /* display — 배치 방식 또는 표시 여부. 스타일 설정: none. */
    display: none;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 상단 브랜드·탐색 바에 적용할 선택자: .topbar nav. */
  .topbar nav {
    /* gap — 자식 요소 사이 간격. 스타일 설정: 15px. */
    gap: 15px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* .text-button에 적용할 선택자: .text-button. */
  .text-button {
    /* font-size — 글자 크기. 스타일 설정: 10px. */
    font-size: 10px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 언어 선택 영역에 적용할 선택자: .language. */
  .language {
    /* padding-left — 왼쪽 안쪽 여백. 스타일 설정: 12px. */
    padding-left: 12px;
    /* gap — 자식 요소 사이 간격. 스타일 설정: 1px. */
    gap: 1px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 언어 선택 영역에 적용할 선택자: .language-globe. */
  .language-globe {
    /* font-size — 글자 크기. 스타일 설정: 20px. */
    font-size: 20px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 지도와 장소 탐색 영역 전체에 적용할 선택자: .workspace. */
  .workspace {
    /* height — 높이. 스타일 설정: calc(100dvh - 64px). 주소창 변화가 반영되는 동적 화면 높이 단위입니다. */
    height: calc(100dvh - 64px);
    /* min-height — 최소 높이. 스타일 설정: 480px. */
    min-height: 480px;
    /* display — 배치 방식 또는 표시 여부. 스타일 설정: block. */
    display: block;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 지도 영역에 적용할 선택자: .map-panel. */
  .map-panel {
    /* position — 배치 좌표의 기준 방식. 스타일 설정: absolute. */
    position: absolute;
    /* inset — 상·우·하·좌 위치를 한 번에 지정. 스타일 설정: 0 0 239px. */
    inset: 0 0 239px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 지도 설명 배지에 적용할 선택자: .map-caption. */
  .map-caption {
    /* top — 위쪽 기준 위치. 스타일 설정: auto. */
    top: auto;
    /* bottom — 아래쪽 기준 위치. 스타일 설정: 18px. */
    bottom: 18px;
    /* left — 왼쪽 기준 위치. 스타일 설정: 12px. */
    left: 12px;
    /* font-size — 글자 크기. 스타일 설정: 9px. */
    font-size: 9px;
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 9px 12px. */
    padding: 9px 12px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 지도 제어 버튼 묶음에 적용할 선택자: .map-actions. */
  .map-actions {
    /* right — 오른쪽 기준 위치. 스타일 설정: 12px. */
    right: 12px;
    /* top — 위쪽 기준 위치. 스타일 설정: 150px. */
    top: 150px;
    /* gap — 자식 요소 사이 간격. 스타일 설정: 7px. */
    gap: 7px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 지도 제어 버튼에 적용할 선택자: .map-button. */
  .map-button {
    /* width — 너비. 스타일 설정: 39px. */
    width: 39px;
    /* height — 높이. 스타일 설정: 39px. */
    height: 39px;
    /* border-radius — 모서리 둥글기. 스타일 설정: 11px. */
    border-radius: 11px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 장소 탐색 패널에 적용할 선택자: .explorer. */
  .explorer {
    /* display — 배치 방식 또는 표시 여부. 스타일 설정: contents. */
    display: contents;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 소개·검색·필터 영역에 적용할 선택자: .discovery. */
  .discovery {
    /* position — 배치 좌표의 기준 방식. 스타일 설정: absolute. */
    position: absolute;
    /* z-index — 겹치는 요소의 앞뒤 순서. 스타일 설정: 500. */
    z-index: 500;
    /* top — 위쪽 기준 위치. 스타일 설정: 12px. */
    top: 12px;
    /* left — 왼쪽 기준 위치. 스타일 설정: 12px. */
    left: 12px;
    /* right — 오른쪽 기준 위치. 스타일 설정: 12px. */
    right: 12px;
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0. */
    padding: 0;
    /* border — 테두리 두께·스타일·색. 스타일 설정: 0. */
    border: 0;
    /* pointer-events — 마우스·터치 이벤트를 받을지 결정. 스타일 설정: none. */
    pointer-events: none;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 소개·검색·필터 영역에 적용할 선택자: .discovery > *. */
  .discovery > * {
    /* pointer-events — 마우스·터치 이벤트를 받을지 결정. 스타일 설정: auto. */
    pointer-events: auto;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 소개·검색·필터 영역에 적용할 선택자: .discovery .eyebrow. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
  .discovery .eyebrow,
  /* 소개·검색·필터 영역에 적용할 선택자: .discovery h1. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
  .discovery h1,
  /* 소개 문장에 적용할 선택자: .intro. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
  .intro,
  /* 추천 계정 선택 영역에 적용할 선택자: .creator-filter. */
  .creator-filter {
    /* display — 배치 방식 또는 표시 여부. 스타일 설정: none. */
    display: none;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 검색 입력 영역에 적용할 선택자: .search-box. */
  .search-box {
    /* height — 높이. 스타일 설정: 45px. */
    height: 45px;
    /* border — 테두리 두께·스타일·색. 스타일 설정: 1px solid #ead7cc. */
    border: 1px solid #ead7cc;
    /* background — 배경 색 또는 이미지. 스타일 설정: var(--white). var()는 :root에 정의한 공통 값을 참조합니다. */
    background: var(--white);
    /* box-shadow — 요소 주변 그림자. 스타일 설정: var(--shadow). var()는 :root에 정의한 공통 값을 참조합니다. */
    box-shadow: var(--shadow);
    /* border-radius — 모서리 둥글기. 스타일 설정: 12px. */
    border-radius: 12px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 검색 입력 영역에 적용할 선택자: .search-box input. */
  .search-box input {
    /* font-size — 글자 크기. 스타일 설정: 13px. */
    font-size: 13px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 검색 입력 영역에 적용할 선택자: .search-box kbd. */
  .search-box kbd {
    /* display — 배치 방식 또는 표시 여부. 스타일 설정: none. */
    display: none;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 지역·태그 필터 줄에 적용할 선택자: .filter-row. */
  .filter-row {
    /* margin-top — 위쪽 바깥 여백. 스타일 설정: 9px. */
    margin-top: 9px;
    /* gap — 자식 요소 사이 간격. 스타일 설정: 6px. */
    gap: 6px;
    /* flex-wrap — flex 자식의 다음 줄 배치 여부. 스타일 설정: nowrap. */
    flex-wrap: nowrap;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 지역 선택 영역에 적용할 선택자: .region. */
  .region {
    /* background — 배경 색 또는 이미지. 스타일 설정: var(--white). var()는 :root에 정의한 공통 값을 참조합니다. */
    background: var(--white);
    /* border — 테두리 두께·스타일·색. 스타일 설정: 1px solid #e8cfc1. */
    border: 1px solid #e8cfc1;
    /* box-shadow — 요소 주변 그림자. 스타일 설정: 0 2px 8px #572a2908. */
    box-shadow: 0 2px 8px #572a2908;
    /* border-radius — 모서리 둥글기. 스타일 설정: 30px. */
    border-radius: 30px;
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 10px. */
    padding: 0 10px;
    /* height — 높이. 스타일 설정: 36px. */
    height: 36px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 지역 선택 영역에 적용할 선택자: .region select. */
  .region select {
    /* font-size — 글자 크기. 스타일 설정: 11px. */
    font-size: 11px;
    /* max-width — 최대 너비. 스타일 설정: 100px. */
    max-width: 100px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* .filter-divider에 적용할 선택자: .filter-divider. */
  .filter-divider {
    /* display — 배치 방식 또는 표시 여부. 스타일 설정: none. */
    display: none;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 태그 필터 버튼에 적용할 선택자: .chip. */
  .chip {
    /* box-shadow — 요소 주변 그림자. 스타일 설정: 0 2px 8px #572a2908. */
    box-shadow: 0 2px 8px #572a2908;
    /* font-size — 글자 크기. 스타일 설정: 11px. */
    font-size: 11px;
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 8px 13px. */
    padding: 8px 13px;
    /* min-height — 최소 높이. 스타일 설정: 36px. */
    min-height: 36px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 장소 목록·상세 bottom sheet에 적용할 선택자: .results. */
  .results {
    /* position — 배치 좌표의 기준 방식. 스타일 설정: absolute. */
    position: absolute;
    /* left — 왼쪽 기준 위치. 스타일 설정: 0. */
    left: 0;
    /* right — 오른쪽 기준 위치. 스타일 설정: 0. */
    right: 0;
    /* bottom — 아래쪽 기준 위치. 스타일 설정: 0. */
    bottom: 0;
    /* height — 높이. 스타일 설정: 252px. */
    height: 252px;
    /* max-height — 최대 높이. 스타일 설정: calc(100% - 116px). */
    max-height: calc(100% - 116px);
    /* z-index — 겹치는 요소의 앞뒤 순서. 스타일 설정: 600. */
    z-index: 600;
    /* border-radius — 모서리 둥글기. 스타일 설정: 23px 23px 0 0. */
    border-radius: 23px 23px 0 0;
    /* background — 배경 색 또는 이미지. 스타일 설정: var(--paper). var()는 :root에 정의한 공통 값을 참조합니다. */
    background: var(--paper);
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 18px max(12px, env(safe-area-inset-bottom)). 휴대전화 하단 홈 인디케이터 영역을 피합니다. */
    padding: 0 18px max(12px, env(safe-area-inset-bottom));
    /* box-shadow — 요소 주변 그림자. 스타일 설정: 0 -6px 30px #572a2915. */
    box-shadow: 0 -6px 30px #572a2915;
    /* overflow — 넘치는 내용을 숨기거나 스크롤하는 방식. 스타일 설정: auto. */
    overflow: auto;
    /* transition — 속성이 변할 때 부드럽게 전환. 스타일 설정: height 0.25s ease. */
    transition: height 0.25s ease;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 장소 목록·상세 bottom sheet에 적용할 선택자: .results.expanded. */
  .results.expanded {
    /* height — 높이. 스타일 설정: calc(100% - 116px). */
    height: calc(100% - 116px);
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 모바일 패널 펼침 버튼에 적용할 선택자: .sheet-toggle. */
  .sheet-toggle {
    /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
    display: flex;
    /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
    align-items: center;
    /* justify-content — flex/grid 자식의 주축 정렬. 스타일 설정: center. */
    justify-content: center;
    /* height — 높이. 스타일 설정: 24px. */
    height: 24px;
    /* width — 너비. 스타일 설정: 100%. */
    width: 100%;
    /* position — 배치 좌표의 기준 방식. 스타일 설정: sticky. */
    position: sticky;
    /* top — 위쪽 기준 위치. 스타일 설정: 0. */
    top: 0;
    /* background — 배경 색 또는 이미지. 스타일 설정: var(--paper). var()는 :root에 정의한 공통 값을 참조합니다. */
    background: var(--paper);
    /* z-index — 겹치는 요소의 앞뒤 순서. 스타일 설정: 2. */
    z-index: 2;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 모바일 패널 펼침 버튼에 적용할 선택자: .sheet-toggle > span:first-child. */
  .sheet-toggle > span:first-child {
    /* width — 너비. 스타일 설정: 34px. */
    width: 34px;
    /* height — 높이. 스타일 설정: 4px. */
    height: 4px;
    /* border-radius — 모서리 둥글기. 스타일 설정: 5px. */
    border-radius: 5px;
    /* background — 배경 색 또는 이미지. 스타일 설정: #d8b6a4. */
    background: #d8b6a4;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 결과 제목·개수 줄에 적용할 선택자: .results-header. */
  .results-header {
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 5px 1px 14px. */
    padding: 5px 1px 14px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 결과 제목·개수 줄에 적용할 선택자: .results-header h2. */
  .results-header h2 {
    /* font-size — 글자 크기. 스타일 설정: 13px. */
    font-size: 13px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 장소 카드에 적용할 선택자: .place-card. */
  .place-card {
    /* border-radius — 모서리 둥글기. 스타일 설정: 12px. */
    border-radius: 12px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 장소 상세를 여는 카드 버튼에 적용할 선택자: .card-open. */
  .card-open {
    /* display — 배치 방식 또는 표시 여부. 스타일 설정: grid. */
    display: grid;
    /* grid-template-columns — grid의 열 너비와 개수. 스타일 설정: 105px 1fr. */
    grid-template-columns: 105px 1fr;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 카드 사진 영역에 적용할 선택자: .card-photo. */
  .card-photo {
    /* height — 높이. 스타일 설정: 119px. */
    height: 119px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 카드 사진 영역에 적용할 선택자: .card-photo img. */
  .card-photo img {
    /* object-position — 이미지가 잘릴 때 기준으로 삼는 위치. 스타일 설정: 48% 50%. */
    object-position: 48% 50%;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 사진 위 지역 배지에 적용할 선택자: .photo-badge. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
  .photo-badge,
  /* 사진 위 카드 번호에 적용할 선택자: .photo-number. */
  .photo-number {
    /* display — 배치 방식 또는 표시 여부. 스타일 설정: none. */
    display: none;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 카드의 텍스트 영역에 적용할 선택자: .card-copy. */
  .card-copy {
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 12px 13px. */
    padding: 12px 13px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 지역·분류 표시에 적용할 선택자: .place-meta. */
  .place-meta {
    /* font-size — 글자 크기. 스타일 설정: 8px. */
    font-size: 8px;
    /* margin-bottom — 아래쪽 바깥 여백. 스타일 설정: 5px. */
    margin-bottom: 5px;
    /* letter-spacing — 글자 사이 간격. 스타일 설정: 0.7px. */
    letter-spacing: 0.7px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 장소명과 화살표 줄에 적용할 선택자: .place-title-row h3. */
  .place-title-row h3 {
    /* font-size — 글자 크기. 스타일 설정: 20px. */
    font-size: 20px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 대표 메뉴와 가격에 적용할 선택자: .card-dish. */
  .card-dish {
    /* font-size — 글자 크기. 스타일 설정: 10px. */
    font-size: 10px;
    /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 6px 0 8px. */
    margin: 6px 0 8px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 대표 메뉴와 가격에 적용할 선택자: .card-dish strong. */
  .card-dish strong {
    /* font-size — 글자 크기. 스타일 설정: 10px. */
    font-size: 10px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 개별 장소 태그에 적용할 선택자: .tag. */
  .tag {
    /* font-size — 글자 크기. 스타일 설정: 8px. */
    font-size: 8px;
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 4px 7px. */
    padding: 4px 7px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 추천 출처 표시에 적용할 선택자: .card-source. */
  .card-source {
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 8px 12px. */
    padding: 8px 12px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 출처 계정의 장식 원에 적용할 선택자: .avatar. */
  .avatar {
    /* width — 너비. 스타일 설정: 23px. */
    width: 23px;
    /* height — 높이. 스타일 설정: 23px. */
    height: 23px;
    /* font-size — 글자 크기. 스타일 설정: 11px. */
    font-size: 11px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 출처 계정 설명에 적용할 선택자: .source-copy. */
  .source-copy {
    /* flex-direction — flex 자식의 배치 방향. 스타일 설정: row. */
    flex-direction: row;
    /* align-items — flex/grid 자식의 교차축 정렬. 스타일 설정: center. */
    align-items: center;
    /* gap — 자식 요소 사이 간격. 스타일 설정: 5px. */
    gap: 5px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 출처 계정 설명에 적용할 선택자: .source-copy small. */
  .source-copy small {
    /* font-size — 글자 크기. 스타일 설정: 8px. */
    font-size: 8px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 출처 계정 설명에 적용할 선택자: .source-copy a. */
  .source-copy a {
    /* font-size — 글자 크기. 스타일 설정: 9px. */
    font-size: 9px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 원문 게시물 링크에 적용할 선택자: .source-post. */
  .source-post {
    /* height — 높이. 스타일 설정: 24px. */
    height: 24px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 장소 목록 아래 안내에 적용할 선택자: .list-footer. */
  .list-footer {
    /* padding-top — 위쪽 안쪽 여백. 스타일 설정: 20px. */
    padding-top: 20px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* .leaflet-control-zoom에 적용할 선택자: .leaflet-control-zoom. */
  .leaflet-control-zoom {
    /* display — 배치 방식 또는 표시 여부. 스타일 설정: none. */
    display: none;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* .leaflet-control-attribution에 적용할 선택자: .leaflet-control-attribution. */
  .leaflet-control-attribution {
    /* font-size — 글자 크기. 스타일 설정: 8px !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
    font-size: 8px !important;
    /* max-width — 최대 너비. 스타일 설정: 100%. */
    max-width: 100%;
    /* margin-bottom — 아래쪽 바깥 여백. 스타일 설정: 14px !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
    margin-bottom: 14px !important;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 상세 사진에 적용할 선택자: .detail-image. */
  .detail-image {
    /* height — 높이. 스타일 설정: 230px. */
    height: 230px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 상세 화면 뒤로가기 줄에 적용할 선택자: .detail-toolbar. */
  .detail-toolbar {
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 0 7px. */
    padding: 0 0 7px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 상세 장소명에 적용할 선택자: .detail-heading. */
  .detail-heading {
    /* margin-top — 위쪽 바깥 여백. 스타일 설정: 15px. */
    margin-top: 15px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 상세 설명에 적용할 선택자: .detail-description. */
  .detail-description {
    /* font-size — 글자 크기. 스타일 설정: 13px. */
    font-size: 13px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* .detail-open .creator-filter에 적용할 선택자: .detail-open .creator-filter. */
  .detail-open .creator-filter {
    /* display — 배치 방식 또는 표시 여부. 스타일 설정: none. */
    display: none;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 지도 장애 안내에 적용할 선택자: .map-status. */
  .map-status {
    /* bottom — 아래쪽 기준 위치. 스타일 설정: 65px. */
    bottom: 65px;
    /* right — 오른쪽 기준 위치. 스타일 설정: 15px. */
    right: 15px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 임시 상태 알림에 적용할 선택자: .toast. */
  .toast {
    /* bottom — 아래쪽 기준 위치. 스타일 설정: 270px. */
    bottom: 270px;
    /* max-width — 최대 너비. 스타일 설정: calc(100vw - 32px). */
    max-width: calc(100vw - 32px);
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 소개 대화상자에 적용할 선택자: dialog. */
  dialog {
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 32px 25px. */
    padding: 32px 25px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 동작 줄이기 설정에서는 전환·스크롤 애니메이션을 끕니다. */
@media (prefers-reduced-motion: reduce) {
  /* 모든 요소에 적용할 선택자: *. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
  *,
  /* 모든 요소에 적용할 선택자: *:before. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
  *:before,
  /* 모든 요소에 적용할 선택자: *:after. */
  *:after {
    /* scroll-behavior — 스크롤 이동 방식. 스타일 설정: auto !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
    scroll-behavior: auto !important;
    /* transition — 속성이 변할 때 부드럽게 전환. 스타일 설정: none !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
    transition: none !important;
    /* animation — 애니메이션 실행 방식. 스타일 설정: none !important. !important로 라이브러리 기본값보다 우선 적용합니다. */
    animation: none !important;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 뷰포트가 760px 이하일 때 적용할 모바일 레이아웃입니다. 아래 규칙이 기본 스타일을 덮어씁니다. */
@media (max-width: 760px) {
  /* 추천 계정 선택 영역에 적용할 선택자: .creator-filter. */
  .creator-filter {
    /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
    display: flex;
    /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 8px 0 0 auto. */
    margin: 8px 0 0 auto;
    /* width — 너비. 스타일 설정: max-content. */
    width: max-content;
    /* max-width — 최대 너비. 스타일 설정: 100%. */
    max-width: 100%;
    /* gap — 자식 요소 사이 간격. 스타일 설정: 8px. */
    gap: 8px;
    /* background — 배경 색 또는 이미지. 스타일 설정: var(--white). var()는 :root에 정의한 공통 값을 참조합니다. */
    background: var(--white);
    /* border — 테두리 두께·스타일·색. 스타일 설정: 1px solid var(--line). var()는 :root에 정의한 공통 값을 참조합니다. */
    border: 1px solid var(--line);
    /* border-radius — 모서리 둥글기. 스타일 설정: 20px. */
    border-radius: 20px;
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0 10px. */
    padding: 0 10px;
    /* box-shadow — 요소 주변 그림자. 스타일 설정: 0 2px 8px #572a2908. */
    box-shadow: 0 2px 8px #572a2908;
    /* font-size — 글자 크기. 스타일 설정: 10px. */
    font-size: 10px;
    /* min-height — 최소 높이. 스타일 설정: 36px. */
    min-height: 36px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 추천 계정 선택 영역에 적용할 선택자: .creator-filter select. */
  .creator-filter select {
    /* font-size — 글자 크기. 스타일 설정: 11px. */
    font-size: 11px;
    /* max-width — 최대 너비. 스타일 설정: 170px. */
    max-width: 170px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* .detail-open .creator-filter에 적용할 선택자: .detail-open .creator-filter. */
  .detail-open .creator-filter {
    /* display — 배치 방식 또는 표시 여부. 스타일 설정: flex. */
    display: flex;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 장소 목록·상세 bottom sheet에 적용할 선택자: .results. */
  .results {
    /* max-height — 최대 높이. 스타일 설정: calc(100% - 155px). */
    max-height: calc(100% - 155px);
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 장소 목록·상세 bottom sheet에 적용할 선택자: .results.expanded. */
  .results.expanded {
    /* height — 높이. 스타일 설정: calc(100% - 155px). */
    height: calc(100% - 155px);
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 지도 제어 버튼 묶음에 적용할 선택자: .map-actions. */
  .map-actions {
    /* top — 위쪽 기준 위치. 스타일 설정: 165px. */
    top: 165px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 지역 선택 영역에 적용할 선택자: .region. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
  .region,
  /* 태그 필터 버튼에 적용할 선택자: .chip. */
  .chip {
    /* min-height — 최소 높이. 스타일 설정: 40px. */
    min-height: 40px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 카드의 텍스트 영역에 적용할 선택자: .card-copy. */
  .card-copy {
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 10px 12px. */
    padding: 10px 12px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 카드 사진 영역에 적용할 선택자: .card-photo. */
  .card-photo {
    /* height — 높이. 스타일 설정: 128px. */
    height: 128px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 지역·분류 표시에 적용할 선택자: .place-meta. */
  .place-meta {
    /* font-size — 글자 크기. 스타일 설정: 10px. */
    font-size: 10px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 대표 메뉴와 가격에 적용할 선택자: .card-dish. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
  .card-dish,
  /* 대표 메뉴와 가격에 적용할 선택자: .card-dish strong. */
  .card-dish strong {
    /* font-size — 글자 크기. 스타일 설정: 11px. */
    font-size: 11px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 개별 장소 태그에 적용할 선택자: .tag. */
  .tag {
    /* font-size — 글자 크기. 스타일 설정: 10px. */
    font-size: 10px;
    /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 4px 7px. */
    padding: 4px 7px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 출처 계정 설명에 적용할 선택자: .source-copy small. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
  .source-copy small,
  /* 출처 계정 설명에 적용할 선택자: .source-copy a. */
  .source-copy a {
    /* font-size — 글자 크기. 스타일 설정: 10px. */
    font-size: 10px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 원문 게시물 링크에 적용할 선택자: .source-post. */
  .source-post {
    /* width — 너비. 스타일 설정: 36px. */
    width: 36px;
    /* height — 높이. 스타일 설정: 30px. */
    height: 30px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* .text-button에 적용할 선택자: .text-button. */
  .text-button {
    /* min-height — 최소 높이. 스타일 설정: 44px. */
    min-height: 44px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
  /* 언어 선택 영역에 적용할 선택자: .language select. */
  .language select {
    /* min-height — 최소 높이. 스타일 설정: 44px. */
    min-height: 44px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}

/* .install-button에 적용할 선택자: .install-button. 쉼표 다음 선택자도 같은 스타일을 공유합니다. */
.install-button,
/* .update-button에 적용할 선택자: .update-button. */
.update-button {
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--wine). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--wine);
  /* color — 글자·currentColor 색상. 스타일 설정: var(--white). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--white);
  /* border-radius — 모서리 둥글기. 스타일 설정: 10px. */
  border-radius: 10px;
  /* min-height — 최소 높이. 스타일 설정: 44px. */
  min-height: 44px;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 10px 16px. */
  padding: 10px 16px;
  /* font-size — 글자 크기. 스타일 설정: 12px. */
  font-size: 12px;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* .pwa-note에 적용할 선택자: .pwa-note. */
.pwa-note {
  /* color — 글자·currentColor 색상. 스타일 설정: var(--muted). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--muted);
  /* font-size — 글자 크기. 스타일 설정: 11px. */
  font-size: 11px;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.7. */
  line-height: 1.7;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* .offline-note에 적용할 선택자: .offline-note. */
.offline-note {
  /* position — 배치 좌표의 기준 방식. 스타일 설정: fixed. */
  position: fixed;
  /* z-index — 겹치는 요소의 앞뒤 순서. 스타일 설정: 1200. */
  z-index: 1200;
  /* left — 왼쪽 기준 위치. 스타일 설정: 50%. */
  left: 50%;
  /* top — 위쪽 기준 위치. 스타일 설정: 85px. */
  top: 85px;
  /* transform — 요소의 이동·크기 변형. 스타일 설정: translateX(-50%). */
  transform: translateX(-50%);
  /* width — 너비. 스타일 설정: max-content. */
  width: max-content;
  /* max-width — 최대 너비. 스타일 설정: calc(100vw - 32px). */
  max-width: calc(100vw - 32px);
  /* margin — 바깥 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 0. */
  margin: 0;
  /* padding — 안쪽 여백; 4개 값은 상·우·하·좌 순서. 스타일 설정: 10px 14px. */
  padding: 10px 14px;
  /* border — 테두리 두께·스타일·색. 스타일 설정: 1px solid #d8b6a4. */
  border: 1px solid #d8b6a4;
  /* border-radius — 모서리 둥글기. 스타일 설정: 10px. */
  border-radius: 10px;
  /* background — 배경 색 또는 이미지. 스타일 설정: var(--white). var()는 :root에 정의한 공통 값을 참조합니다. */
  background: var(--white);
  /* color — 글자·currentColor 색상. 스타일 설정: var(--ink). var()는 :root에 정의한 공통 값을 참조합니다. */
  color: var(--ink);
  /* box-shadow — 요소 주변 그림자. 스타일 설정: var(--shadow). var()는 :root에 정의한 공통 값을 참조합니다. */
  box-shadow: var(--shadow);
  /* font-size — 글자 크기. 스타일 설정: 11px. */
  font-size: 11px;
  /* line-height — 텍스트 줄 높이. 스타일 설정: 1.6. */
  line-height: 1.6;
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}
/* 뷰포트가 760px 이하일 때 적용할 모바일 레이아웃입니다. 아래 규칙이 기본 스타일을 덮어씁니다. */
@media (max-width: 760px) {
  /* .offline-note에 적용할 선택자: .offline-note. */
  .offline-note {
    /* top — 위쪽 기준 위치. 스타일 설정: auto. */
    top: auto;
    /* bottom — 아래쪽 기준 위치. 스타일 설정: 264px. */
    bottom: 264px;
  /* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
  }
/* 현재 선택자 또는 @media 스타일 블록을 닫습니다. 들여쓰기로 중첩 범위를 확인하세요. */
}