@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', sans-serif, Dotum, "돋움", Gulim, "굴림", Apple-Gothic;
    font-size: 14px;
    line-height: 150%;
    font-weight: 700;
    box-sizing: border-box;
}

body {
    font-size: 14px;
    color: #343434;
    -webkit-text-size-adjust: none;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
}

table {
    margin: 0;
    padding: 0;
    border-spacing: 0;
    border: 0;
    _border-collapse: collapse;
    width: 100%;
}

* + html table {
    border-collapse: collapse;
}

img, fieldset, abbr, acronym {
    border: 0;
}

address, caption, cite, code, dfn, em, var {
    font-style: normal;
}

input, button, textarea {
    font-size: 14px;
    padding: 0;
    outline: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

table, table th, table td {
    border: 0;
}

hr {
    display: none
}

a {
    color: #343434;
    text-decoration: none;
}

img {
    vertical-align: middle;
}

caption, legend {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
}

.hide {
    display: none !important;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
}

.gLeft {
    float: left;
}

.gRight {
    float: right;
}

.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    white-space: nowrap;
}

input[type="checkbox"], input[type="radio"] {
    width: 14px;
    height: 14px;
    line-height: 14px;
    box-sizing: border-box;
    -webkit-appearance: auto;
    -webkit-border-radius: 0;
}

html,
body {
    font-family: 'Pretendard', sans-serif;
}

::-webkit-input-placeholder {
    color: #616472;
    font-weight: 400;
}

/* Chrome/Opera/Safari */
::-moz-placeholder {
    color: #616472;
}

/* Firefox 19+ */
:-ms-input-placeholder {
    color: #616472;
}

/* IE 10+ */
:-moz-placeholder {
    color: #616472;
}

/* Firefox 18- */
::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

::-webkit-scrollbar-thumb {
    outline: none;
    border-radius: 10px;
    border: 4px solid transparent;
    box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.15);
}

::-webkit-scrollbar-thumb:hover {
    border: 4px solid transparent;
    box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.3);
}

::-webkit-scrollbar-track {
    box-shadow: none;
    background-color: transparent;
}

.scrollbar {
    z-index: 999;
    position: absolute;
}

.scrollbar::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

.scrollbar::-webkit-scrollbar-thumb {
    outline: none;
    border-radius: 10px;
    border: 4px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.15);
}

.scrollbar::-webkit-scrollbar-thumb:hover {
    border: 4px solid transparent;
    box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.3);
}

.scrollbar::-webkit-scrollbar-track {
    box-shadow: none;
    background-color: transparent;
}

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: var(--ico-pop-select);
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    background-position: -webkit-calc(100% - 15px) center;
    background-position: -moz-calc(100% - 15px) center;
    -webkit-border-radius: 0;
}

select::-ms-expand {
    display: none;
}

input {
    border: 1px solid #dcdcdc;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 35px 0 15px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
    color: #3a4058;
}

label {
    display: inline-block;
    cursor: pointer;
    line-height: 1.5;
    font-size: 14px;
    color: #666;
}

.blind {
    overflow: hidden !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    color: transparent !important;
    clip: rect(0px, 0px, 0px, 0px) !important;
}

/* ---------- */
body {
    display: flex;
}

#map-container {
    display: flex;
    height: 100vh;
    width: calc(100% - 70px);
    z-index: 0;
    user-select: none;
    background-color: #dedede;
}

.leftMenu {
    display: flex;
    position: relative;
    z-index: 300;
    flex-direction: column;
    height: 100vh;
    width: fit-content;
    background-color: #fff;
}

.symbol {
    height: 60px;
    align-self: center;
    align-content: center;
    background-color: white;
}

.logo {
    height: 60px;
    align-content: center;
    background-color: white;
}

.menu {
    width: 70px;
}

.menu li .btnMenu {
    display: block;
    position: relative;
    z-index: 10;
    padding: 13px 1px 11px 0px;
    color: var(--extra-sub-9);
    background-color: #fff;
    text-align: center;
    width: 70px;
    height: 70px;
}

.menu li .btnMenu:hover {
    background-color: var(--extra-sub-4);
}

.menu li .menuLogin:hover {
    background-color: #dad9e7;
}

.menu li .btnMenu span {
    display: block;
    min-height: 13px;
    margin-top: 28px;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: -0.44px;
}

.menu li .menuLogin {
    background: var(--img-user) center 17px no-repeat var(--sub-color-light);
    color: var(--primary-color);
    display: block;
    position: relative;
    z-index: 10;
    padding: 13px 1px 11px 0px;
    text-align: center;
    width: 70px;
    height: 70px;
}

.menu li .menuLogin span {
    display: block;
    min-height: 13px;
    margin-top: 28px;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: -0.44px;
}

.menu li .afterLogin {
    background: var(--img-user) center 17px no-repeat var(--sub-color-light);
    color: var(--primary-color);
    display: block;
    position: relative;
    z-index: 10;
    padding: 13px 1px 11px 0px;
    text-align: center;
    width: 70px;
    height: 130px;
}

.menu li .afterLogin h4 {
    font-size: 12px;
    font-weight: 400;
    color: #3a4058;
    letter-spacing: -0.7px;
    line-height: 12px;
    margin: 35px 0 15px 0;
}

.menu li .afterLogin h4 span {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
}

.menu li .afterLogin .btnLogout {
    background-color: var(--accent-color-4);
    border: none;
    border-radius: 5px;
    padding: 5px 7px;;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.menu li .afterLogin .btnLogout:hover {
    background-color: var(--primary-color);
}

.menu li .menu01 {
    background: url("/static/images/img_menu01_off.png") center 12px no-repeat;
}

.menu li .menu02 {
    background: url("/static/images/img_menu02_off.png") center 12px no-repeat;
}

.menu li .menu03 {
    background: url("/static/images/img_menu03_off.png") center 12px no-repeat;
}

.menu li .menu01.active {
    background: url("/static/images/img_menu01_on.png") center 12px no-repeat var(--primary-color);
    color: #fff;
}

.menu li .menu02.active {
    background: url("/static/images/img_menu02_on.png") center 12px no-repeat var(--primary-color);
    color: #fff;
}

.menu li .menu03.active {
    background: url("/static/images/img_menu03_on.png") center 12px no-repeat var(--primary-color);
    color: #fff;
}

.mapContents {
    flex: 1 1 auto;
}

.line {
    margin: 10px;
    border: 1px solid #e7e6f0;
    height: 1px;
}

.otherMap {
    position: absolute;
    bottom: 0;
    padding-top: 10px;
}

.otherMap li a {
    display: block;
    position: relative;
    z-index: 10;
    padding: 13px 1px 11px 0;
    color: var(--extra-sub-9);
    background-color: #fff;
    text-align: center;
    width: 70px;
    height: 70px;
}

.otherMap li a span {
    display: block;
    min-height: 13px;
    margin-top: 28px;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: -0.44px;
}

.otherMap li a.map01 {
    background: url("/static/images/img_kakao_off.png") center 5px no-repeat #fff;
}

.otherMap li a.map02 {
    background: url("/static/images/img_naver_off.png") center 5px no-repeat #fff;
}

.otherMap li a.map03 {
    background: url("/static/images/img_google_off.png") center 5px no-repeat #fff;
}

.otherMap li a.map01:hover {
    background: url("/static/images/img_kakao_on.png") center 5px no-repeat #fff;
}

.otherMap li a.map02:hover {
    background: url("/static/images/img_naver_on.png") center 5px no-repeat #fff;
}

.otherMap li a.map03:hover {
    background: url("/static/images/img_google_on.png") center 5px no-repeat #fff;
}

.loginBox {
    width: 100%;
    max-width: 380px;
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, .3);
}

.login-head {
    position: relative;
    background: url(/static/images/img_logo_for_Login.png) center center no-repeat;
    height: 200px;
    margin-bottom: 30px;
}

.login-head p {
    font-size: 18px;
    font-weight: 700;
    color: var(--mid-sub-1);
    letter-spacing: -0.7px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.login-body {
    width: 100%;
    background-color: #fff;
}

.body-content {
    width: 100%;
    padding: 0 40px;
}

.body-content .loginInput {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--accent-color-4);
    border-radius: 5px;
    margin-bottom: 5px;
}

.body-content .btnLogin {
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    color: #fff;
    background-color: var(--primary-color);
    margin-top: 10px;
}

.body-content .btnLogin:hover {
    background-color: var(--dark-sub-2);
}

.body-content input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #c48c64;
}

.login-foot {
    width: 100%;
    padding: 30px 40px;
    text-align: center;
}

.login-foot ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-foot ul li a {
    position: relative;
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--primary-color);
}

.login-foot ul li a:hover {
    font-weight: 600;
    color: #f9739f;
}

.login-foot ul li {
    position: relative;
    padding: 0 10px;
}

.login-foot ul li::after {
    content: "";
    width: 1px;
    height: 12px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: var(--extra-sub-1);
}

.login-foot ul li:last-child::after {
    display: none;
}

.leftArea {
    position: absolute;
    left: 70px;
    top: 0;
    bottom: 0;
    z-index: 200;
    height: 100%;
    min-width: 390px;
    background-color: var(--extra-sub-4);
    box-shadow: 3px 0 5px 1px rgba(0, 0, 0, .1);
    transition: left .5s;
}

.leftArea.closed {
    left: -323px;
}

.leftArea.closed .btnPanelClose::after {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.btnPanelClose {
    position: absolute;
    overflow: hidden;
    z-index: 10;
    top: 0;
    left: 100%;
    width: 36px;
    height: 60px;
    border-radius: 0px 200px 200px 0px;
    background-clip: padding-box;
    background-color: var(--extra-sub-7);
    box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, .1);
}

.btnPanelClose::after {
    position: absolute;
    content: '';
    right: 17px;
    top: 50%;
    margin-top: -9.5px;
    width: 20px;
    height: 20px;
    background: var(--img-arrow-left) no-repeat 50%;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transition: transform ease-in-out 0.55s;
    -webkit-transition: transform ease-in-out 0.55s;
}

.leftContents {
    width: 380px;
    min-height: calc(100vh - 250px);
}

.analysis {
    padding: 10px 0 10px 10px;
}

/* tab */
.analysis-condition__submenu {
    width: 50%;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    padding: 14px;
}

.analysis-condition__submenu.active {
    color: #fff;
    border-radius: 8px;
    background-color: var(--primary-color);
}

.conTab {
    width: 100%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid var(--primary-color);
    cursor: pointer;
}

.tabtitle {
    width: 50%;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    padding: 14px;
}

.tabtitle.active {
    color: #fff;
    border-radius: 8px;
    background-color: var(--primary-color);
}

.tab-content {
    margin-top: 10px;
}

.secBox {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 10px;
}

.secBox:has(.btnArea) {
    padding-bottom: 10px;
}

.secBox h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: -0.7px;
}

.secBox h2 span {
    font-size: 12px;
    font-weight: 400;
    color: var(--extra-sub-6);
    margin-left: 10px;
}

.selectBtn {
    width: 100%;
    margin: 5px auto 15px;
}

.selectBtn ul {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
}

.selectBtn li button {
    position: relative;
    width: 110px;
    height: 45px;
    background-color: #fff;
    border: 1px solid var(--extra-sub-5);
    color: #6e6e6e;
    letter-spacing: -0.25px;
}

.selectBtn li button span {
    font-size: 12px;
    font-weight: 400;
    color: #616472;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}

.selectBtn li button.active {
    background-color: var(--accent-color-4);
    border: none;
    box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, .1);
}

.selectBtn li button.active span {
    color: #fff;
}

.selectBtn li button.local {
    background: url("/static/images/ico_local_off.png") 25px center no-repeat;
    border-radius: 8px 0 0 8px;
}

.selectBtn li button.cell {
    background: url("/static/images/ico_cell_off.png") 25px center no-repeat;
}

.selectBtn li button.block {
    background: url("/static/images/ico_block_off.png") 25px center no-repeat;
    border-radius: 0 8px 8px 0
}

.selectBtn li button.local.active {
    background: url("/static/images/ico_local_on.png") 25px center no-repeat var(--accent-color-4);
}

.selectBtn li button.cell.active {
    background: url("/static/images/ico_cell_on.png") 25px center no-repeat var(--accent-color-4);
}

.selectBtn li button.block.active {
    background: url("/static/images/ico_block_on.png") 25px center no-repeat var(--accent-color-4);
}

.areaBtn {
    width: 100%;
    margin: 15px auto;
}

.areaBtn h3 {
    font-size: 14px;
    font-weight: 500;
    color: #3a4058;
    margin-bottom: 5px;
    letter-spacing: -0.7px;
}

.areaBtn ul {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.areaBtn li .areaBox {
    position: relative;
    width: 80px;
    height: 65px;
    background-color: #fff;
    border: 1px solid var(--extra-sub-5);
    border-radius: 8px;
    color: #6e6e6e;
    letter-spacing: -0.25px;
}

.areaBtn li .areaBox span {
    width: 100%;
    font-size: 12px;
    font-weight: 400;
    color: #616472;
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}

.areaBtn li .area01 {
    background: url("/static/images/ico_area_01_off.png") center 8px no-repeat;
}

.areaBtn li .area02 {
    background: url("/static/images/ico_area_02_off.png") center 10px no-repeat;
}

.areaBtn li .area03 {
    background: url("/static/images/ico_area_03_off.png") center 10px no-repeat;
}

.areaBtn li .area04 {
    background: url("/static/images/ico_area_04_off.png") center 8px no-repeat;
}

.areaBtn li .area01.active {
    background: url("/static/images/ico_area_01_on.png") center 8px no-repeat var(--accent-color-4);
}

.areaBtn li .area02.active {
    background: url("/static/images/ico_area_02_on.png") center 10px no-repeat var(--accent-color-4);
}

.areaBtn li .area03.active {
    background: var(--ico-area-03) center 10px no-repeat var(--accent-color-4);
}

.areaBtn li .area04.active {
    background: var(--ico-area-04) center 8px no-repeat var(--accent-color-4);
}

.areaBtn li .areaBox.active {
    background-color: var(--accent-color-4);
    border: none;
    box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, .1);
}

.areaBtn li .areaBox.active span {
    color: #fff;
}

/*-----------------------*
 |       도형 연산       |
 *----------------------*/
.calculation__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.areaBtn li .calculation01 {
    background: url("/static/images/icon_calculation_01_off.png") center 10px no-repeat;
}

.areaBtn li .calculation02 {
    background: url("/static/images/icon_calculation_02_off.png") center 10px no-repeat;
}

.areaBtn li .calculation03 {
    background: url("/static/images/icon_calculation_03_off.png") center 10px no-repeat;
}

.areaBtn li .calculation04 {
    background: url("/static/images/icon_calculation_04_off.png") center 10px no-repeat;
}

.areaBtn li .calculation01.active {
    background: url("/static/images/icon_calculation_01_on.png") center 10px no-repeat var(--accent-color-4);
}

.areaBtn li .calculation02.active {
    background: url("/static/images/icon_calculation_02_on.png") center 10px no-repeat var(--accent-color-4);
}

.areaBtn li .calculation03.active {
    background: url("/static/images/icon_calculation_03_on.png") center 10px no-repeat var(--accent-color-4);
}

.areaBtn li .calculation04.active {
    background: url("/static/images/icon_calculation_04_on.png") center 10px no-repeat var(--accent-color-4);
}

.btnLineRound {
    padding: 3px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    background-color: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
}

.btnLineRound:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.periodBtn {
    width: 100%;
    margin: 5px auto 8px;
}

.periodBtn ul {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
}

.periodBtn li button {
    position: relative;
    width: 110px;
    height: 45px;
    background-color: #fff;
    border: 1px solid var(--extra-sub-5);
    color: #6e6e6e;
    letter-spacing: -0.25px;
    text-align: center;
}

.periodBtn li button span {
    font-size: 14px;
    font-weight: 500;
    color: #616472;
}

.periodBtn li button.active {
    background-color: var(--accent-color-4);
    border: none;
    box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, .1);
}

.periodBtn li button.active span {
    color: #fff;
}

.periodBtn li button.period01 {
    border-radius: 8px 0 0 8px;
}

.periodBtn li button.period03 {
    border-radius: 0 8px 8px 0;
}

.date {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.date div {
    margin-right: 0;
}

.dateCenter {
    margin: 0 5px;
}

.choiceDate {
    position: relative;
}

.choiceDate input {
    padding: 10px 30px 10px 15px;
    width: 150px;
    border-radius: 8px;
    color: #616472;
}

.choiceDate input::placeholder {
    color: #616472;
}

.choiceDate .datePicker {
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -10.5px;
    margin-right: 0;
    width: auto;
    pointer-events: none;
}

.condition-period__input {
    cursor: pointer;
}

.condition-data__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.searchInputWrap {
    position: relative;
    margin: 5px 0;
}

.searchInputWrap input {
    border-radius: 8px;
}

.searchInputWrap > button {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 14px;
    right: 10px;
    background: var(--ico-search) no-repeat;
}

.searchInput {
    position: relative;
    width: 100%;
    height: 45px;
}

.btnArea {
    margin: 10px auto;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btn {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    width: 120px;
}

.btnColor_Red {
    background-color: #f9739f;
    color: #fff;
}

.btnColor_Red:hover {
    background-color: #dc3a6f;
}

.btnLine {
    border: 1px solid var(--primary-color);
}

.btnLine:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.selectArea {
    margin-top: 5px;
}

.selectArea select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--extra-sub-5);
    border-radius: 8px;
    background: var(--ico-select) no-repeat 96% 50% #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 14px;
    font-weight: 500;
    color: #616472;
}

.areaSearch {
    display: flex;
    justify-content: space-between;
}

/*-------------------*
 |      지역 검색     |
 *------------------*/
.addressBox {
    position: absolute;
    left: 445px;
    top: 10px;
    display: flex;
    gap: 10px;
    pointer-events: none;
}

.addressBox button {
    font-size: 14px;
    font-weight: 400;
}

.addressBox *:not(div) {
    pointer-events: auto;
}

.current-location__wrapper {
    display: flex;
    flex-direction: column;
}

.current-location__display {
    height: 44px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 8px 20px 8px 13px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    word-break: keep-all;
}

.current-location__display::before {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    background: var(--ico-point-p) 0 center no-repeat;
}

.current-location__display li {
    padding-left: 5px;
}

.current-location__display button {
    background-color: transparent;
}

.current-location__list {
    position: relative;
    top: 8px;
    width: fit-content;
    max-height: 250px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px 5px 5px 10px;
    border-radius: 0.25rem;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.current-location__list button {
    display: inline-block;
    width: 100%;
    text-align: start;
    margin-right: 5px;
    background-color: transparent;
}

.current-location__list button:hover {
    background-color: var(--sub-color-light);
}

.location-search__container {
    display: flex;
    gap: 5px;
}

.location-search__container.active .location-search__wrapper {
    display: flex;
}

.location-search__wrapper {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.location-search__input {
    width: 250px;
    height: 44px;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}

.location-search__results {
    background-color: white;
    max-height: 250px;
    overflow-y: auto;
    gap: 5px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    max-width: 250px;
    overflow-x: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}

.location-search__results li {
    display: flex;
    gap: 0.7rem;
    cursor: pointer;
    padding-left: 15px;
}

.location-search__results li:hover {
    background-color: var(--sub-color-light);
}

.location-search__results li i {
    width: 14px;
    height: 18px;
    align-self: center;
    background: var(--ico-point-p) no-repeat;
}

.location-search__results li p {
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    width: 212px;
    padding-right: 10px;
}

.location-search__results li .search-main {
    font-weight: 500;
}

.location-search__results li .search-main em.color {
    color: var(--dark-sub-2);
    font-weight: 700;
}

.location-search__results li .search-body {
    color: gray;
    font-weight: 400;
}

.location-search__button {
    width: 90px;
    height: 44px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 14px;
}

.location-search__button:hover {
    background-color: var(--extra-sub-8);
}

.districtBox {
    position: fixed;
    top: 131px;
    left: 470px;
    width: max-content;
    border-radius: 12px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .2);
}

.popTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.popTitle h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
}

.popClose {
    width: 15px;
    height: 15px;
    background: var(--ico-pop-close) 0 0 no-repeat;
}

.selectBoxWrap {
    display: flex;
    gap: 5px;
    justify-content: space-between;
}

.selectBoxWrap .selectBtn {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--extra-sub-5);
    border-radius: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 14px;
    font-weight: 500;
    color: #616472;
    margin: 0;
}

.areaResultWrap {
    background-color: var(--extra-sub-4);
    border-radius: 5px;
    max-height: 200px;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}

.areaResultWrap li {
    font-size: 13px;
    font-weight: 400;
    color: #4e5267;
    position: relative;
    display: flex;
    gap: 7px;
    padding: 10px 7px;
    border-bottom: 1px solid var(--accent-color-1);
    justify-content: space-between;
}

.areaResultWrap li:last-child {
    border-bottom: none;
}

.areaResultWrap li span {
    font-size: 13px;
    font-weight: 400;
    color: #4e5267;
}

.areaResultWrap li span.bold {
    font-weight: 600;
}

.areaResultWrap li label {
    margin-right: 13px;
}

.mar5 {
    margin: 0 5px;
    font-weight: 100 !important;
}

.marB5 {
    margin: 0 0 5px 0;
}

.checkBox {
    position: absolute;
    right: 25px;
    top: -5px;
}

.check {
    display: inline-block;
    position: relative;
    padding-left: 0;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    font-size: 14px;
    color: #666;
}

.check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    padding: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0px;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.check:hover input ~ .checkmark {
    background-color: #fff;
}

.check input:checked ~ .checkmark {
    background-color: #fff;
}

.checkmark::after {
    display: none;
    position: absolute;
    content: "";
}

.check input:checked ~ .checkmark::after {
    display: block;
}

.check .checkmark::after {
    top: 1px;
    left: 5px;
    width: 4px;
    height: 9px;
    border: solid var(--primary-color);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.dataChoice {
    position: absolute;
    top: 510px;
    left: 405px;
    width: 430px;
    border-radius: 12px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, .2);
}

.dataContent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
}

.chooseList {
    max-height: 190px;
    overflow: auto;
    border-radius: 5px;
    padding: 5px;
    background-color: var(--extra-sub-4);
}

.chooseList li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background-color: var(--primary-color);
    margin-bottom: 5px;
}

.chooseList li:last-child {
    margin-bottom: 0;
}

.chooseList li span {
    font-size: 12px;
    font-weight: 500;
}

.listClose {
    background: var(--ico-close-circle) 0 0 no-repeat;
    width: 16px;
    height: 16px;
}

.dataCheckList {
    display: flex;
    gap: 10px;
    max-height: 235px;
}

.dataCheckList .list1depth {
    width: 50%;
    overflow-y: scroll;
}

.dataCheckList .list2depth {
    width: 50%;
    overflow: auto;
    background-color: var(--extra-sub-4);
    border-radius: 5px;
    padding: 10px;
}

.dataCheckList .list2depth li {
    position: relative;
    display: flex;
    height: 25px;
}

.dataCheckList .list2depth li .dataTxt {
    font-size: 13px;
    font-weight: 400;
    color: #4e5267;
    padding-left: 24px;
}

.list1depth dt {
    position: relative;
    background-color: var(--primary-color);
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.list1depth dt::before {
    position: absolute;
    content: '';
    right: 5px;
    top: 50%;
    margin-top: -9.5px;
    width: 20px;
    height: 20px;
    background: url("/static/images/ico_select_w.png") no-repeat 50%;
    transition: transform ease-in-out 0.25s;
    -webkit-transition: transform ease-in-out 0.25s;
}

.list1depth dt.on::before {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}

.list1depth dl {
    margin-bottom: 3px;
}

.listchk {
    width: 100%;
    background-color: var(--extra-sub-4);
    border-radius: 5px;
    padding: 10px;
}

.listchk li {
    position: relative;
    display: flex;
    height: 25px;
}

.listchk li .dataTxt {
    font-size: 13px;
    font-weight: 400;
    color: #4e5267;
    padding-left: 24px;
}

.popBtn {
    margin-top: 10px;
    text-align: center;
    border-top: 1px solid #dcdcdc;
    padding-top: 10px;
}

.popBtn button {
    width: 110px;
    padding: 8px 10px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
}

.popBtn button.btnCancelpop {
    background-color: var(--sub-color-light);
    border: none;
    color: #797788;
}

.popBtn button.btnCancelpop:hover {
    background-color: #797788;
    color: #fff;
}

.popBtn button.btnChoosepop {
    background-color: #fff;
    border: 1px solid var(--accent-color-4);
    color: var(--primary-color);
}

.popBtn button.btnChoosepop:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/*1112 추가*/
.copyright {
    padding: 10px;
    position: relative;
    bottom: 0;
}

.copyright h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: -0.7px;
}

.copyright h2 span {
    font-weight: 300;
}

.copyTxt {
    margin-top: 5px;
}

.copyright p, .copyTxt li, .copyTxt li span {
    font-size: 12px;
    font-weight: 400;
    color: var(--dark-sub-5);
    line-height: 16px;
}

.copyTxt li span.tell {
    background: var(--ico-phone) 0 1px no-repeat;
    padding: 0 10px 0 18px;
}

.copyTxt li span.mail {
    background: var(--ico-mail) 0 2px no-repeat;
    padding: 0 0 0 18px;
}

.cloTxt {
    bottom: -100px;
}

.linkTxt {
    margin-top: 10px;
}

.linkTxt ul {
    display: flex;
    align-items: center;
}

.linkTxt li a {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--extra-sub-10);
}

.linkTxt li a.txtPurple {
    color: var(--accent-color-3);
}

.linkTxt li {
    position: relative;
    padding: 0 7px 0 5px;
}

.linkTxt li:first-child {
    padding-left: 0;
}

.linkTxt li:last-child {
    padding-right: 0;
}

.linkTxt li::after {
    content: '';
    width: 1px;
    height: 12px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: var(--extra-sub-1);
}

.linkTxt li:last-child::after {
    display: none;
}

.btnCopy_open {
    display: block;
    position: absolute;
    top: 10px;
    left: 92px;
}

.copyTxt.closed {
    display: none;
}

.btnCopy_open button {
    width: 20px;
    height: 20px;
    background: url("/static/images/ico_arrow_down.png") center center no-repeat;
    transition: all 1s;
}

.cloTxt .btnCopy_open button {
    width: 20px;
    height: 20px;
    background: url("/static/images/ico_arrow_down.png") center center no-repeat;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.mainContents {
    height: 100vh;
    overflow: auto;
    background-color: var(--extra-sub-4);
}

.rightArea {
    position: absolute;
    z-index: 100;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.rightArea .map_choice {
    position: absolute;
    top: 10px;
    right: 15px;
}

.mapList ul {
    display: flex;
    gap: 5px;
    align-items: center;
}

.mapList li {
    height: 45px;
}

.mapList button {
    position: relative;
    border: none;
    width: 95px;
    height: 45px;
    border-radius: 5px;
}

.mapList li.active button {
    border: 5px solid var(--accent-color-4);
}

.mapList button:hover::after {
    border-radius: 5px;
}

.mapList li.active button::after {
    opacity: .8;
    border-radius: 0;
}

.mapList button::after {
    content: "";
    position: absolute;
    border-radius: 5px;
    background-color: #000;
    inset: 0;
    opacity: .3;
}

.mapList button.generalMap {
    background: url("/static/images/img_map_general.png") 0 0 no-repeat;
}

.mapList button.satelliteMap {
    background: url("/static/images/img_map_satellite.png") 0 0 no-repeat;
}

.mapList .mapLabel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    z-index: 1;
}

.rightArea .map_toolBox {
    position: absolute;
    top: 75px;
    right: 15px;
}

.toolList {
    width: 56px;
}

.toolList dt {
    position: relative;
    width: 100%;
    height: 28px;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    margin-bottom: 5px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.toolList dt::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 23px;
    margin-top: -5.5px;
    width: 10px;
    height: 10px;
    background: url("/static/images/ico_arrow_down.png") no-repeat 50%;
    transition: transform ease-in-out 0.25s;
    -webkit-transition: transform ease-in-out 0.25s;
}

.toolList dt.on::before {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.toolList dd {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.toolList dd .mapTool {
    background-color: #fff;
    border-bottom: 1px solid #cacac9;
    height: 56px;
    width: 56px;
    color: #9ca3af;
}

.toolList dd .mapTool:first-child {
    border-radius: 5px 5px 0 0;
}

.toolList dd .mapTool:last-child {
    border-bottom: none;
    border-radius: 0 0 5px 5px;
}

.toolList dd .mapTool span {
    display: block;
    min-height: 12px;
    margin-top: 28px;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: -0.44px;
}

.toolList dd .mapTool:hover {
    background-color: var(--extra-sub-4);
}

.toolList dd .mapTool.active {
    background-color: var(--primary-color);
    color: #fff;
}

.toolList dd .tool01 {
    height: 60px;
    background: url("/static/images/ico_tool_01_off.png") center 10px no-repeat #fff;
}

.toolList dd .tool02 {
    background: url("/static/images/ico_tool_02_off.png") center 10px no-repeat #fff;
}

.toolList dd .tool01.active {
    background: url("/static/images/ico_tool_01_on.png") center 10px no-repeat var(--primary-color);
}

.toolList dd .tool02.active {
    background: url("/static/images/ico_tool_02_on.png") center 10px no-repeat var(--primary-color);
}

.rightArea .map_location {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.btnLocation {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    cursor: pointer;
    background: url("/static/images/ico_myPosition.png") center center no-repeat #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.btnLocation:hover {
    background: url("/static/images/ico_myPosition_ov.png") center center no-repeat var(--primary-color);
}

.mapControl {
    margin-top: 20px;
    display: grid;
}

.mapControl button {
    width: 40px;
    height: 40px;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.mapControl button.btnPlus {
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #cacac9;
    background: url("/static/images/ico_plus_off.png") center center no-repeat #fff;
}

.mapControl button.btnMinus {
    border-radius: 0 0 5px 5px;
    background: url("/static/images/ico_minus_off.png") center center no-repeat #fff;
}

.mapControl button.btnPlus:hover {
    background: url("/static/images/ico_plus_on.png") center center no-repeat var(--primary-color);
}

.mapControl button.btnMinus:hover {
    background: url("/static/images/ico_minus_on.png") center center no-repeat var(--primary-color);
}

.popup-wrap.active {
    display: block;
}

.popup-wrap {
    background-color: rgba(0, 0, 0, .7);
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    padding: 15px;
    z-index: 999;
    backdrop-filter: blur(2px);
}

.popup {
    width: 100%;
    max-width: 400px;
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 5px 10px 10px 1px rgba(0, 0, 0, .3);
}

.popup-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px;
    border-bottom: 1px solid #dedede;
    padding-bottom: 10px;
}

.popup-head h2 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.7px;
    color: var(--primary-color);
}

.popup-head button {
    position: absolute;
    right: 0;
    width: 14px;
    height: 14px;
    background: var(--ico-pop-close) no-repeat;
}

.popup-body {
    width: 100%;
    background-color: #fff;
}

.body-content {
    width: 100%;
    padding: 30px;
}

.body-titlebox {
    text-align: center;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
}

.body-titlebox p {
    font-size: 14px;
    font-weight: 400;
    color: #3a3945;
    letter-spacing: -0.7px;
    line-height: 16px;
}

.popup-foot {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
}

.pop-btn {
    display: block;
    width: 100px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    border-radius: 50px;
    text-align: center;
    padding: 7px;
}

.pop-btn.close {
    background-color:  var(--mid-sub-5);
}

.pop-btn.confirm {
    background-color: var(--accent-color-4);
}

.pop-btn.close:hover {
    background-color: var(--mid-sub-4);
}

.pop-btn.confirm:hover {
    background-color: var(--primary-color);
}


.regist {
    padding: 10px 0 10px 10px;
}

.regist h2 {
    font-size: 16px;
    font-weight: 600;
    color: #3a3945;
    margin: 15px 10px;
}

.txtH3p {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.registList {
    background-color: var(--sub-color-light);
    border-radius: 5px;
    padding: 15px 20px;
}

.registList li {
    font-size: 14px;
    font-weight: 400;
    color: #68676d;
}

.registList li .txtBold {
    font-weight: 600;
}

.result {
    padding: 10px 0 10px 10px;
}

.result h2 {
    font-size: 16px;
    font-weight: 600;
    color: #3a3945;
    margin: 15px 10px;
}

.resultTable {
    height: auto;
    overflow-y: auto;
    margin-top: 20px;
    max-height: 435px;
}

.tableResult {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--sub-color-gray);
    table-layout: auto;
}

.tableResult th {
    background-color: var(--sub-color-lavender);
    font-size: 14px;
    font-weight: 600;
    color: #3a3945;
    padding: 7px 10px;
    border-bottom: 1px solid var(--sub-color-gray);
    text-align: center;
    white-space: nowrap;
}

.tableResult td {
    background-color: #fff;
    font-size: 14px;
    font-weight: 400;
    color: #3a3945;
    padding: 7px 10px;
    text-align: center;
    white-space: nowrap;
    border-left: 1px solid var(--sub-color-gray);
    border-bottom: 1px solid var(--sub-color-gray);
}

.tableResult tr:first-child {
    border-bottom: 2px solid var(--sub-color-gray);
}

.tableResult tr:first-child td {
    font-weight: 600;
}

.btnColor_Purple {
    background-color: var(--accent-color-4);
    color: #fff;
}

.btnColor_Purple:hover {
    background-color: var(--primary-color);
}

.infoWindow {
    position: absolute;
    width: auto;
    border-radius: 12px;
    background-color: #fff;
    padding: 20px;
    z-index: 1;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .2);
    transform: translate(-50%, -100%);
}

.infoWindow .head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dedede;
    padding-bottom: 10px;
}

.infoWindow .head h2 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.7px;
    color: var(--primary-color);
}

.infoWindow .head button {
    position: absolute;
    right: 0;
    width: 14px;
    height: 14px;
    background: var(--ico-pop-close) no-repeat;
}

.infoWindow .body {
    width: 100%;
    background-color: #fff;
}

.infoWindow .bodyTable {
    height: 200px;
}

.infoWindow .foot {
    width: 100%;
}

.infoWindow .foot span {
    position: relative;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 15px;
}

.infoWindow::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 20px 10px 0;
    border-color: #fff transparent;
    display: block;
    width: 0;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.2));
}

.infoWindow .resultTable {
    max-height: 250px;
}

.wb {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    width: 100px;
    height: 10px;
    bottom: 0;
    z-index: 1;
}

.mapSetting {
    width: 100%;
    max-width: 400px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 5px 10px 10px 1px rgba(0, 0, 0, .3);
}

.body-table {
    padding: 0 15px 15px;
}

.popTable {
    width: 100%;
    border: 0;
}

.popTable th {
    background-color: var(--sub-color-lavender);
    font-size: 14px;
    font-weight: 600;
    color: #3a3945;
    padding: 10px;
    border-top: 1px solid var(--primary-color);
    border-right: 1px solid var(--sub-color-gray);
    border-bottom: 1px solid var(--sub-color-gray);
    text-align: center;
}

.popTable th:last-child, .popTable td:last-child {
    border-right: none;
}

.popTable th:first-child, .popTable td:first-child {
    width: 45px;
}

.popTable td {
    background-color: #fff;
    font-size: 14px;
    font-weight: 400;
    color: #3a3945;
    padding: 10px;
    border-right: 1px solid var(--sub-color-gray);
    border-bottom: 1px solid var(--sub-color-gray);
    text-align: left;
}

.popTable td.txtCen {
    text-align: center;
}

.popTable thead tr, .popTable tbody tr {
    display: table;
    width: 370px;
}

.popTable tbody {
    display: block;
    height: 230px;
    overflow-y: auto;
    overflow-x: hidden;
}

.txtSymbol {
    padding: 0 5px;
    font-size: 14px;
    font-weight: 400;
}

.detailBox {
    width: 100%;
    max-width: 1400px;
    background-color: var(--extra-sub-4);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 5px 10px 10px 1px rgba(0, 0, 0, .3);
}

.data_D_contents {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 0 20px 15px;
    background-color: var(--extra-sub-4);
}

.data_D_left {
    position: relative;
    width: 270px;
    height: 640px;
    padding: 15px 10px;
}

.data_D_left .titH2 h2 {
    font-size: 14px;
}

.btn_WH {
    width: 83px !important;
    height: 40px !important;
}

.btn_WH span {
    font-size: 12px !important;
}

.treeList {
    height: 482px;
    overflow-y: auto;
    border: 1px solid var(--accent-color-1);
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0;
}

.left_bottom {
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.dataTable {
    position: absolute;
    background-color: var(--dark-sub-1);
    width: 300px;
    border-radius: 10px;
    padding: 15px;
    left: 0;
    bottom: 30px;
    z-index: 100;
}

.topTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.topTitle h2 {
    background: var(--ico-data-info) 0 0 no-repeat var(--dark-sub-1);
    padding-left: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.topTitle button {
    background: url("/static/images/btn_close_white.png") 0 0 no-repeat var(--dark-sub-1);
    width: 15px;
    height: 15px;
}

.dataTable th {
    background-color: var(--dark-sub-4);
    border-right: 1px solid var(--dark-sub-3);
    font-size: 12px;
    font-weight: 600;
    color: var(--mid-sub-3);
    padding: 5px;
}

.dataTable td {
    text-align: center;
    font-size: 11px;
    font-weight: 400;
    color: var(--accent-color-2);
    border-bottom: 1px solid var(--primary-color);
    border-right: 1px solid var(--primary-color);
    padding: 5px 5px 4px 5px;;
}

.dataTable td:last-child, th:last-child {
    border-right: none;
}

.dataTable td:nth-child(3), td:nth-child(4) {
    text-align: center;
}

.dataInfo {
    background: var(--ico-data-info) 5px center no-repeat var(--primary-color);
    border-radius: 50px;
    width: 90px;
    height: 24px;
}

.dataInfo span {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    margin-left: 10px;
}

.data_D_right {
    width: 100%;
}

.topSection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.width200 {
    width: 200px;
}

.width200 select {
    height: 39px;
}

.btnNtab {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    align-items: center;
}

.btnDown {
    background: url("/static/images/ico_excel.png") 15px center no-repeat #fff;
    border: 1px solid var(--accent-color-1);
    border-radius: 5px;
    position: relative;
    padding-left: 46px;
    padding-right: 15px;
    height: 39px;
}

.btnDown span {
    font-size: 12px;
    font-weight: 600;
    color: #616472;
}

.btnTab .tabtn {
    display: flex;
    align-items: center;
}

.btnTab .tabtn li {
    border: 1px solid var(--accent-color-1);
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    height: 39px;
    cursor: pointer;
    padding: 10px 15px 10px 40px;
}

.btnTab .tabtn li.tabTable {
    background: var(--ico-table-off) 15px center no-repeat #fff;
    border-radius: 5px 0 0 5px;
    border-right: none;
}

.btnTab .tabtn li.tabChart {
    background: var(--ico-chart-off) 15px center no-repeat #fff;
    border-radius: 0 5px 5px 0;
    border-left: none;
}

.btnTab .tabtn li.tabTable.current {
    background: url("/static/images/ico_table_on.png") 15px center no-repeat var(--primary-color);
}

.btnTab .tabtn li.tabChart.current {
    background: url("/static/images/ico_chart_on.png") 15px center no-repeat var(--primary-color);
}

.btnTab .tabtn li.current {
    background: var(--primary-color);
    color: #fff;
}

.chart-content-warp {
    display: none;
    height: 590px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
}

.chart-content-warp:has(> .current) {
    display: flex;
    flex-direction: column;
}

.marb0 {
    margin-bottom: 0;
}

.chart-content {
    flex: 1;
    border: 1px solid #e3e5e8;
    height: 100%;
}

.tab2Contents {
    display: flex;
    gap: 10px;
    height: 100%;
}

.conLeft {
    width: 65%;
}

.conRight {
    width: 35%;
    overflow-y: auto;
}

.chartTop {
    padding: 10px 3px;
    display: flex;
    justify-content: space-between;
}

.chartTop .tab2Tit {
    font-size: 17px;
    font-weight: 600;
    color: var(--primary-color);
}

.chartTop .tab2Tit span {
    font-weight: 400;
}

.chartBtn_area {
    display: flex;
    gap: 10px;
    align-items: center;
}

.chartBtn_area span {
    font-size: 14px;
    font-weight: 500;
    color: #494858;
}

.chartBtn_area > div {
    display: flex;
    gap: 2px;
}

.chartBtn_area > div button {
    width: 25px;
    height: 25px;
    background-color: #fff;
    border: 1px solid var(--accent-color-1);
    border-radius: 5px;
}

.chartBtn_area > div button.active {
    background-color: var(--primary-color);
    border: none;
}

.btn_bar {
    background: url("/static/images/ico_chart_bar_off.png") center center no-repeat #fff;
}

.btn_line {
    background: url("/static/images/ico_chart_line_off.png") center center no-repeat #fff;
}

.btn_bar.active {
    background: url("/static/images/ico_chart_bar_on.png") center center no-repeat;
}

.btn_line.active {
    background: url("/static/images/ico_chart_line_on.png") center center no-repeat;
}

.conLeft .chartArea {
    padding: 10px;
}

.rcab {
    border-bottom: 1px solid #cfd2d8;
    padding: 10px;
}

.rcab:first-child {
    padding-top: 0;
}

.rcab .chartBoxTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rcab .chartBoxTop h4 {
    font-size: 12px;
    font-weight: 600;
    color: #494858;
}

.rcab .chartBoxTop .btntopR {
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-color);
    background-color: #f4f3f8;
    border: 1px solid var(--mid-sub-3);
    border-radius: 50px;
    padding: 2px 8px;
}

.rcab .chartBoxTop .btntopR:hover {
    background-color: var(--mid-sub-3);
    color: #fff;
}

.rcab .areaChart {
    padding: 10px;
    min-height: 110px;
}

.mainContents .mainContent {
    display: none;
}

.mainContents .mainContent.active {
    display: block;
}

.yearpicker-container {
    position: fixed;
}

.no-data-text {
    justify-items: center;
    height: 200px;
    align-content: center;
}

#popup-data-choice .no-data-text {
    border-radius: 1rem;
    background-color: var(--extra-sub-4);
}

/* 분포도 */
.distributionBox {
    position: absolute;
    top: 30px;
    right: 70px;
    width: 260px;
    border-radius: 12px;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .2);
}

.distributionBox .selectList {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--extra-sub-5);
    border-radius: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 14px;
    font-weight: 500;
    color: #616472;
    margin: 0 0 5px 0;
}

.distributionBox .btnWrap {
    overflow-y: auto;
    max-height: 225px;
    margin: 0 -10px;
    scrollbar-gutter: stable both-edges;
}

.selectWrap {
    margin-bottom: 10px;
}

.btnWrap button {
    margin-bottom: 5px;
}

.btn_pur_line {
    background-color: #fff;
    border: 1px solid var(--accent-color-4);
    color: var(--primary-color);
    padding: 5px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
}

.btn_pur_line:hover {
    background-color: var(--sub-color-light);
}

.btn_pur_line.active {
    background-color: var(--accent-color-4);
    color: #fff;
}

.selectResult {
    background-color: var(--accent-color-4);
    color: #fff;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.flexCenter {
    display: flex;
    justify-content: center;
}

.width120 {
    width: 120px;
}

.distriDetail {
    position: absolute;
    top: 107px;
    right: 350px;
    width: 410px;
    border-radius: 12px;
    background-color: var(--extra-sub-4);
    padding: 10px;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, .2);
}

.resultDtail {
    background-color: var(--accent-color-4);
    color: #fff;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 5px;
    text-align: center;
}

.resultDtail p {
    font-size: 16px;
    font-weight: 600;
}

.resultDtail span {
    font-size: 14px;
    font-weight: 400;
}

.distriChart {
    background-color: #fff;
    border-radius: 6px;
    padding: 10px;
    min-height: 200px;
    margin-bottom: 10px;
}

.distriTable {
    background-color: #fff;
    border-radius: 6px;
    padding: 10px;
    min-height: 220px;
}

.tableA {
    width: 100%;
    color: #71707b;
}

.tableA th {
    font-size: 12px;
    font-weight: 600;
    background-color: #ebe9f4;
    padding: 7px;
    border-bottom: 1px solid var(--sub-color-pinkish);
    border-right: 1px solid var(--sub-color-pinkish);
}

.tableA td {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    padding: 7px;
    border-bottom: 1px solid var(--sub-color-pinkish);
    border-right: 1px solid var(--sub-color-pinkish);
}

.tableA th:last-child, .tableA td:last-child {
    border-right: none;
}

.tableA th.rLine {
    border-right: 1px solid var(--sub-color-pinkish);
}

.distributionBox .selectResult:hover {
    cursor: pointer;
}

.distributionBox .selectResult button {
    width: 100%;
    height: 100%;
    color: white;
    background-color: transparent;
}

#distribution-map-column {
    max-height: 300px;
    overflow-y: auto;
}


/*---------------------------*
 |         Leaflet           |
 *---------------------------*/
.custom-tooltip {
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.custom-tooltip .markIcon {
    transform: translate(-50%, -55%);
}

.custom-tooltip.leaflet-tooltip-top:before {
    content: none;
}

.markIcon {
    position: absolute;
    padding: 4px 12px;
    background-color: #fff;
    font-size: 13px;
    display: inline-block;
    white-space: nowrap;
    border: 3px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 28px;
}

.markIcon.active::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 12px 8px 0 8px;
    border-color: var(--primary-color) transparent transparent transparent;
}

.disable-background-popup .leaflet-popup-content-wrapper {
    border: none;
    background: none;
    box-shadow: none;
}

.disable-background-popup .leaflet-popup-content {
    width: fit-content !important;
    margin: 0;
    align-content: center;
}

.disable-background-popup .leaflet-popup-tip-container {
    display: none;
}

.disable-background-popup .leaflet-popup-content p {
    margin: 0 0 0 5px;
}

/*-------------------------*
 |          Popup          |
 *------------------------*/
/*----- Detail-Data -----*/
.tabulator .tabulator-header .tabulator-col:not(:last-child),
.tabulator-row .tabulator-cell:not(:last-child) {
    border-right: 1px solid #ddd;
}

/*----- Thematic-Map -----*/
#popup-thematic-map * {
    font-weight: 500;
}
#popup-thematic-map .txtBold {
    font-weight: 700;
}
.pop-btn.disabled {
    cursor: not-allowed;
}

.tm-container {
    position: absolute;
    bottom: -300px;
    width: 100%;
    z-index: 1;
    justify-items: center;
    transition: bottom ease-in-out 0.25s;
    -webkit-transition: bottom ease-in-out 0.25s;
}
.tm-container.active {
    bottom: 0;
}

.tm-slider {
    width: 40%;
    position: absolute;
    bottom: 15px;
    left: calc(50% - 70px);
    transform: translateX(-50%);
    background-color: #fff;
    padding: 13px 18px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tm-slider p {
    background: var(--ico-slide-title) 0 0 no-repeat;
    padding-left: 26px;
}
.tm-slider .close {
    background: url("/static/images/btn_close_s.png") center center no-repeat;
    width: 10px;
    height: 10px;
    font-size: 0;
}
.tm-slider .tm-progress-container {
    flex: 1;
}

.tm-panel {
    position: absolute;
    width: auto;
    bottom: 15px;
    right: 140px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    padding: 10px 15px;
}
.tm-panel dt.tm-panel-title:before {
    position: absolute;
    content: '';
    right: 15px;
    top: 20px;
    margin-top: -8.5px;
    width: 20px;
    height: 20px;
    background: url("/static/images/btn_closeDown.png") no-repeat;
    transition: transform ease-in-out 0.25s;
    -webkit-transition: transform ease-in-out 0.25s;
}
.tm-panel dt.on.tm-panel-title:before {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}

.tm-panel dt {
    line-height: 18px;
    cursor: pointer;
}
.tm-panel dd {
    border-top: 1px solid #ececec;
    padding-top: 10px;
    margin-top: 10px;
}
.tm-panel .tm-legend dl {
    display: flex;
    align-items: center;
}
.tm-panel .tm-legend dd {
    overflow-x: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    border: none;
    padding-top: 0;
    margin-top: 0;
    margin-left: 10px;
}
.tm-panel .tm-legend dt {
    width: 80px;
    height: 12px;
    left: 15px;
    background-color: #dedede;
}
.tm-panel .tm-legend dt.scale {
    transform: scale(1.1);
}

.tm-blind {
    justify-items: center;
    text-align: center;
}

.tm-layer-popup {
    width: 180px;
    height: fit-content;
    position: absolute;
    z-index: 1;
    border-radius: 10px;
    box-shadow: 1px 1px 5px #aaa;
    pointer-events: none;
    transform: translate(-10%, -100%);
}
.tm-layer-popup .tm-header {
    display: block;
    background: var(--accent-color-4);
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 10px 0;
    font-size: 10pt;
    font-weight: 500;
    border-radius: 10px 10px 0 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.tm-layer-popup.headless h3.tm-header {
    display: none;
}
.tm-layer-popup .tm-content {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #fff;
    padding: 10px;
    border-radius: 0 0 10px 10px;
}
.tm-layer-popup .tm-content strong {
    text-align: center;
    font-size: 10pt;
    font-weight: 500;
    color: #434343;
}
.tm-layer-popup.headless .tm-content {
    border-radius: 10px;
}

/*-------------------------*
 |        Component        |
 *------------------------*/
/*------ File Tree ------*/
.file-tree {
    list-style: none;
    max-width: 300px;
    font-weight: 500;
    width: 100%;
    height: auto;
}
.file-tree ul {
    padding-left: 1rem;
    margin-left: 1rem;
    border-left: 1px dashed lightgray;
}
.file-tree li {
    margin: 3px 0;
    cursor: pointer;
    position: relative;
    list-style: none;
}
.folder > .tree-label > .tree-name::before,
.folder.collapsed:hover > .tree-label > .tree-name::before {
    content: "📂";
    margin-right: 4px;
}
.folder.collapsed > .tree-label > .tree-name::before {
    content: "📁 ";
}
.file > .tree-label > .tree-name::before {
    content: "📄 ";
    margin-right: 4px;
}
.file-tree li.selected > .tree-label .tree-name {
    font-weight: bold;

}
.collapsed > ul {
    display: none;
}
.tree-label {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 3px;
    border-radius: 6px;
}
.tree-label .tree-name {
    flex: 1;
    font-weight: 500;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
}
.tree-label input[type="checkbox"] {
    margin-left: 8px;
    cursor: pointer;
    -webkit-appearance: checkbox;
    -webkit-border-radius: 0;
}

.file-tree li:hover > .tree-label {
    background-color: var(--extra-sub-4);
}

/*----- Progress bar -----*/
.dpb-container {
    display: flex;
    margin: 5px;
    padding: 0 5px;
    align-items: center;
}
.dpb-progress-container {
    position: relative;
    height: 7px;
    background-color: #ddd;
    border-radius: 5px;
    cursor: pointer;
    flex: 1;
}
.dpb-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(--accent-color-4);
    width: 0;
    border-radius: 5px;
    transition: width 0.1s;
}
.dpb-progress-handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: left 0.1s;
    z-index: 1;
}
.dpb-button {
    font-size: 14px;
    cursor: pointer;
    margin-right: 5px;
    border: none;
    background: url("/static/images/ico-play-48.png") no-repeat;
    background-size: contain;
}
.dpb-button[data-status="playing"] {
    background: url("/static/images/ico-pause-48.png") no-repeat;
    background-size: contain;
}

/*------ Loading ------*/
.loading-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999999;
    display: flex;
    height: 100%;
    width: 100%;
    opacity: 0;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    background-color: rgba(255, 255, 255, 0.3);
}
.loading-container.visible {
    opacity: 1;
}

.loading-container .loader{
    position: relative;
    margin: 80px auto;
    text-indent: -9999em;
    font-size: 10px;
    color: var(--accent-color-4);
    transform: translateZ(0);
    animation-delay: -0.16s;
}
.loading-container .loader::before{
    position: absolute;
    top: 0;
    content: '';
    left: -3.5em;
}
.loading-container .loader::after{
    position: absolute;
    top: 0;
    content: '';
    left: 3.5em;
}

.loading-container .loader,
.loading-container .loader:before,
.loading-container .loader:after{
    height: 2.5em;
    width: 2.5em;
    border-radius: 50%;
    animation-fill-mode: both;
    animation: loaderAni 1.8s infinite ease-in-out;
}

.loading-container .loader:before {
    animation-delay: -0.32s;
}

@keyframes loaderAni {
    0%,
    80%,
    100% { box-shadow: 0 2.5em 0 -1.3em;}
    40% { box-shadow: 0 2.5em 0 0; }
}

/*------------------------*
 |         북마크         |
 *-----------------------*/
.bookmark-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bookmark-info dt {
    width: 13%;
    text-align: center;
    align-self: center;
}
.bookmark-info > dl {
    display: flex;
    gap: 15px;
    justify-content: space-between;
}
.bookmark-info dd {
    flex: 1;
}

.bookmark-info-title input,
.bookmark-info-description textarea {
    width: 100%;
    border: 1px solid #dcdcdc;
    display: inline-block;
    box-sizing: border-box;
    padding: 0.5em 1.5rem 0.5em 0.8em;
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
}

.popup-wrap[data-type="bookmark"] .line { margin: 15px 10px; }
.popup-wrap[data-type="bookmark"] .body-content { padding: 10px 15px; }
.popup-wrap[data-type="bookmark"] .bookmark-option .registList { margin: 5px; }

/*───────── Modal ─────────*/
/* 모달 최상위 컨테이너 */
.modal-wrapper {
    display: inline-block;
    position: fixed;
    vertical-align: top;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 16px;

    z-index: 999;

    min-height: 100px;
    max-height: 500px;

    white-space: nowrap;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .2);
}

/* 헤더 영역 */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    cursor: move;
}
.modal-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
}
.modal-header .btn-close {
    border: none;
    cursor: pointer;
    width: 15px;
    height: 15px;
    background: var(--ico-pop-close) 0 0 no-repeat;
}

/* 바디 영역(전체) */
.modal-body {
    display: inline-flex;
    gap: 20px;
}
.modal-body .modal-content-warp {
    display: flex;
    gap: 10px;
}
.modal-body .modal-content {
    display: inline-block;
    max-height: 300px;
    overflow-y: auto;
    vertical-align: top;
    min-width: 150px;
}
.modal-body .data-text {
    font-size: 13px;
    font-weight: 400;
    color: #4e5267;
    padding-left: 24px;
}

/* 푸터 영역 */
.modal-footer {
    display: flex;
    width: 100%;
    gap: 5px;
    justify-content: center;
    align-items: center;
    margin: 15px 0 5px 0;
}
.modal-footer button {
    display: block;
    width: 100px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    border-radius: 50px;
    text-align: center;
    padding: 7px;
}
.modal-footer .btn-cancel {
    background-color: #f9739f;
}
.modal-footer .btn-cancel:hover {
    background-color: #dc3a6f;
}
.modal-footer .btn-confirm {
    background-color: var(--accent-color-4);
}
.modal-footer .btn-confirm:hover {
    background-color: var(--primary-color);
}

/* 왼쪽 체크박스 목록 */
.column-panel-inner dl {
    margin-bottom: 3px;
}
.column-panel-inner dt {
    position: relative;
    padding: 7px 30px 7px 10px;
    background-color: var(--primary-color);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.column-panel-inner dt::before {
    position: absolute;
    content: '';
    right: 5px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -9.5px;
    background: url("/static/images/ico_select_w.png") no-repeat 50%;
    transition: transform ease-in-out 0.25s;
    -webkit-transition: transform ease-in-out 0.25s;
}
.column-panel-inner dt.on::before {
   transform: rotate(-180deg);
   --webkit-transform: rotate(-180deg);
}
.column-panel-inner ul {
    list-style: none;
    background-color: var(--extra-sub-4);
    border-radius: 5px;
    padding: 10px;
}
.column-panel-inner li {
    align-items: center;
    position: relative;
    display: flex;
    height: 25px;
}

/* 중간 "전체 / 점포 수" 선택 */
.selection-panel {
    background-color: var(--extra-sub-4);
    border-radius: 5px;
}
.selection-panel ul {
    list-style: none;
    padding: 10px;
}
.selection-panel li {
    position: relative;
    display: flex;
    height: 25px;
}

/* 오른쪽 선택된 항목 태그 */
.tag-panel {
    display: inline-block;
    vertical-align: top;
    border-radius: 5px;
    background-color: var(--extra-sub-4);
}
.tag-panel ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 5px;
    gap: 3px;
    white-space: nowrap;
}
.tag-panel li {
    display: flex;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    padding: 7px 10px;
    color: #fff;
    background-color: var(--primary-color);
}
.btn-tag-close {
    border: none;
    cursor: pointer;
    margin-left: 6px;

    width: 16px;
    height: 16px;
    background: var(--ico-close-circle) 0 0 no-repeat;
}

/*─── AI Assistant ───────────────────────────────────────────*/
@keyframes typing {
    0%,
    60%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-10px);
    }
}

#aiChatWrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45px;
    height: 45px;
    isolation: isolate;

    box-shadow: 0 0 4px 1px rgba(0, 0, 0, .3);
    border-radius: 12px;
}
#aiChatButton {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 12px;
    border: none;
    background: hsla(0, 0%, 100%, 1) url('/static/images/ico-chat.svg') no-repeat center center;
    transition: all .2s;
}
#aiChatButton:hover {
    background-color: #eee;
    transform: scale(1.05);
}

#messageBadge {
    position: absolute;
    top: calc(0.25rem * -1.5);
    right: calc(0.25rem * -1.5);
    display: flex;
    height: 1.3rem;
    width: 1.3rem;
    color: #fff;
    font-size: 0.75rem;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: oklch(63.7% 0.237 25.331);
}

.chat-overlay {
    pointer-events: none;
    position: absolute;
    display: block;
    inset: 0;
    z-index: 40;
    top: 70px;
    left: 410px;
    bottom: 15px;
    width: 384px;
}

.chat-overlay > * {
    pointer-events: auto;
}

.chat-overlay[hidden] .chat-panel {
    transform: translateX(100%);
}

.chat-overlay .chat-panel {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 16px;
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: transform 0.3s ease;
}

.chat-overlay .chat-panel .chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 16px 8px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.chat-overlay .chat-panel .chat-header .chat-title h3 {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.chat-overlay .chat-panel .chat-header .chat-title p {
    font-size: 14px;
    color: #6b7280;
}

.chat-overlay .chat-panel .chat-header .close-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    transition: background-color 0.2s;
    cursor: pointer;
    justify-items: center;
}

.chat-overlay .chat-panel .chat-header .close-btn:hover {
    background: #f3f4f6;
}

.chat-overlay .chat-panel .chat-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.chat-overlay .chat-panel .chat-content .messages-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-overlay .chat-panel .chat-content .messages-area .empty-state {
    text-align: center;
    color: #6b7280;
}

.chat-overlay .chat-panel .chat-content .messages-area .empty-state .ico-map-marker {
    display: inline-block;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    background: url(/static/images/ico-map-marker.svg) no-repeat center center;
    background-size: contain;
}

.chat-overlay .chat-panel .chat-content .messages-area .empty-state .empty-subtitle {
    font-size: 14px;
    margin-top: 8px;
}

.chat-overlay .chat-panel .chat-content .messages-area .message {
    display: flex;
}

.chat-overlay .chat-panel .chat-content .messages-area .message.user {
    justify-content: flex-end;
}

.chat-overlay .chat-panel .chat-content .messages-area .message.user .message-bubble {
    background: #3b82f6;
    color: white;
}

.chat-overlay .chat-panel .chat-content .messages-area .message.ai {
    justify-content: flex-start;
}

.chat-overlay .chat-panel .chat-content .messages-area .message.ai .message-bubble {
    color: #111827;
    background: #f3f4f6;
    transition: box-shadow .2s ease;
}

.chat-overlay .chat-panel .chat-content .messages-area .message.ai .message-bubble[data-type="visual"]:hover {
    cursor: pointer;
    border: 1px solid rgba(52, 152, 219, 0.3);
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
}

.chat-overlay .chat-panel .chat-content .messages-area .message .message-bubble {
    display: flex;
    gap: 8px;
    flex-direction: column;
    max-width: 90%;
    padding: 12px 16px;
    border-radius: 16px;
    position: relative;
}

.chat-overlay .chat-panel .chat-content .messages-area .message .message-text {
    line-height: 1.5;
    font-size: 14px;
    font-weight: normal;
    white-space: pre-wrap;
}

.chat-overlay .chat-panel .chat-content .messages-area .message .message-replies {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.message-replies .quick-reply {
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #111827;
    cursor: pointer;
    padding: 8px 10px;
    width: 100%;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.message-replies .quick-reply:hover {
    background-color: #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.message-replies .quick-reply:active {
    background-color: #d1d5db;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message-replies .quick-reply:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-overlay .chat-panel .chat-content .messages-area .message .message-visualization {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.message-visualization .visualization {
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #111827;
    cursor: pointer;
    padding: 8px 10px;
    width: 100%;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.message-visualization .visualization:hover {
    background-color: #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.message-visualization .visualization:active {
    background-color: #d1d5db;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message-visualization .visualization:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-overlay .chat-panel .chat-content .messages-area .message .message-time {
    opacity: 0.7;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
}

.chat-overlay .chat-panel .chat-content .typing-indicator {
    display: none;
    margin: 16px 0;
    justify-content: flex-start;
}

.chat-overlay .chat-panel .chat-content .typing-indicator.show {
    display: flex;
}

.chat-overlay .chat-panel .chat-content .typing-indicator .typing-dots {
    background: #f3f4f6;
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    gap: 4px;
}

.chat-overlay .chat-panel .chat-content .typing-indicator .typing-dots span {
    width: 8px;
    height: 8px;
    background: #9ca3af;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.chat-overlay .chat-panel .chat-content .typing-indicator .typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-overlay .chat-panel .chat-content .typing-indicator .typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

.chat-overlay .chat-panel .chat-input-area {
    border-top: 1px solid #e5e7eb;
    padding: 16px;
}

.chat-overlay .chat-panel .chat-input-area .chat-form {
    display: flex;
    gap: 8px;
}

.chat-overlay .chat-panel .chat-input-area .chat-form label {
    flex: 1;
}

.chat-overlay .chat-panel .chat-input-area .chat-form .chat-input {
    width: 100%;
    height: 100%;
    padding: 8px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 20px;
    outline: none;
    transition: border-color 0.2s;
}

.chat-overlay .chat-panel .chat-input-area .chat-form .chat-input:focus {
    border-color: #3b82f6;
}

.chat-overlay .chat-panel .chat-input-area .chat-form .send-btn {
    align-self: center;
    position: relative;
    width: 40px;
    height: 40px;
    color: white;
    background: #3b82f6;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
}

.chat-overlay .chat-panel .chat-input-area .chat-form .send-btn:hover {
    background: #2563eb;
}

.chat-overlay .chat-panel .chat-input-area .chat-form .send-btn .ico-message {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    background: url(/static/images/ico-message.svg) no-repeat center center;
    background-size: contain;
    transform: translate(-50%, -50%);
}

.chat-overlay .chat-panel .chat-input-area .chat-form .send-btn[data-type="waiting"] .ico-message {
    width: 16px;
    height: 16px;
    background: url(/static/images/ico-rect.svg) no-repeat center center;
    background-size: contain;
}

.chat-overlay .chat-panel .chat-input-area .chat-quick-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chat-overlay .chat-panel .chat-input-area .chat-quick-actions .chat-quick-btn {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-overlay .chat-panel .chat-input-area .chat-quick-actions .chat-quick-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}