213 lines
4.5 KiB
CSS
213 lines
4.5 KiB
CSS
#mapArea {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stage {
|
|
--map-inset: 7.5%;
|
|
aspect-ratio: 0.72/1;
|
|
width: 100%;
|
|
max-height: 100%;
|
|
position: relative;
|
|
margin: auto;
|
|
}
|
|
|
|
.bgLayer {
|
|
position: absolute;
|
|
inset: var(--map-inset);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1;
|
|
width: calc(100% - var(--map-inset) * 2);
|
|
height: calc(100% - var(--map-inset) * 2);
|
|
background-image: url("/images/region_map_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: center center;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: crisp-edges;
|
|
image-rendering: pixelated;
|
|
opacity: 0.7;
|
|
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.02));
|
|
pointer-events: none;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.svgLayer {
|
|
position: absolute;
|
|
inset: var(--map-inset);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
width: calc(100% - var(--map-inset) * 2);
|
|
height: calc(100% - var(--map-inset) * 2);
|
|
}
|
|
|
|
.svgLayer > svg {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: crisp-edges;
|
|
shape-rendering: geometricPrecision;
|
|
}
|
|
|
|
/* SVG 스타일을 위한 컨테이너 */
|
|
.svgContainer :global(svg) :global(path) {
|
|
fill: rgba(0, 150, 255, 0.2) !important;
|
|
stroke: #0066cc;
|
|
stroke-width: 1;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.svgContainer :global(svg) :global(.cls-1) {
|
|
fill: rgba(0, 150, 255, 0.2) !important;
|
|
stroke: #0066cc;
|
|
stroke-width: 1;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.svgContainer :global(svg) :global(.basin) {
|
|
opacity: 0;
|
|
pointer-events: all;
|
|
transition: opacity 0.15s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.svgContainer :global(svg) :global(.basin.active),
|
|
.svgContainer :global(svg) :global(.basin:hover) {
|
|
opacity: 1;
|
|
}
|
|
|
|
.svgContainer :global(svg) :global(.basin) :global(path),
|
|
.svgContainer :global(svg) :global(.basin) :global(polygon),
|
|
.svgContainer :global(svg) :global(.basin) :global(polyline) {
|
|
fill: rgba(0, 209, 209, 0.5);
|
|
stroke: #399AC3;
|
|
stroke-width: 1.3;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
/* 팝업 + 배지 */
|
|
.popup {
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 150px;
|
|
min-width: 220px;
|
|
background: #fff;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 10px;
|
|
box-shadow:
|
|
0 12px 24px rgba(0, 0, 0, 0.18),
|
|
0 2px 0 rgba(0, 0, 0, 0.05);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translate(-50%, -8px) scale(0.98);
|
|
transition:
|
|
opacity 0.12s,
|
|
visibility 0.12s,
|
|
transform 0.12s;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
.popup.show {
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
transform: translate(-50%, -12px) scale(1) !important;
|
|
}
|
|
|
|
.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.popup .head {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
background: #d1ecfa;
|
|
border-bottom: 1px solid #c8e4f3;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
}
|
|
.popup .head > div {
|
|
padding: 10px 12px;
|
|
text-align: center;
|
|
}
|
|
.popup .body {
|
|
padding: 6px 10px 8px;
|
|
}
|
|
.popup td {
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid #eef2f7;
|
|
font-size: 14px;
|
|
}
|
|
.popup .arrow {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -8px;
|
|
transform: translateX(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 10px solid transparent;
|
|
border-right: 10px solid transparent;
|
|
border-top: 10px solid #fff;
|
|
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.1));
|
|
}
|
|
.badge {
|
|
position: absolute;
|
|
z-index: 9;
|
|
padding: 6px 10px;
|
|
border-radius: 8px;
|
|
background: #1e40af;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.12s, visibility 0.12s;
|
|
}
|
|
.badge.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* 권역 라벨 */
|
|
.labelsLayer {
|
|
position: absolute;
|
|
inset: var(--map-inset);
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.basinLabel {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
background: #ffffffee;
|
|
border: 2px solid #d0d0d0;
|
|
white-space: nowrap;
|
|
min-width: 60px;
|
|
text-align: center;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
.basinLabel.active {
|
|
background: #006bf8;
|
|
color: #fff;
|
|
border-color: #96c3ff;
|
|
box-shadow: 0 4px 12px rgba(0, 107, 248, 0.3);
|
|
}
|