/* /resources/css/gis/gis-region-detail.css */
/*
 * 예측지도 — 지역 상세 정보 패널 (gis-region-detail.js)
 * 출처: vworld-demo static/css/style.css 를 기능별로 나눈 것. 규칙 본문은 원본 그대로이고,
 * FRPS 에서 고친 곳은 "FRPS 보정" 주석을 단다.
 */

/* ============================================================================
 * 지역 상세 정보 패널 (도킹형, 지도 오른쪽)
 * 영역 클릭 시 열리며, 패널 왼쪽 경계에 딱 붙어 하나의 덩어리처럼 보이는
 * 손잡이(.region-detail-tab)를 눌러 접었다 펼 수 있다. 손잡이는 패널과 같은
 * 배경색·테두리를 쓰고 패널 쪽 테두리는 없애서(border-right:none) 이어붙인
 * 것처럼 보이게 하고, 그림자도 패널 그림자와 같은 방향(왼쪽)으로만 줘서 별개로
 * 떠 있는 느낌이 나지 않게 했다. transform 하나로 두 상태를 오가서 무겁지 않게
 * 움직인다. 지금은 기능(열기/닫기/접기·펼치기)만 구현한 상태라 본문
 * (.region-detail-body)은 비워두었고, 콘텐츠 구성은 디자인 시안을 확정한 뒤
 * 채울 예정이다.
 * ============================================================================ */
.region-detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    z-index: 970; /* .compare-panel(960)보다 위 */
    transform: translateX(0);
    transition: transform 0.25s ease;
    pointer-events: none; /* 패널 바깥 투명 영역은 지도 조작을 막지 않음 */
}

.region-detail-panel.is-collapsed {
    /* 손잡이가 패널 폭(360px) 안쪽에 완전히 붙어있는 형태라, 패널 전체를 자기
     * 폭만큼 오른쪽으로 밀어내도 손잡이는 항상 화면 안에 그대로 남는다
     * (탭 전용 left 보정이 따로 필요 없음). */
    transform: translateX(100%);
}

.region-detail-tab {
    position: absolute;
    top: 50%;
    left: -20px; /* 패널 왼쪽 테두리에 정확히 맞닿도록 — 겹치거나 뜨지 않게 */
    transform: translateY(-50%);
    width: 20px;
    height: 56px;
    border: 1px solid #dde4ec;
    border-right: none; /* 패널과 맞닿는 면은 테두리를 없애 하나로 이어붙인 것처럼 보이게 */
    border-radius: 10px 0 0 10px; /* 바깥쪽(지도 방향)만 둥글게, 안쪽은 패널의 각진 모서리와 맞춤 */
    background: #eef2f7; /* 그립 손잡이 톤(연회색) */
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.10); /* 패널 그림자(-4px 0 16px)와 같은 방향 */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    pointer-events: auto;
    transition: background-color 0.15s ease;
}

.region-detail-tab:hover {
    background: #e2e8f0;
}

/* 화살표(›/‹) 대신 三 모양 그립 라인 3개 — 접힘/펼침 상태와 무관하게 항상 같은 모양 */
.region-detail-tab .grip-line {
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: #97a3b8;
}

.region-detail-content {
    width: 100%;
    height: 100%;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

.region-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid #e2e8f0;
}

.region-detail-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.region-detail-name {
    font-size: 17px;
    font-weight: 700;
    color: #1f2430;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.region-detail-type {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 2px 8px;
}

/* 헤더 오른쪽 아이콘 버튼 묶음 (관심지역 별 + 닫기)
   예전에는 별(☆ 글자)이 지역명 옆에 있고 title 속성의 브라우저 기본 툴팁이 별 밖으로 떴다.
   지금은 같은 모양의 32px 아이콘 버튼 두 개로 묶어 지역명 길이와 상관없이 위치가 고정되고,
   설명은 버튼 아래 패널 안쪽에만 뜨는 말풍선(.region-detail-tip)으로 보여준다.
   버튼이 헤더 높이를 키우지 않도록 위아래 음수 마진으로 헤더 패딩 안에 겹쳐 앉히고,
   오른쪽도 버튼 여백만큼 당겨서 닫기 아이콘이 예전 × 위치와 비슷하게 오도록 한다. */
.region-detail-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin: -7px -8px -7px 0;
}

.region-detail-icon-btn {
    position: relative; /* 말풍선(.region-detail-tip) 위치 기준 */
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.region-detail-icon-btn:hover {
    background: #f1f5f9;
    color: #475569;
}

.region-detail-icon-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.region-detail-icon {
    display: block;
    width: 18px;
    height: 18px;
}

.region-detail-icon.icon-star path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.region-detail-icon.icon-close path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* 관심지역에 등록된 상태(is-on, gis-favorites.js에서 토글): 노란색으로 채운 별 */
.region-detail-favorite-btn.is-on {
    color: #f59e0b;
}

.region-detail-favorite-btn.is-on .icon-star path {
    fill: currentColor;
}

.region-detail-favorite-btn.is-on:hover {
    background: #fef3c7;
    color: #d97706;
}

/* 버튼 설명 말풍선. 버튼 오른쪽 끝에 맞춰 아래로 띄워서 항상 패널 안쪽에만 뜨게 한다.
   마우스를 잠깐(0.35초) 머물렀을 때만 나타나고, 벗어나면 바로 사라진다. */
.region-detail-tip {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1;
    padding: 5px 8px;
    border-radius: 6px;
    background: #1f2937;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.region-detail-icon-btn:hover .region-detail-tip,
.region-detail-icon-btn:focus-visible .region-detail-tip {
    opacity: 1;
    transform: none;
    transition-delay: 0.35s;
}

.region-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
}

.region-detail-empty {
    margin-top: 24px;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
}