/* G-Location / Kakao map / v23-parking-title-note-mobile-ratio
 * - 근처 유료 주차장 타이틀: 웹 24px, 모바일 비례 19px.
 * - 1번 지도와 주차장 타이틀 사이 여백: 웹 20px, 모바일 비례 15px.
 * - 주차장 안내 소문구 추가.
 * - 모바일 깜빡임 방지와 컨트롤 허용 상태 유지.
 */
#hk-studio-location.hk-location{
  position:relative;
}

#hk-studio-location .hk-location__inner{
  width:100%;
}

#hk-studio-location .hk-location__stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#hk-studio-location .hk-location__card{
  width:100%;
  margin:0;
  padding:0;
}


#hk-studio-location .hk-location__title{
  margin:0 0 12px;
  padding:0;
  color:#161616;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.18;
  letter-spacing:-0.03em;
}

#hk-studio-location .hk-location__title--studio{
  font-weight:760;
}

#hk-studio-location .hk-location__title--parking{
  color:#444 !important;
  font-size:24px !important;
  font-weight:400 !important;
  line-height:1.25 !important;
  letter-spacing:-0.03em !important;
}

#hk-studio-location .hk-location__title--parking::after{
  content:"※ 해당 유료 주차장은 스튜디오와 별도 운영되며, 주차 요금은 고객 부담입니다.";
  display:block;
  margin-top:6px;
  color:#777;
  font-size:11px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:-0.03em;
}


#hk-studio-location .hk-location__mapbox{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  background:#e9e7e1;
  box-sizing:border-box;
  contain:paint;
}

#hk-studio-location .root_daum_roughmap{
  display:block;
  margin:0 auto !important;
  border:0 !important;
  overflow:hidden !important;
}

/* Kakao Roughmap 하단 정보 패널만 숨김. 지도 본체와 줌 버튼은 유지. */
#hk-studio-location .root_daum_roughmap > .wrap_controllers,
#hk-studio-location .root_daum_roughmap > .wrap_controllers *,
#hk-studio-location .root_daum_roughmap > .cont,
#hk-studio-location .root_daum_roughmap > .cont *,
#hk-studio-location .root_daum_roughmap > .wrap_controllers + .cont{
  display:none !important;
}

#hk-studio-location .root_daum_roughmap > .wrap_map{
  display:block !important;
  margin:0 !important;
}

#hk-studio-location .hk-location__map-note{
  position:absolute;
  left:14px;
  top:14px;
  z-index:20;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:calc(100% - 28px);
  min-height:30px;
  padding:0 11px;
  border-radius:8px;
  background:rgba(0,0,0,.58);
  color:#fff;
  font-size:12px;
  font-weight:400;
  line-height:1;
  letter-spacing:-0.03em;
  white-space:nowrap;
  box-sizing:border-box;
  pointer-events:none;
  -webkit-font-smoothing:antialiased;
}

#hk-studio-location .hk-location__map-link{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:21;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:calc(100% - 28px);
  min-height:30px;
  padding:0 11px;
  border-radius:8px;
  background:rgba(0,0,0,.58);
  color:#fff !important;
  font-size:12px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-0.03em;
  text-decoration:none !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-sizing:border-box;
  cursor:pointer;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

#hk-studio-location .hk-location__map-link:hover,
#hk-studio-location .hk-location__map-link:focus,
#hk-studio-location .hk-location__map-link:active{
  background:rgba(0,0,0,.72);
  color:#fff !important;
  text-decoration:none !important;
  outline:none;
  box-shadow:none;
}

#hk-studio-location .hk-location__toggle-check{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

#hk-studio-location .hk-location__toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:34px;
  min-height:26px;
  margin:0 auto;
  color:#111;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

#hk-studio-location .hk-location__toggle--closed{
  flex-direction:column;
  gap:15px;
}

#hk-studio-location .hk-location__toggle--open{
  display:none;
  width:34px;
  height:26px;
  margin:0 auto;
}

#hk-studio-location .hk-location__toggle-icon{
  display:block;
  width:10px;
  height:10px;
  border:solid currentColor;
  border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
  transition:transform .18s ease;
}

#hk-studio-location .hk-location__toggle-text{
  display:block;
  color:#777;
  font-size:11px;
  font-weight:400;
  line-height:1;
  letter-spacing:-0.03em;
  white-space:nowrap;
}

#hk-studio-location .hk-location__extra{
  display:block;
  max-height:0;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  margin:0;
  transition:max-height .28s ease, margin-top .28s ease, opacity .2s ease, visibility 0s linear .28s;
}

#hk-studio-location .hk-location__toggle-check:checked ~ .hk-location__toggle--closed{
  display:none;
}

#hk-studio-location .hk-location__toggle-check:checked ~ .hk-location__extra{
  max-height:720px;
  margin-top:20px !important;
  opacity:1;
  visibility:visible;
  transition:max-height .28s ease, margin-top .28s ease, opacity .2s ease, visibility 0s;
}

#hk-studio-location .hk-location__toggle-check:checked ~ .hk-location__toggle--open{
  display:flex;
}

#hk-studio-location .hk-location__toggle--open .hk-location__toggle-icon{
  transform:rotate(-135deg);
}

@media(max-width:840px){
  
#hk-studio-location .hk-location__mapbox{
    justify-content:flex-start;
  }
}

@media(max-width:760px){
  #hk-studio-location .hk-location__stack{
    gap:12px;
  }

  
#hk-studio-location .hk-location__mapbox{
    aspect-ratio:1 / 1;
    min-height:0;
    border-radius:14px;
    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  #hk-studio-location .root_daum_roughmap{
    width:100% !important;
    height:100% !important;
    pointer-events:none !important;
  }

  #hk-studio-location .root_daum_roughmap *{
    pointer-events:none !important;
  }

  /* 모바일: 지도 드래그는 막고, 카카오 우측 줌/새로고침 컨트롤만 다시 허용 */
  #hk-studio-location .root_daum_roughmap .wrap_btn_zoom,
  #hk-studio-location .root_daum_roughmap .wrap_btn_zoom *,
  #hk-studio-location .root_daum_roughmap .btn_zoom_in,
  #hk-studio-location .root_daum_roughmap .btn_zoom_out,
  #hk-studio-location .root_daum_roughmap .btn_refresh,
  #hk-studio-location .root_daum_roughmap .btn_map_refresh{
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  #hk-studio-location .hk-location__map-note,
  #hk-studio-location .hk-location__map-link{
    left:10px;
    max-width:calc(100% - 20px);
    min-height:28px;
    padding:0 9px;
    border-radius:7px;
    font-size:11px;
  }

  #hk-studio-location .hk-location__map-note{
    top:10px;
  }

  #hk-studio-location .hk-location__map-link{
    bottom:10px;
    pointer-events:auto !important;
  }

  #hk-studio-location .hk-location__map-link *{
    pointer-events:auto !important;
  }

  #hk-studio-location .hk-location__toggle--closed{
    gap:12px;
  }

  #hk-studio-location .hk-location__toggle-text{
    font-size:10px;
  }

  #hk-studio-location .hk-location__title--parking{
    color:#444 !important;
    font-size:19px !important;
    font-weight:400 !important;
  }

  #hk-studio-location .hk-location__title--parking::after{
    margin-top:5px;
    font-size:10px;
    line-height:1.35;
  }

  #hk-studio-location .hk-location__toggle-check:checked ~ .hk-location__extra{
    max-height:660px;
    margin-top:15px !important;
  }
}