/* ============================================
   vsmap_up - Visual Map Board Skin
   비주얼 맵 게시판 스킨 (RA0 Edition)
   vsanchor_up 스타일 레이아웃 적용
   ============================================ */

/* === vsmap 전용 변수 === */
:root {
    /* 레이아웃 */
    --vsmap-sidebar-width: 15rem;
    --vsmap-min-height: 37.5rem;

    /* 배경 */
    --vsmap-bg: var(--container-bg-color);
    --vsmap-modal-bg: var(--card-bg-color);
    --vsmap-panel-bg: var(--card-bg-color);

    /* 테두리 */
    --vsmap-border: var(--container-border-color);
    --vsmap-border-light: var(--card-border-color, #444);

    /* 텍스트 */
    --vsmap-text: var(--text-primary, #eee);
    --vsmap-text-muted: var(--text-muted, #888);

    /* 강조색 */
    --vsmap-accent: var(--accent-color, #4ecdc4);
    --vsmap-error: var(--error-color, #e74c3c);

    /* 라벨 타입별 색상 */
    --vsmap-label-continent: #8B4513;
    --vsmap-label-region: #2E7D32;
    --vsmap-label-village: #1565C0;
    --vsmap-label-poi: #6A1B9A;
}

/* === 메인 컨테이너 (일반 페이지 레이아웃) === */
.vsmap-container {
    display: flex;
    min-height: var(--vsmap-min-height);
    background: var(--vsmap-bg);
    border-radius: .75rem;
    overflow: hidden;
    border: .0625rem solid var(--vsmap-border);
    margin-bottom: 2.5rem;
}

/* === 사이드바 네비게이션 === */
.vsmap-sidebar {
    width: var(--vsmap-sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: fit-content;
    max-height: 100vh;
    overflow-y: auto;
}

.vsmap-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem .9375rem;
}

.vsmap-title {
    font-size: 17.6px;
    font-weight: 600;
    color: var(--vsmap-text);
    font-family: var(--title-font-family, inherit);
}

.vsmap-title i {
    color: var(--vsmap-accent);
    margin-right: .5rem;
}

.vsmap-btn-settings {
    background: transparent;
    border: none;
    color: var(--vsmap-text-muted);
    cursor: pointer;
    padding: .375rem;
    border-radius: .375rem;
    transition: all 0.2s;
}

.vsmap-btn-settings:hover {
    background: rgba(255,255,255,0.1);
    color: var(--vsmap-text);
}

/* 사이드바 섹션 */
.vsmap-sidebar-section {
    padding: .9375rem;
}

.vsmap-section-title {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--vsmap-text-muted);
    margin-bottom: .625rem;
    letter-spacing: .0313rem;
}

/* 필터 버튼 목록 */
.vsmap-filter-list {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.vsmap-filter-btn {
    display: block;
    width: 100%;
    padding: .625rem .75rem;
    background: rgba(255,255,255,0.05);
    color: var(--vsmap-text-muted);
    border: .0625rem solid transparent;
    border-radius: .375rem;
    cursor: pointer;
    font-size: 13.6px;
    text-align: left;
    transition: all 0.2s;
}

.vsmap-filter-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--vsmap-text);
    border-color: var(--vsmap-border);
}

.vsmap-filter-btn.filter-active {
    background: var(--vsmap-accent);
    color: #000;
    font-weight: 500;
    border-color: var(--vsmap-accent);
}

/* 범례 */
.vsmap-legend {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.vsmap-legend-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    color: var(--vsmap-text-muted);
    font-size: 13.6px;
}

.vsmap-legend-color {
    width: .875rem;
    height: .875rem;
    border-radius: .25rem;
    flex-shrink: 0;
}

.vsmap-legend-color.continent { background: rgba(139, 69, 19, 0.7); border: .0625rem solid #FFD700; }
.vsmap-legend-color.region { background: rgba(46, 125, 50, 0.7); border: .0625rem solid #90EE90; }
.vsmap-legend-color.village { background: rgba(21, 101, 192, 0.7); border: .0625rem solid #87CEEB; }
.vsmap-legend-color.poi { background: rgba(106, 27, 154, 0.7); border: .0625rem solid #DDA0DD; }
.vsmap-legend-color.custom { background: rgba(96, 96, 96, 0.7); border: .0625rem solid #999; }

/* 사이드바 푸터 */
.vsmap-sidebar-footer {
    margin-top: auto;
    padding: .9375rem;
}

.vsmap-btn-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .75rem;
    background: var(--vsmap-accent);
    color: #000;
    border: none;
    border-radius: .5rem;
    text-decoration: none;
    font-size: 14.4px;
    font-weight: 500;
    transition: all 0.2s;
}

.vsmap-btn-add:hover {
    filter: brightness(1.1);
    transform: translateY(-0.0625rem);
}

/* 모바일 토글 버튼 */
.vsmap-nav-toggle {
    display: none;
    position: fixed;
    top: 5rem;
    left: .9375rem;
    width: 2.75rem;
    height: 2.75rem;
    background: var(--vsmap-accent);
    color: #000;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 17.6px;
    z-index: 100;
    box-shadow: 0 .125rem .625rem rgba(0,0,0,0.3);
}

/* === 메인 콘텐츠 영역 === */
.vsmap-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* === 맵 뷰어 === */
.vsmap-viewer {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    overflow: auto;
}

/* 격자무늬 패턴 */
.vsmap-viewer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgb(0 0 0 / 3%) .0625rem, transparent .0625rem), linear-gradient(90deg, rgb(0 0 0 / 3%) .0625rem, transparent .0625rem);
    background-size: 3.75rem 3.75rem;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}

/* 비네팅 효과 (가장자리 어두워짐) */
/* .vsmap-viewer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 30%,
        rgba(0,0,0,0.3) 70%,
        rgba(0,0,0,0.7) 100%
    );
    pointer-events: none;
    z-index: 2;
} */

.vsmap-map-wrapper {
    position: relative;
    width: 100%;
    max-width: 56.25rem;
    z-index: 5;
}

.vsmap-background {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    border-radius: .5rem;
}

.vsmap-labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* === 라벨 공통 === */
.vsmap-label {
    position: absolute;
    transform: translate(-50%, 0);
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.2s ease;
    white-space: nowrap;
    z-index: 10;
}

.vsmap-label:hover {
    z-index: 100;
    transform: translate(-50%, 0) scale(1.1);
}

.vsmap-label-name {
    display: block;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 0 .1875rem #000, 0 0 .625rem rgba(50,50,50,0.7);
    line-height: 1;
    text-align: center;
    margin-top: .5rem;
}

.vsmap-label-subtitle {
    display: block;
    padding: .125rem .625rem .25rem;
    font-size: 0.75em;
    font-weight: 400;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 .1875rem #000, 0 0 .625rem rgba(50,50,50,0.7);
}

/* === 타입별 라벨 스타일 === */

/* 대륙 */
.vsmap-label[data-type-style="continent"] .vsmap-label-name {
    font-size: 22.4px;
    font-family: var(--title-font-family, inherit);
    color: #FFD700;
    background: rgba(139, 69, 19, 0.7);
    border: .125rem solid #FFD700;
    padding: .5rem 1rem;
}

/* 지역 */
.vsmap-label[data-type-style="region"] .vsmap-label-name {
    font-size: 32px;
    font-family: var(--title-font-family, inherit);
}

/* 마을 */
.vsmap-label[data-type-style="village"] .vsmap-label-name {
    font-size: 14.4px;
    color: #87CEEB;
    background: rgba(21, 101, 192, 0.7);
    border: .0625rem solid #87CEEB;
}

/* 명소/POI */
.vsmap-label[data-type-style="poi"] .vsmap-label-name {
    font-size: 12.8px;
    color: #DDA0DD;
    background: rgba(106, 27, 154, 0.7);
    border: .0625rem solid #DDA0DD;
}

/* 커스텀 */
.vsmap-label[data-type-style="custom"] .vsmap-label-name {
    font-size: 13.6px;
    color: #F5F5F5;
    background: rgba(96, 96, 96, 0.7);
    border: .0625rem solid #999;
}

/* 라벨 마커 */
.vsmap-label-marker {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .5rem;
    height: .5rem;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 .375rem currentColor;
}

.vsmap-label[data-type-style="continent"] .vsmap-label-marker {
    display: none;
}

/* === 상세 패널 (플로팅) === */
.vsmap-detail-panel {
    position: fixed;
    width: 300px;
    max-width: 90vw;
    max-height: 50vh;
    background: var(--vsmap-panel-bg);
    border: .0625rem solid var(--vsmap-border);
    border-radius: .5rem;
    box-shadow: 0 .25rem 1.25rem rgba(0,0,0,0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: all 0.15s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.vsmap-detail-panel.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* 화살표 */
.vsmap-detail-panel::before {
    content: '';
    position: absolute;
    top: 1rem;
    width: .625rem;
    height: .625rem;
    background: var(--vsmap-bg);
    border: .0625rem solid var(--vsmap-border);
    transform: rotate(45deg);
}

.vsmap-detail-panel.arrow-left::before {
    left: -0.375rem;
    border-right: none;
    border-top: none;
}

.vsmap-detail-panel.arrow-right::before {
    right: -0.375rem;
    border-left: none;
    border-bottom: none;
}

/* 헤더 */
.vsmap-detail-header {
    display: flex;
    justify-content: space-between;
    padding: .625rem .75rem 0rem;
    gap: .3125rem;
    align-items: center;
}

.vsmap-detail-title-wrap {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex: 1;
    min-width: 0;
}

.vsmap-detail-type-badge {
    font-size: 10.4px;
    padding: .125rem .3125rem;
    border-radius: .1875rem;
    background: rgba(255,255,255,0.15);
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

.vsmap-detail-title {
    font-family: var(--title-font-family, inherit);
    font-size: 17.6px;
    color: var(--vsmap-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vsmap-detail-subtitle {
    font-size: 12.8px;
    color: var(--vsmap-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vsmap-detail-subtitle:empty {
    display: none;
}

/* 버튼 그룹 */
.vsmap-detail-btns {
    display: flex;
    align-items: center;
    gap: .125rem;
    flex-shrink: 0;
}

.vsmap-detail-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: transparent;
    border: none;
    border-radius: .25rem;
    color: var(--vsmap-text-muted);
    cursor: pointer;
    font-size: 11.2px;
    text-decoration: none;
    transition: all 0.15s;
}

.vsmap-detail-icon-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--vsmap-text);
}

.vsmap-detail-icon-btn.delete:hover {
    background: rgba(231, 76, 60, 0.2);
    color: var(--vsmap-error);
}

/* 내용 */
.vsmap-detail-content {
    padding: 5px 10px;
    overflow-y: auto;
    flex: 1;
}

.vsmap-detail-content .ra0-content {
    text-align: justify;
    color: var(--vsmap-text);
    line-height: 1.6;
    font-size: 0.85rem;
}

.vsmap-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: .375rem;
    margin: .5rem 0;
}

.vsmap-detail-parent {
    padding: .5rem .75rem;
    background: rgba(255,255,255,0.03);
    border-top: .0625rem solid var(--vsmap-border-light);
    font-size: 12.8px;
}

.vsmap-detail-parent a {
    color: var(--vsmap-accent);
    text-decoration: none;
}

.vsmap-detail-parent a:hover {
    text-decoration: underline;
}

/* === 빈 상태 === */
.vsmap-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.25rem;
    text-align: center;
    color: var(--vsmap-text-muted);
    flex: 1;
}

.vsmap-empty-icon {
    font-size: 64px;
    color: var(--vsmap-border);
    margin-bottom: 1.25rem;
}

.vsmap-empty h3 {
    color: var(--vsmap-text);
    margin: 0 0 .625rem;
}

.vsmap-empty p {
    margin: 0;
    font-size: 15.2px;
}

/* === 모달 공통 === */
.vsmap-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.vsmap-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.vsmap-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 31.25rem;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--vsmap-modal-bg);
    border: .0625rem solid var(--vsmap-border-light);
    border-radius: .75rem;
    box-shadow: 0 .625rem 2.5rem rgba(0,0,0,0.5);
    z-index: 2001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    overflow: hidden;
}

.vsmap-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.vsmap-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    background: rgba(0,0,0,0.2);
    border-bottom: .0625rem solid var(--vsmap-border-light);
}

.vsmap-modal-header h3 {
    margin: 0;
    font-size: 19.2px;
    color: var(--vsmap-text);
}

.vsmap-modal-header h3 i {
    color: var(--vsmap-accent);
    margin-right: .5rem;
}

.vsmap-modal-close {
    background: none;
    border: none;
    color: var(--vsmap-text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: .3125rem .625rem;
    line-height: 1;
}

.vsmap-modal-close:hover {
    color: var(--vsmap-text);
}

.vsmap-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(90vh - 4.375rem);
}

/* 설정 프리뷰 */
.vsmap-settings-preview {
    margin-bottom: 1.5625rem;
    padding-bottom: 1.25rem;
    border-bottom: .0625rem solid var(--vsmap-border-light);
}

.vsmap-settings-preview label {
    display: block;
    font-weight: 500;
    color: var(--vsmap-text);
    margin-bottom: .625rem;
}

.vsmap-settings-preview img {
    width: 100%;
    max-height: 12.5rem;
    object-fit: contain;
    border-radius: .5rem;
    background: rgba(0,0,0,0.3);
    margin-bottom: .625rem;
}

.no-map-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    background: rgba(0,0,0,0.2);
    border: .125rem dashed var(--vsmap-border);
    border-radius: .5rem;
    color: var(--vsmap-text-muted);
}

.no-map-preview i {
    font-size: 32px;
    margin-bottom: .625rem;
}

.btn-remove-map {
    width: 100%;
    padding: .625rem;
    background: var(--vsmap-error);
    color: #fff;
    border: none;
    border-radius: .375rem;
    cursor: pointer;
    font-size: 14.4px;
    transition: all 0.2s;
}

.btn-remove-map:hover {
    filter: brightness(1.1);
}

/* 설정 그룹 */
.vsmap-settings-group {
    margin-bottom: 1.25rem;
}

.vsmap-settings-group label {
    display: block;
    font-weight: 500;
    color: var(--vsmap-text);
    margin-bottom: .625rem;
}

.vsmap-settings-group label i {
    color: var(--vsmap-accent);
    margin-right: .375rem;
}

.vsmap-file-upload {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: .625rem;
}

.btn-file-select {
    padding: .625rem 1.25rem;
    background: rgba(255,255,255,0.1);
    color: var(--vsmap-text);
    border: .0625rem solid var(--vsmap-border);
    border-radius: .375rem;
    cursor: pointer;
    font-size: 14.4px;
    white-space: nowrap;
}

.btn-file-select:hover {
    background: rgba(255,255,255,0.15);
}

.file-name {
    flex: 1;
    font-size: 14.4px;
    color: var(--vsmap-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-upload {
    width: 100%;
    padding: .75rem;
    background: var(--vsmap-accent);
    color: #000;
    border: none;
    border-radius: .375rem;
    cursor: pointer;
    font-size: 15.2px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-upload:disabled {
    background: rgba(255,255,255,0.1);
    color: var(--vsmap-text-muted);
    cursor: not-allowed;
}

.btn-upload:not(:disabled):hover {
    filter: brightness(1.1);
}

.vsmap-url-input {
    display: flex;
    gap: .625rem;
}

.vsmap-url-input input {
    flex: 1;
    padding: .75rem .9375rem;
    background: rgba(0,0,0,0.3);
    border: .0625rem solid var(--vsmap-border);
    border-radius: .375rem;
    color: var(--vsmap-text);
    font-size: 15.2px;
}

.vsmap-url-input input:focus {
    outline: none;
    border-color: var(--vsmap-accent);
}

.btn-save-url {
    padding: .75rem 1.25rem;
    background: var(--vsmap-accent);
    color: #000;
    border: none;
    border-radius: .375rem;
    cursor: pointer;
    font-size: 15.2px;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-save-url:hover {
    filter: brightness(1.1);
}

.btn-save-url:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* === 글쓰기 폼 === */
.vsmap-write-container {
    position: relative;
    width: 100%;
    max-width: 87.5rem;
    margin: 0 auto;
    padding: 1.25rem;
    background: var(--vsmap-bg);
    border-radius: .75rem;
}

.vsmap-editor {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem;
}

.vsmap-editor-canvas {
    flex: 1;
    border: .125rem dashed var(--vsmap-border);
    border-radius: .5rem;
    overflow: auto;
    max-height: 80vh;
}

.vsmap-editor-map-wrapper {
    position: relative;
    width: 56.25rem;
    height: 56.25rem;
    cursor: crosshair;
}

.vsmap-editor-map-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
    user-select: none;
    -webkit-user-drag: none;
}

.vsmap-editor-marker {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--vsmap-accent);
    border: .1875rem solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 .125rem .625rem rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 100;
}

.vsmap-editor-marker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .375rem;
    height: .375rem;
    background: #fff;
    border-radius: 50%;
}

.vsmap-editor-form {
    width: 21.875rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.vsmap-form-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.vsmap-form-group label {
    font-weight: 500;
    color: var(--vsmap-text);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.vsmap-form-group label i {
    color: var(--vsmap-accent);
}

.vsmap-form-group input[type="text"], .vsmap-form-group input[type="number"], .vsmap-form-group select {
    padding: .75rem .9375rem;
    background: var(--form-bg-color);
    border: .0625rem solid var(--form-border-color);
    border-radius: .375rem;
    color: var(--form-text-color);
    font-size: 16px;
}

.vsmap-form-group input:focus,
.vsmap-form-group select:focus {
    outline: none;
    border-color: var(--vsmap-accent);
}

.vsmap-coords-display {
    display: flex;
    gap: .625rem;
}

.vsmap-coords-display input {
    flex: 1;
    text-align: center;
    background: rgba(78, 205, 196, 0.1);
    border-color: var(--vsmap-accent);
}

.vsmap-form-help {
    font-size: 13.6px;
    color: var(--vsmap-text-muted);
}

/* === 반응형 === */
@media screen and (max-width: 56.25rem) {
    .vsmap-container {
        --vsmap-sidebar-width: 12.5rem;
    }

    .vsmap-map-wrapper {
        max-width: 100%;
    }
}

@media screen and (max-width: 48rem) {
    .vsmap-container {
        flex-direction: column;
    }

    .vsmap-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 17.5rem;
        height: 100vh;
        max-height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 200;
        background: var(--vsmap-bg);
    }

    .vsmap-sidebar.open {
        transform: translateX(0);
    }

    .vsmap-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vsmap-main {
        width: 100%;
    }

    .vsmap-viewer {
        padding: .9375rem;
        min-height: 25rem;
    }

    .vsmap-detail-panel {
        width: 90vw;
        max-height: 60vh;
    }

    .vsmap-label[data-type-style="continent"] .vsmap-label-name {
        font-size: 17.6px;
        padding: .375rem .75rem;
    }

    .vsmap-label[data-type-style="region"] .vsmap-label-name {
        font-size: 16px;
    }

    .vsmap-editor {
        flex-direction: column;
    }

    .vsmap-editor-form {
        width: 100%;
    }
}