/* 3.12.27 화면 용도별 틀 — ui-theme.js 가 <html data-purpose> 로 알려 준다
   work(업무) · survey(조사: 한 손 조작) · status(현황: 상황판) · master(마스터: 관리 콘솔)
   스타일(data-skin)은 색·모양, 이 파일은 용도에 따른 배치·조작 방식. 네 스타일 모두에 적용된다.
   아래쪽에는 현황 화면(대시보드·건물 단위 보기·건물 일러스트·시설 위치·업무 지도)을 네 스타일에 맞추는 규칙을 둔다. */

/* ═══════════════ 용도 표시(지금 어떤 용도의 화면인지) ═══════════════ */
:root{--pp-survey:var(--color-paint-cc4d0a);--pp-status:var(--color-paint-1f5fae);--pp-master:var(--color-paint-334155);--pp-work:var(--color-paint-0f2f5c)}
.ui-appbar{display:none}
.work-app .mobile-top>b::after,.ui-appbar-purpose{display:inline-flex;align-items:center;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:0;vertical-align:2px;background:var(--color-surface-57c94231f5);color:var(--color-ink-fff)}
.work-app .mobile-top>b::after{content:none}
[data-purpose=survey] .work-app .mobile-top>b::after{content:'조사'}
[data-purpose=status] .work-app .mobile-top>b::after{content:'현황'}
[data-purpose=master] .work-app .mobile-top>b::after{content:'마스터'}
[data-purpose=master] .work-app .mobile-top>b::after{background:var(--color-surface-e2e8f0);color:var(--color-ink-1e293b)}
[data-skin=toss] .work-app .mobile-top>b::after{background:var(--color-surface-f2f4f6);color:var(--color-ink-4e5968)}
[data-skin=clear] .work-app .mobile-top .btn{background:var(--color-surface-06ff57dd04);border-color:transparent;color:var(--color-ink-fff)}
[data-skin=toss][data-purpose=master] .work-app .mobile-top>b::after{background:var(--color-surface-334155);color:var(--color-ink-fff)}
/* 태블릿·PC: 머리 위 작은 표 «마스터 · 관리 콘솔» · «현황 · 상황판» */
:is([data-form=tablet],[data-form=pc]):is([data-purpose=master],[data-purpose=status]) :is(body:not(.work-app) #main>.page-head,body:not(.work-app) #main>.db-root>.page-head,.work-app .work-page>.work-head:first-child,.work-app .personal-work>.welcome-line){position:relative}
:is([data-form=tablet],[data-form=pc])[data-purpose=master] :is(body:not(.work-app) #main>.page-head,.work-app .work-page>.work-head:first-child,.work-app .personal-work>.welcome-line)>:first-child::before{content:'마스터 · 관리 콘솔';display:inline-flex;margin:0 0 8px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.02em;background:var(--color-surface-334155);color:var(--color-ink-fff)}
:is([data-form=tablet],[data-form=pc])[data-purpose=status] :is(body:not(.work-app) #main>.page-head,body:not(.work-app) #main .db-root>.page-head,.work-app .work-page>.work-head:first-child)>:first-child::before{content:'현황 · 상황판';display:inline-flex;margin:0 0 8px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.02em;background:var(--color-surface-e6effa);color:var(--color-ink-1f5fae)}
[data-skin=field]:is([data-form=tablet],[data-form=pc])[data-purpose=status] body:not(.work-app) .page-head>:first-child::before,[data-skin=hand]:is([data-form=tablet],[data-form=pc])[data-purpose=status] :is(body:not(.work-app) .page-head,.work-app .work-page>.work-head:first-child)>:first-child::before{background:var(--color-surface-57c94231f5);color:var(--color-ink-fff)}
[data-skin=field]:is([data-form=tablet],[data-form=pc])[data-purpose=master] :is(.page-head,.work-head,.welcome-line)>:first-child::before,[data-skin=hand]:is([data-form=tablet],[data-form=pc])[data-purpose=master] :is(.page-head,.work-head,.welcome-line)>:first-child::before{background:var(--color-surface-e2e8f0);color:var(--color-ink-1e293b)}
:is([data-form=tablet],[data-form=pc])[data-purpose=master] .work-app .personal-work>.welcome-line>:first-child::before{display:none!important}

/* ═══════════════ 시설 자료·관리 앱: 휴대폰 = 위 앱 막대 + 서랍 메뉴, 폴드 = 아이콘 막대 ═══════════════ */
[data-app=desk][data-form=phone] .ui-appbar{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;top:0;z-index:57;height:56px;padding:0 12px 0 6px;background:var(--color-surface-0f2f5c);color:var(--color-ink-fff);box-shadow:0 2px 12px var(--color-shadow-3a5bb5ad60)}
[data-app=desk][data-form=phone] .ui-appbar-menu{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:inherit;cursor:pointer}
[data-app=desk][data-form=phone] .ui-appbar-menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
[data-app=desk][data-form=phone] .ui-appbar-menu:active{transform:scale(.9)}
[data-app=desk][data-form=phone] .ui-appbar-title{flex:1;min-width:0;font-size:16.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-app=desk][data-form=phone] .ui-appbar-purpose:empty,[data-app=desk][data-form=phone] .ui-appbar-purpose[data-p=work]{display:none}
[data-app=desk][data-form=phone] .ui-appbar-purpose[data-p=master]{background:var(--color-surface-e2e8f0);color:var(--color-ink-1e293b)}
[data-app=desk][data-form=phone][data-skin=toss] .ui-appbar{background:var(--color-surface-fff);color:var(--color-ink-191f28);box-shadow:0 1px 0 var(--color-shadow-eef0f3)}
[data-app=desk][data-form=phone][data-skin=toss] .ui-appbar-purpose{background:var(--color-surface-f2f4f6);color:var(--color-ink-4e5968)}
[data-app=desk][data-form=phone] .ui-side-open{display:none!important}
[data-app=desk][data-form=phone] #sidebar{width:min(300px,calc(86 * var(--gn-vw,1vw)))}
[data-app=desk][data-form=phone] body:not(.work-app) #main{margin-left:0!important;padding:72px 14px 40px!important;height:calc(100 * var(--gn-dvh,1dvh));overflow-y:auto}
[data-app=desk][data-form=fold] body:not(.work-app) #main{padding:18px 18px 40px!important}
[data-app=desk][data-form=fold][data-side=hidden] body:not(.work-app) #main{padding-left:76px!important}
[data-app=desk]:is([data-form=phone],[data-form=fold]) .ro-banner{left:0}
/* 휴대폰에서 넓은 표·도구 줄이 화면 밖으로 밀리지 않게 */
[data-app=desk][data-form=phone] .page-head{flex-direction:column;align-items:stretch;gap:12px}
[data-app=desk][data-form=phone] .page-head .page-title{font-size:23px}
[data-app=desk][data-form=phone] .page-head>div:last-child{display:flex;flex-wrap:wrap;gap:6px}
[data-app=desk][data-form=phone] .tbl-wrap,[data-app=desk][data-form=phone] .card:has(>.tbl){overflow-x:auto;-webkit-overflow-scrolling:touch}
[data-app=desk][data-form=phone] .toolbar,[data-app=desk][data-form=phone] .filters{flex-wrap:wrap}
[data-app=desk][data-form=phone] :is(input[type=search],input[type=text]){min-width:0;max-width:100%}
[data-app=desk][data-form=phone] .detail-head{flex-direction:column;align-items:stretch;gap:10px}
[data-app=desk][data-form=phone] .maint-sum{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-app=desk][data-form=phone] .dm-grid{grid-template-columns:minmax(0,1fr)}
[data-app=desk][data-form=phone] .modal{width:calc(100 * var(--gn-vw,1vw));max-width:calc(100 * var(--gn-vw,1vw));border-radius:24px 24px 0 0}

/* ═══════════════ 조사 용도: 한 손 조작 (모든 스타일) ═══════════════ */
/* 조사원 첫 화면·목록: 줄 전체를 누르면 열린다 */
[data-purpose=survey] .ib-list article.ib-row{position:relative}
[data-purpose=survey] .ib-row>.btn::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit}
/* 눌림 효과(transform)가 단추에 걸리면 덮개가 단추 크기로 줄어 줄 전체 누르기가 끊긴다 — 눌림은 줄이 대신 보여 준다 */
:is([data-skin=hand],[data-purpose=survey]) .ib-list .ib-row>.btn{position:static!important;transform:none!important}
[data-purpose=survey] .ib-row:has(>.btn:active){transform:scale(.985)}
[data-purpose=survey] .work-app .btn{min-height:48px}
/* 휴대폰 조사: 답변은 두 줄 격자, 누르는 곳은 넉넉하게, 제출은 엄지 자리 */
[data-purpose=survey][data-form=phone] .answer-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
[data-purpose=survey][data-form=phone] .answer-choice{min-height:56px}
[data-purpose=survey][data-form=phone] .answer-choice.scale-choice{min-height:72px}
[data-purpose=survey][data-form=phone] .survey-footer .btn.pri{min-height:52px;font-size:16.5px;padding:0 18px}
[data-purpose=survey][data-form=phone] .survey-footer .sv-chip{min-height:52px}
[data-purpose=survey][data-form=phone] .question-bottom .evidence-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
[data-purpose=survey][data-form=phone] .question-bottom .evidence-actions .btn{min-height:50px;justify-content:center}
[data-purpose=survey][data-form=phone] .floor-chip{min-height:44px}
/* 폴드·태블릿·PC 조사: 목차 판을 끝까지 붙이고 문항 폭을 읽기 좋게 */
[data-purpose=survey].ui-2pane .sv-main{max-width:1180px}
[data-purpose=survey][data-tier=ultra].ui-2pane .sv-main{max-width:1480px}
[data-purpose=survey]:is([data-form=tablet],[data-form=pc]) .survey-footer .btn.pri{min-height:52px;font-size:16px;padding:0 24px}

/* ═══════════════ 마스터 용도: 관리 콘솔 (모든 스타일) ═══════════════ */
/* 머리를 줄여 표·설정을 위로 올리고, 탭은 위에 고정, 표는 조밀하게, 실행 막대는 아래에 */
[data-purpose=master] .work-app .work-page{max-width:none}
[data-purpose=master][data-tier=wide] .work-app .work-page,[data-purpose=master][data-tier=regular] .work-app .work-page{max-width:1640px}
[data-purpose=master]:is([data-form=tablet],[data-form=pc]) .work-app .work-page>.work-head:first-child{margin-bottom:14px;padding-bottom:12px}
[data-purpose=master]:is([data-form=tablet],[data-form=pc]) .work-app .work-page>.work-head:first-child :is(h1,.page-title){font-size:24px}
[data-purpose=master] .admin-tabs{position:sticky;top:-32px;z-index:14;background:var(--bg,var(--color-surface-f5f7fa));padding:10px 0;margin:0 0 12px;display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
[data-purpose=master] .admin-tabs::-webkit-scrollbar{display:none}
[data-purpose=master] .admin-tab{flex:0 0 auto;white-space:nowrap}
[data-purpose=master][data-form=phone] .admin-tabs{margin-left:calc(-1 * var(--ui-mx,17px));margin-right:calc(-1 * var(--ui-mx,17px));padding:8px var(--ui-mx,17px);box-shadow:0 6px 12px -10px var(--color-shadow-1945ae63c7)}
[data-purpose=master][data-form=phone] .admin-tab{flex-direction:row;gap:6px;min-height:42px;padding:0 14px;border-radius:999px}
[data-purpose=master][data-form=phone] .admin-tab small{display:inline;margin:0 0 0 2px}
/* 태블릿·PC 관리 콘솔: 왼쪽 세로 탭 판 + 오른쪽 작업 칸 */
[data-purpose=master]:is([data-form=tablet],[data-form=pc]):not([data-tier=compact]) .work-app .work-page:has(>.admin-tabs){display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:22px;align-items:start}
[data-purpose=master]:is([data-form=tablet],[data-form=pc]):not([data-tier=compact]) .work-app .work-page:has(>.admin-tabs)>*{grid-column:1/-1;min-width:0}
[data-purpose=master]:is([data-form=tablet],[data-form=pc]):not([data-tier=compact]) .work-app .work-page>.admin-tabs{grid-column:1;position:sticky;top:0;flex-direction:column;flex-wrap:nowrap;overflow:visible;gap:4px;padding:10px;margin:0;background:var(--panel,var(--color-surface-fff));border:1px solid var(--line);border-radius:var(--r,14px)}
[data-purpose=master]:is([data-form=tablet],[data-form=pc]):not([data-tier=compact]) .work-app .work-page>.admin-tabs .admin-tab{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;border-radius:10px;border-color:transparent;background:transparent;min-height:46px;padding:0 14px;font-size:14.5px}
[data-purpose=master]:is([data-form=tablet],[data-form=pc]):not([data-tier=compact]) .work-app .work-page>.admin-tabs .admin-tab:hover{background:var(--color-surface-eef2f7)}
[data-purpose=master]:is([data-form=tablet],[data-form=pc]):not([data-tier=compact]) .work-app .work-page>.admin-tabs .admin-tab.on{background:var(--color-surface-334155);border-color:var(--color-line-334155);color:var(--color-ink-fff)}
[data-purpose=master]:is([data-form=tablet],[data-form=pc]):not([data-tier=compact]) .work-app .work-page>.admin-tabs .admin-tab small{margin:0;display:inline}
[data-purpose=master]:is([data-form=tablet],[data-form=pc]):not([data-tier=compact]) .work-app .work-page>.admin-stack{grid-column:2}
[data-skin=hand][data-purpose=master]:is([data-form=tablet],[data-form=pc]) .work-app .work-page>.admin-tabs{border:2px solid var(--color-line-e5e7eb);border-radius:22px}
[data-skin=hand][data-purpose=master]:is([data-form=tablet],[data-form=pc]) .work-app .work-page>.admin-tabs .admin-tab.on{background:var(--color-surface-0f2f5c)}
[data-skin=toss][data-purpose=master]:is([data-form=tablet],[data-form=pc]) .work-app .work-page>.admin-tabs{border:0;border-radius:22px}
[data-skin=toss][data-purpose=master]:is([data-form=tablet],[data-form=pc]) .work-app .work-page>.admin-tabs .admin-tab.on{background:var(--color-surface-e8f3ff);color:var(--color-ink-1b64da)}
[data-skin=clear][data-purpose=master]:is([data-form=tablet],[data-form=pc]) .work-app .work-page>.admin-tabs .admin-tab.on{background:var(--color-surface-eef2f7);color:var(--color-ink-141c26);box-shadow:inset 4px 0 var(--color-shadow-0f2f5c)}
[data-purpose=master] :is(.work-table,.tbl,.dm-users-table){font-size:14px}
[data-purpose=master] :is(.work-table,.tbl) :is(td,th){padding-top:9px;padding-bottom:9px}
[data-purpose=master] .tbl td{height:40px}
[data-purpose=master] :is(.work-table,.tbl) thead th{position:sticky;top:0;z-index:2}
[data-purpose=master] .work-app .surface{padding:20px 22px}
[data-purpose=master]:is([data-form=tablet],[data-form=pc]) .work-app .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-purpose=master][data-tier=compact] .work-app .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-purpose=master] .assign-bar{position:sticky;bottom:-18px;z-index:12;border-radius:16px;box-shadow:0 -8px 24px var(--color-shadow-c2201c29bd)}
[data-purpose=master] .assignment-picker{max-height:min(calc(48 * var(--gn-vh,1vh)),520px)}
/* 운영 현황: 상태 타일을 한 줄로 */
[data-purpose=master]:is([data-form=tablet],[data-form=pc]) .work-app .work-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 마스터 첫 화면: 빠른 관리 단추를 큰 타일로 */
[data-purpose=master] .home-admin-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
[data-purpose=master][data-form=phone] .home-admin-actions{grid-template-columns:1fr}
[data-purpose=master] .home-admin-actions .btn{min-height:64px;justify-content:flex-start;padding:0 18px;font-size:15.5px;font-weight:800;border-radius:16px;text-align:left}
[data-purpose=master][data-form=phone] .personal-work>.welcome-line p{display:none}
/* 자료·관리 앱 마스터 화면(데이터 관리·설정·건물 관리·취합·도면): 조밀한 카드 격자 */
[data-purpose=master] body:not(.work-app) #main>.page-head{margin-bottom:14px}
[data-purpose=master] .dm-grid{gap:14px}
[data-purpose=master] .dm-card{padding:18px 20px}
[data-purpose=master][data-tier=wide] .dm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-purpose=master] .dm-card h3{margin-top:0}

/* ═══════════════ 현황 용도: 상황판 (모든 스타일) ═══════════════ */
/* 넓은 창에서는 폭을 끝까지 쓰고, 숫자는 크게, 들어올 때 차례로 떠오른다 */
[data-purpose=status] body:not(.work-app) #main{--ui-maxw:1920px}
[data-purpose=status][data-tier=ultra] body:not(.work-app) #main{--ui-maxw:2600px}
[data-purpose=status] .db-kpi .v{font-variant-numeric:tabular-nums}
[data-purpose=status][data-tier=ultra] .db-kpi .v{font-size:34px}
[data-purpose=status][data-tier=ultra] .db-grid{grid-template-columns:360px minmax(0,1fr) 420px}
:root:not([data-motion=off]):not([data-motion=less])[data-purpose=status] :is(.db-kpi,.db-panel,.db-strip,.stat,.fm-side,.b-card){animation:uiRise var(--sp-d) var(--sp-soft) backwards}
:root:not([data-motion=off]):not([data-motion=less])[data-purpose=status] .db-kpi:nth-child(2){animation-delay:30ms}
:root:not([data-motion=off]):not([data-motion=less])[data-purpose=status] .db-kpi:nth-child(3){animation-delay:60ms}
:root:not([data-motion=off]):not([data-motion=less])[data-purpose=status] .db-kpi:nth-child(4){animation-delay:90ms}
:root:not([data-motion=off]):not([data-motion=less])[data-purpose=status] .db-kpi:nth-child(n+5){animation-delay:120ms}
:root:not([data-motion=off]):not([data-motion=less])[data-purpose=status] .db-col .db-panel:nth-child(2){animation-delay:80ms}
:root:not([data-motion=off]):not([data-motion=less])[data-purpose=status] .db-col .db-panel:nth-child(n+3){animation-delay:140ms}
.ui-count{font-variant-numeric:tabular-nums}
/* 휴대폰·폴드 현황: 숫자 띠는 옆으로 넘기고, 지도·건물 일러스트는 화면 폭 끝까지 */
[data-purpose=status]:is([data-form=phone],[data-form=fold]) .db-kpis{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -14px 14px;padding:2px 14px 6px;scrollbar-width:none}
[data-purpose=status]:is([data-form=phone],[data-form=fold]) .db-kpis::-webkit-scrollbar{display:none}
[data-purpose=status][data-form=phone] .db-kpi{flex:0 0 46%;scroll-snap-align:start}
[data-purpose=status][data-form=fold] .db-kpi{flex:0 0 31%;scroll-snap-align:start}
[data-purpose=status][data-form=phone] .db-actions{flex-wrap:wrap;width:100%}
[data-purpose=status][data-form=phone] .db-switch{display:flex;width:100%;margin:0 0 4px}
[data-purpose=status][data-form=phone] .db-switch button{flex:1;padding:9px 8px;font-size:13.5px;white-space:nowrap}
[data-purpose=status][data-form=phone] .db-actions>.btn{flex:1}
[data-purpose=status][data-form=phone] .db-pills{flex-wrap:wrap;border-radius:14px}
[data-purpose=status][data-form=phone] .db-stage-body{min-height:calc(62 * var(--gn-vh,1vh));margin:0 -16px}
[data-purpose=status][data-form=phone] .db-tabs{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:8px}
[data-purpose=status][data-form=phone] .db-tabset{overflow-x:auto;scrollbar-width:none;max-width:100%;margin-left:0;align-self:flex-start}
[data-form=phone] .db-tabs>*{margin-left:0!important}
[data-purpose=status][data-form=phone] .db-tab{white-space:nowrap;padding:8px 13px}
[data-purpose=status][data-form=phone] .db-grid{min-height:0}
[data-purpose=status][data-form=phone] .db-layer-bld{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
[data-purpose=status][data-form=phone] .db-strip{flex-wrap:wrap}
[data-purpose=status][data-form=phone] .db-cov{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-purpose=status][data-form=phone] .db-head .page-sub{font-size:13px}
[data-form=phone] .db-pt>span{min-width:0;flex:1 1 100%}
[data-form=phone] .db-ps{white-space:normal}
/* 지도(현황): 휴대폰은 지도를 화면 폭 끝까지 크게, 알림 칩은 옆으로 넘긴다 */
[data-purpose=status][data-form=phone] .fm-stage{height:calc(60 * var(--gn-vh,1vh));min-height:360px;border-radius:0;border-left:0;border-right:0;margin:0 calc(-1 * var(--ui-mx,17px))}
[data-app=desk][data-purpose=status][data-form=phone] .fm-stage{margin:0 -14px}
[data-purpose=status][data-form=phone] .fm-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%;padding-bottom:2px}
[data-purpose=status][data-form=phone] .fm-chips::-webkit-scrollbar{display:none}
[data-purpose=status][data-form=phone] .fm-chip{flex:0 0 auto;min-height:38px}
[data-purpose=status][data-form=phone] .work-app .work-toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
[data-purpose=status][data-form=phone] .work-app .work-toolbar input[type=search]{grid-column:1/-1;min-width:0}
[data-purpose=status][data-form=phone] .work-app .work-toolbar select{min-width:0;width:100%}
[data-purpose=status]:is([data-form=tablet],[data-form=pc]) .fm-stage{height:calc(calc(100 * var(--gn-dvh,1dvh)) - 300px);min-height:520px;max-height:none}
[data-purpose=status][data-tier=ultra] .fm-body{grid-template-columns:minmax(0,1fr) 400px}
/* 업무 앱 지도(현황): 휴대폰은 지도를 화면 폭 끝까지 크게 */
[data-purpose=status][data-form=phone] .work-app .map-canvas{height:calc(58 * var(--gn-vh,1vh));margin:0 calc(-1 * var(--ui-mx,17px));border-radius:0;border-left:0;border-right:0}
[data-purpose=status]:is([data-form=tablet],[data-form=pc]) .work-app .map-canvas{height:calc(calc(100 * var(--gn-dvh,1dvh)) - 260px);min-height:520px}
[data-purpose=status] .work-app .work-page:has(.map-layout){max-width:none}
[data-purpose=status][data-tier=ultra] .work-app .map-layout{grid-template-columns:minmax(0,1fr) 380px}
/* 자료·관리 앱 시설 위치·건물 단위 보기 */
[data-purpose=status][data-form=phone] .atlas-host .bv-stage{min-height:calc(56 * var(--gn-vh,1vh))}

/* ═══════════════ 현황 화면을 네 스타일에 맞춘다 ═══════════════ */
/* 공통: 차트 색 변수(대시보드 JS가 읽는다) */
:where(:root){--chart-1:var(--color-paint-2a78d6);--chart-2:var(--color-paint-86b6ef);--chart-hot:var(--color-paint-d0463f);--chart-warm:var(--color-paint-d9731a)}
[data-skin=field]{--chart-1:var(--color-paint-1f4f8f);--chart-2:var(--color-paint-8fb3e0);--chart-hot:var(--color-paint-c42b2b);--chart-warm:var(--color-paint-c2410c)}
[data-skin=toss]{--chart-1:var(--color-paint-1b64da);--chart-2:var(--color-paint-90c2ff);--chart-hot:var(--color-paint-f04452);--chart-warm:var(--color-paint-fe9800)}
[data-skin=clear]{--chart-1:var(--color-paint-1f4f8f);--chart-2:var(--color-paint-9fb5d3);--chart-hot:var(--color-paint-c42b2b);--chart-warm:var(--color-paint-b45309)}
/* 현장형: 남색 머리 띠 + 큰 숫자 + 둥근 18px 판 */
[data-skin=field] .db-panel,[data-skin=field] .db-kpi{border-radius:18px;border-color:var(--line)}
[data-skin=field] .db-kpi .v{font-size:30px}
[data-skin=field] .db-kpi::after{background:var(--color-surface-0f2f5c);height:4px}
[data-skin=field] .db-kpi.hot::after{background:var(--color-surface-c42b2b)}[data-skin=field] .db-kpi.amber::after{background:var(--color-surface-c2410c)}
[data-skin=field] .db-switch{background:var(--color-surface-06ff57dd04)}
[data-skin=field] .db-switch button{color:var(--color-ink-5d1cc971f5)}
[data-skin=field] .db-switch button.on{background:var(--color-surface-fff);color:var(--color-ink-0f2f5c)}
[data-skin=field] .db-pills{background:var(--color-surface-b34d3e7911);border-color:transparent;color:var(--color-ink-fff)}
[data-skin=field] .db-tabset,[data-skin=field] .db-switch{border-radius:999px}
[data-skin=field] .db-tab.on{background:var(--color-surface-0f2f5c);color:var(--color-ink-fff)}
[data-skin=field] .db-badge{border-radius:6px}
[data-skin=field] .db-head .page-sub b{color:var(--color-ink-ffd08a)}
[data-skin=field] .fm-chip{border-radius:999px;min-height:36px;font-weight:650}
[data-skin=field] .fm-chip[aria-pressed=true]{border-color:var(--color-line-0f2f5c)}
[data-skin=field] :is(.atlas-card,.fm-side,.fm-map){border-radius:18px}
[data-skin=field] .atlas-bar{background:var(--color-surface-0f2f5c);color:var(--color-ink-fff);border-bottom:0}
[data-skin=field] .atlas-bar .atlas-bar-title{color:var(--color-ink-fff)}
[data-skin=field] .atlas-bar .atlas-legend{color:var(--color-ink-bfe36491dc)}
/* 밝은형: 테두리 없는 둥근 22px 카드, 회색 바탕, 파란 강조, 알약 전환 */
[data-skin=toss] .db-panel,[data-skin=toss] .db-kpi{border:0;border-radius:22px;box-shadow:none}
[data-skin=toss] .db-kpi::after{height:0}
[data-skin=toss] .db-kpi .v{font-size:28px}
[data-skin=toss] .db-kpi.hot .v{color:var(--color-ink-f04452)}
[data-skin=toss] .db-switch,[data-skin=toss] .db-tabset{background:var(--color-surface-e5e8eb);border-radius:14px;padding:4px}
[data-skin=toss] .db-switch button,[data-skin=toss] .db-tab{border-radius:11px;color:var(--color-ink-4e5968)}
[data-skin=toss] .db-switch button.on,[data-skin=toss] .db-tab.on{background:var(--color-surface-fff);color:var(--color-ink-191f28);box-shadow:0 1px 3px var(--color-shadow-990c3b7dbb)}
[data-skin=toss] .db-pills{border:0;background:var(--color-surface-fff)}
[data-skin=toss] .db-badge.red{background:var(--color-surface-ffeeee);color:var(--color-ink-c81e2f)}[data-skin=toss] .db-badge.blue{background:var(--color-surface-e8f3ff);color:var(--color-ink-1b64da)}
[data-skin=toss] .db-link{color:var(--color-ink-1b64da)}
[data-skin=toss] .db-stage-body{background:var(--color-surface-f2f4f6);border-top:0}
[data-skin=toss] :is(.atlas-card,.fm-side,.fm-map,.tbl-wrap){border:0;border-radius:22px;box-shadow:none}
[data-skin=toss] .atlas-bar{border-bottom:0}
[data-skin=toss] .fm-chip{border:0;background:var(--color-surface-fff);color:var(--color-ink-4e5968);min-height:36px;font-weight:600}
[data-skin=toss] .fm-chip[aria-pressed=false]{opacity:.5}
[data-skin=toss] .fm-stage{border:0;border-radius:22px}
/* 촘촘형: 위 3px 선, 10px 모서리, 밑줄 탭, 선명한 구분선 */
[data-skin=clear] .db-panel,[data-skin=clear] .db-kpi{border-radius:10px;box-shadow:none}
[data-skin=clear] .db-kpi::after{top:0;bottom:auto;background:var(--color-surface-1f4f8f)}
[data-skin=clear] .db-kpi.hot::after{background:var(--color-surface-c42b2b)}[data-skin=clear] .db-kpi.amber::after{background:var(--color-surface-b45309)}
[data-skin=clear] .db-kpi .k{font-size:13.5px;color:var(--txt)}
[data-skin=clear] .db-kpi .v{font-size:30px}
[data-skin=clear] .db-pt{font-size:15.5px;font-weight:800}
[data-skin=clear] .db-tabset,[data-skin=clear] .db-switch{background:none;border-radius:0;padding:0;border-bottom:1px solid var(--line);gap:2px}
[data-skin=clear] .db-tab,[data-skin=clear] .db-switch button{border-radius:0;border-bottom:3px solid transparent;padding:6px 12px;font-size:13.5px}
[data-skin=clear] .db-tab.on,[data-skin=clear] .db-switch button.on{background:none;box-shadow:none;color:var(--txt);font-weight:800;border-bottom-color:var(--color-line-0f2f5c)}
[data-skin=clear] .db-badge{border-radius:6px;font-size:12px}
[data-skin=clear] .db-link{text-decoration:underline;text-underline-offset:3px}
[data-skin=clear] :is(.atlas-card,.fm-side,.fm-map){border-radius:10px}
[data-skin=clear] .atlas-bar{border-top:3px solid var(--color-line-0f2f5c)}
[data-skin=clear] .fm-chip{border-radius:6px;font-size:13.5px;min-height:34px}
[data-skin=clear] .fm-stage{border-radius:10px}
/* 강조형: 남색 보기 띠에 제목·전환, 흰 시트에 판, 숫자는 회색 타일, 상태는 색을 채운 표 */
[data-skin=hand] .db-head{margin-bottom:14px}
[data-skin=hand] .db-switch{background:var(--color-surface-b34d3e7911);border-radius:999px;padding:4px}
[data-skin=hand] .db-switch button{color:var(--color-ink-5d1cc971f5);font-weight:750;font-size:13.5px}
[data-skin=hand] .db-switch button.on{background:var(--color-surface-fff);color:var(--color-ink-0f2f5c);box-shadow:none}
[data-skin=hand] .db-pills{background:var(--color-surface-b34d3e7911);border:0;color:var(--color-ink-fff)}
[data-skin=hand] .db-kpis{gap:10px}
[data-skin=hand] .db-kpi{background:var(--color-surface-f3f4f6);border:0;border-radius:18px;box-shadow:none;padding:14px 16px}
[data-skin=hand] .db-kpi::after{top:14px;bottom:auto;left:auto;right:14px;width:10px;height:10px;border-radius:50%;background:var(--color-surface-0f2f5c)}
[data-skin=hand] .db-kpi.hot::after{background:var(--color-surface-c92a2a)}[data-skin=hand] .db-kpi.amber::after{background:var(--color-surface-e8590c)}[data-skin=hand] .db-kpi.is-zero::after{background:var(--color-surface-1b8a3a)}
[data-skin=hand] .db-kpi .k{font-size:13px;font-weight:750;color:var(--color-ink-4b5563)}
[data-skin=hand] .db-kpi .v{font-size:32px;font-weight:800;color:var(--color-ink-111827)}
[data-skin=hand] .db-kpi.hot .v{color:var(--color-ink-c92a2a)}
[data-skin=hand] .db-kpi:hover{background:var(--color-surface-e9ecf1);transform:translateY(-2px)}
[data-skin=hand] .db-panel{border:2px solid var(--color-line-e5e7eb);border-radius:22px;box-shadow:none}
[data-skin=hand] .db-pt{font-size:16px;font-weight:800}
[data-skin=hand] .db-tabset{background:var(--color-surface-f3f4f6);border-radius:999px;padding:4px}
[data-skin=hand] .db-tab{font-weight:750;padding:6px 14px}
[data-skin=hand] .db-tab.on{background:var(--color-surface-0f2f5c);color:var(--color-ink-fff);box-shadow:none}
[data-skin=hand] .db-badge{border-radius:8px;font-weight:800}
[data-skin=hand] .db-badge.red{background:var(--color-surface-c92a2a);color:var(--color-ink-fff)}[data-skin=hand] .db-badge.amb{background:var(--color-surface-fff0d6);color:var(--color-ink-8a4b00)}[data-skin=hand] .db-badge.blue{background:var(--color-surface-0f2f5c);color:var(--color-ink-fff)}
[data-skin=hand] .db-link{color:var(--color-ink-0f2f5c);font-weight:800}
[data-skin=hand] .db-stage-body{background:var(--color-surface-eef2f7)}
[data-skin=hand] :is(.atlas-card,.fm-side,.fm-map){border:2px solid var(--color-line-e5e7eb);border-radius:22px;box-shadow:none}
[data-skin=hand] .atlas-bar{background:var(--color-surface-0f2f5c);color:var(--color-ink-fff);border-bottom:0;padding:12px 18px}
[data-skin=hand] .atlas-bar .atlas-bar-title{color:var(--color-ink-fff);font-weight:800}
[data-skin=hand] .atlas-bar .atlas-legend{color:var(--color-ink-5d1cc971f5)}
[data-skin=hand] .b-alert{border-radius:8px}
[data-skin=hand] .fm-chip{border:2px solid var(--color-line-e5e7eb);border-radius:999px;min-height:38px;font-weight:750;padding:5px 12px}
[data-skin=hand] .fm-chip[aria-pressed=true]{border-color:var(--color-line-0f2f5c)}
[data-skin=hand] .fm-chip[aria-pressed=false]{opacity:.55}
[data-skin=hand] .fm-stage{border:2px solid var(--color-line-e5e7eb);border-radius:22px}
[data-skin=hand] .fm-btn{border-radius:12px;width:44px;height:44px;font-size:20px;font-weight:800}
[data-skin=hand] .fm-panel{border:2px solid var(--color-line-e5e7eb);border-radius:22px}

/* ═══════════════ 설정: 4조합 카드 · 용도별 줄 ═══════════════ */
.ui-cards.ui-cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.ui-cards.ui-cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.ui-cards.ui-cards-4{grid-template-columns:1fr}}
.ui-hand .ui-mini{background:linear-gradient(var(--color-surface-0f2f5c) 44%,var(--color-surface-fff) 44%);border-color:var(--color-line-d5dde8)}
.ui-hand .ui-mini i{background:var(--color-surface-fff);border:2px solid var(--color-line-e5e7eb);border-radius:6px}
.ui-hand .ui-mini i:nth-child(1){background:transparent;border-color:transparent}
.ui-hand .ui-mini.m-phone i:nth-child(2){background:transparent;border:0;border-top:6px solid var(--color-line-ffb347);border-radius:0;margin-top:10px}
.ui-hand .ui-mini.m-phone i:nth-child(3){border-color:var(--color-line-ffc9a3);background:var(--color-surface-fff0e6)}
.ui-hand .ui-mini i:last-child{background:var(--color-surface-0f2f5c);border-color:var(--color-line-0f2f5c)}
.ui-hand .ui-mini:is(.m-fold,.m-tablet,.m-pc){background:linear-gradient(90deg,var(--color-surface-0f2f5c) 20%,var(--color-surface-fff) 20%)}
.ui-hand .ui-mini:is(.m-fold,.m-tablet,.m-pc) i:nth-child(2){background:var(--color-surface-0f2f5c);border-color:var(--color-line-0f2f5c)}
.ui-hand .ui-mini:is(.m-fold,.m-tablet,.m-pc) i:nth-child(3){background:var(--color-surface-fff0e6);border-color:var(--color-line-ffc9a3)}
.ui-prow>div:first-child{flex:1;min-width:0}
.ui-prow .ui-seg{flex:none;max-width:100%}
.ui-now{display:inline-flex;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:800;background:var(--color-surface-0f2f5c);color:var(--color-ink-fff);vertical-align:2px}
.ui-pfix{flex:none;font-size:13px;font-weight:700;color:var(--sub);background:var(--color-surface-eef1f5);border-radius:12px;padding:8px 12px}
@media(max-width:900px){.ui-prow{flex-direction:column;align-items:stretch}.ui-prow .ui-seg{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.ui-prow .ui-seg button{flex:1 0 auto;white-space:nowrap}}
[data-skin=hand] .ui-set-block{border:2px solid var(--color-line-e5e7eb);border-radius:22px}
[data-skin=hand] .ui-seg{background:var(--color-surface-f3f4f6);border-radius:999px}
[data-skin=hand] .ui-seg button{border-radius:999px;font-weight:750}
[data-skin=hand] .ui-seg button.on{background:var(--color-surface-0f2f5c);color:var(--color-ink-fff);box-shadow:none}
[data-skin=hand] .ui-seg button.on small{color:var(--color-ink-ffb347)}
[data-skin=hand] .ui-card{border-radius:18px}
[data-skin=hand] .ui-card:has(input:checked){border-color:var(--color-line-0f2f5c);background:var(--color-surface-f3f6fb)}

/* ═══════════════ 건물 일러스트(건물 단위 보기 · 대시보드 건물 순회)를 네 스타일에 맞춘다 ═══════════════ */
[data-skin] .bv{--green:var(--color-paint-0f2f5c);--ink:var(--color-paint-141c26);--muted:var(--color-paint-5b6778);--line:var(--color-line-e3e8ef);--soft:var(--color-paint-eef2f7);--blue:var(--color-paint-2f74c0);--orange:var(--color-paint-c2410c)}
[data-skin] .bv-visual,[data-skin] .bv-dialog-body{background:var(--color-surface-eef2f6)}
[data-skin] .bv-facilities button{background:var(--color-surface-eef2f7);color:var(--ink)}
[data-skin] .bv-facilities button[aria-pressed=true]{background:var(--color-surface-e3ebf6);border-color:var(--color-line-0f2f5c)}
[data-skin] .bv-state{background:var(--color-surface-e8eef7);color:var(--color-ink-1f4f8f)}
[data-skin] .bv-sheet{background:var(--color-surface-f5f7fa)}
/* 현장형 */
[data-skin=field] .bv{border-radius:18px}
[data-skin=field] .bv-facilities button,[data-skin=field] .bv-floor-nav button,[data-skin=field] .bv-reset{border-radius:12px;min-height:40px;font-weight:650}
[data-skin=field] .bv-floor-label b{border-radius:10px}
[data-skin=field] .bv-open-plan{border-radius:12px;min-height:46px;font-weight:800}
/* 밝은형 */
[data-skin=toss] .bv{--green:var(--color-paint-1b64da);--line:var(--color-line-eef0f3);--soft:var(--color-paint-f2f4f6);border:0;border-radius:22px}
[data-skin=toss] .bv-visual{background:var(--color-surface-f2f4f6)}
[data-skin=toss] .bv-facilities button{border-radius:999px;background:var(--color-surface-f2f4f6);border:0;color:var(--color-ink-4e5968)}
[data-skin=toss] .bv-facilities button[aria-pressed=true]{background:var(--color-surface-e8f3ff);color:var(--color-ink-1b64da)}
[data-skin=toss] .bv-floor-nav button,[data-skin=toss] .bv-reset{border:0;border-radius:12px;background:var(--color-surface-fff);box-shadow:0 1px 3px var(--color-shadow-990c3b7dbb)}
[data-skin=toss] .bv-floor-nav button[aria-pressed=true]{background:var(--color-surface-1b64da);color:var(--color-ink-fff)}
[data-skin=toss] .bv-side{border-left:0}
[data-skin=toss] .bv-open-plan{border-radius:14px;min-height:46px;font-weight:700}
[data-skin=toss] .bv-state{border-radius:999px;background:var(--color-surface-e8f3ff);color:var(--color-ink-1b64da)}
/* 촘촘형 */
[data-skin=clear] .bv{border-radius:10px;border-top:3px solid var(--color-line-0f2f5c)}
[data-skin=clear] .bv h2{font-weight:800;font-size:27px}
[data-skin=clear] .bv-side h3{font-weight:800}
[data-skin=clear] .bv-info{font-size:13px}
[data-skin=clear] .bv-side .bv-note{font-size:13px}
[data-skin=clear] .bv-facilities button{border-radius:6px;font-size:12.5px;border-color:var(--color-line-dde3ea);background:var(--color-surface-fff)}
[data-skin=clear] .bv-floor-nav button{border-radius:6px;font-size:13px}
/* 강조형 */
[data-skin=hand] .bv{border:2px solid var(--color-line-e5e7eb);border-radius:22px;--muted:var(--color-paint-4b5563);--line:var(--color-line-e5e7eb)}
[data-skin=hand] .bv h2{font-weight:800;font-size:27px;letter-spacing:-.03em}
[data-skin=hand] .bv-total{font-weight:800;color:var(--color-ink-0f2f5c)}
[data-skin=hand] .bv-facilities button{border-radius:999px;border:2px solid var(--color-line-e5e7eb);background:var(--color-surface-fff);font-size:12.5px;font-weight:750;min-height:38px;padding:6px 12px}
[data-skin=hand] .bv-facilities button[aria-pressed=true]{background:var(--color-surface-0f2f5c);border-color:var(--color-line-0f2f5c);color:var(--color-ink-fff)}
[data-skin=hand] .bv-floor-nav{gap:8px}
[data-skin=hand] .bv-floor-nav button{border:2px solid var(--color-line-e5e7eb);border-radius:14px;min-width:52px;min-height:48px;font-size:14px;font-weight:800}
[data-skin=hand] .bv-floor-nav button[aria-pressed=true]{background:var(--color-surface-0f2f5c);border-color:var(--color-line-0f2f5c);color:var(--color-ink-fff)}
[data-skin=hand] .bv-floor-nav .floor-count{background:var(--color-surface-e8590c)}
[data-skin=hand] .bv-reset{border:0;border-radius:999px;background:var(--color-surface-0f2f5c);color:var(--color-ink-fff);font-weight:750;min-height:40px;padding:8px 14px}
[data-skin=hand] .bv-side h3{font-weight:800;font-size:18px}
[data-skin=hand] .bv-state{border-radius:10px;font-weight:800;background:var(--color-surface-0f2f5c);color:var(--color-ink-fff)}
[data-skin=hand] .bv-state.pending{background:var(--color-surface-fff0d6);color:var(--color-ink-8a4b00)}
[data-skin=hand] .bv-floor-label b{border-radius:12px}
[data-skin=hand] .bv-open-plan{border-radius:14px;min-height:48px;font-weight:800;font-size:14px}
[data-skin=hand] .bv-issue-item{border-radius:12px;font-weight:700;font-size:12px;padding:10px}
[data-skin=hand] .bv-issue-item:not(.progress):not(.done){background:var(--color-surface-cc4d0a);color:var(--color-ink-fff)}
[data-skin=hand] .bv-issue-item.progress{background:var(--color-surface-0f2f5c);color:var(--color-ink-fff)}
[data-skin=hand] .bv-issue-item.done{background:var(--color-surface-1a7f37);color:var(--color-ink-fff)}
[data-skin=hand] .bv-sheet{border-radius:14px}
/* 휴대폰: 건물 일러스트 옆 설명을 아래로 */
[data-form=phone] .bv-layout{grid-template-columns:1fr}
[data-form=phone] .bv-side{border-left:0;border-top:1px solid var(--line)}
[data-form=phone] .bv-head{flex-direction:column;align-items:flex-start;padding:18px}
[data-form=phone] .bv-total{text-align:left}
[data-form=phone] .bv-facilities{padding:0 18px 16px}
[data-form=phone] .bv-stage{height:calc(56 * var(--gn-vh,1vh));min-height:320px}
/* 건물 공간 막대(남색 바탕일 때 설명 글자) */
:is([data-skin=field],[data-skin=hand]) .atlas-bar .muted{color:var(--color-ink-8838989005)!important}
:is([data-skin=field],[data-skin=hand]) .atlas-bar .btn{background:var(--color-surface-06ff57dd04);border-color:transparent;color:var(--color-ink-fff)}
/* 분석·보고(운영비·보수비 순위) */
[data-skin=field] .bpms-chart{border-radius:18px}
[data-skin=toss] .bpms-chart{border:0;border-radius:22px}
[data-skin=clear] .bpms-chart{border-radius:10px;border-top:3px solid var(--color-line-1f4f8f)}
[data-skin=hand] .bpms-chart{border:2px solid var(--color-line-e5e7eb);border-radius:22px}
[data-skin=hand] .bpms-chart h3{font-weight:800;font-size:17px}
[data-skin] .bpms-track i{background:var(--chart-1)}
/* 용도가 바뀌어 스타일이 달라질 때(예: 업무 → 조사) 늘 보이는 틀은 색을 부드럽게 바꾼다 */
:root.ui-ready:not([data-motion=off]) :is(.work-app .mobile-top,#compact-nav,#sidebar,.ui-appbar,body){transition:background-color .38s ease,color .38s ease,border-color .38s ease,width var(--sp-d) var(--sp-chewy),transform var(--sp-d) var(--sp-chewy),box-shadow .3s}
[data-form=phone] .db-strip>*{min-width:0;max-width:100%}
[data-form=phone] .db-strip>.db-pt{flex:1 1 100%}
/* 현장 촬영분 취합: 규칙 표의 긴 경로가 화면 밖으로 밀지 않게(이전부터 있던 넘침) */
.tbl.cl-rule{table-layout:fixed;min-width:0!important}
.cl-rule td{overflow-wrap:anywhere;word-break:break-word}
.cl-rule td:first-child{width:92px}
/* 좁은 휴대폰: 긴 상태 표(배지)가 한 줄로 밀리지 않게 */
[data-form=phone] #main .badge{white-space:normal;max-width:100%;overflow-wrap:anywhere}
[data-purpose=master]:is([data-form=tablet],[data-form=pc]):not([data-tier=compact]) .work-app .work-page>.admin-tabs .admin-tab small{color:inherit;opacity:.72}