/*  전국 조황 해도 — 화면 색·글꼴 토큰 한 벌 (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;
}
/*  전국 조황 해도 — 지도·물때카드 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}
}
/*  ★ 그래프 제목 줄 — 그래프와 한 벌이라 여기 둔다(2026-08-20).
    데스크톱에만 있던 탓에 폰에서는 곁말('겹쳐 그렸습니다…')이 제목 크기로
    떠서 두 줄이 같은 무게로 보였다(실측). */
.fch3{margin:14px 0 6px;font-size:13.5px;color:var(--lamp,#0A1D25);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fch3 .sub{font-size:11px;color:var(--ink-soft);font-weight:400}

/*  물때 그래프 — 단위가 다른 넷을 각자 눕혀 한 판에 겹친다 */
.fcchart svg{width:100%;height:120px;display:block;overflow:visible}
.fcchart .ln{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.fcchart .s1{stroke:var(--water)}
.fcchart .s2{stroke:var(--sonar-hot,#CC4318)}
.fcchart .s3{stroke:var(--sonar-ink,#A9640A)}
.fcchart .s4{stroke:var(--dim)}
/*  ★ 추정 구간 — 점선 (2026-08-22 지정). 예보가 없어 '가장 최근 같은 물때'
    로 되짚은 값이다. 색은 같게 두고 **선의 결만** 바꾼다 — 다른 색을 주면
    다섯 번째 계열로 읽힌다. vector-effect 때문에 dasharray 도 화면 픽셀이다. */
.fcchart .ln.est{stroke-dasharray:3 2.4;opacity:.9}
/*  ★ 곡선 고르기 (2026-10-01 지시: "전체 사이트에서 조과 예측에서 유속,수온,바람,파고 에 대하여 클릭을 하면 해당
    그래프가 도드라지게 해") — 이름표가 단추다. 누른 곡선은 굵고 진하게, 나머지는 흐리게. 다시 누르면 풀린다. */
.fclegend button.fcsb{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:3px;
  padding:0 4px;margin:0 -4px;border-radius:5px;border:1px solid transparent;line-height:1.35}   /* 상자를 작게(2026-10-01 지시) */
.fclegend button.fcsb:hover{background:rgba(127,127,127,.08)}
.fclegend button.fcsb:focus-visible{outline:2px solid var(--water,#2E7D91);outline-offset:1px}
.fclegend button.fcsb[aria-pressed="true"]{border-color:var(--line,#C9D6DA);background:rgba(127,127,127,.06);font-weight:700}
.fcchart.fcsel .fclegend button.fcsb:not([aria-pressed="true"]){opacity:.5}
.fcchart .ln{transition:opacity .2s ease,stroke-width .2s ease}
.fcchart.fcsel .ln{opacity:.14}
.fcchart.fcsel .ln.on{opacity:1;stroke-width:2.8}
/*  곡선 옮김(fcMorph, 2026-10-01) — 옮기는 동안 진짜 새 곡선은 숨기고 사본(.fcmv)만 보인다. */
.fcchart.fcmorph .ln.on{opacity:0!important}
.fcchart.fcmvend .ln,.fcchart.fcmvend .fcvals{transition:none!important;animation:none!important}
.fcchart .ln.fcmv{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;transition:none}
/*  고른 곡선의 날짜별 값(2026-10-01) — 그림(svg)과 같은 상자(.fcsvgw) 위에 얹는다. */
.fcchart .fcsvgw{position:relative}
.fcchart .fcvals{display:none;position:absolute;inset:0;pointer-events:none}
.fcchart .fcvals b{position:absolute;transform:translate(-50%,-125%);font:700 11px/1 var(--mono,ui-monospace,monospace);color:var(--ink,#12303A);
  white-space:nowrap;text-shadow:0 0 2px var(--paper,#fff),0 0 2px var(--paper,#fff),0 0 3px var(--paper,#fff)}
.fcchart[data-fcsel="s1"] .fcvals.s1,.fcchart[data-fcsel="s2"] .fcvals.s2,
.fcchart[data-fcsel="s3"] .fcvals.s3,.fcchart[data-fcsel="s4"] .fcvals.s4{display:block}
.fcchart.fcmorph .fcvals{opacity:0}
.fcchart .fcvals b:first-child{transform:translate(-10%,-125%)}
.fcchart .fcvals b:last-child{transform:translate(-90%,-125%)}   /* 양 끝 값은 판 밖으로 안 나가게 안쪽으로 */
.fcchart.fcsel .ln.est.on{opacity:.95}
@media (prefers-reduced-motion:reduce){ .fcchart .ln{transition:none} }

/*  추정 근거 한 줄 */
.fcest{margin:8px 0 0;font-size:11.5px;line-height:1.65;color:var(--ink-soft)}
.fcest b{color:var(--ink)}
.fcest .sub{display:block;color:var(--dim);font-size:11px}
/*  예보가 끝나는 자리 — 여기서부터는 가정이다 */
.fcchart .cut{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3;
  vector-effect:non-scaling-stroke}
.fclegend{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:8px;
  font-size:11.5px;color:var(--ink-soft)}
.fclegend i{display:inline-block;width:14px;height:3px;border-radius:2px;
  margin-right:5px;vertical-align:middle}
.fclegend .s1 i{background:var(--water)}
.fclegend .s2 i{background:var(--sonar-hot,#CC4318)}
.fclegend .s3 i{background:var(--sonar-ink,#A9640A)}
.fclegend .s4 i{background:var(--dim)}
.fclegend b{color:var(--ink);font-family:var(--mono);font-size:11px;font-weight:600}
.fclegend .cutlb{color:var(--dim)}

/*  ★ 물때 그래프의 가로축 날짜 (2026-08-10 지정).
    ▣ 선의 점과 같은 자리에 못박는다(left:% 로 두고 가운데로 당긴다).
    ▣ 14개가 한 줄에 서므로 글자는 작고 **고정폭**이다 — 자릿수가 흔들리면
      숫자가 춤춘다.
    ▣ 좁은 화면에서는 **하루 걸러** 적는다. 겹쳐서 못 읽는 글자를 다 적느니
      절반을 또렷하게 적고 나머지는 눈금으로 두는 편이 낫다. */
.fcchart{position:relative}
.fcxaxis{position:relative;height:14px;margin-top:2px}
.fcxaxis span{position:absolute;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:9px;line-height:14px;color:var(--dim)}
.fcxaxis span.we{color:var(--sonar-ink,#A9640A);font-weight:700}
/*  ★ 양 끝은 당기지 않는다 — 가운데로 당기면 절반이 판 밖으로 나가 잘린다
    (실측: '08.11' 이 '11' 로, 마지막 날은 '08.' 로 보였다).
    첫 라벨은 왼쪽에 붙이고 마지막 라벨은 오른쪽에 붙인다. */
.fcxaxis span:first-child{transform:none}
.fcxaxis span:last-child{transform:translateX(-100%)}
/*  예보가 닿지 않는 날 — 흐리게. 그래프의 세로 금 오른쪽과 같은 뜻이다. */
.fcxaxis span.beyond{opacity:.45}
/*  ★ 날짜는 **하루마다** 적는다 (2026-08-16 운영자 지시 — "1단위로").
    하루 걸러 숨기던 규칙은 14일 시절의 것이다 — 지금 기간(7일)이면
    360px 에서도 다 들어간다(naksigo 실측 겹침 0). */


/*  ★ **겹칠 때만 하루 걸러 적는다** — 판단은 CSS 가 아니라 JS 가 한다
    (2026-08-24 지시: "예측 날짜가 많아서 X축의 날짜가 겹치는 경우에는 날짜
     표시를 격일로 처리해서 겹치지 않게").
    ▣ 앞서는 여기서 `@media (max-width:400px)` 로 **무조건** 하루 걸러 숨겼다.
      그러면 401px 폰에서는 열넉 개가 그대로 겹치고, 기간이 짧아 다 들어가는
      좁은 화면에서는 들어가는데도 절반이 사라졌다. 폭이 아니라 **들어가는지**를
      재야 맞다 — 그 셈은 _fcchart_js.php 의 fcDateStep() 이 한다.
    ▣ 숨기는 것은 그대로 `visibility` 다 — 자리를 지워 버리면 남은 날짜가
      제 눈금에서 밀려난다. */
.fcxaxis span.hid{visibility:hidden}
  /*  ★ 끝에서 둘째도 숨긴다 — 마지막 날은 늘 보이므로 홀수 자리인 끝둘째와
      맞닿아 겹친다(실측 360px: 08.29↔08.30). */
  .fcxaxis span:nth-last-child(2){visibility:hidden}
  .fcxaxis span:first-child,
  .fcxaxis span:last-child{visibility:visible}
}

/*  ★ 판의 눈금 (2026-08-10 지정) — 왼쪽 기준선은 실선, 날짜는 점선.
    ▣ ★ vector-effect:non-scaling-stroke 가 **반드시** 있어야 한다.
      이 판은 viewBox 100×34 를 폭에 맞춰 늘여 쓴다(preserveAspectRatio:none).
      가로가 6배 넘게 늘어나므로, 그 효과가 없으면 세로선의 굵기만 6배가 되어
      **점선이 굵은 띠**가 된다. 자료선(.ln)이 이미 같은 이유로 쓰고 있다.
    ▣ 눈금은 **바탕**이다 — 자료선보다 옅고 가늘게. 눈금이 또렷하면
      흐름을 읽는 눈이 격자에 붙잡힌다.
    ▣ 주말 눈금만 한 단 진하게 — 가로축 날짜의 주말 강조와 짝을 이룬다. */
/*  ★ 기준선은 **진하고 조금 두껍게** (2026-08-10 지정).
    --line 은 표의 칸을 가르는 옅은 선이라, 판의 테두리로 쓰면 눈금(점선)과
    구별이 안 됐다. 글자와 같은 계열의 어두운 색(--ink-soft)으로 올리고
    굵기도 한 단 올린다(1.4 → 2). 점선(1px)과 두 배 차이가 나야 '테두리'로 읽힌다.
    ★ 그래도 자료선(1.4px 유채색)보다 앞으로 나서지는 않는다 — 축은 판이고
      자료가 주인공이다. 그래서 색만 진하게 하고 opacity 로 한 단 눌러 둔다. */
.fcchart .axis{stroke:var(--ink-soft);stroke-width:2;vector-effect:non-scaling-stroke;
  opacity:.85;stroke-linecap:square}
.fcchart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3;
  vector-effect:non-scaling-stroke;opacity:.62}
.fcchart .grid.we{opacity:.9;stroke:color-mix(in srgb, var(--sonar,#F0A038) 45%, var(--line))}

/*  ★ 출항 제한 (풍랑주의보·경보) — 2026-08-10 지정.
    ▣ 왜 등급보다 앞서나 — 아무리 조황이 좋아도 **못 나가는 날**은 못 나간다.
      예측 등급은 '얼마나 잡히나' 이고 이것은 '나갈 수 있나' 다. 차원이 다르다.
    ▣ 띠는 옅게, 글은 진하게 — 띠가 진하면 자료선이 안 보인다. */
.fcchart .lim{fill:var(--sonar,#F0A038);opacity:.13}
.fcchart .lim.alert{fill:var(--sonar-hot,#CC4318);opacity:.18}
.fcxaxis span.lim{color:var(--sonar-ink,#A9640A);font-weight:700}
.fcxaxis span.lim::after{content:'⚑';display:block;font-size:8px;line-height:1;margin-top:-1px}
.fcxaxis span.lim.alert{color:var(--sonar-hot,#CC4318)}
.fclegend .limlb{color:var(--sonar-ink,#A9640A);font-weight:700}
.fclegend .limlb.alert{color:var(--sonar-hot,#CC4318)}
.fclim{margin:8px 0 0;padding:9px 11px;border-radius:9px;font-size:12px;line-height:1.6;
  background:color-mix(in srgb, var(--sonar,#F0A038) 12%, var(--hull,#FBFDFD));
  border:1px solid color-mix(in srgb, var(--sonar,#F0A038) 38%, var(--line));color:var(--ink)}
.fclim.alert{background:color-mix(in srgb, var(--sonar-hot,#CC4318) 12%, var(--hull,#FBFDFD));
  border-color:color-mix(in srgb, var(--sonar-hot,#CC4318) 40%, var(--line))}
.fclim .sub{display:block;margin-top:4px;font-size:11px;color:var(--ink-soft)}
.chartbox .daybar{top:20px}
.chartbox .zoom{bottom:44px}
.chartbox .mapnote{bottom:12px;
  letter-spacing:-.4px;padding:4px 7px}
/*  ── 낚시배 순위 줄 (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 는 함께 없앴다). */

/* ══ 폰 뼈대 — 여기부터가 이 화면의 제 몫이다 ═════════════════════════
   ★ 지도·물때카드 이름(.chartbox·.zone·.mtide·.calpop…)은 위 공용 조각의
     것이라 **다시 정의하지 않는다** — 다시 적으면 데스크톱과 갈라진다. */
:root{
  /*  앱바 띠 — 이 화면에만 있는 것이라 여기서 정한다(깊은 바다빛). */
  --strip1:#0F2C3B; --strip2:#175066; --strip3:#20758B;
  --on-strip:#F1F7FA; --brand-accent:#FFCE7A;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
/*  ══ 글자 크기 (2026-08-20 지시: "「나」 메뉴에 m.naksigo.com 의 나 메뉴에
    있는 글자 크기 선택 기능을 추가해") ═══════════════════════════════════════
    ▣ ★ 왜 `zoom` 인가 — 이 화면은 글자·여백·아이콘이 **전부 px** 로 짜여 있다.
      html 의 font-size 를 키워도 px 값은 꿈쩍하지 않아 글자만 커지고 칸은
      그대로다(줄이 넘치고 단추 안에서 글자가 잘린다). zoom 은 화면 전체를
      같은 비율로 키워 짜임새를 그대로 지킨다 — 손가락으로 벌린 것과 같다.
    ▣ ★ 다만 뷰포트 단위(vh)는 zoom 을 따라오지 않는다. 88vh 가 그대로 1.35배가
      되어 화면 밖으로 넘친다 — 그래서 vh 를 쓰는 자리에서 `/var(--fs)` 로
      **되돌려 나눈다**(아래 #sheet > .in 하나뿐이다).
      ★ 새로 vh 를 쓰는 규칙을 만들면 여기도 같이 나눠 줘야 한다.
    ▣ 기본은 1(지금 크기)이고 **키우기만** 한다 — 지시가 '더 크게' 다. 작게는
      두지 않는다: 이미 11~12px 인 곁말이 더 작아지면 못 읽는다.
    ▣ 단계·이름·저장 방식 모두 m.naksigo.com 과 같다(같은 것을 다르게 두면
      두 화면을 오가는 사람이 매번 다시 익힌다). */
body{margin:0;font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ink);
  background:linear-gradient(180deg,var(--page1,#EFF4F5),var(--page2,#E4EDEF));
  -webkit-text-size-adjust:100%;overscroll-behavior-y:none;zoom:var(--fs,1)}
/*  글자 크기 고르는 단추 — 색이 아니라 **크기**를 미리보기로 보여 준다
    (큰 '가' + 그 아래 이름). m.naksigo 의 .themes.fzs 와 같은 모양이다. */
.fzs{display:flex;gap:6px}
.fzs button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;height:auto;padding:8px 0 7px;
  border:1px solid var(--line);border-radius:11px;background:var(--card);
  color:var(--ink);font:inherit;line-height:1.1;cursor:pointer}
.fzs button span{font-size:10.5px;color:var(--dim);line-height:1.2}
.fzs button[aria-pressed="true"]{outline:2px solid var(--water);outline-offset:1px}
.app{min-height:100%;display:flex;flex-direction:column}

.appbar{position:sticky;top:0;z-index:30;flex:0 0 auto;min-height:52px;display:flex;
  align-items:center;gap:9px;padding:0 12px;color:var(--on-strip);
  background:linear-gradient(100deg,var(--strip1),var(--strip2) 55%,var(--strip3));
  padding-top:env(safe-area-inset-top)}
.appbar .brand{font-family:var(--mono);font-size:15px;letter-spacing:-.3px;
  color:inherit;text-decoration:none}
.appbar .brand b{color:var(--brand-accent)}
.appbar .brand i{font-style:normal;font-weight:600;font-size:11px;opacity:.8;margin-left:6px}
/*  ★ 좁은 폰(둘째 줄로 접히던 실측 390px) — 부제와 요일을 접는다. 이름(로고)과
    날짜·회원 단추가 한 줄에 서야 앱바가 앱바로 보인다. */
@media (max-width:439px){ .appbar .brand i{display:none} }
.appbar .sp{flex:1}
.appbar .day{font-family:var(--mono);font-size:11.5px;opacity:.85}
/*  ★ 글자를 키워도 **한 줄로** 둔다 — 2026-08-20 실측: 「가장 크게」(1.35)
    에서 '로그인' 이 '로그 / 인' 으로 접혀 앱바가 두 줄이 됐다. 앱바는 어느
    글자 크기에서도 한 줄이어야 그 아래 화면이 흔들리지 않는다. */
.appbar a.me{white-space:nowrap;height:34px;min-width:44px;border-radius:99px;background:rgba(255,255,255,.13);
  color:var(--on-strip);font-size:12.5px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 12px;text-decoration:none}

main{flex:1 1 auto;padding:10px 10px 76px;max-width:760px;width:100%;margin:0 auto}
section[data-tab]{display:none}
section[data-tab].on{display:block}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px;margin-bottom:10px}
.card h2.t{margin:0 0 6px;font-size:14.5px;color:var(--ink);font-family:var(--ui);
  letter-spacing:0;text-transform:none;border:0;padding:0;display:block}
.muted{color:var(--dim);font-size:12px;margin:4px 0 0}
.warn{color:var(--warn,#B3402A)}
.mono{font-family:var(--mono)}

/* ── 해도 탭 — 지도 상자(.chartbox)는 공용 CSS 가 입힌다 ─────────────── */
/*  ★ 폰에서 지도 상자 아래 사이만 준다 — 지도 규칙 자체는 건드리지 않는다. */
section[data-tab="map"] .chartbox{margin-bottom:10px}
/*  ★ 폰 손가락 표적 — 보이는 점(.pt)은 조황 건수대로 작아도 좋지만 손가락은
    44px 을 요구한다. 화면 스크립트가 투명 원(r=11)을 겹쳐 얹는다(.pthits).
    공용 마크업은 안 바꾼다 — 폰만의 덧칠이다. */
.pthits circle{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}

/*  어종 칩 — 지도 위 물고기와 같은 그림(_fishdefs). 누르면 어종 상세 + 지도 강조. */
.chips2{display:flex;gap:6px;overflow-x:auto;padding:2px 0;margin-top:8px;scrollbar-width:none}
.chips2::-webkit-scrollbar{display:none}
.chips2 button{flex:0 0 auto;height:44px;padding:0 13px;border:1px solid var(--line);
  border-radius:99px;background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.chips2 .ic{width:22px;height:14px;display:inline-block;color:var(--hot)}
.chips2 .ic svg{width:100%;height:100%}
.chips2 button s{all:unset;font-family:var(--mono);font-size:10.5px;color:var(--dim)}

/*  해역 카드 넷 — 카드 속(.zone)은 공용 CSS(_zonecard 와 짝)가 입힌다. */
.zonewrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
@media (max-width:379px){ .zonewrap{grid-template-columns:1fr} }

/* ══ 인생고기 ═════════════════════════════════════════════════════════ */
.lfhead{display:flex;align-items:baseline;gap:8px}
.lfhead .sp{flex:1 1 auto}
.lftabs{display:flex;gap:6px;margin:8px 0}
.lftabs button{min-height:40px;padding:0 13px;border:1px solid var(--line);border-radius:99px;
  background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer}
.lftabs button[aria-pressed="true"]{background:var(--water);color:#fff;border-color:transparent}
.lftabs .lfadd{margin-left:auto;background:var(--water);color:#fff;border-color:transparent;
  font-weight:700}
.lfrow{position:relative;display:block;width:100%;min-height:70px;text-align:left;
  padding:11px 86px 11px 12px;margin-bottom:8px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);font:inherit;cursor:pointer}
.lfrow .h{display:block;font-size:14px;color:var(--ink)}
.lfrow .h .mine{margin-left:6px;font-size:10.5px;color:var(--water);font-weight:700}
.lfrow .m{display:block;margin-top:3px;font-size:11.5px;color:var(--dim)}
.lfrow .w{display:block;margin-top:2px;font-size:11px;color:var(--dim);font-family:var(--mono)}
.lfrow .th{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:66px;
  height:50px;object-fit:cover;border-radius:9px;border:1px solid var(--line);
  background:var(--card-2);cursor:zoom-in}
.lfphoto{display:block;width:100%;border-radius:12px;margin-top:8px;cursor:zoom-in}
.lfform label{display:block;margin-top:10px;font-size:12.5px;color:var(--dim)}
/*  ★ 입력 글씨 16px — 그 아래면 iOS 가 화면을 확대한다. */
.lfform input,.lfform textarea{display:block;width:100%;margin-top:4px;min-height:46px;
  padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:#fff;
  color:var(--ink);font-family:var(--ui);font-size:16px}
.lfform textarea{min-height:64px;resize:none}
.lfform .go{width:100%;min-height:50px;margin-top:14px;border:0;border-radius:12px;
  background:var(--water);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.lfform .go:disabled{opacity:.6;cursor:progress}

/* ══ 조황 목록 ════════════════════════════════════════════════════════ */
.find{display:flex;gap:6px;margin-bottom:8px}
.find input{flex:1 1 auto;min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);
  border-radius:11px;background:#fff;color:var(--ink);font-size:16px;font-family:var(--ui)}
.find button{flex:0 0 auto;height:44px;padding:0 16px;border:0;border-radius:11px;
  background:var(--water);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
/*  ★ 조황글 줄은 **`#repList` 안에서만** 이 모양이다 (2026-09-01 실측으로 좁혔다).
    `.src` 는 이름이 너무 흔하다 — 조황글 낱장(report.php)의 맨 아랫줄
    `<p class="src">글과 사진의 권리는…</p>` 과 **부딪쳤다**. 시트에 낱장을 펴자
    그 한 줄이 이 규칙(테두리·둥근 모서리·오른쪽 84px 여백)을 뒤집어써
    카드처럼 섰다(실측 69px). 낱장 클래스를 바꾸는 대신 자리를 좁힌다 —
    그 파일은 naksigo 와 **같은 파일**이라 거기를 건드리면 두 사이트가 갈린다. */
/*  ★ 자리는 **두 곳**이다 — 「찾기」 목록(#repList)과 「질의」의 근거 목록
    (#thread 안의 <details>). 2026-09-02 지시: "「근거 12건 보기」의 화면 UI가
    변경되었어 원상태로 해". 앞서 낱장의 `<p class="src">` 충돌을 막으려고
    #repList 로만 좁혔는데, 근거는 #thread 에 그려지므로 **스타일이 통째로
    안 걸려** 카드가 아니라 맨 글자로 섰다. 두 자리를 다 적는다 —
    낱장(.rp .src)은 여전히 안 걸린다. */
#repList .src,
#thread .src{position:relative;padding:11px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);margin-bottom:8px;padding-right:84px}
/*  ★ 글 번호는 **제목 줄 맨 앞**에 선다 (2026-09-02 지시: "[1] 와 같이 번호
    부여는 두번째줄 앞으로 옮기고 첫줄은 제거해").
    ▣ 앞서는 제 줄을 통째로 썼다(실측 폰 360px: .n 이 top=333 에 혼자, 제목이
      top=349). 번호 하나에 한 줄을 쓰면 카드마다 한 줄씩 길어진다.
    ▣ ★ 제목은 두 줄로 묶여 있다(-webkit-line-clamp:2). 번호를 **그 상자 안
      인라인으로** 넣는다 — -webkit-box 는 인라인 내용을 한 흐름으로 이어
      **눈에 보이는 줄 수**를 세므로 번호가 앞에 붙어도 셈이 그대로다
      (실측으로 확인했다). 띄워 두지(float/absolute) 않은 까닭이 이것이다 —
      떠 있으면 첫 줄만 번호를 피해 들여쓰기가 어긋난다.
    ▣ ★ 번호는 **링크 밖**이다. 번호를 눌러 글이 열리면 뜻이 어긋난다 —
      낱장으로 가는 것은 제목이다.
    ▣ 번호와 제목이 붙어 읽히지 않게 사이를 띄운다. */
#repList .src .n,
#thread .src .n{font-family:var(--mono);font-size:11px;color:var(--water);
  margin-right:2px}
/*  ★ 제목은 **두 줄까지만 보인다** (2026-09-02 지시: "조황글 타이틀은 2줄이
    넘어가지 않도록 단축해서 표시해").
    ▣ 왜 CSS 인가 — 글자를 JS 로 잘라 내면 **잘린 뒤가 색인에 안 들어간다.**
      이 사이트는 검색 노출이 목적이라 원문은 HTML 에 그대로 두고 **보이는
      것만** 묶는다. 말줄임(…)은 line-clamp 이 붙인다.
    ▣ 실측(2026-09-02, 폰 360px 8줄) — 1줄 3 · 2줄 3 · 3줄 1 · **5줄 1**.
      다섯 줄짜리 하나가 카드를 통째로 잡아먹어 목록이 들쭉날쭉했다.
    ▣ ★ 높이를 두 줄로 **못 박지는 않는다** — 한 줄짜리까지 두 줄 자리를
      차지하면 짧은 줄마다 빈 자리가 생긴다. fishlog.kr 폰의 `.row .tit` 에
      오늘 넣은 것과 **같은 결**이다(파일은 서로 다르니 거기는 안 건드렸다).
    ▣ 「근거」 목록(#thread .src)도 같은 줄로 묶는다 — 같은 srcRow() 가 그리는
      같은 카드이고, 근거는 훑어보는 목록이라 두 줄이 오히려 읽기 좋다.
      여기서 자리를 가르면 같은 것이 두 모양이 된다.
    ▣ 누르는 넓이는 줄지 않는다 — <a> 는 그대로 인라인이라 보이는 두 줄이
      통째로 손잡이다(실측: 링크 폭 360px 에서 235~240px 로 전후 동일). */
#repList .src .t2,
#thread .src .t2{margin:2px 0 0;font-size:13.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#repList .src .m,
#thread .src .m{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:11px;color:var(--dim);
  font-family:var(--mono)}
/*  ★ 조황지수 — 다섯 칸 눈금 (2026-09-02 지시: "원문보기 앞에 조황지수를
    그래프로 추가해").
    ▣ 왜 **5칸 pip** 인가 (막대가 아니라) — 같은 파일 2364줄의 등급 막대
      (.fcbars)는 **날짜 열넷을 나란히** 견주는 그래프라 높이가 뜻을 나른다.
      여기는 줄 하나에 값 하나뿐이라 견줄 짝이 없고, 카드 안 한 줄에 들어가야
      해서 세로로 자랄 자리가 없다. 다섯 칸은 **세어서** 읽히고 줄 높이를
      건드리지 않는다. 모양은 fishnow.kr 의 `.row .grade` 를 그대로 옮겼다
      (그 파일은 안 건드렸다 — 어두운 판이라 색만 이 화면 것으로 바꿨다).
    ▣ ★ 등급 없는 글도 **칸 다섯을 그린다** (2026-09-02 지시로 정정:
      "조황지수 「판단 보류」 대신 빈 그래프로 대체해").
      ▣ 앞서는 글자로 적었다. 까닭은 '빈 칸 다섯 = ★0 = 최악' 으로 읽힐까
        봐서였는데, 실제 화면에서는 목록 맨 위가 늘 **예고글**(아직 안 나간
        출조 모집글)이라 여덟 줄이 통째로 글자였다 — 등급이 매겨지려면
        마리수를 알아야 하고(crawler/vector/grade.py), 최근 7일 12,010건 중
        마리수를 아는 것이 296건(2%)뿐이다. 보류는 고장이 아니라 사실이지만,
        줄마다 글자가 서면 목록이 눈금 없는 표가 된다.
      ▣ ★ 그래서 **오해는 모양으로 막는다** — 못 채운 칸과 낮은 등급이
        눈으로 갈려야 한다:
          · 등급 있는 줄의 **안 채운 칸** … 옅은 회색으로 **채워진** 홈
            (background:var(--line) + 실선) — '재어 보니 여기까지' 라는 눈금.
          · 등급 없는 줄의 **다섯 칸** … 채움 없이 **점선 테두리만**
            (background:none + dashed + opacity) — '아직 못 잰 자리' 다.
        칠해진 것과 비어 있는 것, 실선과 점선 — 색을 못 보아도 갈린다.
      ▣ ★ 색인에 **아직 없는 글**(env 가 아무 값도 안 주는 글)도 같은 빈
        그래프다. 사람에게는 둘 다 「아직 모른다」이고, 우리 색인이 언제
        따라잡는지는 손님이 알 바가 아니다.
      ▣ ★ 그림만 비우고 **뜻까지 비우지 않는다** — 낭독기에는 aria-label 로,
        마우스에는 title 로 「매길 기록이 부족하다」를 그대로 말한다. 같은
        파일 2364줄(날짜별 조과 예측)이 「판단 보류」를 title 에 적는 결이다.
      ▣ 줄 높이는 등급 있는 줄과 **같다** — 그것이 이 바꿈의 이득이다.
    ▣ 색만으로 뜻을 나르지 않는다 — 채운 칸 수(모양)로 읽히고, 낭독기에는
      aria-label 로 온말을 준다. */
#repList .src .gidx,
#thread .src .gidx{display:inline-flex;align-items:center;gap:5px;margin-top:5px;
  margin-right:10px;vertical-align:middle}
#repList .src .gidx b,
#thread .src .gidx b{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--dim)}
#repList .src .gidx .pips,
#thread .src .gidx .pips{display:inline-flex;gap:2px}
#repList .src .gidx i,
#thread .src .gidx i{width:7px;height:13px;border-radius:1.5px;background:var(--line);
  border:1px solid var(--line)}
#repList .src .gidx i.on,
#thread .src .gidx i.on{background:var(--water);border-color:var(--water)}
/*  ★ 등급이 없을 때 — 칸 다섯은 그대로 두되 **비운다**(위 주석).
    ▣ ★ 모양은 **naksigo.com `/today` 에서 확정된 것과 같다**(2026-09-02) —
      `background:none · border:1px dashed · box-shadow:none · opacity:.85`.
      두 사이트가 갈리면 같은 눈금이 다른 뜻으로 읽힌다. 클래스 이름만
      이 화면 것(`.gidx.none`)이고 뜻하는 바(`none`)는 그쪽 `.grade.none`
      과 같다.
    ▣ 낮은 등급의 **안 채운 칸**은 옅은 회색으로 **채워진 홈**(실선)이고,
      여기 다섯 칸은 **점선 테두리만**(바탕 없음)이다 — 칠해진 것과 비어
      있는 것, 실선과 점선이라 색을 못 보아도 갈린다. 같은 카드 안
      「사진 없음」 칸(.th.none)을 점선으로 둔 그 결과 같다. */
#repList .src .gidx.none i,
#thread .src .gidx.none i{background:none;border:1px dashed var(--line);
  box-shadow:none;opacity:.85}
#repList .src .gidx.none b,
#thread .src .gidx.none b{color:var(--dim);opacity:.8}
#repList .src .orig,
#thread .src .orig{display:inline-block;margin-top:5px;font-size:11.5px;color:var(--water)}
#repList .src .th,
#thread .src .th{position:absolute;right:10px;bottom:10px;width:64px;height:48px;object-fit:cover;
  border-radius:9px;border:1px solid var(--line);background:var(--card-2, var(--bay))}
#repList .src .th.none,
#thread .src .th.none{display:flex;align-items:center;justify-content:center;border-style:dashed;
  background:none;color:var(--dim);font-size:10px}
.morebtn{width:100%;height:46px;border:1px dashed var(--line);border-radius:12px;
  background:none;color:var(--water);font:inherit;font-size:13px;cursor:pointer}
.scopes{display:flex;gap:6px;overflow-x:auto;padding:2px 0;margin:8px 0 0;scrollbar-width:none}
.scopes::-webkit-scrollbar{display:none}
.scopes button{flex:0 0 auto;min-height:44px;padding:0 13px;border:1px solid var(--line);
  border-radius:99px;background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;
  cursor:pointer}
.scopes button[aria-pressed="true"]{background:var(--water);color:#fff;border-color:transparent}
.erow{display:block;width:100%;text-align:left;padding:11px 12px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);font:inherit;
  cursor:pointer}
.erow .h{display:block;font-size:14px;color:var(--ink)}
.erow .kd{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:99px;
  background:var(--card-2);color:var(--dim);font-size:10.5px}
.erow .m{display:block;margin-top:3px;font-size:11.5px;color:var(--dim);line-height:1.55}
.fmeta{margin:0 2px 8px;font-size:12px;color:var(--dim)}
.fmeta b{color:var(--ink);font-family:var(--mono)}

/* ── 시트 안 — 접는 칸·낱말 단추 ─────────────────────────────────────── */
.sh .fold{border-top:1px solid var(--line);margin-top:8px}
.sh .fold>summary{min-height:44px;display:flex;align-items:center;gap:6px;
  font-size:13.5px;cursor:pointer}
.sh .fold>summary .cnt{margin-left:auto;color:var(--dim);font-size:12px;font-family:var(--mono)}
.sh .fold>.in{padding-bottom:6px}
/*  ★ 시트 안 쪽 넘김 — 지역의 항구 목록이 20곳씩 끊긴다 (2026-09-23 지시).
    손가락으로 누르는 화면이라 단추를 **44px** 로 세운다(이 화면의 다른 손잡이와
    같은 크기). 가로로 넘치면 그 줄만 밀어 본다 — 본문은 밀리지 않는다. */
/*  ★ 가로로 **밀지 않고 접는다** — `overflow-x:auto` + `justify-content:center`
    는 넘칠 때 왼쪽 끝(‹ 단추)이 스크롤로도 안 닿는 자리에 숨는다(360px 실측).
    두 줄이 되더라도 모든 쪽 단추가 손에 닿는 쪽이 낫다. */
.sh .mpager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
  padding:10px 2px 2px}
.sh .mpager button{min-width:38px;min-height:38px;border:1px solid var(--line);
  background:var(--card-2);color:var(--ink);border-radius:9px;font:inherit;
  font-size:13px;font-family:var(--mono);cursor:pointer;flex:0 0 auto}
.sh .mpager button[aria-current="page"]{background:var(--ink);color:var(--card);
  border-color:var(--ink);font-weight:700}
.sh .mpager button[disabled]{opacity:.35;cursor:default}
.sh .ent{min-height:34px;border:1px solid var(--line);background:var(--card-2);
  color:var(--ink);border-radius:99px;padding:5px 11px;margin:0 5px 5px 0;font:inherit;
  font-size:12.5px;cursor:pointer}
.sh .mbar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;
  align-items:end;height:64px;margin-top:8px}
.sh .mbar i{display:block;border-radius:3px 3px 1px 1px;background:var(--water)}
.sh .mbx{display:flex;justify-content:space-between;margin-top:3px;font-family:var(--mono);
  font-size:9.5px;color:var(--dim)}
.sh h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0;font-size:17px;
  font-family:var(--ui);letter-spacing:0;color:var(--ink);text-transform:none}
.sh .nkacts{display:inline-flex;gap:6px;margin-left:auto}
/*  ★ 폰의 좋아요·관심선박 아이콘은 **3/4** 로 (2026-08-20 지시).
    선박 상세 시트·관심선박 목록 등 이 화면 전체에 건다. 실측 15px → 11.25px.
    ▣ 「질의결과」 줄만 예외로 두 배(18px)다 — 운영자가 그대로 두라 했고,
      아래 .rkrow 규칙이 더 자세해서 그 자리만 남는다.
    ▣ 손가락 표적은 줄이지 않는다 — 보이는 크기와 누르는 크기는 다른 일이다.
      단추의 padding·min-height 는 그대로 두고 **그림만** 줄인다. */
.nkacts svg{width:11.25px;height:11.25px}
.nkacts .ic{font-size:18.75px}
/*  ★ 「질의결과」 줄의 좋아요·관심선박 — **아이콘 두 배, 숫자는 오른쪽**
    (2026-08-20 운영자 지시).
    ▣ 무엇이 문제였나 — 이 줄의 아이콘은 9x9 였다(실측). 손가락으로 누르기도
      눈으로 알아보기도 작고, 그 옆 숫자가 자리를 못 얻어 **아이콘 아래로
      접혀** 두 줄이 됐다(실측: 숫자가 아이콘보다 12px 아래).
    ▣ 아이콘 9 → 18px(두 배). 숫자는 nowrap 으로 오른쪽에 못박고, 줄바꿈이
      생기지 않게 단추를 flex-wrap:nowrap 으로 둔다.
    ▣ ★ 손가락 표적은 44px 을 지킨다 — 보이는 알약은 그대로 두고 ::after 로
      투명 표적을 넓힌다(작은 단추를 크게 만들면 줄이 통째로 두꺼워진다).
    ▣ ★ **폰의 「질의결과」에만** 건다. 줄 짜임(_rankrow_css.php)은 데스크톱
      「검색결과」와 공용이라 거기에 적으면 데스크톱 아이콘까지 커진다 —
      이 지시는 폰 것이다. */
/*  ★ 상자를 걷으면 둘이 붙어 「♡0☆0」 한 덩이로 읽힌다 — 사이를 벌려
    좋아요와 관심선박이 **다른 두 가지**임을 자리로 말한다. */
/*  ★ display 를 여기서 직접 준다 — 폰에는 `.sh .nkacts` (시트 안) 규칙만
    있어서, 「질의결과」의 .nkacts 는 flex 가 아니었다. flex 가 아니면 gap 이
    아무 일도 안 한다(실측: gap:12px 인데 둘 사이 0px). */
.rkrow .racts .nkacts{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:12px}
/*  ★ 「질의결과」 줄에서는 단추의 **알약 상자를 걷는다** (2026-08-20 지시).
    ▣ 왜 — 이 줄에는 이미 순위·별·썸네일이 각자 테두리를 갖고 서 있다.
      거기에 알약이 둘 더 붙으니 눈이 먼저 그 상자들에 걸려, 정작 읽어야 할
      배 이름과 조황이 뒤로 밀렸다. 하트와 별은 **모양 자체가 이미 단추**다.
    ▣ 누를 수 있다는 것은 무엇이 말하나 — ① 아이콘 모양(하트·별) ② 눌렀을
      때 차오르는 색(.on) ③ 투명 44px 표적. 상자는 그 셋에 더해 없어도 된다.
    ▣ 표적은 그대로 44px 이다 — 보이는 것만 걷었지 누르는 자리는 안 줄였다. */
.rkrow .racts .nkacts button{position:relative;flex-wrap:nowrap;gap:5px;padding:0;
  border:0;background:none;box-shadow:none}
.rkrow .racts .nkacts button:hover{background:none}
.rkrow .racts .nkacts button::after{content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
/*  ★ 「질의결과」 줄의 썸네일은 **오른쪽에 붙인다** (2026-08-20 지시).
    줄의 오른쪽 칸(3열)에 서지만 폭이 62px 로 고정이라, 칸이 그보다 넓으면
    가운데에 떠 보였다. justify-self 로 오른쪽 끝에 못박는다 — 위의 좋아요·
    관심선박과 오른쪽 선이 맞아야 줄이 가지런하다. */
.rkrow img.th{justify-self:end}
/*  ★ 「질의결과」는 **두 배 그대로 둔다** (2026-08-20 재지시: "질의결과는
    그대로 둬"). 아래 3/4 규칙보다 자세해서 이 자리만 18px 로 남는다. */
.rkrow .racts .nkacts svg{width:18px;height:18px;flex:0 0 auto}
.rkrow .racts .nkacts .ic{font-size:30px}
.rkrow .racts .nkacts .cnt{white-space:nowrap;font-size:12px;line-height:1}
.sh .nkacts button{display:inline-flex;align-items:center;gap:4px;min-height:34px;
  padding:0 10px;border:1px solid var(--line);border-radius:99px;background:var(--card);
  color:var(--dim);font:inherit;font-size:11.5px;cursor:pointer}
.sh .nkacts button.on{color:var(--water);border-color:var(--water)}
/*  ★ 3/4 로 (2026-08-20 지시) — 15 → 11.25px. 이 규칙이 아래 `.nkacts svg`
    보다 자세해서, 여기를 안 고치면 시트 안 아이콘만 예전 크기로 남는다
    (실측으로 걸렸다). 단추 크기는 그대로 — 그림만 줄인다. */
.sh .nkacts .ic{width:11.25px;height:11.25px;flex:0 0 auto}
.sh .nkacts .cnt{font-family:var(--mono);font-weight:700}
.sh .kv{display:grid;grid-template-columns:64px minmax(0,1fr);gap:2px 10px;font-size:13px;
  margin-top:8px}
.sh .kv dt{color:var(--dim)} .sh .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.sh .cta{display:flex;gap:8px;margin-top:12px}
.sh .cta a{flex:1;height:48px;border-radius:12px;background:var(--water);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:7px;font-weight:700;
  text-decoration:none;font-size:14.5px}
.sh .cta a.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
/*  ★ 배 시트 아래의 두 손잡이 — 「조과 분석」·「조과 예측」을 **반반**
    (2026-09-03 지시로 한 줄짜리였던 것을 나눴다).
    ▣ 폭만 반이다. **높이는 그대로 48px** — 바로 위 「전화 걸기 · AI에게 질의」가
      48px 이라, 여기만 낮추면 시트 아래가 층이 진다. 관심선박 줄의 26px 박스는
      **줄 안에 끼는 작은 손잡이**의 값이고(`--btbtn-h`), 이 자리는 예전부터
      시트의 큰 손잡이였다. `layout/_boattrend.php` 의 `--btbtn-*` 는 네 화면이
      함께 쓰는 값이라 **건드리지 않았다**.
    ▣ 아이콘 크기만 그 한 벌 값을 그대로 쓴다(`--btbtn-ico`).
    ▣ ★ 반이 되어도 **글자를 자르지 않는다** — 여섯 글자(조과 분석·조과 예측)가
      먼저이고, 모자라면 곁말(`<s>`)이 먼저 접힌다. 360px 실측으로 확인했다. */
.fcopen{width:100%;min-height:48px;margin-top:8px;border:1px solid var(--line);
  border-radius:12px;background:var(--card-2);color:var(--ink);font:inherit;font-size:14px;
  cursor:pointer}
/*  ★ **이 줄 안에서만** 반반으로 선다 — 항구 시트의 「이 항구 낚시배 조과
    예측 ›」 도 같은 `.fcopen` 이라, 아래 모양 규칙을 `.fcopen` 에 그냥 얹으면
    그쪽 글줄까지 한 줄로 못박혀 좁은 폰에서 넘칠 수 있다. 줄 안으로 좁힌다. */
.fcrow{display:flex;gap:8px;margin-top:8px}
.fcrow .fcopen{flex:1 1 0;min-width:0;margin-top:0;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  white-space:nowrap;padding:6px 8px}
.fcrow .fcopen .rfcico{width:var(--btbtn-ico,11px);height:var(--btbtn-ico,11px);flex:0 0 auto}
/*  곁말(기간)은 이름 뒤에 옅게 — 자리가 모자라면 이것부터 접힌다. */
.fcrow .fcopen s{all:unset;font-size:10.5px;color:var(--dim);min-width:0;overflow:hidden}
.sh .li{display:block;width:100%;text-align:left;min-height:48px;padding:9px 11px;
  margin-bottom:6px;border:1px solid var(--line);border-radius:11px;background:var(--card);
  font:inherit;cursor:pointer}
.sh .li .h{display:block;font-size:14px;color:var(--ink)}
.sh .li .m{display:block;font-size:11.5px;color:var(--dim);font-family:var(--mono)}

/* ══ 묻기 ═════════════════════════════════════════════════════════════ */
/*  ★ 아이콘 둘 · 묻는 칸 · 오른쪽 세로줄 — 셋 다 **세로 가운데**로 맞춘다
    (2026-08-20 지시: "묻기 아이콘은 맨우측 중앙에"). 예전에는 아래끝
    맞춤이라 칸이 두 줄로 커지자 단추가 바닥에 붙어 보였다. */
.qbox{display:flex;gap:6px;align-items:center}
/*  ★ 오른쪽 세로줄 — 마이크(위)와 「질의」(아래)를 **같은 크기**로 쌓는다.
    ▣ 마이크는 JS 가 #sendBtn **앞**에 넣으므로, 이 상자가 둘을 함께 담는다.
    ▣ 34px 은 마이크가 쓰는 값이다(Voice.mic 의 size). 두 단추가 한 변을
      공유해야 세로줄이 반듯하다 — 한쪽만 바꾸면 어긋난다.
    ▣ 손가락 표적은 44px 을 지킨다 — 보이는 네모는 34 이되 ::after 로 넓힌다. */
.qgo{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:center}
.qbox .vcwrap{order:-1}          /* 마이크가 위, 「질의」가 아래 */
/*  ★ 「AI 답변」 줄의 스피커·서랍 단추에 **상자를 두른다** (2026-08-24 지시:
    "m.onfishing.net 에서도 스피커 아이콘에 대하여 박스를 추가해").
    ▣ 공용 조각(_voice_css.php)은 답변 자리의 단추에서 상자를 일부러 걷어
      두었다(그림만으로 충분하다는 판단). 폰에서는 그 판단을 뒤집는다 —
      제목 「AI 답변」 옆에 그림만 떠 있으면 글씨 장식처럼 보여 눌러 볼 생각을
      안 한다. 데스크톱은 그대로 둔다(지시가 폰을 가리켰다).
    ▣ 옷은 화면에 이미 있는 것을 쓴다 — 카드·칩과 같은 테(--line)·바탕(--card).
      m.naksigo.com 질의 아이콘 상자와 같은 결이다(모서리 9px).
    ▣ 표적(::after 44px)·초점 테두리·켜짐 색(aria-pressed)은 손대지 않는다. */
.vcbar .vcwrap .vcbtn{border:1px solid var(--line);background:var(--card);
  border-radius:9px}
.vcbar .vcwrap .vcbtn:hover{border-color:var(--line);background:var(--card)}
/*  ★ **읽는 중일 때 아이콘이 통째로 사라지던 것**을 고친다 (2026-08-24 지시).
    공용 규칙의 눌린 모양(배경 물빛 + 흰 아이콘)을, 위에서 상자를 두르며 넣은
    `background:var(--card)` 가 같은 특이도로 뒤에 와서 배경만 이겼다 —
    흰 바탕에 흰 아이콘이 되어 빈 네모로 보였다(실측). 눌린 상태는 여기서
    배경·테·아이콘을 **한 자리에서** 다시 정한다. */
.vcbar .vcwrap .vcbtn[aria-pressed="true"]{
  background:var(--vc-accent);border-color:var(--vc-accent);color:#fff}
/*  ★ 질의 줄 **마이크의 '듣는 중'** 도 또렷하게 (2026-08-24).
    이 화면에는 `.composer button`·`.qbox button` 처럼 단추 바탕을 정하는 규칙이
    따로 있어, 공용 규칙의 눌린 모양(물빛 바탕 + 흰 아이콘)이 배경만 덮여
    **듣고 있는지 알 수 없었다**(실측: 흰 바탕에 곁말색 아이콘).
    답변 줄 단추와 **같은 모양**으로 못박는다 — 한 화면에서 켜짐이 두 가지로
    보이면 둘 다 장식으로 읽힌다. 숨쉬는 테(.vclive)는 그대로 둔다. */
.composer .vcwrap .vcbtn[aria-pressed="true"],
#composer .vcwrap .vcbtn[aria-pressed="true"],
.qbox .vcwrap .vcbtn[aria-pressed="true"]{
  background:var(--vc-accent);border-color:var(--vc-accent);color:#fff}
/*  ★ 녹음이 안 되는 기기의 마이크 — 잠긴 모양(공용 .vclock)이 상자 안에서도
    보이게. 감추지 않는다: 눌러 보면 까닭을 한 줄로 말한다. */
.vcwrap .vcbtn.vclock{opacity:.42}

/*  ★ 처음부터 **두 줄**이 보인다 (2026-08-20 지시: "질의어 입력되는 칸의 공간은
    2줄 입력이 가능하도록 조정해"). 16px × 1.5줄높이 × 2줄 + 위아래 여백 20 +
    테두리 2 = 70px. 한 줄만 보이면 긴 질문을 쓰는 동안 앞머리가 위로 밀려
    올라가 무엇을 썼는지 안 보인다.
    ▣ max-height 는 그대로 140px — 더 길어지면 칸 안에서 굴린다. */
.qbox textarea{flex:1 1 auto;min-width:0;min-height:70px;max-height:140px;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  font-family:var(--ui);font-size:16px;line-height:1.5;resize:none}
/*  ★ 「질의」를 마이크와 **같은 34px 네모**로 줄인다(2026-08-20 지시).
    가로로 길던 알약이 입력칸을 먹고 있었다 — 그 자리를 글 쓰는 데 돌려준다. */
.qbox #sendBtn{position:relative;flex:0 0 auto;width:34px;height:34px;padding:0;
  border:0;border-radius:11px;background:var(--water);color:#fff;
  font-weight:700;font-size:11px;line-height:1;letter-spacing:-.5px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.qbox #sendBtn::after{content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
.qbox #sendBtn:disabled{opacity:.55;cursor:progress}
/*  ★ 아이콘 둘은 **세로로 쌓아** 입력칸 오른쪽에 세운다 — 두 줄이 된 칸의
    높이(70px)에 44px 손잡이 둘이 들어가지 않으므로 32px씩 두 개를 세운다.
    (m.naksigo 는 한 줄 칸이라 가로로 놓았다 — 자리에 맞춰 고른 것이다)
    ▣ 그래도 **손가락 표적은 44px 을 지킨다** — 눈에 보이는 네모는 32px 이되
      ::after 로 투명 표적을 44px 로 넓힌다. */
.askicons{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
.askicons button{position:relative;width:32px;height:32px;padding:0;border:1px solid var(--line);
  border-radius:9px;background:var(--card);color:var(--dim);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.askicons button::after{content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
.askicons button:active{background:var(--line)}
.askicons svg{width:18px;height:18px}
/*  「조황정보 출처」 숫자 표 — 데스크톱과 같은 두 칸 짜임. */
.srcnums{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:6px 0 0;
  font-size:13px}
.srcnums dt{color:var(--dim)}
.srcnums dd{margin:0}
.srcnums dd b{font-family:var(--mono);font-weight:700}
.qlist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.qlist button{text-align:left;min-height:44px;padding:9px 12px;border:1px solid var(--line);
  border-radius:11px;background:var(--card);color:var(--ink);font:inherit;font-size:13.5px;
  cursor:pointer}
.exs2{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.exs2 button{border:1px solid var(--line);border-radius:99px;background:var(--card);
  color:var(--ink);font:inherit;font-size:12.5px;min-height:44px;padding:0 13px;cursor:pointer}
.stage{font-size:12px;color:var(--dim);margin:10px 0 6px;display:flex;align-items:center;gap:6px}
.stage .dot{width:7px;height:7px;border-radius:99px;background:var(--water);animation:bl 1s infinite}
/*  ★ 대기 고리 — 「묻기」가 도는 동안 (2026-08-20 지시).
    답이 오기까지 몇 초 걸린다. 글자만 있으면 멈춘 것으로 읽힌다. */
.stage .spin{width:13px;height:13px;flex:0 0 auto;border-radius:99px;
  border:2px solid color-mix(in srgb, var(--water) 25%, transparent);
  border-top-color:var(--water);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.stage .spin{animation:none}}
@keyframes bl{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.stage .dot{animation:none}}
.bubble{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;
  font-size:14px;line-height:1.7}

/* ══ 물때 탭 — 카드 속(.mtide)은 공용 CSS 가 입힌다 ═══════════════════ */
#tideBox .mtide{margin-top:2px}
.srcline2{margin:8px 2px 0;font-size:11px;color:var(--dim);line-height:1.7}

/* ══ 탭띠 ═════════════════════════════════════════════════════════════ */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));background:var(--card);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs button{min-height:56px;border:0;background:none;color:var(--dim);font:inherit;
  font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;cursor:pointer}
/*  ★ 고른 탭을 **더 뚜렷하게** — 2026-08-20 운영자 지시
    ("하단 메뉴가 선택 되었음을 표시하는 것이 눈에 잘 안띄어 좀 강조해줘").
    ▣ 무엇이 모자랐나 — 색과 굵기만 달랐다. 이 색(--water)은 화면 곳곳에
      쓰이는 색이라, 아래 띠에서 한 칸만 그 색이 되면 '눌린 것'으로 안 읽힌다.
    ▣ 표를 **셋으로 겹친다** — 눈이 어느 하나만 놓쳐도 나머지가 말한다:
      ① 위쪽 굵은 밑줄(3px) — 띠에서 그 칸이 서 있다는 표
      ② 아이콘 뒤 옅은 알약 — 그 칸만 바탕이 다르다
      ③ 색과 굵기(원래 있던 것)
    ▣ ★ 색만으로 알리지 않는다 — 색을 못 가리는 사람에게도 밑줄과 알약의
      **모양**이 남는다. aria-selected 는 이미 붙어 있어 낭독기도 안다.
    ▣ 움직임은 넣지 않는다 — 탭은 자주 눌리는 자리라 그때마다 무언가 미끄러지면
      멀미가 난다. */
.tabs button{position:relative}
.tabs button[aria-selected="true"]{color:var(--water);font-weight:700}
.tabs button[aria-selected="true"]::before{content:"";position:absolute;
  top:0;left:18%;right:18%;height:3px;border-radius:0 0 3px 3px;background:var(--water)}
.tabs button[aria-selected="true"] .i{
  background:color-mix(in srgb, var(--water) 14%, transparent);
  border-radius:99px;padding:3px;box-sizing:content-box;margin:-3px}
.tabs .i{width:22px;height:22px}

/* ══ 시트 ═════════════════════════════════════════════════════════════ */
#sheet{position:fixed;inset:0;z-index:60;display:none}
#sheet.on{display:block}
#sheet .shdim{position:absolute;inset:0;background:rgba(6,20,28,.5)}
#sheet > .in{position:absolute;left:0;right:0;bottom:0;
  /*  ★ vh 는 zoom 을 안 따라온다 — 글자 크기만큼 되돌려 나눈다(위 주석). */
  max-height:calc(88vh / var(--fs,1));overflow:auto;
  background:var(--card);border:1px solid var(--line);border-bottom:0;
  border-radius:16px 16px 0 0;padding:0 13px calc(16px + env(safe-area-inset-bottom));
  transform:translateY(0);transition:transform .18s ease}
#sheet.dragging > .in{transition:none}
.sheetgrip{position:sticky;top:0;z-index:2;background:var(--card);display:flex;
  align-items:center;justify-content:center;height:40px;margin:0 -13px 4px;
  border-radius:16px 16px 0 0;touch-action:none;cursor:grab}
.sheetgrip .grab{width:44px;height:5px;border-radius:99px;background:var(--line)}
.sheetx{position:absolute;right:6px;top:3px;width:34px;height:34px;border:0;border-radius:99px;
  background:none;color:var(--dim);font-size:16px;cursor:pointer}

/*  ★ 「열기」를 누르면 모래시계가 돈다 — 2026-08-20 운영자 지시.
    그 배의 예약 사이트를 그 자리에서 긁으므로 **최대 15초** 걸린다. 글자만
    있으면 눌린 것인지 멈춘 것인지 몰라 사람이 다시 누른다.
    글자도 같이 바꾼다("여는 중…") — 그림만으로 알리지 않는다.
    prefers-reduced-motion 이면 돌리지 않는다. */
.bkhg{width:13px;height:13px;vertical-align:-2px;margin-right:4px;
  animation:bkhgspin 1.6s ease-in-out infinite}
@keyframes bkhgspin{0%,45%{transform:rotate(0)}55%,100%{transform:rotate(180deg)}}
@media (prefers-reduced-motion:reduce){.bkhg{animation:none}}
/* ══ 조과 예측 · 남은 자리 · 빈자리 알림 ══════════════════════════════ */
:root{--fcn:15}
.fcbars{display:grid;grid-template-columns:repeat(var(--fcn,14),minmax(0,1fr));gap:3px;
  align-items:end;height:96px;margin-top:10px}
.fcbars i{display:block;border-radius:4px 4px 2px 2px;background:var(--water)}
.fcbars i.n{background:var(--line)}
/*  조과 예측 확대/축소(2026-10-01, m.naksigo 와 같은 것 — fcZoomPrep 머리말) */
.fczhost h3 .fczbtn{position:relative;vertical-align:middle;margin-left:6px;width:24px;height:24px;border:1px solid var(--line);border-radius:6px;
  background:var(--hull);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.fczhost h3 .fczbtn::before{content:'';position:absolute;inset:-10px}
.fczhost h3 .fczbtn svg{width:14px;height:14px}
.fczhost h3 .fczbtn:focus-visible{outline:2px solid var(--water);outline-offset:2px}
.fcscroll{display:flow-root;position:relative}
.fcin{position:relative}
.fczoom .fcscroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin}
.fczoom .fcin{width:200%}
.fczoom .fcx{font-size:10.5px}
.fczoom .fcx span em.mul{font-size:10px}
.fczoom .fcxaxis{font-size:11px}
.fczoom .fcvals b{font-size:11.5px}
/*  날짜별 조과 예측 — 날짜 아래 물때(2026-10-01 지시) */
.fcx span em.mul{display:block;font-style:normal;font-size:8.5px;line-height:1.2;color:var(--water,#2E7D91)}
.fcx span em.mul.jo{color:#B3372A}

.fcbars i.lim{outline:2px solid var(--hot,#C4451F);outline-offset:-2px}
/*  ★ 금어기 날 (2026-08-24 지시) — 색만으로 알리지 않는다. 막대는 흐려지고
    빗금이 지며, title 에 「금어기 …(잡을 수 없는 날)」 이 함께 붙는다. */
.fcbars i.closed{opacity:.45;background-image:repeating-linear-gradient(
  45deg, rgba(0,0,0,.28) 0 2px, transparent 2px 5px)}
.fcseason{margin:8px 0 0;padding:8px 10px;border:1px solid var(--line);
  border-left:3px solid var(--water);border-radius:8px;background:var(--hull);
  font-size:12.5px;line-height:1.6}
.fcseason b{color:var(--water)}
.fcseason .sub{display:block;color:var(--dim);font-size:11.5px}
.fcseason.shut{border-left-color:var(--hot,#C4451F)}
.fcseason.shut b{color:var(--hot,#C4451F)}
.fcx{display:grid;grid-template-columns:repeat(var(--fcn,14),minmax(0,1fr));gap:3px;margin-top:4px;
  font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.fcx span{white-space:nowrap;text-align:center;overflow:visible}
/*  ★ 겹칠 때 건너뛴 날짜 — 지우지 않고 감춘다(2026-08-24). 지우면 칸이 밀려
    남은 날짜가 남의 막대 아래로 간다. */
.fcx span.hid{visibility:hidden}
.bkh{display:flex;align-items:baseline;gap:8px;margin:14px 0 0;font-size:13.5px;color:var(--ink)}
.bkh .muted{flex:1 1 auto;margin-left:6px;font-size:11.5px;font-weight:400}
.bktog{flex:0 0 auto;min-height:0;padding:4px 12px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:11.5px;font-weight:700}
.bktog[aria-expanded="true"]{background:var(--line);color:var(--dim)}
.bktog:disabled{opacity:.6;cursor:progress}
.bkcap{margin:10px 0 6px;font-size:12.5px;color:var(--ink)}
.bkcap b{font-family:var(--mono)}
.bkcap .alt{display:block;margin-top:2px;font-size:11px;color:var(--dim)}
.bksum{margin:0 0 7px;font-size:12px;color:var(--dim);line-height:1.65}
.bksum b{color:var(--ink);font-family:var(--mono)}
.bklist{max-height:230px;overflow-y:auto;border:1px solid var(--line);border-radius:11px;
  background:var(--card)}
.bkrow{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px 10px;
  border-bottom:1px solid var(--line)}
.bkrow:last-child{border-bottom:0}
.bkrow .dt{grid-area:1/1;font-family:var(--mono);font-size:12px;color:var(--ink)}
.bkrow .dt i{font-style:normal;margin-left:3px;font-size:11px;color:var(--dim)}
.bkrow .dt i.we{color:var(--hot,#C4451F)}
.bkrow .tm{margin-left:6px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.bkrow .sp{grid-area:2/1;font-size:11px;color:var(--dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bkrow .sp b{color:var(--ink);font-weight:600}
.bkseat{grid-area:1/2/3/3;align-self:center;justify-self:end;padding:3px 9px;border-radius:99px;
  white-space:nowrap;font-family:var(--mono);font-size:11.5px;font-weight:700;
  background:color-mix(in srgb, var(--water) 14%, transparent);
  color:color-mix(in srgb, var(--water) 55%, var(--ink))}
.bkseat.few{background:color-mix(in srgb, var(--hot,#C4451F) 13%, transparent);
  color:color-mix(in srgb, var(--hot,#C4451F) 62%, var(--ink))}
.bkseat.off{background:var(--line);color:var(--dim);font-family:var(--ui);font-weight:600;font-size:11px}
.bkseat.unk{background:none;border:1px dashed var(--line);color:var(--dim);
  font-family:var(--ui);font-weight:600;font-size:11px}
.bkfoot{margin:7px 0 0;font-size:10.5px;color:var(--dim);line-height:1.7}
.bkfoot b{color:var(--ink)}
.bkfoot a{color:var(--water);font-weight:600}
.vabell{margin-left:6px;padding:3px 9px;border-radius:99px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font:inherit;font-size:11px;cursor:pointer}
.vabell.on{background:var(--water);border-color:transparent;color:#fff;font-weight:700}
.vabell:disabled{opacity:.5}
.vanote{margin:6px 2px 0;font-size:11.5px;color:var(--ink-soft,#3E5C66)}

/* ══ 나 · 공통 잔 것들 ═══════════════════════════════════════════════ */
.msv{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.msv:first-child{border-top:0}
.msv .sp{flex:1 1 auto}
.msv .nm{font-size:14px}
.msv .mini{flex:0 0 auto;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer;
  font-family:var(--ui)}
/*  ══ 「조과 분석」·「조과 예측」 앞의 아이콘 (2026-09-02 지시로 폰에도) ═══════
    ▣ ★ **둘이 다른 그림**이다 — 뜻이 반대 방향이라 같은 그래프를 나란히 두면
      가릴 수 없다. 분석은 축 위의 **꺾은선**(지나온 자취), 예측은 **점선 뒤
      화살촉**(아직 안 온 길). 데스크톱(service/_rankrow_css.php)과 같은 그림이다.
    ▣ ★ 그림은 **3/4 로 줄인다** — 이 화면의 규칙이다(위 `.nkacts svg` 주석,
      2026-08-20 지시). 데스크톱 13px → 여기 9.75px. 손가락 표적은 줄이지
      않는다(단추의 padding·min-height 는 그대로다).
    ▣ 글자를 대신하지 않는다 — 이름은 그대로 남고 아이콘은 `aria-hidden` 이다. */
.msv .mini .rfcico{width:var(--btbtn-ico,11px);height:var(--btbtn-ico,11px);
  flex:0 0 auto;margin-right:4px}
/*  ★ **보이는 박스는 낮추고, 누르는 넓이는 44px 로 남긴다**
    (2026-09-02 지시: "개별 조과 분석 및 조과 예측의 아이콘 박스 높이를 줄여줘").
    ▣ 안쪽 여백(padding)을 줄이면 손가락 표적까지 함께 줄어든다 — 그래서
      **테두리·바탕이 그리는 박스만** 28px 로 낮추고, 모자란 높이는
      `::before` 로 **보이지 않는 누름판**을 얹어 채운다. 보이는 크기와 누르는
      크기는 다른 일이다(이 화면이 아이콘을 3/4 로 줄이면서도 표적은 그대로 둔
      그 규칙과 같다).
    ▣ ★ 두 단추가 **같은 규칙**을 쓰므로 높이가 서로 어긋나지 않는다 —
      하나만 낮으면 그것이 더 눈에 띈다.
    ▣ 글자는 그대로 남긴다 — 아이콘만 남기지 않는다(앞서 정한 것). */
/*  ★ 값은 **한 벌**이다 — layout/_boattrend.php 의 `--btbtn-*` 를 쓴다.
    네 화면(onfishing 데스크톱·폰, naksigo 데스크톱·폰)이 같은 높이로 선다.
    보이는 박스만 낮추고 누르는 넓이는 `::before` 누름판으로 44px 을 남긴다. */
.msv .mini{display:inline-flex;align-items:center;position:relative;line-height:1.3;
  min-height:var(--btbtn-h,26px);
  padding:var(--btbtn-pad-y,2px) var(--btbtn-pad-x,9px)}
.msv .mini::before{content:'';position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:var(--btbtn-tap,44px)}
/*  ★ 관심선박 줄은 단추가 둘이라 좁은 폰에서 접힐 수 있다 — 접히게 둔다.
    잘리는 것보다 낫고, 배 이름이 먼저 읽혀야 한다. */
.msv{flex-wrap:wrap}
.msv .li{min-width:0}
/*  ★ 제목 줄 — 이름은 왼쪽, 「전부」 손잡이는 **오른쪽 끝**에 붙인다
    (2026-09-02 지시: "조과 분석 전부는 우측에 정렬"). `margin-left:auto` 라
    배 이름이 길어도 무너지지 않는다(제목이 먼저 자리를 차지하고 남는 자리를
    손잡이가 오른쪽에서 채운다). */
/*  ★ 특정도를 위 `.card h2.t` 와 맞춰야 이긴다 — `.favhead` 만으로는
    같은 한 칸짜리라 뒤에 선 쪽(.card h2.t)이 display 를 도로 가져간다(실측:
    손잡이가 오른쪽 끝에서 167px 떨어져 섰다). */
/*  ★ 칸으로 가져온 쪽(/analysis 등)의 쪽 넘김 — 쪽 그대로면 글자 링크라 손가락으로 못 누른다(2026-10-01 전체 링크 점검). */
.pnl nav.pager{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 8px}
.pnl nav.pager a,.pnl nav.pager span{min-width:38px;height:38px;padding:0 8px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);
  text-decoration:none;font-size:13px;box-sizing:border-box}
.pnl nav.pager span.on{background:var(--ink);color:var(--card);border-color:transparent;font-weight:700}
.card h2.t.favhead{display:flex;align-items:center;gap:6px}
.card h2.t.favhead #favAll{margin-left:auto}
.favall{display:inline-flex;align-items:center;gap:4px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:8px;padding:4px 8px;font-size:11.5px;font-family:var(--ui);
  cursor:pointer;white-space:nowrap;min-height:32px}
.favall .rfcico{width:var(--btbtn-ico,11px);height:var(--btbtn-ico,11px);flex:0 0 auto}
.favall s{all:unset;font-size:10px;color:var(--dim)}
.linkish{border:0;background:none;padding:0;font:inherit;color:var(--water);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cta2{display:flex;gap:8px;margin-top:10px}
.cta2 a{flex:1;height:46px;border:1px solid var(--line);border-radius:11px;display:flex;
  align-items:center;justify-content:center;text-decoration:none;color:var(--ink)}
.cta2 a.hot{background:var(--water);color:#fff;border-color:transparent;font-weight:700}
/*  ★ 한글은 **낱말 가운데서 끊지 않는다** (2026-08-28). 기본값은 CJK 를
    아무 자리에서나 접어, 좁은 폰에서 「사업자등록번/호」로 잘렸다(실측).
    keep-all 이면 띄어쓰기에서만 접힌다. */
.foot{color:var(--dim);font-size:11.5px;line-height:1.8;text-align:center;margin:14px 0 0;word-break:keep-all}
.foot a{color:var(--water)}
:focus-visible{outline:2px solid var(--water);outline-offset:2px}
/*  못 여는 이름 — 링크처럼 보이지 않게(데스크톱과 같은 규칙, 2026-08-27). */
.noent{color:var(--ink-soft);}
/*  ══ 조황글 낱장의 규칙을 **이 자리에도** (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) ════════════════════════════════════════
    낱장을 그대로 가져다 넣으므로 글자 크기만 이 자리에 맞춘다 — 폰 폭에서
    낱장의 20px 제목은 넉 줄을 먹는다. 낱장 자체는 안 건드린다. */
.sh .rp{padding:0;max-width:none}
.sh .rp h1{font-size:16px;line-height:1.45;margin:2px 0 8px}
.sh .rp .spec{padding:10px 12px}
/*  ★ 선박 박스 — 낱장의 규칙이 **여기까지 안 따라온다**(낱장 CSS 는 그 쪽
    페이지에만 있다). 그래서 시트/칸 안에서는 dl 이 브라우저 기본값으로 떨어져
    이름과 값이 **줄마다 따로** 섰다 (2026-09-01 지시: "같은 줄에 배치해.
    지금은 라인이 바뀌고 있어"). 낱장과 **같은 규칙**을 여기에도 둔다.
    ★ 두 자리에 같은 글이 있다 — 낱장은 Pages.php 의 reportCss(). 고칠 때 둘 다. */
.sh .rp .spec dl{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:13px}
.sh .rp .spec dl > .it{display:flex;align-items:baseline;gap:5px;min-width:0}
.sh .rp .spec dt{color:var(--ink-soft);font-size:12px;flex:0 0 auto}
.sh .rp .spec dd{margin:0;word-break:keep-all;min-width:0}
.sh .rp img.th{max-height:220px;object-fit:cover}

/* ══ 칸 줄(StackNav) — 팝업 대신 오른쪽으로 넘기는 칸 (2026-10-01 지시, docs/mobile_stack_nav_plan.md) ══════════
   ▣ 창(문서)은 굴리지 않는다 — 탭마다 가로 줄(.stk) 하나, 그 안의 칸(.pnl)이 저마다 위아래로 구른다.
   ▣ 줄은 scroll-snap 으로 한 칸씩 멈춘다. 왼쪽으로 넘기면 이전 칸, 오른쪽이면 다음 칸(남겨 둔 것).
   ▣ ★ vh 는 zoom(글자 크기)을 안 따라온다 — 높이를 var(--fs) 로 되돌려 나눈다(위 글자 크기 주석). */
html,body{overflow:hidden}
.app{height:calc(100dvh / var(--fs,1));min-height:0}
main{flex:1 1 auto;min-height:0;padding:0;max-width:none;margin:0;position:relative;overflow:hidden}
main > section[data-tab]{height:100%}
.stk{height:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stk::-webkit-scrollbar{display:none}
.pnl{flex:0 0 100%;min-width:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;
  scroll-snap-align:start;scroll-snap-stop:always;position:relative}
.pnl > .pin{max-width:760px;margin:0 auto;padding:10px 10px 76px}
.pnl.sub > .pin{padding:4px 13px calc(80px + env(safe-area-inset-bottom));background:var(--card);min-height:calc(100% - 44px)}
.pnlh{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:4px;height:44px;padding:0 4px 0 0;
  background:var(--card);border-bottom:1px solid var(--line)}
.pnlh .bk{flex:0 0 auto;min-width:44px;height:44px;border:0;background:none;color:var(--ink);font-size:24px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pnlh .bk:focus-visible{outline:2px solid var(--water);outline-offset:-4px}
.pnlh .t{flex:1 1 auto;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnlh .dots{flex:0 0 auto;display:flex;gap:4px;padding-right:8px}
.pnlh .dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.pnlh .dots i.on{background:var(--water)}
#sheet:not(.on){display:none!important}            /* 시트는 이제 칸이다 — 질의 예시·지난 질의 팝업(popSheet)만 이 껍데기를 쓴다 */
.sh .rp{padding:0;max-width:none}
/* 공용 층을 칸 안에 눕힌다 — 공용 파일은 그대로, 여기서만 모양을 바꾼다 */
.pnl .inpnl{position:static!important;inset:auto!important;display:block!important;z-index:auto!important}
.pnl .inpnl > .ptdim,.pnl .inpnl > .btdim,.pnl .inpnl > .vcdim,.pnl .inpnl > .pdim{display:none!important}
.pnl .inpnl .ptwin,.pnl .inpnl .btwin,.pnl .inpnl .vcwin,.pnl .inpnl .pwin{position:static!important;transform:none!important;
  left:auto!important;top:auto!important;width:auto!important;max-width:none!important;max-height:none!important;
  height:auto!important;overflow:visible!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  margin:0!important;padding:6px 0 0!important;background:transparent!important}
.pnl .inpnl #ptBox,.pnl .inpnl #btBox,.pnl .inpnl #vcBox{max-height:none!important;overflow:visible!important}
.pnl .inpnl .ptx,.pnl .inpnl .btx,.pnl .inpnl .vcx,.pnl .inpnl .px{display:none!important}
.pnl .inpnl .pbody{height:clamp(220px,calc(70dvh / var(--fs,1)),640px)!important;
  /* ★ 칸 안에서는 손가락을 브라우저에 돌려준다 (2026-10-01 지시: 인생고기 사진만 있는 칸에서 좌측 넘김·확대 축소가 안 됨).
     공용 사진 보기는 사진 위 가로 몸짓을 「다음 사진」으로 쓰려고 pan-y 로 막아 두었다 — 칸에서는 그 몸짓이 칸 넘김(뒤로)이고
     두 손가락은 확대다. 사진끼리는 아래 썸네일 줄로 넘긴다. 넘김이 시작되면 브라우저가 pointercancel 을 보내 공용 넘기기는 저절로 멈춘다. */
  touch-action:auto!important;cursor:auto!important}

.pnl dialog.inpnl{position:static!important;display:block;inset:auto;margin:0!important;padding:0!important;border:0!important;
  width:auto!important;max-width:none!important;max-height:none!important;height:auto!important;overflow:visible!important;
  background:transparent!important;color:inherit;box-shadow:none!important;transform:none!important}
.pnl dialog.inpnl::backdrop{display:none}
.pnl dialog.inpnl .svx{display:none!important}     /* 칸 머리의 ‹ 가 닫기 몫 — 창의 ✕ 는 걷는다(「그만두기」 단추는 남긴다) */
.pnl dialog.inpnl > div{max-height:none!important;overflow:visible!important;width:auto!important;max-width:none!important}

/* 항구 칸 단추 줄 — 작게(2026-10-01 지시). 누름판은 44px(.ptbtn::before) 그대로 두고 보이는 상자만 줄인다. */
.sh .pcall{gap:6px;margin-top:10px}
.sh .pcall .ptbtn{padding:4px 9px;min-height:28px;font-size:12px;border-radius:7px}
.sh .pcall .ptbtn .ar{font-size:11px}
.sh .pcall .ptbtn.ext{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none}
/* 정보 줄(.kv)의 이름 칩(어종·항구·선사) — 작게(2026-10-01 지시: "항구정보에 어종에 대한 박스를 줄여"). 항구·배·선사 칸이
   같은 칩이라 함께 줄인다. 누름판은 ::before 44px 로 지킨다. */
.sh .kv .ent{position:relative;min-height:24px;padding:1px 9px;font-size:12.5px;border-radius:7px;margin:1px 0}
.sh .kv .ent::before{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:36px}
.sh .kv dd{line-height:1.9}
.sh .mtpanel{padding:0;border:0;background:transparent;box-shadow:none}

/* ══ 가운데 팝업 — 질의 예시·지난 질의 (2026-10-01 지시: "팝업은 화면 중앙에 출력") ══ */
#sheet.center > .in{top:50%;bottom:auto;left:50%;right:auto;transform:translate(-50%,-50%)!important;
  width:min(calc(100vw - 32px),440px);max-height:calc(78dvh / var(--fs,1));border:1px solid var(--line);
  border-radius:16px;padding:0 14px 14px;box-shadow:0 18px 50px rgba(6,20,28,.28);transition:none}
#sheet.center .sheetgrip{border-radius:16px 16px 0 0;margin:0 -14px 2px;justify-content:flex-start;padding-left:14px;cursor:default}
#sheet.center .sheetgrip .grab{display:none}
/* ══ 질의 결과·근거 — 펼친 채로, 조금 큰 접기/펼치기 단추 (2026-10-01 지시) ══ */
.qfold > summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.qfold > summary::-webkit-details-marker{display:none}
.qfold > summary .t{margin:0;flex:1 1 auto;min-width:0}
.qfold > summary .tg{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--card-2);color:var(--ink);font-size:13px;font-weight:700}
.qfold > summary:focus-visible .tg{outline:2px solid var(--water);outline-offset:2px}
.qfold > summary .tg .cl{display:none}
.qfold:not([open]) > summary .tg .op{display:none}
.qfold:not([open]) > summary .tg .cl{display:inline}
.qfold.src0 > summary .t{font-size:15px;font-weight:700;color:var(--ink)}
/* 조황사진 목록 칸 (2026-10-01 지시) — 사진은 칸 폭 그대로, 아래에 출처. 두 손가락 확대는 브라우저 몫. */
.pnl .phli{margin:0 0 14px}
.pnl .phli img{display:block;width:100%;height:auto;min-height:120px;border-radius:10px;border:1px solid var(--line);background:var(--card-2, var(--bay))}
.pnl .phli figcaption{margin-top:5px;font-size:11.5px;color:var(--dim);line-height:1.5;word-break:break-all}
.pnl .phli figcaption .n{font-family:var(--mono);color:var(--ink-soft)}
.pnl .phli figcaption b{color:var(--ink)}
.pnl .phli figcaption a{color:var(--dim)}
/* 로그인 칸 — 로그인 쪽의 모양을 칸에 그대로(2026-10-01 지시) */
.pnl .loginwrap{max-width:460px;margin:10px auto}
.pnl .loginwrap h1{font-size:22px;margin:0 0 6px;color:var(--lamp)}
.pnl .loginwrap .lead{color:var(--dim);font-size:14px;margin:0 0 18px}
.pnl .bonus{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
  background:var(--bay);color:var(--on-bay-dim);font-size:13.5px;margin-bottom:16px}
.pnl .bonus b{font-family:var(--mono);font-size:16px}
.pnl .sso{display:flex;flex-direction:column;gap:9px}
.pnl .sso a{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 14px;border-radius:11px;text-decoration:none;font-weight:700;
  font-size:15px;border:1px solid rgba(var(--sh),.18)}
.pnl .sso .mk{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;
  font-size:12px;font-weight:800;background:rgba(255,255,255,.22)}
.pnl .sso .off{opacity:.45;pointer-events:none}
.pnl .why{margin-top:18px;font-size:12.5px;color:var(--dim);line-height:1.7}
.pnl .why b{color:var(--ink)}
/* ══ 선박정보 칸 — 링크 상자를 모두 「조황 분석」·「홈페이지」 크기로 (2026-10-01 지시: "m.onfishing.net 의 선박정보에서 모든 링크 박스의 크기는
   조황 분석이나 홈페이지 박스 크기로 조정해") — 높이 28px·글자 12px·모서리 7px. 좋아요·관심선박·이름 아래 항구 상자가 34px 로 컸다(실측).
   보이는 상자만 줄이고 누르는 넓이는 44px 그대로(::before). */
.pnl .sh .nkacts button{height:28px;min-height:28px;padding:0 9px;font-size:12px;border-radius:7px;position:relative}
.pnl .sh .nkacts button::before{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.pnl .sh .ent{min-height:28px;padding:2px 9px;font-size:12px;border-radius:7px;line-height:1.5}
@media (prefers-reduced-motion:reduce){ .stk{scroll-behavior:auto} }