/************************************************
 * 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;
    outline: none; /* 진입 시 모달 포커스(a11y)는 잡되 박스 표시는 안 함 */
    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: 16px;
    padding: 20px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.gtp_head_ico {
    flex: none;
    width: 56px;
    height: 56px;
    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: 12px;
    font-weight: 400;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .8);
}
.gtp_head_title {
    font-size: 21px;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
}
.gtp_head_sub {
    font-size: 13px;
    color: rgba(143, 233, 255);
}
.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: 15px;
    font-weight: 400;
    letter-spacing: .05em;
    color: rgba(255, 255, 255);
}
.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: 18px;
    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: 15px;
    font-weight: 400;
    color: rgb(255 255 255);
}
.gtp_card_sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .8);
}
.gtp_badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 7px 2px 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .18);
    font-size: 11px;
    font-weight: 300;
    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: 17px;
    font-weight: 600;
    color: #fff;
}
.gtp_p_sub {
    font-size: 12px;
    color: rgba(255, 255, 255, .8);
}
.gtp_p_lytit {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 15px 0 9px;
    font-size: 13px;
    font-weight: 400;
    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: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255);
}
.gtp_p_scopetit span {
    color: rgba(255, 255, 255, .8);
}
.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: 13px;
    font-weight: 400;
    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: 13px;
    color: rgba(255, 255, 255, .8);
    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: 13px;
    font-weight: 400;
    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, .7);
    font-weight: 500;
}
.gtp_skip {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
    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, .8) 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_coach_ok:focus-visible,
.gtp_coach_guide:focus-visible {
    outline: 2px solid #7fd4e0;
    outline-offset: 2px;
}
/* 하단 플로팅의 포커스 표시는 **래퍼(알약 전체)** 에 그린다.
   안쪽 버튼에 걸면 본체만 감싸 「반쪽만 선택된」 모양이 된다(사용자 지적 2026-09-23).
   모달을 닫을 때 close() 가 연 요소로 포커스를 되돌리므로(_lastFocus.focus()) 이 링은 자주 보인다.
   ※ .gtp_hide_x 는 원래 포커스 목록에 없어 표시가 아예 없었다 — 래퍼 링으로 함께 해결(규칙_코딩 §0.13).
   ※ :has() 는 구형 브라우저 지원이 불확실해 :focus-within 을 쓴다. */
.gtp_fab_wrap:focus-within,
.gtp_bar_wrap:focus-within {
    outline: 2px solid #7fd4e0;
    outline-offset: 2px;
}
.gtp_fab:focus,
.gtp_bar:focus,
.gtp_hide_x:focus {
    outline: none;   /* 개별 링은 끄고 래퍼 링 하나만 남긴다 */
}
.gtp_hide_x:focus-visible { color: #fff; }   /* 둘 중 무엇이 잡혔는지 구분되게 */

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

/* ===== 지도 위: 테마 선택 버튼(FAB) ===== */
.gtp_fab,
.gtp_fab * {
    box-sizing: border-box;
}
/* 하단 플로팅(테마 선택 FAB / 컴팩트 바) 래퍼 — 위치는 래퍼가 잡고, 안에 본체 + 닫기(X) 를 나란히 둔다.
   본체가 <button> 이라 그 안에 X 버튼을 넣을 수 없어 형제 구조로 바꿨다(2026-09-23). */
.gtp_fab_wrap,
.gtp_bar_wrap {
    position: absolute;
    z-index: 10000; /* 지도/기존 하단 컨트롤 위, 모달 딤(1000000) 아래 → 모달 열리면 자연히 가려짐 */
    left: 50%;
    bottom: 50px;   /* 하단 중앙 (샘플 기준). 하단 축척바(약 34px) 위로 */
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    /* 알약 외형(배경·테두리·그림자·라운드)은 본체가 아니라 래퍼가 갖는다 —
       본체와 「닫기」를 한 덩어리로 보이게 하려는 것(디자이너 2026-09-23).
       따로 두면 높이가 52px 대 26px 로 갈려 작은 알약이 떠 보인다(실측). */
    border-radius: 99px;
    background: rgba(10, 28, 55, .95);
    border: 1px solid rgba(255, 255, 255, .22); /* 컴팩트 바는 JS 가 테마색으로 덮어쓴다 */
    box-shadow: 0 10px 28px rgba(0, 0, 0, .42);
}
/* 닫기 — 「닫기 ✕」 알약형 (디자이너 2026-09-23 : X 앞에 글자 넣기).
   색·테두리는 옆 본체 바(.gtp_fab/.gtp_bar)와 같은 값을 써서 한 벌로 보이게 한다. */
.gtp_hide_x {
    flex: none;
    align-self: stretch;   /* 본체와 같은 높이 → 클릭 영역이 알약 전체에 걸린다 */
    padding: 0 16px 0 0;   /* 좌측 간격은 ::before 구분선의 margin-right 가 만든다 */
    display: flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: none;      /* 알약 외형은 래퍼가 갖는다 */
    color: rgba(255, 255, 255, .72);
    font-size: 12px;       /* 디자이너 기준 : 12px 미만 금지 */
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}
/* 앞 구분선 — 바 내부 구분선(.gtp_bar_div)과 똑같은 값(1px · 높이 14px · rgba(255,255,255,.16)).
   「원클릭 종합정보 | 켜진 레이어 | 내 주변 | ⇄ 테마 변경」 사이에 있는 것과 같은 선이어야 한다
   (디자이너 2026-09-23 : 다른 칸엔 있는데 테마변경↔닫기 사이만 없다). */
.gtp_hide_x::before {
    content: '';
    width: 1px;
    height: 14px;
    margin-right: 9px;   /* 좌측(본체 padding-right 9px)과 같은 값 — 구분선이 한쪽에 붙지 않게 */
    background: rgba(255, 255, 255, .16);
}
.gtp_hide_x > span { font-size: 15px; line-height: 1; }   /* ✕ 만 조금 크게 */
.gtp_hide_x:hover { color: #fff; }

.gtp_fab {display: flex; align-items: center; gap: 9px; padding: 10px 20px 10px 12px; border: 0; background: none; 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: 15px; font-weight: 700; line-height: 1.5; color: #fff; white-space: nowrap;}
.gtp_fab_t2 {font-size: 11px; font-weight: 400; line-height: 1.15; color: rgba(255, 255, 255, .80); white-space: nowrap;}

/* ===== 지도 위: 컴팩트 바 (테마 적용 후) ===== */
.gtp_bar,
.gtp_bar * {
    box-sizing: border-box;
}
.gtp_bar {display: flex; align-items: center; gap: 9px; padding: 7px 20px 7px 9px; border: 0; background: none; 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: 15px; font-weight: 700; color: #fff; white-space: nowrap;}
.gtp_bar_cnt {font-size: 13px; 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: 12px; font-weight: 500; 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: 13px; 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_radius_label {
    padding: 4px 13px;
    border-radius: 99px;
    background: #22b8cf;
    border: 1.5px solid #fff;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.2px;
    white-space: nowrap;
    pointer-events: none; /* 지도 조작 방해 안 함 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
    font-family: inherit;
}

/* 내 위치 마커 (말풍선 위 + 물방울 핀 아래, 핀 끝이 위치를 가리킴) */
.gtp_me_marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none; /* 지도 드래그 방해 안 함 */
}
.gtp_me_pin {
    width: 20px;
    height: 20px;
    border-radius: 50% 50% 50% 0; /* 물방울: 세 모서리 둥글게, 한 모서리 뾰족 */
    transform: rotate(-45deg);    /* 뾰족한 끝이 아래(내 위치)를 향하도록 좌로 90° 회전 (0731 요청) */
    background: #22b8cf;
    border: 2.5px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.gtp_me_bubble {
    padding: 4px 12px;
    border-radius: 99px;
    background: rgba(10, 28, 55, .96);
    border: 1.5px solid #22b8cf;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.2px;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}

/* 반경 변경 확인 팝업 */
.gtp_me_confirm {
    display: none; /* JS 가 flex 로 표시 */
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    border-radius: 12px;
    background: rgba(10, 28, 55, .97);
    border: 1px solid rgba(34, 184, 207, .6);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
    white-space: nowrap;
    font-family: inherit;
}
.gtp_me_confirm_t {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.gtp_me_confirm_t em {
    font-style: normal;
    font-weight: 800;
    color: #7fe0ee;
}
.gtp_me_ok,
.gtp_me_cancel {
    font-family: inherit;
    font-size: 12px;
    border-radius: 8px;
    cursor: pointer;
    padding: 7px 13px;
}
.gtp_me_ok {
    font-weight: 700;
    color: #fff;
    background: #2f80d6;
    border: none;
}
.gtp_me_cancel {
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
}
.gtp_me_ok:focus-visible,
.gtp_me_cancel:focus-visible {
    outline: 2px solid #7fe0ee;
    outline-offset: 2px;
}

/* ===== 지도 위: 시작 코치마크 ===== */
.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_mbar,
    .gtp_bar_wrap,
    .gtp_fab_wrap {
        box-sizing: border-box;
        width: max-content;
        max-width: min(90%, 90vw);
        min-width: 0;
        border-radius: 20px;
        justify-content: center;
    }
    .gtp_bar,
    .gtp_fab {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        justify-content: center;
        padding: 10px 8px;
    }
    .gtp_bar,
    .gtp_mbar {
        flex-wrap: nowrap;
        gap: 4px;
        text-align: center;
    }
    .gtp_bar_ico,
    .gtp_mbar_ico,
    .gtp_fab_ico {
        flex-shrink: 0;
    }
    .gtp_bar_div,
    .gtp_mbar_div {
        display: none;
    }
    .gtp_bar_nm,
    .gtp_bar_scope,
    .gtp_bar_change,
    .gtp_mbar_nm,
    .gtp_fab_txt {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.4;
    }
    .gtp_bar_nm {
        max-width: 6em;
        font-size: 13px;
    }
    .gtp_bar_scope {
        max-width: 7em;
        padding: 2px 4px;
        word-break: break-all;
    }
    .gtp_bar_change {
        display: block;
        max-width: 4em;
        font-size: 12px;
    }
    .gtp_bar_cnt,
    .gtp_mbar_cnt {
        flex-shrink: 0;
        white-space: nowrap;
        line-height: 1.4;
        font-size: 12px;
    }
    .gtp_bar_cnt em::before,
    .gtp_mbar_cnt em::before {
        content: '\A';
        white-space: pre;
    }
    .gtp_fab_txt {
        flex: 0 1 auto;
    }
    .gtp_fab_t1,
    .gtp_fab_t2 {
        white-space: normal;
    }
    /* 모달: 세로 스택 + 전체 스크롤 */
    .gtp_modal {
        height: auto;
        max-height: 90vh;
    }
    /* 헤더: 액션 버튼(지도 바로 보기 / 닫기)을 제목 위로 배치 (0731 요청) */
    .gtp_head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .gtp_head_act {
        order: -1;                 /* 버튼 행을 제목 위로 */
        justify-content: flex-end; /* 우측 정렬 유지 */
    }
    .gtp_head_txt {
        white-space: normal;       /* 우측 짤림 방지: 줄바꿈 허용 */
        word-break: keep-all;
    }
    /* 푸터: 좁은 화면에서 '다음부터 이 화면 건너뛰기' 가 잘리지 않게 줄바꿈 */
    .gtp_foot {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .gtp_skip {
        margin-left: 0;            /* auto 해제 */
        width: 100%;               /* 다음 줄 전체폭으로 내림 */
        justify-content: flex-end; /* 우측 정렬 유지 */
        white-space: normal;
    }
    .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);
    }
}