/************************************************
 * Infomation : 국가 통합물관리정보플랫폼 (2차) : GIS
 * FileName   : gis_sub.css
 * Desc       : 진입 테마선택 모달 (dashBoardThemePop) 전용 스타일
 *              - 모든 클래스는 gtp_ prefix 로 격리 (gis.css 와 충돌 방지)
 *              - 테마 색상은 --ac / --bd / --tint / --glow / --txt CSS 변수로 주입
 * Update     : 2026.07.03
************************************************/

/* ===== 오버레이(딤) / 모달 프레임 ===== */
.gtp_dim {
    position: fixed;
    inset: 0;
    z-index: 1000000; /* GIS 헤더(999999)·패널(99999) 위로 덮음. 사용안내(.gis_guide_wrap 9999999)는 위에 유지 */
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(6, 18, 35, .74);
}
.gtp_dim * {
    box-sizing: border-box;
    line-height: 1.25; /* 전역 line-height 상속으로 높이 부푸는 것 방지 */
}
.gtp_modal {
    display: flex;
    flex-direction: column;
    width: min(880px, 94vw);
    height: 566px;
    max-height: 94vh;
    overflow: hidden;
    background: #0e2748;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
    color: #fff;
    font-family: inherit;
    animation: gtpPop .2s ease-out;
}
@keyframes gtpPop {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===== 헤더 ===== */
.gtp_head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.gtp_head_ico {
    flex: none;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(150deg, #1ca8c4, #2f80d6);
    color: #fff;
    font-size: 23px;
}
.gtp_head_txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gtp_head_label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .5);
}
.gtp_head_title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.gtp_head_sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .5);
}
.gtp_head_act {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.gtp_head_link {
    padding: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, .4);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.gtp_close_x {
    flex: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .85);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

/* ===== 본문(좌: 테마그리드 / 우: 패널) ===== */
.gtp_body {
    display: flex;
    flex: 1;
    min-height: 0;
}
.gtp_left {
    flex: 1;
    padding: 18px 20px;
    overflow: auto;
}
.gtp_left_tit {
    margin: 2px 2px 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .45);
}
.gtp_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ===== 테마 카드 ===== */
.gtp_card {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    text-align: left;
    border-radius: 12px;
    border: 1.5px solid var(--bd);
    background: var(--tint);
    box-shadow: 0 0 0 3px var(--glow);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}
.gtp_card_ico {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--ac);
    color: #fff;
    font-size: 22px;
}
.gtp_card_txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.gtp_card_nm {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
}
.gtp_card_sub {
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
}
.gtp_badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .18);
    font-size: 9px;
    font-weight: 700;
    color: #fff;
}

/* ===== 우측 패널 ===== */
.gtp_panel {
    width: 330px;
    height: 100%;
    padding: 14px 20px; /* 상하 14px: 566px 안에 스크롤 없이 수용 (실측) */
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    border-left: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .22);
}
.gtp_p_head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gtp_p_ico {
    flex: none;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    font-size: 23px;
}
.gtp_p_nm {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.gtp_p_sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .55);
}
.gtp_p_lytit {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 15px 0 9px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}
.gtp_p_lytit em {
    font-style: normal;
    color: var(--ac);
}
.gtp_dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ac);
}
.gtp_p_lylist {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gtp_ly {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 13px;
    border-radius: 10px;
    border: 1px solid var(--bd);
    background: var(--tint);
}
/* 토글 스위치 모양 (표시 전용 — 항상 ON. 클릭 토글 기능은 비활성) */
.gtp_toggle {
    position: relative;
    flex: none;
    width: 32px;
    height: 18px;
    border-radius: 99px;
    background: var(--ac);
}
.gtp_toggle::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
}
.gtp_ly_nm {
    font-size: 13.5px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

/* ===== 시작 범위 ===== */
.gtp_p_scope {
    margin-top: 15px;
}
.gtp_p_scopetit {
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .5);
}
.gtp_p_scopetit span {
    color: rgba(255, 255, 255, .35);
}
.gtp_scope_row {
    display: flex;
    gap: 5px;
}
.gtp_scope {
    flex: 1;
    padding: 9px 3px;
    border-radius: 9px;
    border: 1.5px solid var(--bd);
    background: var(--tint);
    color: var(--txt);
    font-size: 11.5px;
    font-weight: 600;
    text-align: center; /* 전역 button{text-align:left} 덮어씀 */
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.gtp_sido_sel {
    margin-top: 8px;
    width: 100%;
    padding: 10px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: #0c2342;
    color: #fff;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
}

/* ===== 시작 버튼(CTA) ===== */
.gtp_cta {
    margin-top: 15px;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    text-align: center; /* 전역 button{text-align:left} 덮어씀 */
    cursor: pointer;
    font-family: inherit;
}

/* ===== 푸터 ===== */
.gtp_foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .18);
}
.gtp_foot_q {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
}
.gtp_foot_btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.gtp_foot_bico {
    display: flex;
    font-size: 14px;
    color: #7fd4e0;
}
.gtp_foot_vico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e0603a;
    color: #fff;
    font-size: 9px;
}
.gtp_foot_time {
    color: rgba(255, 255, 255, .45);
    font-weight: 500;
}
.gtp_skip {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
    white-space: nowrap;
}
/* 네이티브 checkbox 는 접근성 유지한 채 시각적으로만 숨김 (키보드/스크린리더 지원) */
.gtp_skip_chk {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.gtp_skip_box {
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, .3);
    background: transparent;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
.gtp_skip_chk:focus-visible ~ .gtp_skip_box {
    outline: 2px solid #7fd4e0;
    outline-offset: 2px;
}
.gtp_skip_chk:checked ~ .gtp_skip_box {
    border-color: #2f80d6;
    background: #2f80d6;
}
.gtp_skip_chk:checked ~ .gtp_skip_box::after {
    content: '✓';
}

/* ===== 스크롤바 커스텀 (우측 패널·좌측 카드영역·모바일 본문) ===== */
.gtp_panel,
.gtp_left,
.gtp_body {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.gtp_panel::-webkit-scrollbar,
.gtp_left::-webkit-scrollbar,
.gtp_body::-webkit-scrollbar {
    width: 6px;
}
.gtp_panel::-webkit-scrollbar-track,
.gtp_left::-webkit-scrollbar-track,
.gtp_body::-webkit-scrollbar-track {
    margin: 4px 0;
    background: transparent;
}
.gtp_panel::-webkit-scrollbar-thumb,
.gtp_left::-webkit-scrollbar-thumb,
.gtp_body::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: rgba(255, 255, 255, .2);
}
.gtp_panel::-webkit-scrollbar-thumb:hover,
.gtp_left::-webkit-scrollbar-thumb:hover,
.gtp_body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .35);
}

/* ===== 접근성: 키보드 포커스 시각화 (WCAG 2.4.7) =====
   :focus-visible 사용 → 마우스 클릭 땐 안 뜨고 키보드 이동 시에만 링 표시 */
.gtp_card:focus-visible,
.gtp_scope:focus-visible,
.gtp_cta:focus-visible,
.gtp_head_link:focus-visible,
.gtp_close_x:focus-visible,
.gtp_sido_sel:focus-visible,
.gtp_foot_btn:focus-visible,
.gtp_fab:focus-visible,
.gtp_bar:focus-visible,
.gtp_coach_ok:focus-visible,
.gtp_coach_guide:focus-visible {
    outline: 2px solid #7fd4e0;
    outline-offset: 2px;
}

/* ===== 공통 아이콘(svg) ===== */
.gtp_modal svg {
    display: block;
}

/* ===== 지도 위: 테마 선택 버튼(FAB) ===== */
.gtp_fab,
.gtp_fab * {
    box-sizing: border-box;
}
.gtp_fab {
    position: absolute;
    z-index: 10000; /* 지도/기존 하단 컨트롤 위, 모달 딤(1000000) 아래 → 모달 열리면 자연히 가려짐 */
    left: 50%;
    bottom: 50px; /* 하단 중앙 (샘플 기준). 하단 축척바(약 34px) 위로 */
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px 10px 12px;
    border-radius: 99px;
    background: rgba(10, 28, 55, .95);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .42);
    cursor: pointer;
    font-family: inherit;
}
.gtp_fab_ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(150deg, #1ca8c4, #2f80d6);
    color: #fff;
    font-size: 16px;
}
.gtp_fab_ico svg {
    display: block;
}
.gtp_fab_txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-start;
}
.gtp_fab_t1 {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    white-space: nowrap;
}
.gtp_fab_t2 {
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.15;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap;
}

/* ===== 지도 위: 컴팩트 바 (테마 적용 후) ===== */
.gtp_bar,
.gtp_bar * {
    box-sizing: border-box;
}
.gtp_bar {
    position: absolute;
    z-index: 10000;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
    display: flex; /* JS 가 display:flex/none 로 토글 */
    align-items: center;
    gap: 9px;
    padding: 7px 14px 7px 9px;
    border-radius: 99px;
    background: rgba(10, 28, 55, .95);
    border: 1px solid rgba(255, 255, 255, .22); /* 실제 색은 JS 가 테마색으로 */
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
    cursor: pointer;
    font-family: inherit;
}
.gtp_bar_ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
}
.gtp_bar_ico svg {
    display: block;
}
.gtp_bar_nm {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
.gtp_bar_cnt {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}
.gtp_bar_scope {
    padding: 2px 9px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .12);
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.gtp_bar_div {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .16);
}
.gtp_bar_change {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* ===== 지도 위: 측정항목별 중립 상태 바 (표시 전용) ===== */
.gtp_mbar,
.gtp_mbar * {
    box-sizing: border-box;
}
.gtp_mbar {
    position: absolute;
    z-index: 10000;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
    display: flex; /* JS 가 display:flex/none 로 토글 */
    align-items: center;
    gap: 11px;
    padding: 8px 12px 8px 15px;
    border-radius: 99px;
    background: rgba(10, 28, 55, .95);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
    font-family: inherit;
}
.gtp_mbar_ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 14px;
}
.gtp_mbar_nm {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
.gtp_mbar_div {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .16);
}
.gtp_mbar_cnt {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}
.gtp_mbar_cnt em {
    font-style: normal;
}

/* ===== 지도 위: 시작 코치마크 ===== */
.gtp_coach,
.gtp_coach * {
    box-sizing: border-box;
}
.gtp_coach {
    position: absolute;
    z-index: 10001;
    left: 50%;
    bottom: 100px; /* 컴팩트 바(50px) 위 */
    transform: translateX(-50%);
    width: 300px;
    padding: 15px 16px;
    border-radius: 13px;
    background: #0e2748;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
    font-family: inherit;
}
.gtp_coach_t {
    margin-bottom: 5px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}
.gtp_coach_d {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .62);
}
.gtp_coach_d b {
    font-weight: 600;
    color: #fff;
}
.gtp_coach_btns {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.gtp_coach_guide {
    padding: 0;
    border: none;
    background: transparent;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .62);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.gtp_coach_ok {
    margin-left: auto;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: #2f80d6;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}
.gtp_coach_arrow {
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%) rotate(45deg);
    width: 13px;
    height: 13px;
    background: #0e2748;
    border-right: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

/* ===== 반응형(모바일 ≤768px, 프로젝트 기준 브레이크포인트) ===== */
@media screen and (max-width: 768px) {
    /* 모달: 세로 스택 + 전체 스크롤 */
    .gtp_modal {
        height: auto;
        max-height: 90vh;
    }
    .gtp_body {
        flex-direction: column;
        overflow-y: auto; /* 스택 시 본문 전체가 스크롤 */
    }
    .gtp_left,
    .gtp_panel {
        overflow: visible; /* 개별 스크롤 해제 → 본문 한 덩어리로 스크롤 */
    }
    .gtp_grid {
        grid-template-columns: 1fr; /* 모바일: 카드 1열 (글자·배지 겹침 방지) */
    }
    .gtp_panel {
        width: 100%;
        height: auto;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }
}