@charset "utf-8";

/* 이 페이지(내용페이지) 전용: 그누보드 기본 #container가 930px 고정폭 + float:left라서
   margin-left:calc(50%-50vw) 류의 "센터 취소" 트릭은 float 레이아웃에선 성립하지 않아
   콘텐츠가 왼쪽으로 밀려나 버린다(음수 마진이 float 좌측 정렬 위에 그대로 얹힘).
   이 스킨(Contact)에서만 로드되는 파일이니, 여기서 #container 폭 제한 자체를 풀어버리는 게 안전하다. */
#container_wr { width: auto; }
#container { float: none; width: 100%; margin: 20px 0; }

/* body에 걸면 overflow-y가 자동으로 auto가 되면서 body가 스크롤/클리핑 컨테이너가 돼버려
   position:sticky·absolute 등이 예기치 않게 잘리는 문제가 생길 수 있음 — html에 걸어서 회피 */
html { overflow-x: hidden; }

/* 상단에 배너 히어로 또는 기본 타이틀이 있으면 그 자체가 여백 역할을 하므로 중복 여백을 제거 */
.cl-sub-hero + .cl-loc-section,
.cl-plain-title + .cl-loc-section {
  padding-top: 0;
}

/* ---------- LOCATION / 오시는 길 ---------- */
.cl-loc-section {
  padding: 140px 5vw 140px;
  font-family: 'Pretendard', -apple-system, sans-serif;
}

/* --- 지도 영역: 카카오(다음) 로드맵.
   가로: mapWidth를 화면보다 넉넉히 크게 렌더링해서, 가운데 정렬 + overflow-x:hidden으로
   좌우 여백 없이 꽉 차 보이게 자름 (이 크롭은 유지 — 단순 시각적 크롭이라 문제 없음).
   세로: 예전엔 박스 높이를 지도 캔버스 높이(mapHeight)만큼만 두고 overflow:hidden으로
   하단 푸터 바까지 잘라 감췄었는데, 그 푸터 바에 카카오맵 저작권(attribution) 표시가
   포함돼 있어서 이게 가려지면 카카오 쪽에서 정상 타일 대신 "kakaomap" 워터마크만
   내려주는 것으로 확인됨 → 세로는 자르지 않고 그대로 보여주도록 수정 --- */
.cl-loc-map {
  width: 100%;
  min-height: 500px;
  height: auto;
  background: #f1efe9;
  border: 1px solid var(--line);
  border-radius: 2px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: visible;
}

/* 위젯 하단 "주소/전화" 정보(.cont > .section_address)만 숨김 — 위에 .cl-loc-info에서
   이미 정확한 주소/연락처를 보여주고 있어 중복이고, roughmap 쪽 값은 지도 생성 당시
   주소로 고정돼 있어 실제와 달라질 수 있음(현재 옛 주소가 노출되는 중 → 별도로 지도
   자체를 정확한 위치로 재생성 필요).
   .wrap_controllers(카카오맵 로고/로드뷰/길찾기 링크)는 카카오 자체 어트리뷰션이라
   절대 숨기지 않음 — 이걸 가리면 카카오가 정상 타일 대신 워터마크를 내려주는 것으로
   확인됐음(버그 재발 방지) */
.cl-loc-map .cont {
  display: none;
}

/* --- 주소/연락 정보: 100% 폭 3등분 --- */
.cl-loc-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  margin-bottom: 64px;
}

.cl-loc-info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 40px;
  border-left: 1px solid var(--line);
}

.cl-loc-info-row:first-child {
  border-left: none;
  padding-left: 0;
}

.cl-loc-info-icon {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.cl-loc-info-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--muted);
}

.cl-loc-info-label {
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 8px;
}

.cl-loc-info p {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
  margin: 0;
}

.cl-loc-info a {
  color: var(--ink);
  text-decoration: none;
}

.cl-loc-info a:hover {
  color: var(--accent);
}

@media (max-width:860px) {
  .cl-loc-info {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cl-loc-info-row {
    border-left: none;
    padding: 0;
  }
}

@media (max-width:560px) {
  .cl-loc-section {
    padding: 120px 6vw 80px;
  }
}