@charset "utf-8";
/*버튼 색상-----------------------------------------------------------------------*/
.ca-gin-color{
    background-color: #0b99ac !important;
}

.ca-pre-color{
    background-color:#673ab7 !important;
}

.ca-gin-btn-color{
    background-color: #0b99ac !important;
    color: white !important;
}

.ca-pre-btn-color{
    background-color: #673ab7 !important;
    color: white !important;
}

.ca-common-btn-color{
    background-color: #3F72AF !important;
    color: white !important;
}

/*svg 아이콘-----------------------------------------------------------------------*/

.ca-icon-link-blank::before{
    content: "";
    display: inline-block;
    background-color: #fff !important;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
}
.ca-icon-locked::before {
    content: "";
    display: inline-block;
    background-color: #fff !important;
    -webkit-mask: url(/res/img/component/icon_pw-239427838ad43d119079ede23b181725.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_pw-239427838ad43d119079ede23b181725.svg) 50%/contain no-repeat;
}
/*텍스트 옵션-----------------------------------------------------------------------*/
.ca-text-bold{
    font-weight: bold;
}

.mini-context-menu {
    position: absolute;
    border-radius: 10px;
    padding: 7px;
    width: auto;
    height: auto;
    border: 1px solid #ddd;
    background-color: #fff;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    z-index: 9999;
}

.mini-context-menu ul {
    overflow: hidden;
    overflow-y: auto;
}

.mini-context-menu ul li {
    width: auto;
    padding: 5px;
    font-size: 13px;
    cursor: pointer;
}

.mini-context-menu ul li.compare::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    width: 18px;
    height: 18px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_compare_pink.svg) 50% 50% / contain no-repeat;
}

.mini-context-menu ul li.pin::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    width: 18px;
    height: 18px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg);
    background-position: center;
    background-repeat: no-repeat;
}
.mini-context-menu .info {
    position: relative;
    top: -12px;
    margin: 0px 10px;
}
.mini-context-menu .page-title-label-icon {
    display: block;
    width: 18px;
    height: 18px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/label-title-main.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.mini-context-menu .page-title-label {
    font-size: 17px;
    font-weight: bold;
    color: black;
}
.mini-context-menu .close-box-container {
    display: flex;
    justify-content: flex-end;
    position: relative;
    top: -15px;
    right: -19px;
}
.mini-context-menu .box-close {
    position: relative;
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_close_tiny.svg) 50%/contain no-repeat;
    z-index: 1;
}

/*영역 로딩(globalConst.areaLoading)-----------------------------------------------------------------------*/
/* 지정한 영역 안에만 표시하는 로딩. 프리미엄·홈 지도가 이 파일을 함께 쓰므로 위치·크기 같은 공통 구조만
   여기 두고, .loading-img 의 테두리색·.loading-text 의 글자색 같은 브랜드 색은 각 지도 CSS
   (pre.map.css/home.map.css)에서 덮어쓴다. border-style·@keyframes spin 은 pre.common.css·home.common.css의
   전체 로딩(.loading-img) 규칙을 그대로 물려받는다. */
.is-area-loading {
    position: relative;
}
.area-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background-color: rgba(10, 46, 79, .8);
}
/* 크기·간격은 모바일(res_mobile/map/css/common.css)과 같은 값을 쓴다. 두 화면의 로딩이 같아 보여야 한다. */
.area-loading .loading-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/symbol_gin_white.svg) 50% 22px/58px no-repeat;
}
.area-loading .loading-img {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-width: 5px;
}
/* 차트 상자가 좁아도 문구가 두 줄로 접히지 않게 한다. */
.area-loading .loading-text {
    margin-top: 18px;
    font-size: .9rem;
    white-space: nowrap;
}
/* reverse 테마 — 흰 배경 + 브랜드 색 로고·스피너·글자. 로고는 흰색 SVG 를 마스크로 삼아 색을 입힌다. */
.area-loading.reverse .loading-inner {
    background-image: none;
}
.area-loading.reverse .loading-inner::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 50%;
    width: 58px;
    height: 58px;
    transform: translateX(-50%);
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/symbol_gin_white.svg) 50%/58px no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/symbol_gin_white.svg) 50%/58px no-repeat;
}
/* 전체 로딩(.loading-text)은 남색 그림자를 깔아 어두운 배경에서 흰 글자를 띄우는 용도다.
   reverse 는 흰 배경 + 브랜드색 글자라 그 그림자가 번져 보이므로 끈다. (모바일과 같은 처리) */
.area-loading.reverse .loading-text {
    text-shadow: none;
}

/* 데이터 없음(.is-empty) — 지역/아파트 차트(.map-right .chart-area)와 지하철 차트(.traffic-box.subway .chart-area)에
   그릴 데이터가 없을 때만 표시. 기본 이미지는 .map-right .chart-area 가 이 상태일 때만 켜진다
   (pre.component.css/home.map.css 에서 지정 — 지도 밖 모달·팝업의 .chart-area 는 회귀 위험이 있어 손대지 않고
   항상 켜진 채로 둔다). 지하철 팝업(.traffic-box)은 원래 기본 이미지가 없던 자리라 문구만 뜬다.
   글자색은 각 지도 CSS(pre.map.css/home.map.css)에서 지정한다. */
.map-right .chart-area.is-empty,
.traffic-box.subway .chart-area.is-empty {
    position: relative;
}
.map-right .chart-area.is-empty::after,
.traffic-box.subway .chart-area.is-empty::after {
    content: "데이터 없음";
    position: absolute;
    top: calc(50% + 60px);
    left: 0;
    right: 0;
    text-align: center;
    font-size: .85rem;
}