:root{
  --deep:#050D12; --panel:#0B1A22; --panel2:#102630; --grid:#1B3A47;
  --ink:#DCEEF2; --dim:#6D95A2; --soft:#9FBDC7;
  --now:#3BE08A; --amber:#F2B441; --alert:#FF6B5A;
  --mono:"D2Coding",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --gothic:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--deep);color:var(--ink);font-family:var(--gothic);font-size:15px;
  line-height:1.6;-webkit-font-smoothing:antialiased;min-height:calc(100vh / var(--fs,1));
  zoom:var(--fs,1)}
/*  ══ 글자 크기 (2026-08-27 지시: "m.onfishing.net/#me 의 「글자 크기」 기능을
    m.fishnow.kr/mine 에도 추가해서 구현해") ═══════════════════════════════════
    ▣ ★ 왜 `zoom` 인가 — 이 화면은 글자·여백·아이콘이 **전부 px** 로 짜여 있다.
      html 의 font-size 를 키워도 px 값은 꿈쩍하지 않아 글자만 커지고 칸은
      그대로다(줄이 넘치고 단추 안에서 글자가 잘린다). zoom 은 화면 전체를
      같은 비율로 키워 짜임새를 지킨다 — 손가락으로 벌린 것과 같다.
      m.onfishing.net 이 같은 까닭으로 같은 것을 쓴다.
    ▣ ★ 다만 **vh·vw 는 zoom 을 따라오지 않는다** — 92vh 가 그대로 1.35배가
      되어 화면 밖으로 넘친다. 그래서 vh·vw 를 쓰는 자리마다 `/var(--fs,1)`
      로 되돌려 나눈다. 이 사이트에는 그런 자리가 여덟 곳이다(이 body 와
      팝업 셋 — _entity·_survey·_photoview). ★ 새로 vh·vw 를 쓰면 여기도
      같이 나눠 줘야 한다.
    ▣ ★ 기본값이 1 이라 **데스크톱(fishnow.kr)에는 아무 일도 안 일어난다** —
      --fs 를 정하는 것은 폰의 「내 기록」 화면뿐이다.
    ▣ 기본은 1(지금 크기)이고 **키우기만** 한다 — 지시가 '더 크게' 다. 작게는
      두지 않는다: 이미 10~12px 인 곁말이 더 작아지면 못 읽는다.
    ▣ 단계·이름·저장 방식은 m.onfishing.net 과 같다(같은 것을 다르게 두면
      두 화면을 오가는 사람이 매번 다시 익힌다). */
body.mo .fzs{display:flex;gap:6px;margin-top:8px}
body.mo .fzs button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;padding:9px 0 8px;
  border:1px solid var(--grid);border-radius:3px;background:var(--panel);
  color:var(--ink);font:inherit;line-height:1.1;cursor:pointer}
body.mo .fzs button span{font-size:10.5px;color:var(--dim);line-height:1.2}
body.mo .fzs button[aria-pressed="true"]{border-color:var(--now);color:var(--now)}
a{color:var(--now);text-decoration:none}
a:hover{color:var(--ink)}
/*  ★ 조황정보의 지역·항구·어종·물때 링크(2026-08-25 지시: "조황정보에서
    지역,항구,어종,물때 등에 추가로 링크를 추가하고 …") — 둘러싼 글과 같은
    색으로 놓아 두고 점선 밑줄로만 "누를 수 있다"를 알린다. 여기저기 초록
    글자가 흩어지면 표가 산만해진다(둘러싼 .port·.sp·.reg 가 이미 각자의
    색을 정해 뒀다 — 그 색 그대로 물려받는다). */
/*  ★ `.qlink` 는 **왼쪽 목록을 그 낱말로 조회하는** 평범한 링크다(2026-08-26
    재지시 — 「최근 24시간 어종」이 이 갈래다). `.entlink` 는 **팝업을 여는**
    링크다. 하는 일은 달라도 "누를 수 있다"는 표시는 같아야 해서 옷은 한 벌로
    묶는다 — 눈이 두 종류의 밑줄을 구별해야 할 까닭이 없다. */
a.entlink,a.qlink{color:inherit;text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:currentColor;text-underline-offset:2px;opacity:.92}
/*  ★ `.entlink` 는 href 가 없다(팝업을 여는 자리다) — 그러면 손 모양 커서가
    안 뜬다. 밑줄까지 그어 놓고 커서만 글자 모양이면 "눌리는 것" 으로 안 읽힌다.
    포커스 테두리는 위의 :focus-visible 한 벌이 그대로 맡는다. */
a.entlink{cursor:pointer}
a.entlink:hover,a.qlink:hover{color:var(--now);opacity:1}
::selection{background:var(--now);color:#04120A}
:focus-visible{outline:2px solid var(--now);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 14px}

/* ── 계기판 머리 — 늘 켜져 있는 줄 ── */
.head{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,#081319,#0B1A22);
  border-bottom:1px solid var(--grid);padding:11px 0 9px}
.hrow{max-width:1180px;margin:0 auto;padding:0 14px;display:flex;align-items:baseline;
  gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.brand{font-family:var(--gothic);font-size:18px;font-weight:800;color:var(--ink);
  letter-spacing:-.3px}
.brand b{color:var(--now)}
.sp{flex:1}
/*  ★ 살아 있다는 점 — 이 사이트의 심장이다. 움직임을 줄여 달라는 사람에게도
    없애지 않고 늦춘다(멈추면 '지금'이라는 뜻까지 사라진다). */
.live{display:inline-flex;align-items:center;gap:6px;color:var(--now);font-weight:700}
.live i{width:7px;height:7px;border-radius:50%;background:var(--now);display:inline-block;
  animation:beat 1.6s ease-in-out infinite;box-shadow:0 0 8px var(--now)}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.live i{animation-duration:4s}}
.live.stale i{background:var(--dim);box-shadow:none;animation:none}
.live.stale{color:var(--dim)}
.clock{font-family:var(--mono);font-size:13px;color:var(--ink)}
.hnav a{margin-left:10px;color:var(--dim)}
.hnav a[aria-current]{color:var(--ink);font-weight:700;border-bottom:2px solid var(--now)}

/* ── 계기 넷 ── */
/*  ★ 계기·검색칸·해역칩 셋의 사이 간격을 **한 자로 통일**한다 (2026-08-25
    지시: "질의어 UI 의 칸 간격을 다른 항목들과 조화가 되도록"). 앞서는 칸
    사이 틈이 계기 10px · 검색칸 8px · 해역칩 6px 로 셋 다 달라, 아래로
    내려가며 리듬이 좁아지는 것처럼 보였다(실측 스크린샷). 이제 열 사이
    간격은 셋 다 10px, 아래 여백도 12px 로 같다. */
.gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 12px}
@media (max-width:720px){.gauges{grid-template-columns:repeat(2,minmax(0,1fr))}}
.g{background:var(--panel);border:1px solid var(--grid);border-radius:3px;padding:10px 12px}
.g .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim)}
.g .v{font-family:var(--mono);font-size:23px;font-weight:700;color:var(--now);
  font-variant-numeric:tabular-nums;line-height:1.25}
.g .v small{font-size:11px;color:var(--dim);font-weight:400;margin-left:3px}
/*  ★ 첫 계기의 괄호 속 24시간 수 — 큰 수(1시간)보다 **한 단 작고 흐리게**
    (2026-08-25). 둘 다 23px 로 두면 어느 쪽이 지금 이 순간인지 안 읽힌다. */
.g .v b.sub{font-size:13px;font-weight:400;color:var(--dim);margin-left:3px}
.g.amber .v{color:var(--amber)}

/* ── 기재란 · 해역 ── */
.ask{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.ask input{flex:1;min-width:170px;background:var(--panel);border:1px solid var(--grid);
  color:var(--ink);font:inherit;font-size:16px;padding:9px 12px;border-radius:3px}
.ask input::placeholder{color:var(--dim);font-size:13px}
.ask button{background:transparent;border:1px solid var(--now);color:var(--now);font:inherit;
  font-family:var(--mono);font-size:12.5px;padding:9px 16px;border-radius:3px;cursor:pointer;
  min-height:40px}
.ask button:hover{background:var(--now);color:#04120A;font-weight:700}
/*  ★ 「조회」 단추 — 데스크톱은 **글자만**(예전 그대로), 폰은 **아이콘만**
    (2026-08-27 지시). 마크업은 하나이고 옷만 갈아입는다. */
.ask .icobtn .ico{display:none}
body.mo .ask .icobtn .txt{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}   /* 읽어 주는 기기에는 남긴다 */
body.mo .ask .icobtn .ico{display:block}
.zones{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px;font-family:var(--mono);font-size:12px}
.zones a{border:1px solid var(--grid);border-radius:2px;padding:5px 11px;color:var(--dim)}
.zones a.on{border-color:var(--now);color:var(--now);font-weight:700}
.qchip{border:1px solid var(--amber);color:var(--amber);border-radius:2px;padding:5px 10px;
  font-family:var(--mono);font-size:12px;white-space:nowrap}
.qchip b{margin-left:5px;font-weight:800}
/*  ★ 조황글 낱장의 **선박명 줄** (2026-09-06 지시: "선박명 옆에 「예약 사이트」
    링크를 추가하고 …"). 이름과 손잡이가 한 줄에 선다.
    ▣ ★ **접힌다**(flex-wrap) — 배 이름에는 「선장 : 고찬민 / 블레스호」처럼 긴
      것이 있어 320px 에서 한 줄에 못 담는다. 안 접으면 본문이 가로로 밀린다
      (작업규칙 §4 — 이 저장소가 여러 번 겪은 자리).
    ▣ `align-items:center` — 이름(13px)과 손잡이(12px+테두리)의 키가 달라
      기준선으로 맞추면 손잡이가 한 칸 내려앉아 보인다. */
.boatline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/*  ★ 누르는 넓이 44px — `.jot` 와 **같은 수법**(::after 로 넓히기)이다.
    보이는 크기는 옆의 「원문 보기」 와 한 벌이어야 하므로 키우지 않는다.
    ::after 는 이 링크의 자식이라 그 위를 눌러도 링크가 받는다. */
.qchip.tap{position:relative}
.qchip.tap::after{content:"";position:absolute;left:50%;top:50%;
  width:max(44px,100%);height:44px;transform:translate(-50%,-50%)}

/* ── 수신 줄 ── */
/*  ★ 머리글(head)과 표(body)를 **따로** 놓아, 표의 위쪽 모서리가 오른쪽
    「최근 24시간 어종」 칸(side)과 나란히 서게 한다(2026-08-25 지시:
    "'최근 24시간 어종'은 좌측 조황정보 테이블과 row 의 위치를 일치시켜줘").
    앞서는 머리글까지 한 칸(왼쪽 열 전체)이라 표 자체는 오른쪽 칸보다 한 단
    아래에서 시작했다. */
/*  ★ head~body 사이(세로)만 줄인다(2026-08-25 재지시: "다음의 시작하는
    조황정보와의 라인 간격은 줄여줘") — body~side 사이(가로)는 14px 그대로
    두고 세로 틈만 6px 로 좁힌다(gap 의 첫 값이 행, 둘째 값이 열). */
.two{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  grid-template-areas:"head ." "body side";gap:6px 14px;align-items:start}
.two-head{grid-area:head}
.two-body{grid-area:body;min-width:0}
.side{grid-area:side}
@media (max-width:1000px){.two{grid-template-columns:minmax(0,1fr);
  grid-template-areas:"head" "body" "side"}}
/*  ★ 곁칸이 없는 화면 — 「지금」은 두 그래프를 「조과」로 보내고 한 칸이
    되었다(2026-08-27 지시). 오른쪽 300px 을 비워 두면 목록이 화면 가운데서
    끝나 잘린 것처럼 보인다. */
.two.one{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body"}
/*  ★ 「조과」 — 그래프 셋을 폭에 맞춰 늘어놓는다. 넓으면 셋이 나란히,
    좁아지면 스스로 접힌다(카드 하나가 260px 밑으로는 안 줄어든다). */
.catchwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;align-items:start}
.board{background:var(--panel);border:1px solid var(--grid);border-radius:3px;overflow:hidden}
.bhead{display:grid;grid-template-columns:66px 1.05fr 1fr 1.4fr 62px 132px;gap:0 12px;
  padding:8px 14px;border-bottom:1px solid var(--grid);background:#08161D;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim)}
.bhead .n{text-align:right}
/*  ★ 「마리」 칸을 걷고 그 자리에 **등급**을 세운다(2026-08-25 지시) — 열
    이름은 그대로 `grade`(예전 `cnt`)로 두어 span 규칙(양쪽 줄에 걸침)을
    그대로 물려받는다. 제목·메타 덩이는 `body` 하나로 묶는다(아래 .row .body
    — display:contents 라 표에서는 예전처럼 port·boat·sp·tit 칸으로 흩어진다
    — 표 짜임 자체는 안 바뀐다, 마리 칸만 등급으로 바뀐다). */
/*  ★ 수신 줄은 **세 줄**이다(2026-08-26 지시).
      ① 시각·항구·선박·어종 (왼쪽) ┊ 등급·관심선박·좋아요 (오른쪽)
      ② 몇분전·지역·선사·정원·톤수·물때·물세기·수온·바람·파고·낚시지수 ┊ 사진
      ③ 조황글 제목                                                    ┊ 사진(2행 병합)
    ▣ 첫째 줄은 **예전 표의 칸을 그대로** 쓴다(66px·1.05fr·1fr·1.4fr) — 지시의
      "좌측 정렬"은 줄마다 칸이 맞아떨어질 때 비로소 뜻이 산다. 등급·기입이
      맨 오른쪽 두 칸이라 그대로 "우측 정렬"이 된다.
    ▣ 사진 칸(58px)은 없앴다 — 썸네일이 둘째·셋째 줄의 오른쪽으로 내려가
      기입 칸 자리에서 2행을 병합한다("둘째줄과 2row 의 썸네일").
    ▣ align-items 를 baseline→start 로 바꾼다 — 줄이 셋이라 기준선을 맞출
      대상이 첫째 줄뿐이고, start 여야 둘째·셋째 줄이 위에서부터 쌓인다.
    ▣ ★ 둘째·셋째 줄은 **첫 칸(수신)을 비우고 항구 칸부터** 시작한다
      (2026-08-26 재지시: "각 라인의 출력되는 값은 그대로 유지하되 시작점은
      조정해서 기존과 같이 해"). 예전 표에서도 제목 줄이 `"t tit tit tit …"`
      로 수신 칸을 건너뛰고 시작했다 — 시각만 왼쪽 기둥에 서고 나머지 글은
      한 칸 들여쓰는 결이다. 처음 옮길 때 이 들여쓰기를 흘렸다. */
.row{display:grid;grid-template-columns:66px 1.05fr 1fr 1.4fr 62px 132px;
  grid-template-areas:"t port boat sp grade act"
                      ". env env env env th"
                      ". tit tit tit tit th";
  gap:3px 12px;padding:9px 14px 10px;border-bottom:1px solid #10242E;align-items:start}
.row:last-child{border-bottom:0}
.row:hover{background:var(--panel2)}
/*  ★ 갓 들어온 줄은 왼쪽에 인광 띠가 선다 — 훑을 때 '새 것'이 먼저 보인다. */
.row.fresh{box-shadow:inset 3px 0 0 var(--now)}
/*  ★ 자동 새로고침으로 **방금 얹힌 줄**은 한 번 밝았다가 가라앉는다. */
.row.just{animation:land 2.4s ease-out 1}
@keyframes land{0%{background:rgba(59,224,138,.16)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.row.just{animation:none;background:rgba(59,224,138,.08)}}
/*  ★ 버그 고침(2026-08-25 실화면 점검) — 이 규칙이 **수신 시각 칸**의 것인데
    `.row .t` 로 넓게 잡혀 있어 기입 단추의 라벨(`<span class="t">관심선박</span>`)
    까지 인광 초록으로 칠하고 있었다. 단추를 누르면 바탕이 호박색이 되는데
    글자는 초록 그대로라 **대비 1.07:1** — 사실상 안 보였다(실측). 운영자가
    "클릭하여 선택한 후의 아이콘은 배경색을 조정해. 글자가 잘 안보여" 라고
    한 것이 이것이다.
    ★ `>` 로 **직계 자식**만 잡는다 — 수신 시각 span 은 늘 .row 의 직계
      자식이고(now.php·rowHtml 둘 다), grid-area 자체가 직계 자식에만 듣는
      값이라 이 규칙은 처음부터 직계 자식용이었다. 잃는 것이 없다. */
.row > .t{grid-area:t;font-family:var(--mono);font-size:12px;color:var(--now);font-weight:700}
.row > .t s{display:block;text-decoration:none;font-size:10px;color:var(--dim);font-weight:400}
/*  ★ 폰에서만 — 시각과 「몇분 전」을 **한 줄에** 둔다(2026-08-27 지시:
    "지금시간과 몇분 전 정보를 동일 라인에 배치해(글자 색상과 크기는 지금과
    동일하게 유지해)"). 데스크톱은 첫 칸이 66px 뿐이라 한 줄에 못 담는다 —
    그래서 `body.mo` 로 잠근다.
    ▣ ★ `display` 만 바꾼다 — 크기(10px)·색(--dim)·굵기(400)는 위 규칙에서
      그대로 물려받는다. 지시가 "색상과 크기는 지금과 동일하게" 다. */
body.mo .row > .t s{display:inline;margin-left:5px}
/*  ★ 단추 라벨은 **늘 단추의 색을 따른다** — 위 같은 샘이 또 나도 글자가
    바탕에 묻히지 않게 한 겹 더 막아 둔다(.jot.on 은 색을 스스로 정한다). */
.jot .t{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit}
.row .port{grid-area:port;font-size:13.5px;min-width:0}
.row .boat{grid-area:boat;font-weight:700;font-size:13.5px;color:var(--ink);min-width:0;
  overflow-wrap:anywhere}
.row a.boat:hover{color:var(--now)}
.row .sp{grid-area:sp;font-family:var(--mono);font-size:12px;color:var(--dim);min-width:0}
/*  ★ 조황 등급 다섯 칸 (2026-08-25 지시 — naksigo.com 의 조황정보 참고).
    naksigo 는 밝은 판이라 도드라짐·파임(양각·음각)으로 채움을 나타내지만,
    이 사이트는 어두운 계기판이라 그 결이 안 어울린다 — 채운 칸은 인광 초록
    으로 **차 있고**, 빈 칸은 옅은 홈으로 **비어 있다**(이 사이트의 다른
    눈금(.rk .bar)과 같은 어법). 색 없이도 세어진다는 원칙은 그대로 지킨다. */
.row .grade{grid-area:grade;display:inline-flex;gap:2px;justify-self:end;align-self:center}
/*  ★ 빈 칸은 **판(panel) 배경과 뚜렷이 갈리는 색**을 쓴다 — 처음에 판과
    거의 같은 색(#0D2028)을 썼더니 화면에서 다섯 칸이 통째로 안 보였다
    (실측 스크린샷). --grid(#1B3A47)는 이 판이 테두리로 이미 쓰는 밝기라
    바탕 위에서 또렷이 갈린다. */
.row .grade i{width:7px;height:15px;border-radius:1.5px;background:var(--grid)}
.row .grade i.on{background:var(--now)}
/*  ★ 등급이 없을 때 — **점선 빈 칸 다섯**. '나쁘다'가 아니라 '매길 근거가
    없다'는 뜻이다.
    ▣ 2026-09-04 — 여기는 **옅게만**(opacity:.5) 남아 있었다. 그러면 홈 색
      (--grid)이 그대로 차 있어 ★0(재어 보니 최악)과 같은 그림이 되고,
      흑백으로 찍으면 아예 안 갈린다. 다섯 사이트가 함께 정한 「없음」의 결은
      `바탕 없음 · 1px dashed · 그늘 없음 · opacity:.85` 다
      (docs/onfishing_chart_spec.md 「지수가 없을 때」).
    ▣ 테두리 색은 이 판이 홈에 쓰던 --grid 그대로다 — 어두운 계기판에서
      바탕(#0D2028)과 또렷이 갈리는 밝기라 점선이 읽힌다(위 홈 색 주석).
    ▣ 폭·키(7×15)는 안 바뀐다 — 이 판은 `*{box-sizing:border-box}` 라
      테두리를 둘러도 칸이 커지지 않는다(값 있는 칸과 같은 자리에 선다). */
.row .grade.none i{background:none;border:1px dashed var(--grid);
  box-shadow:none;opacity:.85}
/*  ★ 선박지수 — **별 다섯**(배 낱장 머리, boat_detail.php) ────────────────
    2026-09-04 지시: *"fishnow — 배 낱장(개별 선박) 머리에 선박지수가 아예
    없다. 다른 사이트에는 있다."*
    ▣ ★ 뜻 — 그 배 **최근 조황글 열 편의 조황등급 평균**이다(/api/boats/grade,
      :8100 serve/reports.boat_grades). **배 자체를 매긴 점수가 아니다.**
      아래 「My 설문」의 별(.fn-stars)은 **사람이 낸 설문**이라 다른 값이다 —
      한 화면에 둘이 서므로 이름표와 읽어 줄 말로 갈라 둔다.
    ▣ ★ 모양은 **별**이다 — fishtoday.kr(카드 ④줄)·fishlog.kr(제원 줄)이 같은
      값에 쓰는 그림이고, 이 사이트에서도 「내 기록」의 별(.mine-l .st)이 이미
      그 어휘다. 조황지수(막대 다섯)와 모양으로 갈린다.
    ▣ ★ 빈 별은 `--grid`(홈 색)가 아니라 **--dim** 이다 — 획이 가는 ☆ 글자는
      어두운 판에서 통째로 사라진다(mine.php 가 실측으로 겪은 그 탈).
    ▣ ★ 값이 **없으면 점선 빈 별 다섯**이다(.bidx.none) — 다섯 사이트가 함께
      정한 값 그대로: viewBox 16 · stroke-width 1.3 · dasharray "3 2" ·
      1em · 바탕·그늘 없음 · opacity .85. 여기서 혼자 고치지 않는다. */
.bidx{display:inline-flex;gap:1px;align-items:center;font-size:14px;
  line-height:1;white-space:nowrap}
.bidx i{font-style:normal;color:var(--dim)}
.bidx i.on{color:var(--now)}
.bidx.none{color:var(--dim);opacity:.85;line-height:1}
.bidx.none .dash{display:inline-flex;align-items:center;gap:1px}
.bidx.none svg{display:block;vertical-align:middle}
/*  ★ 둘째 줄 — 몇분전·지역·선사·정원·톤수·물때·물세기·수온·바람·파고·
    낚시지수(2026-08-26 지시). 2026-08-25 에는 폰에서만 서던 줄인데, 이번
    지시로 **데스크톱에서도 제 줄을 갖는다**. */
.row .envline{grid-area:env;display:block;font-family:var(--mono);font-size:11px;
  color:var(--dim);line-height:1.6;min-width:0;word-break:keep-all}
/*  ★ 제목을 한 단 키운다(2026-08-26 지시: "3번째 줄의 조황글의 제목은 조금
    크게 해") — 12px → 13.5px. 이제 제 줄을 혼자 쓰는 글인데 항구·선박
    (13.5px)보다 작아 눈이 먼저 가지 않았다. 이 판이 이미 쓰는 눈금으로
    올려 새 크기를 만들지 않는다. */
.row .tit{grid-area:tit;font-size:13.5px;color:var(--soft);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.row .tit:hover{color:var(--now)}
/*  ★ 썸네일 — 둘째·셋째 줄의 **오른쪽에서 2행을 병합**한다(2026-08-26 지시:
    "우측에 1col 에는 둘째줄과 2row 의 썸네일을 배치해"). grid-template-areas
    가 env/tit 두 행 모두에 th 를 적어 두어 병합은 저절로 된다 — grid-row 를
    따로 적지 않는다. 기입 칸(132px) 자리라 justify-self:end 로 오른쪽 끝에
    붙인다("우측 정렬"). */
.row .th{grid-area:th;justify-self:end;align-self:center;width:58px;height:44px;display:block;
  object-fit:cover;border:1px solid var(--grid);background:#08161D;cursor:zoom-in}
.row .th:hover{border-color:var(--now)}
.row .nothumb{grid-area:th;justify-self:end;align-self:center;width:58px;height:44px;
  border:1px dashed #14303C}
.row .act{grid-area:act;text-align:right;white-space:nowrap}
/*  ★ 제목 + 배·지역/항구·어종을 **한 몸통**으로 묶는다(2026-08-25 지시 —
    "2줄과 3줄을 합하여"). 데스크톱에서는 여전히 **없는 것처럼** 만든다 —
    display:contents 면 안의 tit·meta3 가 표의 제 칸(tit·port·boat·sp)으로
    그대로 흩어진다. 폰에서만 진짜 상자가 된다(아래 @media). */
/*  ★ `.meta3` — 항구·선박·어종을 감싼 덩이. 데스크톱에서는 **없는 것처럼**
    만든다(display:contents): 안의 셋이 첫째 줄의 제 칸(port·boat·sp)으로
    그대로 흩어진다. 폰에서만 진짜 상자가 된다(아래 @media).
    ★ 지역(.reg)은 2026-08-26 지시로 **둘째 줄(envline)로 옮겨** 여기서
      사라졌다 — 규칙도 함께 걷었다. */
.row .meta3{display:contents}
/*  ★ 「설문 참여」는 **폰에서만**. 데스크톱 기입 칸은 132px 이라 단추 셋이
    들어가면 표가 무너진다 — 그쪽은 배 낱장에서 참여한다. */
.row .survey-only{display:none}
/*  판독 표 — 기계가 읽었다는 붉은 등. */
.seal{border:1px solid var(--alert);color:var(--alert);font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;padding:0 4px;border-radius:1px;margin-right:6px;vertical-align:1px}
.lack{border:1px solid var(--alert);color:var(--alert);font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;padding:0 4px;border-radius:1px;opacity:.85}
/*  기입 — 호박색. 누르는 넓이는 ::after 로 44px 을 지킨다(작업규칙 §4). */
.jot{position:relative;border:1px solid var(--amber);background:transparent;color:var(--amber);
  font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:2px;cursor:pointer}
.jot::after{content:"";position:absolute;left:50%;top:50%;width:max(44px,100%);height:44px;
  transform:translate(-50%,-50%)}
.jot.on{background:var(--amber);color:#12100A;font-weight:700}
@media (max-width:860px){
  .bhead{display:none}
  /*  ★ 폰의 낱장 짜임 — 데스크톱의 **세 줄 구조(2026-08-26 지시)를 그대로**
      따르되, 좁아서 한 줄에 못 담는 것만 아래로 접는다.
        ① 수신 시각 ┊ 조황 등급(다섯 칸, 오른쪽 끝)
        ② 몇분전·지역·선사·정원·톤수·물때·물세기·수온·바람·파고·낚시지수
        ③ 제목                                     ┊ 사진(③④ 2행 병합)
        ④ 낚시배 · 항구 · 주 어종
        ⑤ 기입(관심선박·좋아요·설문 참여)
      ▣ 데스크톱은 ①에 항구·선박·어종까지 들어가지만 폰에서는 자리가 없어
        ④로 내린다 — 지시의 "좌측 정렬" 은 지켜지고 차례만 접힌다.
      ▣ `meta3` 는 데스크톱에서 display:contents(안 보이는 덩이)였다가 여기서
        처음으로 **진짜 상자**가 된다(한 줄에 가운뎃점으로 잇는다). */
  .row{grid-template-columns:minmax(0,1fr) 66px;
    grid-template-areas:"t grade" "env env" "tit th" "who th" "act act";
    gap:3px 10px;padding:12px 12px}
  .row .grade{font-size:0}                 /* 자리만 오른쪽 끝(justify-self:end) */
  .row .grade i{width:8px;height:14px}
  /*  ★ 폰에서는 이 줄이 **선다**(데스크톱은 위에서 display:none). 값이 하나도
      없으면 now.php 가 아예 안 그리므로 :empty 걱정이 없다. */
  .row .envline{display:block;grid-area:env;font-family:var(--mono);font-size:11px;
    color:var(--dim);white-space:normal;word-break:keep-all;line-height:1.5}
  .row .meta3{display:block;grid-area:who;min-width:0;font-family:var(--mono);font-size:11.5px;
    color:var(--soft);line-height:1.6;word-break:keep-all}
  /*  가운뎃점으로 잇는다. ★ 빈 칸('—' 이라 폰에서 숨긴 것) **바로 뒤의 점은
      지운다** — 안 그러면 줄이 "· AI 갈치" 처럼 점으로 시작한다(실측으로
      잡았다). 숨은 칸은 display:none 이라 CSS 로는 "앞에 보이는 형제가
      있는가" 를 물을 수 없어, `.empty 다음 것` 의 점을 없애는 것으로 푼다. */
  .row .meta3 > *{display:inline}
  .row .meta3 > * + *::before{content:" · ";color:var(--dim)}
  .row .meta3 > .empty + *::before{content:""}
  .row .tit{white-space:normal;font-family:var(--gothic);font-size:14.5px;font-weight:700;
    color:var(--ink);line-height:1.45;margin:2px 0 0}
  .row .port{color:var(--dim)}
  /*  ★ 모르는 칸('—')은 폰에서 **지운다** — 줄 가운데 끼면 읽기만 나빠진다.
      데스크톱 표에서는 그대로 둔다: 칸이 비면 표가 어긋나 보인다. */
  .row .port.empty,.row .boat.empty{display:none}
  .row .boat{font-weight:700;color:var(--ink)}
  .row .sp{color:var(--soft)}
  /*  ★ 사진 — 제목(③)과 배·항구·어종(④)의 **오른쪽에서 2행을 병합**한다
      (2026-08-26 지시와 같은 짜임). align-self:end 로 그 두 줄의 바닥에
      붙이면 글이 사진보다 길 때 사진이 아래로 처진다. */
  .row .th,.row .nothumb{grid-area:th;width:66px;height:50px;
    align-self:end;margin-top:2px}
  .row .nothumb{display:none}   /* 폰에서는 빈 자리를 지운다 — 제목이 넓어진다 */
  .row .act{text-align:left;margin-top:7px;white-space:normal;display:flex;gap:6px;flex-wrap:wrap}
  .row .survey-only{display:inline-block}
}
/*  ══ 「조과」의 차트 (2026-08-27 지시: "그래프 디자인을 차별화 전문화") ═══
    ▣ 곁칸의 작은 막대(.bars)와 **다른 물건**이다 — 그쪽은 300px 칸에 끼워
      넣던 요약이고, 이쪽은 화면의 주인공이라 **Y축·눈금선·바닥선**을 갖춘다.
      숫자를 하나하나 읽지 않아도 서로의 높이가 견줘지는 것이 차트의 값이다.
    ▣ ★ 색은 늘리지 않는다 — 인광 초록 = 집계된 사실(잉크 규율). 셋 다 집계된
      사실이라 한 색으로 가고, 갈래는 **자(Y축)** 로 가른다.
    ▣ 막대는 아래에서 위로 **자라 오른다** — 값이 큰 쪽이 눈에 먼저 든다.
      움직임을 줄여 달라는 사람에게는 자라지 않고 그냥 서 있다. */
/*  ★ 차트 제목을 **세운다**(2026-08-27 지시: "「조과」 메뉴의 그래프의 타이틀을
    강조해줘"). 곁칸 라벨(.g .k — 10px 흐린 모노)을 그대로 쓰고 있어 그림에
    묻혀 있었다. 이 화면에서는 그 칸이 무엇을 세는지가 먼저 읽혀야 한다.
    ▣ 크기·색·굵기를 올리고 왼쪽에 인광 초록 표를 세운다 — 판의 다른 머리글
      (h2.k::before 의 ■)과 같은 어법이다.
    ▣ 단위(★1~5 · 건 · 척)는 뒤에 붙는 곁말이라 예전 크기·색 그대로 둔다 —
      제목만 도드라져야 제목이다. */
/*  ★ 제목 줄이 h1 이어도(2026-09-23) 모양은 한 값이다 — h1 기본 크기(2em)와
    위아래 여백을 여기서 함께 못 박는다. */
.catchwrap .g .k{font-family:var(--gothic);font-size:14px;font-weight:700;margin-top:0;
  letter-spacing:0;color:var(--ink);display:flex;align-items:baseline;gap:7px;
  padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--grid)}
.catchwrap .g .k::before{content:"■";color:var(--now);font-size:8px;flex:0 0 auto}
.catchwrap .g .k .meta{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  font-weight:400;color:var(--dim);margin-left:auto}
.chart{--plot:190px;display:grid;grid-template-columns:34px minmax(0,1fr);
  grid-template-areas:"yax plot" ".  xax";column-gap:8px;margin:10px 0 2px}
.chart .yax{grid-area:yax;position:relative;height:var(--plot)}
.chart .yax span{position:absolute;right:0;transform:translateY(50%);
  font-family:var(--mono);font-size:9.5px;color:var(--dim);white-space:nowrap}
.chart .plot{grid-area:plot;position:relative;height:var(--plot);
  display:flex;align-items:flex-end;gap:4px;
  border-bottom:1px solid var(--grid)}          /* 바닥선 — 0 이 어디인지 */
.chart .plot .gl{position:absolute;left:0;right:0;height:0;
  border-top:1px dashed #14303C;pointer-events:none}
/*  ★ 막대는 링크다(2026-08-27 지시) — a 로 와도 모양은 그대로여야 한다
    (색을 물려받고, 밑줄을 긋지 않는다). 손가락이 닿는 자리가 막대 전체다. */
.chart .cb{position:relative;z-index:1;flex:1 1 0;min-width:0;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  color:inherit;text-decoration:none;cursor:pointer}
.chart a.cb:focus-visible{outline:2px solid var(--now);outline-offset:2px}
.chart .cb b{font-family:var(--mono);font-size:10px;font-weight:700;
  color:var(--soft);line-height:1;margin-bottom:3px}
.chart .cb i{display:block;width:100%;background:var(--grid);
  border-radius:2px 2px 0 0;min-height:2px;animation:grow .5s ease-out}
@keyframes grow{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.chart .cb i{animation:none}}
.chart .cb:hover i{background:var(--soft)}
/*  가장 높은 칸(맨 오른쪽) — 인광 초록으로 도드라진다. */
.chart .cb:last-child i{background:var(--now)}
.chart .cb:last-child b{color:var(--now)}
/*  X축 — 막대와 **같은 칸 나눔**이라 이름이 제 막대 아래에 선다. */
.chart .xax{grid-area:xax;display:flex;gap:4px;margin-top:5px;align-items:flex-start}
/*  ★ 이름은 **가로로는 막대 한가운데**, 세로로는 **축 바로 아래 같은 줄에서
    시작**한다(2026-08-27 지시: "그래프에서 어종명을 가운데 정렬로 해").
    ▣ 가로 가운데는 이미 맞아 있었다(실측: 막대 중심과 라벨 중심이 0px 차이).
      눈에 걸리던 것은 **시작 줄이 제각각**인 점이다 — 세로쓰기라 이름이
      길수록 위아래로 자라는데 가운데로 맞춰 놓아, 짧은 이름(꽃게)은 축에서
      뚝 떨어져 뜨고 긴 이름(무늬오징어)만 축에 붙어 보였다.
    ▣ 그래서 세로는 위(flex-start)로 모아 한 줄에서 출발시키고, 가로 가운데는
      그대로 둔다. 회전한 축 이름을 다루는 흔한 방식이기도 하다. */
.chart .xax span{flex:1 1 0;min-width:0;display:flex;justify-content:center;
  align-items:flex-start}
/*  ★ 세로쓰기는 **이름 그 자체에만** 건다 — 감싼 span 에까지 걸면 그 flex
    상자의 축이 통째로 뒤집혀(주축이 세로가 된다) `justify-content:center` 가
    가로가 아니라 **세로**를 가운데로 맞춘다. 그래서 가로가 8px 밀렸다(실측).
    span 은 평범한 가로 상자로 두어야 가운데·시작이 뜻대로 먹는다. */
.chart .xax span > *,.chart .xax span{font-family:var(--gothic);font-size:10.5px;
  color:var(--dim);line-height:1}
.chart .xax span{writing-mode:horizontal-tb}
.chart .xax a,.chart .xax span:not(:has(a)){writing-mode:vertical-rl;
  max-height:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart .xax a{color:inherit}
.chart .xax span:last-child a,.chart .xax span:last-child{color:var(--now)}
/* ── 곁칸 ── */
/*  ★ 어종별 출항 선박수 막대그래프 (2026-08-26 지시 — X축 어종, Y축 선박수).
    ▣ 세로 막대다. 곁칸이 300px 뿐이라 열 칸이 서면 한 칸이 26px 남짓인데,
      한글 어종 이름은 그 폭에 가로로 안 들어간다 — 이름만 **세로로 세운다**
      (writing-mode). 눕히는 것(rotate)보다 읽기 쉽고 자리도 덜 먹는다.
    ▣ 막대 위에 숫자를 적는다 — 눈금선을 그리는 대신 값을 직접 보여 주는
      쪽이 좁은 칸에서 정확하고, 색을 못 보는 사람에게도 읽힌다.
    ▣ 가장 높은 칸만 인광 초록으로 두드러지게 한다(이 판의 다른 눈금과 같은
      어법 — .rk .bar 참고). 나머지는 한 단 가라앉은 색이다. */
.bars{display:flex;align-items:flex-end;gap:3px;margin:8px 0 2px}
/*  ★ 숫자·막대·이름이 **각자 제 자리**를 갖는다(세 줄 그리드). 처음에는 셋이
    한 상자의 높이를 나눠 쓰게 했더니 막대가 높은 칸에서 이름이 잘렸다
    ("백조기" → "백⋮", 실측). 막대 칸(84px)이 정해진 높이라 그 안에서
    height:NN% 가 그대로 먹는다. */
.bars .bc{flex:1 1 0;min-width:0;display:grid;grid-template-rows:12px 84px 52px;
  align-items:end;justify-items:center}
.bars .bc b{font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--soft);
  line-height:1}
.bars .bc i{display:block;width:100%;background:var(--grid);border-radius:1px 1px 0 0;
  min-height:3px;align-self:end}
/*  ★ X축이 **적은 순 → 많은 순**이라(2026-08-27 지시) 가장 높은 칸은 맨
    오른쪽이다 — 도드라짐도 :last-child 로 옮겼다. */
.bars .bc:last-child i{background:var(--now)}
.bars .bc:last-child b{color:var(--now)}
/*  이름 — 세로쓰기. 길면 말줄임(…)으로 끊는다(무늬오징어처럼 다섯 자). */
.bars .bc s{writing-mode:vertical-rl;text-decoration:none;font-family:var(--gothic);
  font-size:10px;color:var(--dim);line-height:1;margin-top:4px;align-self:start;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/*  ★ 이름이 링크인 칸(「최근 24시간 어종」) — 세로쓰기 안에서도 누를 수 있다는
    표시가 남아야 한다. 점선 밑줄은 세로글에서 **글자 옆**에 서므로 그대로 쓴다. */
.bars .bc s a{color:inherit}
.bars .bc:last-child s a{color:var(--now)}
.side .g{margin-bottom:10px}
.rk{font-family:var(--mono);font-size:12.5px}
.rk .r{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:9px;padding:5px 0;
  border-bottom:1px solid #10242E;align-items:baseline}
.rk .r:last-child{border-bottom:0}
.rk .i{color:var(--dim);font-size:10px}
.rk .n{text-align:right;color:var(--now);font-variant-numeric:tabular-nums}
.rk .bar{grid-column:2/span 2;height:3px;background:#0D2028;margin-top:3px}
.rk .bar i{display:block;height:100%;background:var(--now);opacity:.75}
.note{color:var(--dim);font-size:12px;line-height:1.65}
/*  ══ 약관·개인정보취급방법 (2026-08-24) ═══════════════════════════════════
    ★ 두 글은 **같은 옷**을 입는다 — 한쪽만 급히 만든 문서처럼 보이지 않게.
    ★ 읽는 글이라 한 줄 폭을 좁게 잡는다(38em ≈ 한글 40자 안팎). 넓으면
      다음 줄 첫 글자를 눈이 못 찾는다. */
.policy{max-width:38em;margin:0 auto;line-height:1.75;font-size:13.5px}
.policy h1{font-size:20px;margin:2px 0 10px}
.policy h2{font-size:14.5px;margin:22px 0 6px;padding-top:12px;
  border-top:1px solid var(--grid)}
.policy h3{font-size:13px;margin:12px 0 4px}
.policy p{margin:8px 0}
.policy ul{margin:8px 0;padding-left:18px}
.policy li{margin:5px 0}
.policy code{font-family:var(--mono);font-size:12px}
.policy .lead{font-size:14px}
/*  한 줄 요약 — 다 읽지 않는 사람이 여기만 읽어도 뜻이 통해야 한다. */
.policy .quick{padding:10px 12px;border:1px solid var(--grid);border-radius:10px;
  background:var(--panel)}
.policy a{color:#6D95A2}

.note b{color:var(--ink)}
.sec{padding:14px 0 16px;border-bottom:1px solid #10242E}
.sec:last-child{border-bottom:0}
/*  ══ 낱장의 오른쪽 끝 (2026-09-03 화면 점검) ═════════════════════════════
    ▣ ★ 무엇이 어긋나 있었나 — 낱장(/boat/… · /report/… · /mine)의 위 칸만
      `style="max-width:860px"` 을 달고 있었다. 그런데 그 아래 조황 표(.board)
      와 바닥글은 계기판 폭(.wrap 1180px)이라, 한 화면에 오른쪽 끝이 **셋**
      이었다(1280px 실측: 칸 924 · 표 1216 · 바닥글 1216). 칸 밑줄이 표보다
      292px 일찍 끊겨 화면이 반쯤 무너져 보였다.
    ▣ ★ 어느 쪽이 옳은가 — **계기판 폭이다.** 이 사이트의 다른 화면이 전부
      그 선이다: 머리띠(.hrow)·「지금」(/)·「조과」(/catch)·바닥글 모두 1180.
      860 은 낱장 여덟 자리에만 있던 외톨이였다. 선이 하나여야 계기판이다.
    ▣ ★ 다만 **글줄까지 넓히지는 않는다** — 1152px 한 줄은 한글 여든 자가 넘어
      다음 줄 첫 글자를 눈이 못 찾는다. 그래서 **칸의 테두리만** 계기판 선에
      맞추고, 읽는 글(문단)은 앞서 쓰던 860px 그대로 둔다. 어긋나 보이던 것은
      글이 아니라 **밑줄**이었다.
      · 표·격자·단추 줄은 그대로 칸 폭을 다 쓴다(격자는 넓어지면 칸이 는다). */
.sec > p{max-width:860px}
/*  ★ 표 시작 전 여백을 줄인다(2026-08-25 지시 두 차례: "테이블 시작하는
    여백을 줄여달라" → 10px→5px, 재지시: "다음의 시작하는 조황정보와의
    라인 간격은 줄여줘" → 5px→4px). h2.k 뒤에는 숨은 #fnNew 단추만 있고
    (자리를 안 차지한다) 곧바로 표라, 이 여백 + .two 의 세로 gap(6px)이
    "제목 줄과 표 사이 틈" 전부다. */
/*  ★ `h1.k` 를 함께 적는다 (2026-09-23) — 첫 화면의 이 줄이 **화면의 제목**이라
    h2 → h1 로 바꿨다(구글 SEO 시작 가이드: 화면마다 의미 있는 제목 하나).
    옷은 한 값이라 **보이는 것은 하나도 달라지지 않는다** — h1 기본 크기(2em)가
    튀지 않게 여기서 크기·여백을 그대로 못 박는 것이 이 줄의 일이다. */
/*  ★ `.k.fn-hrow` (2026-10-04) — 첫 화면·예약의 제목 **줄**. h1 은 줄 안의 제목 글만 감싸고(now.php·booking.php 머리말)
    줄은 div 라, 예전 h1.k 와 같은 값을 여기서 함께 받는다. 안의 h1 은 줄의 글꼴을 그대로 물려받고 여백을 지운다 —
    보이는 것은 그대로다. 이 이름은 그 두 화면에만 있다(다른 화면엔 안 닿는다). */
.k.fn-hrow > h1,
.k.fn-hrow .label > h1{font-size:inherit;font-weight:inherit;margin:0}
.k.fn-hrow > h1{font-family:inherit;letter-spacing:inherit;color:inherit}
.k.fn-hrow,
h1.k,
h2.k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--dim);font-weight:700;
  margin:0 0 4px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
/*  ★ 점 표(예전엔 h2.k::before 로 h2 맨 앞에 붙어 있었다) — 이제 해역 칩
    다음·STREAM 앞이라는 줄 가운데 자리로 옮겨야 해서(2026-08-25 재지시:
    "맨 좌측의 점은 'STREAM' 의 앞으로 옮겨 배치") 진짜 엘리먼트로 바꿨다.
    ★ 재지시(2026-08-25): "'■' 도 하단 정렬해" — 칩·STREAM·건수 요약과
    같은 바닥에 서도록 align-self 를 마저 준다. */
h2 .dot{color:var(--now);font-size:8px;align-self:flex-end}
/*  ★ 건수 요약을 칩과 **아래쪽 선**에 맞춘다(2026-08-25 지시: "'제주' 다음에
    배치하고, 라인 하단 맞춤을 해"). h2.k 는 baseline 정렬이라 칩(높이
    31px)과 작은 글자(높이 16px)의 **아래 끝이 8px 어긋나 있었다**(실측) —
    이 항목만 align-self:flex-end 로 내려 칩의 바닥과 나란히 선다.
    ★ STREAM·제목(.label)도 같은 이유로 재지시(2026-08-25): "'STREAM 지금
    들어온 조황'은 해당 라인의 맨 하단으로 배치해" — align-self 만 같이
    준다(글자 크기·굵기·자간·색은 h2.k 에서 그대로 물려받는다 — 예전에
    h2.k 의 직속 글자였을 때와 같은 모양이어야 한다). */
h2 .meta{font-size:10px;letter-spacing:.02em;font-weight:400;color:var(--dim);align-self:flex-end}
h1 .label,
.k.fn-hrow .label,
h2 .label{display:inline-flex;align-items:baseline;gap:9px;align-self:flex-end}
/*  ★ 해역 칩이 이 줄 안으로 들어왔다(2026-08-25 지시 — "'제주' 와 같은
    라인에 모두 표시"). 원래 칩의 아래 여백(margin-bottom)은 **혼자 서 있을
    때**의 것이라 여기서는 지운다 — 그대로 두면 줄 안에서 위아래로 밀린다.
    자리가 모자란 폭에서는 h2.k 의 flex-wrap 이 칩만 다음 줄로 내린다. */
h2.k .zones{margin:0;gap:8px}
/*  ★ 폰에서만 — 해역 칩이 **한 줄을 통째로** 쓰게 해서 그 뒤(■·STREAM·제목·
    건수)가 **다음 줄에 함께** 내려오게 한다 (2026-08-27 지시: "■ STREAM 은
    같이 표시되게 「■」 부터 다음 라인으로 해").
    ▣ 앞서는 칩 줄 끝에 ■ 만 홀로 남고 STREAM 은 다음 줄로 넘어가 있었다
      (실측) — flex-wrap 이 들어가는 데까지 채우고 끊기 때문이다.
    ▣ `flex:1 0 100%` 로 칩 덩이가 한 줄을 다 차지하면 그 뒤는 모두 다음
      줄에서 시작한다. 줄바꿈용 빈 요소를 끼우지 않아 마크업은 그대로다 —
      데스크톱(fishnow.kr)은 이 규칙을 안 받으므로 아무것도 안 바뀐다. */
body.mo h2.k .zones{flex:1 0 100%}
.pager{display:flex;gap:2px;justify-content:flex-end;padding:10px 14px;font-family:var(--mono);
  font-size:11px}
.pager a{color:var(--dim);padding:6px 8px}
.pager a.on{color:var(--now);font-weight:700;border-bottom:2px solid var(--now)}
/*  ★ 이어 불러오기의 발치 — 「더 불러오는 중…」·「여기까지입니다.」와
    못 받았을 때의 다시 누르는 단추가 이 자리에 선다(2026-08-27 지시). */
.morefoot{min-height:34px;display:flex;align-items:center;justify-content:center;
  gap:8px;padding:10px 0 4px;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.morefoot:empty{padding:0;min-height:0}
.errbox{margin:14px 0;padding:11px 14px;border:1px solid var(--alert);color:var(--alert);
  font-size:13.5px;border-radius:3px}
/*  ══ 바닥글 — 잔글씨의 대비 (2026-09-03 화면 점검) ═══════════════════════
    ▣ ★ 무엇이 문제였나 — 글자색이 `#4C6C78`, 바탕이 `--deep(#050D12)` 이라
      대비가 **3.47** 이었다(10.5px 잔글씨, 기준 4.5:1). 어두운 계기판이라
      어둡게 잡은 것인데, 이 사이트가 **제 화면에서 쓰는 조용한 색보다도
      더 어두웠다** — `--dim(#6D95A2)` 이 6.03 이다. 바닥글만 유별났다.
    ▣ ★ 그래서 **새 색을 짓지 않는다.** 이미 있는 두 토큰으로 옮긴다:
      · 글자 `--dim`  #6D95A2 → 6.03  (`.note` 등 조용한 글이 늘 쓰는 색)
      · 링크 `--soft` #9FBDC7 → 9.86
      이 판의 링크에는 밑줄이 없어(a{text-decoration:none}) **색 차이가 곧
      손잡이 표시**다. 글자를 --dim 으로 올리면서 링크를 그대로 두면 둘이
      같은 색이 되어 링크가 사라진다 — 그래서 링크는 한 단 더 밝힌다.
    ▣ ★ 이 색은 fishnow **혼자 쓰던 값**이다(저장소 전체에서 `#4C6C78` 은
      이 한 줄뿐 — 실측). 다섯 사이트 공통 토큰이 아니므로 여기서 고쳐도
      다른 사이트에 번지지 않는다.
    ▣ 분위기는 그대로다 — 바탕·글꼴·크기·자간을 건드리지 않았고, 바닥글은
      여전히 본문(--ink 16.4)보다 훨씬 조용하다. */
footer{max-width:1180px;margin:0 auto;padding:16px 14px 40px;color:var(--dim);
  font-family:var(--mono);font-size:10.5px;text-align:center;line-height:1.8}
footer a{color:var(--soft)}
/*  ★ 첫 줄은 **한 줄**이다 (2026-08-25 지시) — 사이트 이름과 약관·개인정보가
    떨어지지 않는다. `display:flex` 를 쓰면 span 이 블록으로 바뀌어 위 글자
    (지금 전국 조황) 아래로 떨어진다(실측) — `inline-flex` 로 같은 줄에 세운다.
    좁은 화면에서 자리가 모자라면 그때는 줄바꿈을 허용한다(flex-wrap). */
footer .links{display:inline-flex;flex-wrap:wrap;gap:10px;vertical-align:baseline}
footer .links a{white-space:nowrap}
/*  ★ 사업자 줄은 한 단 더 조용하다 — 다만 `.85` 로는 섞인 값이 4.65 라
    기준에 겨우 붙는다. `.92` 로 올려 5.4 를 둔다(눈에는 여전히 한 단 뒤). */
footer .biz{opacity:.92}

/*  ══ 폰 껍데기 — 아래 탭 (2026-08-28 지시: "스마트 폰 접속시 화면 구성은
    PC 화면과 별도로 구성해줘") ═══════════════════════════════════════════
    ▣ ★ **호스트로 가른다**(body.mo), 창 너비로 가르지 않는다 — 데스크톱을
      좁게 열었다고 탭바가 올라오면 안 된다(이 파일의 오래된 규율).
    ▣ ★ 차림표를 **위에서 아래로 옮긴다.** 폰은 한 손으로 쥐고 엄지로 쓴다 —
      화면 맨 위 모서리는 엄지가 가장 못 닿는 자리다. 위 머리줄은 '지금 무엇을
      보고 있나'(상호·수신·시각)만 남기고, '어디로 갈까'는 아래로 내린다.
    ▣ ★ 그래서 위의 hnav 는 폰에서 **markup 자체가 안 나간다** — 숨기기만 하면
      스크린리더가 같은 차림표를 두 번 읽는다.
    ▣ 탭바가 마지막 줄을 가리지 않도록 body 에 자리를 비운다. iPhone 의 홈
      막대(safe-area)까지 더해 준다 — 안 더하면 막대가 탭 위에 겹쳐 앉는다. */
body.mo{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
body.mo .head .hrow{padding:0 12px;gap:8px}
body.mo .brand{font-size:15px}
body.mo .clock{font-size:11.5px;color:var(--soft)}
body.mo .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));   /* 네 칸 한 줄 — 「예약」이 들어와 셋→넷(2026-09-17) */
  background:linear-gradient(180deg,#0B1A22,#081319);border-top:1px solid var(--grid);
  padding-bottom:env(safe-area-inset-bottom)}
body.mo .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;height:64px;font-size:10.5px;font-weight:700;color:var(--dim);text-decoration:none}
body.mo .tabbar a svg{width:21px;height:21px}
body.mo .tabbar a path{fill:var(--dim)}
/*  ★ 켜진 칸은 **초록**이다 — 이 판에서 초록은 '집계된 사실' 이고, 지금 어디에
    서 있는지도 사실이다(잉크 규율). 색만으로 알리지 않고 글자도 굵게 한다. */
body.mo .tabbar a[aria-current]{color:var(--now)}
body.mo .tabbar a[aria-current] path{fill:var(--now)}
body.mo .tabbar a:focus-visible{outline:2px solid var(--now);outline-offset:-3px}