/* 단면도 편집 탭 톤앤매너 — 비바리움 관찰 탭(viv-ux.css)과 같은 헤더·패널·버튼 스타일.
   도면 캔버스(#svg)와 그 안의 그림은 건드리지 않음. */
body:not(.mode-viv){--ex-bg:#f4f3ee;--ex-card:#fbfaf7;--ex-ink:#2b2b2a;--ex-mut:#7c7b75;--ex-ln:#d9d8d2;--ex-acc:#8d8c85}
body:not(.mode-viv) #top{box-shadow:none;border-bottom:1px solid var(--ex-ln);background:#fbfaf7;padding:7px 14px;gap:8px}
body:not(.mode-viv) #top .logo{font-style:normal;letter-spacing:.06em;font-size:14px;font-weight:700;text-transform:none}
body:not(.mode-viv) .vnav{display:flex;gap:2px;background:#eeede8;border-radius:999px;padding:3px}
body:not(.mode-viv) .vnav button{white-space:nowrap;border:0;border-radius:999px;background:transparent;padding:5px 14px;font-weight:600;font-size:13px;color:#55554f}
body:not(.mode-viv) .vnav button.on{background:#fff;color:#222;box-shadow:0 1px 3px rgba(0,0,0,.12)}
body:not(.mode-viv) .vnav .vjoin{margin-left:6px;border:1px solid #cfcec7;background:#fff;color:#2b2b2a;border-radius:999px;font-size:13px}
body:not(.mode-viv) .vnav .vjoin:hover{background:#f4f3ee}
body:not(.mode-viv) #top .grp button,body:not(.mode-viv) #top .grp select{border:1px solid var(--ex-ln);background:var(--ex-card);border-radius:999px;padding:4px 12px;font-size:12.5px;color:var(--ex-ink)}
body:not(.mode-viv) #top .grp button:hover:not(:disabled){background:#fff;border-color:var(--ex-acc)}
body:not(.mode-viv) #top label.sm{font-size:12.5px;color:var(--ex-mut)}
body:not(.mode-viv) #msg{font-size:12.5px;color:var(--ex-mut)}
/* 좌·우 패널 */
body:not(.mode-viv) main{margin-top:0}
body:not(.mode-viv) aside{background:var(--ex-card);border-color:var(--ex-ln);color:var(--ex-ink)}
body:not(.mode-viv) aside h4,body:not(.mode-viv) #insp h4{font-style:normal;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:700;color:var(--ex-ink);border-bottom:1px solid var(--ex-ln);padding-bottom:5px;margin:14px 0 8px}
body:not(.mode-viv) aside .hint,body:not(.mode-viv) aside .rmh{color:var(--ex-mut)}
body:not(.mode-viv) .rmh{font-style:normal}
body:not(.mode-viv) aside button,body:not(.mode-viv) aside select,body:not(.mode-viv) aside input:not([type=checkbox]):not([type=range]){border:1px solid var(--ex-ln);border-radius:10px;background:#fff;color:var(--ex-ink)}
body:not(.mode-viv) aside button:hover:not(:disabled){border-color:var(--ex-acc);background:#fff}
body:not(.mode-viv) aside input:focus,body:not(.mode-viv) aside select:focus{outline:none;border-color:var(--ex-acc);box-shadow:0 0 0 2px rgba(141,140,133,.18)}
body:not(.mode-viv) .tabs{background:#eeede8;border-radius:999px;padding:3px;gap:2px}
body:not(.mode-viv) .tabs button{border:0;border-radius:999px;background:transparent;color:#55554f;font-weight:600;font-size:13px}
body:not(.mode-viv) .tabs button+button{border-left:0}
body:not(.mode-viv) .tabs button.on{background:#fff;color:#222;box-shadow:0 1px 3px rgba(0,0,0,.12)}
body:not(.mode-viv) .tile{border-color:var(--ex-ln);border-radius:10px;background:#fff}
body:not(.mode-viv) .tile:hover{border-color:var(--ex-acc)}
body:not(.mode-viv) .li{border:1px solid var(--ex-ln);border-radius:10px;background:#fff}
body:not(.mode-viv) .li.on{border-color:var(--ex-acc);box-shadow:0 1px 6px rgba(0,0,0,.08)}
body:not(.mode-viv) .btns button{border-radius:999px}
body:not(.mode-viv) #insp{border-left:1px solid var(--ex-ln)}
body:not(.mode-viv) .fold-h{cursor:pointer}
body:not(.mode-viv) .li{padding:6px 9px;margin:3px 0}
.grp[hidden]{display:none}

/* ===== v23.15 모바일(≤900px) 단면도 편집: 하단 탭 바 + 하단 시트, 상단 정리 ===== */
#tools{display:contents}
body.mode-viv #tools{display:none}
#mBar,.m-sh{display:none}
@media (max-width:900px){
 html,body{overscroll-behavior:none}
 body:not(.mode-viv){height:100vh;height:100dvh}
 /* 상단: 한 줄 머리글(로고·탭·되돌리기) + 가로로 밀리는 도구 줄. 입장하기·이웃하기는 비바리움 관찰 탭에만 둠 */
 body:not(.mode-viv) #top{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:start;align-items:center;gap:6px 8px;padding:6px 10px;flex:none;height:auto}
 body:not(.mode-viv) #top .logo{grid-area:1/1;margin:0;font-size:13px}
 body:not(.mode-viv) .vnav{grid-area:1/2;justify-self:start;margin:0}
 body:not(.mode-viv) .vnav .vjoin{display:none}
 body:not(.mode-viv) #top>.grp{grid-area:2/1}
 body:not(.mode-viv) #tools{grid-area:2/2;display:flex;min-width:0;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 0 2px}
 body:not(.mode-viv) #tools::-webkit-scrollbar{display:none}
 body:not(.mode-viv) #tools{align-items:center;max-height:44px}
 body:not(.mode-viv) #tools>*{flex:none;white-space:nowrap}   /* 공유 집 상태표시(#shStat)가 좁은 줄에서 여러 줄로 접혀 상단이 커지던 문제 */
 body:not(.mode-viv) #tools .grp{gap:6px}
 body:not(.mode-viv) #shStat:not([hidden]){flex-wrap:nowrap;white-space:nowrap}
 body:not(.mode-viv) #top .grp button,body:not(.mode-viv) #top .grp select{min-height:38px;padding:4px 13px;white-space:nowrap}
 body:not(.mode-viv) #top label.sm{min-height:38px;padding:0 4px;white-space:nowrap;font-size:13px}
 body:not(.mode-viv) #top label.sm input{width:18px;height:18px}
 body:not(.mode-viv) #msg{position:fixed;left:12px;right:12px;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:40;margin:0;padding:9px 14px;border-radius:12px;background:#2b2b2a;color:#fff;font-size:13px;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}
 body:not(.mode-viv) #msg:empty{display:none}
 /* 도면이 남는 공간을 모두 씀 */
 body:not(.mode-viv) main{display:flex;flex-direction:column;margin-top:0;padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
 body:not(.mode-viv) #stage{flex:1;min-height:0}
 body:not(.mode-viv) .tg,body:not(.mode-viv) .rz{display:none!important}
 /* 하단 탭 바 */
 body:not(.mode-viv) #mBar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;justify-content:space-around;gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:var(--ex-card);border-top:1px solid var(--ex-ln)}
 body:not(.mode-viv) #mBar button{flex:1;max-width:96px;height:46px;border:1px solid transparent;border-radius:14px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:11px;color:var(--ex-ink);padding:0}
 body:not(.mode-viv) #mBar button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
 body:not(.mode-viv) #mBar button.on{background:#fff;border-color:var(--ex-acc);box-shadow:0 1px 6px rgba(0,0,0,.08)}
 /* 하단 시트: 도구(가구·건물·표현)와 선택한 객체 속성 */
 body:not(.mode-viv) #lib,body:not(.mode-viv) #insp{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom,0px));z-index:19;display:none;max-height:48vh;max-height:48dvh;overflow:auto!important;-webkit-overflow-scrolling:touch;visibility:visible!important;padding:0 12px 16px!important;border:1px solid var(--ex-ln)!important;border-bottom:0!important;border-radius:18px 18px 0 0;box-shadow:0 -10px 28px rgba(40,40,35,.16)}
 body.m-lib:not(.mode-viv) #lib,body.m-insp:not(.mode-viv) #insp{display:block}
 body:not(.mode-viv) #lib .tabs{display:none}
 body:not(.mode-viv) #insp>h4{display:none}
 body:not(.mode-viv) .m-sh{display:flex;position:sticky;top:0;z-index:3;align-items:center;gap:8px;margin:0 -12px;padding:16px 12px 6px;background:var(--ex-card);border-bottom:1px solid var(--ex-ln)}
 .m-grab{position:absolute;left:50%;top:6px;width:36px;height:4px;border-radius:2px;background:#cfcec7;transform:translateX(-50%)}
 .m-t{flex:1;font-size:14px}
 .m-x{width:40px;height:40px;border:0!important;background:transparent!important;font-size:24px;line-height:1;border-radius:50%;color:var(--ex-mut)}
 /* 손가락으로 누르기 쉬운 크기 · iOS 가 입력칸을 확대하지 않도록 16px */
 body:not(.mode-viv) #lib input:not([type=checkbox]):not([type=range]),body:not(.mode-viv) #lib select,body:not(.mode-viv) #insp input:not([type=checkbox]):not([type=range]),body:not(.mode-viv) #insp select{min-height:42px;font-size:16px}
 body:not(.mode-viv) #lib button,body:not(.mode-viv) #insp button{min-height:42px}
 body:not(.mode-viv) #lib input[type=checkbox],body:not(.mode-viv) #insp input[type=checkbox]{width:20px;height:20px}
 body:not(.mode-viv) #lib .chk,body:not(.mode-viv) #insp .chk{min-height:36px}
 body:not(.mode-viv) #grid{grid-template-columns:repeat(3,1fr);gap:8px}
 body:not(.mode-viv) .tile .im,body:not(.mode-viv) .tile img{height:64px}
 body:not(.mode-viv) #tHouse input[type=number],body:not(.mode-viv) #tHouse select,body:not(.mode-viv) #tDraw input[type=number],body:not(.mode-viv) #tDraw select,body:not(.mode-viv) #inspBody input[type=number]{width:46%;max-width:150px}
 body:not(.mode-viv) .li{min-height:44px}
}
/* v23.15b 선택 시트: 「선택한 …」 제목줄 제거, 이름·front/side 가 맨 위로 */
@media (max-width:900px){
 body:not(.mode-viv) #insp .m-sh{height:0;padding:0;margin:0;border:0;background:transparent;overflow:visible}
 body:not(.mode-viv) #insp .m-sh .m-t{display:none}
 body:not(.mode-viv) #insp .m-grab{top:-10px}
 body:not(.mode-viv) #insp .m-x{position:absolute;right:-4px;top:4px;width:36px;height:36px;background:var(--ex-card)!important;z-index:4}
 body:not(.mode-viv) #insp #inspBody{padding-top:22px;padding-right:34px}
 body:not(.mode-viv) #insp #inspBody>.seg{margin:6px 0 10px!important}
}