/* ROOTA Satellite Intelligence — 위성 농지 모니터링 page CSS (2026-10). 색·반경·그림자는 토큰만(ops/ui_lint.js).
   방향: 지도 중심 · 큰 숫자 · 얇은 구분선 · 낮은 카드 중첩 · 상태색 3개(정상/관찰/확인) 제한 · 전문 수치는 tabular/mono. */
#satRoot{font-family:var(--font-sans);color:var(--text-primary)}
/* WCAG AA(4.5:1) — 공용 토큰의 흐린 글자색(--text-muted 4.0~4.3 · --text-faint)이 작은 글자에서 기준에 못 미쳐(axe 실측)
   이 화면 안에서만 본문색 쪽으로 당긴다. 토큰끼리 섞으므로 다크 모드에서도 같은 방향(밝아짐)으로 대비가 오른다. */
#satRoot{--text-muted:color-mix(in srgb,var(--text-primary) 32%,var(--text-muted));--text-faint:color-mix(in srgb,var(--text-primary) 48%,var(--text-faint))}
#satRoot .c-badge.warning,#satRoot .c-badge.demo,#satRoot .s-kv>div.t-warning dt,#satRoot .s-kv>div.t-warning dd,#satRoot .s-big b.t-warning,#satRoot .s-soil b.dn{color:color-mix(in srgb,var(--warning) 72%,var(--text-primary))}
#satRoot .c-badge.positive,#satRoot .s-kv>div.t-positive dt{color:color-mix(in srgb,var(--positive) 78%,var(--text-primary))}
.s-modes{display:inline-flex;gap:var(--space-1);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:2px;background:var(--surface)}
.s-mode{font:inherit;font-size:var(--fs-sm);font-weight:700;padding:6px 12px;border-radius:var(--radius-sm);border:0;background:transparent;color:var(--text-secondary);cursor:pointer}
.s-mode.on{background:var(--text-primary);color:var(--surface)}
.s-mode:focus-visible,.s-tbl button:focus-visible,.c-row[role=button]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 히어로 — 첫 10초에 읽을 문장 하나와 흐름 다섯 칸 */
.s-hero{margin:var(--space-3) 0 var(--space-4);padding:var(--space-4) 0 var(--space-4);border-bottom:1px solid var(--border-soft)}
.s-hero-t{margin:0;font-size:var(--fs-xl);font-weight:800;letter-spacing:var(--tracking-tight);word-break:keep-all}
.s-hero-s{margin:var(--space-2) 0 0;font-size:var(--fs-md);color:var(--text-secondary);word-break:keep-all}
.s-flow{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2)}
.s-flow li{position:relative;padding:var(--space-2) var(--space-3);border:1px solid var(--border-soft);border-radius:var(--radius-md);background:var(--surface-sunken);min-width:0}
.s-flow li b{display:block;font-size:var(--fs-sm);font-weight:800}.s-flow li span{display:block;font-size:var(--fs-xs);color:var(--text-muted);margin-top:2px;word-break:keep-all}
.s-flow li+li::before{content:"→";position:absolute;left:-13px;top:50%;transform:translateY(-50%);color:var(--text-faint);font-size:var(--fs-xs)}
/* 지역 선택 줄 */
.s-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-bottom:var(--space-3)}
.s-bar-l{font-size:var(--fs-sm);font-weight:700;color:var(--text-secondary)}
.s-sel{font:inherit;font-size:var(--fs-sm);padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--text-primary);max-width:100%;min-width:200px}
.s-bar-q{display:inline-flex;gap:var(--space-1)}
.s-bar-q input{font:inherit;font-size:var(--fs-sm);padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--text-primary);min-width:180px}
/* 본문 격자 — 데스크톱 지도 8 / 요약 4 */
.s-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(280px,4fr);gap:var(--space-4);align-items:start}
.s-mapcol{min-width:0}
.s-map{position:relative;height:min(64vh,560px);min-height:360px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-soft);background:var(--surface-sunken)}
.s-map .leaflet-container{background:var(--surface-sunken)}
.s-veil{position:absolute;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface) 72%,transparent)}
.s-veil[hidden]{display:none}
.s-veil-in{text-align:center;padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border-soft);box-shadow:var(--shadow-md)}
.s-veil-in b{display:block;font-size:var(--fs-md)}.s-veil-in span{display:block;margin-top:4px;font-size:var(--fs-sm);color:var(--text-muted)}
.s-legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin-top:var(--space-2);font-size:var(--fs-sm);color:var(--text-secondary)}
.s-legend>span{display:inline-flex;align-items:center;gap:6px}
.s-lg{display:inline-flex;align-items:center;justify-content:center;width:18px;height:14px;border-radius:var(--r-xs);font-size:10px;font-weight:800;line-height:1;color:var(--surface)}
.s-lg-ok{border:2px solid var(--positive)}
.s-lg-watch{background:var(--warning);border:2px dashed var(--warning)}
.s-lg-check{background:var(--danger);border:2px dashed var(--danger)}
.s-lg-na{border:1px dotted var(--text-faint)}
.s-grad{display:inline-block;width:110px;height:8px;border-radius:var(--radius-pill)}
.s-tgl{margin-left:auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.s-mk{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-weight:900;font-size:12px;color:var(--surface);border:2px solid var(--surface);box-shadow:var(--shadow-xs)}
.s-mk-check{background:var(--danger)}.s-mk-watch{background:var(--warning)}
.leaflet-tooltip.s-tip{font:600 12px/1.3 var(--font-sans);background:var(--surface);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:none}
/* 오늘의 관찰 요약 */
.s-side{min-width:0}
.s-sum{padding:var(--space-4);border:1px solid var(--border-soft);border-radius:var(--radius-card);background:var(--surface)}
.s-sum-t{margin:var(--space-1) 0 0;font-size:var(--fs-lg);font-weight:800;letter-spacing:var(--tracking-tight)}
.s-kv{margin:var(--space-3) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.s-kv>div{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--surface-sunken);min-width:0}
.s-kv dt{font-size:var(--fs-xs);font-weight:700;color:var(--text-muted)}
.s-kv dd{margin:2px 0 0;font-family:var(--font-mono);font-size:var(--fs-display);font-weight:700;letter-spacing:var(--tracking-tight);line-height:1.1;font-variant-numeric:tabular-nums}
.s-kv>div.t-positive dt{color:var(--positive)}.s-kv>div.t-warning dt{color:var(--warning)}.s-kv>div.t-danger dt{color:var(--danger)}
.s-kv>div.t-danger dd{color:var(--danger)}.s-kv>div.t-warning dd{color:var(--warning)}
.s-kv-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.s-obs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-3);font-size:var(--fs-sm);color:var(--text-secondary)}
.s-obs small{color:var(--text-muted)}
.s-skel{height:96px;border-radius:var(--radius-md);background:var(--surface-sunken);margin:var(--space-3) 0}
/* DATA SOURCE */
.s-ds{margin-top:var(--space-3);border:1px solid var(--border-soft);border-radius:var(--radius-card);background:var(--surface);padding:var(--space-3) var(--space-4)}
.s-ds summary{cursor:pointer;display:flex;align-items:baseline;gap:var(--space-2);list-style:none}
.s-ds summary::-webkit-details-marker{display:none}
.s-ds summary .c-eyebrow{font-family:var(--font-mono);letter-spacing:.08em}
.s-dsl{margin-top:var(--space-3);font-size:var(--fs-xs)}
.s-dsl dt{color:var(--text-muted);font-weight:700;white-space:nowrap}.s-dsl dd{font-family:var(--font-mono);color:var(--text-secondary);word-break:keep-all;line-height:1.5}
/* 먼저 확인할 필지 */
.s-tblwrap{margin-top:var(--space-2)}
.s-tbl th{white-space:nowrap}.s-tbl td{vertical-align:middle;white-space:nowrap}
.s-tbl td.n,.s-tbl th.n{text-align:right}
.s-tbl td small{display:block;font-size:var(--fs-xs);color:var(--text-muted);font-weight:500}
.s-tbl td b.dn,.s-big b.dn{color:var(--danger)}.s-tbl td b.up,.s-big b.up{color:var(--positive)}
.s-tbl tr.on td{background:var(--accent-soft)}
.s-tbl tbody tr{cursor:pointer}
/* 필지 상세 */
.s-detail{margin-top:var(--space-2);outline:none}
.s-dgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(260px,5fr);gap:var(--space-4);align-items:start}
.s-big{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-2)}
.s-big>div{padding:var(--space-3);border:1px solid var(--border-soft);border-radius:var(--radius-md);background:var(--surface);min-width:0}
.s-big i{display:block;font-style:normal;font-size:var(--fs-xs);font-weight:700;color:var(--text-muted)}
.s-big b{display:block;margin-top:4px;font-family:var(--font-mono);font-size:var(--fs-display);font-weight:700;letter-spacing:var(--tracking-tight);line-height:1.1;font-variant-numeric:tabular-nums}
.s-big b.t-positive{color:var(--positive)}.s-big b.t-warning{color:var(--warning)}.s-big b.t-danger{color:var(--danger)}.s-big b.t-mute{color:var(--text-muted)}
.s-big small{display:block;margin-top:4px;font-size:var(--fs-xs);color:var(--text-muted);word-break:keep-all}
.s-pro{margin-top:var(--space-2);font-size:var(--fs-xs);color:var(--text-secondary)}
.s-pro summary{cursor:pointer;font-weight:700;color:var(--text-muted)}
.s-pro .c-kv{margin-top:var(--space-2)}.s-pro dd{word-break:keep-all;line-height:1.55}
.s-h4{margin:var(--space-4) 0 var(--space-2);font-size:var(--fs-md);font-weight:800}
.s-why{margin:0;padding-left:1.2em;font-size:var(--fs-sm);line-height:1.65;color:var(--text-secondary);word-break:keep-all}
.s-why.sm{font-size:var(--fs-xs);margin-top:var(--space-2)}
.s-act{padding:var(--space-4);border:1px solid var(--border-soft);border-radius:var(--radius-card);background:var(--surface)}
.s-act .c-btn.primary{margin-top:var(--space-2)}
.s-case{margin-top:var(--space-2);font-size:var(--fs-sm)}
.s-caseform{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1);margin-top:var(--space-2)}
.s-caseform input,.s-caseform select{font:inherit;font-size:var(--fs-xs);padding:7px 8px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-primary);min-width:0}
.s-caseform input[id=satCaseNt]{grid-column:1/-1}
.s-mini{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--border-soft);border-radius:var(--radius-card);background:var(--surface)}
.s-mini .c-eyebrow small{font-weight:500;text-transform:none;letter-spacing:0;margin-left:4px}
.s-soil{display:flex;align-items:baseline;gap:var(--space-2);margin-top:var(--space-1);font-size:var(--fs-md)}
.s-soil b.dn{color:var(--warning)}.s-soil b.up{color:var(--accent)}
/* 이전과 지금 */
.s-cmp{margin-top:var(--space-2)}
.s-cmp-h{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-xs);font-weight:700;color:var(--text-secondary)}
.s-cmp-h input[type=range]{flex:1;accent-color:var(--accent)}
.s-cmpmap{height:340px;margin-top:var(--space-2);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-soft);background:var(--surface-sunken)}
.s-photo{margin-top:var(--space-3);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.s-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);width:100%}
.s-thumbs figure{margin:0}.s-thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--border-soft);display:block}
.s-thumbs figcaption{font-size:var(--fs-xs);color:var(--text-muted);margin-top:4px;text-align:center}
/* 그래프 */
.s-chart svg{width:100%;height:auto;display:block;font-family:var(--font-mono);font-size:11px;fill:var(--text-secondary)}
.s-chart .s-ax{fill:var(--text-primary);font-family:var(--font-sans)}
/* 현장확인 목록 · 관계도 · 안내 */
.s-rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-2)}
.s-rel>div{padding:var(--space-3);border:1px solid var(--border-soft);border-radius:var(--radius-md);background:var(--surface);min-width:0}
.s-rel>div b{display:block;margin-top:var(--space-2);font-size:var(--fs-md)}.s-rel>div span{display:block;margin-top:4px;font-size:var(--fs-xs);color:var(--text-muted);word-break:keep-all;line-height:1.5}
.s-rel-h{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:800;color:var(--text-secondary);flex-wrap:wrap}
/* 가운데 카드(ROOTA Intelligence)는 반전색 — .s-rel>div 보다 구체도가 높아야 배경이 실제로 먹는다(axe 실측: 흰 배경에 밝은 글자 1.13:1) */
.s-rel>div.s-rel-c{background:var(--surface-inverse);color:var(--text-inverse);border-color:var(--surface-inverse)}
.s-rel>div.s-rel-c b{color:var(--text-inverse)}.s-rel>div.s-rel-c span{color:color-mix(in srgb,var(--text-inverse) 82%,var(--surface-inverse))}
.s-limits{margin:var(--space-4) 0 var(--space-6);padding:var(--space-3) var(--space-4);border-left:3px solid var(--border-strong);background:var(--surface-sunken);border-radius:0 var(--radius-md) var(--radius-md) 0}
.s-farmhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-1)}
.s-caserow{cursor:pointer}
/* 모바일 390 — 지역 → 요약 → 지도 → 우선 필지 → 상세 → 비교 → 그래프 → 현장확인 */
@media(max-width:900px){
  .s-flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.s-flow li{padding:6px 6px}.s-flow li span{display:none}.s-flow li+li::before{display:none}
  .s-grid{grid-template-columns:1fr}.s-side{order:-1}.s-map{height:52vh;min-height:300px}
  .s-dgrid{grid-template-columns:1fr}.s-big{grid-template-columns:1fr 1fr 1fr;gap:6px}.s-big b{font-size:var(--fs-xl)}
  .s-rel{grid-template-columns:1fr 1fr}.s-kv-row{grid-template-columns:1fr 1fr}
  .s-thumbs{grid-template-columns:1fr 1fr 1fr}.s-cmpmap{height:260px}
  .s-modes{width:100%}.s-mode{flex:1}
  .s-sel,.s-bar-q input{min-width:0;flex:1}.s-bar-q{width:100%}
}
@media(prefers-reduced-motion:reduce){#satRoot *{transition:none!important;animation:none!important}}
/* 튜토리얼 — 화면 요소에 테두리, 오른쪽 아래 설명 카드 */
.s-hero-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.s-hero-row>div{min-width:0;flex:1}
#satTourBtn{flex:none;white-space:nowrap}
.s-tour-target{outline:3px solid var(--accent);outline-offset:4px;border-radius:var(--radius-sm)}
.s-tour{position:fixed;right:16px;bottom:16px;z-index:1200;width:min(420px,calc(100vw - 32px));padding:var(--space-4);background:var(--surface);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--radius-card);box-shadow:var(--shadow-lg)}
.s-tour-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.s-tour-x{font:inherit;border:0;background:transparent;color:var(--text-muted);cursor:pointer;font-size:var(--fs-md);padding:2px 6px}
.s-tour-t{display:block;margin-top:var(--space-2);font-size:var(--fs-md);font-weight:800}
.s-tour-d{margin:var(--space-2) 0 0;font-size:var(--fs-sm);line-height:1.6;color:var(--text-secondary);word-break:keep-all}
.s-tour-b{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-3)}
@media(max-width:900px){.s-tour{right:8px;left:8px;bottom:72px;width:auto}}
/* 지도 보기 모드(상태 / 변화량 / 수분 스트레스) · 관할 상황판 랭킹 */
.s-modesel{display:inline-flex;gap:2px;border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:2px;background:var(--surface);margin-right:var(--space-2)}
.s-modeopt{font-size:var(--fs-xs);font-weight:700;padding:4px 9px;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.s-modeopt input{position:absolute;opacity:0;width:0;height:0}
.s-modeopt.on{background:var(--text-primary);color:var(--surface)}
.s-modeopt:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.s-lg-d1{background:var(--danger)}.s-lg-d2{background:var(--warning)}.s-lg-d0{border:1px solid var(--text-faint)}.s-lg-u1{background:var(--positive)}
.s-lg-w1{background:var(--danger)}.s-lg-w2{background:var(--warning)}.s-lg-w0{background:var(--accent)}
/* 최근 알림 띠 — 매일 17:00 관찰 뒤 남은 '연속 하락' 사건 최대 3건. 상황판 바로 위 */
.s-alerts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-3);padding:var(--space-2) var(--space-4);border:1px solid var(--border-soft);border-left:4px solid var(--warning);border-radius:var(--radius-card);background:var(--surface);font-size:var(--fs-sm);color:var(--text-secondary)}
.s-alerts>span{display:inline-flex;align-items:center;gap:var(--space-2)}
/* 이미 가 본 곳을 한 번에 기록하는 단추 줄(현장확인 등록 아래) */
.s-quick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-soft)}
.s-quick .c-note{flex-basis:100%}
/* 판정 정확도(현장 결과 × 등록 당시 신호) — 현장확인 목록 위 */
.s-acc{margin:0 0 var(--space-3);padding:var(--space-2) var(--space-4);border:1px solid var(--border-soft);border-radius:var(--radius-card);background:var(--surface)}
.s-acc>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);cursor:pointer;padding:var(--space-1) 0}
.s-acc .c-tblwrap{margin-top:var(--space-2)}
.s-rank{margin:0 0 var(--space-3);border:1px solid var(--border-soft);border-radius:var(--radius-card);background:var(--surface);padding:var(--space-2) var(--space-4)}
.s-rank summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-3);list-style:none;padding:var(--space-1) 0}
.s-rank summary::-webkit-details-marker{display:none}
.s-rank summary::before{content:"▸";color:var(--text-muted)}.s-rank[open] summary::before{content:"▾"}
.s-rank summary b{font-size:var(--fs-sm)}
.s-rankwrap{margin-top:var(--space-2);max-height:320px;overflow:auto}
.s-ranktbl td,.s-ranktbl th{white-space:nowrap}.s-ranktbl td.n,.s-ranktbl th.n{text-align:right}
.s-ranktbl td.dn{color:var(--danger);font-weight:700}
.s-ranktbl tr.on td{background:var(--accent-soft)}.s-ranktbl tbody tr{cursor:pointer}
@media(max-width:900px){.s-modesel{margin-right:0;width:100%;justify-content:space-between}.s-modeopt{flex:1;justify-content:center}}