/* public/css/style.css v2.7 (K-Map Style Left-Panel & Toggle) */
/* =========================================================
   1. 기본 리셋 및 전체 레이아웃
   ========================================================= */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
@font-face {
    font-family: "Nanum Gothic";
    src: url("/field/fonts/NanumGothic.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}
@font-face {
    font-family: "Gmarket Sans";
    src: url("/field/fonts/GmarketSansTTFMedium.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}
@font-face {
    font-family: "Binggrae";
    src: url("/field/fonts/Binggrae.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}
:root { --main-site-font-family: "Pretendard", "Malgun Gothic", sans-serif; }
html[data-main-font-family="nanum-gothic"] { --main-site-font-family: "Nanum Gothic", "Noto Sans KR", sans-serif; }
html[data-main-font-family="gmarket-sans"] { --main-site-font-family: "Gmarket Sans", "Noto Sans KR", sans-serif; }
html[data-main-font-family="binggrae"] { --main-site-font-family: "Binggrae", "Noto Sans KR", sans-serif; }
html[data-main-font-family] body *:not(.material-symbols-outlined) { font-family: var(--main-site-font-family) !important; }
html, body { 
    margin: 0; padding: 0; height: 100%; 
    font-family: var(--main-site-font-family);
    font-size: 14px; overflow: hidden;
    display: flex; flex-direction: column; 
    background: #f8fafc;
}

.main-font-beta-card { background:#fff; border:1px solid var(--ui-violet-bd, #ddd6fe); border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(109,40,217,0.08); }
.main-font-beta-card__title { background:linear-gradient(135deg,#f5f3ff 0%,#fafafa 100%); padding:12px 15px; font-weight:900; color:#6d28d9; display:flex; align-items:center; gap:6px; border-bottom:1px solid #ddd6fe; font-size:13px; }
.main-font-beta-card__title .material-symbols-outlined { font-size:18px; }
.main-font-beta-card__body { padding:13px 15px; color:#475569; font-size:12px; line-height:1.55; }
.main-font-beta-card__body p { margin:0 0 10px; }
.main-font-options { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:7px; }
.main-font-option, .main-font-reset { font:inherit; cursor:pointer; border-radius:7px; }
.main-font-option { min-height:38px; padding:7px 5px; border:1px solid #ddd6fe; background:#fff; color:#475569; font-size:12px; font-weight:800; transition:background .15s, border-color .15s, color .15s; }
.main-font-option:hover, .main-font-option.is-selected { background:#f5f3ff; border-color:#7c3aed; color:#6d28d9; }
.main-font-option.is-selected { box-shadow:inset 0 0 0 1px #7c3aed; }
.main-font-reset { display:block; margin:9px auto 0; padding:3px 5px; border:0; background:transparent; color:#64748b; font-size:11px; text-decoration:underline; text-underline-offset:2px; }
.main-font-reset:hover { color:#334155; }
@media (max-width: 360px) { .main-font-options { grid-template-columns:1fr; } }

/* =========================================================
   2. 상단 GNB
   ========================================================= */
#global-header {
    display: flex; justify-content: space-between; align-items: center;
    height: 60px; background: #0f172a; color: white; padding: 0 25px; z-index: 3000;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.header-logo { font-size: 18px; font-weight: 900; letter-spacing: 0.5px; }
.header-logo span { color: #9db4ca; font-size: 12px; font-weight: bold; background: rgba(var(--ui-slate-rgb),0.18); padding: 2px 6px; border-radius: 4px; margin-left: 5px; vertical-align: middle; }
.header-menu { display: flex; gap: 10px; height: 100%; align-items: center; }
.menu-btn { background: transparent; border: none; color: #94a3b8; font-size: 14px; height: 100%; padding: 0 15px; cursor: pointer; transition: 0.2s; font-weight: bold; }
.menu-btn:hover { color: white; }
.menu-btn.active { color: white; border-bottom: 3px solid var(--ui-slate); }
.header-auth { display: flex; align-items: center; gap: 15px; }
.auth-btn { background: var(--ui-slate); color: white; border: none; padding: 8px 18px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: 0.2s; }
.auth-btn:hover { background: var(--ui-slate-deep); }

/* =========================================================
   3. 메인 작업 공간
   ========================================================= */
#main-workspace { flex: 1; display: flex; position: relative; width: 100%; overflow: hidden; }
#map { flex: 1; height: 100%; z-index: 0; }

/* 카카오 로드뷰 미리보기: Leaflet 지도 위 좌측 하단에만 작게 띄운다. */
#roadview-dock {
    --roadview-dock-width: 360px;
    --roadview-dock-height: 240px;
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1200;
    width: min(var(--roadview-dock-width), calc(100% - 24px));
    aspect-ratio: 3 / 2;
    height: var(--roadview-dock-height);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.7);
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.32);
}
#roadview-dock[hidden] { display: none; }
.roadview-dock__header {
    height: 34px;
    padding: 0 8px 0 11px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #f8fafc;
    font-size: 12px;
    cursor: move;
    touch-action: none;
    user-select: none;
}
.roadview-dock__actions { display: flex; align-items: center; gap: 4px; }
.roadview-dock__actions button {
    border: 0;
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
    cursor: pointer;
    font: inherit;
    padding: 5px 8px;
    font-size: 11px;
}
.roadview-dock__actions button:hover { background: rgba(148, 163, 184, 0.36); }
.roadview-dock__frame { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* 카카오 로드뷰는 컨테이너 폭이 ~700px 미만이면 파노라마가 검게 렌더링되어, iframe 내부는 항상 720x480로
   렌더링한 뒤 실제 박스 크기에 맞춰 transform: scale로 축소한다(js: applyRoadviewFrameScale). */
#roadview-dock iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 720px;
    height: 480px;
    border: 0;
    background: #0f172a;
    transform-origin: 0 0;
}
.roadview-dock__notice {
    position: absolute;
    inset: 34px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
    color: #e2e8f0;
    background: #0f172a;
    text-align: center;
    font-size: 13px;
    line-height: 1.55;
}
.roadview-dock__notice[hidden] { display: none; }
/* 헤더 맨 끝(우측상단 모서리)의 크기조절 버튼 — 대각선 줄무늬로 "모서리를 잡아 늘린다"는 느낌을 준다. */
.roadview-dock__actions button.roadview-dock__resize {
    width: 26px;
    height: 24px;
    padding: 0;
    background-color: rgba(148, 163, 184, 0.2);
    background-image: linear-gradient(45deg, transparent 40%, rgba(226, 232, 240, 0.9) 42%, rgba(226, 232, 240, 0.9) 50%, transparent 52%, transparent 61%, rgba(226, 232, 240, 0.9) 63%, rgba(226, 232, 240, 0.9) 71%, transparent 73%);
    background-repeat: no-repeat;
    background-position: center;
    cursor: nesw-resize;
    touch-action: none;
}
.roadview-dock__actions button.roadview-dock__resize:hover { background-color: rgba(148, 163, 184, 0.36); }
#roadview-dock.is-resizing, #roadview-dock.is-resizing * { cursor: nesw-resize !important; user-select: none; }
#roadview-dock.is-dragging, #roadview-dock.is-dragging * { cursor: move !important; user-select: none; }
@media (max-width: 720px) {
    #roadview-dock { --roadview-dock-width: 320px; --roadview-dock-height: 213px; left: 8px; bottom: 8px; width: min(var(--roadview-dock-width), calc(100% - 16px)); }
}
/* 메인 지도 위 로드뷰 현재 위치·방향 표시 — 은은한 후광 + 방향을 가리키는 화살표 배지 */
.rv-marker-icon { background: transparent; border: 0; }
.rv-marker { position: relative; width: 56px; height: 56px; }
.rv-marker__halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107, 79, 214, 0.3), rgba(107, 79, 214, 0) 70%);
    pointer-events: none;
}
/* 방향 회전은 후레시 빔+배지를 함께 돌린다(js: setRoadviewMarkerHeading) — navigation 아이콘 자체도 화살표 모양. */
.rv-marker__rotor { position: absolute; inset: 0; transform-origin: 50% 50%; }
.rv-marker__beam {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 48px;
    margin-left: -30px;
    margin-top: -48px;
    clip-path: polygon(50% 100%, 0% 4%, 100% 4%);
    background: linear-gradient(to top, rgba(255, 233, 150, 0.85), rgba(255, 233, 150, 0));
    pointer-events: none;
}
.rv-marker__badge {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 27px;
    height: 27px;
    margin-left: -13.5px;
    margin-top: -13.5px;
    border-radius: 50%;
    background: var(--ui-slate, #6b4fd6);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rv-marker__badge .material-symbols-outlined { font-size: 16px; color: #fff; }

/* =========================================================
   4. 네모 액션 버튼 컨테이너 (좌측)
   ========================================================= */
#action-square-container {
    position: absolute; 
    left: 25px; 
    top: 30px;  
    display: flex; flex-direction: column;
    gap: 12px; 
    align-items: flex-start;
    z-index: 3000;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.action-square-btn {
    background: white; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    box-shadow: 0 6px 15px -5px rgba(0,0,0,0.1);
    cursor: pointer; 
    color: #1e293b; 
    padding: 10px;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 5px;
    width: 88px; 
    height: 88px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 32px;
    color: inherit;
    transition: all 0.4s;
}

.action-square-btn:hover { transform: translateX(5px); box-shadow: 0 15px 30px -5px rgba(var(--ui-slate-rgb),0.25); border-color: var(--ui-slate-bd); color: var(--ui-slate); }
.btn-label { font-size: 11px; font-weight: 800; white-space: normal; line-height: 1.15; text-align: center; max-width: 72px; transition: all 0.3s; }

/* 패널 열렸을 때 우측으로 비켜주기 */
#action-square-container.has-active-btn {
    left: 372px; /* 패널 폭(360) + 여백(12) */
    gap: 8px;
}
#action-square-container.has-active-btn .action-square-btn {
    width: 55px; height: 55px; 
    border-radius: 12px; padding: 0;
    transform: none;
}
#action-square-container.has-active-btn .btn-label { opacity: 0; height: 0; margin: 0; display: none; }
#action-square-container.has-active-btn .material-symbols-outlined { font-size: 24px; margin: 0; }

.action-square-btn.active {
    background: var(--ui-slate); color: white; border-color: transparent;
    box-shadow: 0 5px 15px rgba(var(--ui-slate-rgb),0.45);
}
.action-square-btn.active .material-symbols-outlined { color: #ffffff; }

/* =========================================================
   ⭐️ 5. 사이드 패널 및 토글 밀어넣기 버튼
   ========================================================= */
#panel {
    position: absolute; top: 0; 
    left: 0; 
    width: 360px; height: 100%; 
    background: #fff; 
    border-right: 1px solid #e2e8f0; 
    display: flex; flex-direction: column;
    z-index: 4000; box-shadow: 10px 0 25px rgba(0,0,0,0.1); 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
#panel.closed { transform: translateX(-100%); box-shadow: none; } 

/* ⭐️ 중앙 밀어넣기/꺼내기 화살표 버튼 (패널 밖 독립 배치) */
#panel-toggle-btn {
    position: absolute;
    top: 50%;
    left: 360px; /* 초기에는 패널 너비만큼 우측에 위치 */
    transform: translateY(-50%);
    width: 24px;
    height: 60px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 4px 0 6px rgba(0,0,0,0.1);
    z-index: 4001; 
    color: #475569;
    transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s;
    outline: none;
}
#panel-toggle-btn:hover { background: #f8fafc; color: var(--ui-slate); }
#panel-toggle-btn .material-symbols-outlined { font-size: 20px; font-weight: bold; }

/* 패널이 닫혔을 때 버튼을 화면 왼쪽 끝(0px)으로 동기화 이동 */
body:not(.panel-open) #panel-toggle-btn { left: 0px; }


.panel-header-toolbar { display: flex; justify-content: flex-end; align-items: center; background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 6px 6px; }
#panel-content { padding: 15px; overflow-y: auto; flex: 1; }
.section-desc { font-size: 13px; color: #64748b; margin-bottom: 15px; line-height: 1.4; }

.menu-list { display: flex; flex-direction: column; gap: 8px; }
.menu-list-item { width: 100%; text-align: left; padding: 14px 16px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; font-weight: 800; color: #334155; cursor: pointer; transition: all 0.2s; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.menu-list-item:hover { background: #f8fafc; border-color: #cbd5e1; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

input[type="checkbox"]#check-index-map {
    appearance: none; -webkit-appearance: none;
    width: 22px; height: 22px;
    border: 2px solid #cbd5e1; border-radius: 6px;
    background-color: #fff; cursor: pointer;
    position: relative; transition: all 0.2s;
}
input[type="checkbox"]#check-index-map:checked { background-color: var(--ui-slate); border-color: var(--ui-slate); }
input[type="checkbox"]#check-index-map:checked::after {
    content: '✓'; position: absolute; color: white;
    font-size: 16px; font-weight: bold; left: 4px; top: -1px;
}

.menu-list-item.highlight { background: var(--ui-slate-tint); border-color: var(--ui-slate-bd); color: var(--ui-slate-deep); }
.menu-list-item.highlight:hover { background: #e3eaf1; }
.menu-list-item.locked { color: #94a3b8; background: #f1f5f9; border-style: dashed; }
.badge-pro { background: #f59e0b; color: white; font-size: 10px; padding: 3px 6px; border-radius: 4px; font-weight: 900; }

.category-stack { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
.panel-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}
.panel-card-header {
    padding: 9px 12px;
    font-weight: 900;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
}
.panel-card-body {
    padding: 10px 12px;
    font-size: 12px;
    color: #475569;
    line-height: 1.6;
    word-break: keep-all;
}
.panel-note {
    margin-bottom: 12px;
    padding: 11px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.panel-note-title {
    font-size: 12px;
    font-weight: 900;
    color: #334155;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.panel-hint {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 8px;
}
.panel-divider {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}
.panel-textarea {
    width: 100%;
    height: 60px;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
    line-height: 1.5;
}
.panel-status-box {
    margin-top: 10px;
    font-size: 11px;
    border-radius: 8px;
    padding: 9px 10px;
    line-height: 1.5;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.panel-status-box.success {
    color: #0f766e;
    background: #f0fdfa;
    border-color: #ccfbf1;
}
.panel-status-box.warn {
    color: #856404;
    background: #fff3cd;
    border-color: #ffeeba;
}
.panel-action-btn {
    width: 100%;
    margin-top: 8px;
    padding: 10px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, filter .16s ease, background .16s ease;
}
.panel-action-btn.accent-blue {
    background: var(--ui-slate-tint);
    border-color: var(--ui-slate-bd);
    color: var(--ui-slate-deep);
}
.panel-action-btn.accent-green {
    background: var(--ui-green-tint);
    border-color: var(--ui-green-bd);
    color: var(--ui-green);
}
.panel-action-btn.accent-teal {
    background: var(--ui-teal-tint);
    border-color: var(--ui-teal-bd);
    color: var(--ui-teal);
}
.panel-action-btn.accent-amber {
    background: var(--ui-amber-tint);
    border-color: var(--ui-amber-bd);
    color: var(--ui-amber);
}
.panel-action-btn.accent-purple {
    background: var(--ui-purple-tint);
    border-color: var(--ui-purple-bd);
    color: var(--ui-purple);
}
.panel-action-btn.accent-red {
    background: var(--ui-red-tint);
    border-color: var(--ui-red-bd);
    color: var(--ui-red);
}
.panel-action-btn.compact { padding: 8px; font-size: 12px; }
.panel-action-btn.accent-orange {
    background: var(--ui-amber-tint);
    border-color: var(--ui-amber-bd);
    color: var(--ui-amber);
}

/* ── 주요 실행 버튼: 채운(solid) 강조 — 패널당 CTA 하나에만 사용 ── */
.panel-action-btn.solid { color: #fff; border-color: transparent; box-shadow: 0 4px 12px -5px rgba(var(--ui-slate-rgb),0.55); }
.panel-action-btn.solid .material-symbols-outlined { color: #fff; }
.panel-action-btn.solid.accent-blue   { background: var(--ui-slate); }
.panel-action-btn.solid.accent-teal   { background: var(--ui-teal); }
.panel-action-btn.solid.accent-green  { background: var(--ui-green); }
.panel-action-btn.solid.accent-purple { background: var(--ui-purple); }
.panel-action-btn.solid.accent-amber  { background: var(--ui-amber); }
.panel-action-btn.solid:hover { filter: brightness(0.94); transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(var(--ui-slate-rgb),0.6); }
.panel-action-btn.solid:disabled { box-shadow: none; }
/* 톤 버튼 hover — 통합분석 ia-item과 동일한 피드백(색 진해짐 + 리프트 + 바이올렛 그림자) */
.panel-action-btn:not(.solid):not(:disabled):hover {
    filter: brightness(0.955);
    border-color: currentColor;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(var(--ui-slate-rgb),0.45);
}

.panel-badge.is-orange { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }

/* ── 현장사진 DXF ─────────────────────────────────────────── */
.pd-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    margin-top: 8px;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    cursor: default;
    transition: border-color 0.15s, background 0.15s;
}
.pd-drop-zone.pd-drag-over {
    border-color: #ea580c;
    background: #fff7ed;
}
.pd-photo-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.pd-empty {
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    padding: 6px 0;
}
.pd-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px;
    cursor: grab;
    user-select: none;
    transition: box-shadow 0.15s;
}
.pd-card:active { cursor: grabbing; }
.pd-card.pd-drag-over {
    border-color: #ea580c;
    box-shadow: 0 0 0 2px #fed7aa;
}
.pd-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.pd-num {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #ea580c;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pd-thumb {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.pd-del {
    margin-left: auto;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
}
.pd-del:hover { color: #ef4444; background: #fef2f2; }
.pd-caption {
    width: 100%;
    font-size: 11px;
    padding: 4px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    outline: none;
}
.pd-caption:focus { border-color: #ea580c; }
.pd-layout-toggle {
    display: flex;
    gap: 0;
    margin-top: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}
.pd-lyt-btn {
    flex: 1;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 500;
    border: none;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.pd-lyt-btn + .pd-lyt-btn { border-left: 1px solid #e2e8f0; }
.pd-lyt-btn.active {
    background: #ea580c;
    color: #fff;
}
.pd-lyt-btn:not(.active):hover { background: #fff7ed; color: #ea580c; }

:root {
    --fias-dock-width: 185px; /* [2026-06-21] 우측 패널 가로폭 축소 (220→200→185) */
    --fias-dock-gap: 12px;
    --fias-dock-bottom: 12px;
    --fias-forest-dock-right: 12px; /* [2026-06-21] work dock 제거로 우측 코너로 이동 (이전 244px) */
    --fias-floating-card-height: 360px;
}

.floating-toolbox {
    display: none;
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: var(--fias-dock-width);
    max-width: calc(100vw - 24px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15,23,42,0.10);
    padding: 0;
    backdrop-filter: blur(10px);
    font-family: "Pretendard","Malgun Gothic",sans-serif;
    z-index: 2147483000;
    overflow: hidden;
    box-sizing: border-box;
}
.floating-toolbox.is-attached {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.floating-toolbox-dock {
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: var(--fias-dock-width);
    display: flex;
    gap: 6px;
    padding: 7px;
    background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.98) 100%);
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15,23,42,0.14);
    box-sizing: border-box;
    z-index: 2147482999;
    backdrop-filter: blur(8px);
}
.floating-toolbox-dock.is-attached,
.floating-forest-dock.is-attached {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
}
.floating-forest-dock {
    position: fixed;
    right: var(--fias-forest-dock-right);
    bottom: 12px;
    width: var(--fias-dock-width);
    padding: 7px;
    background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.98) 100%);
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15,23,42,0.14);
    box-sizing: border-box;
    z-index: 2147482999;
    backdrop-filter: blur(8px);
}
.floating-forest-dock {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
/* 소나무 반출금지 추가로 버튼 6개 → 3열 2줄 배치. 아이콘 제거로 버튼 높이 축소. */
.floating-forest-dock .floating-dock-btn {
    flex: 1 1 30%;
    min-height: 0;
    height: auto;
    padding: 6px 4px;
}
.floating-dock-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 3px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #ffffff;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    line-height: 1.2;
    text-align: center;
}
.floating-dock-btn .material-symbols-outlined { font-size: 18px; }
.floating-dock-btn.active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(15,23,42,0.18);
}
.floating-dock-btn:disabled {
    opacity: 0.45;
    cursor: default;
    box-shadow: none;
}
.floating-dock-btn[data-mode="forest-function"].active { background: #0f766e; border-color: #0f766e; }
.floating-dock-btn[data-mode="forest-frtp"].active { background: #166534; border-color: #166534; }
.floating-dock-btn[data-mode="forest-koftr"].active { background: #15803d; border-color: #15803d; }
.floating-dock-btn[data-mode="forest-type"].active { background: #166534; border-color: #166534; }
.floating-dock-btn[data-mode="forest-vulnerability"].active { background: #b91c1c; border-color: #b91c1c; }
.floating-dock-btn[data-mode="forest-fuel"].active          { background: #b91c1c; border-color: #b91c1c; }
.floating-dock-btn[data-mode="current-file"].active { background: #0f766e; border-color: #0f766e; }
.floating-dock-btn[data-mode="datacenter"].active { background: #2563eb; border-color: #2563eb; }
.floating-dock-btn[data-mode="drone"].active { background: #059669; border-color: #059669; }
.floating-toolbox-card,
.floating-legend-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15,23,42,0.08);
    overflow: hidden;
}
.floating-toolbox-card {
    display: flex;
    flex-direction: column;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
}
/* 툴박스 안의 카드는 이중 테두리 제거 */
.floating-toolbox .floating-toolbox-card {
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.floating-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid #f1f5f9;
}
.floating-card-header.accent-teal  { background: linear-gradient(90deg,#f0fdfa,#f8fafc); border-left: 3px solid #0d9488; }
.floating-card-header.accent-blue  { background: linear-gradient(90deg,#eff6ff,#f8fafc); border-left: 3px solid #2563eb; }
.floating-card-header.accent-green { background: linear-gradient(90deg,#f0fdf4,#f8fafc); border-left: 3px solid #059669; }
.floating-card-header.accent-emerald { background: linear-gradient(90deg,#ecfdf5,#f8fafc); border-left: 3px solid #047857; }
.floating-card-header.accent-red     { background: linear-gradient(90deg,#fff1f2,#f8fafc); border-left: 3px solid #dc2626; }
.floating-card-header.accent-orange  { background: linear-gradient(90deg,#fff7ed,#f8fafc); border-left: 3px solid #ea580c; }
.floating-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px rgba(15,23,42,0.18);
}
.floating-card-icon.teal { background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%); }
.floating-card-icon.blue { background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%); }
.floating-card-icon.green { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.floating-card-icon.emerald { background: linear-gradient(135deg, #059669 0%, #047857 100%); }
.floating-card-icon.red     { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }
.floating-card-icon.orange  { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); }
.floating-card-icon .material-symbols-outlined {
    font-size: 19px;
    color: #ffffff;
}
.floating-card-title-wrap { min-width: 0; }
.floating-card-title {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.floating-card-subtitle {
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.25;
}
.floating-card-body {
    padding: 9px 10px 10px;
}
.floating-toolbox .floating-card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.floating-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 7px;
}
.floating-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
}
.floating-chip.blue   { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.floating-chip.teal   { background: #ecfeff; border-color: #a5f3fc; color: #0f766e; }
.floating-chip.green  { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.floating-chip.red    { background: #fff1f2; border-color: #fecdd3; color: #b91c1c; }
.floating-chip.orange { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.floating-chip.purple { background: #f5f3ff; border-color: #ddd6fe; color: #7c3aed; }
.floating-chip.amber { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.floating-note {
    font-size: 10px;
    color: #475569;
    line-height: 1.4;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 8px;
    margin-bottom: 7px;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.floating-section-label {
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.floating-divider {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e8edf3;
}
.floating-progress-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
}
.floating-progress-bg {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
}
.floating-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
    border-radius: 99px;
    transition: width 0.5s ease;
}
.floating-progress-text {
    font-size: 10px;
    font-weight: 900;
    color: #2563eb;
    min-width: 28px;
    text-align: right;
}
.floating-grid {
    display: grid;
    gap: 5px;
}
.floating-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.floating-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.floating-select {
    width: 100%; padding: 5px 7px; margin-top: 4px;
    border: 1px solid #cbd5e1; border-radius: 7px;
    font-size: 11px; font-weight: 700; color: #334155;
    background: #ffffff; cursor: pointer; outline: none;
}
.floating-select:focus { border-color: #a78bfa; }
.floating-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 34px;
    padding: 7px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: filter 0.12s, box-shadow 0.12s;
}
.floating-tool-btn:not(:disabled):hover { filter: brightness(0.93); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.floating-tool-btn.large {
    min-height: 44px;
    font-size: 12px;
    gap: 8px;
}
.floating-tool-btn .material-symbols-outlined { font-size: 16px; }
.floating-tool-btn.stack {
    flex-direction: column;
    gap: 3px;
    min-height: 48px;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 800;
}
/* 컴팩트 가로형 토글(도엽망 표시 등) — stack보다 훨씬 낮게 */
.floating-tool-btn.mini {
    min-height: 26px;
    padding: 3px 6px;
    font-size: 10.5px;
    font-weight: 800;
    gap: 4px;
}
.floating-tool-btn.mini .material-symbols-outlined { font-size: 13px; }
/* 툴박스용 컴팩트 체크박스 라벨 */
.floating-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
    white-space: nowrap;
}
.floating-check input { width: 14px; height: 14px; margin: 0; cursor: pointer; flex-shrink: 0; }
.floating-tool-btn.primary-teal  { background: #f0fdfa; border-color: #5eead4; color: #0f766e; }
.floating-tool-btn.primary-blue  { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.floating-tool-btn.primary-green { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.floating-tool-btn.primary-purple{ background: #f5f3ff; border-color: #c4b5fd; color: #7c3aed; }
.floating-tool-btn.primary-amber { background: #fffbeb; border-color: #fcd34d; color: #b45309; }
.floating-tool-btn.primary-red   { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
/* 채워진(solid) CTA 버튼 */
.floating-tool-btn.solid-teal  { background: #0f766e; border-color: #0f766e; color: #fff; box-shadow: 0 3px 10px rgba(15,118,110,0.35); }
.floating-tool-btn.solid-blue  { background: #2563eb; border-color: #2563eb; color: #fff; box-shadow: 0 3px 10px rgba(37,99,235,0.35); }
.floating-tool-btn.solid-green { background: #059669; border-color: #059669; color: #fff; box-shadow: 0 3px 10px rgba(5,150,105,0.35); }
.floating-tool-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
}
.floating-slider-label {
    font-size: 11px;
    color: #64748b;
}
/* [2026-07-01] 산림 툴박스 내부 글자 살짝 확대(공간 활용) */
.floating-forest-body .floating-slider-label { font-size: 13px; }
.floating-toolbox .floating-forest-body { padding: 5px 8px 6px; }
.floating-slider-value {
    font-weight: 800;
    color: #0f766e;
}
.floating-legend-card {
    line-height: 1.45;
    width: var(--fias-dock-width);
    height: var(--fias-floating-card-height);
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.98) 100%);
}
.floating-legend-body {
    padding: 9px 11px 10px;
    height: calc(100% - 49px);
    overflow: hidden;
    box-sizing: border-box;
}
.floating-legend-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.floating-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #0f172a;
    line-height: 1.25;
}
/* [2026-07-01] 산림 범례 목록 고정 높이 — 레이어(기능/임상/수종/취약/연료) 전환 시
   패널 세로 크기를 동일하게 유지하고, 항목이 많으면 목록만 스크롤(전체 세로 길이 축소). */
/* [2026-07-02] 툴박스는 내용과 무관하게 고정 높이(레이어/줌 상태가 달라도 세로 동일).
   항목이 많으면 목록만 스크롤, 적으면 하단이 비어도 높이 유지. */
.floating-forest-list {
    height: 96px;
    overflow-y: auto;
    flex: 0 0 auto;
}
/* [2026-07-01] Z16 미만: 각 값 대신 확대 안내를 크게 표시(모든 산림 레이어 통일).
   목록과 같은 높이(130px)라 패널 세로 크기가 값 표시 때와 동일하게 유지된다. */
.floating-forest-zoomhint {
    height: 96px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: #475569;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    padding: 0 6px;
}
.floating-forest-zoomhint .material-symbols-outlined {
    font-size: 34px;
    color: #94a3b8;
}
/* 수종 '전체 보기' 등 초과 안내 — 목록 안 빈 공간에 배치(패널 높이 불변). */
.floating-forest-more {
    margin-top: 3px;
    width: 100%;
    background: none;
    border: none;
    color: #2563eb;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 0;
    text-align: center;
}
.floating-forest-more[style*="default"] { color: #94a3b8; }
button.floating-forest-more:hover { text-decoration: underline; }
.floating-forest-list .floating-legend-item {
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
}
.floating-forest-list .floating-legend-item > span:first-child { min-width: 0; }
.floating-forest-list .floating-legend-item > span:first-child > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.floating-forest-list .floating-legend-swatch {
    width: 15px;
    height: 15px;
}
.floating-legend-swatch {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    flex: 0 0 auto;
}

/* =========================================================
   6. 지도 UI 우측 재배치
   ========================================================= */
.leaflet-control-zoom { 
    margin-top: 20px !important; 
    margin-right: 20px !important; 
    border: none !important; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; 
}
.leaflet-top.leaflet-left { right: 0; left: auto; }
.leaflet-bottom.leaflet-left { right: 20px !important; left: auto !important; bottom: 20px !important; }

.leaflet-top.leaflet-right { transition: none !important; }
body.panel-open .leaflet-top.leaflet-right { transform: none !important; }

/* ── Leaflet 기본 출처 컨트롤 숨김 (fias-attr-strip으로 대체) ── */
.leaflet-control-attribution { display: none !important; }

.fias-opacity-slider {
    width: 100%;
    height: 18px;
    margin-top: 2px;
    display: block;
    cursor: pointer;
    /* [2026-07-01] 불투명도 게이지바 색상 통일(레이어별 제각각 → 일관된 브랜드 그린) */
    accent-color: #0f766e;
}

/* ── 데스크탑: 산림 범례를 통합파일 툴박스 옆에 고정 배치 ── */
@media (min-width: 901px) {
    .ff-legend {
        position: fixed !important;
        right: var(--fias-forest-dock-right) !important;
        bottom: 58px !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        width: var(--fias-dock-width) !important;
        height: var(--fias-floating-card-height) !important;
        box-sizing: border-box !important;
    }
    #fias-work-toolbox {
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    #forest-type-legend {
        position: fixed !important;
        right: var(--fias-forest-dock-right) !important;
        bottom: 58px !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        width: var(--fias-dock-width) !important;
        height: var(--fias-floating-card-height) !important;
        box-sizing: border-box !important;
    }
    .fv-legend {
        position: fixed !important;
        right: var(--fias-forest-dock-right) !important;
        bottom: 58px !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        width: var(--fias-dock-width) !important;
        height: var(--fias-floating-card-height) !important;
        box-sizing: border-box !important;
    }
}

/* ── [2026-06-21] 우측 컨트롤 레일 정렬 (③ 정렬안) ──
   우측상단 지도선택(Leaflet 레이어 컨트롤)을 우측하단 산림정보 dock과 동일한
   너비(220px)·우측여백(12px)·스타일(라운드/보더/그림자/배경)로 맞춰, 둘이 같은
   우측 세로 레일에 정렬되도록 한다. 분산감 완화 목적. 데스크탑(901px+)에서만 적용. */
@media (min-width: 901px) {
    .leaflet-top.leaflet-right .leaflet-control-layers {
        width: var(--fias-dock-width);
        box-sizing: border-box;
        margin: 12px 12px 0 0;
        border: 1px solid #dbe3ef;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(15,23,42,0.14);
        background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.98) 100%);
        backdrop-filter: blur(8px);
    }
    /* [2026-06-21] 지도선택란 글자가 작아 보이는 문제 — 레이블 폰트 키움 */
    .leaflet-top.leaflet-right .leaflet-control-layers label {
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
    }
}

/* ── 산불취약지도 출처/유의사항 고지 바 ── */
#fv-data-notice, #ffuel-data-notice, #pine-data-notice {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9100;
    background: rgba(255,255,255,0.97);
    border: 1px solid #fecaca;
    border-left: 3px solid #dc2626;
    border-radius: 8px;
    padding: 9px 36px 9px 14px;
    max-width: 700px;
    width: calc(100vw - 80px);
    font-size: 11px;
    line-height: 1.55;
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    backdrop-filter: blur(6px);
    pointer-events: auto;
    animation: fv-notice-in 0.25s ease;
}
@keyframes fv-notice-in {
    from { opacity:0; transform:translateX(-50%) translateY(8px); }
    to   { opacity:1; transform:translateX(-50%) translateY(0);   }
}
#fv-data-notice .fv-notice-source, #ffuel-data-notice .fv-notice-source, #pine-data-notice .fv-notice-source {
    font-weight: 700;
    color: #b91c1c;
    margin-bottom: 2px;
}
#fv-data-notice .fv-notice-body, #ffuel-data-notice .fv-notice-body, #pine-data-notice .fv-notice-body {
    color: #475569;
}
#fv-data-notice .fv-notice-close, #ffuel-data-notice .fv-notice-close, #pine-data-notice .fv-notice-close {
    position: absolute;
    top: 7px; right: 9px;
    width: 20px; height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 15px;
    color: #94a3b8;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    padding: 0;
}
#fv-data-notice .fv-notice-close:hover, #ffuel-data-notice .fv-notice-close:hover, #pine-data-notice .fv-notice-close:hover { background:#fee2e2; color:#dc2626; }
@media (max-width: 768px) {
    #fv-data-notice, #ffuel-data-notice, #pine-data-notice { bottom: 70px; width: calc(100vw - 24px); font-size: 10px; }
}

/* =========================================================
   7. 기타 스타일
   ========================================================= */
.modern-h3 { margin: 15px 0 10px; font-size: 13px; color: #1e293b; font-weight: 900; border-bottom: 2px solid #e2e8f0; padding-bottom: 5px; }
.modern-input, .modern-select { width: 100%; padding: 10px; font-size: 13px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #0f172a; font-weight: bold; outline: none; transition: border 0.2s; }
.modern-input:focus, .modern-select:focus { border-color: #3b82f6; }
button { border-radius: 6px; transition: all 0.2s; cursor: pointer; }
button.draw-btn { padding: 10px; background: #fff; color: #334155; border: 1px solid #cbd5e1; font-weight: bold; font-size: 13px; }
button.draw-btn.active { background: var(--ui-slate-tint)!important; color: var(--ui-slate-deep)!important; border-color: var(--ui-slate)!important; box-shadow: inset 0 0 0 1px var(--ui-slate); }
button.download { padding: 12px; background: var(--ui-green); color: #fff; border: none; font-weight: bold; font-size: 13px; }
button.download:hover { background: #45725b; }
button.danger { padding: 12px; background: #ef4444; color: #fff; border: none; font-weight: bold; font-size: 13px; }
button.danger:hover { background: #dc2626; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15,23,42,0.7); display: flex; justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(3px); }
.modal-content { background: white; padding: 30px; border-radius: 16px; width: 360px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.modal-content h3 { margin-top: 0; color: #0f172a; font-weight: 900; }
.modal-content p { font-size: 13px; color: #64748b; line-height: 1.5; }
.modal-btns { display: flex; gap: 10px; margin-top: 20px; }
.modal-btns button { flex: 1; padding: 12px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; font-size: 14px; }
.confirm-btn { background: var(--ui-slate); color: white; }
.cancel-btn { background: #94a3b8; color: white; }

/* ── 데이터센터 탭 (지적·경계 / 지형·배경) — 버튼형 탭 ─ */
.dc-tabs {
    position: relative;
    display: flex; gap: 8px; margin-top: 38px; margin-bottom: 14px;
}
.dc-tab {
    flex: 1; padding: 10px 6px;
    background: #ffffff; border: 1.5px solid #cbd5e1;
    border-radius: 9px; cursor: pointer;
    font-size: 13px; font-weight: 800; color: #475569;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.dc-tab:hover {
    color: #1e293b; border-color: #94a3b8;
    box-shadow: 0 1px 4px rgba(15,23,42,0.08);
}
.dc-tab.active {
    background: var(--ui-slate); border-color: var(--ui-slate); color: #ffffff;
    box-shadow: 0 2px 6px rgba(var(--ui-slate-rgb),0.4);
}
.dc-tab .material-symbols-outlined { font-size: 17px; color: #64748b; }
.dc-tab.active .material-symbols-outlined { color: #ffffff; }

/* 화면전환 안내 말풍선 — 상시 표시 (통합분석·데이터센터 공통) */
.dc-tabs::before {
    content: "여기를 눌러 화면 전환 👇";
    position: absolute; left: 0; top: -30px;
    background: #1e293b; color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: -0.2px;
    padding: 5px 11px; border-radius: 8px; white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
    animation: dcHintBob 2.4s ease-in-out infinite;
    pointer-events: none; z-index: 3;
}
@keyframes dcHintBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* =========================================================
   통합분석 — 화이트 미니멀 + 리치 바이올렛 포인트 (사이트 통일 프리셋)
   .ia-* 는 다른 서브메뉴에도 재사용할 공통 컴포넌트.
   ========================================================= */
:root {
    /* 사이트 대표 포인트 색은 아래 --ui-slate* 4개가 유일한 원본(source of truth)이다.
       포인트색을 바꿀 때는 이 4줄 + --ui-slate-rgb 한 줄만 고치면 된다 — 다른 곳(--ia-accent*
       포함)은 전부 이 값을 var()로 참조만 하도록 통일함(2026-07-10). */
    --ui-slate: #6b4fd6;  --ui-slate-deep: #4d3aa0; --ui-slate-tint: #f0ecfc; --ui-slate-bd: #d4c7f4;
    --ui-slate-rgb: 107, 79, 214; /* rgba(var(--ui-slate-rgb), 0.x) 형태로 그림자/틴트에 사용 */

    /* 2026-07-10 6차: 아래 5개(teal/green/purple/amber/red)는 더 이상 독립된 색이 아니라
       --ui-slate 색조 하나에서 명암만 다르게 뽑아낸 파생값이다(color-mix). 이름/용도(뱃지·카드·
       버튼 구분색)는 그대로 유지하되, 이제 --ui-slate 한 줄만 바꾸면 이 5개도 전부 같은 색조로
       자동으로 따라온다 — "포인트색을 지정하면 사이트 전체 색이 그 색이 되게" 요청 반영.
       2026-07-10 8차 수정: 기본색(base)은 항상 black과만 섞는다 — white와 섞으면 파스텔처럼
       밝아져서, 흰 배경 위 작은 글자·아이콘이나 "배경색+흰 글자" 버튼(예: 후원/베타, 다운로드
       버튼)에서 대비가 무너져 잘 안 보이는 문제가 있었음(제보로 발견). tint/bd(옅은 배경/보더)만
       white와 섞어 밝게 유지 — base는 항상 --ui-slate만큼 어둡게, tint/bd만 옅게. */
    --ui-teal:   color-mix(in srgb, var(--ui-slate) 96%, black);
    --ui-teal-tint: color-mix(in srgb, var(--ui-slate) 8%, white);
    --ui-teal-bd:   color-mix(in srgb, var(--ui-slate) 22%, white);

    --ui-green:  color-mix(in srgb, var(--ui-slate) 84%, black);
    --ui-green-tint: color-mix(in srgb, var(--ui-slate) 14%, white);
    --ui-green-bd:   color-mix(in srgb, var(--ui-slate) 30%, white);

    --ui-purple: color-mix(in srgb, var(--ui-slate) 72%, black);
    --ui-purple-tint: color-mix(in srgb, var(--ui-slate) 20%, white);
    --ui-purple-bd:   color-mix(in srgb, var(--ui-slate) 38%, white);

    --ui-amber:  color-mix(in srgb, var(--ui-slate) 58%, black);
    --ui-amber-tint: color-mix(in srgb, var(--ui-slate) 26%, white);
    --ui-amber-bd:   color-mix(in srgb, var(--ui-slate) 46%, white);

    --ui-red:    color-mix(in srgb, var(--ui-slate) 44%, black);
    --ui-red-tint: color-mix(in srgb, var(--ui-slate) 32%, white);
    --ui-red-bd:   color-mix(in srgb, var(--ui-slate) 54%, white);

    /* 통합분석(#section-analysis) 전용 별칭 — 값은 별도로 두지 않고 --ui-slate*를 그대로 참조.
       예전엔 여기가 --ui-slate와 동일한 값을 리터럴로 중복 정의하고 있어서 포인트색을 바꿔도
       통합분석 쪽만 안 바뀌는 문제가 있었음. */
    --ia-accent: var(--ui-slate);
    --ia-accent-deep: var(--ui-slate-deep);
    --ia-accent-text: var(--ui-slate-deep);
    --ia-tint: var(--ui-slate-tint);
    --ia-tint-border: var(--ui-slate-bd);
    --ia-hairline: #e5e9ef;
}

/* ===== 지도 우클릭 토지정보 팝업 (C·컴팩트 소프트) =====
   색은 전부 사이트 대표색 --ui-slate* 에서만 가져온다(하드코딩 금지).
   포인트색을 바꾸면 팝업도 자동으로 함께 리컬러된다. 닫기(X)는 헤더 우측에
   원형 버튼으로 자리를 확보하고 제목(뱃지)에 padding-right를 줘 겹치지 않게 한다. */
.custom-popup .leaflet-popup-content-wrapper {
    border-radius: 14px; padding: 0; overflow: hidden;
    border: 1px solid var(--ui-slate-bd);
    box-shadow: 0 12px 34px -10px rgba(var(--ui-slate-rgb),0.45), 0 2px 8px rgba(15,23,42,0.12);
}
.custom-popup .leaflet-popup-content { margin: 0; width: auto !important; line-height: 1.4; }
.custom-popup .leaflet-popup-tip { box-shadow: 0 3px 8px rgba(15,23,42,0.12); }
.custom-popup a.leaflet-popup-close-button { display: none; } /* 기본 X 숨김 → 헤더 내 커스텀 버튼 사용 */

.rc-pop { font-family: "Pretendard","Malgun Gothic",sans-serif; width: 380px; max-width: 380px; box-sizing: border-box; background: #fff; color: #1e293b; }

.rc-pop__hd { position: relative; background: var(--ui-slate-tint); padding: 9px 44px 9px 12px; display: flex; align-items: center; gap: 8px; }
.rc-pop__badge { background: var(--ui-slate); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; letter-spacing: -0.2px; flex: none; }
.rc-pop__sub { font-size: 11.5px; color: var(--ui-slate-deep); font-weight: 800; letter-spacing: -0.2px; }
.rc-pop__x { position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; padding: 0; border: none; background: #fff; color: var(--ui-slate-deep); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 1px 3px rgba(15,23,42,0.14); transition: background 0.15s, color 0.15s; }
.rc-pop__x svg { width: 13px; height: 13px; }
.rc-pop__x:hover { color: #fff; background: var(--ui-slate); }

.rc-pop__body { padding: 12px; }
.rc-pop__addr { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.25; color: #1e293b; }

.rc-chips { display: flex; gap: 6px; margin-bottom: 9px; }
.rc-chip { flex: 1; text-align: center; background: var(--ui-slate-tint); border: 1px solid var(--ui-slate-bd); border-radius: 9px; padding: 6px 4px; }
.rc-chip .k { display: block; font-size: 9.5px; color: #94a3b8; margin-bottom: 2px; }
.rc-chip .v { font-size: 11.5px; font-weight: 800; color: var(--ui-slate-deep); }

.rc-land-info { margin: 0 0 9px; padding: 8px; border: 1px solid var(--ui-slate-bd); border-radius: 9px; background: #fff; }
.rc-land-info__title { margin-bottom: 6px; font-size: 10.5px; font-weight: 900; color: var(--ui-slate-deep); }
.rc-land-info__grid { display: grid; grid-template-columns: minmax(145px, 1.7fr) repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: 5px; }
.rc-land-info__item { min-width: 0; padding: 5px 6px; border-radius: 7px; background: var(--ui-slate-tint); border: 1px solid rgba(var(--ui-slate-rgb),0.12); }
.rc-land-info__item--sanji { grid-row: span 2; }
.rc-land-info__bottom { grid-column: 2 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.rc-land-info__item .k { display: block; margin-bottom: 2px; font-size: 9px; color: #94a3b8; }
.rc-land-info__item .v { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 800; color: var(--ui-slate-deep); }
.rc-land-info__item:not(.rc-land-info__item--sanji) .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.rc-land-info__item--sanji .v { overflow: visible; white-space: normal; }
.rc-land-info__sanji { display: grid; gap: 4px; line-height: 1.45; }
.rc-land-info__sanji-group { display: grid; gap: 1px; padding: 4px 5px; border: 1px solid; border-radius: 6px; }
.rc-land-info__sanji-group--conservation { background: #f0fdf4; border-color: #86efac; }
.rc-land-info__sanji-group--non-conservation { background: #fffbeb; border-color: #fcd34d; }
.rc-land-info__sanji-row { display: flex; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; justify-content: space-between; gap: 4px; overflow: hidden; white-space: nowrap; font-size: 11.5px; }
.rc-land-info__sanji-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rc-land-info__sanji-row > span:first-child { flex: 1 1 auto; }
.rc-land-info__sanji-row > span:last-child { flex: 0 1 auto; text-align: right; }
.rc-land-info__row--wrap { flex-wrap: wrap; overflow: visible; white-space: normal; }
.rc-land-info__row--wrap > span:last-child { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-all; }
.rc-land-info__sanji-main { font-weight: 900; }
.rc-land-info__sanji-group--conservation .rc-land-info__sanji-main { color: #166534; }
.rc-land-info__sanji-group--non-conservation .rc-land-info__sanji-main { color: #92400e; }
.rc-land-info__sanji-sub { padding-left: 3px; font-size: inherit; font-weight: 700; color: #475569; }
.rc-land-info__sanji-empty { display: block; }
.rc-land-info__sanji-empty { color: #64748b; }
.rc-land-info__area { display: flex; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; justify-content: space-between; gap: 3px; margin-top: 5px; padding-top: 4px; overflow: hidden; border-top: 1px solid rgba(var(--ui-slate-rgb),0.14); font-size: 11.5px; font-weight: 800; }
.rc-land-info__area span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #94a3b8; font-weight: 600; }
.rc-land-info__area span:first-child { flex: 1 1 auto; }
.rc-land-info__area span:last-child { flex: 0 1 auto; text-align: right; color: var(--ui-slate-deep); font-weight: 800; }
.rc-land-info__loading, .rc-land-info__warning { grid-column: 1 / -1; padding: 5px; text-align: center; font-size: 10px; color: #64748b; }
.rc-land-info__warning { color: #92400e; }

.rc-btn { width: 100%; border-radius: 8px; font-family: inherit; font-weight: 700; cursor: pointer; font-size: 12px; padding: 9px 10px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; transition: filter 0.15s ease, transform 0.06s ease; }
.rc-btn + .rc-btn { margin-top: 6px; }
.rc-btn:hover { filter: brightness(0.96); }
.rc-btn:active { transform: translateY(1px); }
.rc-btn svg { width: 14px; height: 14px; flex: none; }
.rc-btn--solid { background: var(--ui-slate); color: #fff; box-shadow: 0 3px 10px -3px rgba(var(--ui-slate-rgb),0.5); }
.rc-btn--soft { background: var(--ui-slate-tint); color: var(--ui-slate-deep); border-color: var(--ui-slate-bd); }
.rc-btn--ghost { background: #fff; color: var(--ui-slate-deep); border-color: var(--ui-slate-bd); }

.rc-loading { padding: 12px; text-align: center; font-weight: 700; font-size: 12px; color: var(--ui-slate-deep); line-height: 1.5; }
.rc-loading .sub { display: block; font-size: 10px; font-weight: 400; color: var(--ui-slate); margin-top: 2px; }
.rc-error { padding: 10px; text-align: center; font-weight: 700; font-size: 11px; color: var(--ui-slate-deep); background: var(--ui-slate-tint); border: 1px solid var(--ui-slate-bd); border-radius: 8px; }

.rc-result { border: 1px solid var(--ui-slate-bd); border-radius: 8px; padding: 8px; margin-top: 4px; background: #fff; box-shadow: 0 2px 8px rgba(var(--ui-slate-rgb),0.08); }
.rc-stat-row { display: flex; gap: 7px; margin-bottom: 7px; }
.rc-stat-row:last-child { margin-bottom: 0; }
.rc-stat { flex: 1; text-align: center; border-radius: 8px; padding: 6px 2px; border: 1px solid var(--ui-slate-bd); background: var(--ui-slate-tint); }
.rc-stat .lab { font-size: 9.5px; font-weight: 800; color: var(--ui-slate); margin-bottom: 2px; }
.rc-stat .num { font-size: 15px; font-weight: 900; color: var(--ui-slate-deep); }
.rc-stat--plain { background: #f7f7fb; }
.rc-stat--plain .lab { color: #94a3b8; }
.rc-stat--plain .num { color: #334155; font-size: 12px; }
.rc-note { padding: 8px 10px; text-align: center; font-size: 11px; color: var(--ui-slate-deep); background: var(--ui-slate-tint); border: 1px dashed var(--ui-slate-bd); border-radius: 8px; margin: 8px 0; line-height: 1.4; }

/* 통합분석 탭 — 공유 .dc-tab 을 바이올렛으로 스코프 오버라이드 */
#section-analysis .dc-tab:hover { color: var(--ia-accent-deep); border-color: var(--ia-accent); }
#section-analysis .dc-tab.active {
    background: var(--ia-accent); border-color: var(--ia-accent);
    box-shadow: 0 4px 12px -4px rgba(var(--ui-slate-rgb),0.55);
}
#section-analysis .panel-card-header {
    background: linear-gradient(180deg, #f7f9fb, #f2f5f8);
    color: #1e293b;
}
#section-analysis .panel-card-header .material-symbols-outlined { color: var(--ia-accent) !important; }

/* 아이콘 배지 + 제목 + 한 줄 설명 리스트 아이템 */
.ia-list { display: flex; flex-direction: column; gap: 8px; }
.ia-item {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 11px 12px; border-radius: 11px; cursor: pointer;
    background: #ffffff; border: 1px solid var(--ia-hairline);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.ia-item:hover {
    border-color: var(--ia-accent); background: var(--ia-tint);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(var(--ui-slate-rgb),0.45);
}
.ia-badge {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ia-tint); color: var(--ia-accent);
    border: 1px solid var(--ia-tint-border);
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.ia-item:hover .ia-badge { background: var(--ia-accent); color: #fff; border-color: var(--ia-accent); }
.ia-badge .material-symbols-outlined { font-size: 20px; color: inherit; }
.ia-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ia-txt b { font-size: 13px; font-weight: 800; color: #1e293b; letter-spacing: -0.01em; }
.ia-txt span { font-size: 11px; font-weight: 500; color: #516072; line-height: 1.35; word-break: keep-all; }
.ia-chev { color: #8a97a6; display: flex; flex-shrink: 0; transition: transform .16s ease, color .16s ease; }
.ia-chev .material-symbols-outlined { font-size: 18px; color: inherit; }
.ia-item:hover .ia-chev { color: var(--ia-accent); transform: translateX(2px); }

/* 실행형(주요) 액션 — 채운 포인트색으로 강조 */
.ia-item.primary { background: var(--ia-accent); border-color: var(--ia-accent); }
.ia-item.primary .ia-badge { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.28); }
.ia-item.primary .ia-txt b { color: #fff; }
.ia-item.primary .ia-txt span { color: rgba(255,255,255,.82); }
.ia-item.primary .ia-chev { color: rgba(255,255,255,.7); }
.ia-item.primary:hover {
    background: var(--ia-accent-deep); transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(var(--ui-slate-rgb),0.7);
}
.ia-item.primary:hover .ia-badge { background: rgba(255,255,255,.26); }

/* 저장 항목 옵션 박스 */
.ia-optbox {
    border: 1px solid var(--ia-tint-border); background: var(--ia-tint);
    border-radius: 11px; padding: 11px 13px; margin-bottom: 12px;
}
.ia-optbox .ia-ob-t {
    font-size: 11px; font-weight: 800; color: var(--ia-accent-text);
    letter-spacing: .02em; text-transform: uppercase; margin-bottom: 9px;
}
.ia-optbox .ia-ob-row { display: flex; gap: 18px; flex-wrap: wrap; }
.ia-chk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #1e293b; cursor: pointer; white-space: nowrap; }
.ia-chk input {
    appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex-shrink: 0;
    border: 1.5px solid var(--ia-tint-border); border-radius: 5px; background: #fff; cursor: pointer;
    position: relative; transition: all .15s;
}
.ia-chk input:checked { background: var(--ia-accent); border-color: var(--ia-accent); }
.ia-chk input:checked::after {
    content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ── 지적 일괄조회 모달 ───────────────────────────────────── */
.panel-action-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.bulkcad-overlay { align-items: flex-start; overflow-y: auto; padding: 24px 16px; }
.bulkcad-panel {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 880px;
    margin: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.bulkcad-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
    background: linear-gradient(90deg, #eff6ff, #f8fafc);
    border-bottom: 1px solid #e2e8f0;
    border-radius: 12px 12px 0 0;
}
.bulkcad-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; color: #1e3a8a; }
.bulkcad-title .material-symbols-outlined { font-size: 20px; color: var(--ui-slate); }
.bulkcad-close {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c;
    font-size: 13px; font-weight: 800; cursor: pointer;
    border-radius: 8px; padding: 7px 12px; flex: none;
}
.bulkcad-close:hover { background: #fee2e2; }
.bulkcad-close .material-symbols-outlined { font-size: 16px; }
.bulkcad-body { padding: 16px 18px; overflow-y: auto; }
.bulkcad-section-title { font-size: 13px; font-weight: 900; color: #1e293b; margin: 4px 0 7px; display: flex; align-items: center; gap: 6px; }
.bulkcad-region { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bulkcad-actions { display: flex; gap: 8px; margin-top: 14px; }
.bulkcad-actions .panel-action-btn { margin-top: 0; }
.bulkcad-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; }
.bulkcad-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; max-height: 46vh; overflow-y: auto; }
.bulkcad-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.bulkcad-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: #f1f5f9; color: #334155; font-weight: 800;
    text-align: left; padding: 7px 8px; border-bottom: 1px solid #cbd5e1;
}
.bulkcad-table tbody td { padding: 6px 8px; border-bottom: 1px solid var(--ui-slate-tint); color: #334155; }
.bulkcad-table tbody tr:hover td { background: #f8fafc; }
.bulkcad-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.bulkcad-table tbody tr.is-warn td { background: #fff3cd; }
.bulkcad-table tbody tr.is-warn:hover td { background: #ffeeba; }
.bulkcad-table .cell-warn { color: #b45309; white-space: normal; }
.bulkcad-table .col-del { text-align: center; width: 46px; }
.bulkcad-del {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0;
    border: 1px solid #fecaca; border-radius: 6px;
    background: #fff5f5; color: #dc2626; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.bulkcad-del:hover { background: #fee2e2; border-color: #f87171; transform: translateY(-1px); }
.bulkcad-del .material-symbols-outlined { font-size: 16px; line-height: 1; }
@media (max-width: 768px) {
    .bulkcad-region { grid-template-columns: repeat(2, 1fr); }
    .bulkcad-actions { flex-direction: column; }
}

/* PPS 알림 벨 */
.pps-bell-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; margin-left: 12px; vertical-align: middle; }
.pps-bell-btn { background: none; border: none; color: #cbd5e1; font-size: 22px; cursor: pointer; padding: 4px 6px; line-height: 1; transition: color 0.2s; position: relative; }
.pps-bell-btn:hover { color: #fbbf24; }
.pps-bell-badge { position: absolute; top: -6px; right: -10px; display: none; color: #ef4444 !important; font-size: 18px; font-weight: 900; line-height: 1; background: none !important; border: none !important; text-shadow: 0 0 6px rgba(239,68,68,0.5); }
.pps-bell-badge.show { display: block; animation: pps-pulse 2s infinite; }
.pps-bell-label { color: #ef4444; font-size: 11px; letter-spacing: -0.3px; font-weight: 700; cursor: pointer; }
@keyframes pps-pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }

/* 단가표 알림 */
.wage-bell-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; margin-left: 10px; vertical-align: middle; }
.wage-bell-btn { background: none; border: none; color: #cbd5e1; font-size: 22px; cursor: pointer; padding: 4px 6px; line-height: 1; transition: color 0.2s; position: relative; }
.wage-bell-btn:hover { color: #34d399; }
.wage-bell-label { color: #10b981; font-size: 11px; letter-spacing: -0.3px; font-weight: 800; cursor: pointer; }
.wage-bell-badge { position: absolute; top: -6px; right: -10px; display: none; color: #ef4444 !important; font-size: 13px; font-weight: 900; line-height: 1; text-shadow: 0 0 5px rgba(239,68,68,0.5); }
.wage-bell-badge.show { display: block; animation: pps-pulse 2s infinite; }

.wage-dropdown { display: none; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 380px; background: #ffffff; border: 1px solid #bbf7d0; border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.15); z-index: 9999; overflow: hidden; }
.wage-dropdown.open { display: block; }
.wage-dropdown-header { position: relative; padding: 14px 132px 14px 16px; background: #ecfdf5; border-bottom: 1px solid #bbf7d0; min-height: 52px; display: flex; align-items: center; }
.wage-dropdown-header h4 { margin: 0; color: #065f46; font-size: 15px; font-weight: 900; letter-spacing: -0.3px; white-space: nowrap; }
.wage-table-list { padding: 12px; }
.wage-table-head { font-size: 12px; color: #475569; font-weight: 700; margin-bottom: 10px; }
.wage-table-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 12px; }
.wage-table-row { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; font-size: 12px; color: #334155; }
.wage-table-row strong { color: #065f46; font-size: 13px; font-weight: 900; }
.wage-source-info { font-size: 11px; color: #64748b; margin-bottom: 10px; }
.wage-empty-msg { font-size: 12px; color: #94a3b8; }

/* 제비율표 알림 벨 */
.jebi-bell-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; margin-left: 10px; vertical-align: middle; }
.jebi-bell-btn { background: none; border: none; color: #cbd5e1; font-size: 22px; cursor: pointer; padding: 4px 6px; line-height: 1; transition: color 0.2s; position: relative; }
.jebi-bell-btn:hover { color: #f59e0b; }
.jebi-bell-label { color: #f59e0b; font-size: 11px; letter-spacing: -0.3px; font-weight: 800; cursor: pointer; }
.jebi-bell-badge { position: absolute; top: -6px; right: -10px; display: none; color: #ef4444 !important; font-size: 13px; font-weight: 900; line-height: 1; text-shadow: 0 0 5px rgba(239,68,68,0.5); }
.jebi-bell-badge.show { display: block; animation: pps-pulse 2s infinite; }
.jebi-dropdown { display: none; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 620px; max-height: 80vh; background: #ffffff; border: 1px solid #fde68a; border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.18); z-index: 9999; overflow: hidden; }
.jebi-dropdown.open { display: block; }
.jebi-dropdown-header { padding: 14px 16px; background: #fffbeb; border-bottom: 1px solid #fde68a; display: flex; justify-content: space-between; align-items: center; }
.jebi-dropdown-header h4 { margin: 0; color: #92400e; font-size: 15px; font-weight: 900; letter-spacing: -0.3px; }
.jebi-dropdown-body { padding: 10px; overflow-y: auto; max-height: calc(80vh - 60px); }
.jebi-subtitle { font-size: 11px; color: #92400e; font-weight: 700; margin-bottom: 8px; }
.jebi-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.jebi-table th { background: #fef3c7; color: #92400e; font-weight: 800; padding: 6px 8px; border: 1px solid #fde68a; text-align: center; white-space: nowrap; }
.jebi-table td { padding: 5px 7px; border: 1px solid #e5e7eb; color: #334155; vertical-align: top; line-height: 1.4; }
.jebi-table td.jebi-item { font-weight: 700; white-space: nowrap; }
.jebi-table td.jebi-rate { text-align: center; font-weight: 800; color: #b45309; white-space: nowrap; }
.jebi-table td.jebi-ref { font-size: 10px; color: #64748b; word-break: keep-all; }
.jebi-table tr.jebi-section td { background: #f8fafc; font-weight: 900; color: #1e293b; }
.jebi-table tr.jebi-total td { background: #fefce8; font-weight: 900; }
.jebi-table tr.jebi-group td { background: #fffbeb; font-weight: 800; color: #78350f; }
.jebi-table td.jebi-cat { font-weight: 700; color: #92400e; white-space: nowrap; font-size: 10px; }
.dropdown-excel-btn { border: none; border-radius: 7px; padding: 7px 12px; color: #fff; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.wage-header-excel-btn { background: #047857; }
.wage-dropdown-header .wage-header-excel-btn { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.wage-header-excel-btn:hover { background: #065f46; }
.jebi-header-excel-btn { background: #b45309; }
.jebi-header-excel-btn:hover { background: #92400e; }

/* 드롭다운 - 밝은 테마 */
.pps-dropdown { display: none; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 420px; max-height: 520px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.15); z-index: 9999; overflow: hidden; }
.pps-dropdown.open { display: block; }
.pps-dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.pps-dropdown-header h4 { margin: 0; color: #1e293b; font-size: 15px; font-weight: 800; letter-spacing: -0.3px; }
.pps-dropdown-header button { background: #e2e8f0; color: #475569; border: none; font-size: 11px; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.15s; }
.pps-dropdown-header button:hover { background: #cbd5e1; color: #1e293b; }

/* 모니터링 사이트 바로가기 */
.pps-sites-row { padding: 9px 14px 10px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.pps-sites-title { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #475569; font-weight: 700; margin-bottom: 7px; }
.pps-sites-title-icon { font-size: 13px; }
.pps-sites-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pps-site-badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 10px; font-weight: 900; text-decoration: none; letter-spacing: -0.1px; border: 1.5px solid transparent; transition: filter 0.13s, transform 0.1s; }
.pps-site-badge:hover { filter: brightness(0.88); transform: translateY(-1px); }
.badge-blue   { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
.badge-amber  { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.badge-purple { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
.badge-green  { background: #dcfce7; border-color: #6ee7b7; color: #166534; }
.badge-teal   { background: #ccfbf1; border-color: #5eead4; color: #115e59; }

/* 자동수집 헬스 상태 표시 */
.pps-sites-hint { margin-left: auto; font-size: 10px; font-weight: 800; }
.pps-site-badge { position: relative; }
.pps-site-badge.health-ok::after   { content: ''; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; border: 1.5px solid #fff; }
.pps-site-badge.health-warn::after  { content: ''; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; border: 1.5px solid #fff; }
.pps-site-badge.health-down { animation: ppsHealthBlink 1.2s ease-in-out infinite; }
.pps-site-badge.health-down::after { content: ''; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; border: 1.5px solid #fff; }
@keyframes ppsHealthBlink { 0%,100% { filter: none; } 50% { filter: brightness(0.8); } }
.pps-health-warnings { padding: 0 12px; }
.pps-health-warnings:not(:empty) { padding: 10px 12px; }
.pps-health-warn-item { display: flex; gap: 7px; align-items: flex-start; font-size: 11.5px; line-height: 1.45; padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; }
.pps-health-warn-item:last-child { margin-bottom: 0; }
.pps-health-warn-item.lv-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.pps-health-warn-item.lv-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.pps-health-warn-item .hw-icon { flex: 0 0 auto; }

/* 알림 리스트 */
.pps-alert-list { overflow-y: auto; max-height: 360px; padding: 10px; }
.pps-alert-item { display: block; padding: 14px 16px; text-decoration: none; border-radius: 10px; margin-bottom: 8px; background: #f8fafc; border-left: 4px solid transparent; border: 1px solid #e2e8f0; transition: all 0.2s; position: relative; overflow: hidden; }
.pps-alert-item:last-child { margin-bottom: 0; }
.pps-alert-item:hover { background: #eff6ff; border-color: #bfdbfe; transform: translateX(2px); }
.pps-alert-item.unread { background: #eff6ff; border: 1px solid #93c5fd; border-left: 4px solid #3b82f6; box-shadow: 0 2px 8px rgba(59,130,246,0.1); }
.pps-alert-item.unread:hover { background: #dbeafe; }

/* 뱃지 행 */
.pps-alert-badge-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pps-alert-keyword { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 5px 12px; border-radius: 7px; font-weight: 900; letter-spacing: 0.2px; white-space: nowrap; box-shadow: inset 0 -1px 0 rgba(15,23,42,0.08); }
.pps-kw-jebi { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.pps-kw-pum { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.pps-kw-default { background: #eef2ff; color: #6366f1; border: 1px solid #c7d2fe; }
.pps-kw-wage { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.pps-kw-pest { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.pps-alert-new { font-size: 9px; color: #fff; background: #ef4444; padding: 2px 6px; border-radius: 3px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; animation: pps-new-blink 1.5s ease-in-out infinite; }
@keyframes pps-new-blink { 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
.pps-alert-source { font-size: 12px; color: #334155; background: #e2e8f0; padding: 4px 10px; border-radius: 6px; font-weight: 900; white-space: nowrap; border: 1px solid #cbd5e1; letter-spacing: 0.2px; }
.pps-alert-num { font-size: 10px; color: #94a3b8; font-weight: 600; margin-left: auto; }

/* 제목 - 줄바꿈 처리 */
.pps-alert-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: #0f172a; font-size: 16px; font-weight: 900; line-height: 1.5; margin-bottom: 8px; word-break: keep-all; overflow-wrap: break-word; letter-spacing: -0.2px; }
.pps-alert-item.unread .pps-alert-title { color: #b91c1c; text-shadow: 0 0 1px rgba(185,28,28,0.2); }

/* 하단 메타 */
.pps-alert-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: #94a3b8; padding-top: 8px; border-top: 1px solid #f1f5f9; }
.pps-alert-meta span { display: flex; align-items: center; gap: 4px; }
.pps-alert-link-hint { margin-left: auto; color: #3b82f6; font-size: 10px; font-weight: 600; opacity: 0; transition: opacity 0.2s; }
.pps-alert-item:hover .pps-alert-link-hint { opacity: 1; }

/* 노임단가 금액 표시 */
.pps-alert-wages { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
.pps-wage-label { font-size: 11px; color: #059669; font-weight: 700; grid-column: 1 / -1; margin-bottom: 2px; }
.pps-wage-item { font-size: 11px; color: #1e293b; display: flex; justify-content: space-between; align-items: center; padding: 2px 0; }
.pps-wage-item em { font-style: normal; color: #64748b; font-size: 10px; }
.pps-wage-item strong { color: #059669; font-weight: 800; font-size: 12px; letter-spacing: -0.3px; }
.pps-wage-excel { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; padding: 5px 0; background: #047857; color: #fff; border-radius: 5px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background 0.15s; text-decoration: none; }
.pps-wage-excel:hover { background: #065f46; }

/* 근거 푸터 (단가표·제비율 알림) */
.pps-alert-evidence { margin-top: 8px; padding: 7px 9px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 10.5px; color: #475569; line-height: 1.5; word-break: keep-all; }
.pps-evi-label { display: inline-block; background: #475569; color: #fff; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-right: 4px; }
.pps-evi-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.pps-evi-link { display: inline-flex; align-items: center; gap: 3px; color: #047857; font-weight: 700; text-decoration: none; font-size: 11px; }
.pps-evi-link:hover { text-decoration: underline; }

/* 빈 상태 */
.pps-alert-empty { text-align: center; padding: 50px 20px; color: #94a3b8; font-size: 13px; line-height: 1.8; }

/* 하단 버튼 */


/* PPS 토스트 알림 */
.pps-toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); background: #ffffff; border: 1px solid #93c5fd; border-top: 3px solid #3b82f6; border-radius: 12px; padding: 20px 24px; color: #1e293b; font-size: 13px; z-index: 10000; box-shadow: 0 12px 40px rgba(0,0,0,0.15); max-width: 420px; width: 90%; animation: pps-toast-in 0.5s cubic-bezier(0.16,1,0.3,1); }
.pps-toast:hover { background: #f8fafc; }
@keyframes pps-toast-in { from { opacity:0; transform:translateX(-50%) translateY(-20px) scale(0.95); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }
.pps-toast-title { font-weight: 800; color: #1e40af; margin-bottom: 8px; font-size: 15px; }
.pps-toast-body { line-height: 1.6; color: #334155; }
.pps-toast-close { position: absolute; top: 10px; right: 14px; background: none; border: none; color: #94a3b8; font-size: 18px; cursor: pointer; transition: color 0.15s; }
.pps-toast-close:hover { color: #1e293b; }
.pps-toast-detail { display: inline-block; margin-top: 10px; padding: 6px 14px; background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; text-align: center; }
.pps-toast-detail:hover { background: #dbeafe; border-color: #93c5fd; }

/* 모바일 대응 */
@media screen and (max-width: 768px) {
    #global-header { padding: 0 15px; }
    .header-logo span { display: none; }

    /* ── 모바일: 단가표·제비율표 벨 숨김, 통합알림만 표시 ── */
    .wage-bell-wrap, .jebi-bell-wrap {
        display: none !important;
    }
    .pps-bell-wrap {
        display: flex !important;
        position: fixed !important;
        top: 14px !important;
        right: 6px !important;
        z-index: 10001 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        background: rgba(15,23,42,0.92) !important;
        border-radius: 12px !important;
        padding: 2px 6px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
        margin-left: 0 !important;
        min-width: 34px !important;
        height: 34px !important;
    }
    .pps-bell-label {
        display: none !important;
    }
    .pps-bell-btn {
        font-size: 19px !important;
        padding: 2px 3px !important;
    }
    .pps-bell-badge {
        top: -4px !important;
        right: -6px !important;
        font-size: 11px !important;
    }

    /* ── 드롭다운: 모바일에서 항상 숨김 (JS 모달로 대체) ── */
    .pps-dropdown, .pps-dropdown.open,
    .wage-dropdown, .wage-dropdown.open,
    .jebi-dropdown, .jebi-dropdown.open {
        display: none !important;
    }

    /* ── 토스트 알림: 모바일에서 숨김 (뱃지로 대체) ── */
    .pps-toast {
        display: none !important;
    }

    /* ── 출처 표시 바: 모바일에서 숨김 ── */
    #fias-attr-strip {
        display: none !important;
    }

    #fias-copyright-footer {
        display: none !important;
    }

    /* ── 산림기능구분도 범례(bottomright): 하단 액션바 위로 끌어올림 ── */
    .leaflet-bottom.leaflet-right {
        bottom: 90px !important;
    }
    .ff-legend, .fv-legend {
        max-height: calc(100vh - 200px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #panel-toggle-btn { display: none !important; }

    #action-square-container { top: auto; bottom: 20px; left: 15px; transform: none; flex-direction: column; gap: 10px; }
    .action-square-btn { width: 75px; height: 75px; padding: 10px; border-radius: 12px; }
    .material-symbols-outlined { font-size: 24px; }
    .btn-label { font-size: 11px; }

    #action-square-container.has-active-btn { left: 15px; bottom: 85vh; gap: 8px; flex-direction: row; }
    #action-square-container.has-active-btn .action-square-btn { width: 45px; height: 45px; }
    #action-square-container.has-active-btn .material-symbols-outlined { font-size: 18px; }

    #panel { top: auto; bottom: 0; left: 0; width: 100%; height: 80vh; border-right: none; border-top: 1px solid #e2e8f0; border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,0.2); }
    #panel.closed { transform: translateY(100%); }
    #panel::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; background: #cbd5e1; border-radius: 3px; }
    .panel-header-toolbar { padding-top: 20px; border-bottom: none; }
}

/* =========================================================
   통합파일 툴박스 버튼
   ========================================================= */
.fias-tb-btn-analysis {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(180deg, #0d9488 0%, #0f766e 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(15,118,110,0.22);
    transition: background 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.fias-tb-btn-analysis:hover {
    background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%);
    box-shadow: 0 4px 12px rgba(15,118,110,0.32);
}
.fias-tb-btn-export {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 7px 4px;
    border: 1px solid #e9d59a;
    border-radius: 7px;
    background: #fffbf0;
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s, color 0.13s;
    font-family: inherit;
}
.fias-tb-btn-export:hover {
    background: #fef3c7;
    border-color: #f5c842;
    color: #78350f;
}

/* 측정 도구 (js/modules/measure.js) — 통합분석/데이터센터 dock에 흡수시킨 '측정' 버튼 + 측정 패널 */
/* dock의 '측정' 버튼 켜짐 상태: main.js가 .active만 건드리므로 별도 클래스(fias-measure-on)를 쓴다.
   색은 측정 도구 포인트색(--ui-slate)으로 통일. */
.floating-dock-btn.fias-measure-on {
    background: var(--ui-slate);
    border-color: var(--ui-slate);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(15,23,42,0.18);
}
.floating-dock-btn.fias-measure-on .material-symbols-outlined { color: #ffffff; }
/* 측정 바(#fias-measure-toolbox): dock 위로 올라오는 가로 버튼 바. 폭은 통합분석 패널과 동일(185px). */
.fias-measure-bar {
    position: fixed;
    z-index: 2147483000;
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 7px;
    width: var(--fias-dock-width);
    background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.98) 100%);
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15,23,42,0.14);
    box-sizing: border-box;
    backdrop-filter: blur(8px);
}
/* 185px 안에 3칸이 들어가도록 dock 버튼과 같은 컴팩트(아이콘 위, 라벨 아래) 배치 */
.fias-measure-bar-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 3px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.fias-measure-bar-btn:hover { background: #f8fafc; }
.fias-measure-bar-btn .material-symbols-outlined { font-size: 18px; }
.fias-measure-bar-btn.is-active {
    background: var(--ui-slate);
    border-color: var(--ui-slate);
    color: #ffffff;
}
.fias-measure-bar-btn.is-active .material-symbols-outlined { color: #ffffff; }
@media (max-width: 768px) { .fias-measure-bar { display: none !important; } }
/* 버튼 호버 시 기능설명 + 간단 사용법 카드 (index.html #forest-hint 와 동일 톤) */
#fias-measure-hint {
    position: fixed; z-index: 2147483000; width: 240px; max-width: calc(100vw - 24px);
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15,23,42,0.14), 0 4px 10px rgba(15,23,42,0.08);
    padding: 12px 13px; font-family: "Pretendard","Malgun Gothic",sans-serif;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none;
}
#fias-measure-hint.show { opacity: 1; visibility: visible; transform: translateY(0); }
#fias-measure-hint .rail-hint-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 900; color: #0f172a; margin-bottom: 8px; letter-spacing: -0.3px; }
#fias-measure-hint .rail-hint-title .material-symbols-outlined { font-size: 17px; color: var(--ui-slate); }
#fias-measure-hint .rail-hint-desc { font-size: 11.5px; line-height: 1.5; color: #64748b; margin: -3px 0 0; word-break: keep-all; }
#fias-measure-hint .rail-hint-foot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #cbd5e1; font-size: 11px; color: #334155; font-weight: 800; line-height: 1.45; word-break: keep-all; }
@media (max-width: 768px) { #fias-measure-hint { display: none !important; } }
.fias-measure-tooltip {
    font-family: "Pretendard","Malgun Gothic",sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    border: 1px solid var(--ui-slate-bd);
    box-shadow: 0 2px 8px rgba(15,23,42,0.12);
    padding: 5px 9px;
}
.fias-measure-tt-sub {
    font-weight: 600;
    font-size: 11px;
    color: #475569;
    margin-top: 1px;
}
.fias-measure-tt-hint {
    font-weight: 500;
    font-size: 10.5px;
    color: #94a3b8;
    margin-top: 3px;
}
.fias-measure-tooltip--final {
    color: var(--ui-slate-deep);
    background: var(--ui-slate-tint) !important;
    padding: 4px 5px 4px 9px;
    pointer-events: auto;   /* 라벨(=✕ 버튼) 클릭으로 삭제 가능하게 */
}
/* 측정 중에는 라벨이 지도 클릭(새 점 찍기)을 가로채지 않도록 클릭 비활성 */
.fias-measuring .fias-measure-tooltip--final { pointer-events: none; }
.fias-measure-tt-row { display: flex; align-items: center; gap: 8px; }
.fias-measure-tt-info { min-width: 0; }
.fias-measure-tt-x {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: #ef4444;
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.fias-measure-tt-x:hover { background: #dc2626; }

/* ═══════ AI 챗봇 — 우측하단 플로팅 (2026-08-07) ═══════ */
/* 데스크톱: 우측하단 dock(측정·통합분석·데이터센터, 폭 --fias-dock-width) 왼쪽으로 배치해 가려지지 않게 함 */
.ai-chat-wrap { position: fixed; right: calc(var(--fias-dock-width) + 24px); bottom: 18px; z-index: 2147483150; }
.ai-chat-fab {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
    background: #ffffff; color: #0f172a; border: 1px solid #e2e8f0;
    box-shadow: 0 10px 26px rgba(2,6,23,0.18), 0 0 0 1px rgba(56,189,248,0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease; font-family: inherit;
}
.ai-chat-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 30px rgba(2,6,23,0.24), 0 0 0 1px rgba(56,189,248,0.55); }
.ai-chat-fab .material-symbols-outlined { font-size: 26px; line-height: 1; color: inherit; }
.ai-chat-fab-label { font-size: 9px; font-weight: 900; letter-spacing: 0; color: #0e7490; }

.ai-chat-popover {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 2147483640;
    width: min(720px, calc(100vw - 32px)); height: min(600px, calc(100dvh - 96px));
    max-height: calc(100dvh - 48px); background: #ffffff; border: 1px solid #bae6fd; border-radius: 16px; overflow: hidden;
    flex-direction: column; box-shadow: 0 22px 60px rgba(15,23,42,0.28), 0 6px 20px rgba(15,23,42,0.12);
}
.ai-chat-popover.open { display: flex; }
.ai-chat-popover-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 15px; background: #f0f9ff; border-bottom: 1px solid #bae6fd; flex: 0 0 auto;
}
.ai-chat-title-group { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ai-chat-title-group .material-symbols-outlined { font-size: 22px; color: #0284c7; }
.ai-chat-title-group strong { display: block; color: #0f172a; font-size: 13px; line-height: 1.2; }
.ai-chat-title-group small { display: block; margin-top: 2px; color: #64748b; font-size: 10.5px; }
.ai-chat-header-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ai-chat-model-badge {
    display: inline-flex; align-items: center; height: 23px; padding: 0 8px; border-radius: 999px;
    background: #e0f2fe; border: 1px solid #bae6fd; color: #0369a1; font-size: 10px; font-weight: 900; white-space: nowrap;
}
.ai-chat-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px;
    border: 1px solid #bae6fd; border-radius: 8px; background: #ffffff; color: #475569; cursor: pointer;
}
.ai-chat-icon-btn:hover { background: #e0f2fe; color: #075985; }
.ai-chat-icon-btn .material-symbols-outlined { font-size: 17px; line-height: 1; }
.ai-chat-status { padding: 8px 14px 2px; font-size: 11px; color: #64748b; line-height: 1.45; flex: 0 0 auto; }
.ai-chat-history-row { flex: 0 0 auto; padding: 7px 14px 0; }
.ai-chat-history-row select {
    width: 100%; height: 30px; padding: 0 8px; border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 11px; color: #334155; background: #ffffff; box-sizing: border-box; outline: none;
}
.ai-chat-history-row select:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.16); }
.ai-chat-history-row select:disabled { color: #94a3b8; background: #f8fafc; }
.ai-streaming-body::after { content: '▍'; margin-left: 2px; color: #0284c7; animation: ai-caret-blink 1s steps(2, start) infinite; }
@keyframes ai-caret-blink { to { visibility: hidden; } }

.ai-chat-layout { flex: 1 1 auto; min-height: 0; display: flex; border-top: 1px solid #e2e8f0; }
.ai-chat-sidebar { flex: 0 0 180px; min-width: 0; display: flex; flex-direction: column; background: #f8fafc; border-right: 1px solid #e2e8f0; }
.ai-chat-sidebar-head { padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 8px; }
.ai-chat-sidebar-title { font-size: 11px; font-weight: 900; color: #334155; }
.ai-chat-new-conv-btn { height: 30px; border: 1px solid #bae6fd; background: #ffffff; color: #0369a1; border-radius: 8px; font-size: 11px; font-weight: 900; cursor: pointer; }
.ai-chat-new-conv-btn:hover { background: #f0f9ff; }
.ai-chat-conv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.ai-chat-conv-empty { font-size: 11px; color: #94a3b8; padding: 10px 4px; line-height: 1.5; }
.ai-conv-item { border-radius: 8px; padding: 7px 8px; cursor: pointer; border: 1px solid transparent; }
.ai-conv-item:hover { background: #eef2f6; }
.ai-conv-item.active { background: #e0f2fe; border-color: #bae6fd; }
.ai-conv-title { font-size: 11px; font-weight: 800; color: #1e293b; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ai-conv-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.ai-conv-time { font-size: 9px; color: #94a3b8; }
.ai-conv-del { background: transparent; border: none; color: #94a3b8; cursor: pointer; display: inline-flex; align-items: center; padding: 2px; border-radius: 4px; }
.ai-conv-del:hover { color: #dc2626; background: #fee2e2; }
.ai-conv-del .material-symbols-outlined { font-size: 14px; }
.ai-chat-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #ffffff; }
.ai-chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; background: #ffffff; }
.ai-chat-user-row { flex: 0 0 auto; padding: 0 14px 8px; }
.ai-chat-user-row input {
    width: 100%; height: 30px; padding: 0 10px; border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 11px; outline: none; box-sizing: border-box; background: #f8fafc;
}
.ai-chat-user-row input:focus, .ai-chat-composer textarea:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.16); }
.ai-chat-composer { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.ai-chat-composer textarea {
    flex: 1; min-width: 0; min-height: 38px; max-height: 120px; padding: 9px 11px; border: 1px solid #cbd5e1;
    border-radius: 10px; font-size: 12px; font-family: 'Pretendard', 'Malgun Gothic', sans-serif; resize: vertical;
    box-sizing: border-box; outline: none; line-height: 1.5;
}
.ai-chat-composer button {
    flex: 0 0 auto; min-width: 64px; height: 36px; padding: 0 14px; background: #0284c7; color: #ffffff;
    border: none; border-radius: 9px; font-size: 12px; font-weight: 900; cursor: pointer;
    box-shadow: 0 6px 16px rgba(2,132,199,0.22);
}
.ai-chat-composer button:hover { background: #0369a1; }
.ai-chat-composer button:disabled { cursor: wait; opacity: 0.65; box-shadow: none; }

@media (max-width: 768px) {
    /* 모바일: 챗봇 미제공 */
    .ai-chat-wrap, .ai-chat-fab, .ai-chat-popover { display: none !important; }
}