@import url('https://fonts.googleapis.com/css2?family=Asta+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asta+Sans:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asta+Sans:wght@700&display=swap');

/**
 * Universal Style Adapter가 지원하는 CSS 속성
 * 
 * [색상]
 * fill: #색상코드              - 텍스트/도형 채우기
 * stroke: #색상코드            - 선/텍스트 윤곽선
 * 
 * [선 스타일]
 * stroke-width: 2px            - 선 두께
 * stroke-dasharray: 5 5        - 점선 패턴
 * stroke-dashoffset: 0         - 점선 시작점
 * stroke-linecap: round        - 선 끝 (round, butt, square)
 * stroke-linejoin: round       - 선 연결 (round, miter, bevel)
 * 
 * [텍스트]
 * font-size: 14px              - 글자 크기
 * font-family: 'Arial'         - 글꼴
 * font-weight: bold            - 굵기 (normal, bold, 100-900)
 * font-style: italic           - 기울임 (normal, italic)
 * text-anchor: middle          - 정렬 (start, middle, end)
 * letter-spacing: 2px          - 글자 간격
 * 
 * [투명도]
 * opacity: 0.8                 - 전체 투명도 (0-1)
 * fill-opacity: 0.5            - 채우기 투명도
 * 
 * [특수 효과]
 * pattern: railroad-ties       - 커스텀 패턴
 * outline: #000000 8px         - 외곽선 효과
 * shadow.blur: 10              - 그림자 블러
 * shadow.color: #000000        - 그림자 색상
 * shadow.offset: 2 2           - 그림자 위치
 * 
 * [주의사항]
 * - var(--변수명) 사용 불가 (파서가 무시함)
 * - calc() 함수 사용 불가
 * - paint-order 미지원
 * - filter는 drop-shadow만 제한적 지원
 */

/* Remove default Leaflet marker styles for label icons */
.label-icon {
    background: none !important;
    border: none !important;
    z-index: 2000 !important; /* Much higher z-index to ensure labels appear above markers */
    /* Remove width/height auto to let Leaflet control sizing */
}

/* Remove transform - let Leaflet handle positioning with iconAnchor */
.label-icon > div {
    position: relative;
    display: inline-block;
    z-index: inherit;
    /* No transform needed - Leaflet will position correctly */
}

body {
    font-family: 'Asta Sans', Arial, sans-serif;
}

text {
    fill: currentColor;
    paint-order: stroke fill;
    cursor: default;
}

text:hover {
    fill: #2b99ff;
    cursor: pointer;
    pointer-events: visiblePainted;
}

.labels {
    color: white;
    stroke: black;
    stroke-width: 2px;
}

.admin1 {
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
}

.admin2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
}

.admin3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
}

.admin4 {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
}

.admin5 {
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
}

/* Labels General */

.parks {
    color: #95d395;
    stroke: #000000;
    stroke-width: 2px;
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
}

/* boundary */

/* Sharp boundary rendering */
.leaflet-overlay-pane path {
    shape-rendering: crispEdges;
    vector-effect: non-scaling-stroke;
}

/* Boundary highlight specific styles */
.boundary-highlight-fill path {
    fill: rgba(0, 0, 0, 0.1) !important;  /* Override the global fill: none */
}

.boundary-highlight-stroke path {
    fill: none !important;  /* Ensure stroke layer has no fill */
}

.boundary_highlights {
    stroke-width: 4;
    opacity: 1;
}

.layer-background {
    stroke: white;
}

.layer-foreground {
    stroke: red;
    stroke-dasharray: 2 8;
    fill: rgb(0, 0, 0);
    fill-opacity: 0.3;
}

.boundary_editor_line {
    stroke: #aaa;
    stroke-width: 1px;
    opacity: 1;
    fill: #ffd90047;
}

.boundary_country {
    stroke: #888888;
    stroke-width: 2px;
    opacity: 0.9;
}

.boundary_admin2 {
    stroke: #5f6e74;
    stroke-width: 1px;
    opacity: 0.5;
}

.boundary_admin3 {
    stroke: #7a8a90;
    stroke-width: 0.8px;
    opacity: 0.4;
}

.boundary_admin4 {
    stroke: #9caab0;
    stroke-width: 0.6px;
    opacity: 0.3;
}

/* Admin Label Styles with Zoom-based Sizing */
.admin-label {
    position: relative;
    cursor: default;
    font-family: 'Asta Sans', Arial, sans-serif;
}

/* Admin label icon centering */
.admin-label-icon {
    background: none !important;
    border: none !important;
    z-index: 2000 !important; /* Much higher z-index to ensure labels appear above markers */
}

.admin-label-icon > .admin-label {
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: inherit;
}

.admin-label:hover {
    cursor: pointer;
}

.admin-label:hover .primary-text,
.admin-label:hover .secondary-text {
    color: #2b99ff !important;
}

/* Admin label primary text */
.admin-label .primary-text {
    color: #ffffff;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    paint-order: stroke fill;
    line-height: 1;
}

/* Admin label secondary text - 85% of primary size */
.admin-label .secondary-text {
    color: #ffffff;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    paint-order: stroke fill;
    line-height: 1;
    margin-top: 2px;
}

/* Admin level 1 */
.admin-label.admin-1 .primary-text {
    font-size: 28px;
    font-weight: 700;
}
.admin-label.admin-1 .secondary-text {
    font-size: 24px; /* 85% of 28px */
    font-weight: 700;
}

/* Admin level 2 */
.admin-label.admin-2 .primary-text {
    font-size: 24px;
    font-weight: 700;
}
.admin-label.admin-2 .secondary-text {
    font-size: 24px;
    font-weight: 700;
}

/* Admin level 3 */
.admin-label.admin-3 .primary-text {
    font-size: 18px;
    font-weight: 500;
}
.admin-label.admin-3 .secondary-text {
    font-size: 18px;
    font-weight: 500;
}

/* Admin level 4 */
.admin-label.admin-4 .primary-text {
    font-size: 14px;
    font-weight: 500;
}
.admin-label.admin-4 .secondary-text {
    font-size: 14px;
    font-weight: 500;
}

/* Admin level 5 */
.admin-label.admin-5 .primary-text {
    font-size: 12px;
    font-weight: 500;
}
.admin-label.admin-5 .secondary-text {
    font-size: 10px; /* 85% of 12px */
    font-weight: 500;
}

/* Zoom-based scaling for admin labels */
/* Base zoom is 14, scale up to 1.4x at zoom 18 */
.leaflet-zoom-11 .admin-label .primary-text { font-size: calc(var(--base-size) * 0.7); }
.leaflet-zoom-11 .admin-label .secondary-text { font-size: calc(var(--secondary-size) * 0.7); }

.leaflet-zoom-12 .admin-label .primary-text { font-size: calc(var(--base-size) * 0.8); }
.leaflet-zoom-12 .admin-label .secondary-text { font-size: calc(var(--secondary-size) * 0.8); }

.leaflet-zoom-13 .admin-label .primary-text { font-size: calc(var(--base-size) * 0.9); }
.leaflet-zoom-13 .admin-label .secondary-text { font-size: calc(var(--secondary-size) * 0.9); }

.leaflet-zoom-14 .admin-label .primary-text { font-size: var(--base-size); }
.leaflet-zoom-14 .admin-label .secondary-text { font-size: var(--secondary-size); }

.leaflet-zoom-15 .admin-label .primary-text { font-size: calc(var(--base-size) * 1.1); }
.leaflet-zoom-15 .admin-label .secondary-text { font-size: calc(var(--secondary-size) * 1.1); }

.leaflet-zoom-16 .admin-label .primary-text { font-size: calc(var(--base-size) * 1.2); }
.leaflet-zoom-16 .admin-label .secondary-text { font-size: calc(var(--secondary-size) * 1.2); }

.leaflet-zoom-17 .admin-label .primary-text { font-size: calc(var(--base-size) * 1.3); }
.leaflet-zoom-17 .admin-label .secondary-text { font-size: calc(var(--secondary-size) * 1.3); }

.leaflet-zoom-18 .admin-label .primary-text { font-size: calc(var(--base-size) * 1.4); }
.leaflet-zoom-18 .admin-label .secondary-text { font-size: calc(var(--secondary-size) * 1.4); }

/* Set base sizes for each admin level */
.admin-label.admin-1 { --base-size: 28px; --secondary-size: 24px; }
.admin-label.admin-2 { --base-size: 24px; --secondary-size: 20px; }
.admin-label.admin-3 { --base-size: 18px; --secondary-size: 18px; }
.admin-label.admin-4 { --base-size: 14px; --secondary-size: 14px; }
.admin-label.admin-5 { --base-size: 12px; --secondary-size: 12px; }

/* Google Maps Marker Label Styles Info */
/* marker-label 스타일 */
.marker-label {
    position: relative;
    cursor: default;
}

.marker-label:hover {
    cursor: pointer;
}

.marker-label:hover .primary-text,
.marker-label:hover .secondary-text {
    color: #2b99ff !important;
}

/* park-label 스타일 */
.park-label {
    position: relative;
    cursor: default;
}

.park-label:hover {
    cursor: pointer;
}

.park-label:hover .primary-text,
.park-label:hover .secondary-text {
    color: #2b99ff !important;
}

/* overlay lines */
/* Overlay Line Classes (ol-) */
.ol-navpath {
    stroke: #cdd7e9;
    stroke-width: 1;
    stroke-dasharray: 6 6;
    stroke-dashoffset: 0;
    opacity: 0.6;
}
.ol-railroad {
    stroke: #000000;
    stroke-width: 4;
    pattern: railroad-ties;
}

/* HSR railroad - use both classes together */
.ol-railroad.hsr {
    stroke-width: 4;
    stroke: #e04b4b;
    stroke-dasharray: 24 24;
    stroke-linecap: butt;
}

.ol-railroad.local {
    stroke-width: 2;
    stroke: #4b4be0;
    stroke-dasharray: 4 2;
    stroke-linecap: butt;
}

.ol-railroad_private {
    fill: none;
    stroke: #000000;
    stroke-width: 1;
    opacity: 1;
    color: none;
}


/* overlay labels */
.invisible {
    display: none;
}

/* Base overlay label styles */
.overlay-label {
    --base-font-size: 14px;
    font-family: 'Asta Sans', Arial, sans-serif;
    font-size: 14px; /* CSS 변수 대신 직접 값 사용 */
    font-weight: 400;
    fill: #cdd7e9;
    stroke: #000000;
    stroke-width: 2px;
    paint-order: stroke fill;
}

.ol-label-nav {
    fill: #cdd7e9;
    stroke: #3f5583;
    stroke-width: 2px;
    font-size: 12px;
    font-family: 'Asta Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    opacity: 1;
    letter-spacing: 0;
}

.ol-label-sea {
    fill: #cdd7e9;
    stroke: #000000;
    stroke-width: 2px;
    font-size: 20px;
    font-family: 'Asta Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    opacity: 1;
    letter-spacing: 4px;
}

.ol-label-coast {
    fill: #cdd7e9;
    stroke: #000000;
    stroke-width: 2px;
    font-size: 16px;
    font-family: 'Asta Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    opacity: 1;
    letter-spacing: 2px;
}

.ol-label-strait {
    fill: #cdd7e9;
    stroke: #000000;
    stroke-width: 2px;
    font-size: 18px;
    font-family: 'Asta Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    opacity: 1;
    letter-spacing: 4px;
}

.ol-label-strait:lang(ko), .ol-label-strait:lang(td), .ol-label-strait:lang(ja), .ol-label-strait:lang(zh) {
    letter-spacing: 36px;
}

.ol-label-island {
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 2px;
    font-size: 16px;
    font-family: 'Asta Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: italic;
    opacity: 1;
    letter-spacing: 0;
}

.ol-label-river {
    fill: #cdd7e9;
    stroke: #000000;
    stroke-width: 2px;
    font-size: 14px;
    font-family: 'Asta Sans', Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 1.5px;
}

.ol-label-river.small {
    font-size: 12px;
    letter-spacing: 1.2px;
}

/* 호환성을 위한 기본 스타일들 */
.default-marker {
    fill: #3388ff;
    stroke: #ffffff;
    stroke-width: 2;
    opacity: 1;
}

.poi-marker {
    fill: #ff7800;
    stroke: #ffffff;
    stroke-width: 2;
    opacity: 0.9;
}

.default-label {
    font-size: 14px;
    font-family: Arial, sans-serif;
    fill: #333333;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linejoin: round;
}

.highlight {
    stroke: #ffff00;
    stroke-width: 4;
    filter: drop-shadow(0 0 10px #ffff00);
}

/* Icon Markers - Feature markers with icons */
/* Remove default Leaflet marker styles */
.custom-marker-feature {
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    z-index: 100 !important; /* Lower z-index than labels */
}

/* Marker positioning - icon should be at the coordinate */
.custom-marker-feature > div {
    /* No transform - positioning will be handled by iconAnchor */
    position: relative;
}

/* Main marker container */
.icon-marker-container {
    position: relative;
    display: inline-block;
    font-family: 'Asta Sans', 'Noto Sans KR', Arial, sans-serif;
    white-space: normal;
    /* No transition - immediate position updates for collision avoidance */
}

/* Icon is always centered at coordinates */
.icon-marker-icon {
    position: relative;
    display: inline-block;
}

/* Text positioning for different alignments */
.icon-marker-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Right alignment (default): text to RIGHT of icon */
.icon-marker-container.align-right .icon-marker-text {
    left: 100%;
    margin-left: 2px;
    text-align: left;
}

/* Left alignment: text to LEFT of icon with RIGHT-aligned text */
.icon-marker-container.align-left .icon-marker-text {
    right: 100%;
    margin-right: 2px;
    text-align: right;
}

/* Icon wrapper additional styles */
.icon-marker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon image styles */
.icon-marker-icon img {
    display: block;
    object-fit: contain;
}

/* Icon sizes */
.icon-marker-icon.icon-small img {
    width: 24px;
    height: 24px;
}

.icon-marker-icon.icon-medium img {
    width: 32px;
    height: 32px;
}

.icon-marker-icon.icon-large img {
    width: 48px;
    height: 48px;
}

/* Text container additional styles */
.icon-marker-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* Allow text to shrink */
    width: 120px; /* Fixed width for consistent wrapping */
    max-width: 120px; /* Maximum width for text wrapping */
    /* No transition - immediate updates for collision avoidance */
}

/* Primary text (main label) */
.icon-marker-primary {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    paint-order: stroke fill;
    line-height: 1.2;
    display: block;
    word-break: keep-all; /* Prevent breaking Korean words */
    overflow-wrap: break-word; /* Allow breaking long strings */
}

/* Secondary text (sub label) */
.icon-marker-secondary {
    font-size: 12px;
    color: #ffffff;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    paint-order: stroke fill;
    line-height: 1.2;
    display: block;
    word-break: keep-all; /* Prevent breaking Korean words */
    overflow-wrap: break-word; /* Allow breaking long strings */
}

/* Marker type specific styles */
/* Park markers - green nature theme */
.icon-marker-container.marker-type-park .icon-marker-primary,
.icon-marker-container.marker-type-park .icon-marker-secondary {
    color: #95d395;
}

/* Hover effects */
.icon-marker-container:hover .icon-marker-primary,
.icon-marker-container:hover .icon-marker-secondary {
    color: #2b99ff;
    cursor: pointer;
}

/* Emphasized state - maintains hover styles */
.marker-emphasized .icon-marker-primary,
.marker-emphasized .icon-marker-secondary {
    color: #2b99ff !important;
}

/* Cursor for marker feature */
.custom-marker-feature {
    cursor: pointer;
}

/* Text-only markers have stronger text shadow */
.icon-marker-container.text-only .icon-marker-primary,
.icon-marker-container.text-only .icon-marker-secondary {
    -webkit-text-stroke: 2.5px #000000;
    text-stroke: 2.5px #000000;
}

/* Text-only markers - position text at origin */
.icon-marker-container.text-only .icon-marker-text {
    position: relative;
    left: 0;
    right: auto;
    margin: 0;
    transform: none;
}

/* Editor preview styles - reuse marker styles */
.marker-preview {
    display: inline-flex;
    align-items: center;
    padding: 10px;
    background: #333;
    border: 1px solid #555;
    border-radius: 4px;
    margin: 10px 0;
    min-height: 50px;
    gap: 4px;
    font-family: 'Noto Sans KR', 'Asta Sans', Arial, sans-serif;
}

.marker-preview-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-preview-icon img {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    display: block;
}

.marker-preview-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.marker-preview-primary {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    paint-order: stroke fill;
    line-height: 1;
    display: block;
}

.marker-preview-secondary {
    font-size: 12px;
    color: #ffffff;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    paint-order: stroke fill;
    line-height: 1;
    display: block;
}

/* =================================================================
   LINE FEATURES STYLES
   ================================================================= */

/* Base line styles */
.map-line {
    stroke-width: 1;
    stroke-opacity: 1;
    fill: none;
    pointer-events: stroke;
}

/* Transit line styles */
.transit-line {
    stroke-width: 3;
    stroke-opacity: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Road line styles - color from data, only structure */
.road-line {
    stroke-width: 4;
    stroke-opacity: 0.8;
}

.road-line.highway {
    stroke-width: 6;
}

.road-line.main {
    stroke-width: 5;
}

.road-line.secondary {
    stroke-width: 3;
}

/* Path and trail styles - color from data */
.path-line {
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    stroke-opacity: 0.7;
}

.trail-line {
    stroke-width: 2;
    stroke-dasharray: 3, 3;
    stroke-opacity: 0.6;
}

/* Water feature styles - color from data */
.river-line {
    stroke-width: 4;
    stroke-opacity: 0.8;
}

.stream-line {
    stroke-width: 2;
    stroke-opacity: 0.7;
}

/* Boundary line styles - color from data */
.boundary-line {
    stroke-width: 2;
    stroke-dasharray: 10, 5;
    stroke-opacity: 0.7;
}

.border-line {
    stroke-width: 3;
    stroke-dasharray: 15, 10;
    stroke-opacity: 0.8;
}

/* Utility line styles - color from data */
.power-line {
    stroke-width: 2;
    stroke-dasharray: 2, 8;
    stroke-opacity: 0.6;
}

.pipeline {
    stroke-width: 3;
    stroke-dasharray: 8, 4;
    stroke-opacity: 0.7;
}

/* Line interaction states - Pure CSS control */
.map-line:hover,
.map-line.hover {
    stroke-opacity: 1 !important;
    stroke-width: 2 !important;
    cursor: pointer;
}

.map-line.selected {
    stroke-opacity: 1 !important;
    stroke-width: 5 !important;
}

/* Transit line specific states */
.transit-line:hover,
.transit-line.hover {
    stroke-width: 3 !important;
}

.transit-line.selected {
    stroke-width: 5 !important;
}

/* Road line specific states */
.road-line:hover,
.road-line.hover {
    stroke-width: 6 !important;
}

.road-line.selected {
    stroke-width: 8 !important;
}

/* Path line specific states */
.path-line:hover,
.path-line.hover {
    stroke-width: 3 !important;
}

.path-line.selected {
    stroke-width: 5 !important;
}

/* Zoom-based line width adjustments
@media (max-zoom: 12) {
    .map-line {
        stroke-width: 2;
    }
    .transit-line {
        stroke-width: 3;
    }
}

@media (min-zoom: 16) {
    .map-line {
        stroke-width: 4;
    }
    .transit-line {
        stroke-width: 6;
    }
}*/

/* =================================================================
   EDITOR LABEL STYLES
   ================================================================= */

/* Editor label marker styles */
.map-label {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    pointer-events: auto;
}

.map-label .label-text {
    color: #333;
    font-weight: bold;
    font-size: 12px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    padding: 2px 4px;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.map-label:hover .label-text {
    background: rgba(255, 255, 255, 0.9);
    color: #0074ff;
    transform: scale(1.1);
}

.map-label.selected .label-text {
    background: rgba(0, 116, 255, 0.1);
    border-color: #0074ff;
    color: #0074ff;
    font-weight: bold;
}

/* Label type specific styles */
.label-admin .label-text {
    color: #d32f2f;
    font-weight: bold;
}

.label-park .label-text {
    color: #388e3c;
}

.label-water .label-text {
    color: #1976d2;
}

.label-place .label-text {
    color: #7b1fa2;
}

.label-country .label-text {
    color: #d32f2f;
    font-size: 14px;
    font-weight: bold;
}