/* 연결 상태(connection.php, 2026-10-21). 글꼴·색·제목 줄은 레슨(style/lesson.css)·화면 일관성(docs/maintenance/ui-consistency.md) 값을 그대로 쓴다.
   게이지 색은 신호 막대와 같은 녹색·주황·빨강(oc-net-signal.js). 다크 모드는 아래 변수만 공용 --fs-app-* 로 바꾼다. */
.fs-net-page{margin:0;background:#fff}
.fs-net-page,.fs-net{font-family:'Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue","Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif}
.fs-net{--nt-fg:#111827;--nt-mut:#64748b;--nt-bd:#e5e7eb;--nt-card:#fff;--nt-soft:#f8fafc;--nt-good:#22c55e;--nt-warn:#d97706;--nt-bad:#dc2626;--nt-needle:#475569;--nt-px:24px;
  max-width:808px;margin:0 auto;padding:0 var(--nt-px) 48px;color:var(--nt-fg);font-size:16px;line-height:1.7;box-sizing:border-box;overflow-wrap:anywhere}
.fs-net *{box-sizing:border-box}
/* 제목 줄: 레슨·퍼즐과 같은 검은 띠(높이 25px, 앱 셸 안 33px, 흰 글자 17px), 본문 좌우 여백을 넘어 끝까지. ← 는 공용 _app_home_back.php. */
.fs-net-bar{display:flex;align-items:center;height:25px;margin:0 calc(-1 * var(--nt-px)) 16px;
  padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));background:#000;color:#fff;overflow:hidden}
html.fs-embed .fs-net-bar{height:33px}
main.fs-net .fs-net-bar h1{flex:1 1 auto;min-width:0;height:auto;margin:0;padding:0;background:none;font-size:17px;font-weight:400;line-height:1.3;letter-spacing:0;
  color:#fff;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 다국어 웹 틀(play.css)의 .contentsLeft h2(남색 바·고정 높이)가 이기지 않게 main.fs-net 으로 되돌린다(레슨과 같은 이유). */
main.fs-net h2{display:block;height:auto;margin:0 0 8px;padding:0;background:none;color:inherit;text-align:left;font-size:18px;font-weight:700;line-height:1.4;letter-spacing:-.01em}
/* 맨 위 요약(리체스 /lag 머리말의 답처럼): 지금 상태 한 줄. 지연 보정 절의 첫 문단(.fs-net__lead)도 요약이라 굵게 둔다. */
.fs-net__answer{margin:0 0 4px;font-size:20px;font-weight:700;line-height:1.4}
.fs-net__intro{margin:0 0 16px;color:var(--nt-mut);font-size:15px}
.fs-net__lead{font-weight:700}
.fs-net__gauges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.fs-net__gauges{grid-template-columns:1fr}}
.fs-net-gauge{padding:16px 16px 14px;border:1px solid var(--nt-bd);border-radius:12px;background:var(--nt-card)}
main.fs-net .fs-net-gauge h2{text-align:center}
.fs-net-gauge__svg{display:block;width:100%;max-width:260px;height:auto;margin:0 auto}
.fs-net-gauge__band{fill:none;stroke-width:22}
.fs-net-gauge__band.is-good{stroke:var(--nt-good)}
.fs-net-gauge__band.is-warn{stroke:var(--nt-warn)}
.fs-net-gauge__band.is-bad{stroke:var(--nt-bad)}
.fs-net-gauge__tick{fill:var(--nt-mut);font-size:10px;font-family:inherit}
/* 바늘은 왼쪽(0)을 가리키게 그리고 값만큼 돌린다(connection.js). 첫 값이 오기 전에는 흐리게. */
.fs-net-gauge__needle{fill:var(--nt-needle);transform-origin:100px 100px;transform:rotate(0deg);transition:transform .6s ease;opacity:.35}
.fs-net-gauge__needle.is-set{opacity:1}
@media (prefers-reduced-motion:reduce){.fs-net-gauge__needle{transition:none}}
.fs-net-gauge__value{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:4px 0 10px;font-size:16px;font-weight:700;line-height:1.4;font-variant-numeric:tabular-nums;text-align:center}
.fs-net-gauge__body{margin:0;color:var(--nt-mut);font-size:14px;line-height:1.6}
.fs-net__section{margin-top:24px}
.fs-net__section p{margin:0 0 10px}
.fs-net-legend{list-style:none;margin:0;padding:0;border:1px solid var(--nt-bd);border-radius:12px;background:var(--nt-card);overflow:hidden}
.fs-net-legend li{display:flex;align-items:baseline;gap:12px;padding:8px 14px;font-size:15px;line-height:1.4;font-variant-numeric:tabular-nums}
.fs-net-legend li+li{border-top:1px solid var(--nt-bd)}
.fs-net-legend li.is-current{background:var(--nt-soft);font-weight:700}
html.fs-app-theme-dark .fs-net{--nt-fg:var(--fs-app-text,#f1f5f9);--nt-mut:var(--fs-app-muted,#94a3b8);--nt-bd:var(--fs-app-border,#3a414c);
  --nt-card:var(--fs-app-surface,#151d2a);--nt-soft:var(--fs-app-surface-2,#1c2635);--nt-good:#4ade80;--nt-warn:#f59e0b;--nt-bad:#f87171;--nt-needle:#cbd5e1}
html.fs-app-theme-dark body.fs-net-page{background:var(--fs-app-bg,#0b1018)}