/*  ★ 날짜 단추가 **두 줄로 접히던 것**을 고친다 (2026-08-13 지정: "「내일의
    물때」 옆 날짜 표시 및 선택 ▼ 아이콘은 2/3 사이즈로 하고 전체적으로 글자간
    간격을 줄여 줘. 삼성 갤럭시에서는 2줄로 보이고 있어").
    ▣ 왜 접혔나 — 앞서 지시대로 ▼ 를 세 배(3em)로 키웠는데, **이 단추만은**
      글자와 한 줄에 나란히 서는 자리라 그 폭이 그대로 줄을 밀어냈다.
      360px 에서 단추 높이가 40 → 56px(세 줄분)이 됐다(실측).
      ★ 같은 표시라도 **혼자 서는 자리**(접는 칸)와 **글자 옆에 서는 자리**는
        다르다. 키우는 지시는 앞의 것이고, 여기는 뒤의 것이다.
    ▣ 그래서 셋을 함께 줄인다 — ▼ 는 2/3(3em→2em) · 자간 -0.3px · 사이 여백 6→4px.
      자간은 이 단추가 **고정폭 글꼴**(--mono)이라 특히 헐거웠다.
    ▣ ★ 누르는 자리(min-height:40px)는 그대로다 — 글자만 좁혔지 손가락 자리를
      좁힌 것이 아니다. */
.datebtn{display:flex;align-items:center;gap:2px;padding:7px 6px;border:1px solid var(--line);
  border-radius:9px;background:var(--hull-2);font-family:var(--mono);font-size:12px;
  letter-spacing:-.6px;white-space:nowrap;flex:0 0 auto;
  color:var(--ink);cursor:pointer;min-height:40px}
/*  ★ 화살표 옆의 빈틈까지 없앤다 — 3em 짜리 글리프는 좌우에 제 여백을 달고
    온다(글자 상자가 크다). 음수 여백으로 그만큼 당긴다. */
.datebtn .tri{font-size:1.8em;margin:0 -2px 0 0}
.bar{height:9px;border-radius:99px;background:var(--hull-2);overflow:hidden;margin:8px 0 4px}
.bar i{display:block;height:100%;background:var(--tide-bar);border-radius:99px}
.exs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-top:9px}
.exs .c{background:var(--hull);padding:7px 5px;text-align:center}
.exs .c .l{display:block;font-size:10px;color:var(--dim)}
.exs .c .v{display:block;font-family:var(--mono);font-size:12.5px;font-weight:700}
.exs .c.hi .l{color:var(--sonar-ink)}
.tsea{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:9px;
  background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.tsea .c{background:var(--hull);padding:7px 8px;min-width:0}
.tsea .c .l{display:block;font-size:10px;color:var(--dim)}
.tsea .c .v{display:block;font-family:var(--mono);font-size:12.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/*  ══ 조석 곡선 (2026-08-12 지정 — 데스크톱 「내일의 물때」에서 옮겨 옴) ═══════
    ▣ 왜 폰에도 필요한가 — 만·간조 **시각 넉 줄**만으로는 "지금 물이 드는 중인가"
      를 알 수 없다. 곡선 위의 '지금' 선 하나가 그 답이다.
    ▣ ★ 조위는 **cm 실축**으로 그린다. 2주 그래프처럼 0~1 로 눕히면 조차 30cm
      날과 700cm 날이 같은 높이가 되어, 조차를 보려는 그림에서 조차가 사라진다.
    ▣ ★ viewBox 를 폰 폭에 맞춰 새로 잡았다(320×126). 데스크톱 것(720)을 그대로
      가져오면 360px 화면에서 0.43배로 눌려 12px 글자가 5px 가 된다 — 못 읽는다.
    ▣ ★ preserveAspectRatio 를 건드리지 않는다(기본 유지). 2주 그래프의
      `none` 을 베껴 붙이면 점과 글자가 가로로 뭉개진다. */
.tdc{margin-top:10px}
.tdc svg{display:block;width:100%;height:auto;color:var(--water)}
.tdc .grid{stroke:var(--line);stroke-width:1}
.tdc .area{fill:var(--water);opacity:.13}
.tdc .curve{fill:none;stroke:currentColor;stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tdc .pk{fill:var(--lamp)}
.tdc .lb{font-family:var(--mono);font-size:9px;fill:var(--dim)}
.tdc .lb.hi{fill:var(--lamp);font-weight:700}
.tdc .nowline{stroke:var(--sonar-hot);stroke-width:.7;stroke-dasharray:2.5 2.5}
.tdc .nowdot{fill:var(--sonar-hot)}
.tdc .nowlb{font-family:var(--mono);font-size:9px;fill:var(--sonar-hot);font-weight:700}
/*  ★ 조석 곡선의 **자** (2026-08-14 지정: "X축은 시간, Y축은 11m 고정 조차"). */
.tdc .ax{stroke:var(--line);stroke-width:.8}
.tdc .ax.bold{stroke-width:1.2}
.tdc .axlb{font-family:var(--mono);font-size:8px;fill:var(--dim)}
.tdc .axlb.unit{font-size:7px;opacity:.8}
.tdc .cap{margin:4px 2px 0;font-size:10px;color:var(--dim)}
.tdc .cap b{color:var(--ink)}
/*  여러 날 조차 문장 — 한 줄에 나란히, 좁으면 접힌다 (2026-09-28, /tides) */
.tdc .caps{display:flex;flex-wrap:wrap;gap:0 24px}
.tdc .caps .cap{flex:1 1 300px;min-width:0}
/*  여러 날 곡선의 날짜 머리·자정 경계 (데스크톱 /tides — _tide_js.php tideCurve 머리말) */
.tdc .daylb{font-family:var(--mono);font-size:9px;font-weight:700;fill:var(--ink-soft)}
.tdc .daysep{stroke:var(--dim);stroke-width:1;stroke-dasharray:1 3}
/*  ══ 유속·풍속 — **구간 띠** (2026-08-12 지정) ════════════════════════════
    ▣ ★ 선으로 긋지 않는다. 이 자료의 알갱이는 **오전·오후·일** 셋뿐이다
      (예보표가 그렇게 온다). 하루를 가로지르는 선을 그으면 없는 시간별 값을
      지어내는 것이 된다. 있는 만큼만 — 구간마다 min~max 띠 하나다.
    ▣ ★ 값이 없는 구간은 **띠를 안 그린다.** 0 으로 그리면 '물이 안 선다'·
      '바람이 없다' 로 읽힌다 — 자료가 없는 것과 다른 말이다. */
.tspd{margin-top:10px}
.tspd h3{margin:0 0 5px;font-size:11px;font-weight:700;color:var(--dim);
  display:flex;align-items:baseline;gap:6px}
.tspd h3 .u{font-family:var(--mono);font-weight:400}
.tspd .r{display:grid;grid-template-columns:34px 1fr auto;align-items:center;
  gap:7px;margin-bottom:5px}
.tspd .r .n{font-size:11px;color:var(--dim)}
.tspd .r .t{position:relative;height:10px;border-radius:99px;background:var(--hull-2)}
.tspd .r .f{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--tide-bar)}
.tspd.wind .r .f{background:var(--sonar)}
.tspd .r .v{font-family:var(--mono);font-size:11.5px;font-weight:700;white-space:nowrap}
/*  풍랑주의보 기준선(14 m/s) — 넘으면 낚시배가 못 나간다. 자로 재는 자리다. */
.tspd .r .lim{position:absolute;top:-3px;bottom:-3px;width:0;
  border-left:1.5px dashed var(--sonar-hot)}
.tspd .note{margin:2px 2px 0;font-size:10.5px;color:var(--dim)}

/*  ★ 물때 탭의 출항 제한 — 예측 칸의 같은 알림(.fclim)과 같은 결. */
.tidelimit{margin:9px 0 0;padding:9px 10px;border-radius:9px;font-size:11.5px;
  line-height:1.6;color:var(--ink);
  background:color-mix(in srgb, var(--sonar) 12%, var(--hull));
  border:1px solid color-mix(in srgb, var(--sonar) 38%, var(--line))}
.tidelimit.alert{background:color-mix(in srgb, var(--sonar-hot) 12%, var(--hull));
  border-color:color-mix(in srgb, var(--sonar-hot) 40%, var(--line))}
.tidelimit .sub{display:block;margin-top:3px;font-size:10.5px;color:var(--ink-soft)}
/*  폰 옷의 머리 줄 — 이 카드 안에서만(위 머리말). 값은 mobile/app.php 의 것과 같다. */
#tideNow .row{display:flex;align-items:center;gap:8px}
#tideNow .row > div{min-width:0}
#tideNow .sp{flex:1}
#tideNow .k{font-size:10.5px;letter-spacing:.16em;color:var(--sonar-ink);font-family:var(--mono)}
#tideNow .warn{color:var(--sonar-hot)}
#tideNow .more{display:block;width:100%;margin-top:9px;padding:11px;border:1px dashed var(--line);
  border-radius:9px;background:transparent;text-align:center;font:inherit;font-size:12px;
  color:var(--dim);cursor:pointer;min-height:44px}
#tideNow .datebtn{cursor:pointer;color:var(--ink)}
/*  「항구 바꾸기」 — 항구명 줄 오른쪽의 작은 단추 (2026-09-26 지시). 좁으면 줄이 접힌다. */
#tideNow .row{flex-wrap:wrap}
#tideNow .portchg{flex:0 0 auto;padding:5px 10px;min-height:32px;border:1px solid var(--line);
  border-radius:8px;background:var(--hull);color:var(--water);font:inherit;font-size:12px;
  font-weight:600;cursor:pointer;white-space:nowrap}
#tideNow .portchg:hover{border-color:var(--water)}
#tideNow .portchg[aria-expanded="true"]{background:var(--well)}
/*  ★ 곡선은 **카드 폭에 맞춘다** (2026-09-26 지시: "조차 그래프를 화면에 맞추어").
    좌표계 폭을 카드 폭에서 셈해 넘기므로(아래 curveSize) 글자는 커지지 않고 가로만 넓어진다. */
#tideNow button:focus-visible,#tideNow a:focus-visible,#tideNow input:focus-visible{
  outline:2px solid var(--water);outline-offset:2px}
#tideNow .why{margin:6px 0 0;font-size:11.5px}
/*  ★ 오늘·내일 **두 칸** (2026-09-28 지시: "naksigo.com/tides 에서는 모든 항목을 2일치를 표시해야 해.
    m.naksigo.com/tides 에서는 1일치만"). 이 카드(데스크톱 /tides)에만 있는 옷이다 — 폰은 공용
    _tide_js/_tide_css 를 그대로 쓰므로 영향이 없다. 좁으면(720px 아래) 한 단으로 접혀 오늘 → 내일. */
#tideNow .t2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
#tideNow .t2 > div{min-width:0}
#tideNow .t2 .dl{margin:12px 0 0;font-size:12px;font-weight:700;color:var(--ink-soft);
  font-family:var(--mono);border-bottom:1px solid var(--line);padding-bottom:4px}
#tideNow .t2 .dl b{color:var(--water);margin-left:6px;font-family:var(--ui,inherit)}
@media (max-width:720px){ #tideNow .t2{grid-template-columns:1fr} }
#tideNow .datein{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
/*  글자판(자바스크립트 없을 때) */
.tfall .tnow{display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap}
.tfall .tnow b{font-size:19px;color:var(--lamp)}
.tfall .tbar{height:6px;border-radius:3px;background:var(--line);margin:8px 0 4px;overflow:hidden}
.tfall .tbar i{display:block;height:100%;background:var(--tide-bar)}
.tfall .texs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.tfall .texs li{flex:1 1 120px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;
  font-family:var(--mono);font-size:12px;white-space:nowrap}
.tfall .texs .ty{color:var(--dim);margin-right:6px}
.tfall .texs .hi .ty{color:var(--water);font-weight:700}
.tfall .tsea2{margin:10px 0 0;font-size:12.5px;color:var(--ink-soft)}
.tpick{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;position:relative}
/*  항구 찾기 — 치는 동안 뜨는 목록(좌우 like, 2026-09-26 지시). 입력칸 바로 아래 한 판. */
.tsug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:min(320px,55vh);
  overflow:auto;background:var(--hull);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 24px rgba(var(--sh),.18);padding:4px}
.tsug button{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;width:100%;text-align:left;
  padding:9px 10px;min-height:40px;border:0;border-radius:7px;background:transparent;color:var(--ink);
  font:inherit;cursor:pointer}
.tsug button[aria-selected="true"],.tsug button:hover{background:var(--well)}
.tsug button:focus-visible{outline:2px solid var(--water);outline-offset:-2px}
.tsug mark{background:none;color:var(--water);font-weight:700}
.tsug .none{margin:8px 10px;font-size:12.5px}
.tchoose{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.tchoose a{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;padding:9px 10px;min-height:40px;
  border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink)}
.tchoose a:hover{border-color:var(--water)}
.tchoose a:focus-visible{outline:2px solid var(--water);outline-offset:2px}
.tpick input{flex:1 1 160px;min-width:0;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--well);color:var(--ink);font:inherit}
.tpick button{padding:7px 14px;border:1px solid var(--line);border-radius:8px;
  background:var(--hull);color:var(--ink);font:inherit;cursor:pointer}