/*
 * 공개 사이트 공통 스타일 (메인 · 베이커리) — 색 · 기본 글꼴 · 로고 · 지도 바로가기
 * 원본은 packages/public-site/assets/base.css. 각 사이트 public/ 에는 npm run sync 로 복사된다 (직접 고치지 말 것)
 * 사이트별 다른 부분은 각 사이트의 style.css 에
 */
:root {
  --bg: #F6F1E7; --surface: #FFFDF8; --ink: #33251A; --ink-2: #5C4A3B; --line: #D9CDB8;
  --tint: #EFE7D9; --photo-bg: #EFE7D9;
  --point: #55622A; --point-ink: #FFFFFF; --alert-line: #33251A;
  --dark: #241B15; --dark-ink: #EFE6D6;
  --fs: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;   /* 내용이 짧아도 하단 정보가 화면 맨 아래에 */
  font: 400 var(--fs)/1.65 "Noto Sans KR", system-ui, sans-serif;
  word-break: keep-all; overflow-wrap: anywhere;
}
p { margin: 0; }
.logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

/* 로고 — 방패 + 상호 글자 (그룹웨어 사이드바와 같은 구성). 색은 --logo 하나로 (기본 설정 → 상호 표시에서 고름) */
.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--logo, #4A3426); }
.emblem { display: block; flex: none; width: 26px; aspect-ratio: 172 / 243; background: currentColor;
  -webkit-mask: url(/emblem.png) center / contain no-repeat; mask: url(/emblem.png) center / contain no-repeat; }
.mark-name { font-weight: 700; font-size: 15px; letter-spacing: .14em; white-space: nowrap; }
.mark.is-stack { flex-direction: column; gap: 10px; }
.mark.is-stack .emblem { width: 52px; }
.mark.is-stack .mark-name { font-size: 15px; letter-spacing: .22em; font-weight: 500; }

/* 지도 바로가기 — 네이버 · 카카오 · 구글 (각 지도 색의 동그라미 + 글자) */
.map-app { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.map-app:hover { border-color: var(--ink); }
.m-mark { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 800 14px/1 "Noto Sans KR", sans-serif; }
.is-naver .m-mark { background: #03C75A; color: #fff; }
.is-kakao .m-mark { background: #FEE500; color: #191919; }
.is-google .m-mark { background: #fff; color: #4285F4; border: 1px solid var(--line); }

/* 매장 위치 그림 — 길 무늬 위에 브랜드 핀 (누르면 지도 열기) */
.map-art {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; text-decoration: none;
  background-color: #EAE1D1;
  background-image:
    linear-gradient(28deg, transparent 47%, #F8F3EA 47%, #F8F3EA 53%, transparent 53%),
    linear-gradient(-62deg, transparent 46%, #F8F3EA 46%, #F8F3EA 50%, transparent 50%),
    linear-gradient(90deg, transparent 70%, #F8F3EA 70%, #F8F3EA 72.5%, transparent 72.5%),
    linear-gradient(0deg, transparent 30%, #F8F3EA 30%, #F8F3EA 32%, transparent 32%),
    radial-gradient(circle at 78% 22%, #DCE3C8 0 18%, transparent 18.5%);
  border: 1px solid var(--line);
}
.map-pin { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -100%); width: 64px; height: 64px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 24px -10px rgba(36,27,21,.6); }
.map-pin .emblem { width: 26px; rotate: 45deg; color: #EFE6D6; }
.map-cap { position: absolute; left: 16px; bottom: 16px; background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px; padding: 10px 14px; border-radius: 999px; box-shadow: 0 6px 16px -8px rgba(36,27,21,.35); }