/* 찾아오시는 길(sub105) 전용. 헤더·서브 비주얼·푸터·퀵메뉴는 common.css / sub_common.css. */

/* 상단: 아이보리 배경 제목 */
.page-directions .dir-intro {
  padding: clamp(72px, 7vw, 120px) 24px clamp(88px, 8vw, 130px);
  background: #f2eee8;
  color: #1e3a52;
  text-align: center;
}
.page-directions .dir-intro__line {
  display: block;
}

/* 하단: 전체 너비 네이비 + 지도. 심볼은 이 섹션 위쪽 경계에 중심을 맞춘다. */
.page-directions .dir-map {
  position: relative;
  padding: 100px 0;
  background: #1e3a52;
}
.page-directions .dir-map__symbol {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 3px solid #1e3a52;
  border-radius: 50%;
  background: #d6b992;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.page-directions .dir-map__symbol img {
  display: block;
  width: 46px;
  height: 46px;
}
.page-directions .dir-map__inner {
  width: min(1420px, calc(100% - 48px));
  min-width: 0;
  margin: 0 auto;
}
/* 지도 틀. 지도 높이는 --dir-map-h 한 곳에서 정하고, JS 는 이 값을 읽어 퍼가기에 넘긴다. */
.page-directions .dir-map__frame {
  --dir-map-h: 600px;
  position: relative;
  min-height: var(--dir-map-h);
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #ebe7e0;
}

/* 카카오맵 퍼가기: 로더가 지도 노드에 inline 으로 width(640px 등)를, 안쪽 .wrap_map 에 inline height 를 넣는다.
   inline 값을 이길 수 있도록 이 두 곳만 !important 로 맞춘다. (.map 은 퍼가기 CSS 가 이미 100% × 100%, 하위 요소 전체는 건드리지 않는다.) */
.page-directions .dir-map__frame .root_daum_roughmap {
  width: 100% !important;
  min-width: 0;
}
.page-directions .dir-map__frame .root_daum_roughmap .wrap_map {
  height: var(--dir-map-h) !important;
}
/* 지도 아래에 따로 붙는 두 영역만 숨긴다. (roughmapLander.js 가 지도 노드의 직계 자식으로 만든다)
   - .wrap_controllers : 'kakaomap' 로고 + 길찾기 줄
   - .cont             : 주소 · 전화 정보 영역
   지도 안의 로고·저작권·축척·확대/축소 버튼은 .wrap_map 안쪽이라 영향이 없다.
   숨기고 나면 지도 노드 높이 = .wrap_map 높이(--dir-map-h)가 되어 아래 흰 여백이 남지 않는다. */
.page-directions .dir-map__frame > .root_daum_roughmap > .wrap_controllers,
.page-directions .dir-map__frame > .root_daum_roughmap > .cont {
  display: none;
}

/* 퍼가기 스크립트를 불러오지 못했을 때만 보이는 안내(hidden 해제는 sub105.js) */
.page-directions .dir-map__fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  background: #ebe7e0;
  color: #1e3a52;
  text-align: center;
}
.page-directions .dir-map__fallback[hidden] {
  display: none;
}
.page-directions .dir-map__name {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.page-directions .dir-map__addr {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 18px);
  word-break: keep-all;
}
.page-directions .dir-map__link {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 12px 24px;
  border: 1px solid #1e3a52;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: background-color 0.2s, color 0.2s;
}
.page-directions .dir-map__link:hover,
.page-directions .dir-map__link:focus-visible {
  background: #1e3a52;
  color: #fff;
}
.page-directions .dir-map__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .page-directions .dir-map {
    padding: 84px 0;
  }
  .page-directions .dir-map__frame {
    --dir-map-h: 450px;
  }
}
@media (max-width: 599px) {
  .page-directions .dir-intro {
    padding: 56px 20px 72px;
  }
  .page-directions .dir-map {
    /* 위쪽은 심볼(절반 42px)이 겹치지 않도록 여유를 더 둔다. */
    padding: 76px 0 60px;
  }
  .page-directions .dir-map__inner {
    width: calc(100% - 40px);
  }
  .page-directions .dir-map__frame {
    --dir-map-h: 320px;
    border-radius: 16px;
  }
}