/* 바다와 공기 — sea-rhythm·ocean-currents 스타일 위에 얹는 이 노트 전용 */
.sa-panel{margin:clamp(20px,4vw,36px) 0 0;background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:clamp(16px,2.4vw,28px)}
.sa-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px;font-size:13px;color:var(--muted)}
.sa-chips{display:flex;flex-wrap:wrap;gap:6px}
.sa-chips button{font:inherit;font-size:13px;color:var(--ink-soft);background:transparent;border:1px solid var(--line);border-radius:999px;padding:4px 12px;cursor:pointer}
.sa-chips button[aria-checked="true"]{border-color:var(--accent);color:var(--accent)}
.sa-chips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sa-fig{margin:0}.sa-svg{display:block;width:100%;height:auto}
.sa-fig figcaption{margin-top:10px;font-size:13.5px;line-height:1.7;color:var(--ink-soft);max-width:760px}
.sa-fig figcaption b{color:var(--ink);font-weight:500}
/* 라벨 크기 = max(원래 크기, --k × --lab-min) — --k는 /lab/ocean-currents/fit-labels.js가 svg에 적는다 */
.ax text,.tick{fill:var(--muted);font-size:max(12px,calc(var(--k,0) * var(--lab-min,11px)));font-family:var(--font-sans)}
.ax .yl{fill:var(--muted);font-size:max(12px,calc(var(--k,0) * var(--lab-min,11px)))}
.ax .grid{stroke:var(--line);stroke-width:1}.ax .zero{stroke:#3b5a5f;stroke-width:1.2}
.fill{opacity:.18}
.l-sea{fill:none;stroke:#f4a47a;stroke-width:2.6}.l-air{fill:none;stroke:#e7f0ee;stroke-width:2;stroke-dasharray:5 4}
.d-sea{fill:#f4a47a}.d-air{fill:#e7f0ee}
.lab-sea{fill:#f4a47a;font-size:max(13px,calc(var(--k,0) * var(--lab-min,11px)))}.lab-air{fill:#e7f0ee;font-size:max(13px,calc(var(--k,0) * var(--lab-min,11px)))}
.r-line{fill:none;stroke-width:2.2}.r-lbl{font-size:max(12.5px,calc(var(--k,0) * var(--lab-min,11px)));font-family:var(--font-sans)}
.note{fill:var(--muted);font-size:max(12px,calc(var(--k,0) * var(--lab-min,11px)))}
.sa-sym{margin:clamp(28px,4vw,40px) 0 0}.sa-sym svg{display:block;width:100%;height:auto}
/* 겨울·여름 두 칸을 각자의 svg로 — 넓은 화면은 나란히(예전 900 폭 한 장과 같은 모양), 좁은 화면은 위아래로 */
.sa-sym-pair{display:grid;grid-template-columns:1fr 1fr;column-gap:2.2%;row-gap:12px}
.sa-sym figcaption{margin-top:10px;font-size:13.5px;color:var(--ink-soft);line-height:1.7}
.sym-bg{fill:var(--bg-2)}.sea-w{fill:rgba(244,164,122,.28)}.sea-c{fill:rgba(111,181,214,.28)}
.sym-t{fill:var(--ink);font-size:max(16px,calc(var(--k,0) * var(--lab-min,11px)));font-family:var(--font-sans)}.sym-s{fill:var(--ink-soft);font-size:max(13px,calc(var(--k,0) * var(--lab-min,11px)));font-family:var(--font-sans)}
.sym-wind-c{stroke:#6fb5d6;stroke-width:2;fill:none}.sym-wind-w{stroke:#f4a47a;stroke-width:2;fill:none}
.sym-up{stroke:#f4a47a;stroke-width:1.6;fill:none;stroke-dasharray:3 4}
.sym-cloud{fill:rgba(231,240,238,.5)}.sym-fog{fill:rgba(231,240,238,.35)}
/* 안개 띠 위 글자: ink-soft는 3.79:1 → ink(5.06:1) */
.sym-s.on-fog{fill:var(--ink)}
.land-bg{fill:#0e2429}.map-lbl{fill:var(--muted);font-size:max(15px,calc(var(--k,0) * var(--lab-min,11px)));letter-spacing:.2em}
/* 지도 라벨이 주황·파랑 수온 칸 위에 얹혀 대비가 1.3:1까지 떨어졌다 — 바탕색 테두리(halo)를 둘러 칸 색과 상관없이 읽히게 */
.map-lbl,.city-lbl{paint-order:stroke;stroke:#0a1e23;stroke-width:4px;stroke-linejoin:round}
.city{fill:#e7f0ee}.city-lbl{fill:#e7f0ee;font-size:max(13px,calc(var(--k,0) * var(--lab-min,11px)))}
.sa-can ul,.sa-cant ul{list-style:disc;margin:10px 0 0;padding-left:18px;font-size:14.5px;line-height:1.75;color:var(--ink-soft)}
.sa-can h3{color:var(--ink)}.sa-cant h3{color:var(--ink)}
.sa-can{border-top:2px solid var(--accent)!important}
/* 폰: 예전엔 글자만 20 단위로 키워(화면 7.9px) 겹쳤다. 이제 760 폭 그래프에 최소 폭을 줘
   라벨이 14 단위 안팎(화면 10px 이상)에서 겹치지 않게 하고, 그래프 상자 안에서 가로로 밀어 본다.
   (안내 문구 ‘← 옆으로 밀어 보기 →’는 ocean-currents/styles.css, 넘칠 때만) */
@media (max-width:700px){
  .sa-fig{overflow-x:auto;overscroll-behavior-x:contain}
  .sa-fig figcaption{position:sticky;left:0}
  .sa-fig .sa-svg:not(#caseMap){min-width:550px}
  .sa-sym-pair{grid-template-columns:1fr}
}
@media (min-width:600px) and (max-width:700px){.sa-fig .sa-svg:not(#caseMap){min-width:600px}}
#caseMap{max-width:520px;margin:0 auto}