:root{
  /*  ★ 바다 밑에서 올려다본 어두운 계기판을 **낮의 바다**로 뒤집었다
      (2026-08-05 지정). 낚시꾼은 새벽에 배를 고르고 해 뜬 부두에서 다시 본다 —
      직사광 아래에서 어두운 화면은 거울이 된다.
      이름은 그대로 둔다(--hull 은 여전히 '박스 바탕'이다). 값만 뒤집으면
      규칙 수백 줄을 건드리지 않고 화면 전체가 따라온다. */
  --abyss:#FFFFFF;        /* 가장 밝은 바닥 — 입력칸 안쪽 */
  --hull:#FBFDFD;         /* 박스 바탕 — 흰색에 가까운 연한 색 */
  --hull-2:#EDF3F4;       /* 눌리는 줄에 손이 갔을 때 */
  --line:#D2E0E3;         /* 테두리 */
  /*  ★ 질의 박스와 답변 박스는 쪽빛 (#D3E5EC — 2026-08-05 지정).
      묻는 곳과 답이 오는 곳 — 이 화면에서 사람이 실제로 오가는 두 자리다.
      머리띠의 쪽빛과 같은 물에서 나온 색이라 맨 위 띠와 이 두 칸이 이어진다.
      ★ 흰 박스보다 진해서 **곁말 글씨**(--dim #5F7C87)가 대비 2.9:1 로
        떨어진다 — 작은 글씨에 필요한 4.5:1 에 못 미친다. 아래 '쪽빛 칸 안의
        글자'에서 그 몇 곳만 남색으로 내려 잡는다(7.6:1).
        본문(--ink)은 8.9:1 이라 그대로 둔다. */
  --bay:#D3E5EC;
  /*  쪽빛 칸 위에서 곁말·자리표시글에 쓰는 어두운 남색 */
  --on-bay-dim:#173A5C;
  /*  주황은 **채우는 색**으로만 쓴다(버튼·막대·점). 밝은 바탕 위에 같은
      주황으로 글씨를 쓰면 흐려서 안 읽혀, 글자용 주황을 따로 둔다. */
  --sonar:#F0A038; --sonar-ink:#A9640A; --sonar-hot:#CC4318;
  --water:#2E8090;        /* 물빛 — 밝은 바탕에서 읽히게 한 단 내렸다 */
  /*  ★ 조과 예측의 파랑 — **테마가 갈아 끼우지 않는 한 색** (2026-08-13 지정:
      "'예측', '조과 예측 - N일치 보기(기간은 설정값)' 의 배경색은 #2088E6 으로 통일").
      ▣ 왜 토큰으로 두나 — 이 파랑이 붙는 자리가 셋이다(순위 줄의 「예측」 알약 ·
        상세의 「조과 예측 — N일치 보기」(N은 설정값) · 「나」 관심선박 줄의 「조과 예측」).
        값을 세 곳에 적으면 한 곳만 고쳐지고 나머지가 옛 색으로 남는다.
      ▣ ★ 테마마다 다시 정의하지 **않는다.** '예측으로 가는 문' 이라는 뜻을
        색이 지고 있어, 테마를 바꿨다고 문 색이 달라지면 그 뜻이 끊긴다.
        그래서 아래 테마 블록에 --fc 가 없다 — 빠뜨린 것이 아니다.
      ★ #2088E6 위의 글자는 흰색이다(대비 4.6:1). 검정을 얹으면 3.9:1 로
        작은 글씨 기준(4.5:1)에 못 미친다. */
  --fc:#2088E6; --on-fc:#FFFFFF;
  --ink:#12303A; --dim:#5F7C87; --lamp:#0A1D25;
  /*  설명 원고 본문 — 우리 데이터(표·목록)보다 한 단 물러나 보이게
      --ink 와 --dim 사이에 둔다. 읽히되 앞으로 나서지 않는 밝기다. */
  --ink-soft:#3E5C68;
  /*  박스 밖 글자색. 박스 안팎이 모두 밝아진 지금은 --ink 와 같아도 되지만,
      제목은 본문보다 한 단 더 또렷해야 해서 --lamp 쪽으로 붙여 둔다.
      ★ 박스 밖에 있는 것은 제목 h1 하나뿐이다 — 부제(.sub)는 로그인 패널
        안에 있고, 안내문(.note)도 제 배경을 갖고 있다. */
  --ink-page:#0A1D25;

  /* ══ 테마가 갈아 끼우는 색 ══════════════════════════════════════════
     여기까지가 '기본 테마 = 여명'다. 아래 :root[data-theme] 블록은
     **이 토큰들만** 다시 정의한다 — 규칙 수백 줄은 건드리지 않는다.
     ★ 그림자·음각은 색이 아니라 **밑색(r,g,b)** 으로 둔다. 진하기는 자리마다
       다른데(.10 ~ .55) 색만 갈아 끼우면 되기 때문이다. 어두운 테마에서
       검정 그림자를 쓰면 화면이 탁해져, 테마마다 제 바탕의 어두운 쪽을 준다. */
  --sh:16,52,66;            /* 그림자·음각의 어두운 밑색 */
  --hl:255,255,255;         /* 솟은 면·음각 홈이 받는 빛 */
  --eng-light:#FFFFFF;      /* 흰 카드 위 음각의 아래 빛줄 */
  --sonar-rgb:240,160,56;   /* 눌러볼 낱말에 겹칠하는 주황 */
  --hot-rgb:255,106,61;
  --on-sonar:#141E26;       /* 주황으로 채운 면 위의 글자 */
  --btn-sh:90,55,5;         /* 주황 버튼 안쪽 아랫면 그늘 */
  --btn-hl:255,226,170;     /* 주황 버튼 위 음각의 빛줄 */

  /* 바다 배경 — 위에서 비친 햇빛 + 아래로 깊어지는 물 */
  --page-hi:#F2FAFB; --page1:#E4F1F5; --page2:#D5E8EF; --page3:#C6DFE8;

  /* 머리띠 */
  --strip1:#152C5B; --strip2:#1D4E93; --strip3:#2E6BB8; --strip-line:#0E2549;
  --tide-bar:#2E6BB8;   /* 물살의 세기 막대 */
  --on-strip:#F1F6FE; --on-strip-hi:#FFFFFF; --on-strip-dim:#B7CCEA;
  --on-strip-soft:#D5E4F8; --brand-accent:#FFCE7A;
  --strip-eng-dark:rgba(4,14,34,.88); --strip-eng-light:rgba(140,186,240,.70);
  --strip-eng-warm:rgba(60,28,2,.80); --strip-eng-warm-hl:rgba(255,214,140,.60);

  /* 묻는 칸 · 답 칸 */
  --well:#CAE1EA;           /* 글이 담기는 홈 */
  --bay-line:#4E8799; --bay-rail:#0F3F4C;
  --bay-ph:#33587F; --bay-cite:#7A4405;

  /* 제목 옆면 네 칸 — 아래로 갈수록 어둡다 */
  --h1a:#B4CDD6; --h1b:#A3BEC9; --h1c:#92AFBC; --h1d:#82A0AF;

  /* 곁것 */
  --note-bg:#DDE1E3; --note-ink:#4A5257;
  --del-ink:#9BB0B8; --warn-ink:#8A3512;

  --mono:"D2Coding",Consolas,"SFMono-Regular",ui-monospace,monospace;
  --ui:"Malgun Gothic","Apple SD Gothic Neo","Segoe UI",-apple-system,sans-serif;

  /* ── 간격 토큰 ──────────────────────────────────────────
     좌·가운데·우 칸이 제각각 값을 쓰다가 오른쪽만 좁아 보였다.
     세 칸이 **같은 토큰**을 쓰게 해서 눈으로 재지 않아도 맞게 한다. */
  --pad:16px;          /* 카드 안쪽 여백 — 세 칸 공통 */
  --gap:14px;          /* 카드 사이 */
  --colgap:20px;       /* 칸 사이 */
  --sidew:320px;       /* 좌·우 칸 폭 — **같아야 한다** */
  --r:10px;            /* 카드 모서리 */
  --r-sm:8px;          /* 버튼·입력 */
}
/* ══════════ 테마 ══════════════════════════════════════════════════════
   ▣ 왜 이 넷인가 — 바다를 보는 **시간**이다
     낚시꾼은 하루에 이 화면을 여러 번, 아주 다른 빛 아래에서 본다.
     새벽 세시 방을 어둡게 하고 배를 고르고, 해 뜬 부두에서 다시 확인하고,
     돌아오는 길 노을에 조황을 적는다. 테마는 취향이 아니라 **그 시간**이다.
       여명(기본) · 새벽 · 노을 · 해도 · 백파
   ▣ 토큰만 갈아 끼운다
     규칙은 한 줄도 건드리지 않는다. 그래서 새 화면을 만들어도 테마가
     저절로 따라온다 — 색을 직접 적지 말고 토큰을 쓰면 된다.
   ▣ 그림자 밑색(--sh)을 테마마다 다시 준다
     어두운 테마에서 밝은 테마의 그림자색을 그대로 쓰면 화면이 뿌옇다.
     제 바탕의 가장 어두운 쪽을 밑색으로 줘야 그늘이 맑다. */

/* ── 새벽 — 해 뜨기 전. 방이 어둡고 눈이 부시면 안 된다 ───────────── */
:root[data-theme="dawn"]{
  --abyss:#0A1620; --hull:#12212D; --hull-2:#1A2C3A; --line:#263E4E;
  --ink:#DCE9F0; --dim:#8CA5B4; --lamp:#F4FBFD; --ink-soft:#B0C6D3;
  --ink-page:#EAF4F9;
  --sonar:#F0A038; --sonar-ink:#F5B860; --sonar-hot:#FF7A4D;
  --water:#5FB3C6;
  --sh:0,8,16; --hl:170,205,230; --eng-light:rgba(150,190,220,.35);
  --on-sonar:#12212D;
  --page-hi:#16293A; --page1:#0E1B27; --page2:#0A151F; --page3:#060F17;
  --strip1:#050C16; --strip2:#0D2038; --strip3:#143154; --strip-line:#020710;
  --tide-bar:#4C86D8;   /* 물살의 세기 막대 */
  --on-strip:#DCEAF8; --on-strip-hi:#FFFFFF; --on-strip-dim:#7C9AB8;
  --on-strip-soft:#B3C9E0; --brand-accent:#FFC061;
  --strip-eng-dark:rgba(0,0,0,.92); --strip-eng-light:rgba(96,150,205,.52);
  --strip-eng-warm:rgba(45,20,0,.85); --strip-eng-warm-hl:rgba(255,198,110,.42);
  --bay:#152A3A; --well:#0F2130; --bay-line:#2E5B76; --bay-rail:#4FA3C0;
  --on-bay-dim:#9DBACC; --bay-ph:#5F86A0; --bay-cite:#E0A659;
  --h1a:#0B1A26; --h1b:#08151F; --h1c:#061119; --h1d:#040C12;
  --note-bg:#1C2730; --note-ink:#9FB0BC;
  --del-ink:#5A7484; --warn-ink:#FFB59A;
}

/* ── 노을 — 돌아오는 길. 하늘이 붉고 물이 금빛이다 ─────────────────── */
:root[data-theme="dusk"]{
  --abyss:#FFFDFB; --hull:#FFF9F4; --hull-2:#F7EAE0; --line:#E8D2C2;
  --ink:#3A2118; --dim:#8A6553; --lamp:#2A1610; --ink-soft:#61402F;
  --ink-page:#2A1610;
  --sonar:#EE7B3C; --sonar-ink:#A33F0C; --sonar-hot:#C2321B;
  --water:#9A5A2E;
  --sh:74,30,12; --hl:255,252,246; --eng-light:#FFFFFF;
  --sonar-rgb:238,123,60; --hot-rgb:194,50,27; --on-sonar:#2A1610;
  --btn-sh:110,40,10; --btn-hl:255,222,190;
  --page-hi:#FFF6E8; --page1:#FDE9D3; --page2:#F8D2B4; --page3:#EFB894;
  --strip1:#5B1F22; --strip2:#9C3A22; --strip3:#D46A2C; --strip-line:#3E1214;
  --tide-bar:#3E7FC4;   /* 물살의 세기 막대 */
  --on-strip:#FFF3E6; --on-strip-hi:#FFFFFF; --on-strip-dim:#E8BC9A;
  --on-strip-soft:#FBDCC2; --brand-accent:#FFD98A;
  --strip-eng-dark:rgba(38,8,4,.88); --strip-eng-light:rgba(246,168,118,.62);
  --strip-eng-warm:rgba(64,22,0,.80); --strip-eng-warm-hl:rgba(255,224,152,.58);
  --bay:#FBE3CE; --well:#F7D8BE; --bay-line:#C08154; --bay-rail:#7A3312;
  --on-bay-dim:#6B3418; --bay-ph:#9A6540; --bay-cite:#8A3A05;
  --h1a:#F0CBAA; --h1b:#E3B792; --h1c:#D3A27C; --h1d:#C08D68;
  --note-bg:#EFE3DA; --note-ink:#5C463B;
  --del-ink:#BFA292; --warn-ink:#93300F;
}

/* ── 해도 — 바다의 지도. 눈금과 등화 자홍 ───────────────────────── */
:root[data-theme="chart"]{
  --abyss:#FFFFFF; --hull:#FBFDFC; --hull-2:#E4EFED; --line:#C3D6D6;
  --ink:#14333C; --dim:#5C7B84; --lamp:#0A2028; --ink-soft:#40626D;
  --ink-page:#0A2028;
  --sonar:#A93A80; --sonar-ink:#8E2A69; --sonar-hot:#C2185B;
  --water:#2E8FA0;
  --sh:20,51,60; --hl:255,255,255; --eng-light:#FFFFFF;
  --sonar-rgb:169,58,128; --hot-rgb:194,24,91; --on-sonar:#FFFFFF;
  --btn-sh:70,10,50; --btn-hl:245,200,228;
  /*  ★ 판 바탕을 **해도의 옅은 청색**으로 바꾼다 (2026-08-13 지정: "화면 테마
      중 해도의 배경색을 조정하고 버튼의 색상을 일치시켜 줘").
      ▣ 무엇이 어긋나 있었나 — 이 테마는 **밝은 화면**인데(--abyss #FFFFFF)
        「나」의 테마 고르는 단추만 짙은 남색(#0B1A26)이었다. 눌러 보기 전에는
        어두운 테마인 줄 안다. 단추는 그 테마의 **미리보기**여야 한다.
      ▣ 왜 청색인가 — 이름이 '해도(海圖)' 다. 종이 해도는 물이 옅은 청색이고
        뭍이 미색이다. 앞의 초록빛 회색(#F2F6F5)은 그 이름과 이어지지 않았다.
      ▣ 여명(#E4F1F5)과 어떻게 가르나 — 바탕만으로는 비슷하다. 이 테마를
        가르는 것은 **자홍 강조색**(--sonar #A93A80)이라, 단추에서도 글자를
        자홍으로 두어 그 차이가 먼저 보이게 했다.
      ★ 카드(--hull #FBFDFC)보다 판을 한 단 낮춰 카드가 저절로 떠오르게 한다 —
        둘 다 흰색이면 경계가 선에만 걸린다(백파에 적어 둔 것과 같은 이유). */
  --page-hi:#FFFFFF; --page1:#EFF5F9; --page2:#E2EEF5; --page3:#D4E5F0;
  --strip1:#0C2830; --strip2:#14333C; --strip3:#1E4A55; --strip-line:#061A20;
  --tide-bar:#2F6FA8;   /* 물살의 세기 막대 */
  --on-strip:#EAF3F2; --on-strip-hi:#FFFFFF; --on-strip-dim:#94AFB4;
  --on-strip-soft:#C7DAD9; --brand-accent:#E48CC0;
  --strip-eng-dark:rgba(0,8,12,.88); --strip-eng-light:rgba(126,168,178,.58);
  --strip-eng-warm:rgba(46,0,30,.80); --strip-eng-warm-hl:rgba(236,158,204,.52);
  --bay:#DEEBEA; --well:#D2E4E2; --bay-line:#7FA3A3; --bay-rail:#A93A80;
  --on-bay-dim:#28545E; --bay-ph:#6F8E95; --bay-cite:#8E2A69;
  --h1a:#CFDEDC; --h1b:#BCD0CD; --h1c:#A8C1BE; --h1d:#94B2AF;
  --note-bg:#E2E6E4; --note-ink:#4C5B5C;
  --del-ink:#9FB3B4; --warn-ink:#9C1F4E;
}

/* ── 백파(白波) — 부서지는 하얀 파도. **바탕이 흰색이다** (2026-08-06 지정) ──
   ▣ 왜 흰 바탕인가
     기본 테마(여명)는 옅은 물빛 위에 흰 카드가 떠 있는 화면이다. 부두에서
     해를 정면으로 받으면 그 옅은 물빛조차 빛나 보여 카드와의 경계가 녹는다.
     백파는 바탕에서 물빛을 뺀다 — 파도가 부서진 자리처럼 희고, 남는 색은
     머리띠 하나뿐이다. 다만 판(#F0F0F0)은 카드(#FFFFFF)보다 한 단 낮춰
     **카드가 저절로 떠오르게** 한다. 둘 다 순백이면 경계가 선에만 걸린다.
   ▣ 그래서 --line 을 한 단 진하게 잡는다
     바탕과 카드가 둘 다 흰색이면 카드를 알아보게 하는 것은 테두리와 그림자뿐이다.
     기본(#D2E0E3)보다 진한 #D3DBE0 에 중성 회색 그늘(--sh)을 준다 —
     물빛 그늘을 흰 바탕에 쓰면 파란 때가 낀 것처럼 보인다.
   ▣ 색을 가진 것은 여전히 박스뿐
     묻는 칸·답 칸(--bay)만 아주 옅은 청회색으로 남긴다. 이 두 자리는 사람이
     실제로 오가는 곳이라, 흰 바탕에서도 어디에 쓰고 어디서 읽는지 보여야 한다.
   ▣ 대비는 직사광 기준으로 올린다
     곁말(--dim #5A6B75)이 흰 바탕에서 5.6:1, 묻는 칸 위에서도 5.2:1 이다.
     물빛(--water)도 한 단 내려 잡아 5:1 을 넘긴다. */
:root[data-theme="whitecap"]{
  --abyss:#FFFFFF; --hull:#FFFFFF; --hull-2:#EFF3F5; --line:#D3DBE0;
  --ink:#16232B; --dim:#5A6B75; --lamp:#0B141A; --ink-soft:#3C4C56;
  --ink-page:#0B141A;
  --sonar:#F0A038; --sonar-ink:#9A5A06; --sonar-hot:#C23C12;
  --water:#1F6E80;
  /*  그늘은 중성 회색 — 물빛 그늘(16,52,66)을 흰 바탕에 쓰면 파랗게 뜬다 */
  --sh:24,36,44; --hl:255,255,255; --eng-light:#FFFFFF;
  --sonar-rgb:240,160,56; --hot-rgb:255,106,61; --on-sonar:#141E26;
  --btn-sh:90,55,5; --btn-hl:255,226,170;
  /*  ★ 박스 **밖**은 #F0F0F0 (2026-08-06 지정) — 네 칸을 같은 값으로 둬서
      body 의 두 겹 그라데이션이 통째로 한 색 판이 된다.
      ▣ 왜 순백이 아닌가
        처음엔 네 칸을 모두 #FFFFFF 로 뒀다. 그러면 바탕과 카드(--hull #FFFFFF)가
        **같은 색**이라 카드가 어디서 시작하는지 선과 그늘로만 알 수 있었다.
        한 단만 내려 두면 카드가 저절로 떠오른다 — 흰 것이 주인이라는 뜻은
        그대로 두면서(카드가 순백) 판만 뒤로 물린다. */
  --page-hi:#F0F0F0; --page1:#F0F0F0; --page2:#F0F0F0; --page3:#F0F0F0;
  --strip1:#12345B; --strip2:#1B4E8C; --strip3:#2C6AB3; --strip-line:#0C2340;
  --tide-bar:#1B62C4;   /* 물살의 세기 막대 */
  --on-strip:#F2F6FD; --on-strip-hi:#FFFFFF; --on-strip-dim:#B4C8E6;
  --on-strip-soft:#D3E2F7; --brand-accent:#FFCE7A;
  --strip-eng-dark:rgba(3,12,30,.88); --strip-eng-light:rgba(130,180,238,.70);
  --strip-eng-warm:rgba(60,28,2,.80); --strip-eng-warm-hl:rgba(255,214,140,.60);
  --bay:#EDF3F6; --well:#E3EBEF; --bay-line:#9DB3BD; --bay-rail:#1F6E80;
  --on-bay-dim:#33454F; --bay-ph:#6C808B; --bay-cite:#8A4E05;
  --h1a:#D8DEE2; --h1b:#C7CFD4; --h1c:#B5BFC6; --h1d:#A3AFB8;
  --note-bg:#F0F2F3; --note-ink:#4A5257;
  --del-ink:#A8B2B8; --warn-ink:#A3300F;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/*  ★ **스크롤 막대 자리를 늘 비워 둔다** (2026-09-24 지시: "각 메뉴 클릭시 우측의
    스크롤 바 생성 유무에 따라 화면이 움직이는데 … 일정하게 출력되도록").
    ▣ 무엇이 문제였나 — 화면마다 길이가 다르다. 긴 화면(항구정보)에는 막대가 서고
      짧은 화면(물때정보)에는 안 선다. 그 막대 폭(15px)만큼 본문 폭이 달라져,
      차림표를 누를 때마다 화면이 **좌우로 덜컥** 움직였다.
    ▣ `scrollbar-gutter:stable` 은 막대가 없어도 그 자리를 비워 둔다 — 폭이 늘
      같으니 움직이지 않는다. 막대를 억지로 띄우는 것이 아니다.
    ▣ 이 속성을 모르는 브라우저(사파리 18 아래)는 **늘 막대를 띄워** 같은 결과를
      만든다 — 그 자리를 비워 두는 다른 길이 없다.
    ▣ 폰은 막대가 화면 위에 겹쳐 뜨는(overlay) 쪽이라 애초에 자리를 안 먹는다 —
      이 규칙이 있어도 달라지는 것이 없다. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){
  html{overflow-y:scroll}
}
body{
  /*  ★ 바다 느낌 배경 (2026-08-05 지정)
      박스는 옅은 흰색이라 그 뒤가 물이면 종이가 물 위에 뜬 것처럼 보인다.
      두 겹으로 만든다 —
        ① 위에서 비치는 햇빛(radial) — 수면이 가장 밝은 자리
        ② 아래로 갈수록 깊어지는 물빛(linear) — 얕은 물 → 깊은 물
      ★ 조용해야 한다. 배경이 세면 박스 안의 표와 숫자가 묻힌다. 그래서
        가장 깊은 곳도 #C6DFE8 에서 멈춘다 — 물빛이지 물감이 아니다.
      ★ background-attachment:fixed — 스크롤해도 물이 따라 흐르지 않는다.
        같이 움직이면 긴 답변에서 배경만 눈에 밟힌다.
      ★ 색을 가진 것은 여전히 **박스뿐**이라는 규칙은 그대로다. 머리띠·카드·
        패널은 옅은 --hull, 묻는 칸과 답 칸만 연한 쪽빛(--bay)이다. */
  background:
    radial-gradient(120% 70% at 50% -10%, var(--page-hi) 0%, transparent 60%),
    linear-gradient(180deg, var(--page1) 0%, var(--page2) 45%, var(--page3) 100%);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--ui);
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--sonar-ink)}
::selection{background:var(--sonar);color:var(--on-sonar)}
:focus-visible{outline:2px solid var(--sonar);outline-offset:2px}

/* ── 껍데기 ────────────────────────────────────────────────────────────
   ★ 묻고 답하는 화면(ask.php)과 **같은 색·같은 테마**를 쓴다. 다른 껍데기를
     새로 지으면 한 서비스가 두 서비스처럼 보인다. */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(12px,3vw,22px)}
/*  ★ **머리띠 안쪽만** 첫 화면과 같은 치수로 (2026-09-24 지시: "맨 상단 메뉴
    위치가 이동하는데 이것 또한 항상 고정되도록 해").
    ▣ 무엇이 문제였나 — 첫 화면(service/ask.php)의 머리띠 안쪽은 `.strip-in`
      (max-width 1420 · 좌우 20px)이고, 나머지 화면은 이 `.wrap`(1180 · 22px)이다.
      그래서 차림표를 누를 때마다 로고가 23px ↔ 145px 로, 첫 메뉴가 142px ↔ 287px 로
      **좌우로 덜컥** 옮겨 앉았다(실측).
    ▣ 어느 쪽에 맞추나 — **넓은 쪽**이다. 띠는 창 끝까지 이어지는 막대라 그 안의
      글이 창 가장자리 가까이 서는 것이 자연스럽고, 가장 많이 들어오는 첫 화면이
      한 자리도 안 움직인다(그 화면의 본문도 1420이다).
    ▣ **본문은 그대로 1180** 이다 — 이 규칙은 머리띠 안쪽에만 건다. */
.strip > .wrap{max-width:1420px;padding-left:20px;padding-right:20px}

/*  ★ 머리띠는 **조황정보 화면과 같아야 한다** (2026-08-09 지정).
    화면을 옮길 때마다 맨 위가 흰 띠 ↔ 쪽빛 띠로 바뀌면 딴 사이트로 넘어온 것처럼
    보인다. 같은 색·같은 글자·같은 자리로 맞춘다.
    ★ 문서 제목(<title>)은 **화면마다 다르게 둔다** — 그것이 검색결과에 뜨는 줄이라
      전부 같게 만들면 검색에서 손해다. 눈에 보이는 머리띠와 문서 제목은 다른 것이다. */
.strip{position:sticky;top:0;z-index:20;
  background:linear-gradient(100deg,var(--strip1) 0%,var(--strip2) 55%,var(--strip3) 100%);
  border-bottom:1px solid var(--strip-line);
  box-shadow:0 2px 10px rgba(var(--sh),.18)}
/*  ★ 사이 띄움도 첫 화면과 같은 16px (2026-09-24) — 로고 칸 너비(min-width)와
    이 값이 함께 **첫 메뉴가 서는 자리**를 정한다. 둘 중 하나만 맞추면 여전히 어긋난다. */
.strip .wrap{display:flex;align-items:center;gap:16px;min-height:52px;
  flex-wrap:nowrap}
.brand{font-family:var(--ui);font-size:19px;font-weight:400;letter-spacing:-.01em;
  color:var(--on-strip);text-decoration:none;white-space:nowrap;flex:0 0 auto}
/*  ★ 로고 칸을 **못 박는다** (2026-09-24 지시: 맨 위 메뉴가 화면마다 옮겨 앉지
    않도록). 첫 화면의 로고는 모노 13.5px(104px), 여기 로고는 고딕 19px(128px)라
    글자 폭이 달라 **첫 메뉴가 142px ↔ 165px 로 흔들렸다**(실측).
    글꼴을 한쪽으로 통일하면 두 화면 중 하나의 생김새가 바뀐다 — 생김새는 그대로
    두고 **칸 너비만** 같게 잡는다. 좁은 폭에서는 아래 미디어 규칙이 푼다. */
.strip .brand{min-width:128px}
.brand b{font-weight:800;color:var(--brand-accent)}

/*  차림표 — 좁아지면 **가로로 굴린다**. 접어 넣는 햄버거보다 낫다:
    칸이 여섯뿐이고, 낚시꾼은 한 손으로 화면을 넘긴다. */
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;
  flex:1 1 auto;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;display:block;padding:6px 10px;border-radius:7px;white-space:nowrap;
  color:var(--on-strip-soft);text-decoration:none;font-size:13px;font-weight:700}
.nav a:hover{background:rgba(255,255,255,.12);color:var(--on-strip)}
/*  ★ 지금 보고 있는 칸은 **흰 글씨**다(2026-08-09 지정) — 진한 쪽빛 위에서
    가장 밝게 선다. 밑줄과 옅은 바탕까지 함께 둬서 색을 못 보는 사람도 갈린다. */
/*  ★ 회원 전용 칸(관심선박)은 로그인 전에는 **한 단 물러난다**.
    감추지 않는 이유 — 있는 줄 알아야 로그인할 마음이 든다. */
.nav a.off{opacity:.55}
.nav a.off::after{content:'·';margin-left:4px;opacity:.8}
.nav a.on{color:var(--on-strip-hi);background:rgba(255,255,255,.14);
  box-shadow:inset 0 -2.5px 0 var(--brand-accent)}

main{padding:clamp(14px,2.4vw,24px) 0 40px}

/*  길잡이 — 지금 어디에 있나. 검색으로 바로 들어온 사람에게 특히 필요하다. */
.crumb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  font-size:12.5px;color:var(--dim);margin-bottom:10px}
.crumb a{color:var(--dim);text-decoration:none}
.crumb a:hover{color:var(--sonar-ink);text-decoration:underline}
.crumb i{font-style:normal;opacity:.5}

.card{background:var(--hull);border:1px solid var(--line);border-radius:12px;
  padding:clamp(13px,2vw,18px);margin-bottom:14px;
  box-shadow:0 1px 0 rgba(var(--hl),.7), 0 2px 12px rgba(var(--sh),.07)}
/*  ★ 낱장의 맨 위 제목은 **h1 로 적는다**(2026-09-23, 구글 SEO 시작 가이드) —
    검색 로봇은 h1 로 「이 쪽이 무엇인가」를 읽는다. 모양은 h2 와 **똑같이** 둔다:
    화면은 하나도 바뀌지 않고 글의 층만 바로 선다. */
.card h2,.card h1{margin:0 0 10px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--lamp);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card h2 .meta,.card h1 .meta{font-size:11.5px;font-weight:400;color:var(--dim);
  font-family:var(--mono)}
.card h3{margin:16px 0 8px;font-size:13.5px;color:var(--ink)}
.card h3:first-child{margin-top:0}

.muted{color:var(--dim)}
.mono{font-family:var(--mono)}

/*  ★ 한글은 **낱말 가운데서 끊지 않는다** (2026-08-28). 기본값은 CJK 를
    아무 자리에서나 접어, 좁은 폰에서 「사업자등록번/호」로 잘렸다(실측).
    keep-all 이면 띄어쓰기에서만 접힌다. */
.foot{border-top:1px solid var(--line);margin-top:24px;padding:16px 0 30px;
  font-size:12.5px;color:var(--dim);word-break:keep-all}
.foot .pv{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;opacity:.85}
.foot .pv:hover{opacity:1}
/*  ★ 바닥글 글자는 **한 크기**다 (2026-08-28 지시: "footer 의 글자 크기를
    통일하고, 첫줄과 둘째줄 간격을 좁혀줘"). .biz 만 11px 로 작아 두
    줄의 크기가 달랐다(실측 12px vs 11px) — 물려받게 두면 한 벌이 된다.
    자리(제 줄을 차지)와 옅기는 그대로 둔다. */
.foot .biz{flex:1 0 100%;opacity:.75;line-height:1.6}
/*  ★ '자료는 수집 시점 기준…' 안내는 **한 단 작게** (2026-08-12 지정).
    바닥글에서 가장 덜 급한 글인데 이용약관·개인정보와 같은 크기라
    눈이 먼저 갔다. 지우지는 않는다 — 밝혀야 하는 말이다. */
/*  ★ 2026-08-28 지시("footer 의 글자 크기를 통일")로 **걷었다.**
    2026-08-12 에 이 안내만 한 단 작게 두었는데, 이제 바닥글은 한 크기다.
    덜 급한 글이라는 표시는 크기가 아니라 **옅기**(색)가 이미 하고 있다. */
/*  ★ 바닥글은 **가운데 정렬**이다 (2026-08-28 지시: "footer 를 중앙 정렬해").
    ▣ 이 바닥글의 속은 **가로 flex** 라 `text-align` 만으로는 안 움직인다 —
      칸을 미는 것은 justify-content 다. 접힌 뒤(둘째 줄)에도 가운데를
      지키려고 text-align 을 함께 둔다(줄 안의 글자 몫).
    ▣ .biz 는 `flex:1 0 100%` 라 늘 제 줄이다 — 그 줄도 가운데로 온다. */
.foot .wrap{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;
  justify-content:center;text-align:center}
.foot a{color:var(--dim)}

@media (max-width:560px){
  .strip .wrap{gap:8px;min-height:48px}
  /*  좁은 폭에서는 로고 칸을 풀어 준다 — 메뉴가 먼저 자리를 차지해야 한다. */
  .strip .brand{min-width:0}
  .brand{font-size:17px}
  .nav a{padding:6px 8px;font-size:12.5px}
}
/*  움직임을 줄여 달라는 설정을 존중한다 */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── 회원 기능 — 좋아요 하트 · 관심선박 ────────────────────────────────
   ★ 배가 나오는 자리마다 같은 모양이어야 한다. 목록·상세·답변 어디서 눌러도
     같은 것이 같게 보여야 사람이 배운 것을 다시 안 배운다.
   ★ **단추처럼 보여야 한다.** 처음에는 회색 ♡ 하나만 뒀더니 무엇을 누르는
     것인지 알 수 없었고 받은 수도 안 보였다(지적받음). 테두리를 주고,
     넓은 자리에서는 이름까지 적고, 받은 수를 늘 옆에 둔다. */
.nkacts{display:inline-flex;gap:5px;margin-left:8px;vertical-align:middle}
/*  ★ 글자색은 --dim 이 아니라 --ink-soft 다. --dim 으로 뒀더니 밝은 테마
    둘에서 대비가 기준(작은 글씨 4.5:1)에 못 미쳤다 —
    여명 4.36 · 해도 4.45 (실측). 누르라고 만든 것이 흐리면 안 된다. */
.nkacts button{display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  padding:3px 9px;border-radius:99px;line-height:1.5;
  border:1px solid var(--line);background:var(--hull);color:var(--ink-soft);
  font-family:var(--ui);font-size:12.5px;font-weight:700;white-space:nowrap}
.nkacts button:hover{background:var(--hull-2);color:var(--ink);border-color:var(--water)}
/*  ── 하트·별에 입체를 준다 (2026-08-09 지정: "조황 등급 아이콘처럼") ────
    ▣ 등급 칸과 **같은 말**을 쓴다 — 방향이 뜻이다
        안 누른 것 = **파여 있다**(음각) : 위에 그늘, 아래에 빛줄
        누른 것   = **도드라진다**(양각) : 위가 밝고 아래가 어둡고, 아래로 그림자
      한 화면에서 두 벌의 입체 언어를 쓰면 둘 다 장식으로 읽힌다.
      등급 칸이 이미 '올라온 것과 내려간 것'으로 말하고 있으므로 여기도 같게 한다.
    ▣ ★ 다만 등급 칸과 달리 **그림을 다시 그리지 않는다**
      등급은 네모라서 CSS 로 그릴 수 있었지만 하트와 별은 모양 자체가 뜻이다.
      글자(♡♥☆★)로 두고 **text-shadow 로만** 판다 — 이 화면의 상표·전광판이
      쓰는 것과 같은 방법이다.
    ▣ ★ 빛은 위에서 온다
      음각은 위가 어둡고 아래가 밝다. 양각은 그 반대다. 순서를 뒤집으면
      눌린 것이 안 눌린 것처럼 보인다.
    ▣ ★ 색은 건드리지 않는다
      진하기를 얻겠다고 글자색을 어둡게 하면 애써 맞춘 대비가 무너진다.
      깊이는 **가장자리**가 만든다. */
.nkacts .ic{font-size:15px;line-height:1;
  text-shadow:
    /*  ★ var() 하나가 못 풀리면 **선언 전체가 무효**가 된다 — 토큰을 안 가진
        화면에서 하트·별의 입체가 통째로 사라진 적이 있다(onfishing.net 해도).
        그래서 되돌아갈 값을 함께 적는다. */
    /*  ★ 더 깊게 판다 (2026-08-10 지정). 선 두 줄만으로는 '그어 놓은 금' 에
        가까웠다. 홈은 **모서리(선)와 그 안쪽(번짐)** 두 겹으로 보인다 —
        선은 경계를, 번짐은 깊이를 만든다. */
    0 -1px 0   rgba(var(--sh),.55),   /* 윗입술 모서리 — 파인 쪽 */
    0 -2px 2px rgba(var(--sh),.30),   /* 그 안쪽 그늘 — 깊이 */
    0  1px 0   var(--eng-light,rgba(255,255,255,.60)),  /* 아랫입술 빛줄 */
    0  2px 2px color-mix(in srgb, var(--eng-light,#fff) 45%, transparent);
}
/*  누른 것 — 솟는다. 위아래가 정확히 뒤집히고 아래로 그림자가 진다. */
.nkacts .nklike.on .ic,
.nkacts .nkfav.on .ic{
  /*  ★ 아래 그늘을 회색(--sh)으로 뒀더니 붉은 하트 밑에 **잿빛 얼룩**이 앉아
      둘이 다른 재질로 보였다. 제 색을 옅게 깐다(currentColor) — 하트는 붉은
      그늘을, 별은 주황 그늘을 진다. 이 저장소가 h1 에서 쓰는 규칙과 같다
      ("그늘 색은 검정이 아니라 바탕의 색을 어둡게 한 것"). */
  /*  ★ 윗면 빛을 순백(rgba(255,255,255,.60))으로 뒀더니 **어두운 테마에서
      번쩍였다** — 솟은 것이 아니라 발광하는 것으로 보였다(실측: 새벽 테마).
      --eng-light 는 테마마다 값이 다르다(밝은 곳은 흰색, 어두운 곳은 옅은
      푸른빛 35%). 이 화면의 다른 음각·양각이 모두 쓰는 값이라 결도 맞는다. */
  /*  ★ 더 솟게 한다 (2026-08-10 지정) — 빛 두 겹, 그늘 세 겹.
      멀어질수록 옅고 넓게 편다(1px 선 → 2px 번짐 → 5px 그림자).
      그림자가 한 겹뿐이면 '붙어 있는 것', 세 겹이면 '떠 있는 것' 으로 읽힌다. */
  text-shadow:
    0 -1px 0   var(--eng-light,rgba(255,255,255,.60)),
    0 -2px 2px color-mix(in srgb, var(--eng-light,#fff) 50%, transparent),
    0  1px 0   color-mix(in srgb, currentColor 55%, transparent),
    0  2px 2px color-mix(in srgb, currentColor 38%, transparent),
    0  4px 6px color-mix(in srgb, currentColor 22%, transparent);
}
.nkacts .cnt{font-family:var(--mono);font-weight:400;color:var(--ink-soft)}
/*  ★ 이름표(좋아요·관심선박·내 관심선박)만 **2px 작게** 한다 (2026-08-09 지정).
    하트·별 그림과 숫자는 그대로 둔다 — 눈이 먼저 잡는 것은 그림과 숫자이고,
    이름표는 그것이 무엇인지 알려 주는 곁말이라 한 단 물러나도 된다. */
.nkacts .lb{font-size:10.5px}
.nkacts .cnt{font-size:12.5px}
/*  ★ 채워진 하트가 눈에 띄어야 한다. 빈 하트가 진하면 이미 누른 줄 안다.
    ★ 눌린 색은 **한 단 내려** 쓴다. 주황(--sonar-hot/--sonar-ink)을 그대로
      썼더니 옅은 주황 바탕 위에서 대비가 4.32·4.19 로 기준(4.5:1)에 못 미쳤다
      (여명 테마, 실측). 잉크 쪽으로 22% 섞어 색은 지키고 진하기만 얻는다. */
.nkacts .nklike.on{color:color-mix(in srgb, var(--sonar-hot) 78%, var(--lamp));
  border-color:var(--sonar-hot); background:rgba(var(--hot-rgb),.07)}
.nkacts .nklike.on .cnt{color:color-mix(in srgb, var(--sonar-hot) 78%, var(--lamp))}
.nkacts .nklike.has .cnt{color:var(--ink)}
.nkacts .nkfav.on{color:color-mix(in srgb, var(--sonar-ink) 78%, var(--lamp));
  border-color:var(--sonar); background:rgba(var(--sonar-rgb),.10)}
.nkacts .nkfav.on .cnt{color:color-mix(in srgb, var(--sonar-ink) 78%, var(--lamp))}
.nkacts .nkfav.has .cnt{color:var(--ink)}
/*  ★ 링크 모양 (2026-08-09 지정) — 순위표와 항구의 낚시배 목록에서 쓴다.
    알약 단추는 배 상세처럼 **한 자리에 하나** 있을 때 알맞다. 줄마다 두 개씩
    여덟 줄이면 알약 열여섯이 화면을 뒤덮어, 정작 배 이름이 안 읽힌다.
    글자 링크로 낮추고 크기도 한 단 줄인다 — 누를 수 있다는 것만 알면 된다.
    ★ 배 상세(data-boat-wide)는 지정대로 알약을 그대로 쓴다. */
.nkacts.link{gap:8px;margin-left:8px}
.nkacts.link button{border:0;background:none;padding:0;border-radius:0;
  font-size:11.5px;font-weight:600;color:var(--water);
  text-decoration:none;border-bottom:1px dotted transparent}
.nkacts.link button:hover{background:none;border-bottom-color:currentColor;
  color:var(--sonar-ink)}
/*  ★ 링크 모양에서는 글자가 12.5px 로 작다 — 같은 두께로 파면 획이 메워져
    하트가 동그라미로 뭉갠다. 그늘만 한 겹, 빛줄은 반만 준다. */
/*  ★ 작은 자리(목록 안)도 한 단 깊게 (2026-08-10 지정). 다만 큰 것보다
    **한 겹 덜** 쓴다 — 13px 글자에 세 겹을 얹으면 획이 뭉개진다. */
.nkacts.link .ic{font-size:13px;
  text-shadow:0 -1px 0 rgba(var(--sh),.46),
              0 -2px 1.5px rgba(var(--sh),.22),
              0  1px 0 var(--eng-light,rgba(255,255,255,.55))}
.nkacts.link .nklike.on .ic,
.nkacts.link .nkfav.on .ic{
  text-shadow:0 -1px 0 var(--eng-light,rgba(255,255,255,.60)),
              0  1px 0   color-mix(in srgb, currentColor 48%, transparent),
              0  2px 3px color-mix(in srgb, currentColor 30%, transparent)}
.nkacts.link .cnt{font-size:11px;color:inherit;opacity:.85}
/*  ★ 하트·별 그림(SVG)의 크기 — 폰 갈래(아래 isHost 블록)·첫 화면(ask.php)에만 있어 데스크톱 낱장(항구·선사·배)에서는
    그림이 0×0 이었다(2026-09-17 실측: 항구 화면 타일의 아이콘이 안 보이고 수만 보였다). 껍데기 공통에 둔다. */
.nkacts .ic{width:16px;height:16px;vertical-align:-3px;display:inline-block}
.nkacts.link .ic{width:14px;height:14px;vertical-align:-2.5px}
.nkacts.link .nklike.on{background:none;border:0;color:var(--sonar-hot)}
.nkacts.link .nkfav.on{background:none;border:0;color:var(--sonar-ink)}
.nkfavtag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;
  font-size:11px;font-weight:700;vertical-align:middle;
  background:var(--sonar);color:var(--on-sonar)}
.is-fav{outline:1px solid var(--sonar);outline-offset:2px;border-radius:8px}
@media (max-width:560px){ .nkacts{gap:4px;margin-left:6px}
  .nkacts button{padding:3px 7px;font-size:12px} .nkacts .lb{display:none} }

#nktoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--lamp);color:#fff;padding:9px 16px;border-radius:99px;
  font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;
  z-index:60;box-shadow:0 6px 22px rgba(var(--sh),.30);max-width:92vw;text-align:center}
#nktoast.on{opacity:1;transform:translate(-50%,0)}

/*  머리띠 오른쪽 — 로그인 / 내 정보. 조황정보 화면의 .stripme 와 같은 모양이다. */
.nkme{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:12.5px;font-weight:700;color:var(--on-strip);text-decoration:none;
  padding:5px 11px;border-radius:99px;
  border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.10)}
.nkme:hover{background:rgba(255,255,255,.20);color:var(--on-strip-hi)}
.nkme .tk{font-family:var(--mono);color:var(--brand-accent)}
@media (max-width:560px){ .nkme{padding:4px 9px;font-size:12px} }

/*  ══ 「조과 분석」 부르는 단추 — 배 낱장(/boat/{이름}) ═══════════════════════
    2026-09-05 지시(전수 점검): *"naksigo.com·m.naksigo.com 배 낱장에는
    「조과 예측」만 있고 「조과 분석」이 없다 — onfishing·fishlog 의 같은
    자리에는 있다."*

    ▣ ★ **기하는 「조과 예측」(.fcbtn)과 한 벌**이다 — 같은 34px 높이·같은 9px
      모서리·같은 13px 굵은 글자. 나란히 서는 두 단추의 크기가 다르면 그것이
      어긋난 것이다(layout/_forecast.php 의 .fcbtn 을 그대로 잰 값).
    ▣ ★ **색만 갈랐다.** 예측은 채운 호박(--sonar), 분석은 **테두리만 있는
      조용한 단추**다 — 이 저장소가 네 사이트에서 지켜 온 규율 그대로다
      (onfishing.net 은 `.linkbtn`, fishlog.kr 은 `.btfl`, fishtoday.kr 은
      `.btft`). 분석은 이미 들어온 15일치를 **읽으러** 가는 것이고, 예측은
      이 서비스가 권하는 다음 걸음이라 한 단 앞에 선다.
    ▣ ★ 아이콘 크기는 손잡이 **한 벌 값**(--btbtn-ico:11px)을 따른다 —
      그 값은 layout/_boattrend.php 가 정한다(네 화면이 나눠 쓴다).
    ▣ ★ 누르는 넓이 **44px** 은 `::before` 누름판이 지킨다(작업규칙 §4).
      보이는 상자는 옆의 .fcbtn 과 나란한 34px 로 두고 표적만 넓힌다 —
      /favorites 의 작은 손잡이(.fcmini)가 쓰는 것과 같은 길이다. */
.btbtn{position:relative;display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  padding:7px 13px;border-radius:9px;min-height:34px;
  border:1px solid var(--line);background:var(--hull);color:var(--ink);
  font-family:var(--ui);font-size:13px;font-weight:800}
.btbtn::before{content:'';position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:var(--btbtn-tap,44px)}
.btbtn:hover{background:var(--hull-2)}
.btbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/*  ★ 그림 크기는 손잡이 **한 벌 값**(--btbtn-ico)이다 — 안 재면 브라우저
    기본(100%)으로 부풀어 줄을 무너뜨린다. 값은 layout/_boattrend.php 가 정한다.
    ★ 「조과 예측」(.fcbtn)에는 그림이 없다 — 이 사이트의 다른 「조과 예측」도
      글자만이라 여기만 붙이면 같은 단추가 두 모양이 된다. */
.fccall .rfcico{width:var(--btbtn-ico,11px);height:var(--btbtn-ico,11px);flex:0 0 auto}
.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}
/*  ★ 긴 주소가 **화면을 통째로 민다** (2026-09-24 실측 · 360px에서 문서 폭이
    783px 이 됐다). 조황 원문에는 예약 사이트 주소가 띄어쓰기 없이 길게 적혀
    있는 일이 잦은데, `pre-wrap` 은 **줄바꿈은 지키되 안 끊기는 글자는 안 끊는다.**
    끊을 자리가 없으면 아무 데서나 끊게 둔다 — 본문이 가로로 밀리면 안 된다
    (이 집안의 반응형 규칙). 한글은 `break-word` 가 낱말 단위를 지킨다. */
.rp .body{font-size:14px;line-height:1.75;margin:0 0 14px;white-space:pre-wrap;
  overflow-wrap:anywhere;word-break:break-word}
.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;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.rp .spec h2 b{font-weight:800}
/*  항구·선박 기능 단추 줄(2026-09-29) — 단추 옷은 .ptbtn(layout/_porttrend.php) */
.rp .rpacts{margin:10px 0 0;padding-top:4px;border-top:1px dashed var(--line)}
.rp .rpacts .ptcall{margin:6px 0 0}
.rp .rpacts .lb{font-size:12px;font-weight:700;color:var(--ink);min-width:4.5em}
/*  ★ 「예약 ↗」·「홈페이지 ↗」 알약 (2026-09-16 지시) — ask.php 의 같은 규칙과 한 벌.
    이 낱장의 CSS 는 여기(reportCss)에 따로 있어 ask.php 만 고치면 낱장에는 안 닿는다. */
.rp .spec h2 .go{font-size:11.5px;font-weight:700;padding:3px 9px;border:1px solid var(--line);
  border-radius:999px;color:var(--ink);text-decoration:none;background:var(--panel,var(--hull,#fff))}  /* --panel 은 fishnow 토큰 — 없는 사이트는 --hull(테마 바닥). 흰 바탕에 연한 글자 (2026-09-20 m.naksigo #ask 지시) */
.rp .spec h2 .go:hover{border-color:var(--accent,#0f6fd1)}
/*  ★ 여섯 칸을 **한 줄에** 늘어놓는다 (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} }