:root{
  /* 시안 A안의 색 — onfishing.net _tokens.php 의 낮 바다 값과 같은 계열 */
  --hull:#FBFDFD; --hull2:#EDF3F4; --line:#D2E0E3;
  --bay:#D3E5EC; --bay-line:#4E8799; --on-bay:#173A5C; --on-bay-dim:#33587F;
  --ink:#12303A; --dim:#5F7C87; --soft:#3E5C68; --lamp:#0A1D25;
  --sonar:#F0A038; --sonar-ink:#A9640A; --hot:#CC4318; --on-sonar:#141E26;
  --water:#2E8090;
  --strip1:#152C5B; --strip2:#1D4E93; --strip3:#2E6BB8; --strip-line:#0E2549;
  /*  물때 색 — onfishing.net·naksigo.com _tokens.php 의 `--tide-bar`(낮 바다
      #2E6BB8)와 **같은 값**이다. 이 팔레트에는 그 색이 이미 --strip3 으로
      있어 새 색을 만들지 않고 이름만 단다(같은 것을 화면마다 다르게
      칠하지 않는다는 규칙). */
  --tide:var(--strip3);
  --on-strip:#F1F6FE; --on-strip-dim:#B7CCEA; --on-strip-soft:#D5E4F8;
  --accent:#FFCE7A;
  --page1:#E4F1F5; --page2:#D5E8EF;
  /*  머리띠 ↔ 본문 사이의 간격 — 일곱 화면이 이 한 값을 쓴다(아래 main.wrap). */
  --gap-main:20px;
  /*  ★ 조과 추이 층(layout/_porttrend.php)이 받는 세 색 (2026-09-02).
      그 조각은 onfishing.net 과 **같은 파일**이라 값을 못 박을 수 없다 —
      껍데기 색만 변수로 받아 사이트마다 제 팔레트로 선다. 저쪽은 인광 초록
      (--now), 여기는 호박(--sonar)이다. */
  --pt-accent:var(--sonar); --pt-on-accent:var(--on-sonar); --pt-dim:var(--soft);
  --mono:"D2Coding",Consolas,"SFMono-Regular",ui-monospace,monospace;
  --ui:"Malgun Gothic","Apple SD Gothic Neo","Segoe UI",-apple-system,sans-serif;
  --r:13px; --r-sm:8px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:linear-gradient(180deg,var(--page1) 0%,var(--page2) 100%);
  background-attachment:fixed;color:var(--ink);font-family:var(--ui);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:calc(100vh / var(--fs,1))}
/*  ══ 글자 크기 (2026-08-27 지시: "m.onfishing.net/#me 의 「글자 크기」 기능을
    m.fishtoday.kr/mine 에도 추가해서 구현해") ═══════════════════════════════════════
    ▣ ★ 왜 `zoom` 인가 — 이 화면은 글자·여백·아이콘이 **전부 px** 로 짜여 있다.
      html 의 font-size 를 키워도 px 값은 꿈쩍하지 않아 글자만 커지고 칸은
      그대로다(줄이 넘치고 단추 안에서 글자가 잘린다). zoom 은 화면 전체를
      같은 비율로 키워 짜임새를 지킨다 — 손가락으로 벌린 것과 같다.
      m.onfishing.net·m.fishnow.kr 이 같은 까닭으로 같은 것을 쓴다.
    ▣ ★ 다만 **vh·vw 는 zoom 을 따라오지 않는다** — 92vh 가 그대로 1.35배가
      되어 화면 밖으로 넘친다. 그래서 vh·vw 를 쓰는 자리마다 `/var(--fs,1)`
      로 되돌려 나눈다(이 파일과 팝업 조각들).
    ▣ ★ 기본값이 1 이라 **데스크톱에는 아무 일도 안 일어난다** — --fs 를
      정하는 것은 폰의 「내 기록」 화면뿐이다.
    ▣ 기본은 1 이고 **키우기만** 한다 — 지시가 '더 크게' 다.
    ▣ 단계·이름·저장 방식은 m.onfishing.net 과 같다(같은 것을 다르게 두면
      두 화면을 오가는 사람이 매번 다시 익힌다). */
body.m{zoom:var(--fs,1)}
body.m .fzs{display:flex;gap:6px;margin-top:8px}
body.m .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(--line);border-radius:11px;background:var(--hull);
  color:var(--ink);font:inherit;line-height:1.1;cursor:pointer}
body.m .fzs button span{font-size:10.5px;color:var(--dim);line-height:1.2}
body.m .fzs button[aria-pressed="true"]{border-color:var(--water);color:var(--water)}

a{color:var(--water);text-decoration:none}
a:hover{color:var(--sonar-ink)}
:focus-visible{outline:2px solid var(--sonar);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/*  ★ 기다리는 표 — 「남은 자리」처럼 **밖을 두드려 오느라 느린** 칸에 쓴다
    (2026-08-22 지시: "남은 자리는 가져오는 동안은 대기중을 표시하는 아이콘을
    추가하고 가져오면 바로 보여줘").
    ▣ 왜 아이콘인가 — 글만 있으면 '멈춘 화면'과 '기다리는 화면'이 똑같아 보인다.
      도는 것이 하나 있어야 사람이 기다린다(예약 사이트를 두드리는 배는
      십수 초가 걸린다 — 그동안 화면이 죽은 줄 알고 떠난다).
    ▣ ★ 움직임을 줄여 달라는 사람에게도 **없애지 않고 늦춘다**. 위의 전역
      규칙이 animation 을 통째로 끄므로 여기서 다시 켜 준다(2.4초 한 바퀴) —
      아예 멈추면 '기다리는 중'이라는 뜻까지 함께 사라진다.
    ▣ 색은 이미 있는 것을 쓴다 — 테는 --line, 도는 한 조각만 --sonar. */
.spin{display:inline-block;width:14px;height:14px;flex:0 0 auto;
  border:2px solid var(--line);border-top-color:var(--sonar);border-radius:50%;
  animation:ft-spin .7s linear infinite}
@keyframes ft-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .spin{animation:ft-spin 2.4s linear infinite!important}}
/*  기다리는 줄 — 아이콘과 글을 한 줄로 세운다(글이 길면 아이콘 옆에서 접힌다). */
.waitline{display:flex;align-items:flex-start;gap:8px}
.waitline .spin{margin-top:2px}
.k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--dim)}
.mono{font-family:var(--mono)}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
@media (max-width:700px){.wrap{padding:0 12px}}
/*  ── ★ 머리띠와 본문 사이의 **한 칸 간격** (2026-09-02 지시: "메뉴에 따른
      컨텐츠 영역을 메뉴와 구별하여 표시하도록 간격을 일정하게") ─────────────
    ▣ 전에는 **0** 이었다(실측 1280px: 머리 아래 88 · 본문 시작 88). `main` 에
      위 여백 18px 을 준 규칙이 있었지만 `.wrap`(padding:0 20px)이 뒤에서
      덮어써 위 여백이 사라졌다 — 본문이 차림표에 붙어 있었다.
    ▣ ★ 값을 **한 자리(--gap-main)에서 정한다** — 화면마다 적으면 다음에 화면이
      늘 때 저절로 어긋난다. 일곱 화면(/reports·/port·/comp·/boat·/fish·/tide·
      /tackle)이 이 한 값을 쓴다.
    ▣ 오늘 머리띠를 그림자로 띄운 것과 한 벌이다(aca570f8) — 그림자가 '띠가
      여기서 끝난다' 를 말하고, 이 간격이 '본문은 여기서 시작한다' 를 말한다. */
main.wrap{padding-top:var(--gap-main);padding-bottom:26px}
/*  ★ 화면 제목 줄은 **격자의 첫 줄로 폭 전체**를 쓴다 (같은 지시의 세 번째
    마디: "우측 컨텐츠는 좌측 컨텐츠의 박스에 맞추어 시작").
    ▣ 전에는 제목 줄이 **왼쪽 칸 안**에 있어, 왼쪽 첫 박스만 그 높이(41px)만큼
      밀리고 오른쪽 첫 박스는 위에 그대로 붙어 있었다(실측 /port: 왼쪽 129 ·
      오른쪽 88). 오른쪽이 41px 떠 보였다.
    ▣ 제목을 격자의 첫 줄로 올리면 **두 칸이 같은 높이에서 시작한다** — 값을
      맞춰 적는 것이 아니라 짜임이 스스로 맞춘다.
    ▣ 좁은 화면에서 한 단으로 접혀도 차례는 제목 → 본문 → 곁 정보 그대로다. */
.grid2 > .h-line{grid-column:1/-1}

/* ── 머리띠 (데스크톱) ── */
/*  ★ **메뉴 줄과 본문을 가른다** (2026-09-02 지시: "위쪽 메뉴라인과 하단
      컨텐츠 라인을 분리해서 표시해. 화면으로 확인해").
    ▣ 전에는 — 머리띠 아래 테가 `--strip-line`(#0E2549)이었다. **남색 바탕
      위의 남색**이라 화면에서 사실상 안 보였고(실측), 그 아래 본문도 바탕이
      투명이라 메뉴 줄과 본문이 **한 덩이로 흘렀다**. 87px 짜리 남색 띠가
      어디서 끝나는지 눈이 못 짚었다.
    ▣ 지금은 — **이 저장소가 이미 쓰는 방식**을 그대로 쓴다:
      onfishing.net·naksigo.com 의 `.strip` 이 `border-bottom` + 옅은 그림자로
      머리띠를 본문 **위에 띄운다**(그 두 파일의 같은 자리 참고).
      fishtoday 만 그림자가 없어 띠가 종이에 눌러붙어 있었다.
      새 색을 만들지 않았다 — 그림자는 머리띠의 가장 어두운 색(--strip1)을
      옅게 깐 것이다.
    ▣ ★ ①(브랜드 줄 ↔ 메뉴 줄)도 함께 갈랐다. 화면을 보니 그쪽이 안 갈리면
      메뉴 줄이 브랜드 줄의 꼬리처럼 보여, 아래를 가르는 것만으로는 「두 줄」이
      아니라 「한 덩이 + 선」이 된다. 남색 위라 **흰 실선**이다(rgba .13) —
      바탕이 그러데이션이라 어느 자리에서도 같은 세기로 보인다.
    ▣ ★ 두 판(데스크톱·폰) 모두다. 앞서 "폰은 원상태" 라 한 지시는 **조황
      카드에 더한 칸들**을 가리킨 것이고, 이것은 껍데기의 머리띠라 한쪽만
      갈라 두면 같은 사이트가 두 사이트처럼 보인다. 폰 앱바에도 같이 준다. */
.strip{background:linear-gradient(105deg,var(--strip1) 0%,var(--strip2) 55%,var(--strip3) 100%);
  border-bottom:1px solid var(--strip-line);
  box-shadow:0 2px 10px rgba(21,44,91,.20)}
.brandrow{display:flex;align-items:center;gap:14px;padding:9px 0;flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.13)}
.brand{font-size:17px;font-weight:800;color:var(--on-strip);letter-spacing:-.02em;white-space:nowrap}
.brand b{color:var(--accent);font-weight:800}
.brand-sub{font-size:12.5px;color:var(--on-strip-dim)}
.findlink{margin-left:auto;display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.10);border:1px solid rgba(140,186,240,.45);
  border-radius:999px;padding:5px 12px;font-size:12px;color:var(--on-strip-soft)}
.findlink:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.navrow{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.navrow::-webkit-scrollbar{display:none}
.navrow a{padding:7px 14px 6px;font-size:13px;font-weight:700;color:var(--on-strip-dim);
  border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}
.navrow a.on{color:#fff;border-bottom-color:var(--accent)}
.navrow a:hover{color:#fff}
.navrow .n{font-family:var(--mono);font-size:10.5px;font-weight:400;opacity:.8;margin-left:6px}

/* ── 앱바 + 아래 탭 (폰 껍데기) ── */
.appbar{background:linear-gradient(105deg,var(--strip1) 0%,var(--strip2) 55%,var(--strip3) 100%);
  padding:11px 16px;display:flex;align-items:center;gap:9px;
  /*  머리띠와 같은 규칙 — 폰에서도 앱바가 본문 위에 뜬다(위 .strip 주석). */
  border-bottom:1px solid var(--strip-line);box-shadow:0 2px 10px rgba(21,44,91,.20)}
.appbar .brand{font-size:16px}
.tabbar{position:fixed;left:0;right:0;bottom:0;height:62px;background:var(--hull);
  border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));z-index:30}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10.5px;font-weight:700;color:var(--dim)}
.tabbar a.on{color:var(--sonar-ink)}
.tabbar svg{width:20px;height:20px}
.tabbar a path{fill:#C6D6DB}
.tabbar a.on path{fill:var(--sonar)}
body.m{padding-bottom:78px}
body.m main.wrap{max-width:760px}

/* ── 공통 부품 ── */
main{padding:18px 0 26px}
.card{background:var(--hull);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px}
.card+.card{margin-top:12px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px}
@media (max-width:900px){.grid2{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.h-line{display:flex;align-items:baseline;gap:10px;padding:2px 4px;flex-wrap:wrap}
.h-line h1,.h-line h2{font-size:15.5px;font-weight:800;color:var(--ink);margin:0}
.h-line .cnt{font-family:var(--mono);font-size:11px;color:var(--dim)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-block;padding:5px 13px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:#fff;color:var(--soft);border:1px solid var(--line)}
.chip:hover{border-color:var(--sonar);color:var(--sonar-ink)}
/*  ★ 조황 검색칸 (2026-08-21 지시) — 「조황」 차림표 안의 검색이다.
    ▣ 새 색·새 모양을 들이지 않았다. 테(--line)·모서리·주황 단추 모두 이
      화면에 이미 있는 것이다 — 낯선 상자가 하나 생기면 그것부터 눈에 띈다.
    ▣ 키 42px — 칩(44)보다 한 뼘 낮고 카드 안에서 한 줄로 앉는다.
    ▣ 초점은 테를 주황으로 바꾸고 바깥에 한 겹 두른다(안쪽 input 은 outline:0
      이라 스스로 못 보인다 — 칸 전체가 초점을 받은 것으로 보여야 한다).
    ▣ 폰에서도 같은 칸이다(같은 뷰) — 글자 16px 은 iOS 가 확대하지 않는 최소값. */
.rq{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:0 7px 0 11px;height:42px;margin:0 0 10px}
.rq:focus-within{border-color:var(--sonar);box-shadow:0 0 0 2px rgba(240,160,56,.28)}
.rq input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);
  font:inherit;font-size:16px}
.rq input::placeholder{color:var(--dim);font-size:13.5px}
.rq .go{height:30px;padding:0 14px;border:0;border-radius:8px;background:var(--sonar);
  color:var(--on-sonar);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.rq .mg{width:16px;height:16px;flex:0 0 auto;fill:var(--dim)}
/*  지움 칩의 가위표 — 칩 글자보다 한 단 굵게, 앞에 틈을 준다. */
.chip .x{margin-left:6px;font-weight:800}
.chip.on{background:var(--sonar);color:var(--on-sonar);border-color:var(--sonar)}
.chip.soft{background:var(--hull2);font-weight:400;font-size:12px;padding:4px 11px}
.chip .n{font-family:var(--mono);font-size:10px;color:var(--dim);margin-left:5px}
.chip.on .n{color:var(--on-sonar);opacity:.75}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700}
.tag.port{background:var(--bay);color:var(--on-bay)}
.tag.boat{background:var(--hull2);color:var(--soft);border:1px solid var(--line)}
.tag.sp{background:rgba(240,160,56,.16);color:var(--sonar-ink)}
.tag.go{background:var(--hull);color:var(--ink);border:1px solid var(--line);text-decoration:none}
a.tag:hover{filter:brightness(.95)}
.pager{display:flex;justify-content:center;gap:5px;padding:8px 0 2px;flex-wrap:wrap}
.pager a,.pager span{padding:6px 13px;border-radius:var(--r-sm);font-size:12.5px;color:var(--soft);
  border:1px solid var(--line);background:var(--hull)}
.pager .on{background:var(--sonar);color:var(--on-sonar);border-color:var(--sonar);font-weight:700}
.pager .gap{border:0;background:none;color:var(--dim)}
.sortbtns{margin-left:auto;display:flex;gap:4px}
.sortbtns a{padding:4px 10px;border-radius:7px;font-size:11.5px;color:var(--dim);border:1px solid var(--line)}
.sortbtns a.on{background:var(--sonar);color:var(--on-sonar);border-color:var(--sonar);font-weight:700}
.note{font-size:11.5px;color:var(--dim);line-height:1.6}
/*  ══ 약관·개인정보취급방법 (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(--line)}
.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(--line);border-radius:10px;
  background:var(--hull)}
.policy a{color:var(--soft)}

/*  ★ 추정 표 (2026-08-22) — 예보가 없어 '가장 최근 같은 물때'로 되짚은 값.
    숫자 옆에 작게 붙어 '이건 예보가 아니다'만 말한다. 색을 세게 주면
    경고로 읽히므로 흐린 글자 한 겹으로만 둔다. */
.est{margin-left:4px;font-size:10px;color:var(--dim);border:1px solid var(--line);
  border-radius:6px;padding:0 4px;vertical-align:middle;white-space:nowrap}
.errbox{background:#FDF2EC;border:1px solid #E8C4B0;color:#8A3512;border-radius:var(--r);padding:12px 14px;font-size:13px}
.guide{white-space:pre-wrap;font-size:13.5px;line-height:1.75;color:var(--soft)}
.guide b,.facts b{color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
.facts>div{background:var(--hull2);border-radius:9px;padding:8px 10px}
.facts .fk{font-size:10.5px;color:var(--dim)}
.facts .fv{font-size:13px;font-weight:700;color:var(--ink);font-family:var(--mono);word-break:keep-all}
.bar{height:6px;border-radius:999px;background:var(--hull2);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--sonar)}
.tbl-wrap{overflow-x:auto}
table.tbl{border-collapse:collapse;width:100%;font-size:12.5px;min-width:520px}
.tbl th{text-align:left;font-size:11px;color:var(--dim);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:7px 8px;border-bottom:1px solid var(--hull2);vertical-align:top}
/*  ★ 보이는 상자는 그대로 두고 **누름판만 44px** 로 채운다 (2026-09-06).
    ▣ 실측: `.btn` 은 상자 37~38px 이라 손끝 면이 모자랐다(예약·원문·찾기
      까지 이 옷을 입는 사이트 전체 단추다).
    ▣ ★ 글자·여백을 키우지 않는다 — 카드 안에 여럿이 서는 단추라 상자를
      키우면 줄이 밀리고 폰에서 넘친다. `::after` 로 **보이지 않는 표적만**
      넓힌다(naksigo·onfishing 이 쓴 그 방법과 한 벌).
    ▣ 값은 손잡이 한 벌 값(--btbtn-tap)을 가리켜 쓴다 — 두 곳에 숫자를
      적으면 갈린다.
    ▣ inline-block 이라 `position:relative` 를 함께 준다(안 주면 ::after 가
      바깥 어딘가에 붙어 엉뚱한 자리를 먹는다).                          */
.btn{position:relative;display:inline-block;padding:7px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:700;
  background:var(--sonar);color:var(--on-sonar);border:1px solid var(--sonar);cursor:pointer}
.btn::after{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:var(--btbtn-tap,44px)}
.btn.ghost{background:#fff;color:var(--soft);border-color:var(--line)}
.iconbtn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);background:#fff;cursor:pointer;font-size:11.5px;color:var(--soft);font-family:var(--ui)}
.iconbtn svg{width:13px;height:13px}
.iconbtn .hs{fill:none;stroke:var(--hot);stroke-width:1.7}
.iconbtn .ss{fill:none;stroke:var(--sonar-ink);stroke-width:1.6}
.iconbtn.on.like .hs{fill:var(--hot)}
.iconbtn.on.save .ss{fill:var(--sonar)}
.iconbtn.on{border-color:var(--sonar)}

/* ── 조황 카드 (시안 A안) ── */
/*  ★ 네 줄 짜임 (2026-08-21 지정) — 썸네일이 카드 높이 전체를 먹던 것을
    **③④줄 두 줄 높이**로 줄여 오른쪽에 세운다.
      ①줄 날짜·지역·물때 | 좋아요·담기(오른쪽 끝)
      ②줄 제목 (폭 전체)
      ③줄 항구·배·어종  ┐ 썸네일
      ④줄 마리수        ┘
    ▣ 이 목록에서 사람이 찾는 것은 '어디서 무엇이 얼마나' 라는 글이다 —
      사진은 곁이라 글보다 크면 안 된다(214×132 → 96×두 줄).
    ▣ 제목은 폭 전체를 쓴다(1/3) — 가장 먼저 읽는 것이라 잘리면 안 된다. */
.rcard{background:var(--hull);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:grid;
  grid-template-columns:minmax(0,1fr) 96px;
  grid-template-rows:auto auto auto auto;
  column-gap:14px;row-gap:7px;padding:14px 16px;align-items:start}
/*  ①줄 — 폭 전체(1/3). 왼쪽 날짜·지역, 오른쪽 끝 좋아요·담기. */
.rcard .head{grid-area:1/1/2/3;display:flex;align-items:center;gap:10px;min-width:0}
/*  ── ★ 썸네일 칸의 높이 — **판마다 다르다** (2026-09-02 지시) ────────────
      데스크톱(body.d)  ①~④ 한 칸   "맨우측에 썸네일을 첫줄을 포함하여
                                     row 를 1개로 묶어서 사용해"
      폰(body.m)        ②~④ 한 칸   "썸네일은 2째줄부터 4번째줄까지 묶어서"
      (칸의 표는 App\Libraries\Feed::CARDS 에 말로 적혀 있다 — 여기는 그 표의
       모양 쪽이다. 두 곳이 어긋나면 안 된다.)

    ▣ 앞선 판단을 **지우지 않고 그 위에 얹는다.** 2026-08-21 에는 썸네일이
      카드 높이 전체(214×132)를 먹어 **사진이 글보다 컸다** — 그래서 ③④ 두 줄로
      줄였다. 그때 문제였던 것은 **사진의 크기**이지 칸의 높이가 아니었다.
      이번에는 **칸만** 넓히고 **그림은 96×72(폰 74×56) 그대로** 둔다(세로 가운데).
      그러니 앞의 교훈("사진은 곁이다")은 그대로 지켜진다.
    ▣ ★ 데스크톱에서 ①줄이 왼쪽 칸으로 좁아지므로 좋아요·담기가 그 칸의
      오른쪽 끝으로 간다(.acts 의 margin-left:auto). 오른쪽 96px 칸에 밀어
      넣으면 안 된다 — 실측으로 「좋 아 요」로 세로로 쪼개졌던 자리다.
      **폰은 ①줄이 폭 전체를 그대로 쓴다**(썸네일이 ②줄부터라) — 그 함정이
      아예 없다.
    ▣ ★ 데스크톱은 **701px 위에서만** 이 짜임이다(실측): 좁으면 왼쪽 칸이
      217px 뿐인데 거기에 날짜·지역·물때·바다 값 넷·좋아요·담기가 다 들어가
      ①줄이 네 줄로 접힌다(카드 175→229px). 그 아래는 앞서대로 ①②줄이 폭
      전체를 쓰고 썸네일은 ③④를 덮는다. */
@media (min-width:701px){
  body.d .rcard .head{grid-area:1/1/2/2}
  body.d .rcard .title{grid-area:2/1/3/2}
  body.d .rcard .thumb{grid-area:1/2/5/3;align-self:center;height:auto;aspect-ratio:4/3}
}
/*  폰 판 — ①줄은 폭 전체(원상태), 썸네일이 ②③④를 덮는다. 폭에 상관없이
    적용한다: 폰 호스트는 어느 폭으로 열어도 이 판이다. */
body.m .rcard .title{grid-area:2/1/3/2}
body.m .rcard .thumb{grid-area:2/2/5/3;align-self:center;height:auto;aspect-ratio:4/3}
  body.d .rcard .title{grid-area:2/1/3/2}
  body.d .rcard .thumb{grid-area:1/2/5/3;align-self:center;height:auto;aspect-ratio:4/3}
}
.rcard .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.rcard .date{font-family:var(--mono);font-size:11px;color:var(--sonar-ink);font-weight:700}
.rcard .dot{width:3px;height:3px;border-radius:50%;background:var(--line)}
.rcard .region{font-size:11.5px;color:var(--dim)}
/*  ── 물때만의 색 (2026-09-02 지시: "물때 색상도 변경") ────────────────────
    ▣ 왜 — 물때는 **누를 수 있는 링크**(/tide/13물)인데 지역·시군과 같은
      .region(회색)이라 맨 글자로 보였다. '전남 · 고흥 · 조금' 이 한 덩이로
      읽혀, 앞 둘은 못 누르고 뒤 하나는 눌리는 줄을 아무도 몰랐다.
    ▣ 색은 **새로 만들지 않는다** — 이 저장소가 물살의 세기 막대에 쓰는
      물때 파랑 그대로다(onfishing.net·naksigo.com _tokens.php 의
      `--tide-bar:#2E6BB8`). fishtoday 팔레트에는 같은 값이 이미 --strip3
      으로 서 있어 그것을 가리키는 이름(--tide)만 새로 단다. 같은 것을
      화면마다 다른 색으로 칠하지 않는다.
    ▣ ★ **물때 이름마다 다른 색을 칠하지 않는다** — 한 색이다.
      색으로 세기를 말하려면(사리=센 물, 조금=약한 물) 그 대응이 어디에서도
      어긋나면 안 되는데, 이 칸(catch_reports.lunar_tide)에 들어오는 말은
      소스마다 다르다 — '조금'·'13물'·'사리권'·'센물' 이 한 목록에 섞여 있고
      (실측), '사리권' 같은 말은 몇 물인지 우리가 못 정한다. 세기를 아는
      자리는 따로 있다(물때 화면의 tide_strength_pct 막대). 근거가 얕은 채로
      색에 뜻을 실으면 틀린 말을 조용히 하게 된다.
    ▣ ★ **색만으로 나르지 않는다** — 점선 밑줄을 함께 둔다. 색을 못 보는
      사람도 '이건 누르는 것' 이 보여야 한다.
    ▣ 명암비 — #2E6BB8 on #FBFDFD = 5.2:1 (11.5px 작은 글씨라 AA 4.5:1 을
      넘겨 잡았다). 회색(--dim #5F7C87, 4.8:1)보다 오히려 또렷하다. */
.rcard a.mul{color:var(--tide);font-weight:700;
  border-bottom:1px dotted color-mix(in srgb,var(--tide) 45%,transparent);
  text-decoration:none}
.rcard a.mul:hover{color:var(--sonar-ink);border-bottom-color:var(--sonar)}
.rcard .title{grid-area:2/1/3/3;margin:0;font-size:15px;font-weight:700;color:var(--ink);line-height:1.45}
.rcard .title a{color:inherit}
.rcard .title a:hover{color:var(--sonar-ink)}
.rcard .tags{grid-area:3/1/4/2;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.rcard .foot{grid-area:4/1/5/2;display:flex;align-items:center;gap:5px 10px;flex-wrap:wrap;min-height:1px}
/*  ★ 마리수 칸(.count)은 2026-09-02 지시로 **두 판 모두** 사라졌다 — 그리는
    코드가 없어졌으니 규칙도 걷는다. 셈(Feed::shape 의 count)은 남아 있다:
    「마리수순」 정렬이 그 값으로 줄을 세운다(화면에 안 보일 뿐이다). */
/*  ── 값 한 칸(.v) — ①줄 바다 값 넷, ④줄 배 제원 여섯이 같은 꼴이다 ──
    ★ 상자를 두르지 않는다 (2026-09-02). 한 카드에 이런 칸이 최대 **열**이
      선다 — 알약을 열 개 두르면 카드가 단추밭이 되고, 정작 읽어야 할 제목이
      뒤로 밀린다(①줄 좋아요·담기에서 이미 배운 것). 이름표는 흐리게,
      값만 진하게 — 눈이 값의 줄을 따라 흐른다.
    ★ 이름표(<i>)와 값(<b>) 사이는 3px 이고 칸 사이는 10px 이다. 이 차이가
      상자 없이도 '어디까지가 한 칸인지' 를 말한다. */
.rcard .v{display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap;font-style:normal}
.rcard .v i{font-style:normal;font-size:10.5px;color:var(--dim);font-weight:600}
.rcard .v b{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--soft)}
/*  ── 선박지수 = **별 다섯 칸** (2026-09-02 지시) ──────────────────────
    ★ 별은 SVG 다 — 글자 ★☆ 는 글꼴 따라 크기가 들쭉날쭉하고, 안 채운 별(☆)이
      없는 기기가 있다. 모양은 ①줄 「배 담기」 별과 **같은 길**이다.
    ★ 채운 별은 --sonar(이 사이트가 '켜짐'에 쓰는 색), 안 채운 별은 --line
      **실선 테두리만**(속은 빈다). 색을 못 보는 사람도 **차 있는가 비었는가**로
      세어진다.
      ▣ ★ **값이 있을 때의 별은 손대지 않는다** (2026-09-02, 다섯 사이트 공통
        결). 한때 안 채운 별을 --line 으로 **칠해** 볼까 했는데(조황지수 막대의
        「칠해진 홈」과 같은 말이 되니까) 되돌렸다 — 다른 사이트는 값이 있을 때
        **글자 ☆ 글리프**를 쓰고 있어 칠할 수가 없다. 다섯 사이트가 갈린다.
        ★ 그래서 실선/점선만으로 가른다: **★1 의 빈 별 넷은 실선**,
          **없음의 다섯은 점선**(아래 `.v.gr.none`).
    ★ 몇 칸을 채우는지는 화면이 안 정한다 — :8100 이 준 반올림 정수다
      (fishnow.kr 의 다섯 칸과 같은 값. _rcard.php 머리말에 까닭). */
.rcard .v.gr .stars{display:inline-flex;align-items:center;gap:1.5px}
.rcard .v.gr .stars svg{width:12px;height:12px;display:block;flex:0 0 auto}
.rcard .v.gr .stars svg path{fill:none;stroke:var(--line);stroke-width:1.7}
.rcard .v.gr .stars svg.on path{fill:var(--sonar);stroke:var(--sonar-ink)}
/*  ── 선박지수가 **없을 때** — 별 다섯은 그대로 두되 **비운다** ─────────────
    (2026-09-02 지시: "선박지수가 없을 때 조황지수처럼 점선 빈 그래프로 통일해")
    ★ 앞서는 **칸을 통째로 안 그렸다.** 그래서 같은 줄의 두 지수가 「없을 때」
      서로 달리 굴었다 — ①줄 조황지수는 빈 막대 다섯이 서고 ④줄 선박지수는
      사라졌다. 같은 1~5 눈금을 가리키는 둘이 「없음」을 다른 몸짓으로 말하면
      안 된다(까닭은 _rcard.php `$noneCls` 머리말).
    ★ **가져온 것은 규칙뿐이고 모양은 제 것을 지킨다** — 조황지수는 막대,
      선박지수는 **별** 그대로다. 별을 막대로 바꾸면 두 지수를 못 가른다.
    ★ **고른 결 — 「점선 윤곽의 별 다섯」.** 다섯 사이트가 함께 정한 값이다
      (onfishing.net·naksigo.com 에서 먼저 먹는 것을 확인하고 여기로 왔다):
        `stroke-dasharray:3 2` · 그늘 없음 · `opacity:.85` · **바탕 없음**
      ▣ ★ 처음엔 `2.6 1.9` 로 그렸다 — 12px 별 둘레에서 점이 자잘해 보였다.
        **`3 2` 로 넓힌다.** 넉넉해야 12px 에서도 「점선」으로 읽힌다.
      ▣ ★ **크기는 12px 그대로다 — `1em`(15px) 이 아니다.** 공통 결의 `1em` 은
        「**옆에 선 별과 같은 키**」라는 뜻이고, 다른 사이트는 값이 있을 때
        **글자 ☆** 를 써서 그 키가 곧 글자 크기였다. 이 카드의 별은 넷 다
        SVG 12px 라(위 `.stars svg`), 여기서 1em 을 쓰면 「없음」의 별만
        15px 로 **혼자 커진다** — 공통 결이 막으려던 바로 그것이 된다.
        같은 것을 가리키면 **크기도 한 벌**이어야 한다.
      ▣ ★ 다른 사이트는 **없을 때만** 별 SVG 를 쓴다(글자 ☆ 에는 점선을 못
        입히니까). 이 카드는 **처음부터 넷 다 SVG** 라 그 갈래가 필요 없다 —
        같은 길에 이미 서 있다.
    ★ 네 상태가 눈으로 갈린다:
        · ★4.5 … 찬 별 넷 반 (이 카드는 반 칸을 안 쓴다 — 반올림 정수다)
        · ★1  … 하나가 차고 넷은 **실선** 빈 별
        · ★0  … 이 카드에는 **없는 상태**다. 평균이 0 이면 등급이 아니라
                「못 잼」이므로 아래 「없음」으로 간다(_rcard.php `$gi`).
        · 없음 … **점선** 빈 별 다섯. ★1 과 갈리는 것이 이 규칙의 핵심이다.
    ★ 나머지 선언은 조황지수 `.v.gx.none` 과 **같은 값**이다(opacity:.85,
      이름표 한 단 옅게) — 두 지수의 「없음」이 같은 무게로 보여야 한다.
    ★ **숫자는 안 적는다** — 이 카드는 값이 있을 때도 별 옆에 숫자를 안 쓴다
      (2026-09-02 지시). 정확한 평균은 title·aria-label 에만 있다.
    ★ 그림만 비우고 뜻은 안 비운다 — aria-label·title 에 「선박지수 없음 —
      매길 기록이 부족합니다…」가 남는다(_rcard.php). 화면에 글자는 안 적는다. */
.rcard .v.gr.none .stars svg path{fill:none;stroke:var(--line);stroke-width:1.7;
  stroke-dasharray:3 2;filter:none}
.rcard .v.gr.none .stars svg{opacity:.85}
.rcard .v.gr.none > i{opacity:.8}
/*  ── ①줄 조황지수 = **막대 다섯 칸** (2026-09-02 지시) ──────────────────
    ★ 왜 별이 아니라 막대인가 — 같은 카드 ④줄에 **선박지수 별 다섯**이 이미
      선다. 둘 다 별이면 사람이 무엇이 무엇인지 못 가른다. 막대 다섯은
      fishnow.kr(.row .grade i — 7×15 세로 막대)이 같은 값에 쓰는 모양이라
      새로 지어낸 것이 아니다. 사이트를 오가도 「조황지수 = 막대 다섯」이다.
    ★ 채움 색은 **선박지수와 같은 --sonar** 다 — 둘은 같은 1~5 눈금이고
      (선박지수는 그 눈금의 평균이다) 같은 눈금을 다른 색으로 칠하면 서로
      다른 척도로 읽힌다. 가르는 것은 **모양과 이름표**이지 색이 아니다.
    ★ 빈 칸은 --line 으로 **비어 있다**(선박지수의 빈 별이 테두리만 남는 것과
      같은 어법). 색을 못 보아도 차 있는가/비었는가로 세어진다.
    ★ 이름표(<i>「조황지수」)는 **어느 폭에서도 안 접는다** — 다섯 칸에는
      단위가 없어 이름이 사라지면 무엇의 눈금인지 알 길이 없다(바다 값은
      ㎧·℃·m 가 이름 노릇을 해서 접을 수 있었다). 그래서 .sea 바깥에 선다.
    ★ 등급 없는 글도 **칸 다섯을 그린다 — 다 비운 「빈 그래프」**
      (2026-09-02 지시: "조황지수 없을 때 fishtoday, fishlog 도 빈 그래프로
      통일해"). 앞서는 칸을 통째로 안 그렸다 — 까닭과 뒤집힌 경위는
      _rcard.php $gx 머리말에 남겼다. */
.rcard .v.gx{align-items:center;gap:4px}
.rcard .v.gx .pips{display:inline-flex;align-items:center;gap:2px}
/*  ★ 빈 칸에 **실선 테두리**를 두른다 — 아래 「없음」의 점선과 갈리게 하려고
    두 상태 모두 테두리를 가진 꼴로 맞췄다(m.onfishing `.gidx i` 와 같은 결).
    box-sizing:border-box 라 테두리를 둘러도 칸 폭은 그대로 5px 이다. */
.rcard .v.gx .pips i{display:block;flex:0 0 auto;width:5px;height:12px;
  border-radius:1.5px;background:var(--line);border:1px solid var(--line);font-size:0}
.rcard .v.gx .pips i.on{background:var(--sonar);border-color:var(--sonar)}
/*  ── 등급이 **없을 때** — 칸 다섯은 그대로 두되 **비운다** ────────────────
    ★ 모양은 **naksigo.com `/today` 에서 확정된 것과 같다**(2026-09-02):
      `background:none · border:1px dashed · box-shadow:none · opacity:.85`.
      m.onfishing.net 의 `.gidx.none` 도 같은 선언이다 — 다섯 사이트가 갈리면
      같은 눈금이 다른 뜻으로 읽힌다. 클래스 이름만 이 화면 것이다.
    ★ **모양은 이 사이트 것을 지킨다** — 가져온 것은 「없음을 어떻게 보이나」
      라는 규칙뿐이고, 칸은 여전히 이 카드의 **막대**다(별이 아니다).
    ★ 낮은 등급의 안 채운 칸은 **칠해진 홈**(바탕 var(--line) + 실선)이고,
      여기 다섯 칸은 **점선 테두리만**(바탕 없음)이다 — 칠해진 것/비어 있는
      것, 실선/점선이라 **색을 못 보아도** 「최저 등급」과 「아직 못 잼」이 갈린다.
      같은 카드의 「사진 없음」 자리(a.thumb)를 점선으로 둔 그 결과 같다.
    ★ 이름표(「조황지수」)도 한 단 옅게 — 값이 없는 칸임을 말도 거들게 한다.
      다만 **글자를 걷지는 않는다**: 이름표가 사라지면 무엇의 눈금인지 알 길이
      없고, 읽어 주는 말(aria-label·title)에는 「조황 등급 없음 — 매길 기록이
      부족합니다…」가 그대로 남는다(_rcard.php). 그림만 비우고 뜻은 안 비운다. */
.rcard .v.gx.none .pips i{background:none;border:1px dashed var(--line);
  box-shadow:none;opacity:.85}
.rcard .v.gx.none > i{opacity:.8}
/*  신고가 만료된 배 — 지웠다가는 '없는 것' 이 되고, 그대로 두면 '유효' 라는
    거짓이 된다. 이름표를 「신고만료」로 바꾸고 값을 흐리게 적는다. */
.rcard .v.off i{color:var(--hot)}
.rcard .v.off b{color:var(--dim);text-decoration:line-through}
/*  ①줄의 바다 값 묶음 — 날짜·지역·물때 **뒤**에 붙되, 좁아지면 제 줄로 접힌다.
    (.meta 가 이미 flex-wrap 이라 묶음째 다음 줄로 내려간다) */
.rcard .sea{display:inline-flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0}
.rcard .sea .v b{font-size:11.5px;color:var(--sonar-ink)}
/*  ★ 조황 줄의 좋아요·담기는 **상자 없이 아이콘과 숫자만** (2026-08-21 지정).
    ▣ 이 줄에는 이미 날짜·지역·물때가 함께 서 있다. 거기에 알약이 둘 붙으면
      눈이 먼저 상자에 걸려, 정작 읽어야 할 제목보다 단추가 앞에 선다.
      하트와 별은 그림 자체가 이미 단추다.
    ▣ 켜졌는지는 **그림이 차오르는 것**으로 보인다(.on 일 때 fill).
      aria-pressed 도 그대로라 낭독기에도 전해진다.
    ▣ ★ 숫자는 **이 기기에 담았는가**(1/0)다. 이 사이트는 회원이 없어 남들이
      몇 명 눌렀는지 알 방법이 없다 — 없는 수를 지어내지 않는다.
    ▣ 표적은 줄이지 않는다 — 보이는 것만 걷고 누르는 자리는 여백으로 남긴다. */
.rcard .acts{margin-left:auto;display:flex;align-items:center;gap:12px;flex:0 0 auto}
.rcard .acts .iconbtn{border:0;background:none;padding:4px 2px;gap:4px;
  white-space:nowrap;color:var(--dim)}
.rcard .acts .iconbtn:hover{background:none}
.rcard .acts .iconbtn.on{border-color:transparent}
.rcard .acts .iconbtn svg{width:15px;height:15px}
.rcard .acts .iconbtn .n{font-family:var(--mono);font-size:11.5px;font-weight:700;
  color:var(--soft);line-height:1}
/*  썸네일 — ③④줄을 합쳐 오른쪽. 두 줄이 짧아도 최소 키를 지킨다(사진이
    실처럼 납작해지면 무엇인지 안 보인다). */
/*  ★ 이제 사진은 **<img>** 다(2026-08-22 — 눌러서 원본을 보려면 그림 자체가
    있어야 한다). 배경 그림이던 시절의 규칙을 그대로 쓰되 object-fit 으로
    잘라 넣는다 — 카드의 자리는 한 치도 안 바뀐다.
    ★ 사진이 없는 줄은 아직 <a class="thumb"> 라 같은 규칙이 함께 걸린다
      (바탕 물빛 네모가 그 자리를 지킨다). */
.rcard .thumb{grid-area:3/2/5/3;align-self:stretch;width:96px;min-height:72px;
  border-radius:10px;background:linear-gradient(140deg,#2E8090,#173A5C);position:relative;
  background-size:cover;background-position:center;
  object-fit:cover;display:block}
/*  ★ 사진이 **아직 없는** 줄은 점선 네모만 (2026-09-02 지시: "썸네일이 없으면
    점선 박스만 그리고 배경은 없앤다").
    ▣ 앞서는 물빛 그러데이션이 깔려 있었다 — 사진이 없는 줄이 오히려 **더
      진하게** 보여, 한 쪽에 사진 없는 줄이 여럿이면 목록이 파란 벽돌담이 됐다.
    ▣ 자리는 그대로 지킨다 — 점선이 '여기 사진이 들어올 자리' 라고 말하고,
      가공이 끝나면 껍데기(data-thumb-slot)가 그 자리에 그림을 끼운다.
    ▣ 링크는 그대로다(눌러 조황글로 간다) — 보이는 꼴만 바꿨다. */
/*  ★ **두 판 모두** 점선이다 (2026-09-02 지시: 데스크톱 "점선 박스만 그리고
    배경은 없앤다" · 폰 "썸네일이 없는 경우에는 점선으로 표시해"). */
.rcard a.thumb{background:none;border:1px dashed var(--line)}
.rcard a.thumb:hover{border-color:var(--sonar)}
img.rcard-th,.rcard img.thumb{cursor:zoom-in}
.rcard img.thumb:hover{outline:2px solid var(--sonar);outline-offset:-2px}
.rcard .thumb .ph{position:absolute;left:10px;bottom:10px;padding:3px 9px;border-radius:7px;
  background:rgba(10,29,37,.62);color:var(--on-strip);font-family:var(--mono);font-size:10.5px}
@media (max-width:700px){
  .rcard{grid-template-columns:minmax(0,1fr) 74px;padding:12px 13px;column-gap:11px;row-gap:6px}
  /*  좁은 폭에서도 썸네일 칸은 네 줄이다(위 body.d 규칙과 한 벌) — 다만
      그림은 74×56 으로 작아진다. 폰 호스트는 여기 들어오기 전에 이미
      원상태 갈래(body.m)로 갈라져 있다. */
  .rcard .title{font-size:13px}
  .rcard .thumb{width:74px;min-height:58px}
  .rcard .thumb .ph{left:4px;bottom:4px;padding:2px 6px;font-size:9.5px}
  /*  좁은 화면에서도 그림과 숫자는 그대로 둔다 — 이미 상자를 걷어 좁다.
      (예전에는 글자를 접었는데, 이제 접을 글자가 없다) */
  .rcard .acts{gap:10px}
  /*  ── 열 칸을 360px 에 앉히는 규칙 (2026-09-02) ──────────────────────
      ▣ 칸이 설 자리는 카드 안쪽 폭에서 썸네일(74px)과 사이(11px)를 뺀
        **≈217px** 뿐이다. 이름표를 단 열 칸은 세 줄이 되고, 그러면 카드가
        한 줄 목록이 아니라 명함이 된다.
      ▣ ①줄 바다 값 — **이름표를 감춘다.** 단위가 이미 이름이다
        (0.4㎧ · 27.7℃ · 0.3m). 이름표가 없는 낚시지수(「지수 좋음」)만
        남긴다 — 말만 있으면 무엇의 등급인지 알 수 없다.
      ▣ ④줄 제원 — **원부를 대조하는 두 칸(어선 번호 14자리·신고 만료일)을
        감춘다.** 새벽에 배를 고르는 사람이 보는 것은 정원·톤수·어업 종류·
        선박지수다. 감춘 둘은 배 상세(/boat/…)에 그대로 있다.
        ★ 지우는 것이 아니라 **접는 것**이다 — 넓어지면 다시 선다. */
  .rcard .sea .v i{display:none}
  .rcard .sea .v.ix i{display:inline}
  /*  ★ 조황지수는 이름표를 **남긴다**(위 .v.gx 주석) — 대신 막대를 한 단
      줄여 217px 짜리 ①줄에서 자리를 덜 먹게 한다(4×11px, 다섯이면 28px). */
  .rcard .v.gx{gap:3px}
  .rcard .v.gx .pips i{width:4px;height:11px}
  .rcard .foot .v.reg{display:none}
  /*  「어업 종류」 이름표도 감춘다 — 값이 이미 '연안복합어업' 이라 이름을
      되풀이한다(온말은 title 에 그대로 있다). 남는 이름표는 정원·톤수·
      선박지수 셋뿐이다. */
  .rcard .foot .v.ft i{display:none}
  .rcard .foot{gap:4px 9px}
  .rcard .v i{font-size:10px}
  .rcard .v b{font-size:11px}
}

/* ── 오른쪽 칸 카드들 ── */
.baycard{background:var(--bay);border:1px solid var(--bay-line);border-radius:var(--r);padding:14px 15px}
.baycard .bighead{display:flex;align-items:baseline;gap:9px}
.baycard .bighead b{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.baycard .k{color:#0F3F4C}
.baycard .sub{font-size:12px;color:var(--on-bay)}
.baycard .cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}
.baycard .cells>div{background:rgba(255,255,255,.55);border-radius:9px;padding:7px 9px}
.baycard .ck{font-size:10.5px;color:var(--on-bay-dim)}
.baycard .cv{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink)}
.baycard .flow{height:7px;border-radius:999px;background:rgba(15,63,76,.18);overflow:hidden;margin-top:8px}
.baycard .flow>i{display:block;height:100%;background:var(--strip3)}
.hotrow{display:flex;align-items:center;gap:10px;margin-top:9px}
.hotrow .rk{font-family:var(--mono);font-size:11px;color:var(--dim);width:14px;flex-shrink:0}
.hotrow .nm{font-size:13px;font-weight:700;color:var(--ink);width:64px;flex-shrink:0}
.hotrow .bar{flex-grow:1}
.hotrow .n{font-family:var(--mono);font-size:11px;color:var(--soft);flex-shrink:0}
.minepair{display:flex;gap:7px;margin-top:8px}
.minepair a{flex-grow:1;background:var(--hull2);border-radius:9px;padding:9px 10px;display:block}
.minepair b{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--ink);display:block}
.minepair span{font-size:10.5px;color:var(--dim)}

/* ── 목록 줄(항구·선사·배·어종) ── */
.lrow{display:flex;gap:11px;padding:12px 2px;border-bottom:1px solid var(--hull2);align-items:flex-start}
.lrow:last-child{border-bottom:0}
.lrow .lmain{min-width:0;flex-grow:1}
.lrow .lname{font-size:14px;font-weight:700}
.lrow .lname a{color:var(--ink)}
.lrow .lname a:hover{color:var(--sonar-ink)}
.lrow .lsub{font-size:11.5px;color:var(--dim);margin-top:2px;word-break:keep-all}
.lrow .lnum{font-family:var(--mono);font-size:11px;color:var(--soft);text-align:right;flex-shrink:0;white-space:nowrap}
.lrow .lthumb{width:56px;height:56px;border-radius:9px;background:var(--bay) center/cover no-repeat;flex-shrink:0}

/* ── 오늘 한 줄(폰 시안) ── */
.todaycard .big{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.todaycard .big b{color:var(--sonar-ink)}

/*  ★ 바닥글은 **가운데 정렬**이다 (2026-08-28 지시: "fishtoday.kr 에서 footer
    중앙 정렬해").
    ▣ ★ `text-align:center` 한 줄로는 모자란다 — 이 바닥글의 속은 세로 flex
      (.wrap)이고 링크 줄도 가로 flex(.links)라, 글자 정렬만 바꾸면 **줄은
      가운데인데 링크 뭉치는 왼쪽에 붙어 있다.** 세 자리를 함께 맞춘다:
      바깥은 text-align, 세로 flex 는 align-items, 가로 flex 는 justify-content.
    ▣ 줄이 접혀도(좁은 폭) 가운데를 지킨다 — flex-wrap 과 함께 쓰는 값이다. */
footer{border-top:1px solid var(--line);margin-top:8px;padding:16px 0 22px;font-size:11.5px;
  color:var(--dim);text-align:center}
footer .wrap{display:flex;flex-direction:column;gap:6px;align-items:center}
footer a{color:var(--soft)}
/*  바닥글 링크 줄 — 약관·개인정보는 **늘 같은 자리**에 선다(2026-08-24). */
footer .links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/*  ★ 소개 줄 + 링크 줄 — **넓으면 한 줄, 좁으면 두 줄** (2026-08-28 지시).
    ▣ 넓은 화면: 가로로 나란히. 사이를 `gap` 으로 벌리고 밑선(baseline)을 맞춘다 —
      글자 크기가 달라도 아랫줄이 어긋나지 않는다.
    ▣ ★ `flex-wrap:wrap` 을 함께 둔다. 창을 문턱보다 조금 넓게 두고 글자를
      키우면(브라우저 확대) 한 줄에 안 들어가는 순간이 온다 — 그때 잘리는
      대신 접히게 한다.
    ▣ 좁은 화면(≤700px, 이 판의 문턱): 세로로 쌓아 **두 줄**. 문턱은 이 파일이
      이미 쓰는 값이다 — 접히는 폭이 칸마다 다르면 화면이 계단처럼 무너진다. */
footer .ftop{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:4px 12px}
@media (max-width:700px){
  footer .ftop{flex-direction:column;align-items:center;gap:6px}
}
footer .links a{white-space:nowrap}
footer .biz{opacity:.85}