/* ================================================
   sgp_guide.css
   3D 지도 사용가이드 - 모의 UI 컴포넌트 및 레이블 스타일
   (idtGuide.jsp 전용 / 인라인 style 사용 금지)
   ================================================ */

/* -----------------------------------------------
   g-content 이전/다음 버튼: 슬라이드 위치에 따라 하나씩만 표시
   - 첫 슬라이드 활성 → 이전(prev) 숨김
   - 마지막 슬라이드 활성 → 다음(next) 숨김
   ----------------------------------------------- */
.guide-swiper:has(.swiper-slide:first-child.swiper-slide-active) [data-action="prev"] {
    display: none;
}

.guide-swiper:has(.swiper-slide:last-child.swiper-slide-active) [data-action="next"] {
    display: none;
}



/* slide1: guide01 - 통합검색 패널 (좌측) */
.g-img.guide01.idt-pos {
    left: 5px;
    top: 93px;
    right: auto;
}

/* slide1: guide02 - 위치 네비게이션 (우측 상단, 검색패널 옆) */
.g-img.guide02.idt-pos {
    right: 380px;
    top: 8px;
    left: auto;
}

/* slide2: guide04 - 지도 라벨/종류 토글바 (좌측 상단) */
.g-img.guide04.idt-pos {
    left: 5px;
    top: 8px;
    right: auto;
}

/* slide2: guide05 - 우측 툴바 */
.g-img.guide05.idt-pos {
    top: 95px;
    right: 8px;
}

/* -----------------------------------------------
   가이드 모의 UI 공통
   ----------------------------------------------- */

/* guide01 - 통합검색 패널 미리보기 */
.guide-search-preview {
    pointer-events: none;
    width: 344px;
    background: var(--krds-color-high-contrast-gray-100, #ffffff);
    border: 3.5px solid #5454ba;
    border-radius: 8px;
    overflow: visible;
    position: relative;
}

.guide-search-preview .krds-tab-area {
    gap: 0;
}

.guide-search-preview .sidebar-title.noline {
    padding: 1.0rem 1rem;
}

.guide-search-preview .conts-inner {
    padding: 0 1.0rem 1.6rem;
    width: 100%;
}

.guide-search-preview .list-subtab > li:first-child .btn-subtab {
    background-color: var(--krds-color-light-secondary-70) !important;
    color: var(--krds-color-light-gray-0) !important;
}


.guide-location-preview {
    pointer-events: none;
    position: relative;
    overflow: visible;
}

.guide-location-preview .filter_region {
    pointer-events: none;
    display: flex;
    gap: 8px;
}

.guide-location-preview .filter_region ul {
    padding-inline: 16px;
    display: flex;
    height: 32px;
    background-color: #fff;
    border-radius: var(--krds-radius-medium1, 6px);
    align-items: center;
    gap: 36px;
    border: 3.5px solid #5454ba;
}

.guide-location-preview .filter_region ul li {
    font-size: var(--krds-pc-font-size-body-xsmall, 1.2rem);
    position: relative;
    color: var(--krds-light-color-text-subtle, #6b7684);
}

.guide-location-preview .filter_region ul li:not(:last-child)::before {
    content: "";
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: url("/static/sgp_thm/images/common/ico/ico_step.svg") no-repeat center;
}

.guide-location-preview .filter_region ul li:last-child {
    color: var(--krds-light-color-text-basic, #191e29);
    font-weight: 700;
}

.guide-location-preview select {
    pointer-events: none;
    border: none;
    font-size: var(--krds-pc-font-size-body-xsmall, 1.2rem);
    background: transparent;
    color: inherit;
}

/* guide04 - 지도라벨/종류 토글바 미리보기 */
.guide-maptype-preview {
    pointer-events: none;
    display: flex;
    flex-direction: row;
    gap: 38px;
    background-color: rgba(20, 20, 40, 0.92);
    border: 3.5px solid #5454ba;
    border-radius: 6px;
    position: relative;
    overflow: visible;
}

/* guide04 - 토글 그룹 (guide-toggle-group / guide-toggle-item) */
.guide-toggle-group {
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: visible;
}

.guide-toggle-item {
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 0;
}

.guide-toggle-item input[type="checkbox"] {
    display: none;
}

.guide-toggle-item label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: default;
    white-space: nowrap;
}

.guide-toggle-item.checked label {
    color: #ffffff;
    font-weight: 600;
}

/* 토글 트랙 */
.guide-toggle-track {
    display: inline-flex;
    align-items: center;
    width: 34px;
    height: 18px;
    border-radius: 9px;
    background-color: rgba(255, 255, 255, 0.2);
    position: relative;
    flex-shrink: 0;
}

.guide-toggle-track i {
    position: absolute;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #888;
    font-style: normal;
}

.guide-toggle-track.on {
    background-color: #5a67d8;
}

.guide-toggle-track.on i {
    left: auto;
    right: 2px;
    background-color: #ffffff;
}

/* guide-maptype-preview 내 krds-form-toggle-switch 아이콘 오버라이드 */
.guide-maptype-preview .krds-form-toggle-switch.medium [type=checkbox] ~ label .switch-toggle > i::before {
    display: inline-flex;
    width: var(--krds-form-toggle-switch--icon-size-medium);
    height: var(--krds-form-toggle-switch--icon-size-medium);
    background-color: var(--krds-form-toggle-switch--button-color-background);
    forced-color-adjust: none;
}


/* guide-mapswitch-wrap - 지도 종류 전환 버튼 */
.guide-mapswitch-wrap {
    pointer-events: none;
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible;
}

.guide-switch-row {
    display: inline-flex;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.guide-switch-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 1.2rem;
    font-style: normal;
    color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.08);
}

.guide-switch-btn.active {
    background-color: #b84030;
    color: #ffffff;
    font-weight: 700;
}


/* guide05 - 우측 툴바 미리보기 */
.guide-toolbar-preview {
    display: flex;
    flex-direction: column;
    gap: 40px;
    pointer-events: none;
    border: 3.5px solid #5454ba;
    border-radius: 8px;
}

.guide-toolbar-preview .map_tools_list {
    overflow: visible;
}

/* ico-hq 는 hq 클래스 조합 시 아이콘이 숨겨지는 경우가 있어 가이드 내에서 명시적으로 표시 */
.guide-toolbar-preview .map_tools_btn.hq.ico-hq {
    background: url(/static/sgp_thm/images/common/ico/ico-hq.svg) no-repeat center;
    background-size: 20px;
}

.guide-toolbar-preview .map_tools_tooltip {
    display: none !important;
}

/* -----------------------------------------------
   가이드 레이블 - 좌측 방향 (툴바 아이콘용)
   ----------------------------------------------- */
.guide-tool-label {
    position: absolute;
    right: calc(100% + 110px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 1.3rem;
    padding: 0.25rem 0.8rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 500;
    pointer-events: none;
    z-index: 1;
}

/* 연결선 */
.guide-tool-label::before {
    content: '';
    position: absolute;
    left: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%);
    width: 75px;
    height: 2px;
    background-image: radial-gradient(circle, rgb(255, 255, 255) 1px, transparent 1px);
    background-size: 4px 2px;
    background-repeat: repeat-x;
}

/* 화살표 */
.guide-tool-label::after {
    content: '';
    position: absolute;
    left: calc(100% + 79px);
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 9px solid rgba(255, 255, 255, 0.85);
}

/* -----------------------------------------------
   가이드 레이블 - 우측 방향 (통합검색 패널용)
   ----------------------------------------------- */
.guide-tool-label-right {
    position: absolute;
    left: calc(100% + 110px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 1.3rem;
    padding: 0.25rem 0.8rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 500;
    pointer-events: none;
    z-index: 1;
}

.guide-tool-label-right::before {
    content: '';
    position: absolute;
    right: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%);
    width: 75px;
    height: 2px;
    background-image: radial-gradient(circle, rgb(255, 255, 255) 1px, transparent 1px);
    background-size: 4px 2px;
    background-repeat: repeat-x;
}

.guide-tool-label-right::after {
    content: '';
    position: absolute;
    right: calc(100% + 79px);
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 9px solid rgba(255, 255, 255, 0.85);
}

/* top 오프셋 클래스 (기존 inline top 값 대체) */
.guide-tool-label-right.top-20 { top: 20px; transform: none; }
.guide-tool-label-right.top-65 { top: 65px; transform: none; }
.guide-tool-label-right.top-108 { top: 108px; transform: none; }

/* -----------------------------------------------
   가이드 레이블 - 하단 방향 (위치 네비용)
   ----------------------------------------------- */
.guide-tool-label-bottom {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 28px);
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 1.3rem;
    padding: 0.25rem 0.8rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 500;
    pointer-events: none;
    z-index: 1;
}

.guide-tool-label-bottom::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background-image: radial-gradient(circle, rgb(255, 255, 255) 1px, transparent 1px);
    background-size: 2px 4px;
    background-repeat: repeat-y;
}

.guide-tool-label-bottom::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 17px);
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 9px solid rgba(255, 255, 255, 0.85);
}