/*  ── 색·글꼴 토큰은 공용 조각으로 (2026-08-19) — 폰(mobile/app.php)과 한 벌.
    지도가 '동일한 모양'이려면 색부터 같아야 한다. */
/*  전국 조황 해도 — 화면 색·글꼴 토큰 한 벌 (chart.php · mobile/app.php 공용).
    ★ <style> 안쪽에 include 하는 CSS 조각이다.
    ★ 2026-08-19 재건 때 chart.php 의 :root 를 글자 그대로 옮겼다 — 지도가
      "동일한 모양"이려면 색부터 한 벌이어야 한다. 값을 고치면 두 화면이
      같이 바뀐다. 폰 전용 덧값은 mobile/app.php 의 제 <style> 에 둔다. */
:root{
  /*  ★ 화면 **좌우 폭을 한 곳에서** 정한다 (2026-08-14 지정: "전체 좌우 사이즈를
      더 줄여줘"). 1680 → 1320px.
      ▣ 왜 줄이나 — 27인치에서 본문이 1,404px 까지 벌어져 지도와 오른쪽 글이
        멀찍이 떨어졌다. 눈이 좌우로 크게 오가고, 글줄도 한 줄이 너무 길다.
      ▣ 머리띠·차림표·본문·바닥글이 **같은 값**을 써야 세로선이 맞는다 —
        네 곳에 1680 을 베껴 두었더니 한쪽만 고쳐질 판이었다. */
  /*  ★ 2026-08-14 — 1680 → 1320 → 1120 → **1240px**.
      "대폭 줄여" 로 1120 까지 갔다가 "지도 좀 더 크게" 로 한 단 되돌렸다.
      오른쪽 칸(460)은 고정이라, 이 값이 곧 **지도 폭**을 정한다:
        1120 → 지도 584px · 1240 → 지도 704px (한 눈에 20% 크다)
      더 키우려면 이 한 줄만 올리면 된다(머리띠·차림표·바닥글이 함께 따라온다). */
  --wrap:1240px;

  /* ── 해도 색 ── */
  --deep:#FFFFFF;         /* 깊은 물 — 가장 밝다 */
  --shallow:#DCEDF3;      /* 얕은 물 */
  --land:#E6DCC2;         /* 뭍 — 담황(buff) */
  --land-edge:#B9A87F;
  --page1:#EFF4F5; --page2:#E4EDEF; --page3:#D9E6E9;
  --card:#FFFFFF; --card-2:#F2F6F7;

  --ink:#152F38; --ink-soft:#3E5C66; --dim:#5E7C86;
  --magenta:#A93A80; --magenta-soft:#EBD3E3;
  --water:#20758B; --hot:#C4451F; --hot-soft:#F7E2DA;
  --good:#2C7A57; --warn:#B3402A;
  --line:#C6D6DA; --line-soft:#E0EAEC;
  --sh:21,47,56;
  /*  ★ 음각·양각의 아래 빛줄. 이 화면은 제 토큰을 통째로 들고 있어서
      _tokens.php 의 값이 여기까지 오지 않는다 — 빠뜨리면 그것을 쓰는
      text-shadow 가 **통째로 죽는다**(var() 하나가 못 풀리면 선언 전체가
      무효다). 실제로 하트·별의 입체가 이 한 줄이 없어 사라졌다. */
  --eng-light:#FFFFFF;

  --mono:"D2Coding",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --ui:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Segoe UI",-apple-system,sans-serif;
  --pad:15px; --gap:13px; --r:8px; --r-sm:5px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,var(--page1) 0%,var(--page2) 55%,var(--page3) 100%);
  background-attachment:fixed;
  color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--water)}
::selection{background:var(--magenta);color:#fff}
/*  ★ 눈에 안 보이는 글줄(h1 — 2026-10-04). 화면 읽기 프로그램과 로봇은 읽는다. display:none 은 쓰지 않는다(둘 다 못 읽는다). */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}

/* ── 머리띠 ─────────────────────────────────────────────────────────── */
header.strip{position:sticky;top:0;z-index:30;background:var(--card);
  box-shadow:0 4px 14px -12px rgba(var(--sh),.6)}
.sl{max-width:var(--wrap);margin:0 auto;padding:10px 18px;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.sl .brand{font-family:var(--ui);font-size:16.5px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none}
.sl .brand b{color:var(--water)}
/*  ★ 이름 뒤의 설명 — 이름보다 한 단 작고 옅다. 기울이지 않는다(i 는 자리
    이름일 뿐이다) — 한글 이탤릭은 글꼴이 없어 억지로 눕힌 그림이 된다.
    ★ 좁은 화면에서는 뺀다. 머리띠가 두 줄이 되면 지도가 그만큼 밀린다. */
.sl .brand i{font-style:normal;font-weight:600;font-size:12.5px;color:var(--dim);
  margin-left:7px;letter-spacing:0}
@media (max-width:760px){ .sl .brand i{display:none} }
.sl .sp{flex:1}
/*  차림표 — 좁아지면 이 줄만 가로로 민다. 줄바꿈으로 두 줄이 되면 머리띠가
    두꺼워져 지도가 그만큼 밀려 내려간다. 이 화면의 본체는 지도다. */
.nav{max-width:var(--wrap);margin:0 auto;padding:0 18px;display:flex;gap:2px;
  overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.nav::-webkit-scrollbar{display:none}
/*  ★ 회원 전용 칸(관심선박)은 로그인 전에 한 단 물러난다 — 감추지 않는다. */
.nav a.dim{opacity:.55}
.nav a.dim::after{content:'·';margin-left:2px;opacity:.8}
.nav a{flex:0 0 auto;display:flex;align-items:baseline;gap:7px;white-space:nowrap;
  padding:9px 13px 8px;font-size:13.5px;font-weight:700;color:var(--dim);
  text-decoration:none;border-bottom:2px solid transparent;min-height:38px;
  background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;
  font-family:var(--ui)}
.nav a s{all:unset;font-family:var(--mono);font-size:10.5px;font-weight:400;opacity:.85}
.nav a:hover{color:var(--ink);background:var(--card-2)}
/*  지금 보고 있는 칸 — 색과 밑선 **둘 다**. 밑선만으로는 좁은 화면에서 안
    보이고, 색만으로는 색을 못 보는 사람이 어디인지 모른다. */
.nav a.on{color:var(--magenta);border-bottom-color:var(--magenta)}

/* ── 판 ─────────────────────────────────────────────────────────────── */
/*  ══ 본문은 **두 섹션**이다 (2026-08-14 개편) ═══════════════════════════
    지시: "본문은 좌측 지도와 우측 설명(내용) 2 섹션."
    ▣ 좌측섹션 = 지도 한 장. 오른쪽 = 읽는 것 전부(해역·물때·어종·조황 상위).
    ▣ ★ 오른쪽을 340 → 460px 로 넓혔다. 지도 옆 좁은 칸에 끼어 있던 박스들이
      이리로 왔는데 340px 에서는 어종 칩이 한 줄에 하나씩 서고 조황 상위의
      항구 이름이 두 글자에서 잘렸다(옮기기 전 그 칸의 폭이 그랬다).
    ▣ ★ 지도가 **붙박이**(sticky)다 — 오른쪽 글이 길어 굴리게 되는데, 지도는
      이 화면의 본체라 굴러 나가면 안 된다. 앞서는 반대로 오른쪽이 붙박이였다:
      그때는 오른쪽이 상세 하나뿐이라 짧았고 지도가 길었다. 길이가 뒤집혔으니
      붙박이도 뒤집는다. */
/*  ★ 본문 아래 여백을 **대폭 줄였다** (2026-08-14 지정: "footer 의 상위 여백이
    너무 커"). 80 → 14px. 바닥글 위가 116px(본문 80 + 바닥글 마진 22 + 안여백
    14)이나 비어 있었다 — 지도 한 판이 더 들어갈 자리다. */
main{max-width:var(--wrap);margin:0 auto;padding:16px 18px 14px;
  display:grid;gap:var(--gap) 18px;align-items:start;
  /*  ★ 오른쪽 칸은 **460px 그대로 둔다** (2026-08-14 지정: "중간 내용
      컨텐츠에서는 좌측만 줄여 · 우측은 줄이지 말고 유지해").
      ▣ 잠깐 380px 로 같이 줄였다가 되돌렸다 — 오른쪽은 글을 읽는 칸이라
        좁히면 「오늘의 조황」·조황 상위의 줄이 접힌다. 줄어드는 몫은
        **왼쪽(지도)이 다 받는다.** */
  grid-template-columns:minmax(0,1fr) 460px}
/*  ★ 좌측섹션은 **화면 높이를 다 쓴다** (2026-08-14 지정: "좌측 섹션의 높이는
    화면 최대로"). 지도가 이 화면의 본체다 — 세로로 남는 자리를 지도에 준다.
    116px = 머리띠(96) + 본문 위 여백(16) + 잔여 4. 붙박이 top 과 짝을 맞춘다.
    ★ dvh 를 쓴다 — 폰의 주소창이 접혔다 펴질 때 vh 는 안 따라온다. */
/*  ★ 붙박이는 **지도 상자**가 진다 (2026-08-14 — 아래에 목록이 붙으면서).
    앞서는 좌측섹션 통째로 붙박이였는데, 그 아래에 「오늘의 조황」을 놓으니
    목록까지 함께 얼어붙어 굴릴 수가 없었다. 지도만 화면에 붙들고 목록은
    그 아래로 흐르게 한다 — 지도를 보며 오늘 글을 훑는 것이 이 화면의 몸짓이다. */
main > div{min-width:0}
/*  ★ 붙박이를 **걷었다** (2026-08-14 실측). 지도 아래에 「오늘의 조황」이
    붙으면서, 목록이 붙박인 지도 **위로 미끄러져** 겹쳤다 — 목록이 끝난
    자리 아래로 지도의 아랫단(경도 눈금·마라도)이 삐져나왔다.
    ▣ 붙박이는 옆 칸이 길고 이 칸이 짧을 때 쓰는 것이다. 이제 이 칸에도
      읽을 것이 있으니 여느 화면처럼 굴러가면 된다.
    ▣ 높이는 그대로 화면 최대(지정) — 지도는 첫 화면을 가득 채운다. */
/*  ★ 폭이 좁아지면 지도도 좁아진다 — 높이를 못박아 두면 위아래에 빈 띠가
    남는다(폭 686px 짜리 칸에 764px 높이를 주면 120px 이 빈다).
    그래서 상자 높이는 **지도 비율이 정하고**, 화면 높이는 **상한**으로만 둔다.
    지시("높이는 화면 최대")는 그대로다 — 넓은 화면에서는 여전히 화면을 채운다. */
main > div > .chartbox{display:flex;flex-direction:column}
main > div > .chartbox > .chartgrid{flex:1 1 auto;min-height:0}
/*  ★ 오늘의 조황은 지도 **아래**, 좌측섹션의 남는 자리다 (2026-08-14 지정).
    ▣ 앞서는 오른쪽 칸(460px)에 있었다. 목록에 사진·배·항구·어종이 한 줄로
      들어가는데 460px 에서는 어종이 둘째 줄로 접혔다.
      왼쪽은 926px 이라 한 줄에 들어가고, 지도 아래 비어 있던 자리도 찬다.
    ▣ ★ 넓으니 **두 칸**으로 세운다 — 한 칸으로 두면 열두 줄이 세로로 길게
      늘어져 오른쪽 카드들과 높이가 또 어긋난다. */
/*  ★ 위 여백을 걷었다 (2026-08-14) — 이 카드는 왼쪽 칸(지도 아래)에 있을 때
    제 여백이 필요했지만, 오른쪽 칸으로 온 지금은 칸 자체가 gap 으로 사이를
    벌린다. 둘이 겹쳐 이 카드 위만 26px, 나머지는 13px 이었다. */
/*  ★ 쪽 넘김 — 한 번에 6개(해도 소개를 닫으면 10개)만 보이므로 아래에 쪽수를
    둔다. 단추는 손가락 자리(28px)를 지키되 글자는 작게. */
.pager{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:9px}
.pager button{min-width:28px;height:28px;padding:0 7px;border:1px solid var(--line);
  background:var(--card);border-radius:8px;cursor:pointer;
  font-family:var(--mono);font-size:11px;color:var(--dim)}
.pager button:hover:not(:disabled){border-color:var(--water);color:var(--ink)}
.pager button[aria-current="page"]{background:var(--water);border-color:var(--water);
  color:#fff;font-weight:700}
.pager button:disabled{opacity:.35;cursor:default}
/*  ★ **한 칸이 기본**이다 (2026-08-14 — 왼쪽을 606px 로 줄이면서 뒤집었다).
    두 칸으로 두면 한 칸이 300px 밖에 안 되어 제목이 두 줄로 접힌다(실측:
    「14입항,준내만 왕갈치 조황.일요일,월 / 요일 내만갈치 출항」).
    ★ 두 칸은 **본문이 한 단으로 접히는 구간**에서만 쓴다 — 그때는 왼쪽이
      화면 폭을 다 써서(964px) 한 칸에 480px 이 돌아간다. */
#todaycard .replist{display:grid;grid-template-columns:1fr;gap:1px}
@media (min-width:641px) and (max-width:1100px){
  #todaycard .replist{grid-template-columns:1fr 1fr}
}
/*  ★ 오른쪽 안에서 카드 둘씩 — 해역 카드(서해·남해·동해·제주)는 작아서
    한 줄에 하나씩 두면 네 줄을 먹는다. 물때·어종·조황 상위·보는 법은
    한 줄을 통째로 쓴다(.railgrid > .wide). */
.railgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--gap)}
.railgrid > .zone{min-width:0}
.railgrid > .fishbox,
.railgrid > .rankbox,
/*  ★ 오른쪽 칸은 **화면 안에 다 들어온다** (2026-08-08 지정).
    전에는 항구를 누르면 상세가 793px 로 자라 상위 항구 목록을 화면 밖으로
    밀어냈다(실측). 지도를 보며 "다음은 어디" 를 고르는 화면인데 그 목록이
    사라지면 다시 스크롤해 찾아야 한다 — 지도 옆에 둔 뜻이 없어진다.
    ▣ 칸 전체 높이를 화면에 묶고, 안에서 둘이 자리를 나눈다:
        상세  — 제 내용만큼(길면 제 안에서 스크롤)
        목록  — 남는 자리를 다 갖는다(최소 200px 는 보장)
    ▣ 스크롤이 둘로 갈리지 않게 상세 안쪽의 안내글 높이 제한은 걷어냈다 —
      한 칸에 스크롤 막대가 둘이면 어느 것을 굴려야 할지 모른다. */
/*  ★ 오른쪽 칸은 이제 **누른 것의 상세**만 맡는다(순위는 지도 옆으로 옮겼다).
    항구 상세는 주차장·낚시배·선사까지 이어져 길어서, 이 칸을 통째로 쓰고
    제 안에서 스크롤하는 편이 맞다. */
/*  ★ 오른쪽 칸을 **화면 높이에서 풀었다** (2026-08-14). 이제 이 칸이 본문의
    절반을 맡아 카드가 여덟이다 — 100dvh 에 묶어 두면 그 안에서 또 굴려야 하고,
    화면에 스크롤 막대가 둘이 된다. 붙박이는 왼쪽 지도로 옮겼다.
    ★ 상세(#detail)만 제 높이를 지킨다 — 항구 상세는 주차장·낚시배·선사까지
      이어져 길다. 그 하나 때문에 아래 카드들이 저 밑으로 밀리면 안 된다. */
.rail{display:flex;flex-direction:column;gap:var(--gap)}
.rail #detail{max-height:calc(100dvh - 137px);overflow:auto;
  overscroll-behavior:contain;min-height:0}
/*  ★ 「물때정보」 는 **굴리지 않는다** (2026-08-14 지정: "물때정보는 스크롤 바를
    만들지 않는다. 박스의 크기는 내용에 맞춘다").
    ▣ 왜 이 칸만 다른가 — 물때 카드는 위에서 아래로 **한 번에 읽는 그림**이다
      (몇물 → 세기 → 곡선 → 바다 예보 → 유속·풍속). 가운데를 잘라 놓고 그 안을
      또 굴리게 하면, 곡선을 보다가 예보를 보려고 두 번 굴려야 한다.
    ▣ :has() 를 쓰되 **클래스도 함께** 건다 — :has() 를 모르는 브라우저에서도
      칸이 잘리지 않게(openMTide 가 걸고, 다른 내용이 들어오면 뗀다). */
.rail #detail:has(.mtide),
.rail #detail.nofit{max-height:none;overflow:visible}
/*  ★ 무너지는 순서 — 지도가 본체다. 좁아지면 오른쪽 칸이 아래로 내려간다.
    지도는 끝까지 맨 위에 남는다. */
@media (max-width:1100px){
  /*  아래로 내려오면 높이를 묶지 않는다 — 화면을 굴려 보면 되고,
      묶어 두면 짧은 칸 안에서 또 굴려야 해 두 번 굴리는 꼴이 된다.
      ★ 지도의 붙박이도 여기서 푼다 — 한 단으로 접히면 지도가 화면 위에
        눌어붙어 아래 글을 가린다. */
  main{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;max-height:none;display:grid}
  .rail #detail{overflow:visible;max-height:none}
}
@media (max-width:640px){ .railgrid{grid-template-columns:1fr} }

/*  ★ 칸 닫기 단추 — 오른쪽 위 모서리 (2026-08-14).
    ▣ 카드 안쪽 여백 위에 얹는다(절대배치) — 자리를 새로 차지하면 그만큼
      제목 줄이 밀린다.
    ▣ 손가락 자리를 28px 로 잡되 글자는 작게 — 눈에는 거슬리지 않고 손에는
      잡히게. 평소에는 옅고, 손을 올리면 진해진다. */
/*  ★ 찾는 줄 — 오른쪽 칸 맨 위, 두 카드보다 앞이다. 카드와 같은 결(테두리·
    둥근 모서리)을 쓰되 높이는 낮게: 늘 서 있는 것이라 자리를 적게 먹어야 한다. */
/*  ── 설정 (차림표 맨 오른쪽) ─────────────────────────────────────────── */
.navcog{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:0;background:transparent;color:var(--dim);
  cursor:pointer;border-radius:9px;align-self:center}
.navcog:hover{background:var(--chip);color:var(--ink)}
.navcog[aria-expanded="true"]{background:var(--chip);color:var(--water)}
/*  ★ 팝업은 **body 에 붙이고 fixed** 다 (2026-08-14 실측으로 고침).
    차림표(.nav)는 좁은 화면에서 가로로 밀리도록 overflow-x:auto 인데,
    그 안에 넣으면 팝업이 **그 상자에 잘려** 아래가 안 보였다. 넘치는 것을
    감추는 상자 안에서는 z-index 를 아무리 올려도 소용이 없다.
    ▣ fixed 라 화면 기준으로 뜨므로, 여는 자리(톱니 단추)의 좌표를 그때 잰다. */
.cogpop{position:fixed;z-index:9999;min-width:200px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:8px;box-shadow:0 16px 40px -12px rgba(var(--sh),.45)}
.cogpop h4{margin:2px 4px 6px;font-size:11px;color:var(--dim);font-weight:700;
  font-family:var(--mono)}
.cogpop label{display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:8px;
  cursor:pointer;font-size:12.5px;color:var(--ink)}
.cogpop label:hover{background:var(--chip)}
.cogpop input{width:15px;height:15px;accent-color:var(--water);cursor:pointer}
/*  ── 낚시배 순위 줄 (2026-08-14 재배치) ──────────────────────────────
    세 칸(순위 · 내용 · 오른쪽) × 세 층:
      ①  순위 | 배·지역·항구·조황지수 | 좋아요·관심선박
      ②       | 전체·최대어           | ┐썸네일(②③ 합침)
      ③       | 출조·최근·어종·물때    | ┘
    ★ 오른쪽 칸은 첫 층에 하트, 아래 두 층에 사진이다 — 사진이 첫 줄을 비켜야
      하트와 겹치지 않는다. */
.rklist{list-style:none;margin:0;padding:0}
.rkrow{display:grid;grid-template-columns:18px minmax(0,1fr) auto;
  gap:2px 6px;padding:8px 2px;border-bottom:1px solid var(--line-soft)}
.rkrow:last-child{border-bottom:0}
.rkrow .rk{grid-area:1/1;font-family:var(--mono);font-size:10.5px;color:var(--dim);
  padding-top:3px}
.rkrow:first-child .rk{color:var(--hot);font-weight:700}
.rkrow .rhead{grid-area:1/2;display:flex;align-items:center;gap:6px;min-width:0;
  flex-wrap:wrap}
.rkrow .rnm{font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.rkrow .rnm:hover{color:var(--water)}
.rkrow .rloc{font-size:11px;color:var(--dim);min-width:0}
.rkrow .rloc s{all:unset;margin:0 3px;opacity:.6}
.rkrow .racts{grid-area:1/3;display:flex;align-items:center;justify-content:flex-end;
  gap:4px;min-height:20px}
.rkrow .rnum{grid-area:2/2;font-family:var(--mono);font-size:11px;color:var(--water);
  font-weight:700;display:flex;gap:5px;flex-wrap:wrap;align-items:baseline}
.rkrow .big{font-family:var(--ui);font-weight:400;color:var(--dim)}
.rkrow .rwhy{grid-area:3/2;font-family:var(--mono);font-size:10px;color:var(--dim);
  line-height:1.55}
/*  ★ 「조과 예측」 — 관심선박 목록의 네 번째 층 (2026-08-17 지시:
      "'관심선박' 에서 관심선박리스트 항목에 '조과 예측' 링크를 추가해").
    ▣ 왜 넷째 층인가 — 첫 층 오른쪽(.racts)은 하트·관심선박이 이미 쓰고,
      셋째 층(.rwhy)은 '담은 날' 이 쓴다. 좁은 화면(360px)에서 이름줄 옆에
      끼워 넣으면 배 이름이 두 줄로 접혀 목록이 들쭉날쭉해진다 — 제 줄을 준다.
    ▣ 글씨는 .rwhy 와 같은 모노 계열로 두되 한 치수 키우고(11px) 손가락
      자리를 22px 남긴다. 상세의 .gohere 처럼 크게 세우지 않는다 — 여기서
      먼저 읽혀야 하는 것은 **배 이름**이지 이 링크가 아니다. */
/*  ★ 관심선박 줄의 **둘째 층** — 지역·시군·선사·항구·톤수·정원·주력 어종
    (2026-08-17 지시). 순위 줄의 `.rnum` 이 쓰던 자리(2/2)를 그대로 쓴다 —
    관심선박·My 설문에는 마리수가 없어 비어 있던 칸이다.
    ★ 내용 칸부터 오른쪽 끝까지를 **합쳐 한 단**으로 쓴다(2열~4선).
      · 지시대로 첫 줄만 2단이고 둘째 줄은 한 단이다.
      · ★ 1열(순위 숫자 칸, 18px)은 **안 먹는다** (2026-08-17 지시: "둘째
        줄의 시작 위치를 선박명과 일치시켜 줘"). 배 이름(.rhead)이 2열에서
        시작하므로, 둘째 줄도 2열에서 시작해야 왼쪽 끝이 픽셀로 맞는다.
    ★ 좁은 화면(360px)에서 가로로 새지 않게 **접히게** 둔다(overflow-wrap).
      말줄임으로 자르면 톤수·정원처럼 뒤에 오는 값이 통째로 사라진다 —
      한 줄을 지키는 것보다 값을 보이는 편이 낫다. */
.rkrow .rmeta{grid-area:2/2/3/4;font-size:11px;color:var(--dim);min-width:0;
  line-height:1.55;overflow-wrap:anywhere}
/*  ★ 담은 날 — 배 이름과 같은 줄. 이름에 눌리지 않게 한 단 흐리고 작게. */
.rkrow .rwhen{font-family:var(--mono);font-size:10px;color:var(--dim);white-space:nowrap}
.rkrow .rfc{grid-area:4/2;margin-top:3px}
/*  ★ My 설문의 두 단추(설문 보기 · 설문 수정)는 **한 줄에 나란히** 선다.
    옷(.join)은 layout/_survey.php 것을 그대로 쓴다 — 선박 상세의 평판 줄과
    같은 단추다. 가운뎃점도 그 줄과 같은 .sep 이다. */
.rkrow .rfc.rsv{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rkrow .rfc.rsv .sep{color:var(--dim);font-size:11px}
.rkrow .rfc.rsv .join{font-size:11.5px}
/*  ★ 글자를 **안 접는다**(white-space:nowrap) — 360px 에서 '조과 예측'
    이 두 줄로 접혀 줄 높이가 들쭉날쭉했다(실측). 상세의 .gohere 처럼
    '10일치' 까지 적지 않는 것도 같은 까닭이다 — 며칠치인지는 열면 제목에
    적혀 있고, 목록에서 먼저 읽혀야 하는 것은 배 이름이다. */
.rkrow .rfc .linkbtn{font-family:var(--mono);font-size:11px;letter-spacing:.03em;
  min-height:22px;display:inline-flex;align-items:center;white-space:nowrap}
/*  ══ 두 단추 앞의 아이콘 (2026-09-02 지시: "「조과 분석」·「조과 예측」 각각의
    앞에 그래프 아이콘을 추가해") ═══════════════════════════════════════════
    ▣ ★ **둘이 다른 그림**이다 — 두 단추는 뜻이 **반대 방향**이라 같은 그래프를
      나란히 두면 사람이 못 가린다.
        · 조과 분석 … **지나온 15일** → 축 위의 **꺾은선**(이미 그어진 자취).
                      제목 옆 「조과 분석 전부」 아이콘과 **같은 그림**이라
                      두 자리가 같은 것을 가리키는 줄 곧바로 읽힌다.
        · 조과 예측 … **앞으로 며칠** → **점선 뒤 화살촉**(아직 안 온 길).
                      점선은 '아직 자료가 아니다', 화살촉은 '앞을 본다' 이다.
    ▣ 글자를 대신하지 않는다 — **앞에 더할 뿐**이라 이름은 그대로 남는다.
      그래서 `aria-hidden="true"` 다(낭독기가 같은 말을 두 번 하지 않는다).
    ▣ 글자와 **같은 줄·같은 높이**로 선다 — 단추가 이미 inline-flex·
      align-items:center 라 baseline 이 들뜨지 않는다.
    ▣ ★ 누르는 넓이 44px — 글자만 있을 때는 22px 이라 모자랐다. 아이콘을
      더하면서 **min-height 를 44px 로 올리고** 위아래 여백을 음수 margin 으로
      먹여, 줄 높이는 그대로 두고 손가락 자리만 넓힌다. */
/*  ★ 값은 **한 벌**이다 — layout/_boattrend.php 의 `--btbtn-*` 를 쓴다.
    네 화면(onfishing 데스크톱·폰, naksigo 데스크톱·폰)이 같은 높이로 선다.
    보이는 박스만 낮추고 누르는 넓이는 `::before` 누름판으로 44px 을 남긴다. */
.rkrow .rfc .linkbtn{position:relative;min-height:var(--btbtn-h,26px);
  padding:var(--btbtn-pad-y,2px) 0}
.rkrow .rfc .linkbtn::before{content:'';position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:var(--btbtn-tap,44px)}
.rkrow .rfc .rfcico{width:var(--btbtn-ico,11px);height:var(--btbtn-ico,11px);
  flex:0 0 auto;margin-right:4px}
/*  ★ 두 단추 사이 가운뎃점 — My 설문 줄(.rsv)이 쓰는 것과 같은 옷이다. */
.rkrow .rfc .sep{color:var(--dim);font-size:11px;margin:0 5px}
/*  ★ 눌리는 낱말 — 점선 밑줄로만 알린다(색까지 바꾸면 줄이 알록달록해진다). */
.rkrow .rloc i,.rkrow .rwhy i{font-style:normal;cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.rkrow .rloc i:hover,.rkrow .rwhy i:hover{color:var(--water)}
.rkrow .th{grid-area:2/3/4/4;align-self:center;width:62px;height:46px;
  object-fit:cover;border-radius:7px;border:1px solid var(--line)}
.rgauge{display:inline-flex;gap:2px;margin-left:auto}
.rgauge i{width:8px;height:10px;border-radius:2px;background:rgba(var(--sh),.08);
  box-shadow:inset 0 1.2px 2px rgba(var(--sh),.25)}
.rgauge i.on{background:var(--water);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
/*  ★ 지수가 **없을 때** — 옅게(opacity)가 아니라 **점선 빈 칸**이다
    (2026-09-04 지시 "onfishing.net 도 맞춰" · 규칙은
     docs/onfishing_chart_spec.md 「지수가 없을 때」).
    ▣ 왜 옅게가 틀렸나 — 채움(background)이 그대로 남아 **★0 과 같은 그림**이
      된다. 「없다」와 「0이다」는 다른 말인데 화면이 둘을 같게 그렸다.
      흑백·고대비 화면에서는 아예 안 갈린다.
    ▣ 다섯 사이트 중 여기만 옛 어법이 남아 있었다(m.naksigo `.gauge.none i`
      와 같은 선언으로 맞춘다). 이 파일은 chart.php·mobile/app.php 양쪽에
      들어가므로 **두 호스트가 함께 고쳐진다.**
    ▣ 폭·키는 그대로다 — `*{box-sizing:border-box}` 라 테두리를 둘러도 칸이
      커지지 않는다(값 있는 칸과 같은 자리에 선다). */
.rgauge.none i{background:none;border:1px dashed var(--line);
  box-shadow:none;opacity:.85}
/*  ★ 항구 순위 줄 — **옷은 배 줄과 같다**(위 .rkrow). 여기서 더하는 것은
    "눌러도 열 곳이 없는 항구" 하나뿐이다 (2026-09-02 지시).
    마스터에 없는 이름은 점선 밑줄을 지워 **눌러지지 않음을 눈으로** 알린다 —
    눌렀는데 아무 일도 없는 것보다 낫다. */
.rkrow .rnm.nolink{text-decoration:none;cursor:default;color:var(--dim)}
.rkrow .rnm.nolink:hover{color:var(--dim)}
/*  ── 음성 단추 (마이크 · 스피커 · 목소리 고르기) ─────────────────────── */
.vcwrap{
  --vc-btn:32px;                                   /* 부르는 쪽이 줄 높이에 맞춘다 */
  --vc-accent:var(--water,#20758B);                /* 두 사이트 모두 --water 가 있다 */
  --vc-face:var(--card,var(--hull,#FFFFFF));
  --vc-line:var(--line,#C6D6DA);
  --vc-dim:var(--dim,#5E7C86);
  --vc-ink:var(--ink,#152F38);
  --vc-warn:var(--warn,var(--warn-ink,#B3402A));
  display:inline-flex;align-items:center;gap:4px;position:relative;flex:0 0 auto;
}
.vcwrap .vcbtn{
  flex:0 0 auto;width:var(--vc-btn);height:var(--vc-btn);padding:0;
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  border:1px solid var(--vc-line);border-radius:10px;
  background:var(--vc-face);color:var(--vc-dim);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.vcwrap .vcbtn svg{width:calc(var(--vc-btn) * .56);height:calc(var(--vc-btn) * .56);
  stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/*  ★ 보이는 것보다 넓게 누를 수 있게. 28px 단추도 손가락에는 44px 다. */
.vcwrap .vcbtn::after{content:"";position:absolute;left:50%;top:50%;
  width:max(44px,var(--vc-btn));height:max(44px,var(--vc-btn));
  transform:translate(-50%,-50%)}
/*  ★ 켜져 있을 때는 hover 색을 입히지 않는다 (2026-08-20 실측).
    :hover:not(:disabled) 는 특이도가 [aria-pressed=true] 보다 높아, 마우스를
    올린 채 켜면 흰 아이콘이 다시 물빛으로 돌아가 **바탕과 같은 색**이 됐다 —
    단추가 통째로 빈 네모로 보였다. 눌러 켠 상태가 hover 보다 중요하다. */
.vcwrap .vcbtn:hover:not(:disabled):not([aria-pressed="true"]){
  border-color:var(--vc-accent);color:var(--vc-accent)}
.vcwrap .vcbtn:focus-visible{outline:2px solid var(--vc-accent);outline-offset:2px}
.vcwrap .vcbtn:disabled{opacity:.4;cursor:default}
/*  누르고 있는 동안(듣는 중·읽는 중)은 채워서 확실히 다르게 보인다. */
.vcwrap .vcbtn[aria-pressed="true"]{background:var(--vc-accent);border-color:var(--vc-accent);color:#fff}

/*  듣는 중 — 테두리가 숨쉬듯 퍼진다. 소리가 들어오면 --vc-lvl 이 커진다. */
.vcwrap .vcbtn.vclive::before{content:"";position:absolute;inset:-3px;border-radius:12px;
  border:2px solid var(--vc-accent);opacity:calc(.25 + var(--vc-lvl,0) * .75);
  transform:scale(calc(1 + var(--vc-lvl,0) * .18));transition:transform .1s,opacity .1s}
@media (prefers-reduced-motion:reduce){
  /*  움직임을 싫어하는 사람에게는 크기를 바꾸지 않는다 — 진하기만 바뀐다. */
  .vcwrap .vcbtn.vclive::before{transform:none;transition:opacity .1s}
  .vcwrap .vcbtn{transition:none}
}

/*  상태 글자 — 아이콘만으로 알리지 않는다(읽어 주는 화면·색을 못 보는 사람). */
.vcstat{font-size:11.5px;line-height:1.3;color:var(--vc-dim);
  font-family:var(--mono,ui-monospace,monospace);white-space:nowrap;
  max-width:min(46vw,240px);overflow:hidden;text-overflow:ellipsis}
.vcstat.warn{color:var(--vc-warn)}
.vcstat:empty{display:none}

/*  목소리 고르기 — 작은 서랍. 오른쪽에 붙되 화면 밖으로 나가지 않는다. */
.vcpop{position:absolute;top:calc(var(--vc-btn) + 6px);right:0;z-index:60;
  width:min(232px,84vw);padding:8px;border:1px solid var(--vc-line);border-radius:12px;
  background:var(--vc-face);color:var(--vc-ink);
  /*  긴 화면 아래쪽에서 열리면 서랍이 화면 밖으로 나간다 — 안에서 굴린다.
      그래도 모자라면 JS 가 단추 **위쪽**으로 뒤집는다(.up). */
  max-height:min(56vh,380px);overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 14px 34px -12px rgba(var(--sh,21,47,56),.45)}
.vcpop.up{top:auto;bottom:calc(var(--vc-btn) + 6px)}
.vcpop h4{margin:2px 4px 6px;font-size:11.5px;font-weight:700;color:var(--vc-dim)}
.vcpop .vcgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.vcpop .vcgrid button{min-height:44px;padding:0 8px;border:1px solid var(--vc-line);
  border-radius:9px;background:transparent;color:var(--vc-ink);
  font-family:var(--ui,sans-serif);font-size:12.5px;cursor:pointer;text-align:left}
.vcpop .vcgrid button:hover{border-color:var(--vc-accent);color:var(--vc-accent)}
.vcpop .vcgrid button[aria-selected="true"]{background:var(--vc-accent);
  border-color:var(--vc-accent);color:#fff;font-weight:700}
.vcpop .vcauto{display:flex;align-items:center;gap:7px;min-height:44px;
  margin-top:6px;padding:0 4px;font-size:12.5px;color:var(--vc-ink);cursor:pointer}
.vcpop .vcauto input{width:17px;height:17px;accent-color:var(--vc-accent);cursor:pointer}
.vcpop .vcnote{margin:4px 4px 0;font-size:11px;line-height:1.5;color:var(--vc-dim)}

/*  좁은 화면에서 상태 글자가 줄을 밀지 않게 — 단추 아래로 내려 준다. */
@media (max-width:420px){
  .vcstat{max-width:min(58vw,190px);font-size:11px}
}

/*  ── 답변 머리 (폰 화면) ─────────────────────────────────────────────
    데스크톱에는 「답변」이라는 제목 줄이 있어 스피커가 붙을 자리가 있지만,
    폰 화면에는 없다. 그래서 답이 흐르는 칸 바로 위에 이 줄을 만든다 —
    스피커 자리를 얻는 동시에 "여기부터 답"이라는 표시가 된다. */
.vcbar{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.vcbar[hidden]{display:none}
.vcbar .vctitle{margin-right:auto;font-size:12px;font-weight:700;
  color:var(--dim,#5E7C86);font-family:var(--mono,ui-monospace,monospace)}

/*  제목 줄(.panel>h2 · #rankcard h3)은 flex + align-items:baseline 이다.
    단추를 글자 밑선에 맞추려 들면 어긋나므로 이 조각만 가운데에 맞춘다.
    ★ 그 제목 줄이 눌러서 접는 단추인 화면이 있다(onfishing 「검색결과」).
      그래서 JS 쪽에서 이 조각 안의 누름은 위로 올려보내지 않는다. */
/*  ★ 선택자를 .vcwrap 로 한 겹 감싼다 — 특이도 때문이다 (2026-08-20 실측).
    m.onfishing 의 묻는 칸에는 `.qbox button{height:44px;background:var(--water)}`
    가 있다. `.vcbtn` 한 겹(0,1,0)으로는 그것(0,1,1)에 진다 — 마이크가 늘
    파랗게 채워져 **켜져 있는 것처럼** 보였다. 화면마다 이런 규칙이 다르므로
    이 조각은 한 겹 더 두르고 들어간다. */
h2 > .vcwrap, h3 > .vcwrap{align-self:center}

/*  ★ **「AI 답변」 줄에서는 상자를 걷는다** — 2026-08-21 운영자 지시
    ("AI 답변 우측의 마이크 및 음성 선택 아이콘은 박스 없이 아이콘만 표시해").
    ▣ 왜 걷어도 되나 — 이 줄은 제목 한 마디와 아이콘 몇뿐이라 이미 한 덩이로
      읽힌다. 거기에 알약이 둘·셋 붙으면 눈이 먼저 상자에 걸려, 정작 읽어야 할
      **답**보다 단추가 앞에 선다. 스피커·마이크·사람 모양은 그림 자체가
      이미 단추다.
    ▣ 누를 수 있다는 것은 ① 아이콘 모양 ② 켜졌을 때 차오르는 색(.vclive·
      aria-pressed) ③ 투명 44px 표적이 말한다 — 상자는 없어도 된다.
    ▣ ★ **질의 줄의 마이크는 그대로 둔다** — 그쪽은 글 쓰는 칸 옆이라 상자가
      있어야 칸과 단추의 경계가 보인다. 그래서 답변 자리에만 건다.
    ▣ 표적(::after 44px)과 초점 테두리는 손대지 않는다 — 보이는 것만 걷었지
      누르는 자리와 키보드 표시는 그대로다. */
.vcbar .vcwrap .vcbtn,
#answerPanel h2 .vcwrap .vcbtn{
  border-color:transparent;background:transparent;
}
.vcbar .vcwrap .vcbtn:hover,
#answerPanel h2 .vcwrap .vcbtn:hover{
  border-color:transparent;background:transparent;color:var(--vc-ink,inherit);
}

/*  ★ 잠긴 단추 — 「읽기 방식」이 브라우저 음성이면 목소리 고르기가 잠긴다
    (2026-08-21 지정). **감추지 않고 잠근다** — 왜 못 고르는지 보이지 않으면
    고장으로 읽힌다. 눌러도 아무 일이 없고, 낭독기에는 aria-disabled 로 알린다.
    ▣ 색만으로 알리지 않는다 — 커서도 not-allowed 로 바뀌고 title 이 까닭을 적는다. */
.vcwrap .vcbtn.vclock,
.vcpop .vcgrid button.vclock{opacity:.42;cursor:not-allowed}
.vcwrap .vcbtn.vclock:hover,
.vcpop .vcgrid button.vclock:hover{background:inherit;border-color:inherit}
/*  읽기 방식은 두 갈래 — 목소리 격자와 같은 한 줄에 둘이다(2026-08-21 지시로
    「읽지 않음」을 걷었다. 그래서 .vceng3(셋)·.vcoff 는 함께 없앴다). */
/*  ★ 찾는 줄의 높이를 **줄였다** (2026-08-14 지정: "상하 여백을 줄여서 다른
    것과 일치하게 · 검색 아이콘도 검색창 높이와 같게. 지금은 너무 커").
    ▣ 36 → 32px. 카드의 머리글(h3, 30px 대)과 키가 맞아 오른쪽 칸의 세 상자가
      같은 결로 선다.
    ▣ ★ 단추는 칸과 **같은 높이·같은 너비**(32x32)다. 앞서는 38x36 이라
      입력칸보다 크고 옆으로도 튀어나와 눈에 먼저 들어왔다 — 찾는 자리에서
      먼저 보여야 하는 것은 **칸**이지 단추가 아니다.
    ▣ 아이콘도 15 → 13px 로 한 치수 줄인다. */
/*  ★ 줄 높이를 **못박는다**(32px). 안의 칸·단추가 32 인데도 줄이 46 이었다 —
    폼(form)이 기본으로 갖는 여백(margin-block)이 흐름에 남아 있었다.
    바깥 여백은 오른쪽 칸의 다른 상자와 같은 간격(--gap)만 쓴다. */
.railfind{display:flex;gap:5px;align-items:center;height:32px;margin:0;position:relative}
/*  ★ margin:0 을 반드시 여기서 다시 준다(2026-08-17 지시: "질의 예시 및
    검색 아이콘의 위치를... 현재 질의어보다 약간 높게 표시되고 있어").
    다른 자리의 `.catfind{margin:10px 0 4px}`(카테고리 찾기 상자용)가
    class 이름만 같아 여기도 걸린다 — 이 규칙은 height·padding·border 는
    덮어써도 margin 은 안 건드려서 그 10px/4px 가 그대로 새어 들어왔다.
    위아래 여백이 다르니(10≠4) 입력칸이 아이콘보다 3px 아래로 밀렸었다
    (실측: 아이콘 y=90.3, 입력칸 y=91.3+margin 왜곡). */
.railfind .catfind{flex:1 1 auto;min-width:0;height:32px;padding:0 10px;margin:0;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  font-size:12px;color:var(--ink)}
.railfind .catfind:focus{outline:2px solid var(--water);outline-offset:-1px}
/*  ★ 한 단 작게 (2026-08-14 지정: "검색 아이콘을 조금 작게 해") — 32 → 28px.
    ▣ 찾는 줄의 키(32px)는 그대로다. 단추만 줄이고 가운데로 세운다 —
      줄 자체가 낮아지면 옆의 입력칸과 아래 카드들의 사이가 다시 어긋난다.
    ▣ 손가락 자리로는 28px 이 아직 넉넉하다(가장 작은 표적은 24px 로 본다). */
.railfind .findgo{flex:0 0 auto;width:28px;height:28px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--water);background:var(--water);color:#fff;
  border-radius:var(--r);cursor:pointer}
.railfind .findgo:disabled{opacity:.5;cursor:default}

/*  ★ 「AI 답변」 — 순위 위에 놓이는 결론. 읽는 글이라 순위표보다 크고 진하다.
    ▣ 왼쪽 띠(--water)로 '이것은 AI 가 쓴 글' 임을 표시한다 — 우리가 센 숫자
      (순위표)와 **말로 지은 글**을 눈으로 갈라 준다.
    ▣ 근거 번호([1] 같은 것)는 답 안에 그대로 둔다 — 아래 순위와 잇는 실이다. */
.ansh{margin:10px 0 5px;font-size:11px;letter-spacing:.02em;color:var(--water);
  font-family:var(--mono);font-weight:700}
.ansbody{margin:0 0 10px;padding:9px 11px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);
  box-shadow:inset 3px 0 0 var(--water);
  font-size:12.5px;line-height:1.75;color:var(--ink);white-space:pre-wrap}
/*  ★ 검색어 목록 아이콘 — 찾기 단추와 **같은 크기**(28px)로 좌우가 맞는다.
    다만 채우지 않는다 — 찾기(파란 단추)가 이 줄의 주인이고, 목록은 곁이다. */
.railfind .findlist{flex:0 0 auto;width:28px;height:28px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--card);color:var(--dim);
  border-radius:var(--r);cursor:pointer}
.railfind .findlist:hover{border-color:var(--water);color:var(--water)}
.railfind .findlist[aria-expanded="true"]{border-color:var(--water);color:var(--water);
  background:var(--card-2)}
/*  ── 검색어 목록 층 (2026-08-14 지정) ───────────────────────────────────
    ★ **층으로 띄운다** — 칸으로 두면 열고 닫을 때마다 아래 카드가 오르내린다.
    ★ 길면 층 안에서만 굴린다. 오른쪽 칸 전체가 길어지면 지도가 밀린다. */
/*  ★ 폭을 줄였다 (2026-08-14 지정: "질의 예시 팝업창의 가로 폭을 줄여줘")
    — 찾는 줄 전체(460px)에서 **340px** 로. 목록 아이콘 아래에 붙여 세운다.
    좁은 화면에서는 줄 폭을 넘지 않는다(min). */
.qpop{position:absolute;z-index:40;left:0;right:auto;width:min(340px, 100%);top:36px;
  max-height:min(52vh, 420px);overflow:auto;
  background:color-mix(in srgb, var(--card, #fff) 96%, transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r);
  padding:10px 11px 11px;box-shadow:0 16px 40px -12px rgba(var(--sh),.45)}
.qpop[hidden]{display:none}
.qsec + .qsec{margin-top:11px;padding-top:10px;border-top:1px solid var(--line-soft)}
.qpop h4{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--dim);font-weight:700}
.qpop .qhint{margin:3px 0 7px;font-size:10.5px;color:var(--dim)}
.qpop .qlist{display:flex;flex-direction:column;gap:4px}
.qpop .qlist button{text-align:left;border:1px solid var(--line-soft);background:var(--card);
  color:var(--ink);border-radius:8px;padding:7px 9px;font:inherit;font-size:12px;
  cursor:pointer;white-space:normal;line-height:1.4}
.qpop .qlist button:hover{border-color:var(--water);color:var(--water)}
.qpop .qlist .none{font-size:11.5px;color:var(--dim);padding:2px 1px}
/*  ── 회원 칸(로그인·내 계정) — 오른쪽 칸 안 (2026-08-14 지정) ─────────────
    ★ 소셜 단추는 로그인 화면과 **같은 색·같은 말**을 쓴다. 두 화면이 다르게
      생기면 같은 서비스로 안 읽힌다. */
.ssobox{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.ssobtn{display:flex;align-items:center;justify-content:center;height:40px;
  border-radius:9px;border:1px solid var(--line);font-weight:700;font-size:13px;
  text-decoration:none}
.ssobtn:hover{filter:brightness(.97)}
.ssobox .more{display:flex;align-items:center;justify-content:center;height:38px;
  border-radius:9px;border:1px solid var(--line);background:var(--card-2);
  color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:none;
  margin:0}
.ssobox .more:hover{border-color:var(--water);color:var(--water)}
#detail, #todaycard, #rankcard{position:relative}
/*  ── 접기 (2026-08-17 지시) ─────────────────────────────────────────────
    "조황정보와 검색정보는 다른 메뉴 선택시 닫힘 상태가 되어 우측 하단에
     위치하여 언제든지 다시 볼 수 있어야 해"
    ★ 접힘은 X(설정 연동)와 **별개**다 — 접힘은 임시로 개켜 두는 것이고
      머리줄(제목·건수·펼침 표시)이 남는다. X 는 설정에서 끄는 것이다.
    ★ 접힌 카드는 DOM 차례 그대로 우측 **하단**에 선다(메뉴 카드가 위,
      검색결과가 조황정보 위 — 자리 규칙은 마크업 차례가 진다). */
/*  ★ 손 모양 커서 — 새로 단 두 손잡이(조황글 data-foldrep, 첫 줄
    data-folddet)가 이 규칙에서 빠져 있었다(2026-08-28 지시: "우측 접기/펼침
    아이콘 마우스오브시 커서 모양은 손모양으로 해"). h3 는 기본이 글자 커서라,
    누르는 자리인데도 손이 안 뜬다. `.detsec > summary` 는 예전부터 갖고 있다. */
h3[data-fold], h3[data-foldfish], h3[data-foldrep], h3[data-folddet]{cursor:pointer;
  user-select:none}
/*  ★ 접기·펼침 표시를 **3배로** 키운다 (2026-08-17 지시). 원래 10px 라
    작은 화면·서두르는 손에서는 눌리는지도 안 보였다. align-self:center 로
    부모 h3 의 baseline 정렬에서 빼낸다 — 안 그러면 큰 글자만 아래로
    처지고 제목 글자와 밑선이 안 맞는다(실측). */
h3[data-fold] .chev, h3[data-foldfish] .chev, h3[data-foldrep] .chev,
h3[data-folddet] .chev{margin-left:auto;
  font-size:30px;line-height:1;color:var(--dim);align-self:center;transition:transform .18s}
/*  ── 목록의 접이 — 어종·항구·선사·선박 네 목록 공통 (2026-08-17 지시,
    2026-08-17 세 번째 재지시로 항구·선사·선박까지 넓힘) — "어종을 선택하는
    경우에는 어종정보는 '접기'상태가 되면 이어서 어종 선택어종의 내용이
    표시된다"를 "항구정보에서도 어종정보에서의 접기 기능을 동일하게 적용해
    …선사정보, 선박정보 메뉴에서도 마찬가지야"로 넓혔다.
    #catListBlock 은 drawCat() 이 네 목록 모두에 똑같이 씌운다(예전 이름
    #fishListBlock — 어종 전용이던 시절 이름 그대로 두면 다른 셋에 쓰는 게
    헷갈려 이번에 바꿨다). #fishDetailBlock 은 **어종만** 계속 쓴다 —
    loadFishInline() 이 그 자리에 직접 그리는 어종 전용 지름길이고, 항구·
    선사·선박은 그런 지름길 없이 detailSet()(아래, catStub 을 봄)이 접힌
    #catListBlock 뒤에 상세를 잇는다 — 그래서 별도 “…DetailBlock” 이 없어도
    된다. id 가 아니라 h3[data-foldfish] 와 같은 결로 클래스를 쓴다 — 이
    블록은 .card 가 아니라 #detail 안의 한 구획이라 위 #todaycard/#rankcard
    규칙(id 특이도)을 그대로 옮길 수 없다. */
/*  ★ 조황글도 접힌다 (2026-08-28 지시: "우측 섹션의 「조황글」 우측에
    닫기/펼침 아이콘 추가해"). 어종정보 목록(#catListBlock)과 **같은 결**이다 —
    머리줄만 남고 속은 감춘다. 새 짜임을 만들지 않고 이미 있는 규칙을 잇는다. */
#detail .detbody.folded{display:none}
#detail h3[data-folddet][aria-expanded="false"] .chev{transform:rotate(-90deg)}
#repBlock.folded > :not(h3){display:none}
#repBlock.folded h3[data-foldrep]{margin:0}
#repBlock.folded h3[data-foldrep] .chev{transform:rotate(-90deg)}
#catListBlock.folded > :not(h3){display:none}
#catListBlock.folded h3[data-foldfish]{margin:0}
#catListBlock.folded h3[data-foldfish] .chev{transform:rotate(-90deg)}
#fishDetailBlock{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/*  ★ 접힌 메뉴 머리줄 뒤에 이어지는 새 상세 — 위 #fishDetailBlock 과 같은
    결(구분선+여백)로 뚜렷이 가른다(2026-08-17 재지시, detailSet() 참고). */
#detail .detail-new{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/*  ★ 아래로 내려간 '접힌 옛 메뉴' — 새 상세와 뚜렷이 가른다(2026-08-28).
    윗줄은 예전에 `.detail-new` 가 갖고 있던 그 줄이다(자리만 옮겼다). */
/*  접힌 옛 머리줄이 **위**에 선다(2026-09-17) — 아래쪽에 구분선 */
#detail .detail-back.sep{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
#detail .detail-back{margin-bottom:8px}
/*  ── 인생고기 (2026-08-17 지시) ─────────────────────────────────────────
    카드 목록 — 사진 썸네일 + 어종·크기·항구/배·날짜. 다른 목록(.catlist
    .chip)과 달리 사진이 있어 세로로 쌓는 카드 모양을 새로 둔다. */
.lflist{display:flex;flex-direction:column;gap:2px}
.lfcard{display:flex;gap:10px;align-items:center;width:100%;text-align:left;
  padding:8px 6px;border:0;border-radius:10px;background:none;cursor:pointer;color:inherit}
.lfcard:hover{background:var(--card-2)}
.lfthumb{width:52px;height:52px;border-radius:8px;object-fit:cover;flex:0 0 auto;
  background:var(--card-2)}
/*  ★ 글이 왼쪽 남은 자리를 다 쓰고, 썸네일이 줄 끝에 선다 — margin-left:auto
    로 미는 대신 글 쪽을 늘린다(사진이 없거나 안 열려도 줄이 안 무너진다). */
.lfmeta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
/*  ★ 썸네일은 **눌리는 것**이다 — 누르면 사진만 크게 뜬다(상세가 아니라). */
.lfthumb{cursor:zoom-in}
.lfsp{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.lfmine{font-size:9.5px;font-weight:600;color:var(--water);border:1px solid var(--water);
  border-radius:99px;padding:1px 6px;line-height:1.5}
.lfsub{font-size:11px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lfwhen{font-size:10px;color:var(--dim);font-family:var(--mono)}
/*  등록 폼 — <details> 하나로 접힌다(위 h3[data-foldfish] 와는 다른,
    이 화면에 원래 있는 접기 부품). 좁은 화면에서도 세로로 쌓인다. */
.lfform{margin:10px 0;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.lfform summary{cursor:pointer;font-size:12px;font-weight:600}
.lfform form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.lfform label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--ink-soft)}
.lfform input,.lfform textarea{font:inherit;font-size:12.5px;padding:6px 8px;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:inherit}
.lfpreviewwrap img{max-width:160px;max-height:160px;border-radius:8px;display:block}
.lfphoto{width:100%;max-height:360px;object-fit:contain;border-radius:10px;
  background:var(--card-2);margin:8px 0}
/*  ★ ID 로 적는다 — `#todaycard .replist{display:grid}` 가 ID 특이도라,
    클래스만으로는 접어도 목록이 그대로 서 있었다(실측 405px). !important 는
    피한다(§2-1 과 같은 결).
    ★ 메인 메뉴 클릭으로 뜨는 세 카드(#detail·#rankcard·#todaycard) 는 이제
      **어디에도 X 닫기가 없다** (2026-08-17 지시, 처음엔 접기·X 가 겹치는
      rank·today 만이었는데 곧 "원칙적으로 메인 메뉴에서 클릭으로 표시되는
      경우에는 … x 닫기 버턴을 제거한다"로 #detail 까지 넓어졌다). rank·
      today 는 접기(▾)로 대신하고, #detail 은 접을 것도 닫을 것도 없이
      설정(톱니 「조황정보 출처」) 체크박스로만 끈다. */
#todaycard.folded > :not(h3),
#rankcard.folded > :not(h3){display:none}
.card.folded h3[data-fold]{margin:0}
.card.folded h3[data-fold] .chev{transform:rotate(-90deg)}
/*  ★ #detail 의 접힌 머리줄은 카드(#detail) 전체가 .folded 가 아닐 수도
    있다 — 검색결과·조황정보 안의 항목을 눌러 새 상세를 이어 붙인 때는
    머리줄만 접히고 그 아래는 펼쳐진 채다(foldCard('detail',…)·detailSet
    참고, 2026-08-17 지시). 그때도 화살표는 접힌 모양이어야 하므로
    aria-expanded 로 직접 잡는다(조상의 .folded 를 타지 않는다). */
h3[data-fold][aria-expanded="false"] .chev{transform:rotate(-90deg)}
#rankcard h3 .cnt, #todaycard h3 .cnt, #detail .dtitle .cnt{font-family:var(--mono);
  font-size:10px;color:var(--dim);font-weight:400;letter-spacing:.02em}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--pad);min-width:0;box-shadow:0 1px 2px rgba(var(--sh),.05)}
.card>*:first-child{margin-top:0}.card>*:last-child{margin-bottom:0}
.card *{min-width:0}
h2{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);
  font-weight:700;margin:0 0 11px;padding-bottom:7px;border-bottom:1px solid var(--line);
  text-transform:uppercase;display:flex;align-items:baseline;gap:9px}
h2 .meta{font-size:10px;letter-spacing:.02em;font-weight:400;margin-left:auto}
h3{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--water);
  margin:0 0 8px;font-weight:700;display:flex;align-items:baseline;gap:7px}

/*  ── 지도판·해역쪽지·물때카드 CSS 는 공용 조각으로 (2026-08-19) ────────
    m.onfishing.net 폰 화면과 한 벌을 쓴다 — 지도 규칙을 고치면 두 화면이
    함께 바뀐다. 돛대·물고기 CSS 도 그 안에 있다. */
/*  전국 조황 해도 — 지도·물때카드 CSS 한 벌 (chart.php · mobile/app.php 공용).
    ★ <style> 안쪽에 include 하는 CSS 조각이다 (_tokens.php 와 같은 방식).
    ★ 2026-08-19 재건 지시("동일한 모양으로 동일하게")로 chart.php 에서 글자
      그대로 옮겼다 — 돛대·물고기·날짜바·해역쪽지·지도판·SVG·해역카드·달력·
      물때카드(.mtide)까지. 지도 생김을 고치려면 여기를 고친다(두 화면 공용). */
/*  ── 고른 항구의 깃대 (2026-08-14 지정) ─────────────────────────────────
    ★ 지도 위에 서는 것이라 **누를 수 없다**(pointer-events:none) — 깃대가
      그 아래 항구 점의 클릭을 가로채면 항구를 못 누른다.
    ★ 천만 나부낀다. 깃대(선)는 흔들리지 않는다 — 바람에 흔들리는 것은 천이다. */
.mtflag{pointer-events:none}
/*  ── 동해 바다의 물고기들 (2026-08-14 지정) ─────────────────────────────
    ★ 무엇을 그리고 어디에 두는지는 `service/_seafish.php` 가 정한다. 여기는
      **색과 몸짓**만 맡는다.
    ★ 색은 종을 따른다 — 광어 올리브 갈색, 가자미 누런 갈색+주황 점, 우럭
      검푸른 회색, 대구 잿빛 갈색, 문어 붉은 갈색, 갑오징어·오징어 누런빛,
      참돔 붉은빛, 돌돔 은빛+검은 줄, 고등어 청록, 전갱이 은빛, 삼치 짙은 청록,
      백조기 연한 은황.
    ★ 크기는 실제 몸 길이의 비를 따르되 **가장 작은 것도 18px**(지정).
      배율은 그림마다 인라인(--pfs)으로 온다.
    ★ 누를 수 없는 것은 무리 전체이고, **물고기 한 마리는** 마우스를 받는다 —
      올리면 이름표, 누르면 오른쪽에 어종정보. */
.playfish{pointer-events:none;--pfz:1}
.playfish.off{display:none}            /* 설정에서 끄면 통째로 사라진다 */
/*  ★ 좁은 화면에서는 지도가 작아져 물고기도 9px 까지 줄어든다(실측) —
    **비는 그대로 두고** 무리 전체를 키운다.
    ▣ 640px 위로는 손대지 않는다 — 그 사이에서는 한 단으로 접히며 지도가 오히려
      **넓어진다**(900px 에서 지도 836px). 거기서 키우면 물고기가 커진다.
    ▣ 폰에서 19px 을 그대로 맞추면 서로 겹친다(자리는 지도 단위로 잡혀 있다).
      겹치지 않는 선에서 키운다 — 겹쳐서 못 알아보는 것보다 조금 작은 편이 낫다. */
/*  ★ 폰에서 무리를 키우는 배율을 1.3·1.42 → **1.15·1.2** 로 낮춘다 (2026-08-15).
    ▣ 까닭 — 자리는 지도 단위로 굳어 있고, 배율만 키우면 그만큼 **서로 닿는다**
      (실측 390px: 겹친 쌍 13). 자리를 잡을 때 그 몫을 미리 더해 두려면 상자를
      1.42배로 부풀려야 하는데, 캡이 20~40km 로 좁아진 지금은 그 상자가 캡보다
      커서 앉을 자리가 사라진다(실측: 26마리 중 19마리가 캡 밖으로 밀려났다).
    ▣ 둘 중 하나를 접어야 한다면 **거리 기준을 지키는 쪽**이다 — 운영자가
      "항구랑 너무 멀다" 고 한 것이 그것이고, 폰에서 조금 작아지는 것은
      지도를 키우면(확대) 풀린다. */
@media (max-width:640px){ .playfish{--pfz:1.15} }
@media (max-width:430px){ .playfish{--pfz:1.2} }
.playfish .fish{--pfs:.6;pointer-events:visiblePainted;cursor:pointer;
  transform-box:fill-box;transform-origin:center;
  animation:pfSwim 3.4s ease-in-out infinite}
.playfish .fish:focus-visible{outline:2px solid var(--water);outline-offset:2px}
/*  ★ 서해 물고기는 **왼쪽(바다 쪽)을 본다** — 그림을 좌우로 뒤집는다
    (2026-08-14 지정: "어종의 머리 방향도 고려해야 해").
    ▣ 배율(--pfs)을 애니메이션이 쥐고 있어, 뒤집기는 **바깥 껍데기**에 건다. */
.playfish .at:has(> .flip){transform-box:fill-box;transform-origin:center}
.playfish .flip{--pfd:-1}
.playfish .fish{--pfd:1}
/*  종마다 박자를 달리해 한 무리가 같이 흔들리지 않게 한다. 작은 것은 빠르게. */
.playfish .k-rock{animation-duration:2.4s;animation-delay:-.6s}
.playfish .k-cod{animation-duration:4.1s;animation-delay:-1.2s}
.playfish .k-flat-l{animation-duration:3.4s;animation-delay:-.3s}
.playfish .k-flat-r{animation-duration:2.7s;animation-delay:-1.9s}
.playfish .k-seabream{animation-duration:3.1s;animation-delay:-2.2s}
.playfish .k-striped{animation-duration:2.9s;animation-delay:-1.1s}
.playfish .k-mackerel{animation-duration:2.2s;animation-delay:-.8s}
.playfish .k-jack{animation-duration:2.0s;animation-delay:-1.6s}
.playfish .k-spanish{animation-duration:3.8s;animation-delay:-.4s}
.playfish .k-croaker{animation-duration:2.6s;animation-delay:-2.4s}
.playfish .k-octo{animation:pfFloat 3.9s ease-in-out infinite}
/*  돌문어(옆모습)도 문어처럼 떠 있는다 — pfSwim 의 몸 기울임은 다리가 긴
    옆모습에서 어색하다. 박자만 살짝 달리해 문어와 같은 숨을 쉬지 않게 한다. */
.playfish .k-rocto{animation:pfFloat 3.6s ease-in-out infinite;animation-delay:-1.3s}
.playfish .k-octo-v{animation:pfFloat 4.2s ease-in-out infinite;animation-delay:-.7s}
.playfish .k-cuttle{animation:pfHover 2.9s ease-in-out infinite;animation-delay:-.9s}
.playfish .k-squid{animation:pfHover 3.3s ease-in-out infinite;animation-delay:-1.7s}
/*  꼬리는 붙은 자리를 축으로 부친다(종마다 클래스가 다르다). */
.playfish .t1,.playfish .t2,.playfish .t3,.playfish .tsb,.playfish .tst,
.playfish .tmk,.playfish .tjk,.playfish .tsp,.playfish .tcr{
  transform-box:fill-box;transform-origin:left center;
  animation:pfTail 1.1s ease-in-out infinite}
.playfish .t1{animation-duration:1.4s}
.playfish .t2{animation-duration:.8s;animation-delay:-.3s}
.playfish .t3{animation-duration:1.6s;animation-delay:-.7s}
.playfish .tsp{animation-duration:1.5s;animation-delay:-.5s}
.playfish .tmk,.playfish .tjk{animation-duration:.9s;animation-delay:-.4s}
.playfish .tcr{animation-duration:1s;animation-delay:-.9s}
/*  가자미는 왼쪽을 보고 있다 — 꼬리가 몸의 오른쪽에 붙는다 */
.playfish .t5{transform-box:fill-box;transform-origin:right center;
  animation:pfTail .9s ease-in-out infinite;animation-delay:-.5s}
.playfish .arm4 path,.playfish .armw path,.playfish .arm6 path,.playfish .ten6{
  transform-box:fill-box;transform-origin:top center;
  animation:pfArm 2.6s ease-in-out infinite}
.playfish .arm4 path:nth-child(2n),.playfish .armw path:nth-child(2n){
  animation-duration:3.1s;animation-delay:-.8s}
.playfish .arm4 path:nth-child(3n),.playfish .armw path:nth-child(3n){
  animation-duration:2.2s;animation-delay:-1.5s}
.playfish .arm6 path:nth-child(2n){animation-duration:1.9s;animation-delay:-.6s}
.playfish .ten6{animation-duration:3.4s;animation-delay:-1.1s}

/*  ── 종마다 다른 색 ── */
.playfish .b1{fill:#7A6A44;stroke:#4A3F26;stroke-width:1}          /* 광어 */
.playfish .fr1{fill:#8E7C52;stroke:#4A3F26;stroke-width:.7;opacity:.85}
.playfish .t1{fill:#8E7C52;stroke:#4A3F26;stroke-width:.8}
.playfish .o1{fill:#3B331F;opacity:.75}
.playfish .b2{fill:#4B5560;stroke:#242C33;stroke-width:1}          /* 우럭 */
.playfish .sp2{fill:#3C444E;stroke:#242C33;stroke-width:.8}
.playfish .t2,.playfish .pc2{fill:#3C444E;stroke:#242C33;stroke-width:.8}
.playfish .bl2{fill:none;stroke:#252D35;stroke-width:2.6;opacity:.55;stroke-linecap:round}
.playfish .b3{fill:#8B8266;stroke:#4E4832;stroke-width:1}          /* 대구 */
.playfish .d3,.playfish .t3{fill:#9A9174;stroke:#4E4832;stroke-width:.8}
.playfish .s3{fill:#4E4832;opacity:.55}
.playfish .lat3{fill:none;stroke:#EFEAD8;stroke-width:1;opacity:.8}
.playfish .b4{fill:#A15A3C;stroke:#6B3521;stroke-width:1}          /* 문어 */
.playfish .arm4 path{fill:none;stroke:#A15A3C;stroke-width:2.4;stroke-linecap:round}
.playfish .w4{fill:#D89478;opacity:.9}
/*  ★★ 주꾸미 — **문어와 다른 색**이다 (2026-09-12 지시, 실물 사진 참고).
    ▣ 문어(.b4)는 붉은 갈색인데 주꾸미는 **옅은 황갈색 몸통**에 올리브빛
      얼룩이 지고, 다리는 더 연한 살구빛, 빨판은 흰빛이다.
    ▣ 같은 색으로 두면 지도에서 둘이 구별되지 않는다 — 서해 가을 조황의
      두 주인공이라 갈라야 뜻이 산다.
    ▣ `.mw` 는 사진의 **오돌토돌한 돌기**를 점으로 옮긴 것이다. */
.playfish .bw{fill:#C9A46A;stroke:#7A5C2E;stroke-width:1}          /* 주꾸미 */
.playfish .armw path{fill:none;stroke:#E2C89A;stroke-width:5;stroke-linecap:round}
.playfish .hw{fill:#EFDCB6;opacity:.95}                            /* 다리 사이 물갈퀴 */
.playfish .mw{fill:#8A6B33;opacity:.6}
.playfish .ww{fill:#F5EAD2;opacity:.95}
.playfish .b5{fill:#947A4A;stroke:#57462A;stroke-width:1}          /* 가자미 */
.playfish .fr5{fill:#A88B57;stroke:#57462A;stroke-width:.7;opacity:.85}
.playfish .t5{fill:#A88B57;stroke:#57462A;stroke-width:.8}
.playfish .o5{fill:#D2762A;opacity:.85}
.playfish .b6{fill:#C7B27E;stroke:#6E5C33;stroke-width:.9}         /* 갑오징어 */
.playfish .fr6{fill:#DCCB9E;stroke:#6E5C33;stroke-width:.6;opacity:.9}
.playfish .st6{fill:none;stroke:#6E5C33;stroke-width:1.6;opacity:.55;stroke-linecap:round}
.playfish .arm6 path,.playfish .ten6{fill:none;stroke:#C7B27E;stroke-width:1.8;
  stroke-linecap:round}
.playfish .ten6{stroke-width:1.3;opacity:.9}
.playfish .fq{fill:#C9B98C;stroke:#6E5C33;stroke-width:.9}         /* 무늬오징어 */
.playfish .fqf{fill:#DCCB9E;stroke:#6E5C33;stroke-width:.6;opacity:.9}
.playfish .fqs{fill:none;stroke:#6E5C33;stroke-width:1.4;opacity:.5;stroke-linecap:round}
.playfish .bsb{fill:#C4645E;stroke:#7A342F;stroke-width:1}         /* 참돔 */
.playfish .dsb,.playfish .tsb,.playfish .psb{fill:#B0554F;stroke:#7A342F;stroke-width:.8}
.playfish .ssb{fill:#7FA6C9;opacity:.8}
.playfish .bst{fill:#B9BEC2;stroke:#3B4247;stroke-width:1}         /* 돌돔 */
.playfish .dst,.playfish .tst{fill:#9AA1A6;stroke:#3B4247;stroke-width:.8}
.playfish .bar{fill:none;stroke:#2C3236;stroke-width:2.6;opacity:.85;stroke-linecap:round}
.playfish .bmk{fill:#4E7D7A;stroke:#23403F;stroke-width:1}         /* 고등어 */
.playfish .tmk,.playfish .dmk{fill:#3E6A68;stroke:#23403F;stroke-width:.8}
.playfish .wav{fill:none;stroke:#1F3736;stroke-width:1.3;opacity:.7;stroke-linecap:round}
.playfish .bjk{fill:#AEB6BB;stroke:#3F4A50;stroke-width:1}         /* 전갱이 */
.playfish .tjk,.playfish .djk{fill:#D8C264;stroke:#7A6A2C;stroke-width:.8}
.playfish .scut{fill:none;stroke:#6E7A81;stroke-width:1.4;opacity:.8}
.playfish .bsp{fill:#3F5F63;stroke:#1D3033;stroke-width:1}         /* 삼치 */
.playfish .tsp,.playfish .dsp,.playfish .fsp{fill:#33504F;stroke:#1D3033;stroke-width:.8}
.playfish .osp{fill:#22383A;opacity:.75}
.playfish .bcr{fill:#CBBE96;stroke:#75683F;stroke-width:1}         /* 백조기 */
.playfish .dcr,.playfish .tcr{fill:#BCAE83;stroke:#75683F;stroke-width:.8}
/*  ── 함께 쓰는 것 ── */
.playfish .eye{fill:#16130C}
.playfish .eyew{fill:#fff;opacity:.9}                              /* 눈의 빛점 */
.playfish .lat,.playfish .mouth{fill:none;stroke:#3B331F;stroke-width:.7;opacity:.6;
  stroke-linecap:round}
.playfish .whisk{fill:none;stroke:#4E4832;stroke-width:.9;stroke-linecap:round}
@keyframes pfSwim{
  0%,100%{transform:scale(calc(var(--pfs) * var(--pfz, 1) * var(--pfd, 1)), calc(var(--pfs) * var(--pfz, 1))) translateY(0) rotate(0deg)}
  30%    {transform:scale(calc(var(--pfs) * var(--pfz, 1) * var(--pfd, 1)), calc(var(--pfs) * var(--pfz, 1))) translateY(-2.5px) rotate(-4deg)}
  65%    {transform:scale(calc(var(--pfs) * var(--pfz, 1) * var(--pfd, 1)), calc(var(--pfs) * var(--pfz, 1))) translateY(1.5px) rotate(3deg)}
}
@keyframes pfFloat{                     /* 문어는 물결에 떠 있듯 위아래로만 */
  0%,100%{transform:scale(calc(var(--pfs) * var(--pfz, 1) * var(--pfd, 1)), calc(var(--pfs) * var(--pfz, 1))) translateY(0) scaleY(1)}
  50%    {transform:scale(calc(var(--pfs) * var(--pfz, 1) * var(--pfd, 1)), calc(var(--pfs) * var(--pfz, 1))) translateY(-3px) scaleY(1.05)}
}
@keyframes pfHover{                     /* 오징어는 제자리에 떠서 앞뒤로 민다 */
  0%,100%{transform:scale(calc(var(--pfs) * var(--pfz, 1) * var(--pfd, 1)), calc(var(--pfs) * var(--pfz, 1))) translate(0,0)}
  35%    {transform:scale(calc(var(--pfs) * var(--pfz, 1) * var(--pfd, 1)), calc(var(--pfs) * var(--pfz, 1))) translate(-1.5px,-2px)}
  70%    {transform:scale(calc(var(--pfs) * var(--pfz, 1) * var(--pfd, 1)), calc(var(--pfs) * var(--pfz, 1))) translate(1.5px,1px)}
}
@keyframes pfTail{ 0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)} }
@keyframes pfArm{  0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }
@keyframes pfBub{
  0%{transform:translateY(3px);opacity:0} 30%{opacity:.6}
  100%{transform:translateY(-9px);opacity:0}
}
/*  ★ 움직임을 끈 사람에게도 **크기는 그대로**여야 한다 — 배율을 애니메이션이
    쥐고 있으므로 멈출 때는 같은 배율을 따로 준다. */
@media (prefers-reduced-motion: reduce){
  .playfish .fish{animation:none;transform:scale(calc(var(--pfs) * var(--pfz, 1) * var(--pfd, 1)), calc(var(--pfs) * var(--pfz, 1)))}
  .playfish .t1,.playfish .t2,.playfish .t3,.playfish .t5,.playfish .tsb,
  .playfish .tst,.playfish .tmk,.playfish .tjk,.playfish .tsp,.playfish .tcr,
  .playfish .arm4 path,.playfish .armw path,.playfish .arm6 path,
  .playfish .ten6{animation:none}
}
/*  ★ 위에 있던 **길 잃은 `}` 하나를 걷었다** (2026-08-17 실측) — CSS 는 짝
    없는 `}` 를 만나면 **바로 다음 규칙 하나를 통째로 버린다.** 그래서
    `.mtflag .mast`(전에는 `.pole`)가 시트에 아예 실리지 않아 돛대 기둥이
    투명했다(CSSOM 대조로 확인). 같은 꼴의 `}` 가 해역 쪽지 미디어 블록 뒤에
    하나 더 있었다 — 그쪽은 `.daynote` 를 먹었다(2026-08-17 운영자 지시로 걷어냄). */
/*  ★ 돛대로 다시 그렸다 (2026-08-17 지시: "좌측 맵에 해당 위치를 표시해 주고
    해당 표시는 눈에 확실하게 보일 수 있게 돛대의 펄럭이는 모습으로").
    ▣ 흰 테(mast-halo)를 기둥 밑에 깐다 — 항구 점·뭍 위에서도 기둥이 선다.
    ▣ 천은 소나 주황(#FF7E1F) — 해도의 파랑·담황 어디에도 없는 색이라 한눈에
      잡힌다. --hot(#C4451F)은 조황 많은 항구 점이 이미 입은 색이라 안 쓴다.
    ▣ 밑동의 고리(ping)가 퍼져 나간다 — "여기"를 소나처럼 가리킨다.
    ▣ 나부끼는 것은 천뿐이다. prefers-reduced-motion 이면 천도 고리도 멈춘다. */
/*  ★ 크기·강조를 키웠다 (2026-08-17 지시: "맵에 표시되는 돛대 표시를
    좀더 크고 포인트를 더 표시를 강하게 해") — 기둥 32→46(약 1.4배), 굵기·
    깃발·밑동 점을 같은 비로 키우고, 밑동 점에 늘 켜진 주황 글로우를 더해
    고리(ping)가 다 퍼진 뒤에도(2.2초 주기 사이) "여기" 표시가 꺼져 보이지
    않게 했다. */
.mtflag .mast{stroke:var(--ink);stroke-width:2.8;stroke-linecap:round}
.mtflag .mast-halo{stroke:#fff;stroke-width:6.2;stroke-linecap:round;opacity:.9}
.mtflag .foot{fill:var(--ink);stroke:#fff;stroke-width:1.8;
  filter:drop-shadow(0 0 4px rgba(255,126,31,.95))}
.mtflag .cloth{fill:#FF7E1F;stroke:#A34A0B;stroke-width:1;
  transform-box:fill-box;transform-origin:left center;
  animation:flagwave 1.9s ease-in-out infinite}
.mtflag .ping{fill:none;stroke:#FF7E1F;stroke-width:2.2;
  transform-box:fill-box;transform-origin:center;
  animation:flagping 2.2s ease-out infinite}
@keyframes flagwave{
  0%,100%{transform:skewY(0deg) scaleX(1)}
  25%    {transform:skewY(-6deg) scaleX(.93)}
  50%    {transform:skewY(1deg) scaleX(1.04)}
  75%    {transform:skewY(6deg) scaleX(.95)}
}
@keyframes flagping{
  0%  {transform:scale(.5);opacity:.95}
  80% {transform:scale(3.2);opacity:0}
  100%{transform:scale(3.2);opacity:0}
}
/*  ★ 물때는 **재는 자리**(조위 관측소)에 세운다 (2026-08-17 지시) — 항구가
    아니라 바다 위 측정 지점이다. 천을 물빛으로 갈아입히고 밑에 작은 파도를
    그어 관측소임을 말한다. */
.mtflag.station .cloth{fill:var(--water);stroke:#123F4C}
.mtflag.station .ping{stroke:var(--water)}
.mtflag.station .wavemark{fill:none;stroke:var(--water);stroke-width:1.2;
  stroke-linecap:round}
@media (prefers-reduced-motion: reduce){
  .mtflag .cloth{animation:none}
  .mtflag .ping{animation:none;display:none}
}
/*  ── 어종 선택 강조 (2026-08-17 지시: "어종 선택시에는 해당 어종이 맵에
    표시되고 있다면 해당 어종을 쉽게 판단할 수 있도록 표현해줘") ──────────
    ★ 고른 어종만 밝은 글로우가 숨쉬고, 나머지는 물러난다(옅어진다).
    ★ 크기·자리는 건드리지 않는다 — transform 은 헤엄 애니메이션(pfSwim 들)이
      쥐고 있어 여기서 만지면 자리가 튄다. filter·opacity 만 쓴다.
    ★ 지도에 그 어종이 없으면 아무것도 하지 않는다(fishHl 이 가른다). */
.playfish.dim .at{opacity:.28;transition:opacity .25s}
.playfish.dim .at.hl{opacity:1}
.playfish .at.hl{animation:pfHl 1.6s ease-in-out infinite}
@keyframes pfHl{
  0%,100%{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 3px #FF7E1F)}
  50%    {filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px #FF7E1F)}
}
@media (prefers-reduced-motion: reduce){
  .playfish .at.hl{animation:none;
    filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #FF7E1F)}
}

/* ── 지도판 ─────────────────────────────────────────────────────────── */
/*  ★ 지도와 해역 카드를 한 상자에 넣고, 카드는 지도의 **네 귀퉁이**에 붙인다.
    그 바다가 있는 쪽에 그 바다의 상황이 있어야 눈이 오가지 않는다. */
/*  ══ 날짜 바 — 지도 **위**, 왼쪽 (2026-08-14) ═══════════════════════════
    ▣ 지도 상자 안에 둔다. 머리띠에 붙이면 화면 폭이 좁아질 때 차림표와
      싸우고, 지도와 멀어져 '이 지도가 그날 것' 이라는 뜻이 흐려진다.
    ▣ ★ 이 바가 생기면서 지도는 자연히 **아래로** 내려간다. 오른쪽으로도
      조금 민다(지정: "지도를 우측 아래로 조금 옮기고") — 왼쪽 위 구석에
      날짜가 서므로, 지도가 그 아래에서 살짝 비켜야 둘이 안 겹쳐 보인다. */
/*  ★ 날짜는 **지도 위 가운데**에 뜬다 (2026-08-14 지정: "캘린더 호출용 날짜
    정보는 지도 중간으로 이동"). 지도 위에 얹으므로(absolute) 지도가 그만큼
    작아지지 않는다 — 앞서는 바가 한 줄을 차지해 지도가 눌렸다.
    ▣ 가로 가운데, 위에서 10px. 그 자리는 바다(북한 위쪽)라 점·이름표를
      가리지 않는다.
    ▣ ★ 지도를 누르는 일을 막지 않는다 — 바 자체는 pointer-events 를 통과시키고
      단추만 받는다. 안 그러면 날짜 뒤의 항구를 못 누른다. */
/*  ★ 한 줄 아래로 (2026-08-14 지정) — 10 → 34px. 위쪽 경도 눈금줄(125°E…)과
    겹쳐 보이던 것을 그 아래로 내린다. */
.daybar{position:absolute;left:50%;transform:translateX(-50%);top:34px;z-index:6;
  /*  ★ inline-flex 라야 **글자만큼만** 넓다. flex 로 두면 상자 폭을 다 먹어
      (712px) 그 띠 전체가 지도 위를 덮는다 — 보이지는 않아도 눌리는 자리를
      가져간다(pointer-events 로 통과시키긴 하지만, 폭이 넓으면 가운데 정렬도
      뜻이 없어진다). */
  display:inline-flex;align-items:center;gap:6px;pointer-events:none;
  white-space:nowrap}
.daybar > *{pointer-events:auto}
.daypick, .daynow{box-shadow:0 2px 8px -3px rgba(var(--sh),.35)}
.daypick{display:inline-flex;align-items:baseline;gap:7px;cursor:pointer;
  border:1px solid var(--line);background:var(--card-2);border-radius:9px;
  padding:5px 10px;font-family:var(--mono);font-size:11.5px;color:var(--dim);
  letter-spacing:-.2px}
.daypick:hover{border-color:var(--water);color:var(--ink)}
.daypick b{font-family:var(--ui);font-size:13px;font-weight:800;color:var(--ink)}
.daypick i{font-style:normal}
.daypick em{font-style:normal;color:var(--water);font-weight:700}
.daypick .tri{color:var(--dim);font-size:10px}
.daynow{border:1px solid var(--line);background:var(--card);border-radius:9px;
  padding:5px 9px;cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--dim)}
.daynow:hover{border-color:var(--water);color:var(--ink)}
/*  앞날 안내 — 날짜 바 옆에 옅게. 지도 위라 배경을 깔아 글자가 묻히지 않게 한다. */
/*  지도 오른쪽 아래 — 이 지도가 무엇을 그렸는지 한 줄. 지도 위에 얹는다. */
/*  ★ 글자 12px. 자리는 아래(34px), 그 위가 확대·축소다 — 자리는 건드리지 않는다.
    ★ 날짜를 고르면 숨기지 않고 **「1일 · 항구 N곳」 으로 바꿔 적는다**(지정).
      지도가 그 하루를 그리고 있다는 사실은 지워야 할 것이 아니라 말해야 할 것이다. */
.mapnote{position:absolute;right:14px;bottom:34px;z-index:5;pointer-events:none;
  font-family:var(--mono);font-size:12px;color:var(--dim);
  background:color-mix(in srgb, var(--card, #fff) 82%, transparent);
  padding:4px 9px;border-radius:7px}

/* ── 물때정보 — m.naksigo.com 의 물때 카드를 **그대로** (2026-08-14 지정) ────
   "맵의 물때정보 클릭시와 메뉴의 물때정보 클릭시 우측섹션의 물때정보 내용은
    m.naksigo.com 의 물때정보 UI를 가져와 그대로 구현해."
   ★ 규칙은 **베껴 온 그대로**다(naksigo.com/app/Views/mobile/app.php 「물때」).
     고치고 싶은 것이 생기면 두 곳을 함께 고친다 — 한쪽만 고치면 같은 물때가
     화면마다 달라진다.
   ★ 이 화면에는 없는 이름표(--hull·--sonar·--lamp…)가 그쪽 규칙에 쓰인다.
     **껍데기(.mtide)에서 한 번 이어 준다** — 규칙 본문은 손대지 않는다.
   ★ 모두 `.mtide` 안으로 가둔다. 이 화면에도 .bar·.tidelimit 가 이미 있어
     (해역 카드·내일의 물때) 가두지 않으면 서로를 덮는다. */
.mtide{--hull:var(--card); --hull-2:var(--card-2);
  --sonar:var(--magenta); --sonar-ink:var(--magenta); --sonar-hot:var(--hot);
  --lamp:var(--water); --tide-bar:var(--water); --on-sonar:#fff}
.mtide .row{display:flex;align-items:center;gap:8px}
.mtide .row .sp{flex:1 1 auto}
.mtide .row .k{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.08em}
.mtide .row .t{font-size:16px;font-weight:800;min-width:0}
.mtide .muted{color:var(--dim);font-size:11.5px;margin:6px 0 0}
.mtide .muted.warn{color:var(--hot)}
.mtide .mono{font-family:var(--mono)}
.mtide .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}
.mtide .datebtn .tri{font-size:1.8em;margin:0 -2px 0 0}
.mtide .bar{height:9px;border-radius:99px;background:var(--hull-2);overflow:hidden;margin:8px 0 4px}
.mtide .bar i{display:block;height:100%;background:var(--tide-bar);border-radius:99px}
.mtide .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}
.mtide .exs .c{background:var(--hull);padding:7px 5px;text-align:center}
.mtide .exs .c .l{display:block;font-size:10px;color:var(--dim)}
.mtide .exs .c .v{display:block;font-family:var(--mono);font-size:12.5px;font-weight:700}
.mtide .exs .c.hi .l{color:var(--sonar-ink)}
.mtide .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}
.mtide .tsea .c{background:var(--hull);padding:7px 8px;min-width:0}
.mtide .tsea .c .l{display:block;font-size:10px;color:var(--dim)}
.mtide .tsea .c .v{display:block;font-family:var(--mono);font-size:12.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtide .tdc{margin-top:10px}
.mtide .tdc svg{display:block;width:100%;height:auto;color:var(--water)}
.mtide .tdc .grid{stroke:var(--line);stroke-width:1}
.mtide .tdc .area{fill:var(--water);opacity:.13}
.mtide .tdc .curve{fill:none;stroke:currentColor;stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mtide .tdc .pk{fill:var(--lamp)}
/*  ★ 그래프 위의 값은 **한 단 작게** (2026-08-14 지정) — 자가 붙으면서 글자가
    늘었다. 11 → 9px. 곡선이 글자에 가리면 자를 붙인 뜻이 없다. */
.mtide .tdc .lb{font-family:var(--mono);font-size:9px;fill:var(--dim)}
.mtide .tdc .lb.hi{fill:var(--lamp);font-weight:700}
.mtide .tdc .nowline{stroke:var(--sonar-hot);stroke-width:.7;stroke-dasharray:2.5 2.5}
.mtide .tdc .nowdot{fill:var(--sonar-hot)}
.mtide .tdc .nowlb{font-family:var(--mono);font-size:9px;fill:var(--sonar-hot);font-weight:700}
.mtide .tdc .cap{margin:4px 2px 0;font-size:10px;color:var(--dim)}
.mtide .tdc .cap b{color:var(--ink)}
/*  ★ 자 — 「내일의 물때」 곡선과 **같은 결**로 (2026-08-14 지정). */
.mtide .tdc .ax{stroke:var(--line);stroke-width:.8}
.mtide .tdc .ax.bold{stroke-width:1.2}
.mtide .tdc .axlb{font-family:var(--mono);font-size:8px;fill:var(--dim)}
.mtide .tdc .axlb.unit{font-size:7px;opacity:.8}
.mtide .tspd{margin-top:10px}
.mtide .tspd h3{margin:0 0 5px;font-size:11px;font-weight:700;color:var(--dim);
  display:flex;align-items:baseline;gap:6px}
.mtide .tspd h3 .u{font-family:var(--mono);font-weight:400}
.mtide .tspd .r{display:grid;grid-template-columns:34px 1fr auto;align-items:center;
  gap:7px;margin-bottom:5px}
.mtide .tspd .r .n{font-size:11px;color:var(--dim)}
.mtide .tspd .r .t{position:relative;height:10px;border-radius:99px;background:var(--hull-2)}
.mtide .tspd .r .f{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--tide-bar)}
.mtide .tspd.wind .r .f{background:var(--sonar)}
.mtide .tspd .r .v{font-family:var(--mono);font-size:11.5px;font-weight:700;white-space:nowrap}
.mtide .tspd .r .lim{position:absolute;top:-3px;bottom:-3px;width:0;
  border-left:1.5px dashed var(--sonar-hot)}
.mtide .tspd .note{margin:2px 2px 0;font-size:10.5px;color:var(--dim)}
.mtide .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))}
.mtide .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))}
.mtide .tidelimit .sub{display:block;margin-top:3px;font-size:10.5px;color:var(--ink-soft)}
.mtide .more{display:block;width:100%;margin-top:10px;padding:9px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--hull-2);color:var(--ink);
  font:inherit;font-size:12px;cursor:pointer}
.mtide .more:hover{border-color:var(--water)}
/*  항구 고르기 층 — 그쪽의 「항구 바꾸기」와 같은 일을 한다. */
/*  ★ 물때정보의 달력 — 날짜 단추 **바로 아래**. 지도 달력과 같은 생김새(.calpop)
    를 쓰되 자리만 여기서 정한다(2026-08-14). */
.calpop.mtcal{left:auto;right:0;top:44px;width:min(300px, 92%)}
.mtpick{margin-top:9px;border:1px solid var(--line);border-radius:9px;padding:8px;
  background:var(--card-2)}
.mtpick input{width:100%;height:32px;border:1px solid var(--line);border-radius:8px;
  padding:0 9px;font:inherit;font-size:12.5px;background:var(--card);color:var(--ink)}
.mtpick .hits{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;max-height:148px;overflow:auto}
.mtpick .hits button{border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:99px;padding:4px 9px;font:inherit;font-size:11.5px;cursor:pointer}
.mtpick .hits button:hover{border-color:var(--water);color:var(--water)}

/* ── 해역 물때 쪽지 — 지도 위에 뜬다 (2026-08-14 지정) ──────────────────
   "맵의 서쪽에는 서해 물때, 동쪽에는 동해 물때, 남쪽에는 남해 물때를 추가한다.
    맵은 그대로 두고 팝업으로 추가해야 해."
   "구성은 8092(개편 전 사본)에서 표현하는 UI 그대로 가져와야 해."
   ★ **얹는다, 밀지 않는다** — 지도 옆에 세우면 지도가 그만큼 줄어든다(한때
     좌우 176px 카드가 그랬고, 지시로 걷어냈다). 절대자리로 띄우면 지도는
     1px 도 움직이지 않는다.
   ★ 카드 속은 **손대지 않았다** — 사본과 **한 글자도 다르지 않은**
     `_zonecard.php` 를 그대로 include 하고, .zone/.mrow/.bar 규칙도 그때
     것이다. 여기서는 **어디에 뜨는지**만 정한다.
   ★ 자리는 그 바다 위다 — 서해는 왼쪽, 동해는 오른쪽, 남해는 아래. 뭍이 아니라
     물 위라 항구 점·도시 이름표를 가리지 않는다(실측으로 자리를 골랐다).
   ★ 달력에서 날짜를 고르면 **그날 물때로 다시 그린다**(/api/chart-zones). */
/*  ★ 끌어서 옮길 수 있다 (2026-08-14 지정) — 손 모양으로 그것을 알린다.
    옮긴 자리는 이 브라우저에 남는다(아래 JS). */
.seatide{position:absolute;z-index:5;width:141px;cursor:grab;touch-action:none}
.seatide[hidden]{display:none}         /* 설정에서 끄면 셋이 함께 사라진다 */
.seatide.dragging{cursor:grabbing;z-index:9;
  box-shadow:0 10px 26px -10px rgba(var(--sh),.55)}
.seatide.dragging .zone{border-color:var(--water)}   /* 176 의 4/5 (2026-08-14 지정) */
/*  ★ **아래가 비쳐야 한다** (2026-08-14 지정: "아래 있는 어종이 보일 수 있게
    투명하게"). **투명도 90%**(= 바탕 10%만 채움 — 2026-08-14 지정)로 두고
    **흐림은 걷었다** — 흐림을 두면 뒤가
    뭉개져 물고기가 얼룩으로 보인다.
    ▣ 글자는 그대로 읽혀야 하므로 **글자 뒤에만** 옅은 흰 테를 두른다
      (paint-order 처럼 text-shadow 로 — 배경을 올리지 않고 글자만 살린다). */
.seatide .zone{background:color-mix(in srgb, var(--card-2, #fff) 10%, transparent);
  box-shadow:0 1px 6px rgba(20,40,60,.10);
  /*  상하 1/5 줄이기 (2026-08-14 지정) — 글자 크기는 그대로 두고 **사이 간격**만
      줄인다. 글자를 줄이면 지도 위에서 안 읽힌다. */
  padding:8px 11px;line-height:1.3}
.seatide .zone .zh{margin-bottom:4px}
.seatide .mrow{margin-bottom:2px}
.seatide .bar{height:7px}
.seatide .zone .zf{margin-top:3px}
.seatide .zone:hover{background:color-mix(in srgb, var(--card-2, #fff) 92%, transparent)}
/*  글자만 또렷하게 — 배경을 올리지 않고 글자 둘레에 흰 숨을 준다. */
.seatide .zone .zh b,.seatide .zone .zh s,.seatide .zone .zh i,
.seatide .mrow,.seatide .mrow b,.seatide .zone .zf,.seatide .zone .zf b{
  /*  ★ 바탕을 거의 비웠으므로(투명도 90%) 글자는 **제 숨으로** 읽혀야 한다 —
      흰 테를 세 겹 둘러 지도 위에서도 또렷하게 남긴다. */
  text-shadow:0 0 3px var(--card, #fff), 0 0 2px var(--card, #fff),
              0 0 6px var(--card, #fff)}
/*  ★ 자리는 **위경도에서 온 값**(--sea-top·--sea-left)을 쓴다. 값이 없으면
    아래의 기본 자리로 물러선다. 인라인이 아니라 속성이라 폰에서 덮을 수 있다. */
.seatide{top:var(--sea-top, auto);bottom:auto}
.seatide.w{left:var(--sea-left, 2%)}
.seatide.e{right:3%}
.seatide.s{left:var(--sea-left, 44%)}
/*  좁은 화면에서는 지도도 작아진다 — 쪽지가 지도를 다 덮지 않게 줄인다. */
@media (max-width:900px){
  .seatide{width:106px}
  .seatide .zone{padding:6px 7px}
  .seatide .zone .zh b{font-size:12px}
  .seatide .mrow{font-size:9.5px;grid-template-columns:24px 1fr auto;margin-bottom:2px}
  .seatide .bar{height:6px}
  .seatide .zone .zf{font-size:9px}
}
/*  ★ 폰에서도 **보인다** (2026-08-14 지정: "390px 에서도 쪽지 보이게 해").
    앞서는 560px 아래에서 감췄다 — 지도가 338px 인데 쪽지 셋이 그 위를 거의
    다 덮었기 때문이다. 감추는 대신 **한 줄로 줄인다**:
      · 남기는 것 — 해역 이름 · 몇물 · 낚시지수(첫 줄 그대로)
      · 접는 것 — 유속·바람·파고·지수 막대와 조차·수온 줄
    ★ 왜 이 줄만 남기나 — 지도 위에서 눈이 묻는 것은 「지금 이 바다가 몇물인가」
      다. 나머지는 눌러서 오른쪽(물때정보)에서 본다 — 그 길이 이미 있다.
    ★ 눌러 여는 일과 끌어 옮기는 일은 그대로다(작아져도 40px 남짓은 된다). */
@media (max-width:560px){
  /*  ★ 동해 쪽지만 위로 비켜 세운다 (2026-08-14 지정) — 아래 자리에서는
      장호항·임원항 두 점을 덮어 그 폭에서 눌리지 않았다. */
  .seatide.e{top:var(--sea-top-sm, var(--sea-top, auto))}
  .seatide{width:auto;max-width:44%}
  .seatide .zone{padding:4px 7px}
  .seatide .zone .zh{margin-bottom:0;gap:5px}
  .seatide .zone .zh b{font-size:11px}
  .seatide .zone .zh s{font-size:10px}
  .seatide .zone .zh i{font-size:9px}
  .seatide .mrow,
  .seatide .zone .zf{display:none}
}
/*  ★ 길 잃은 `}` 가 여기 하나 더 있었다 (2026-08-17 걷어냄) — CSS 는 짝 잃은
    닫음괄호 뒤의 **다음 규칙 하나를 통째로 버린다**. 그래서 바로 아래
    `.daynote`(오른쪽 아래 「최근 30일 조황…」 쪽지)가 맨몸으로 그려지고
    있었다. naksigo 예측 그래프의 축이 죽어 있던 것과 똑같은 병이다. */
/*  ★ 확대·축소는 그 **바로 위에 가로로**, 오른쪽 정렬 (2026-08-14 지정).
    앞서는 지도 오른쪽 위에 세로로 세워 두어 지도의 동해 쪽을 가렸다. */

.daynote{font-family:var(--mono);font-size:10.5px;color:var(--dim);
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:4px 8px;box-shadow:0 2px 8px -3px rgba(var(--sh),.35)}
/*  ★ 날짜 바가 지도 위로 떠오르면서 위쪽 여백은 필요 없어졌다.
    오른쪽으로 조금 미는 것(지정)은 그대로 둔다. */
/*  ★ 자리는 위 .chart 규칙이 정한다(오른쪽으로 14px). 여기서 auto 로 덮어쓰면
    그 밀기가 사라진다 — 실제로 한 번 그렇게 되돌아갔다. */
.chartbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  /*  ★ 안 여백 10 → 6px (2026-08-14 "지도 좀 더 크게"). 상자 안에서 그림이
      쓰는 폭이 8px 늘어난다. 테두리와 그림이 붙어 보이지 않을 만큼은 남긴다. */
  padding:6px;position:relative}
/*  ★ 한 칸이다 (2026-08-14) — 양옆 176px 은 해역 카드·어종·물때가 서 있던
    자리인데 그것들을 우측섹션으로 옮겼다. 빈 칸을 남겨 두면 지도가 352px
    좁은 채로 그려진다. */
.chartgrid{display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  gap:10px;align-items:stretch}
/*  ★ 옆 칸은 **지도보다 커지지 않는다.** min-height:0 이 없으면 flex 자식이
    제 내용만큼 자리를 요구해, 늦게 들어온 물때 내용이 칸을 늘리고 그만큼
    지도와 그 위 확대 단추가 통째로 밀렸다(실측: 본문 2009→1949px).
    안쪽 칸은 각자 제 안에서 굴린다. */
.zonecol{display:flex;flex-direction:column;justify-content:space-between;gap:10px;
  min-height:0}
.zonecol > *{min-height:0}
/*  지도 자체 — **폭에 따라 줄어든다.** 세로는 막지 않는다.
    ★ 전에는 max-height:76vh 로 세로를 막았다. 그런데 이 지도는 세로로 긴
      모양(가로:세로 = 0.64)이라, 900px 짜리 화면에서 세로를 684px 로 막으면
      그림이 그 안에 맞춰 들어가느라 **좌우로 140px 씩 빈 자리**가 생겼다.
      화면을 넓혀도 지도가 커지지 않는 이상한 상태였다(실측).
      세로를 풀면 넓힌 만큼 그대로 커지고, 못 다 보는 만큼은 스크롤한다 —
      지도는 원래 그렇게 보는 것이다. */
.chart{min-width:0;display:flex;align-items:flex-start;justify-content:center;
  position:relative}
/* ── 확대·축소 단추 ─────────────────────────────────────────────────── */
/*  ★ 지도는 칸의 92%(좁으면 96%) 폭으로 가운데 놓인다. 단추를 칸의 오른쪽
    끝에 붙이면 지도 **바깥 여백**에 뜬다(실측). 남는 여백만큼 안으로 들인다. */
.zoom{position:absolute;top:6px;right:calc(4% + 6px);z-index:5;display:flex;flex-direction:column;
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;box-shadow:0 2px 6px -2px rgba(var(--sh),.3)}
.zoom button{width:30px;height:30px;border:0;background:var(--card);cursor:pointer;
  font-family:var(--ui);font-size:15px;line-height:1;color:var(--ink);padding:0}
.zoom button:hover{background:var(--card-2);color:var(--magenta)}
.zoom button:disabled{color:#B9C6CB;cursor:default;background:var(--card)}
/*  ★ 끌 수 있다는 것을 손 모양으로 알린다. 확대했을 때만 — 처음 크기에서는
    끌어도 갈 데가 없어 커서만 바뀌면 거짓말이 된다. */
.chart.pannable svg.map{cursor:grab}
.chart.pannable svg.map:active{cursor:grabbing}
/*  ★ 조금 줄인다 (2026-08-08 지정). 칸을 꽉 채우면 지도가 화면을 밀어붙여
    옆의 해역 카드·오른쪽 상세가 곁다리처럼 보인다. 92% 로 두면 좌우에 숨 쉴
    자리가 생기고, 넓힌 서쪽 바다(서해5도 자리)도 답답하지 않다. */
/*  ★ 이제 **높이가 기준**이다 (2026-08-14). 앞서는 폭의 92% 로 그리고 높이는
    따라오게 두었는데, 칸 높이를 화면에 맞춰 놓으면 그 방식은 위아래가 남거나
    넘친다. 폭·높이를 둘 다 100% 로 주고 preserveAspectRatio(기본 meet)가
    비율을 지키게 한다 — 남는 쪽은 좌우 여백이 된다(지도가 세로로 길어서). */
/*  ★ min-height:0 이 **꼭 필요하다** — 격자(grid) 칸의 기본은 min-content 라,
    안의 그림이 제 비율만큼 높이를 요구하면 칸이 그만큼 늘어난다. 실제로
    화면 784px 짜리 칸에 848px 짜리 지도가 그려져 66px 이 넘쳤다(실측). */
/*  ★ 지도 칸을 **아래로 더 키운다** (2026-08-14 지정: "지도 영역을 하단으로
    더 키우고, 지도 자체의 위치를 우측으로 이동시켜 좌측 섹션의 중간에").
    ▣ 앞서는 비율(892.4:837.4)이 높이를 정했다 — 폭이 698 이면 높이는 655 로
      묶여, 화면이 아무리 높아도 그 이상 못 컸다.
    ▣ 이제 **높이를 먼저** 정하고 그림이 그 안에 맞춰 들어온다(preserveAspectRatio
      기본값 meet). 남는 쪽은 좌우 여백이 되는데, 그림이 그 여백 가운데에
      서므로 **칸 한가운데**에 놓인다 — 지정한 '좌측 섹션의 중간' 이 그것이다.
    ▣ 낮은 화면(노트북 768px)에서도 최소 560px 은 준다. 지도가 이 화면의
      본체라, 작아지느니 화면 밖으로 조금 넘어가는 편이 낫다. */
.chart{min-height:0;overflow:hidden;
  /*  ★ 조금 작게, 약간 오른쪽으로 (2026-08-14 지정). 높이에서 40px 을 덜고
      (150 → 190) 가운데에서 14px 만 오른쪽으로 민다 — 왼쪽에 날짜 바가
      떠 있어 눈이 왼쪽으로 쏠린다. */
  /*  ★ 좌측섹션을 **더 키운다** (2026-08-14 지정). 지도 틀이 세로로 길어졌다 —
      동쪽을 130.3°E 로 당기고 북쪽을 39°N 으로 올려 699x873(세로 1.25배)이다.
      화면 높이에서 덜어 내던 190px 을 96px 로 줄여 그만큼 세로를 준다.
      낮은 화면에서도 최소 640px 은 준다. */
  /*  ★ 오른쪽으로 밀던 14px 을 **걷었다** (2026-08-14 지정: "맵 좌우에 있는
      레이어는 제거해. 맵이 다 안 보여"). 그만큼 지도 칸이 상자 밖으로
      7px 나가 오른쪽이 잘려 보였다(실측).
      ★ 높이도 96 → 128px 을 덜어 화면 안에 들어오게 했다 — 앞서는 아래가
      23px 잘려 제주가 반쯤 보였다. */
  /*  ★ 좌우 여백을 **없앤다** (2026-08-14 신고: "지도 좌우 여백 있는 것
      해결 안되어 울릉도 독도가 안보여").
      ▣ 높이를 먼저 정하면 칸의 비율과 그림의 비율이 달라 남는 쪽에 빈 띠가
        생긴다. 그림은 그 안에서 작아지고 그만큼 섬도 작게 그려진다.
      ▣ 그래서 칸의 **비율을 그림에 맞춘다** — 서버가 준 w/h 를 그대로 심는다
        (마크업의 style 속성). 틀이 바뀌면 비율도 따라오므로 다시 어긋나지 않는다.
      ▣ 화면 높이는 **상한**으로만 남긴다 — 낮은 화면에서 아래가 잘리지 않게. */
  /*  ★ width:100% 가 있어야 한다 — 비율만 주고 폭을 안 주면 칸이 그림의
      기본 크기(300px)로 쪼그라든다(실측). 폭을 정해야 비율이 높이를 만든다. */
  /*  ★ 다시 **오른쪽으로 14px** (2026-08-14 신고: "지도의 위치가 이전으로
      돌아갔다"). 앞서는 left:14px 로 밀었다가 칸이 상자 밖으로 나가 오른쪽이
      잘렸다 — 이번에는 **폭에서 14px 을 덜고** 왼쪽 여백으로 준다.
      밀되 넘치지 않는다. */
  width:calc(100% - 14px);margin-left:14px;
  /*  ★ 머리띠가 95 → 81 → **72px** 로 낮아진 만큼 함께 내린다 (2026-08-14) —
      그러지 않으면 낮춘 몫이 빈칸으로 남고 지도는 그대로다. */
  max-height:calc(100dvh - 105px)}
.chart svg.map{display:block;width:100%;height:100%}
/*  ★ 1360px 아래에서 카드를 지도 아래로 내린다 (980px 이 아니다).
    1100~1360 구간은 오른쪽 상세 칸(340px)과 해역 카드 두 줄(352px)이 **동시에**
    폭을 먹어, 지도가 384px 까지 눌렸다(실측). 지도가 이 화면의 본체인데
    곁것들에 밀려 손톱만 해지면 아무것도 못 읽는다.
    카드는 지도 아래에서도 제 몫을 한다 — 지도는 그렇지 않다. */
@media (max-width:1560px){
  /*  카드를 지도 아래로 내리고 넷을 나란히 둔다 —
      귀퉁이에 붙이려다 지도를 덮으면 정작 항구가 안 보인다.
      ★ 두 칸(왼쪽·오른쪽)을 display:contents 로 **없앤다**. 그래야 네 카드가
        한 줄의 형제가 되어 순서를 다시 매길 수 있다. 칸을 그대로 두면
        '서해·제주 / 동해·남해' 로 묶여 읽히는데, 세로로 세우면 그 묶음이
        뜻을 잃고 제주가 남해보다 먼저 나온다.
      ★ 순서는 **서해 → 남해 → 동해 → 제주** — 본토를 시계 방향으로 돈 뒤
        섬을 마지막에 둔다. 사람들이 바다를 부르는 순서다. */
  .chartgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr))}
  .zonecol{display:contents}
  .chart{order:-1;grid-column:1/-1}
  .zone[data-zone="서해"]{order:1}
  .zone[data-zone="남해"]{order:2}
  .zone[data-zone="동해"]{order:3}
  .zone[data-zone="제주"]{order:4}
  /*  어종 칸은 한 줄을 통째로 쓴다(칩을 눕히는 규칙은 .fishbox 정의 **뒤**에
      따로 둔다 — 여기 적으면 뒤에 오는 규칙에 진다. 실측으로 겪었다). */
  .fishbox{grid-column:1/-1;order:5}
  .rankbox{grid-column:1/-1;order:7}
}
@media (max-width:560px){ .minirank{columns:1} }

.sea{fill:var(--deep)}
/*  해안 언저리의 옅은 파랑 — 실제 해도의 '얕은 물' 채색이다.
    뭍 도형을 두껍게 그려 그 테두리를 얕은 물로 쓴다(따로 도형을 안 만든다). */
.shoal{fill:none;stroke:var(--shallow);stroke-width:6;stroke-linejoin:round}
/*  ★ 시도마다 채워 그린다 — 바깥 테두리가 해안선, 안쪽 맞닿는 선이 행정 경계.
    경계선은 해안선보다 **연하게**. 진하면 도 경계가 강처럼 보여, 바다와 뭍을
    가르는 선(해안선)과 헷갈린다. */
.land{fill:var(--land);stroke:#BBA97F;stroke-width:.6;stroke-linejoin:round}
/*  ★ 시도를 누를 수 있다 (2026-09-23) — 누르면 오른쪽 칸이 그 지역 항구 목록이 된다.
    ▣ 손이 올라간 시도만 살짝 밝힌다. 진하게 칠하면 바다(조황 점)보다 눈에 띄어
      지도의 주인공이 바뀐다 — 여기서 뭍은 **배경**이다.
    ▣ 키보드 포커스는 **보이게** 한다(이 집안 규칙). 점선 테두리 대신 굵은 선으로
      그려 SVG 안에서도 또렷하다. */
.land path{cursor:pointer;transition:fill .12s ease}
.land path:hover{fill:#F0E4C4}
/*  ★ 눌렀을 때 생기던 **까만 네모를 걷는다** (2026-09-23 지시: "맵 클릭 후
    나타나는 지역 선택 박스는 제거해"). 시도에 tabindex 를 달자 크롬이 마우스로
    눌러도 제 기본 포커스 테두리를 그렸는데, SVG 에서 그 테두리는 도형이 아니라
    **도형을 감싼 네모**로 나온다 — 지도 위에 경남을 통째로 두른 검은 상자가
    그것이었다(실측). `:focus-visible` 에만 outline:none 을 둔 탓에 마우스
    누름(`:focus`)은 걸러지지 않았다.
    ▣ 키보드 포커스는 그대로 보인다 — 아래 :focus-visible 이 네모 대신
      **그 시도의 윤곽**을 굵게 그린다(이 집안 규칙: 포커스는 보이게). */
.land path:focus{outline:none}
.land path:focus-visible{outline:none;fill:#F0E4C4;stroke:var(--magenta,#c0397f);stroke-width:1.6}
@media (prefers-reduced-motion:reduce){ .land path{transition:none} }
.isledot circle{fill:var(--land);stroke:var(--land-edge);stroke-width:.5}
/*  북한 — 속을 비우고 **점선**으로만. 우리 자료가 없는 땅이라는 표시다.
    ★ 채우지 않는 것이 핵심이다. 담황으로 채우면 남한과 한 덩어리로 보여
      "여기도 조황을 아는 땅" 이 되어 버린다.
    ★ 점선 간격을 성기게(3/2.6) 둔다. 촘촘하면 실선처럼 보여 해안선과 섞인다. */
.north path{fill:none;stroke:#A99A76;stroke-width:1;stroke-dasharray:3 2.6;
  stroke-linejoin:round;opacity:.8}
.north text{fill:#9A8B6A;font-family:var(--ui);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-anchor:middle}
.grat{stroke:#D9E7EA;stroke-width:.7}
/*  ★ 눈금 글씨를 **읽히게** 고쳤다 (2026-08-14). 8.5px 에 #94AEB5 는 바다
    위에서 거의 안 보였다(실측 화면에서 눈에 안 들어온다).
    ▣ 한 치수 키우고 한 단 진하게.
    ▣ ★ 흰 테두리를 두른다(paint-order:stroke) — 눈금선이나 섬 위에 글씨가
      겹쳐도 읽힌다. 글자 뒤에 상자를 깔면 지도가 지저분해진다. */
.gratlbl{fill:#5E7F89;font-family:var(--mono);font-size:9.5px;
  paint-order:stroke;stroke:#fff;stroke-width:2.6px;stroke-linejoin:round}
/*  도시 — 바다가 주인공이라 뒤로 물러난다. 점만 찍고 크게 쓰면 육지 지도가 된다. */
.city circle{fill:#9A8B6A}
.city text{fill:#6B5E44;font-family:var(--ui);font-size:8.5px}
.city.major text{font-size:10px;font-weight:700;fill:#544829}
.city.major circle{fill:#7A6A47}
/*  작은 섬 이름표 — 도시보다 한 뼘 더 물러난다. 바다 위의 글씨라 흐리면
    바탕과 붙어 안 읽히므로 색은 도시와 같게 두고 크기만 줄인다. */

/*  큰 섬 이름 — 뭍 위에 얹히므로 담황과 갈리게 조금 진하게, 다만 도시보다 작게 */
.isllbl text{fill:#7A6A47;font-family:var(--ui);font-size:8.5px;font-weight:700;
  paint-order:stroke;stroke:rgba(230,220,194,.85);stroke-width:2.4;
  stroke-linejoin:round}

.pt{fill:var(--water);fill-opacity:.42;stroke:#fff;stroke-width:1;cursor:pointer;
  transition:fill-opacity .12s}
.pt:hover,.pt:focus-visible{fill-opacity:.95}
.pt.hot{fill:var(--hot);fill-opacity:.8;stroke-width:1.2}
.pt.on{fill:var(--magenta);fill-opacity:1;stroke:#fff;stroke-width:2}
.lbl{cursor:pointer}
.lbl text{fill:var(--ink);font-family:var(--ui);font-size:11.5px;font-weight:700}
.lbl .cnt{fill:var(--dim);font-family:var(--mono);font-size:9.5px;font-weight:400}
.lbl:hover text{fill:var(--magenta)}
/*  ★ 장식은 **손을 타지 않는다**. 물고기 그림·도시·섬 이름·경위선은 항구 점보다
    뒤에 그려지는데(위에 얹힌다), 그대로 두면 클릭을 가로챈다 —
    확대했을 때 물고기가 커지면서 항구를 덮어 눌러도 안 열렸다(실측).
    이름표(.labels)는 예외다 — 그건 눌러야 하는 것이다. */
.fish,.city,.isllbl,.isledot,.gratlbl,.grat,.shoal,.north,.inset{pointer-events:none}
.fish{color:var(--hot)}

/*  ★ 여기에 **지도 확대·축소 자바스크립트가 통째로 들어와 있었다**
    (79줄, 2026-08-09 실측으로 발견 · 아래 스크립트 쪽에 같은 코드가 이미 있는
     묵은 사본이었다).
    ▣ 그것이 무엇을 망가뜨렸나
      CSS 파서가 그 자바스크립트를 삼키면서 **바로 뒤의 `.tip{…}` 규칙까지
      함께 날려 버렸다.** 그래서 도움말 상자가 position:fixed 를 못 받고
      보통 블록으로 흐름에 끼었고, 항구에 마우스를 올릴 때마다
      **문서가 상자 높이(59px)만큼 늘어나며 지도와 그 아래가 통째로 밀렸다** —
      '해도에 마우스를 올리면 화면이 떨린다' 의 정체다.
    ★ 오류가 하나도 안 난다. 브라우저는 style 안의 이상한 것을 조용히 버린다 —
      계산된 스타일(position: static 이었다)을 직접 재고서야 드러났다.
    ★ 스타일 안에 스타일 아닌 것이 있으면 **그 뒤의 규칙이 같이 죽는다.** */

/* ── 지도 툴팁 ──────────────────────────────────────────────────────── */
.tip{position:fixed;z-index:60;pointer-events:none;
  background:var(--ink);color:#F2F7F8;border-radius:6px;padding:6px 9px;
  font-family:var(--mono);font-size:11.5px;line-height:1.5;white-space:nowrap;
  box-shadow:0 10px 24px -10px rgba(var(--sh),.7);
  /*  점 **위쪽**에 뜬다. 아래에 두면 손가락·커서가 가린다. */
  transform:translate(-50%,calc(-100% - 10px))}
.tip b{color:#fff;font-family:var(--ui);font-size:13px;font-weight:700}
.tip s{all:unset;display:block;color:#A9C4CC;font-size:10.5px}
/*  꼬리 — 어느 점을 가리키는지 못박는다. 점이 몰린 곳에서 이것이 없으면
    옆 점의 이름으로 읽는다. */
.tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink)}
/*  위에 자리가 없어 아래로 뒤집힌 경우 — 꼬리도 따라 뒤집는다 */
.tip.down::after{top:auto;bottom:100%;border-top-color:transparent;
  border-bottom-color:var(--ink)}
/*  곁그림(독도) — 자리를 옮기고 확대해 그린 칸이라는 것을 테두리가 말한다.
    ★ 2026-08-18 — 실제로 쓰기 시작했다(그전에는 규칙만 있고 쓰는 곳이 없었다).
      쓰는 자리는 지도의 독도 상자 하나뿐이다 — 울릉도는 제자리에 그대로 있어
      상자가 필요 없다(운영자 지시: "울릉도는 그대로 두고 독도만 구분"). */
/*  ★ 테두리는 **실선**이다 (2026-08-18 재지시: "실선으로 해").
    처음에는 점선으로 뒀다 — 북한·대마도의 점선이 "자료가 대략이다" 를 뜻하듯
    "자리가 어긋난다" 를 같은 말로 하려던 것이었다. 다만 이 칸은 23~48px 로
    작아 점선이 부스러기처럼 보였다. 실선 한 겹이 상자를 더 또렷이 세운다 —
    '따로 그린 칸' 이라는 뜻은 상자가 있다는 것만으로 이미 선다. */
.inset rect{fill:var(--deep);stroke:var(--line);
  /*  바다 위에 뜨는 칸이라 살짝 비쳐야 아래 경위선이 끊긴 티가 덜 난다 */
  fill-opacity:.72}
.inset text.cap{fill:var(--dim);font-family:var(--mono);font-size:8px}
/*  상자 안의 독도 — 서도·동도 **두 섬**을 실제 넓이(0.19㎢)보다 크게 그린다.
    이 축척에서 제 크기로 그리면 한 픽셀도 안 되어 사라지기 때문이고,
    키워 그렸다는 사실은 점선 상자가 말한다. */
.inset circle.dok{fill:var(--land);stroke:var(--land-edge);stroke-width:.6}
/*  이름은 **울릉도와 같은 서체**로 (2026-08-18 재지시: "독도라는 글자는
    울릉도 서체랑 같은 크기로"). 곧 섬 이름표(.isllbl)와 같은 값이다 —
    굵기와 바탕 테두리(paint-order:stroke)까지 맞춰야 바다 위에서 같은
    글씨로 읽힌다. 크기만 같고 굵기가 다르면 다른 급으로 보인다. */
.inset text.nm{fill:#7A6A47;font-family:var(--ui);font-size:8.5px;font-weight:700;
  paint-order:stroke;stroke:rgba(230,220,194,.85);stroke-width:2.4;
  stroke-linejoin:round}

/* ── 물고기 그림 ────────────────────────────────────────────────────── */
/*  currentColor 로 그린다 — 쓰는 자리마다 색을 정할 수 있다. */
.f{fill:currentColor}
.f-l{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.f-eye{fill:#fff}

/* ── 해역 카드 ──────────────────────────────────────────────────────── */
.zone{background:var(--card-2);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:10px 11px;cursor:pointer;text-align:left;font:inherit;color:inherit;
  display:block;width:100%}
.zone:hover{border-color:var(--magenta)}
.zone.on{border-color:var(--magenta);background:#FBF3F8}
.zone .zh{display:flex;align-items:baseline;gap:7px;margin-bottom:6px}
.zone .zh b{font-size:14px;font-weight:800}
.zone .zh s{all:unset;font-family:var(--mono);font-size:10.5px;color:var(--water);
  font-weight:700}
.zone .zh i{all:unset;margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--dim)}
.mrow{display:grid;grid-template-columns:30px 1fr auto;gap:5px;align-items:center;
  font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-bottom:3px}
.mrow b{color:var(--ink);white-space:nowrap}
.bar{height:8px;border-radius:4px;background:#D6E3E7;position:relative;overflow:hidden}
.bar::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);
  background:var(--water);border-radius:4px}
.bar.wind::before{background:#7A8FA8}
.bar.wave::before{background:#3E6E8E}
.bar.idx::before{background:var(--good)}
.bar.idx.bad::before{background:var(--hot)}
.bar.full::before{border-radius:4px 0 0 4px}     /* 자를 넘어 잘렸다는 표시 */
.zone .zf{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:5px}
.zone .zf b{color:var(--ink)}

/*  ── 물때 날짜 고르개 · 달력 (naksigo 에서 옮김 — 2026-08-09 지정) ────
    ★ 해도는 '내일' 만 보여 주던 자리였다. 나가는 날은 사람마다 다르니
      제목 옆 날짜를 눌러 그날로 갈아 끼울 수 있어야 한다.
    ★ 여기는 **스타일 자리**다 — 자바스크립트를 섞으면 뒤 규칙이 통째로
      죽는다(오늘 그것 때문에 .tip 이 날아가 화면이 떨렸다). */
/* ── 물때 날짜 고르개 (2026-08-09 지정) ──────────────────────────────
   ★ 제목 옆 날짜가 **누를 수 있는 것**으로 보여야 한다. 점선 밑줄 하나면
     충분하다 — 알약을 두면 제목보다 단추가 먼저 읽힌다. */
.daypick{border:0;background:none;cursor:pointer;padding:0 2px;margin-left:2px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--water);
  border-bottom:1px dotted var(--water)}
.daypick:hover{color:var(--sonar-ink);border-bottom-color:var(--sonar-ink)}
/*  ★ 날짜 바 아래에 뜬다 — 바가 좁으므로 오른쪽 끝을 풀고 너비를 준다.
    ★ 여기에 있던 `#daybar{position:relative}` 를 걷었다 (2026-08-14 실측).
      id 셀렉터가 아래 `.daybar{position:absolute}` 를 이겨서, 바가 지도 위로
      떠오르지 못하고 한 줄을 통째로 차지하고 있었다(폭 712px). 달력은
      absolute 인 바 자체를 기준으로 뜨므로 relative 를 따로 줄 까닭이 없다. */
#daybar .calpop{left:50%;right:auto;top:40px;width:min(300px, 86vw);
  transform:translateX(-50%)}
/*  ★ 살짝 비치게 (2026-08-14 지정: "캘린더에 약간 투명도를 조정해").
    지도 위에 뜨는 층이라, 뒤가 어렴풋이 비치면 '지도 위에 잠깐 올라온 것'
    으로 읽힌다 — 완전히 불투명하면 화면이 바뀐 것처럼 느껴진다.
    ▣ 글자는 흐려지면 안 된다 — 상자만 반투명(85%, 2026-08-14 지정)으로 두고
      **뒤를 흐린다**(backdrop-filter). 흐림을 못 쓰는 브라우저에서도 읽힌다.
      해역 쪽지는 **95%** 로 한 단 더 채웠다(2026-08-14 지정) — 그 위에 글자가
      작고 촘촘해, 뒤가 비치면 숫자가 읽히지 않는다. */
.calpop{position:absolute;z-index:40;left:10px;right:10px;top:38px;
  /*  ★ --hull 은 이 화면에 없는 이름이다 — color-mix 가 통째로 무효가 되어
      배경이 **완전히 투명**해졌다(실측 rgba(0,0,0,0)). 있는 이름(--card)과
      기본값을 함께 쓴다. */
  background:color-mix(in srgb, var(--card, #fff) 85%, transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:10px;
  padding:10px 10px 8px;box-shadow:0 16px 40px -12px rgba(var(--sh),.45)}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.calhead b{font-size:13px;color:var(--lamp)}
.calhead button{border:1px solid var(--line);background:var(--hull);color:var(--ink);
  width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:14px;line-height:1}
.calhead button:disabled{opacity:.3;cursor:default}
.calwk,.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calwk span{text-align:center;font-size:10.5px;color:var(--dim);padding:2px 0}
.calwk span:first-child{color:var(--sonar-hot)}
.calgrid button{border:0;background:none;cursor:pointer;border-radius:6px;
  padding:5px 0;font-family:var(--mono);font-size:12px;color:var(--ink)}
.calgrid button:hover:not(:disabled){background:var(--hull-2)}
.calgrid button:disabled{color:var(--line);cursor:default}
/*  ★ 오늘은 테두리로, 고른 날은 채워서. 색만 다르게 하면 어느 쪽이 '고른 것'
    인지 헷갈린다 — 채워진 쪽이 고른 것이다. */
.calgrid button.today{box-shadow:inset 0 0 0 1px var(--water)}
.calgrid button.on{background:var(--sonar);color:var(--on-sonar);font-weight:700}
.calnote{margin:8px 0 0;font-size:10.5px;color:var(--dim);line-height:1.5}

/*  ★ 폰 터치 (2026-08-19 — m.onfishing.net 재건) — 지도 위 세로 스크롤은
    브라우저에게 남기고(pan-y), 두 손가락(핀치)·확대 중 끌기는 우리가 받는다.
    확대하지 않은 지도에 손을 대도 화면 스크롤이 죽지 않는다. */
.chart svg.map{touch-action:pan-y}
.chart.pannable svg.map{touch-action:none}

/*  ── 확대·축소의 최종 자리 (2026-08-19 chart.php 에서 옮김 — 폰과 한 벌) ──
    ★ 앞의 .zoom 규칙(오른쪽 위·세로)보다 **뒤·구체적**이어야 이긴다.
    top 을 풀지 않으면 top·bottom 이 함께 걸려 칸이 세로로 688px 까지 늘어난다
    (실측). 높이는 내용만큼만.
    ★ 자리는 그대로 둔다 (2026-08-14: "출력위치와 확대·축소 아이콘 위치는
    그대로 두고") — 메모가 아래(34px), 확대·축소가 그 위(66px)다. */
@media (max-width:1560px){ .zoom{right:calc(2% + 6px)} }
.chartbox .zoom{top:auto;bottom:66px;right:14px;left:auto;
  flex-direction:row;height:auto;gap:1px}
/*  ★ 좁은 폭에서만 **왼쪽 아래로 비켜 선다** (2026-09-03 지시로 고침) ──────
    ▣ 무엇이 문제였나 — 560px 이하에서 해역 쪽지는 첫 줄만 남는다(spec §2-1:
      해역·몇물·**지수**). 그런데 남해 쪽지가 바로 이 확대·축소 아래에 깔려
      그 **지수 글자가 통째로 가려졌다**(실측 2026-09-03: 390px 겹침 39×25px
      중 지수 글자 31.5/32px · 360px 54×17px 중 32/32px). 남기기로 한 세 가지
      중 하나가 안 보이니 규칙이 스스로 어긋나 있었다.
    ▣ 왜 **쪽지가 아니라 단추**를 옮기나 — 쪽지의 자리는 **뜻이 있다.**
      위경도로 적어 그 바다 위에 떠 있어야 하고(§2-1), 그래서 옮기면 남해
      쪽지가 남해 위에 없게 된다. 확대·축소의 자리는 뜻이 없다 — 아무것도
      가리지만 않으면 된다. 뜻 없는 쪽을 옮긴다.
    ▣ 데스크톱은 **그대로**다(§2-4 의 "확대·축소 아이콘 위치는 그대로 두고").
      560px 이하에서만 좌우가 바뀐다 — 그 폭의 왼쪽 아래는 진도 남서쪽
      먼바다라 항구 점·이름표가 없다(실측으로 골랐다).
    ▣ `:has(.seatide)` 로 **쪽지가 있는 화면에서만** 비킨다. 폰 앱
      (m.onfishing.net)은 2026-08-20 지시로 쪽지를 아예 안 그리므로 옮길
      까닭이 없다 — 그쪽 단추는 오른쪽 아래 그대로다. `:has()` 를 모르는
      브라우저는 이 규칙 하나만 버리고 예전과 똑같이 그린다. */
@media (max-width:560px){
  .chartbox:has(.seatide) .zoom{left:14px;right:auto}
}

/* ── 어종 칸 (지도 옆) ──────────────────────────────────────────────── */
/*  ★ 넓은 화면에서는 **세로 목록**이다. 176px 칸에 칩을 가로로 늘어놓으면
    두 글자마다 줄이 바뀌어 읽기 어렵다. 세로로 세우면 한 줄에 하나씩,
    이름과 수가 자리를 맞춰 서로 견줄 수 있다.
  ★ 좁은 화면에서는 다시 가로로 눕는다(아래 media). 세로로 두면 열 줄이
    화면 한 판을 통째로 먹는다. */
.fishbox{background:var(--card-2);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:9px 10px;flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column}
.fishbox h3{margin:0 0 7px}
.fishbox h3 .cnt{margin-left:auto;font-family:var(--mono);font-size:10px;
  color:var(--dim);font-weight:400}
.fishbox .chips{flex-direction:column;align-items:stretch;gap:4px;
  overflow:auto;min-height:0}
.fishbox .chip{border-radius:var(--r-sm);padding:5px 8px;min-height:30px;
  display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:7px;align-items:center}
.fishbox .chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:left}
.fishbox .hint{margin:7px 0 0;font-family:var(--mono);font-size:9.5px;
  color:var(--dim);line-height:1.5}
/*  ★ 좁은 화면 — 칩을 다시 가로로 눕힌다. 세로로 두면 열 줄이 화면 한 판을
    통째로 먹는다. 이 블록은 **위 .fishbox 규칙 뒤**에 있어야 이긴다
    (같은 자세함이면 뒤가 이긴다 — 앞쪽 media 에 적었다가 안 먹혔다). */
@media (max-width:1560px){
  .fishbox{display:block}
  /*  ★ .zoom 위치 보정은 공용 조각(_chartmap_css.php)으로 옮겼다 (2026-08-19)
      — 지도 규칙이라 폰과 한 벌이어야 한다. */
  /*  순위 목록은 한 줄을 통째로 쓰고 **두 단**으로 흐른다 —
      세로로 14줄이면 화면 한 판을 먹는다. */
  .rankbox{display:block}
  .minirank{overflow:visible;columns:2;column-gap:14px}
  .minirank li{break-inside:avoid}
  .fishbox .chips{flex-direction:row;flex-wrap:wrap;align-items:center;overflow:visible}
  .fishbox .chip{display:inline-flex;min-height:32px}
  .fishbox .chip .nm{white-space:nowrap}
}

/* ── 조황 상위 (지도 옆) ────────────────────────────────────────────── */
/*  ★ 176px 짜리 칸이다. 오른쪽 칸에 있던 넓은 목록을 그대로 가져오면 이름이
    두 글자마다 잘린다. 한 줄에 **순위·이름·건수**만 두고 어종·지역은 아랫줄로.
    좁은 칸에서는 **덜 적는 것**이 더 읽힌다 — 어종은 그림으로, 지역은 두 글자로. */
.rankbox{background:var(--card-2);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:9px 10px;flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column}
.rankbox h3{margin:0 0 6px}
.rankbox h3 .cnt{margin-left:auto;font-family:var(--mono);font-size:10px;
  color:var(--dim);font-weight:400}
.minirank{list-style:none;margin:0;padding:0;overflow:auto;min-height:0;flex:1 1 auto}
.minirank li{border-bottom:1px solid var(--line-soft)}
.minirank li:last-child{border-bottom:0}
.minirank button{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:1px 6px;
  width:100%;text-align:left;background:none;border:0;padding:5px 2px;cursor:pointer;
  font:inherit;color:inherit;border-radius:var(--r-sm);align-items:baseline}
.minirank button:hover{background:var(--card)}
.minirank .rk{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.minirank li:first-child .rk{color:var(--hot);font-weight:700}
.minirank .nm{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.minirank .n{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--water)}
.minirank .sp{grid-column:2/-1;display:flex;gap:3px;align-items:center;color:var(--water)}
.minirank .sp .ic{width:15px;height:10px;display:inline-block;flex:0 0 auto}
.minirank .sp .ic svg{width:100%;height:100%;display:block}
.minirank .sp em{font-style:normal;margin-left:auto;font-family:var(--mono);
  font-size:9.5px;color:var(--dim)}
.rankbox .hint{margin:6px 0 0;font-family:var(--mono);font-size:9.5px;color:var(--dim);
  line-height:1.5}


/* ── 어종 칩 ────────────────────────────────────────────────────────── */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;font-size:12.5px;color:var(--ink-soft);cursor:pointer;min-height:32px;
  display:inline-flex;align-items:center;gap:6px;font-family:var(--ui)}
/*  ★ 「이 항구의 어종」의 칩만 조금 작다 (2026-08-28 지시). 12.5px → 11.5px,
    안쪽 여백과 높이도 한 단계씩. 누를 자리는 28px 로 남긴다 — 더 줄이면
    마우스로 겨누기가 힘들어진다. */
.chips.portfish{gap:5px}
.chips.portfish .chip{font-size:11.5px;padding:4px 9px;min-height:28px}
/*  ★ 「이 배의 주 어종」 칩도 한 단 낮춘다 (2026-09-02 지시: "선박정보의
    내용에서 어종의 아이콘 높이를 줄여줘"). 위 `portfish` 와 **같은 값**이다 —
    같은 칸에 선 같은 칩이 자리마다 다른 크기면 그것이 어긋난 것이다.
    ▣ ★ 낮추는 것은 **높이와 여백뿐**이다. 글자 크기는 11.5px 로 두어 받침이
      잘리지 않는다(광어·볼락·갈치·주꾸미로 찍어 확인했다) — 줄 높이를 더
      조이면 한글은 받침부터 먹힌다.
    ▣ ★ 이 칩은 **누를 수 있는 손잡이**다(data-fish → 어종 상세). 그래서
      28px 아래로는 내리지 않는다 — 마우스로 겨누기가 힘들어진다(portfish
      주석의 그 판단 그대로다).
    ▣ 여럿일 때 줄바꿈은 그대로다(.chips 가 flex-wrap 이다). 어종이 없으면
      이 칸 자체가 안 그려진다(`if (d.main_species)`).
    ▣ ★ 이 값은 조과 분석 손잡이의 한 벌 값(--btbtn-*)과 **다른 것**이다 —
      어종 칩은 그 손잡이가 아니다. 그 값을 건드리지 않는다. */
.chips.boatfish{gap:5px}
.chips.boatfish .chip{font-size:11.5px;padding:4px 9px;min-height:28px}
.chip:hover{border-color:var(--magenta);color:var(--magenta)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.chip .ic{width:17px;height:11px;display:inline-block;color:inherit}
.chip .ic svg{width:100%;height:100%;display:block}
.chip s{all:unset;font-family:var(--mono);font-size:10px;opacity:.65}

/* ── 상위 항구 목록 ─────────────────────────────────────────────────── */
ol.rank{list-style:none;margin:0;padding:0}
ol.rank li{border-bottom:1px solid var(--line-soft)}
ol.rank li:last-child{border-bottom:0}
ol.rank button{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:2px 10px;
  align-items:baseline;width:100%;text-align:left;background:none;border:0;
  padding:9px 4px;cursor:pointer;font:inherit;color:inherit;border-radius:var(--r-sm)}
ol.rank button:hover{background:var(--card-2)}
ol.rank .rk{font-family:var(--mono);font-size:12px;color:var(--dim)}
ol.rank li:first-child .rk{color:var(--hot);font-weight:700}
ol.rank .nm{font-weight:700;font-size:14px}
ol.rank .nm s{all:unset;display:block;font-family:var(--mono);font-size:10.5px;
  color:var(--dim);font-weight:400}
/*  ★ 한 줄짜리 순위 목록 (2026-09-23 지시) — 이름 옆에 시군구를 붙인다.
    좁아지면 시군구가 먼저 말줄임된다(이름이 먼저 읽혀야 한다). */
/*  항구별 예약정보로 가는 길 — 작게, 여러 줄로 접힌다(누르는 자리는 위 목록이다). */
.bklinks{display:flex;flex-wrap:wrap;gap:4px 10px;margin:14px auto 0;padding:0 14px;
  max-width:1200px;font-size:11.5px;line-height:1.8;align-items:baseline}
.bklinks b{font-weight:600;color:var(--ink);font-size:12px}
.bklinks a{color:var(--dim);text-decoration:none;border-bottom:1px dotted var(--line)}
.bklinks a:hover{color:var(--magenta,#c0397f)}
ol.rank.oneline .nm{display:flex;align-items:baseline;gap:6px;min-width:0}
ol.rank.oneline .nm s{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ol.rank .n{text-align:right;font-family:var(--mono);font-size:15px;font-weight:700;
  color:var(--water);white-space:nowrap}
ol.rank .n s{all:unset;font-size:10px;color:var(--dim);font-weight:400;margin-left:2px}
ol.rank .sp{grid-column:2/-1;display:flex;gap:3px 9px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:10.5px;color:var(--water)}
ol.rank .sp .ic{width:17px;height:11px;display:inline-block;vertical-align:-1px}
ol.rank .sp .ic svg{width:100%;height:100%;display:block}

/* ── 오른쪽 상세 ────────────────────────────────────────────────────── */
/*  ★ 종류 딱지(.kind)는 **모두 걷었다** (2026-08-14 지정: "타이틀 위에 추가한
    kind class 의 내용은 모두 제거"). 제목이 이미 무엇인지 말하고, 차림표의
    켜진 칸도 그것을 말한다 — 같은 말을 세 번 적을 자리가 아니었다.
    ★ 제목의 위 여백을 7 → 0 으로 내린다. 딱지가 서 있던 자리다. */
.dtitle{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12.5px;margin:10px 0}
dt{color:var(--dim);white-space:nowrap}
dd{margin:0;word-break:break-word}
dd b{font-family:var(--mono);color:var(--water)}
.guide{font-size:13px;line-height:1.85;color:var(--ink-soft);white-space:pre-wrap;
  margin:10px 0 0}
.guide b{color:var(--ink)}
.srcline{margin:10px 0 0;font-size:10.5px;color:var(--dim);line-height:1.6}
.warnline{color:var(--warn)}
.ghost{color:var(--dim);font-size:13px}
/* ── 항구의 낚시배 목록 ─────────────────────────────────────────────── */
/*  ★ 한 항구에 142척이 있다. 이름만 죽 늘어놓으면 읽히지 않아, 두 줄로 접어
    **조황글이 있는 배**를 앞에 세운다 — 이 화면에 온 사람이 찾는 것은
    "요즘 나가는 배" 이지 등록만 되어 있는 배가 아니다. */
.boats{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);overflow:hidden;margin-top:6px}
.boats button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;
  align-items:baseline;background:var(--card);border:0;padding:7px 9px;cursor:pointer;
  font:inherit;color:inherit;text-align:left}
.boats button:hover{background:var(--card-2)}
.boats .bn{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.boats .bc{font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap}
.boats .bs{grid-column:1/-1;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
/*  조황글이 있는 배 — 점 하나로 표시한다. 글자를 더 넣으면 줄이 길어진다. */
.boats .live{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--hot);margin-right:5px;vertical-align:1px}
/* ── 주변 주차장 ────────────────────────────────────────────────────── */
/*  ★ 새벽에 배를 타러 가는 사람에게 주차는 **출발 전에 정하는 것**이다.
    항구에 닿아서 찾기 시작하면 배는 이미 나간다. 그래서 가까운 순으로 세우고,
    무료·유료를 한눈에 갈라 준다.
  ★ 거리(255m)와 면수(577면)를 같이 준다 — 가깝지만 20면짜리면 새벽엔 못 댄다.
    둘 중 하나만으로는 고를 수 없다. */
.lots{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);overflow:hidden;margin-top:6px}
.lots .row{background:var(--card);padding:7px 9px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:baseline}
.lots .ln{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.lots .ld{font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap}
.lots .lm{grid-column:1/-1;font-family:var(--mono);font-size:10.5px;color:var(--dim);
  display:flex;gap:3px 8px;flex-wrap:wrap;align-items:center}
/*  무료/유료 — 색만으로 가르지 않는다. 글자가 이미 '무료'·'유료' 다.
    색은 그 위에 얹는 표시일 뿐이라 색을 못 봐도 읽힌다. */
.lots .free{color:var(--good);font-weight:700}
.lots .paid{color:var(--warn);font-weight:700}

/* ── 항구의 선사 목록 ───────────────────────────────────────────────── */
/*  ★ 선사는 **눌러서 더 볼 것이 없다**(추론 서버가 선사 상세를 주지 않는다).
    그래서 줄을 손잡이로 만들지 않고, 정작 필요한 것을 줄 안에 바로 둔다 —
    전화와 예약. 선사를 찾는 사람은 설명을 읽으러 오는 것이 아니라
    **전화를 걸러** 온다. */
.comps{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);overflow:hidden;margin-top:6px}
.comps .row{background:var(--card);padding:7px 9px}
.comps .cn{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.comps .cl{display:flex;gap:4px 10px;flex-wrap:wrap;align-items:center;margin-top:2px;
  font-family:var(--mono);font-size:10.5px}
.comps .cl a{color:var(--water);text-decoration:none;border-bottom:1px solid var(--magenta-soft)}
.comps .cl a:hover{color:var(--magenta);border-color:var(--magenta)}
.comps .cl .none{color:var(--dim)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--water);
  cursor:pointer;border-bottom:1px solid var(--magenta-soft)}

/*  ── 배 · 선장 · 사무장 목록 (naksigo.com 참조, 2026-08-17 지시) ──────────
    ★ naksigo.com 의 `.detail ul` 과 같은 결 — 이 화면(#detail)에는 여느
      목록에 <ul> 을 쓰지 않아(모두 .boats·.comps·.lots grid) 이 칸만의 자리다. */
#detail ul{list-style:none;margin:6px 0 0;padding:0}
#detail ul li{padding:5px 0;border-bottom:1px dashed var(--line-soft);font-size:12.5px}
#detail ul li:last-child{border-bottom:0}

/*  ── 항구 상세의 접이 목록 — 주변 주차장·낚시배·선사 (2026-08-17 지시) ───
    "주변 주차장은 접기 상태로 표시하고, 낚시배와 선사는 5개 이내면 리스트로
     바로 표현하나 넘어가면 접기 상태로 표시" — 네이티브 <details> 를 쓴다.
    ★ #detail 은 매번 새로 그려지는 동적 콘텐츠라, 전역 foldCard()/FOLD_EL
      (#rankcard·#todaycard 전용, id 고정)을 그대로 재사용하기 어렵다.
    ★ summary 톤은 h3(모노 11px·자간 .12em·var(--water)·굵게)에 맞춘다 —
      화살표만 물때 카드의 .tmore 와 같은 방식(▸ 를 90도 돌려 ▾ 처럼 보이게).
      <details> 기본 삼각형 마커는 지운다(::-webkit-details-marker). */
details.detsec{margin-top:16px}
details.detsec > summary{cursor:pointer;list-style:none;user-select:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--water);
  font-weight:700;display:flex;align-items:baseline;gap:7px;min-height:22px}
details.detsec > summary::-webkit-details-marker{display:none}
/*  ★ 손잡이를 **맨 오른쪽**에 둔다 (2026-08-28 지시: "펼침, 접기 버턴을 맨
    우측에 추가해"). 여태 제목 왼쪽에 있었다.
    ▣ ::before 에서 ::after 로 옮긴 것뿐이다 — 줄의 차례가 제목 · (빈 자리) ·
      건수 · 손잡이가 되어, 눈이 왼쪽에서 제목을 읽고 오른쪽 끝에서 '여닫는
      자리' 를 만난다. 세 칸(낚시배·좌대·선사)의 손잡이가 **세로로 한 줄에
      맞춰** 서는 것도 오른쪽 정렬이라야 얻어진다.
    ▣ 화살표는 접혔을 때 ▸, 펴지면 90도 돌아 ▾ 로 보인다(예전과 같다). */
/*  ★ 손잡이를 **2배로 키웠다** (2026-08-28 지시: "펼침,닫기 아이콘을 지금의
    2배로 키워줘") — 10px → 20px. 주변 주차장·낚시배·좌대·선사 네 칸이 이
    한 규칙을 함께 쓴다.
    ▣ ★ 줄 높이를 1 로 못 박고 baseline 대신 **가운데**로 맞춘다. 이 summary 는
      `align-items:baseline` 인데, 글자 크기가 두 배가 되면 그 글자의 baseline 이
      제목보다 훨씬 아래로 내려가 줄 전체가 아래로 밀린다(제목·건수가 위로
      떠 보인다). `align-self:center` 로 그 칸만 빼낸다.
    ▣ 커진 만큼 왼쪽 여백을 조금 준다 — 건수 글자에 붙어 보이지 않게. */
details.detsec > summary::after{content:"▸";color:var(--dim);font-size:20px;
  line-height:1;align-self:center;display:inline-block;
  transition:transform .15s ease;margin-left:6px}
details.detsec[open] > summary::after{transform:rotate(90deg)}
details.detsec > summary:hover{color:var(--ink)}
details.detsec > summary:hover::after{color:var(--ink)}
/*  ★ 키보드로 왔을 때 어디에 서 있는지 보이게 — summary 는 기본으로 초점을
    받는데, 테두리를 안 그리면 어디인지 알 수 없다(CLAUDE.md §4). */
details.detsec > summary:focus-visible{outline:2px solid var(--water);
  outline-offset:2px;border-radius:3px}
details.detsec > summary .cnt{margin-left:auto;font-family:var(--mono);font-size:10px;
  color:var(--dim);font-weight:400;letter-spacing:.02em}

/*  상세 맨 아래 — 조황정보 화면의 설문·조과 예측으로 보내는 문 */
.gohere{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line)}
.gohere .linkbtn{font-size:12px;display:inline-flex;align-items:center;gap:4px}
/*  아이콘 크기는 관심선박 줄과 **같은 한 벌 값**이다(layout/_boattrend.php). */
.gohere .rfcico{width:var(--btbtn-ico,11px);height:var(--btbtn-ico,11px);flex:0 0 auto}
.gohere .go{background:var(--hot);color:#fff;border-color:var(--hot);font-weight:700}
.gohere .go:hover{filter:brightness(.95);color:#fff;border-color:var(--hot)}
.linkbtn:hover{color:var(--magenta);border-color:var(--magenta)}
.spin{display:inline-block;width:12px;height:12px;border:2px solid rgba(var(--sh),.25);
  border-top-color:var(--water);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.legend{font-family:var(--mono);font-size:10.5px;color:var(--dim);line-height:1.85}
.legend .row{display:flex;align-items:center;gap:8px}
.legend .row>span:last-child{flex:1;min-width:0}
.legend b{color:var(--ink)}

@media (max-width:560px){
  main{padding:12px 12px 70px}.sl{padding:9px 12px}.nav{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── 회원 기능 — 좋아요 하트 · 관심선박 (naksigo.com 과 같은 모양) ────────
   ★ 배가 나오는 자리마다 같은 것이 같게 보여야 한다. 두 사이트가 다른 모양을
     쓰면 같은 회사가 만든 것으로 안 보인다. */
.nkme{margin-left:auto;white-space:nowrap;font-size:12px;font-weight:700;
  color:var(--water,#20758B);text-decoration:none;padding:5px 10px;border-radius:8px;
  border:1px solid var(--line,#D8E3E6)}
.nkme:hover{background:var(--card-2,#EEF4F5)}
.nkme b{font-family:var(--mono)}
.nkacts{display:inline-flex;gap:5px;margin-left:8px;vertical-align:middle}
.nkacts button{display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  padding:3px 9px;border-radius:99px;line-height:1.5;
  border:1px solid var(--line,#D8E3E6);background:var(--card,#fff);color:var(--ink,#123);
  font-family:var(--ui);font-size:12.5px;font-weight:700;white-space:nowrap}
.nkacts button:hover{background:var(--card-2,#EEF4F5)}
/*  ── 하트·별에 입체를 준다 (2026-08-09 지정: "조황 등급 아이콘처럼") ────
    ▣ 등급 칸과 **같은 말**을 쓴다 — 방향이 뜻이다
        안 누른 것 = **파여 있다**(음각) : 위에 그늘, 아래에 빛줄
        누른 것   = **도드라진다**(양각) : 위가 밝고 아래가 어둡고, 아래로 그림자
      한 화면에서 두 벌의 입체 언어를 쓰면 둘 다 장식으로 읽힌다.
      등급 칸이 이미 '올라온 것과 내려간 것'으로 말하고 있으므로 여기도 같게 한다.
    ▣ ★ 다만 등급 칸과 달리 **그림을 다시 그리지 않는다**
      등급은 네모라서 CSS 로 그릴 수 있었지만 하트와 별은 모양 자체가 뜻이다.
      글자(♡♥☆★)로 두고 **text-shadow 로만** 판다 — 이 화면의 상표·전광판이
      쓰는 것과 같은 방법이다.
    ▣ ★ 빛은 위에서 온다
      음각은 위가 어둡고 아래가 밝다. 양각은 그 반대다. 순서를 뒤집으면
      눌린 것이 안 눌린 것처럼 보인다.
    ▣ ★ 색은 건드리지 않는다
      진하기를 얻겠다고 글자색을 어둡게 하면 애써 맞춘 대비가 무너진다.
      깊이는 **가장자리**가 만든다. */
.nkacts .ic{font-size:15px;line-height:1;
  text-shadow:
    /*  ★ var() 하나가 못 풀리면 **선언 전체가 무효**가 된다 — 토큰을 안 가진
        화면에서 하트·별의 입체가 통째로 사라진 적이 있다(onfishing.net 해도).
        그래서 되돌아갈 값을 함께 적는다. */
    /*  ★ 더 깊게 판다 (2026-08-10 지정). 선 두 줄만으로는 '그어 놓은 금' 에
        가까웠다. 홈은 **모서리(선)와 그 안쪽(번짐)** 두 겹으로 보인다 —
        선은 경계를, 번짐은 깊이를 만든다. */
    0 -1px 0   rgba(var(--sh),.55),   /* 윗입술 모서리 — 파인 쪽 */
    0 -2px 2px rgba(var(--sh),.30),   /* 그 안쪽 그늘 — 깊이 */
    0  1px 0   var(--eng-light,rgba(255,255,255,.60)),  /* 아랫입술 빛줄 */
    0  2px 2px color-mix(in srgb, var(--eng-light,#fff) 45%, transparent);
}
/*  누른 것 — 솟는다. 위아래가 정확히 뒤집히고 아래로 그림자가 진다. */
.nkacts .nklike.on .ic,
.nkacts .nkfav.on .ic{
  /*  ★ 아래 그늘을 회색(--sh)으로 뒀더니 붉은 하트 밑에 **잿빛 얼룩**이 앉아
      둘이 다른 재질로 보였다. 제 색을 옅게 깐다(currentColor) — 하트는 붉은
      그늘을, 별은 주황 그늘을 진다. 이 저장소가 h1 에서 쓰는 규칙과 같다
      ("그늘 색은 검정이 아니라 바탕의 색을 어둡게 한 것"). */
  /*  ★ 윗면 빛을 순백(rgba(255,255,255,.60))으로 뒀더니 **어두운 테마에서
      번쩍였다** — 솟은 것이 아니라 발광하는 것으로 보였다(실측: 새벽 테마).
      --eng-light 는 테마마다 값이 다르다(밝은 곳은 흰색, 어두운 곳은 옅은
      푸른빛 35%). 이 화면의 다른 음각·양각이 모두 쓰는 값이라 결도 맞는다. */
  /*  ★ 더 솟게 한다 (2026-08-10 지정) — 빛 두 겹, 그늘 세 겹.
      멀어질수록 옅고 넓게 편다(1px 선 → 2px 번짐 → 5px 그림자).
      그림자가 한 겹뿐이면 '붙어 있는 것', 세 겹이면 '떠 있는 것' 으로 읽힌다. */
  text-shadow:
    0 -1px 0   var(--eng-light,rgba(255,255,255,.60)),
    0 -2px 2px color-mix(in srgb, var(--eng-light,#fff) 50%, transparent),
    0  1px 0   color-mix(in srgb, currentColor 55%, transparent),
    0  2px 2px color-mix(in srgb, currentColor 38%, transparent),
    0  4px 6px color-mix(in srgb, currentColor 22%, transparent);
}
.nkacts .cnt{font-family:var(--mono);font-weight:400}
/*  ★ 이름표만 2px 작게(2026-08-09 지정). 그림과 숫자는 그대로. */
.nkacts .lb{font-size:10.5px}
.nkacts .cnt{font-size:12.5px}
.nkacts .nklike.on{color:#C4451F;border-color:#C4451F;background:rgba(196,69,31,.08)}
.nkacts .nkfav.on{color:#A9640A;border-color:#F0A038;background:rgba(240,160,56,.12)}
.nkfavtag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;
  font-size:11px;font-weight:700;background:#F0A038;color:#141E26}
/*  목록 칸 — 단추는 배 이름 밑에 제 줄을 갖는다(가로를 나눠 쓰면 이름이 접힌다) */
.boats .bwrap{display:flex;flex-direction:column}
.boats .bwrap .nkacts{margin:0 0 6px 10px;align-self:flex-start}
#nktoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:#0F2A33;color:#fff;padding:9px 16px;border-radius:99px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;z-index:60;
  max-width:92vw;text-align:center}
#nktoast.on{opacity:1;transform:translate(-50%,0)}

/* ── 「관심선박」 목록 (오른쪽 칸) ───────────────────────────────── */
.favlist{list-style:none;margin:8px 0 0;padding:0}
.favrow{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:baseline;
  padding:8px 6px;border-top:1px solid var(--line,#D8E3E6);cursor:pointer;border-radius:6px}
.favrow:first-child{border-top:0}
.favrow:hover{background:var(--card-2,#EEF4F5)}
.favrow.now{background:rgba(240,160,56,.12)}
/*  ★ 칸을 못박는다 — 안 정해 주면 「빼기」가 첫 칸을 차지해 이름이 밀린다(실측). */
.favrow .fn{grid-column:1;min-width:0;font-weight:700;font-size:13.5px;overflow-wrap:anywhere}
.favrow .fn s{color:var(--dim,#6B8189);text-decoration:none;font-size:11px;font-weight:400}
.favrow .fp{grid-column:1;font-size:11.5px;color:var(--dim,#6B8189);font-family:var(--mono)}
.favrow .favdrop{grid-column:2;grid-row:1/3;align-self:center;justify-self:end;border:1px solid var(--line,#D8E3E6);
  background:var(--card,#fff);color:#C4451F;border-radius:7px;cursor:pointer;
  font-size:11.5px;padding:3px 9px;font-family:var(--ui)}


/*  달력 — 카드 안에 떠서 아래를 덮는다. 카드 밖으로 나가면 좁은 화면에서 잘린다. */
.tide{position:relative}


/*  ── 접이식 상세 (naksigo 물때 카드의 나머지 구성 — 2026-08-09 지정) ────
    ★ 지도 옆 칸이 좁아 유속·풍속 눈금과 수온·바람·파고·낚시지수를 그대로 펴면
      지도가 밀린다. **접어 둔다** — 여는 사람만 본다.
    ★ <details> 라 자바스크립트 없이 열린다. */
.tmore{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.tmore > summary{cursor:pointer;font-size:11.5px;color:var(--dim);
  list-style:none;display:flex;align-items:center;gap:5px;min-height:26px;user-select:none}
.tmore > summary::-webkit-details-marker{display:none}
.tmore > summary::before{content:"▸";color:var(--water);font-size:10px;
  display:inline-block;transition:transform .15s ease}
.tmore[open] > summary::before{transform:rotate(90deg)}
.tmore > summary:hover{color:var(--ink)}
/*  유속·풍속 두 눈금 — 출조를 접는 이유는 대개 둘 중 하나다(물이 안 서거나 바람) */
.tgauge{display:grid;gap:5px;margin:7px 0 0;font-size:11px}
.tgauge > div{display:flex;align-items:center;gap:6px}
.tgauge .k{color:var(--dim);flex:0 0 30px}
.tgauge .bar{flex:1 1 auto;height:7px;border-radius:99px;background:var(--card-2);
  overflow:hidden;min-width:40px}
.tgauge .bar i{display:block;height:100%;border-radius:99px}
.tgauge .cur i{background:var(--water)}
.tgauge .wnd i{background:var(--hot)}
.tgauge .v{font-family:var(--mono);font-weight:700;color:var(--ink);flex:0 0 auto}
/*  수온·바람·파고·낚시지수 — 두 칸씩 두 줄 */
.tsea{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:8px;
  background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.tsea .c{background:var(--card);padding:6px 7px;min-width:0}
.tsea .k{display:block;font-size:9.5px;color:var(--dim)}
.tsea .v{display:block;font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsea .v s{all:unset;font-size:9.5px;font-weight:400;color:var(--dim)}

/*  ══ 차림표 목록 — 오른쪽 칸 (2026-08-09 지정) ══════════════════════════
    ★ 이 칸(.rail #detail)은 **스스로 스크롤한다**. 그래서 목록이 길어져도
      바깥 문서 높이가 변하지 않는다 — 왼쪽 해도가 밀리지 않는 것은 그 덕이다.
      여기에 max-height 를 또 걸면 스크롤 상자가 겹쳐 안쪽이 갇힌다. 걸지 않는다. */
.catfind{width:100%;box-sizing:border-box;margin:10px 0 4px;padding:6px 9px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  color:var(--ink);font:inherit;font-size:12.5px}
.catfind:focus{outline:2px solid var(--magenta);outline-offset:1px}
.catlist{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.catlist button{flex:0 0 auto;padding:4px 10px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:12px;cursor:pointer;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catlist button:hover{border-color:var(--magenta);color:var(--magenta)}
.catlist button:focus-visible{outline:2px solid var(--magenta);outline-offset:1px}
.catmore{display:block;width:100%;margin-top:10px;padding:7px 10px;
  border:1px dashed var(--line);border-radius:var(--r-sm);background:transparent;
  color:var(--dim);font:inherit;font-size:12px;cursor:pointer}
.catmore:hover{border-style:solid;border-color:var(--magenta);color:var(--magenta)}
.catmore:focus-visible{outline:2px solid var(--magenta);outline-offset:1px}
.catmore[disabled]{cursor:default;opacity:.6}
/*  「예약정보」 항구 줄 — 이름 · 지역 · 낚시배 수 (2026-09-17). 칩이 아니라 줄이다: 수를 함께 읽어야 한다. */
/*  날짜를 바꿔 점을 다시 받는 동안 — 땅은 그대로, 점만 잠깐 흐리다(2026-09-17). */
svg.map.marks-loading .marks,svg.map.marks-loading .labels{opacity:.45;transition:opacity .15s}
.bkh{margin:12px 0 4px;font-size:12.5px;font-weight:800;letter-spacing:-.01em}
.bkh .cnt{font-weight:500;color:var(--dim);font-size:11px;margin-left:4px}
/*  ★ 줄 사이 상자를 뺐다 — 얇은 밑줄만(2026-09-17 재지시 "각 항구를 구분하는 박스는 제거"). 열 줄이 한눈에 들게
    줄 높이를 낮추고 목록 영역은 열 줄 높이만큼 미리 잡아 둔다. */
.bklist{display:flex;flex-direction:column;gap:0}
#bkList{min-height:calc(10 * 30px)}
.bkport{display:grid;grid-template-columns:auto 1fr auto;gap:0 8px;align-items:baseline;width:100%;min-height:30px;
  padding:5px 4px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;
  color:var(--ink);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.bklist .bkport:last-child{border-bottom:0}
.bkport:hover{background:var(--card-2,rgba(0,0,0,.03))}
.bkport b{font-weight:700;white-space:nowrap}
.bkport i{font-style:normal;color:var(--dim);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bkport s{text-decoration:none;color:var(--dim);font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.bkport s em{font-style:normal;font-weight:700;color:var(--ink)}
.bkport:hover b{color:var(--magenta)}
.bkport:focus-visible{outline:2px solid var(--magenta);outline-offset:1px}
/*  ══ 찾는 상자 / 보여 주는 상자 (2026-08-09 지정) ══════════════════════
    한 덩이로 흐르면 어디까지가 조작이고 어디부터가 답인지 눈이 못 가른다.
    ★ 두 상자는 **같은 테두리**를 쓰되 찾는 쪽만 바탕을 한 겹 눌러 둔다 —
      색을 달리하면 두 개의 다른 물건처럼 보인다. 하나의 칸을 나눈 것이다. */
.findbox{margin-top:10px;padding:9px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card-2)}
.findbox .catfind{margin:0}
/*  ★ 찾는 단추를 눈에 보이게 둔다 (2026-08-09 지정) — 조황정보는 **뜻으로**
    찾는 길이라 치는 동안 부르지 않는다. 그러면 '언제 찾아지는지' 를 사람이
    알 수 없어진다. 단추가 그 답이다. */
.findrow{display:flex;gap:6px;align-items:stretch}
.findrow .catfind{flex:1 1 auto;min-width:0}
.findgo{flex:0 0 auto;padding:0 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer;
  white-space:nowrap}
.findgo:hover{border-color:var(--magenta);color:var(--magenta)}
.findgo:focus-visible{outline:2px solid var(--magenta);outline-offset:1px}
.findgo[disabled]{opacity:.55;cursor:default}
.findbox .fmeta{margin:6px 2px 0;font-size:11px;color:var(--dim);line-height:1.5}
.findbox .fmeta b{color:var(--ink);font-family:var(--mono)}
.resbox{margin-top:8px;padding:9px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card)}
.resbox .catlist,.resbox .replist{margin-top:0}
.resbox .catmore{margin-top:9px}
/*  조황정보 목록 — 한 줄에 날짜·제목·배·항구·어종.
    ★ 제목은 원문으로 나가는 링크다(새 탭). 나머지는 이 칸에서 열린다. */
/*  ★ 테두리는 바깥 상자(.resbox)가 이미 그린다 — 여기 또 두르면 액자 안의
    액자가 된다. 줄 사이 1px 은 바탕색이 비쳐 나오는 것이라 그대로 둔다. */
.replist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line);overflow:hidden}
.replist li{background:var(--card);padding:8px 9px;min-width:0}
.replist li.ghost{background:var(--card);color:var(--dim);text-align:center;padding:14px 9px}
.repitem .rt{font-size:12.5px;line-height:1.45;color:var(--ink);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.repitem .rt a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.repitem .rt a:hover{color:var(--magenta);border-bottom-color:currentColor}
.repitem .rm{margin-top:4px;font-size:11px;color:var(--dim);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;min-width:0}
.repitem .rm time{font-family:var(--mono);color:var(--dim)}
.repitem .rm .sep{opacity:.5}
.repitem .rm b,.repitem .rm i{all:unset;cursor:pointer;color:var(--ink);
  font-size:11px;border-bottom:1px dotted var(--line)}
.repitem .rm b:hover,.repitem .rm i:hover{color:var(--magenta);border-bottom-color:currentColor}
.repitem .rm em{all:unset;font-size:11px;color:var(--dim)}
/*  어종·물때도 제 링크가 됐다 (2026-08-17) — 손잡이 있는 것만 눌리는 옷 */
.repitem .rm em[data-fish]{cursor:pointer;border-bottom:1px dotted transparent}
.repitem .rm em[data-fish]:hover{color:var(--magenta);border-bottom-color:currentColor}
/*  썸네일 — 줄의 오른쪽 아래에 못박는다. 흐름에 두면 글 길이에 따라 들쭉날쭉해진다. */
.replist li.repitem{position:relative}
.repitem.haspic{padding-right:66px}
.repitem .th{position:absolute;right:9px;bottom:8px;width:52px;height:40px;object-fit:cover;
  border-radius:6px;border:1px solid var(--line);background:var(--card-2);display:block}
/*  여는 화면이 없는 이름(물때) — 눌러도 되는 것처럼 보이면 안 된다. */
.catlist .tidename{flex:0 0 auto;padding:4px 10px;border-radius:99px;
  border:1px dashed var(--line);color:var(--dim);font-size:12px}

/*  바닥글 — 눈에 띄되 조황을 가리지 않는다(2026-08-10). */
/*  ★ 바닥글 **가운데 정렬** (2026-08-28 지시) — 껍데기와 같은 규칙이다. 이 화면은
    껍데기를 안 쓰는 통짜 페이지라 여기에도 따로 적어야 한다. 가로 flex 라
    justify-content 로 밀고, 접힌 줄의 글자 몫으로 text-align 을 함께 둔다. */
/*  ★ 한글은 **낱말 가운데서 끊지 않는다** (2026-08-28). 기본값은 CJK 를
    아무 자리에서나 접어, 좁은 폰에서 「사업자등록번/호」로 잘렸다(실측).
    keep-all 이면 띄어쓰기에서만 접힌다. */
.pvfoot{max-width:var(--wrap);margin:6px auto 0;padding:10px 18px 18px;
  border-top:1px solid var(--line);display:flex;gap:6px 14px;flex-wrap:wrap;
  align-items:center;justify-content:center;text-align:center;
  font-size:12px;color:var(--dim);word-break:keep-all}
.pvfoot a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.pvfoot a:hover{color:var(--ink)}
/*  ★ 바닥글 글자는 **한 크기**다 (2026-08-28 지시: "footer 의 글자 크기를
    통일하고, 첫줄과 둘째줄 간격을 좁혀줘"). .biz 만 11px 로 작아 두
    줄의 크기가 달랐다(실측 12px vs 11px) — 물려받게 두면 한 벌이 된다.
    자리(제 줄을 차지)와 옅기는 그대로 둔다. */
.pvfoot .biz{flex:1 0 100%;opacity:.8;line-height:1.6}
/*  ★ '자료는 수집 시점 기준…' 안내를 **한 단 작게** (2026-08-12 지정).
    ★ 클래스를 새로 붙이지 않는다 — 처음에 `note` 를 붙였다가 이 화면에 이미
      있던 **알림 박스 스타일**(왼쪽 굵은 선·회색 바탕·안여백)이 그대로 먹어
      바닥글 한 줄이 상자가 됐다(실측). 이름이 겹치는 클래스는 조용히 딸려 온다.
      markup 은 원래대로 두고 **자리로만** 고른다. */
/*  ★ 2026-08-28 지시("footer 의 글자 크기를 통일")로 **걷었다.**
    2026-08-12 에 이 안내만 한 단 작게 두었는데, 이제 바닥글은 한 크기다.
    덜 급한 글이라는 표시는 크기가 아니라 **옅기**(색)가 이미 하고 있다. */
@media (max-width:640px){.pvfoot{padding:10px 12px 18px}}

/*  ★ 하트·별이 **글자에서 그림(SVG)으로** 바뀌었다 (2026-08-10 지정).
    글자였을 때는 font-size 가 크기를 정했지만, 그림은 스스로 크기가 없다 —
    폭·높이를 준다. 밑선도 글자처럼 맞춘다(vertical-align).
    ★ 위의 text-shadow 규칙은 그림에는 걸리지 않는다(글자가 아니다).
      입체는 이제 그림 안의 그라데이션·반짝임·그림자가 만든다. */
.nkacts .ic{width:16px;height:16px;vertical-align:-3px;display:inline-block}
.nkacts.link .ic{width:14px;height:14px;vertical-align:-2.5px}

/*  ★ 「내일의 물때」 칸의 출항 제한 알림 규칙은 **함께 걷었다** (2026-08-14) —
    그 칸이 없어졌고, 물때정보 카드는 제 것(.mtide .tidelimit)을 쓴다.
    남겨 두면 이 화면에 없는 이름(--sonar)을 부르는 죽은 규칙이 된다. */
/*  ★ 확대·축소의 최종 자리(.chartbox .zoom — 아래 66px·가로) 규칙은 공용
    조각(_chartmap_css.php) 끝으로 옮겼다 (2026-08-19) — 지도 규칙이라 폰과
    한 벌이어야 한다. 실측: 이것이 남아 있으면 폰만 오른쪽 위·세로로 섰다. */
/*  ★ 못 여는 이름 — 링크처럼 보이지 않게 (2026-08-27 점검).
    항구 이름이 원장에만 있고 마스터에 없으면 눌러도 열 것이 없다. 글자는
    그대로 두되 **손잡이도 밑줄도 주지 않는다** — 눌러도 아무 일 없는 링크가
    가장 나쁘다. */
.noent{font-style:normal;color:var(--ink-soft);cursor:default}
/*  ══ 조황글 낱장의 규칙을 **이 자리에도** (2026-09-01) ══════════════════
    ★ 낱장(/report/{id})의 CSS 는 그 페이지에만 있다. 낱장 HTML 만 가져다 넣으면
      글자·색·여백이 **이 화면 기본값**으로 떨어진다. 낱장과 같은 규칙을 통째로
      둔다(이 자리에 맞춘 몇 줄은 아래에서 덮는다).
    ★ 두 자리에 같은 글이 있다 — 낱장은 Pages.php 의 reportCss(). 고칠 때 둘 다. */
.rp{max-width:860px;margin:0 auto;padding:18px var(--colgap,18px) 30px}
.rp .crumb{font-size:11.5px;color:var(--ink-soft);margin:0 0 10px}
.rp .crumb a{color:inherit}
.rp .place{font-size:12px;color:var(--ink-soft);margin:0 0 4px}
.rp h1{font-size:20px;line-height:1.45;margin:2px 0 10px}
.rp .who{font-size:13px;margin:0 0 12px}
.rp .sp{font-size:13px;color:var(--ink-soft);margin:0 0 12px}
.rp .env{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-soft);
  margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.rp .env b{color:var(--ink);font-weight:700}
.rp img.th{max-width:100%;border:1px solid var(--line);border-radius:10px;margin:0 0 8px}
.rp .body{font-size:14px;line-height:1.75;margin:0 0 14px;white-space:pre-wrap}
.rp .src{font-size:12px;color:var(--ink-soft)}
.rp .src a{color:inherit}
/*  선박 박스 — 이 글이 어느 배의 것인지 한 눈에. 없는 칸은 줄째로 빠진다. */
.rp .spec{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 14px}
.rp .spec h2{font-size:13px;font-weight:800;margin:0 0 8px;letter-spacing:-.01em}
.rp .spec h2 b{font-weight:800}
/*  ★ 여섯 칸을 **한 줄에** 늘어놓는다 (2026-09-01 지시: "선사·항구·주소·정원·
    톤수·주어종을 같은 줄에 배치해. 지금은 라인이 바뀌고 있어").
    ▣ 전에는 `58px | 1fr` 두 칸 격자라 **항목마다 한 줄**을 먹었다 — 여섯 줄이다.
      폰에서 이 상자 하나가 화면의 3분의 1을 차지했다.
    ▣ 이제 항목을 낱개(div.it)로 묶어 옆으로 흘린다. 자리가 모자라면 **항목째**
      다음 줄로 넘어간다 — 이름과 값이 갈라지지 않는다(그것이 지금의 불만이다).
    ▣ 주소는 길어 혼자 한 줄을 쓸 수 있다. 그래도 이름과 값은 붙어 있다.  */
.rp .spec dl{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:13px}
.rp .spec dl > .it{display:flex;align-items:baseline;gap:5px;min-width:0}
.rp .spec dt{color:var(--ink-soft);font-size:12px;flex:0 0 auto}
.rp .spec dd{margin:0;word-break:keep-all;min-width:0}
@media (max-width:520px){ .rp .spec dl{gap:3px 11px;font-size:12.5px} }

/*  ══ 오른쪽 칸에 편 조황글 (2026-08-28) ═══════════════════════════════════
    낱장을 그대로 가져다 넣으므로 글자 크기만 이 칸에 맞춘다 — 칸 폭이
    428px 뿐이라 낱장의 30px 제목은 세 줄을 먹는다(실측).
    ▣ 낱장 자체는 안 건드린다(거기서는 그 크기가 옳다). */
#detail .rp{padding:0;max-width:none}
#detail .rp h1{font-size:17px;line-height:1.45;margin:2px 0 8px}
#detail .rp .spec{padding:10px 12px}
/*  ★ 선박 박스 — 낱장의 규칙이 **여기까지 안 따라온다**(낱장 CSS 는 그 쪽
    페이지에만 있다). 그래서 시트/칸 안에서는 dl 이 브라우저 기본값으로 떨어져
    이름과 값이 **줄마다 따로** 섰다 (2026-09-01 지시: "같은 줄에 배치해.
    지금은 라인이 바뀌고 있어"). 낱장과 **같은 규칙**을 여기에도 둔다.
    ★ 두 자리에 같은 글이 있다 — 낱장은 Pages.php 의 reportCss(). 고칠 때 둘 다. */
#detail .rp .spec dl{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:13px}
#detail .rp .spec dl > .it{display:flex;align-items:baseline;gap:5px;min-width:0}
#detail .rp .spec dt{color:var(--ink-soft);font-size:12px;flex:0 0 auto}
#detail .rp .spec dd{margin:0;word-break:keep-all;min-width:0}
#detail .rp img.th{max-height:260px;object-fit:cover}