/* Camera overlays never resize the image frame or shutter rail. */
.route-guide{position:absolute;inset:0;overflow:hidden;z-index:12;color:#fff;font-family:inherit;pointer-events:none;text-align:left;}
.rg-summary{position:absolute;left:12px;bottom:12px;width:min(310px,calc(100% - 82px));box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #ffffff30;border-radius:14px;background:#122b22ed;box-shadow:0 4px 16px #0003;}
.rg-arrow{display:block;flex:0 0 26px;text-align:center;font-size:26px;color:#b6edc6;transition:transform .2s;}
.rg-copy{min-width:0;flex:1;}.rg-title{display:block;font-size:12px;line-height:1.4;}.rg-note{display:block;color:#cfddd5;font-size:10px;line-height:1.4;margin-top:2px;}
.route-guide button{min-height:44px;border:1px solid #ffffff40;border-radius:10px;padding:6px 10px;background:#ffffff14;color:#fff;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
.route-guide button:disabled{opacity:.45;cursor:default;}.route-guide button:focus-visible,.rg-reference:focus-visible{outline:3px solid #b6edc6;outline-offset:-3px;}
.rg-drawer{position:absolute;right:0;top:134px;bottom:92px;width:min(268px,calc(100% - 96px));transform:translateX(100%);transition:transform .2s ease;pointer-events:none;}
.rg-drawer.rg-open{transform:translateX(0);}.rg-drawer.rg-dragging{transition:none;}
.route-guide .rg-toggle{pointer-events:auto;position:absolute;left:-44px;top:50%;transform:translateY(-50%);width:44px;min-height:90px;padding:8px 3px;border-radius:14px 0 0 14px;background:#133e30ed;touch-action:none;user-select:none;-webkit-user-select:none;font-size:25px;line-height:1.2;box-shadow:-3px 0 12px #0003;}
.rg-toggle span{display:block;font-size:11px;margin-top:6px;}
.rg-panel{pointer-events:auto;height:100%;display:flex;flex-direction:column;border:1px solid #ffffff35;border-right:0;overflow:hidden;border-radius:16px 0 0 16px;background:#122b22f5;box-shadow:0 4px 18px #0005;box-sizing:border-box;}
.rg-panel[hidden]{display:none!important;}
.rg-drawer-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;font-size:12px;gap:4px;}.route-guide .rg-fold{border:0;background:none;}
.rg-map{min-height:32px;flex:1;position:relative;overflow:hidden;background:#263c30;isolation:isolate;}
.rg-tiles,.rg-pins{position:absolute;inset:0;pointer-events:none;}.rg-tiles img{position:absolute;width:256px!important;height:256px!important;max-width:none!important;object-fit:fill!important;}
.rg-pin,.rg-me,.rg-accuracy{position:absolute;transform:translate(-50%,-50%);border-radius:50%;box-sizing:border-box;}
.rg-pin{display:flex;align-items:center;justify-content:center;width:25px;height:25px;font:bold 11px sans-serif;background:#344b43;color:white;border:2px solid white;box-shadow:0 1px 5px #0008;z-index:2;}
.rg-done{background:#0c7951;}.rg-target{width:35px;height:35px;background:#f3cf77;color:#14261c;border:3px solid #fff;z-index:4;box-shadow:0 0 0 5px #f3cf7740;}
.rg-me{width:14px;height:14px;border:2px solid white;background:#419bff;z-index:5;box-shadow:0 0 0 3px #419bff50;}.rg-accuracy{background:#419bff25;border:1px solid #419bff80;z-index:1;}
.rg-north{position:absolute;top:8px;left:8px;border-radius:8px;padding:5px 7px;background:#13291dcc;font-size:11px;font-weight:bold;z-index:6;}.rg-credit{position:absolute;bottom:0;right:0;background:#ffffffd9;color:#23352a;padding:2px 4px;font:8px sans-serif;z-index:6;}
.rg-map-error{position:absolute;bottom:18px;left:8px;right:8px;padding:7px;background:#15251aee;border-radius:8px;font-size:11px;z-index:7;}.rg-map-error[hidden]{display:none;}
.rg-legend{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;gap:4px;font-size:9px;}.rg-legend button{font-size:10px;min-height:36px;}

.rg-reference{position:absolute;z-index:15;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));width:80px;height:74px;padding:0;overflow:hidden;box-sizing:border-box;border:2px solid #fff;border-radius:12px;background:#122b22;color:white;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 3px 15px #0005;cursor:pointer;}
.rg-reference img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.rg-reference span{position:absolute;bottom:0;left:0;right:0;padding:5px 0;font-size:9px;font-weight:700;background:#122b22dc;pointer-events:none;}
.rg-reference[hidden],.rg-peek[hidden]{display:none!important;}
.rg-peek{position:absolute;inset:0;z-index:14;background:#07100ff2;pointer-events:none;display:flex;align-items:center;justify-content:center;}
.rg-peek img{width:100%;height:100%;object-fit:contain;}
.rg-peek>span{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:#122b22e8;border-radius:20px;padding:8px 12px;font-size:12px;color:#fff;white-space:nowrap;}
#cameraStage.rg-equipped .cam-topbar{padding-left:max(104px,calc(env(safe-area-inset-left) + 92px));}
#cameraStage.rg-equipped .cam-tools{left:max(12px,env(safe-area-inset-left));right:auto;top:110px;bottom:auto;}
#cameraStage>.route-guide .rg-summary{bottom:calc(158px + env(safe-area-inset-bottom));left:94px;width:calc(100% - 150px);}
#cameraStage>.route-guide .rg-drawer{top:max(118px,calc(env(safe-area-inset-top) + 94px));bottom:calc(235px + env(safe-area-inset-bottom));}
#cameraStage>.rg-peek{bottom:calc(150px + env(safe-area-inset-bottom));}
/* 세로 화면: 전 사진 미리보기는 왼쪽 아래(거리 안내 왼쪽 빈자리)로 — 왼쪽 위에 두면 겹쳐보기 도구의 [전체/분할]을 가렸다(v216, 사장님 요청).
   위쪽 막대는 원래 여백으로 되돌린다. 가로 화면은 도구가 아래까지 내려오므로 그대로 왼쪽 위. */
@media(orientation:portrait){
 #cameraStage>.rg-reference{top:auto;bottom:calc(158px + env(safe-area-inset-bottom));}
 #cameraStage.rg-equipped .cam-topbar{padding-left:16px;}
}
/* The shared camera keeps the before image ratio, including landscape references. */
#capFrame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;}
#capFrame .cap-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33.1%,#fff3 33.1%,#fff3 33.4%,transparent 33.4%,transparent 66.4%,#fff3 66.4%,#fff3 66.7%,transparent 66.7%),linear-gradient(to bottom,transparent 33.1%,#fff3 33.1%,#fff3 33.4%,transparent 33.4%,transparent 66.4%,#fff3 66.4%,#fff3 66.7%,transparent 66.7%);}
#capStage.rg-equipped .cap-ref{visibility:hidden;}
#capStage .cap-top{pointer-events:none;}#capStage .cap-top button{pointer-events:auto;}
@media(orientation:landscape) and (max-height:600px){
  #capOv.on{flex-direction:row;}
  #capStage{height:100%;min-width:0;}
  #capCtrl{width:180px;flex:none;box-sizing:border-box;padding:10px max(10px,env(safe-area-inset-right)) 10px 10px;overflow-y:auto;}
  #capCtrl .cap-step{flex-wrap:wrap;gap:5px;justify-content:center;}
  #capCtrl .cap-step span{width:100%;order:-1;text-align:center;}
  #capCtrl .cap-step button{padding:8px;font-size:11px;}
  #capCtrl .cap-op{font-size:10px;gap:5px;}
  .rg-drawer{top:112px;bottom:10px;width:min(258px,calc(100% - 172px));}
  .rg-legend{flex-wrap:wrap;}.rg-legend span{flex:1;white-space:nowrap;}
  #cameraStage>.route-guide{right:118px;}
  #cameraStage>.route-guide .rg-drawer{top:82px;bottom:72px;}
  #cameraStage>.route-guide .rg-summary{left:94px;bottom:8px;width:min(310px,calc(100% - 108px));}
  #cameraStage>.rg-peek{bottom:0;right:118px;}
  #cameraStage.rg-equipped .cam-tools{top:96px;}
  .rg-reference{height:62px;width:80px;}
}
@media(prefers-reduced-motion:reduce){.rg-drawer,.rg-arrow{transition:none;}}

@media(orientation:portrait) and (max-height:650px){
 .rg-drawer{top:118px;bottom:78px;}
 #cameraStage>.route-guide .rg-drawer{top:110px;bottom:220px;}
}

#cameraStage.rg-equipped #btnOverlayFind{display:none;}
#capCtrl .cap-op>span,#capCtrl .cap-op>b{flex:none;white-space:nowrap;}
#capCtrl .cap-op input[type=range]{width:0;min-width:0;flex:1;}
#capCtrl .cap-step button{white-space:nowrap;min-height:44px;}
@media(orientation:portrait) and (max-width:360px){
 #capCtrl{padding:10px 12px calc(10px + env(safe-area-inset-bottom));}
 #capCtrl .cap-step{gap:4px;flex-wrap:wrap;justify-content:center;}
 #capCtrl .cap-step span{width:100%;order:-1;text-align:center;}
 #capCtrl .cap-step button{padding:6px 12px;}
}

@media(orientation:landscape) and (max-height:600px){
 #cameraStage.rg-equipped .cam-topbar{padding-right:max(16px,env(safe-area-inset-right));}
 #cameraStage.rg-equipped .cam-bottom{width:calc(108px + env(safe-area-inset-right));padding-right:calc(10px + env(safe-area-inset-right));}
 #cameraStage>.route-guide{right:calc(118px + env(safe-area-inset-right));}
 #cameraStage>.rg-peek{right:calc(118px + env(safe-area-inset-right));}
}