/* ROOTA App Shell CSS — Level 1.5.
   [A] legacy 셸(index.html 764~876·945~947·1607~1610 에서 그대로 옮김 — ?ui=legacy 경로, 값 변경 없음)
   [B] UI2 셸(html.ui2) — Linear 식 사이드바 · 공통 페이지 머리 · 넓은 캔버스 · 타이포 계층. 색·반경·간격은 토큰만. */

/* ══════════ [A] legacy ══════════ */
.tabnav{position:sticky;top:0;z-index:1100;background:rgba(8,20,14,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08);padding:0}
.tabnav-in{max-width:760px;margin:0 auto;display:flex;gap:2px;padding:0 12px;overflow-x:auto;scrollbar-width:none}
/* 사이드바 묶음 머리글. 기능이 많을수록 같은 높이로 나열하면 무엇이 무엇인지 알 수 없다. */
.tnav-g{display:flex;flex-direction:column}
.tnav-g+.tnav-g{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.tnav-gt{padding:0 14px 6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.38)}
.tnav-g.empty{display:none}
/* 작업공간 고르개 — 사이드바 맨 위. 지금 어디에 있는지가 메뉴보다 먼저 읽혀야 한다. */
.ws{display:flex;flex-direction:column;gap:3px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.07)}
.ws:empty{display:none}
.ws-t{padding:0 14px 6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.38)}
.ws-b{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;
  padding:10px 13px;border-radius:var(--r-sm);font-family:inherit;font-size:14.5px;font-weight:700;
  color:rgba(255,255,255,.62);cursor:pointer;letter-spacing:-.2px}
.ws-b:hover{background:rgba(255,255,255,.06);color:#fff}
.ws-b.on{background:rgba(74,222,128,.14);color:#fff}
.ws-b .ws-d{flex:none;width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.22)}
.ws-b.on .ws-d{background:var(--glow)}
.ws-b small{margin-left:auto;font-size:11px;font-weight:700;color:rgba(255,255,255,.34)}
/* ── 산림 작업공간: 농사 쪽 메뉴를 내린다 ── */
body.role-forest .tnav[data-tab="field"],
body.role-forest .tnav[data-tab="journal"],
body.role-forest .tnav[data-tab="devices"],
body.role-forest #tnavMarketBtn,
body.role-forest .tnav[data-tab="intel"],
body.role-forest .tnav[data-tab="farm"],
body.role-forest .tnav[data-tab="market"],
body.role-officer .tnav[data-tab="farm"]{display:none!important}
.vh-info{margin-left:6px;color:var(--ink4);cursor:help;font-size:12px}
/* 실증 기능(센서·자동관수·환경성과)은 기본 숨김. 설정 › 실증 기능 보기 를 켠 사람에게만(admin 기본 켬). 삭제가 아니라 숨김이다. */
.tnav-g[data-g="legacy"]{display:none!important}
body.legacy-on .tnav-g[data-g="legacy"]{display:flex!important}
body.legacy-on .tnav[data-tab="devices"],body.legacy-on .tnav[data-tab="impact"]{display:flex!important}
body.role-forest.legacy-on .tnav-g[data-g="legacy"],body.role-officer.legacy-on .tnav-g[data-g="legacy"]{display:none!important}
/* ── 지자체 작업공간: 산림 두 화면은 산림 작업공간이 맡는다 ── */
body.role-officer .tnav[data-tab="forest"],
body.role-officer .tnav[data-tab="journal"],
body.role-officer .tnav[data-tab="pwn"]{display:none!important}
.tabnav-in::-webkit-scrollbar{display:none}
.tnav{flex:1;min-width:max-content;background:none;border:none;padding:14px 16px;font-family:"Pretendard Variable",sans-serif;font-size:17px;font-weight:700;color:rgba(255,255,255,.66);border-radius:var(--r-xs);cursor:pointer;position:relative;white-space:nowrap;transition:.18s;letter-spacing:-.2px}
.tnav:hover{color:rgba(255,255,255,.8)}
.tnav.on{color:#fff;background:rgba(255,255,255,.06)}
.tnav.on::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2.5px;background:var(--mint);border-radius:0 3px 3px 0}
.tnav-badge{display:inline-block;min-width:16px;height:16px;line-height:16px;background:var(--alert);color:#fff;font-size:9px;font-weight:800;border-radius:var(--r-xs);padding:0 4px;margin-left:5px;vertical-align:top}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:262px;z-index:1300;background:#20211a;border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;transform:translateX(-100%)}
.sidebar.open{transform:translateX(0)}
.sidebar.anim{transition:transform .22s ease}
.side-brand{display:flex;align-items:center;gap:9px;padding:16px 16px 10px}
.side-brand img{width:30px;height:30px;object-fit:contain}
.side-brand .nm{font-family:"Pretendard Variable",sans-serif;font-weight:700;font-size:18px;color:#fff;line-height:1}
.side-brand .sub{font-size:10px;color:rgba(255,255,255,.42);letter-spacing:.06em;margin-top:3px}
.side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 10px}
/* 계정 메뉴를 펼치면 하단 영역이 길어지는데 스크롤이 없어 '튜토리얼·약관'이 잘렸다.
   하단도 스크롤되게 하고, 메뉴가 열리면 상단 목록이 먼저 줄어들도록 flex-shrink 를 준다. */
/* 최근 질문 (사이드바). 어두운 바탕이라 카드가 아니라 글줄로 둔다 — 카드가 겹치면 메뉴와 구분이 안 된다.
   지우기(✕)는 평소 옅게, 올렸을 때만 또렷하게. */
.side-recent{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 10px 8px}
.side-recent:not(:empty){border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.sr-h{display:flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.04em;
  color:rgba(255,255,255,.42);padding:0 8px 7px}
.sr-clear{margin-left:auto;border:none;background:none;color:rgba(255,255,255,.42);font-size:11px;font-weight:700;
  cursor:pointer;font-family:inherit;padding:2px 4px;border-radius:var(--r-xs)}
.sr-clear:hover{color:#fca5a5;background:rgba(255,255,255,.07)}
.sr-list{display:flex;flex-direction:column;gap:1px}
.sr-row{display:flex;align-items:center;border-radius:var(--r-xs)}
.sr-row:hover{background:rgba(255,255,255,.07)}
.sr-item{flex:1;min-width:0;border:none;background:none;color:rgba(255,255,255,.72);font-family:inherit;
  font-size:13.5px;font-weight:600;text-align:left;padding:9px 8px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-row:hover .sr-item{color:#fff}
.sr-del{flex:none;border:none;background:none;color:rgba(255,255,255,.3);font-size:12px;cursor:pointer;
  font-family:inherit;padding:8px 9px;opacity:0;transition:.14s}
.sr-row:hover .sr-del{opacity:1}
.sr-del:hover{color:#fca5a5}
.side-foot{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:10px 10px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;color:rgba(255,255,255,.5)}
.sf-links{display:flex;flex-direction:column;gap:1px;margin-bottom:12px}
/* 링크마다 색을 다르게 주던 걸 없앴다. 색이 여섯 가지면 무엇이 중요한지가 아니라 그냥 산만해진다.
   기본은 한 가지 톤, 강조는 '체험 시작' 하나만 인라인으로 준다. */
.sf-link{display:flex;align-items:center;gap:9px;padding:10px 8px;border-radius:var(--r-xs);font-size:14px;font-weight:600;text-decoration:none;letter-spacing:-.01em;transition:background .14s;cursor:pointer;color:rgba(255,255,255,.74)}
.sf-link i{color:rgba(255,255,255,.45)}
.sf-link:hover i{color:rgba(255,255,255,.75)}
.sf-link:hover{background:rgba(255,255,255,.07)}
.sf-link i{display:flex;flex:none}
.sf-link i svg{width:15px;height:15px}
/* 담당자용 링크 접기, 농가 사이드바에서 하단 줄 수를 6 → 3으로 줄인다 */
.sf-more>summary{list-style:none;display:flex;align-items:center;gap:9px;padding:10px 8px;border-radius:var(--r-xs);
  font-size:14px;font-weight:600;color:rgba(255,255,255,.6);cursor:pointer}
.sf-more>summary::-webkit-details-marker{display:none}
.sf-more>summary::after{content:"▾";margin-left:auto;font-size:11px}
.sf-more[open]>summary::after{content:"▴"}
.sf-more>summary:hover{background:rgba(255,255,255,.07)}
.sf-tag{display:flex;align-items:center;gap:8px;padding:0 8px;color:rgba(255,255,255,.62);font-weight:600;font-size:12px;margin-bottom:4px}
.sf-tag i{display:flex;flex:none}
.sf-tag i svg{width:14px;height:14px}
.sf-sub{padding:0 8px;font-size:11px;line-height:1.6;color:rgba(255,255,255,.4)}
/* 메뉴 버튼도 손가락 최소 크기를 지킨다 — 26px 이라 폰에서 자꾸 빗나갔다 */
.side-toggle{background:none;border:none;cursor:pointer;font-size:21px;color:var(--ink);
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;line-height:1}
#sideBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1250;opacity:0;visibility:hidden;transition:.2s}
body.sb-open #sideBackdrop{opacity:1;visibility:visible}
.sidebar .tabnav{position:static;background:none;border:none;padding:0}
.sidebar .tabnav-in{flex-direction:column;max-width:none;margin:0;padding:0;gap:3px;overflow:visible}
.sidebar .tnav{flex:none;width:100%;text-align:left;padding:12px 13px;border-radius:var(--r-sm);font-size:15.5px;color:rgba(255,255,255,.62);letter-spacing:-.2px}
.sidebar .tnav:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar .tnav.on{background:rgba(255,255,255,.07);color:#fff}
.sidebar .tnav.on::after{display:none}
@media(min-width:900px){body.sb-open{padding-left:262px}body.sb-open #sideBackdrop{display:none}.hdr .brand{display:none}}
@media(max-width:899px){.sidebar{width:80%;max-width:300px}}
.tnav{display:flex;align-items:center;gap:10px}
.tnav [data-ico]{opacity:.75;transition:opacity .15s}
.tnav.on [data-ico],.tnav:hover [data-ico]{opacity:1}
#viewHint{display:none;align-items:flex-start;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;margin:18px 0 4px;font-size:13px;color:var(--ink3);line-height:1.65;word-break:keep-all}
#viewHint.on{display:flex}
#viewHint b{color:var(--ink);font-weight:700}
.vh-ico{font-size:15px;line-height:1.3}

/* ══════════ [B] UI2 ══════════ */
/* 캔버스·타이포 */
html.ui2 body{background:var(--bg);color:var(--text-primary);font-family:var(--font-sans);font-size:15px;line-height:var(--lh);-webkit-font-smoothing:antialiased}
html.ui2 body.wide-view .wrap{max-width:var(--content-max);padding-left:var(--content-padding);padding-right:var(--content-padding);gap:var(--section-gap)}
html.ui2 .wrap{padding-top:var(--space-4)}
html.ui2 h1,html.ui2 h2,html.ui2 h3{letter-spacing:var(--tracking-tight)}
html.ui2 #viewHint{display:none!important}                                  /* 화면 설명은 공통 머리(topBar)가 맡는다 */
html.ui2 .footer{color:var(--text-faint);font-size:var(--fs-xs)}

/* 사이드바 — 거의 검정, 폭 236, 얇은 계층. 아이콘 단색. 선택된 항목만 또렷하게. */
html.ui2 .sidebar{width:var(--sidebar-width);background:var(--surface-inverse);border-right:1px solid color-mix(in srgb,var(--text-inverse) 8%,transparent)}
@media(min-width:900px){html.ui2 body.sb-open{padding-left:var(--sidebar-width)} html.ui2 body.sb-open #composer{left:var(--sidebar-width)}}
html.ui2 .side-brand{padding:var(--space-5) var(--space-4) var(--space-3);gap:var(--space-3);align-items:flex-start}
html.ui2 .side-brand .nm{font-size:0}                                       /* '루타' 글자 대신 워드마크 */
html.ui2 .side-brand .nm::before{content:"ROOTA";font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:.04em;color:var(--text-inverse);line-height:1}
html.ui2 .side-brand .nm::after{content:attr(data-ws);display:block;margin-top:5px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;color:color-mix(in srgb,var(--text-inverse) 55%,transparent)}
html.ui2 .side-logo{width:26px;height:26px;margin-top:-2px}
html.ui2 .side-nav{padding:var(--space-2) var(--space-3)}
html.ui2 .sidebar .tabnav-in{gap:1px}
html.ui2 .ws{margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid color-mix(in srgb,var(--text-inverse) 8%,transparent)}
html.ui2 .ws-t,html.ui2 .tnav-gt{padding:0 var(--space-2) var(--space-1);font-size:10.5px;font-weight:700;letter-spacing:var(--tracking-eyebrow);color:color-mix(in srgb,var(--text-inverse) 42%,transparent)}
html.ui2 .ws-b{padding:6px var(--space-2);border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:600;color:color-mix(in srgb,var(--text-inverse) 70%,transparent);letter-spacing:0}
html.ui2 .ws-b:hover{background:color-mix(in srgb,var(--text-inverse) 7%,transparent)}
html.ui2 .ws-b.on{background:color-mix(in srgb,var(--text-inverse) 10%,transparent);color:var(--text-inverse)}
html.ui2 .ws-b .ws-d{width:6px;height:6px;background:color-mix(in srgb,var(--text-inverse) 25%,transparent)}
html.ui2 .ws-b.on .ws-d{background:var(--brand)}
html.ui2 .ws-b small{font-size:10.5px;font-weight:600;color:color-mix(in srgb,var(--text-inverse) 38%,transparent)}
html.ui2 .tnav-g+.tnav-g{margin-top:var(--space-4);padding-top:0;border-top:none}
html.ui2 .sidebar .tnav{min-height:var(--nav-item-height);padding:0 var(--space-2);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--fs-md);font-weight:500;letter-spacing:0;color:color-mix(in srgb,var(--text-inverse) 66%,transparent);gap:var(--space-2);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
html.ui2 .sidebar .tnav [data-ico]{opacity:.55;width:16px;height:16px;display:inline-flex}
html.ui2 .sidebar .tnav [data-ico] svg{width:16px;height:16px}
html.ui2 .sidebar .tnav:hover{background:color-mix(in srgb,var(--text-inverse) 6%,transparent);color:var(--text-inverse)}
html.ui2 .sidebar .tnav.on{background:color-mix(in srgb,var(--text-inverse) 10%,transparent);color:var(--text-inverse);font-weight:600}
html.ui2 .sidebar .tnav.on [data-ico]{opacity:1}
html.ui2 .sidebar .tnav.on::after{display:none}
html.ui2 .tnav-badge{background:var(--danger)}
html.ui2 .tnav.tour-spot{background:color-mix(in srgb,var(--brand) 25%,transparent);box-shadow:0 0 0 1.5px var(--brand);color:var(--text-inverse)}
html.ui2 .side-recent{padding:var(--space-1) var(--space-3) var(--space-2)}
html.ui2 .sr-h{font-size:10.5px;letter-spacing:var(--tracking-eyebrow);color:color-mix(in srgb,var(--text-inverse) 42%,transparent)}
html.ui2 .sr-item{font-size:var(--fs-sm);font-weight:500;padding:6px var(--space-2)}
html.ui2 .side-foot{padding:var(--space-3) var(--space-3) var(--space-4);border-top:1px solid color-mix(in srgb,var(--text-inverse) 8%,transparent);color:color-mix(in srgb,var(--text-inverse) 55%,transparent)}
html.ui2 .sf-link,html.ui2 .sf-more>summary{padding:6px var(--space-2);font-size:var(--fs-sm);font-weight:500;border-radius:var(--radius-md)}
html.ui2 .sf-tag{font-size:var(--fs-xs)}
html.ui2 .sf-sub{font-size:10.5px}
html.ui2 .uchip{border-radius:var(--radius-md)}

/* 공통 페이지 머리 — 캔버스 위에 바로(표면 없음). eyebrow · 제목 · 설명/메타 · 우측 상태 배지/행동 */
html.ui2 .c-page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3) var(--space-6);padding:var(--space-2) 0 var(--space-4);border-bottom:1px solid var(--border-soft)}
html.ui2 .c-page-head[hidden]{display:none}
html.ui2 .ph-title{margin:0;font-family:var(--font-display);font-size:var(--fs-display);font-weight:800;letter-spacing:var(--tracking-tight);line-height:var(--lh-tight);color:var(--text-primary);word-break:keep-all}
html.ui2 .ph-title select{margin-left:var(--space-3);font:inherit;font-size:var(--fs-md);font-weight:600;padding:4px var(--space-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);background:var(--surface);color:var(--text-secondary);vertical-align:middle}
html.ui2 .ph-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-size:var(--fs-sm);color:var(--text-muted);word-break:keep-all}
html.ui2 .ph-desc{color:var(--text-secondary)}
html.ui2 .ph-r{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2)}
html.ui2 .ph-status{display:flex;flex-wrap:wrap;gap:var(--space-1);justify-content:flex-end}
html.ui2 .ph-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-end}
@media(max-width:700px){html.ui2 .ph-r{align-items:flex-start} html.ui2 .ph-status,html.ui2 .ph-actions{justify-content:flex-start} html.ui2 .ph-title{font-size:var(--fs-xl)}}

/* 모바일 하단 나브·챗 컴포저는 그대로 두되 색만 토큰으로 */
html.ui2 .botnav{background:var(--surface);border-top-color:var(--border-soft)}
/* 사이드바는 통째로 스크롤 — 예전엔 나브 영역만 따로 스크롤돼 아래 묶음(지역 분석·도구)이 접혀 보이지 않았다(미리보기 실측) */
html.ui2 .sidebar{overflow-y:auto;overscroll-behavior:contain}
html.ui2 .side-nav,html.ui2 .side-recent,html.ui2 .side-foot{flex:0 0 auto;overflow:visible;min-height:auto}
html.ui2 .side-foot{margin-top:auto}
html.ui2 .sf-links{gap:0}