/* /resources/css/gis/gis-layout.css */
/*
 * 예측지도 — 화면 틀(헤더 아래 지도 전체) · 지도 · 우하단 버튼 · 축척바 · 지도 위 라벨
 * 출처: vworld-demo static/css/style.css 를 기능별로 나눈 것. 규칙 본문은 원본 그대로이고,
 * FRPS 에서 고친 곳은 "FRPS 보정" 주석을 단다.
 */

/* 글꼴 — 원본 body 가 "Pretendard" 를 맨 앞에 쓰는데, 지도 화면은 portal-common 을 싣지 않아
 * @font-face 가 없다. 같은 로컬 파일을 가리켜 둔다 (FRPS 보정) */
@font-face{font-family:Pretendard;src:url('../../vendor/fonts/PretendardGOVVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* ----------------------------------------------------------------------------
 * 화면 틀 (FRPS 보정 — project map-layout.css 를 바탕으로 다시 씀)
 * 원본은 header 64px 을 빼는 고정 높이(calc(100vh - 64px))였다. 포털 헤더는 높이가
 * 화면 폭마다 달라서, 세로 flex 로 "헤더 · 도구줄을 뺀 나머지 전부"를 지도가 갖게 한다.
 * 푸터는 두지 않는다.
 * ---------------------------------------------------------------------------- */
.prediction-map-page {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    color: #1f2430;
    background: #f5f6f8;
}

:where(.prediction-map-page) *,
:where(.prediction-map-page) *::before,
:where(.prediction-map-page) *::after {
    box-sizing: border-box;
}

/* 원본은 hidden 속성을 브라우저 기본값에만 맡겼다. 패널에 display 를 준 규칙이 생겨도
 * 숨김이 풀리지 않게 못박는다 (FRPS 보정) */
:where(.prediction-map-page) [hidden] {
    display: none !important;
}

/* 지도 도구줄 — 화면 제목 · 관심지역 칩 (원본의 어두운 header 자리) */
.prediction-map-page > .map-toolbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    min-height: 44px;
    padding: 8px 24px;
    background: #f5f8fb;
    color: #263747;
    border-bottom: 1px solid #dce2e9;
}

.prediction-map-page > .map-toolbar h1 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.prediction-map-page > main {
    flex: 1;
    min-height: 0;
    display: flex;
    position: relative;
    /* 지도 위 요소들의 z-index(900~1000)를 이 안에 가둔다 — 헤더 드롭다운(1100)이 지도 위로 온다 */
    isolation: isolate;
}

@media (max-width: 900px) {
    .portal-shell .portal-menu.is-open { max-height: 55dvh; overflow-y: auto; }
    .prediction-map-page > .map-toolbar { padding: 6px 16px; }
}

/* 원본의 전역 button 기본값. 포털 헤더 버튼에 번지지 않게 지도 영역·튜토리얼로 범위를 좁혔다.
 * :where() 라 우선순위는 원본(button 한 단계)과 같다 — .map-btn 같은 개별 규칙이 그대로 이긴다 (FRPS 보정) */
:where(.prediction-map-page #map-section, #tutorialRoot) button {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

:where(.prediction-map-page #map-section, #tutorialRoot) button:hover {
    background: #1d4ed8;
}

#map-section {
    flex: 1;
    position: relative;
    /* overflow:hidden이 없으면, 오른쪽에 도킹된 지역 상세 패널이 접힐 때
     * translateX(100%)로 자기 폭만큼 화면 밖으로 이동하면서 페이지 전체의
     * 스크롤 가능 영역을 넓혀버려 열고 닫을 때마다 스크롤바가 깜빡였다.
     * 지도 영역 자체를 기준으로 그 바깥은 항상 잘라내도록 고정. */
    overflow: hidden;
}

#vmap {
    width: 100%;
    height: 100%;
    background: #e5e7eb;
}

.map-btn-panel {
    position: absolute;
    bottom: 60px;
    right: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: right 0.25s ease; /* 지역 상세 패널이 열리고 닫힐 때 자연스럽게 비켜나도록 */
}

/* 지역 상세 패널(.region-detail-panel)이 펼쳐져 있을 때는 지도 우하단 버튼이 패널에
 * 가려지므로 왼쪽으로 밀어준다. 접혀서 탭만 보일 때는 탭 폭만큼만 살짝 비켜준다.
 * 탭이 패널 경계에 절반 걸쳐 있는 플로팅 손잡이 형태라 실제 필요한 여백은 이보다
 * 작지만, 넉넉하게 잡아둔 값(펼침 400px, 접힘 40px)이라 그대로 둬도 안전하다. */
#map-section.region-detail-open .map-btn-panel {
    right: 400px;
}

#map-section.region-detail-collapsed .map-btn-panel {
    right: 40px;
}

.map-btn {
    width: 40px;
    height: 40px;
    background: #fff;
    border: none;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.map-btn:hover {
    background: #f2f2f2;
}

.map-btn:active {
    background: #e5e5e5;
}

#vmap .ol-scale-line {
    position: absolute;
    left: auto;
    right: 64px; /* mapButtonPanel의 right(12px) + 버튼 폭(40px) + 간격(12px) */
    bottom: 60px; /* mapButtonPanel과 동일한 bottom 값 */
    transition: right 0.25s ease; /* mapButtonPanel과 같은 타이밍으로 함께 비켜나도록 */
}

/* mapButtonPanel이 지역 상세 패널을 피해 이동한 값(400 / 40)에 버튼 폭(40)+간격(12)을
 * 더한 값 — mapButtonPanel 바로 왼쪽에 붙는 관계를 그대로 유지한다. */
#map-section.region-detail-open #vmap .ol-scale-line {
    right: 452px;
}

#map-section.region-detail-collapsed #vmap .ol-scale-line {
    right: 92px;
}

#vmap .ol-scale-line-inner {
    width: 64px !important;
}

.user-location-label {
    position: relative; /* absolute → relative: 이제 OL이 관리하는 anchor의 자식일 뿐이라 */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #2563eb;
    white-space: nowrap;
    pointer-events: none;
    animation: user-location-bob 1.4s ease-in-out infinite;
}

.user-location-label::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -9px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #e2e8f0;
}

.user-location-label::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ffffff;
}

@keyframes user-location-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.hover-name-label {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #1f2430;
    white-space: nowrap;
    pointer-events: none;
    display: none; /* 기본은 숨김, hover 시 JS로 보이게 함 */
}

.stat-value-label {
    display: block; /* .hover-name-label의 기본값(none)을 덮어써서 상시 노출 */
    text-align: center;
    padding: 1px 16px;     /* 높이를 낮춰서 더 납작한 타원형으로 보이게 함 */
    min-width: 30px;
    font-size: 12px;
    line-height: 1.4;
    border-width: 2px;     /* 등급 색 테두리가 잘 보이도록 기본(1px)보다 두껍게 */
    border-radius: 999px;  /* 이미 최댓값(반원형) — 높이가 줄면서 더 타원에 가깝게 보임 */
    /* border-color는 위해등급별 색(RISK_LEVELS[].stroke)을 JS에서 인라인으로 지정함 */
}