.lg-top { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; margin-top: 16px; padding: 18px; }
.lg-ctl .field { display: flex; flex-direction: column; gap: 4px; }
.lg-ctl label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.lg-date { display: flex; gap: 8px; align-items: center; }
.lg-date input { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); }
.lg-why { margin: 10px 0 14px; color: var(--text-2); }
.lg-bottom h2 { margin: 0 0 6px; font-size: 20px; }
.lg-bottom ul { margin: 0 0 12px; padding-left: 18px; }
.lg-bottom li { margin: 3px 0; }
.tr { color: var(--r1); } .ty { color: var(--r3); }
.lg-key { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); }
.lg-key span { display: inline-flex; align-items: center; gap: 6px; }
i.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.dot.g { background: var(--r5); fill: var(--r5); } .dot.y { background: #d69e2e; fill: #d69e2e; } .dot.r { background: var(--r1); fill: var(--r1); } .dot.n { background: #b8c2cf; fill: #b8c2cf; }
.lg-map { margin: 0; background: linear-gradient(90deg, #eef3e8 0%, #eef3e8 55%, #dcebf7 100%); border-radius: 10px; border: 1px solid var(--line); }
.lg-map svg { width: 100%; height: auto; display: block; }
.lg-water { fill: none; stroke: #9cc7e8; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.lg-sea { fill: #6f9cc0; font-size: 12px; font-style: italic; }
.lg-st { cursor: pointer; outline: none; }
.lg-st circle.dot { stroke: #fff; stroke-width: 2; }
.lg-st .halo { fill: rgba(15, 76, 129, .18); stroke: #0f4c81; stroke-width: 1.5; }
.lg-st text { font-size: 11.5px; font-weight: 600; fill: #15202e; paint-order: stroke; stroke: #f4f7f2; stroke-width: 3px; }
.lg-st text .v { font-family: var(--font-mono); font-weight: 500; fill: #4b5a6e; }
.lg-st.on text { fill: #0f4c81; }
.lg-st:focus-visible .dot { stroke: #0f4c81; stroke-width: 3; }
.lg-stations { margin-top: 18px; }
.lg-sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lg-sc { text-align: left; font: inherit; color: inherit; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.lg-sc.on { border-color: #0f4c81; box-shadow: 0 0 0 2px rgba(15, 76, 129, .25); }
.lg-sc-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.lg-sc-vals { display: flex; gap: 14px; font-size: 13px; color: var(--text-2); }
.lg-sc-vals b { font-family: var(--font-mono); color: var(--text); }
.lg-sc-vals .sal.r b { color: var(--r1); } .lg-sc-vals .sal.y b { color: var(--r3); }
.lg-detail { margin-top: 18px; padding: 18px; }
.lg-detail .section-head { margin-bottom: 12px; }
.lg-read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lg-r { border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 3px; border: 1px solid transparent; }
.lg-r.g { background: var(--r5-bg); border-color: #b9e6c9; } .lg-r.y { background: var(--r3-bg); border-color: #f2d9a6; } .lg-r.r { background: var(--r1-bg); border-color: #f5b9b3; } .lg-r.n { background: var(--surface-2); }
.lg-r label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.lg-r b { font: 700 24px var(--font-mono); }
.lg-r b small { font: 500 12px var(--font-body); color: var(--text-2); }
.lg-r span { font-weight: 600; }
.lg-r.g span { color: var(--r5); } .lg-r.y span { color: #8a5a12; } .lg-r.r span { color: var(--r1); }
.lg-r em { font-style: normal; font-size: 12px; color: var(--text-2); }
.lg-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 4px; color: var(--text-2); }
.lg-facts b { font-family: var(--font-mono); color: var(--text); }
.lg-h3 { margin: 16px 0 8px; font-size: 16px; }
.lg-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lg-ch { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 6px; }
.lg-ch-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.lg-ch-h .mono { font-family: var(--font-mono); }
.lg-svg { width: 100%; height: auto; display: block; margin: 6px 0 2px; overflow: visible; }
.lg-line { fill: none; stroke: #0f4c81; stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: .75; }
.lg-4 { fill: #0b2540; }
.lg-4[data-now] { fill: #fff; stroke: #0b2540; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.lg-band { fill: var(--r5-bg); }
.lg-lim { stroke-width: 1.2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.lg-lim.r { stroke: var(--r1); } .lg-lim.y { stroke: #d69e2e; }
.lg-ch-x { display: flex; justify-content: space-between; font-size: 11px; }
.lg-notes { margin-top: 18px; padding: 18px; }
.lg-notes ul { padding-left: 18px; }
.lg-notes li { margin: 4px 0; }
.lg-gauge { stroke: #fff; stroke-width: 1.2; }
.lg-gauge.g { fill: #2b6cb0; } .lg-gauge.y { fill: #d69e2e; } .lg-gauge.r { fill: var(--r1); } .lg-gauge.n { fill: #b8c2cf; }
i.tri { display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #2b6cb0; }
.lg-in { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; font-size: 14px; background: var(--surface-2); }
.lg-in.y { background: var(--r3-bg); } .lg-in.r { background: var(--r1-bg); }
.lg-inflow { margin-top: 18px; padding: 18px; }
.lg-in-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.lg-grp { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.lg-grp.on { border-color: #0f4c81; box-shadow: 0 0 0 2px rgba(15, 76, 129, .2); }
.lg-grp-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.lg-pill { font: 600 13px var(--font-mono); padding: 2px 8px; border-radius: 999px; background: var(--surface-2); }
.lg-pill.g { background: #e3eef8; color: #1d4f86; } .lg-pill.y { background: var(--r3-bg); color: #8a5a12; } .lg-pill.r { background: var(--r1-bg); color: var(--r1); }
.lg-tab { width: 100%; border-collapse: collapse; }
.lg-tab th { text-align: left; font-weight: 600; color: var(--muted); padding: 3px 6px 3px 0; white-space: nowrap; }
.lg-tab td { padding: 4px 6px 4px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.lg-tab td.num { font-family: var(--font-mono); white-space: nowrap; }
.lg-tab td.num small { color: var(--muted); }
.lg-tab td.num.y { color: #8a5a12; } .lg-tab td.num.r { color: var(--r1); font-weight: 600; }
.lg-mini { width: 120px; height: 26px; display: block; }
.lg-norm { stroke: #8fa6bf; stroke-dasharray: 4 3; stroke-width: 1; vector-effect: non-scaling-stroke; }
@media (max-width: 760px) {
  .lg-in-wrap { grid-template-columns: 1fr; }
  .hide-s { display: none; }
  .lg-top { grid-template-columns: 1fr; }
  .lg-map { max-width: 300px; margin: 0 auto; width: 100%; }
  .lg-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-read, .lg-charts { grid-template-columns: 1fr; }
  .top-meta { display: none; }
}