/* =========================================================
   Cricri Beauty - map.css (SERVICE STYLE UNIFIED)
   - service.css / booking.css 와 동일 톤
   - nav 1줄(필요 시 가로 스크롤), lang 겹침 방지
========================================================= */

:root{
  --bg1:#FBF7F5;
  --bg2:#F5E9ED;
  --card: rgba(255,255,255,.78);
  --border: rgba(0,0,0,.06);
  --text:#111;
  --muted:#666;
  --rose2:#ff6fa3;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius:18px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family:'Noto Sans KR',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background: linear-gradient(180deg,var(--bg1),var(--bg2));
  color:#333;
  line-height:1.8;
  overflow-x:hidden;
}

/* ================= NAV (service.css style) ================= */
.nav{
  position: sticky;
  top:0;
  z-index:1100;
  background: rgba(255,255,255,.80);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(12px);
  padding:12px 16px;
}

.nav-inner{
  max-width:980px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* ✅ 한 줄 유지 + 부족하면 가로 스크롤 */
.menu{
  list-style:none;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap: nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  padding: 2px 0;
}
.menu::-webkit-scrollbar{ display:none; }

.menu a{
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  color:#222;
  padding:10px 12px;
  border-radius:999px;
  transition:.2s;
  white-space:nowrap;
}
.menu a:hover{ background: rgba(255,111,163,.08); }
.menu a[aria-current="page"]{
  color:var(--rose2);
  background: rgba(255,111,163,.12);
}

/* lang (PC: nav 안 오른쪽) */
.lang-switcher{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--border);
  backdrop-filter:blur(8px);
  white-space:nowrap;
}
.lang-switcher a{
  text-decoration:none;
  color:#444;
  margin:0 4px;
  font-weight:700;
}
.lang-switcher a:hover{ text-decoration:underline; }

/* ================= PAGE WRAP ================= */
.page{
  max-width:980px;
  margin:24px auto 60px;
  padding:0 20px;
}

/* HERO */
.hero-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:28px 22px;
  text-align:center;
}
.hero-title{
  font-size:28px;
  color:#111;
  margin-bottom:10px;
}
.hero-desc{
  color: var(--muted);
  font-size:15px;
  max-width:720px;
  margin:0 auto;
  line-height:1.85;
}

/* Sections */
.section{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:28px 22px;
  margin:18px 0;
  text-align:center;
}
.section h2{
  color:#111;
  font-size:20px;
  margin-bottom:14px;
}

/* Address */
.address-box{
  color:#333;
  line-height:1.85;
  margin-bottom:14px;
}

/* Map */
.map-frame iframe{
  width:100%;
  height:420px;
  border:none;
  border-radius:14px;
  background:#fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

/* Transport list */
.transport{
  list-style:none;
  padding:0;
  margin:14px auto 0;
  max-width:740px;
  text-align:left;
}
.transport li{
  font-size:15px;
  color:#333;
  margin:10px 0;
  line-height:1.85;
  position:relative;
  padding-left:18px;
}
.transport li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color: rgba(255,111,163,.95);
  font-weight:900;
}

/* Footer (booking.css와 통일감) */
.footer{
  padding: 24px 16px 34px;
  text-align:center;
  color:#666;
}
.footer-title{
  font-weight:900;
  color:#111;
  margin-bottom:6px;
}
.footer-info{
  font-size:14px;
}
.footer-copy{
  margin-top:10px;
  font-size:12px;
  color:#aaa;
}

/* ================= MOBILE ================= */
@media (max-width:768px){

  /* ✅ 모바일에서 lang가 menu를 가리지 않게 fixed로 */
  .nav{
    padding-top:44px;
  }
  .lang-switcher{
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 2000;
    transform:none;
    background: rgba(255,255,255,.90);
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
  }

  .menu a{
    font-size:13px;
    padding:8px 10px;
  }

  .page{ padding:0 14px; }
  .map-frame iframe{ height: 340px; }
}