* { box-sizing: border-box; }
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      font-family: "Segoe UI", "Malgun Gothic", sans-serif;
      background: #0b111a;
    }

    #vmap {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    #panel {
      position: fixed;
      z-index: 1000;
      top: 16px;
      left: 16px;
      width: 340px;
      padding: 14px;
      border-radius: 14px;
      background: rgba(20, 24, 32, 0.92);
      color: #fff;
      box-shadow: 0 10px 30px rgba(0,0,0,.30);
      backdrop-filter: blur(10px);
      user-select: none;
      /* 내용이 화면보다 길면 패널 안에서 스크롤 (아래 항목이 잘려 안 보이던 것 방지) */
      max-height: calc(100vh - 32px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: #3b4657 transparent;
    }
    #panel::-webkit-scrollbar { width: 6px; }
    #panel::-webkit-scrollbar-thumb { background: #3b4657; border-radius: 3px; }

    #panel h1 {
      font-size: 16px;
      margin: 0 0 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .section-title {
      font-size: 12px;
      font-weight: 700;
      color: #cbd5e1;
      margin: 12px 0 7px;
    }

    .search-row {
      display: flex;
      gap: 6px;
    }

    #searchInput {
      flex: 1;
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid #475569;
      border-radius: 8px;
      background: #111827;
      color: #fff;
      outline: none;
      font-size: 13px;
    }

    #searchInput:focus {
      border-color: #3b82f6;
    }

    button {
      border: 0;
      border-radius: 8px;
      padding: 8px 9px;
      cursor: pointer;
      font-weight: 700;
      background: #303746;
      color: #fff;
    }

    button:hover { background: #3d4658; }
    button.primary { background: #2563eb; }
    button.primary:hover { background: #1d4ed8; }
    button.wide { width: 100%; margin-top: 8px; }
    button:disabled { opacity: .45; cursor: default; }

    #searchBtn {
      width: 62px;
      flex: 0 0 62px;
    }

    #searchResults {
      display: none;
      margin-top: 7px;
      max-height: 240px;
      overflow-y: auto;
      border: 1px solid #374151;
      border-radius: 9px;
      background: rgba(11, 17, 26, .98);
    }

    .result-item {
      padding: 9px 10px;
      border-bottom: 1px solid #273244;
      cursor: pointer;
    }

    .result-item:last-child { border-bottom: 0; }
    .result-item:hover { background: #1f2937; }

    .result-title {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      line-height: 1.3;
    }

    .result-address {
      margin-top: 3px;
      font-size: 11px;
      color: #9ca3af;
      line-height: 1.35;
    }

    #searchInfo {
      margin-top: 6px;
      min-height: 15px;
      font-size: 11px;
      color: #9ca3af;
    }

    .lens-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
    }
    /* 렌즈 버튼 안의 '기본' 표시 (브이월드 기본 화각 약 31.18mm) */
    .lens-grid button { min-height: 42px; }
    .lens-btn { position: relative; }
    .lens-btn .lens-def {
      display: block;
      margin-top: 1px;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .5px;
      color: #93c5fd;
    }
    .lens-btn.active .lens-def { color: #dbeafe; }

    .lens-btn.active {
      background: #2563eb;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
    }

    .row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
    }

    .grow { flex: 1; }

    input[type="range"] {
      width: 100%;
    }

    #fovValue {
      width: 105px;
      text-align: right;
      font-size: 12px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    #status {
      margin-top: 10px;
      padding-top: 9px;
      border-top: 1px solid rgba(255,255,255,.12);
      font-size: 11px;
      color: #cbd5e1;
      line-height: 1.45;
    }

    #status.ok { color: #9ef0b6; }
    #status.err { color: #ffb4b4; }

    .hint {
      margin-top: 8px;
      color: #94a3b8;
      font-size: 10px;
      line-height: 1.45;
    }



    .crop-mode-box {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #3f4b5f;
      border-radius: 10px;
      background: rgba(17, 24, 39, .86);
    }

    .crop-mode-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .crop-mode-top label {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
    }

    .crop-mode-top input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: #2563eb;
    }

    #cropModeReadout {
      margin-top: 8px;
      padding: 7px 8px;
      border-radius: 7px;
      background: rgba(37, 99, 235, .14);
      color: #bfdbfe;
      font-size: 11px;
      line-height: 1.45;
    }

    #cropModeReadout.active {
      color: #dbeafe;
      background: rgba(37, 99, 235, .24);
    }

    .crop-pan-row {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }
    .crop-pan-row button {
      flex: 1;
      padding: 7px 4px;
      font-size: 12px;
    }
    .crop-pan-row button:active:not(:disabled) {
      background: #2563eb;
    }

    .crop-mode-help {
      margin-top: 6px;
      color: #94a3b8;
      font-size: 10px;
      line-height: 1.45;
    }

    .option-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 8px;
      padding: 9px 10px;
      border: 1px solid #374151;
      border-radius: 9px;
      background: rgba(17, 24, 39, .72);
      font-size: 12px;
    }

    .option-row label {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .option-row input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: #2563eb;
    }


    .option-select {
      min-width: 78px;
      padding: 6px 7px;
      border: 1px solid #475569;
      border-radius: 7px;
      background: #111827;
      color: #fff;
      font-size: 11px;
      outline: none;
    }

    .option-select:disabled {
      opacity: .45;
    }

    .mini-note {
      margin-top: 5px;
      color: #94a3b8;
      font-size: 10px;
      line-height: 1.35;
    }

    #captureBtn {
      background: #0f766e;
    }

    #captureBtn:hover {
      background: #0d9488;
    }



    #panel {
      transition: transform .18s ease, opacity .18s ease;
    }

    #panel.panel-collapsed {
      transform: translateX(calc(-100% - 28px));
      opacity: 0;
      pointer-events: none;
    }

    #panelCollapseBtn {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 30px;
      height: 30px;
      padding: 0;
      border-radius: 7px;
      font-size: 16px;
      line-height: 30px;
      text-align: center;
      background: #303746;
      color: #fff;
      z-index: 2;
    }

    #panelCollapseBtn:hover {
      background: #465063;
    }

    #panelOpenBtn {
      position: fixed;
      z-index: 1001;
      top: 16px;
      left: 0;
      width: 34px;
      height: 52px;
      padding: 0;
      border: 0;
      border-radius: 0 9px 9px 0;
      background: rgba(20, 24, 32, .92);
      color: #fff;
      font-size: 19px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 5px 18px rgba(0,0,0,.25);
      backdrop-filter: blur(8px);
      display: none;
    }

    #panelOpenBtn:hover {
      background: rgba(48, 55, 70, .96);
    }

    #panelOpenBtn.visible {
      display: block;
    }

    #panel h1 {
      padding-right: 36px;
    }

    #setup {
      position: fixed;
      inset: 0;
      z-index: 5000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(10, 14, 20, .88);
      backdrop-filter: blur(6px);
    }

    #setup.hidden { display: none; }

    .setup-card {
      width: min(560px, calc(100vw - 32px));
      padding: 22px;
      border-radius: 16px;
      background: #fff;
      color: #111827;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
    }

    .setup-card h2 {
      margin: 0 0 8px;
      font-size: 20px;
    }

    .setup-card p {
      margin: 6px 0;
      color: #4b5563;
      font-size: 13px;
      line-height: 1.55;
    }

    .setup-card input {
      width: 100%;
      margin-top: 12px;
      padding: 11px 12px;
      border: 1px solid #cfd4dc;
      border-radius: 9px;
      font-size: 14px;
    }

    .setup-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    .setup-actions button { flex: 1; padding: 10px; }

    #setupMsg {
      min-height: 18px;
      margin-top: 9px;
      color: #b42318;
      font-size: 12px;
      line-height: 1.45;
    }


/* v3.12 image ground overlay */
.overlay-box{padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.035)}
.overlay-actions{display:flex;gap:6px;margin:6px 0}.overlay-actions button{flex:1;min-width:0}
.overlay-anchor-wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;font-size:11px;color:#cbd5e1}
.anchor-grid{display:grid;grid-template-columns:repeat(3,28px);gap:2px}.anchor-grid button{height:24px;padding:0;font-size:11px}.anchor-grid button.active{background:#2563eb;border-color:#60a5fa;color:#fff}
.overlay-control-row{display:flex;gap:7px;margin:7px 0}.overlay-control-row label{flex:1;font-size:11px;color:#cbd5e1}.overlay-control-row input[type=number]{width:100%;box-sizing:border-box;margin-top:3px;padding:6px;background:#111827;border:1px solid #46505f;border-radius:5px;color:#fff}.overlay-control-row input[type=range]{width:100%;margin-top:8px}
.overlay-lock{display:block;margin:7px 0;font-size:11px;color:#cbd5e1}
#overlayPickBtn.picking{background:#b45309;border-color:#f59e0b;color:#fff}


/* v3.13 mouse edit overlay */
#overlayEditorLayer{position:fixed;inset:0;z-index:950;pointer-events:none;touch-action:none;user-select:none}
#overlayEditorSvg{width:100%;height:100%;overflow:visible}
#overlayEditorFill{fill:rgba(37,99,235,.10);stroke:none;pointer-events:auto;cursor:move;touch-action:none}
#overlayEditorOutline{fill:none;stroke:#60a5fa;stroke-width:2;stroke-dasharray:8 5;pointer-events:none}
#overlayRotateStem{stroke:#fbbf24;stroke-width:2;pointer-events:none}
#overlayPivotStem{stroke:#ef4444;stroke-width:3;stroke-linecap:round;pointer-events:none}
.overlay-editor-handle{fill:#fff;stroke:#0f172a;stroke-width:2;pointer-events:auto;touch-action:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.overlay-editor-handle.edge{fill:#93c5fd}
.overlay-editor-handle.corner{cursor:nwse-resize}
#overlayHandleTR,#overlayHandleBL{cursor:nesw-resize}
.overlay-editor-handle.edge.horizontal{cursor:ew-resize}
.overlay-editor-handle.edge.vertical{cursor:ns-resize}
#overlayRotateHandle{fill:#fbbf24;stroke:#78350f;cursor:grab}
#overlayRotateHandle:active{cursor:grabbing}
#overlayPivotMarker{fill:#ef4444;stroke:#fff;stroke-width:2;pointer-events:none}
#overlayEditorLayer.hidden{display:none}

/* v3.19 뷰 가이드 (화면 고정 참고 이미지) */
#viewGuideLayer{position:fixed;inset:0;z-index:940;display:flex;align-items:center;justify-content:center;pointer-events:none}
#viewGuideLayer.hidden{display:none}
#viewGuideLayer{overflow:hidden}
#viewGuideImg{width:100vw;height:auto;pointer-events:none;user-select:none}

/* v3.19 패널 섹션 접기/펴기 */
#panel .section-title{cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px}
#panel .section-title::before{content:"▾";font-size:10px;color:#60a5fa;transition:transform .15s}
#panel .section-title.collapsed::before{transform:rotate(-90deg)}
#panel .section-body.collapsed{display:none}

/* v3.23 포인트 매칭 */
#viewGuideLayer.pick-mode{pointer-events:auto;cursor:crosshair}
#viewGuideLayer.pick-mode #viewGuideImg{pointer-events:none}
#matchPhotoPins{position:fixed;inset:0;z-index:945;pointer-events:none}
.match-pin{position:fixed;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;display:grid;place-items:center;
  font:800 11px 'Malgun Gothic',sans-serif;color:#fff;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.55);cursor:pointer;pointer-events:auto}
.match-pin.photo{background:#e11d48}
.match-pin::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:2px;background:#fff;transform:translate(-50%,-50%);border-radius:50%}
#matchPhotoBtn.picking,#matchMapBtn.picking{background:#b45309;border-color:#f59e0b;color:#fff}

/* v3.24 카메라 리스트 */
.cam-list{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto;margin-bottom:6px}
.cam-row{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:rgba(255,255,255,.04)}
.cam-row .cam-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;font-weight:700;color:#dbe4f0}
.cam-row .cam-name:hover{color:#93c5fd}
.cam-row button{flex:0 0 auto;width:24px;height:24px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:5px;background:transparent;color:#8b93a5;cursor:pointer;font-size:12px;line-height:1}
.cam-row button:hover{background:rgba(255,255,255,.1);color:#fff}
.cam-row button.del:hover{background:#7f1d1d;color:#fff}

/* 앞뒤 미세 조정 (달리) */
.dolly-row{align-items:center}
.dolly-row select{width:100%;box-sizing:border-box;margin-top:3px;padding:6px;background:#111827;border:1px solid #46505f;border-radius:5px;color:#fff;font-size:12px}
.dolly-col{display:flex;flex-direction:column;gap:4px;flex:0 0 104px}
.dolly-col button{padding:7px 4px;font-size:12px;border-radius:6px;border:1px solid #46505f;background:#1f2937;color:#e5e7eb;cursor:pointer;user-select:none;touch-action:none}
.dolly-col button:hover:not(:disabled){background:#273449}
.dolly-col button:active:not(:disabled){background:#2563eb;border-color:#2563eb;color:#fff}
.dolly-col button:disabled{opacity:.45;cursor:default}