:root{
  --navy:#0b2c57; --navy-2:#12407d; --ink:#14202e; --muted:#5a6878;
  --paper:#f2f5f7; --line:#d5dde4; --panel:#fff; --stake:#f26b1d;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#e8edf2; --muted:#a3b0be; --paper:#0d1a2b; --line:#24364c; --panel:#12233a}
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;color:var(--ink);background:var(--paper);font-size:14.5px;line-height:1.55;word-break:keep-all;display:flex;flex-direction:column}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--stake);outline-offset:2px}
.muted{color:var(--muted)}
[hidden]{display:none!important}

/* 상단 */
.top{height:52px;flex:none;display:flex;align-items:center;gap:6px;padding:0 14px;background:var(--navy);color:#fff}
.brand{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:18px;text-decoration:none;color:#fff;letter-spacing:-.02em}
.brand img{display:block;flex:none}
.brand span{font-weight:600;color:#9fc0ea}
.back{color:#fff;text-decoration:none;font-size:20px;width:36px;height:36px;display:grid;place-items:center;border-radius:6px}
.back:hover{background:rgba(255,255,255,.12)}

/* 프로젝트 목록 */
.gallery{flex:1;overflow-y:auto;padding:28px 20px 48px}
.gallery>*{max-width:1120px;margin-left:auto;margin-right:auto}
.gallery-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.gallery h1{font-size:26px;letter-spacing:-.02em}
.gallery-head input{width:min(280px,100%);padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.cats{display:flex;gap:6px;flex-wrap:wrap;margin:18px auto 16px}
.cats button{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:4px 12px;font-size:13.5px}
.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card a{display:block;text-decoration:none;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;height:100%;transition:border-color .15s,transform .15s}
.card a:hover{border-color:var(--navy-2);transform:translateY(-2px)}
.card .thumb{aspect-ratio:4/3;background:#1d2733 center/cover no-repeat;position:relative}
.card .badge{z-index:1;position:absolute;left:10px;top:10px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px}
.card .body{padding:12px 14px 14px}
.card h2{font-size:16.5px}
.card p{font-size:13px;color:var(--muted)}
.chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.chips span{font-size:11.5px;border:1px solid var(--line);border-radius:10px;padding:1px 7px;color:var(--muted)}
.chips span.on{border-color:var(--navy-2);color:var(--ink);font-weight:600}
.empty-list{color:var(--muted)}
.card.group .thumb.two{background-size:50% 100%,50% 100%;background-position:left center,right center}
.card .count{z-index:1;position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px}
.cats .group-title{font-size:18px}
.proj-note{font-size:12.5px;color:#b06a00;margin-top:2px}

/* 암호 */
.lock{flex:1;display:grid;place-items:center;padding:20px}
.lock-box{width:min(340px,100%);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;display:grid;gap:10px;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.lock-box h2{font-size:18px}
.lock-box input{padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:16px;letter-spacing:.2em}
.lock-err{color:#c0392b;font-size:13px}
.lock-box .btns{justify-content:flex-end;margin-top:4px}
.lock-box .primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-link{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:8px;text-decoration:none}
.top-right{margin-left:auto;display:flex;gap:6px;flex:none}
.brand{white-space:nowrap}

.top-btn{padding:5px 12px;border:1px solid rgba(255,255,255,.45);border-radius:8px;color:#fff;text-decoration:none;font-size:13.5px;white-space:nowrap}
.share-only #back{display:none!important}
.top-btn:hover{background:rgba(255,255,255,.12)}
.card .thumb.locked{overflow:hidden}
.card .thumb.locked::before{content:"";position:absolute;inset:0;backdrop-filter:blur(8px);background:rgba(13,26,43,.25)}
.card .lockmark{z-index:1;position:absolute;right:10px;top:10px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px}

/* 프로젝트 화면 */
.project{flex:1;display:flex;flex-direction:column;min-height:0}
.proj-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.proj-title h1{font-size:18px;letter-spacing:-.02em}
.proj-title p{font-size:13px}
.date-pick{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.date-pick select{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}
.tabs{display:flex;gap:2px;padding:0 10px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 14px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--stake)}
.tabs button.nodata{opacity:.5;font-weight:500}
.tabs button:hover{color:var(--ink)}
.panes{position:relative;flex:1;min-height:0}
.pane{position:absolute;inset:0}
.pane.dark{background:#1d2733}
.pane.empty{display:grid;place-items:center;text-align:center;padding:20px}
.pane.empty h2{font-size:18px;margin-bottom:6px}
.empty-alts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}

/* 2D 지도 */
#map{position:absolute;inset:0;background:#dfe5ea}
.ol-zoom{top:auto;left:auto;right:10px;bottom:44px}
.ol-scale-line{left:auto;right:10px;bottom:10px}
.panel{position:absolute;top:10px;left:10px;z-index:10;width:270px;max-height:calc(100% - 70px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.panel-toggle{border:0;background:none;text-align:left;padding:9px 12px;font-weight:700}
.panel-toggle::after{content:"▾";float:right;color:var(--muted)}
.panel-toggle[aria-expanded=false]::after{content:"▸"}
.panel-body{overflow-y:auto;padding:0 12px 12px}
.panel h2{font-size:12.5px;color:var(--muted);margin:12px 0 6px}
.layers{list-style:none;padding:0;display:grid;gap:6px}
.layers li{border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.layers .head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.layers .head small{font-weight:400;color:var(--muted);margin-left:auto}
.layers .row{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:12.5px;color:var(--muted)}
.layers .row input{flex:1;min-width:0}
.layers output{width:3em;text-align:right;font-variant-numeric:tabular-nums}
.legend{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;margin-top:5px;font-size:12px;color:var(--muted)}
.legend i{height:8px;border-radius:4px;background:var(--ramp)}
.btns{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.btns button,.bases button,.tools button{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:6px 10px}
.btns button:hover,.bases button:hover,.tools button:hover{border-color:var(--navy-2)}
button[aria-pressed=true],button[aria-checked=true]{background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important}
.bases{display:flex;flex-wrap:wrap;gap:6px}
.tools{position:absolute;top:10px;right:10px;z-index:10;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 300px)}
.tools button{box-shadow:0 1px 4px rgba(0,0,0,.2)}
.tools button:disabled{opacity:.45;cursor:not-allowed}
.measure-hint{position:absolute;top:52px;right:10px;z-index:10;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:13px;max-width:260px}
.coords{position:absolute;left:10px;bottom:10px;z-index:10;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 10px 4px 4px;font-variant-numeric:tabular-nums;font-size:13px}
.coords button{border:0;background:var(--navy);color:#fff;border-radius:4px;padding:2px 8px;font-size:12px}
#height-text{font-weight:700;color:var(--stake)}
#height-text:empty{display:none}
.loading{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:10;background:var(--navy);color:#fff;border-radius:14px;padding:4px 14px;font-size:13px}

.measure-label{background:var(--stake);color:#fff;border-radius:4px;font-weight:700;font-size:12.5px;padding:2px 7px;white-space:nowrap}
.measure-label.live{opacity:.85}

.result{position:absolute;right:10px;bottom:110px;z-index:12;width:min(440px,calc(100% - 20px));max-height:calc(100% - 170px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.25);padding:12px 14px}
.result header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.result h3{font-size:15px}
.result header button{border:0;background:none;font-size:16px;width:28px;height:28px;border-radius:6px}
.result header button:hover{background:var(--paper)}
.stats{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-top:10px;font-size:13.5px}
.stats dt{color:var(--muted)}
.stats dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.stats .pos{color:#c0392b}
.stats .neg{color:#2471a3}
.field.inline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:13.5px;color:var(--muted)}
.field.inline select,.field.inline input{flex:1;max-width:240px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}
.note{margin-top:10px;font-size:12px;color:var(--muted)}
.tree-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:4px}
.tree-table th,.tree-table td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tree-table th:first-child,.tree-table td:first-child{text-align:left;color:var(--muted);white-space:normal}
.tree-table th{font-size:12.5px;color:var(--muted);font-weight:600}
.report-view{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;background:#5a6878}
.report-view[hidden]{display:none}
.report-view header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--navy);color:#fff}
.report-view h3{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-view .btns{margin:0}
.report-view .btns button{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.report-view #report-print{background:var(--stake);border-color:var(--stake)}
.report-view iframe{flex:1;border:0;background:#fff;width:min(1120px,100%);margin:0 auto}
.cap-big{display:grid;gap:2px;text-align:center;padding:10px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.cap-big span{font-size:12.5px;color:var(--muted)}
.cap-big b{font-size:24px;color:#d0021b;font-variant-numeric:tabular-nums}
.cap-big small{font-size:12px;color:var(--muted)}
.cap-pick{display:flex;gap:0;margin:0 0 10px}
.cap-pick button{flex:1;border:1px solid var(--line);background:var(--panel);padding:7px 8px;font-weight:600;color:inherit}
.cap-pick button:first-child{border-radius:6px 0 0 6px}
.cap-pick button:last-child{border-radius:0 6px 6px 0;margin-left:-1px}
.cf-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:2px 0 6px;font-size:12.5px;color:var(--muted)}
.cf-legend span{display:inline-flex;align-items:center;gap:6px}
.cf-legend i{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.2)}
.cap-table td.neg{color:#d0021b;font-weight:700}
.result.wide{width:min(600px,calc(100% - 20px));top:52px;bottom:auto;max-height:calc(100% - 60px)}
.result.wide{padding:10px 12px}
.result.wide header{margin-bottom:6px}
.result.wide .cap-pick{margin-bottom:6px}
.result.wide .cap-pick button{padding:5px 8px}
.result.wide .cap-big{padding:6px;margin-bottom:6px}
.result.wide .cap-big b{font-size:22px}
.result.wide .note{font-size:12px;margin-top:6px}
.result.wide .btns{margin-top:6px}
.cap-table{font-size:12.5px}
.cap-table th,.cap-table td{padding:3px 5px}
.cap-table th{white-space:normal;line-height:1.25}
.tree-dl{gap:8px}
.tree-dl .dl-group{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 4px 3px 8px}
.tree-dl .dl-group button{padding:3px 8px;font-size:12.5px}
.result .btns button[aria-pressed=true]{background:var(--stake)!important;border-color:var(--stake)!important}
.profile{width:100%;height:auto;display:block;touch-action:none}
.profile .line{fill:none;stroke:var(--stake);stroke-width:2}
.profile .fill{fill:rgba(242,107,29,.15)}
.profile .grid{stroke:var(--line);stroke-dasharray:3 3}
.profile .ax,.profile .tip{font-size:11px;fill:var(--muted)}
.profile .tip{fill:var(--ink);font-weight:700}
.profile .cursor{stroke:var(--ink);stroke-width:1}

.swipe{position:absolute;inset:0;z-index:5;pointer-events:none}
.swipe-handle{position:absolute;top:0;bottom:0;left:50%;width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:auto;cursor:ew-resize;touch-action:none}
.swipe-handle::after{content:"◀ ▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--navy);color:#fff;font-size:11px;padding:6px 8px;border-radius:14px;white-space:nowrap}
/* 비교 슬라이더: 왼쪽·오른쪽 정사영상 캔버스를 손잡이 위치에서 자름 */
#map{--swipe:50%}
#map .swipe-left{clip-path:inset(0 calc(100% - var(--swipe)) 0 0)}
#map .swipe-right{clip-path:inset(0 0 0 var(--swipe))}
.swipe-bar{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:11;display:flex;align-items:center;gap:10px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.25);padding:6px 10px;font-size:13px;white-space:nowrap;max-width:calc(100% - 20px)}
.swipe-bar[hidden]{display:none}
.swipe-bar label{display:flex;align-items:center;gap:6px;color:var(--muted)}
.swipe-bar select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:3px 6px;min-width:0}
.swipe-bar button{border:0;background:none;color:var(--muted);font-size:15px;cursor:pointer;padding:2px 4px}

/* 3D */
.c3d{position:absolute;inset:0}
.c3d .cesium-viewer-bottom,.c3d .cesium-viewer-toolbar{display:none}
#pane-3d .tools{max-width:none}
#pane-3d .tools button{background:rgba(11,44,87,.85);border-color:rgba(255,255,255,.25);color:#fff}
.pc-panel{width:240px}
.pc-panel .row{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;color:var(--muted)}
.pc-panel .row span{width:4em;flex:none}
.pc-panel .row input[type=range]{flex:1;min-width:0}
.pc-panel .row output{width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
.pc-panel .row.check{gap:6px}
.pc-panel .row[hidden]{display:none}
.v3d-info{position:absolute;left:12px;bottom:12px;z-index:2;background:var(--panel);color:var(--ink);border-radius:8px;padding:8px 12px;font-size:13.5px;box-shadow:0 2px 10px rgba(0,0,0,.3);font-variant-numeric:tabular-nums}
.v3d-info b{color:var(--stake)}
.orbit-panel{top:56px;bottom:auto;width:min(340px,calc(100% - 20px))}
.orbit-panel .note{margin:0 0 10px}
.orbit-panel .primary{background:var(--stake);border-color:var(--stake);color:#fff}
.orbit-progress{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-variant-numeric:tabular-nums}
.orbit-progress .bar{flex:1;height:8px;border-radius:4px;background:var(--paper);overflow:hidden;border:1px solid var(--line)}
.orbit-progress .bar i{display:block;height:100%;width:0;background:var(--stake)}
.orbit-progress button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:6px;padding:3px 10px;font-size:12.5px}
.orbit-progress button[hidden]{display:none}
.c3d.framed{outline:2px solid rgba(255,255,255,.85);outline-offset:0}
.view-cube{position:absolute;right:12px;bottom:12px;z-index:10;display:grid;grid-template-areas:". n ." "w t e" ". s .";grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);gap:3px}
.view-cube button{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:5px;background:rgba(11,44,87,.85);color:#fff;font-size:13px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
.view-cube button small{font-size:9.5px;font-weight:400;opacity:.8}
.view-cube button:hover{background:rgba(31,90,160,.95)}
.view-cube .top{background:rgba(20,70,130,.95)}
.view-cube .home{font-size:17px;border-radius:50%;width:32px;height:32px;margin:4px}
#pane-3d.recording .tools,#pane-3d.recording .pc-panel,#pane-3d.recording .v3d-info,#pane-3d.recording .view-cube{visibility:hidden}
#pane-3d.recording .c3d{pointer-events:none}

/* GCP 점의조서 카드 */
.gcp-card{position:absolute;right:10px;top:56px;z-index:13;width:min(320px,calc(100% - 20px));max-height:calc(100% - 66px);overflow:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.3);padding:10px 12px}
.gcp-card[hidden]{display:none}
.gcp-card header{display:flex;align-items:center;justify-content:space-between}
.gcp-card h3{font-size:15px}
.gcp-card header button{border:0;background:none;font-size:16px;width:28px;height:28px;border-radius:6px;color:inherit}
.gcp-card .stats{margin:4px 0 8px}
.gcp-big{display:block;border-radius:6px;overflow:hidden;background:#111}
.gcp-big img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.gcp-thumbs{display:flex;gap:6px;margin-top:6px}
.gcp-thumbs button{flex:1;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:none;position:relative}
.gcp-thumbs button[aria-pressed=true]{border-color:var(--stake)}
.gcp-thumbs img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.gcp-thumbs span{position:absolute;left:4px;bottom:4px;background:rgba(0,0,0,.6);color:#fff;font-size:11.5px;border-radius:3px;padding:1px 5px}

/* VR */
.pano{position:absolute;inset:0 0 104px 0}
.vr-minimap{position:absolute;top:10px;right:10px;z-index:5;width:240px;height:180px;border:2px solid #fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.4);background:#1d2733}
.vr-minimap .ol-attribution{display:none}
.pano-bar{position:absolute;left:0;right:0;bottom:0;height:104px;background:#121b26;display:flex;flex-direction:column;padding:6px 10px 8px;gap:4px}
.pano-name{color:#cfdcee;font-size:13px;font-weight:700}
.pano-list{list-style:none;padding:0;margin:0;display:flex;gap:8px;overflow-x:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
/* 칸이 줄어들면 iOS Safari 에서 사진이 겹쳐 보임 → 줄지 않게, 폭 고정(2:1) */
.pano-list li{flex:none;height:100%}
.pano-list button{height:100%;width:136px;border:2px solid transparent;border-radius:6px;padding:0;background:#000 center/cover no-repeat;position:relative}
.pano-list button span{position:absolute;left:4px;bottom:3px;font-size:11px;color:#fff;text-shadow:0 1px 2px #000}
.pano-list button[aria-current=true]{border-color:var(--stake)}

/* 자료 */
.pane.docs{overflow-y:auto;padding:20px}
.docs-body{max-width:1120px;margin:0 auto;display:grid;gap:26px}
.docs-body h2{font-size:16px;margin-bottom:10px}
.dl-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px;max-width:760px}
.dl-list li{display:flex;align-items:center;gap:12px;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.dl-list strong{display:block;font-size:14.5px}
.dl-list .muted{font-size:13px}
.dl-btn{flex:none;display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:inherit;font-size:13.5px;font-weight:600;white-space:nowrap}
.dl-btn:hover{border-color:var(--navy-2)}
.dl-btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.dl-note{max-width:760px;font-size:13px;margin:0 0 10px}
.downloads{margin-bottom:22px}
.doc-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.doc-grid.video{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.doc-grid figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.doc-grid video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.doc-grid figcaption{padding:8px 12px;font-size:13.5px;font-weight:600}
.doc-card{display:flex;align-items:flex-end;min-height:72px;text-decoration:none;color:inherit;background:var(--panel) center/cover no-repeat;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.doc-card:hover{border-color:var(--navy-2)}
.doc-grid.image .doc-card{aspect-ratio:3/2}
.doc-card span{display:block;width:100%;padding:8px 12px;font-size:13.5px;font-weight:600;background:var(--panel)}
.doc-grid.image .doc-card span{background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font-weight:500}
.doc-grid.pdf .doc-card span::before{content:"PDF";display:inline-block;margin-right:8px;padding:1px 6px;border-radius:4px;background:#c0392b;color:#fff;font-size:11px;font-weight:700}

@media (max-width:720px){
  .swipe-bar{flex-wrap:wrap;justify-content:center;bottom:86px}
  .panel{width:calc(100% - 20px)}
  .panel:has(.panel-toggle[aria-expanded=false]){width:auto}
  .tools{top:auto;bottom:44px;left:10px;right:auto;max-width:calc(100% - 70px);justify-content:flex-start}
  .measure-hint{top:auto;bottom:86px;left:10px;right:auto}
  .result{bottom:86px}
  .result.wide{top:auto;bottom:86px;max-height:calc(100% - 170px)} /* 휴대폰: 원래 자리(아래쪽), 표는 조금 작게 */
  .cap-table{font-size:11.5px}
  .cap-table th,.cap-table td{padding:3px 3px}
  #pane-3d .tools{top:10px;bottom:auto}
  .vr-minimap{width:150px;height:112px}
}
.tree-table td.edited{color:var(--stake);font-weight:600}
.tree-table .tree-edit-input{width:6.5em;text-align:right;font:inherit;padding:2px 4px}
.tree-table tr.ref td{font-size:12px;color:var(--muted)}
.tree-table td.radial{color:var(--muted);font-style:italic}
/* 나무 측정 창: 넓게, 좌우 스크롤 없이 (머리글·항목 이름은 줄바꿈, 좁은 화면은 값도 줄바꿈) */
.result.tree{width:min(680px,calc(100% - 20px));overflow-x:hidden}
.result.tree .tree-table{table-layout:auto}
.result.tree .tree-table th{white-space:normal;vertical-align:bottom}
.result.tree .tree-table td:first-child{min-width:6.5em}
@media (max-width:600px){
  .result.tree .tree-table{font-size:12px}
  .result.tree .tree-table th,.result.tree .tree-table td{padding:4px 3px;white-space:normal}
}
.tree-table th.rep,.tree-table td.rep{background:color-mix(in srgb,var(--stake) 8%,transparent)}
.tree-table td.rep{font-weight:600}
.tree-table td.rep small{display:block;font-weight:400;font-size:11px;color:var(--muted)}
.acc-table{max-width:560px;margin-bottom:10px}
.acc-table tr.cp td{font-weight:600}
body.orbit-recording #result{visibility:hidden}
/* 3D 화면: 결과창이 오른쪽 아래 보는 방향 버튼(동서남북)을 가리지 않게 그 위에서 끝냄 */
body:has(#pane-3d:not([hidden])) #result{bottom:196px;max-height:calc(100% - 256px)}
body:has(#pane-3d:not([hidden])) #result.wide{bottom:auto;max-height:calc(100% - 256px)}
/* 회전 영상 창을 여는 동안 결과창은 숨김 (닫으면 다시 보임) */
body.orbit-open #result{visibility:hidden}
@media (max-width:720px){
  body:has(#pane-3d:not([hidden])) #result,body:has(#pane-3d:not([hidden])) #result.wide{top:auto;bottom:196px;max-height:calc(100% - 256px)}
}
/* 다른 시기 나무 겹쳐 보기 */
.pc-overlay{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.pc-overlay b{display:block;font-size:12.5px;margin-bottom:2px;color:var(--ink,inherit)}
.pc-overlay .row i{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}
.pc-overlay .diff-info{display:block;color:#ff6b6b;font-weight:600;margin:2px 0 4px}
.pc-panel .twig-info{display:block;font-size:11.5px;color:var(--muted);margin:0 0 2px 22px}
/* 가지 단면 창: 왼쪽 아래 (표시 설정 창 아래) */
.branch-panel{left:10px;right:auto;bottom:12px;width:min(380px,calc(100% - 20px));max-height:60%}
.branch-panel .tree-table{font-size:12px}
.branch-panel #branch-info{display:block;margin:0 0 4px;color:#ff9be8}
body.orbit-recording #branch-panel{visibility:hidden}
.branch-panel .br-top{margin:0 0 6px;display:flex;gap:6px;flex-wrap:wrap}
.branch-panel .br-scroll{overflow-x:auto}
.branch-panel .br-del{border:0;background:none;color:var(--muted);font-size:13px;padding:0 4px;cursor:pointer}
@media (max-width:720px){
  .branch-panel{bottom:auto;top:56px;max-height:42%;padding:8px 10px}
  .branch-panel .tree-table{font-size:11px}
  .branch-panel .note{display:none}
}
/* 가지 단면 표: 가로 스크롤 없이 */
.branch-panel{overflow-x:hidden}
.branch-panel .br-table{table-layout:fixed;width:100%}
.branch-panel .br-table th,.branch-panel .br-table td{padding:4px 2px;text-align:center;white-space:nowrap;overflow:hidden}
.branch-panel .br-table th small{display:block;font-weight:400;font-size:10px;color:var(--muted)}
.branch-panel .br-table th:first-child,.branch-panel .br-table td:first-child{width:2.2em}
.branch-panel .br-table th:last-child,.branch-panel .br-table td:last-child{width:1.8em}
.branch-panel .br-table tr[data-no]{cursor:pointer}
.branch-panel .br-table tr.sel td{background:color-mix(in srgb,#ff3df0 16%,transparent)}
.branch-panel .br-cap{font-size:12px;color:#ff9be8;text-align:center;margin-top:2px}
@media (max-width:720px){ .branch-panel .br-svg{width:150px;height:150px} .branch-panel{max-height:52%} }

/* 소개 탭 */
.pane.about{overflow-y:auto;background:var(--paper)}
.ab-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:8px;align-items:center;min-height:min(620px,calc(100vh - 170px));padding:28px clamp(18px,5vw,64px);color:#fff;overflow:hidden;
  background:radial-gradient(900px 520px at 72% 55%,rgba(60,150,110,.28),transparent 70%),linear-gradient(135deg,#051226 0%,#0b2c57 62%,#12407d 100%)}
.ab-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 70%);mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 70%)}
.ab-hero-text{position:relative;z-index:1;max-width:560px}
.ab-badge{display:inline-block;padding:4px 12px;border-radius:14px;background:var(--stake);font-weight:800;font-size:13px;letter-spacing:.02em;animation:ab-up .7s both}
.ab-hero h2{font-size:clamp(28px,4.6vw,52px);line-height:1.15;letter-spacing:-.03em;margin:14px 0 8px;animation:ab-up .8s .08s both}
.ab-sub{color:#b9cce6;font-size:15px;animation:ab-up .8s .16s both}
.ab-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:26px 0 22px}
.ab-stats>div{padding:12px 14px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.06);animation:ab-up .8s both}
.ab-stats dt{font-size:12.5px;color:#b9cce6}
.ab-stats dd{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.ab-stats dd small{font-size:14px;font-weight:600;margin-left:4px;color:#d6e2f3}
.ab-stats-note{font-size:12.5px;color:#9fb6d6;margin:-12px 0 18px;animation:ab-up .8s .5s both}
.ab-cta{display:flex;gap:8px;flex-wrap:wrap;animation:ab-up .8s .6s both}
.ab-cta button{border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;border-radius:22px;padding:9px 18px;font-weight:700;transition:transform .15s,background .15s}
.ab-cta button.main{background:var(--stake);border-color:var(--stake)}
.ab-cta button:hover{transform:translateY(-2px);background:rgba(255,255,255,.14)}
.ab-cta button.main:hover{background:#ff7d33}
.ab-hero-fig{position:relative;z-index:1;height:min(560px,calc(100vh - 220px));min-height:340px}
.ab-hero-fig canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.ab-hero-fig canvas:active{cursor:grabbing}
.ab-hero-fig.photo{background-size:cover;background-position:center;border-radius:18px;animation:ab-zoom 18s ease-in-out infinite alternate}
.ab-hint{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:12px;color:#9fb6d6;pointer-events:none}
.ab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1120px;width:100%;margin:0 auto;padding:26px 20px 56px}
.ab-sec{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;min-width:0}
.ab-sec.wide{grid-column:1/-1}
.ab-sec h3{font-size:16px;margin-bottom:12px;padding-left:10px;border-left:4px solid var(--stake);line-height:1.2}
.ab-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.ab-reveal.in{opacity:1;transform:none}
.ab-p{margin-bottom:10px;line-height:1.75}
.ab-table{width:100%;border-collapse:collapse}
.ab-table th,.ab-table td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ab-table tr:last-child th,.ab-table tr:last-child td{border-bottom:0}
.ab-table th{width:6.5em;color:var(--muted);font-weight:600;white-space:nowrap}
.ab-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ab-chart figcaption{font-size:13px;font-weight:700;color:var(--muted)}
.ab-chart svg{width:100%;height:auto;display:block;overflow:visible}
.ab-axis{stroke:var(--line);stroke-width:1}
.ab-line{fill:none;stroke:var(--stake);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ab-reveal.in .ab-line{animation:ab-draw 1.4s .2s ease-out forwards}
.ab-dot{fill:var(--panel);stroke:var(--stake);stroke-width:2.5;opacity:0}
.ab-val{font-size:12.5px;font-weight:700;fill:var(--ink);opacity:0}
.ab-reveal.in .ab-dot,.ab-reveal.in .ab-val{animation:ab-fade .5s 1s forwards}
.ab-tick{font-size:11px;fill:var(--muted)}
.ab-note{font-size:12.5px;margin-top:8px}
.ab-timeline{list-style:none;padding:0;display:grid;gap:6px;position:relative}
.ab-timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line)}
.ab-timeline li{position:relative;padding-left:26px}
.ab-timeline li::before{content:"";position:absolute;left:2px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--panel);border:3px solid var(--stake)}
.ab-timeline button{width:100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-align:left;border:1px solid var(--line);background:transparent;border-radius:10px;padding:8px 12px;transition:transform .15s,border-color .15s}
.ab-timeline button:hover{transform:translateX(4px);border-color:var(--stake)}
.ab-timeline button span{font-size:12px;font-weight:700;border-radius:10px;padding:1px 9px;background:#e3edf9;color:#12407d}
.ab-timeline button span.lidar{background:#e2f4e8;color:#1f6b3a}
.ab-timeline button small{color:var(--muted);margin-left:auto}
.ab-map{height:360px;border-radius:10px;overflow:hidden}
.project.on-about .date-pick,.project.on-about .proj-note{display:none}
.ab-views{position:absolute;top:0;right:0;display:flex;gap:4px;padding:4px;border-radius:22px;background:rgba(5,18,38,.55);border:1px solid rgba(255,255,255,.16)}
.ab-views button{border:0;background:transparent;color:#cfe0f5;border-radius:18px;padding:6px 13px;font-weight:700;font-size:13px}
.ab-views button.on,.ab-views button[aria-pressed=true]{background:var(--stake)!important;border-color:var(--stake)!important;color:#fff}
.ab-stats>div.link{cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.ab-stats>div.link:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.5)}
.ab-stats>div.link.on{border-color:var(--stake);background:rgba(242,107,29,.2)}
.ab-stats>div.link dt::after{content:" ›";opacity:.7}
@keyframes ab-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ab-draw{to{stroke-dashoffset:0}}
@keyframes ab-fade{to{opacity:1}}
@keyframes ab-zoom{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (max-width:820px){
  .ab-hero{grid-template-columns:1fr;min-height:0;padding:22px 18px 10px}
  .ab-hero-fig{height:380px;min-height:0;order:-1}
  .ab-grid{grid-template-columns:1fr;padding:18px 12px 44px}
  .ab-stats dd{font-size:25px}
}
@media (prefers-reduced-motion:reduce){
  .ab-badge,.ab-hero h2,.ab-sub,.ab-stats>div,.ab-cta,.ab-hero-fig.photo{animation:none}
  .ab-reveal{opacity:1;transform:none;transition:none}
  .ab-line{stroke-dashoffset:0}
  .ab-dot,.ab-val{opacity:1}
}