/*
 * 공개 사이트 공통 스타일 (메인 · 베이커리) — 색 · 기본 글꼴 · 지도 바로가기 · 첫 장면
 * (위 띠 · 아래 정보 · 로고는 세 사이트 공통이라 디자인 시스템 kg-components.css 의 "공개 화면 위아래")
 * 원본은 packages/public-site/assets/base.css. 각 사이트 public/ 에는 npm run sync 로 복사된다 (직접 고치지 말 것)
 * 사이트별 다른 부분은 각 사이트의 style.css 에
 */
/* 색 · 글자 크기는 디자인 시스템(kg-tokens.css)과 각 사이트 theme.css 에서 — 여기에는 실제 색 값을 쓰지 않는다 */

* { 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 var(--kg-font);
  word-break: keep-all; overflow-wrap: anywhere;
}
p { margin: 0; }


/* 지도 바로가기 — 네이버 · 카카오 · 구글 (각 지도 색의 동그라미 + 글자) */
.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 var(--kg-font); }
.is-naver .m-mark { background: var(--kg-naver); color: var(--kg-white); }
.is-kakao .m-mark { background: var(--kg-kakao); color: var(--kg-kakao-ink); }
.is-google .m-mark { background: var(--kg-white); color: var(--kg-google); border: 1px solid var(--line); }

/* 매장 위치 — 실제 지도(.is-real) 또는 길 무늬 그림, 가운데 브랜드 핀 (누르면 지도 앱) */
.map-art {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; text-decoration: none;
  background-color: var(--site-map-ground);
  background-image:
    linear-gradient(28deg, transparent 47%, var(--site-map-road) 47%, var(--site-map-road) 53%, transparent 53%),
    linear-gradient(-62deg, transparent 46%, var(--site-map-road) 46%, var(--site-map-road) 50%, transparent 50%),
    linear-gradient(90deg, transparent 70%, var(--site-map-road) 70%, var(--site-map-road) 72.5%, transparent 72.5%),
    linear-gradient(0deg, transparent 30%, var(--site-map-road) 30%, var(--site-map-road) 32%, transparent 32%),
    radial-gradient(circle at 78% 22%, var(--site-map-park) 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: var(--kg-shadow-lift); }
.map-pin .emblem { width: 26px; rotate: 45deg; color: var(--kg-on-dark); }
/* 실제 지도 조각 (map.js mapArt) — 가운데가 매장. 핀 끝이 가운데에 오게 */
.map-art.is-real { background: var(--site-map-ground); }
.map-tiles { position: absolute; width: 1280px; height: 768px; pointer-events: none; }
.map-tiles img { position: absolute; width: 256px; height: 256px; max-width: none; }
/* 핀 끝(아래 뾰족한 곳)이 정확히 가운데 — 64px 정사각형을 -45도 돌리면 끝은 중심에서 45px 아래 */
.map-art.is-real .map-pin { transform: none; left: calc(50% - 32px); top: calc(50% - 32px - 45px); }
.map-osm { position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: var(--ink); background: var(--surface); opacity: .8; padding: 1px 6px; border-radius: 4px; }


/* ---------- 첫 장면 — 큰 상호 두 줄 + 옅은 방패 무늬 (메인 · 베이커리 같은 모양) ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(88px, 13vw, 150px) 24px clamp(80px, 11vw, 130px); text-align: center; }
.hero-water { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 78%; width: auto; max-width: 80vw; color: var(--logo); opacity: .06; pointer-events: none; }
.hero-copy { position: relative; max-width: 760px; margin: 0 auto; }
.hero-title {   /* 늘 두 줄 (KING'S / GARDEN) */
  font-family: var(--kg-font-display); font-weight: 600;
  font-size: clamp(54px, 9vw, 120px); line-height: .92; letter-spacing: .02em; margin: 0 auto; max-width: 5.4em; color: var(--ink);
}
.hero-line { display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 13px; letter-spacing: .5em; color: var(--point); font-weight: 700; }
.hero-line::before, .hero-line::after { content: ''; width: 36px; height: 1px; background: currentColor; opacity: .6; }