: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}
/*  ── 음성 단추 (마이크 · 스피커 · 목소리 고르기) ─────────────────────── */
.vcwrap{
  --vc-btn:32px;                                   /* 부르는 쪽이 줄 높이에 맞춘다 */
  --vc-accent:var(--water,#20758B);                /* 두 사이트 모두 --water 가 있다 */
  --vc-face:var(--card,var(--hull,#FFFFFF));
  --vc-line:var(--line,#C6D6DA);
  --vc-dim:var(--dim,#5E7C86);
  --vc-ink:var(--ink,#152F38);
  --vc-warn:var(--warn,var(--warn-ink,#B3402A));
  display:inline-flex;align-items:center;gap:4px;position:relative;flex:0 0 auto;
}
.vcwrap .vcbtn{
  flex:0 0 auto;width:var(--vc-btn);height:var(--vc-btn);padding:0;
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  border:1px solid var(--vc-line);border-radius:10px;
  background:var(--vc-face);color:var(--vc-dim);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.vcwrap .vcbtn svg{width:calc(var(--vc-btn) * .56);height:calc(var(--vc-btn) * .56);
  stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/*  ★ 보이는 것보다 넓게 누를 수 있게. 28px 단추도 손가락에는 44px 다. */
.vcwrap .vcbtn::after{content:"";position:absolute;left:50%;top:50%;
  width:max(44px,var(--vc-btn));height:max(44px,var(--vc-btn));
  transform:translate(-50%,-50%)}
/*  ★ 켜져 있을 때는 hover 색을 입히지 않는다 (2026-08-20 실측).
    :hover:not(:disabled) 는 특이도가 [aria-pressed=true] 보다 높아, 마우스를
    올린 채 켜면 흰 아이콘이 다시 물빛으로 돌아가 **바탕과 같은 색**이 됐다 —
    단추가 통째로 빈 네모로 보였다. 눌러 켠 상태가 hover 보다 중요하다. */
.vcwrap .vcbtn:hover:not(:disabled):not([aria-pressed="true"]){
  border-color:var(--vc-accent);color:var(--vc-accent)}
.vcwrap .vcbtn:focus-visible{outline:2px solid var(--vc-accent);outline-offset:2px}
.vcwrap .vcbtn:disabled{opacity:.4;cursor:default}
/*  누르고 있는 동안(듣는 중·읽는 중)은 채워서 확실히 다르게 보인다. */
.vcwrap .vcbtn[aria-pressed="true"]{background:var(--vc-accent);border-color:var(--vc-accent);color:#fff}

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

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

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

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

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

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

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

/*  ★ 잠긴 단추 — 「읽기 방식」이 브라우저 음성이면 목소리 고르기가 잠긴다
    (2026-08-21 지정). **감추지 않고 잠근다** — 왜 못 고르는지 보이지 않으면
    고장으로 읽힌다. 눌러도 아무 일이 없고, 낭독기에는 aria-disabled 로 알린다.
    ▣ 색만으로 알리지 않는다 — 커서도 not-allowed 로 바뀌고 title 이 까닭을 적는다. */
.vcwrap .vcbtn.vclock,
.vcpop .vcgrid button.vclock{opacity:.42;cursor:not-allowed}
.vcwrap .vcbtn.vclock:hover,
.vcpop .vcgrid button.vclock:hover{background:inherit;border-color:inherit}
/*  읽기 방식은 두 갈래 — 목소리 격자와 같은 한 줄에 둘이다(2026-08-21 지시로
    「읽지 않음」을 걷었다. 그래서 .vceng3(셋)·.vcoff 는 함께 없앴다). */

/* ══ 뼈대 ══════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/*  ★ 예측 그래프의 칸 수 — 운영자 설정(adm 「설정 › 조과 예측 기간」)을 따른다.
    막대(.fc)와 날짜 눈금(.fcx)이 **같은 값**을 써야 날짜가 제 막대 아래 선다. */
:root{--fcn:15}
html,body{height:100%}
/*  ══ 글자 크기 (2026-08-13 지정: "「나」에 폰트 크기를 추가하고 현재 크기를
    기준으로 더 크게 여러 단계로, 테마처럼 로컬에 저장") ══════════════════════
    ▣ ★ 왜 `zoom` 인가 — 이 화면은 글자·여백·아이콘이 **전부 px** 로 짜여 있다.
      html 의 font-size 를 키워도 px 값은 꿈쩍하지 않아 글자만 커지고 칸은
      그대로다(줄이 넘치고 단추 안에서 글자가 잘린다). zoom 은 **화면 전체**를
      같은 비율로 키워 짜임새를 그대로 지킨다 — 손가락으로 벌린 것과 같다.
    ▣ ★ 다만 뷰포트 단위(vh·svh)는 zoom 을 따라오지 않는다. 100vh 가 그대로
      1.3배가 되어 화면 밖으로 넘친다 — 그래서 vh 를 쓰는 자리마다 `/var(--fs)`
      로 **되돌려 나눈다**. 아래 min-height·max-height 넷이 그것이다.
      새로 vh 를 쓰는 규칙을 만들면 여기도 같이 나눠 줘야 한다.
    ▣ 기본은 1(지금 크기)이고 **키우기만** 한다 — 지시가 '더 크게' 다.
      작게는 두지 않는다: 이미 12px 안팎인 곁말이 더 작아지면 못 읽는다. */
body{margin:0;font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ink);
  background:linear-gradient(180deg,var(--page1,#E4F1F5),var(--page2,#D5E8EF));
  -webkit-text-size-adjust:100%;overscroll-behavior-y:none;zoom:var(--fs,1)}
.app{min-height:100%;display:flex;flex-direction:column}

/* 앱바 */
.appbar{position:sticky;top:0;z-index:30;flex:0 0 auto;height:52px;display:flex;
  align-items:center;gap:9px;padding:0 12px;color:var(--on-strip);
  background:linear-gradient(100deg,var(--strip1),var(--strip2) 55%,var(--strip3));
  padding-top:env(safe-area-inset-top)}
.appbar .brand{font-family:var(--mono);font-size:15px;letter-spacing:-.3px;
  color:inherit;text-decoration:none}
.appbar .brand b{color:var(--brand-accent)}
.appbar .sp{flex:1}
/*  ★ 44px — 앱바 단추도 손가락 표적이다(계획 §6). 34px 로 뒀더니 실측에서
    미달로 잡혔다. 앱바 높이(52px) 안에 44px 는 들어간다. */
.appbar button,.appbar a.btn{height:44px;min-width:44px;border:0;border-radius:99px;
  background:rgba(255,255,255,.13);color:var(--on-strip);font:inherit;font-size:12.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 11px;
  cursor:pointer;text-decoration:none}
.appbar .tokv{font-family:var(--mono);color:var(--brand-accent);font-weight:700}

/* 본문 */
/*  ★ 아래 여백은 **탭띠 + 묻는 칸** 만큼 (2026-08-12 지정).
    조황 탭의 묻는 칸이 화면 아래에 붙박이로 떠 있다. 그 높이는 글이 길어지면
    커지므로(여러 줄) 고정값으로 둘 수 없다 — 자바스크립트가 실측해 --askh 로
    적어 준다. 그래야 결과 영역이 그만큼 줄고 **겹치지 않는다.**
    ★ var(--askh, 0px) 처럼 되돌아갈 값을 함께 적는다. 토큰이 없으면 선언이
      통째로 사라진다(이 저장소에서 세 번 밟은 함정). */
main{flex:1 1 auto;padding:12px 12px calc(78px + var(--askh, 0px));min-width:0}
section[data-tab]{display:none}
section[data-tab].on{display:block}
.card{background:var(--hull);border:1px solid var(--line);border-radius:13px;
  padding:12px;margin-bottom:10px}
.card.bay{background:var(--bay);border-color:#B9D5DF}
.k{font-size:10.5px;letter-spacing:.16em;color:var(--sonar-ink);font-family:var(--mono)}
h2.t{font-size:15.5px;margin:3px 0 8px;letter-spacing:-.3px}
p.muted,.muted{color:var(--dim);font-size:12px;line-height:1.55}
.mono{font-family:var(--mono)}
.row{display:flex;align-items:center;gap:8px}
/*  ★ 줄 안의 글 덩이는 **줄어들 수 있어야 한다** (2026-08-13).
    flex 항목의 기본 min-width 는 auto 라 글자보다 작아지지 않는다. 그래서
    옆의 단추가 조금만 넓어져도 **줄이 통째로 접힌다**(갤럭시 글꼴 확대에서
    제목과 날짜가 두 줄이 됐다). 글 쪽이 먼저 자리를 내주게 한다. */
.row > div{min-width:0}
.sp{flex:1}
.ic-s{width:1.05em;height:1.05em;vertical-align:-.18em;flex:0 0 auto}

/*  ★ 「오늘 한 줄」(.oneline) 은 없앴다 (2026-08-12 지정 — 조황 탭 맨 위의
    '내일의 물때' 한 줄). 그 줄만 쓰던 규칙이라 함께 지운다. 물때는 탭띠의
    「물때」 로 그대로 간다 — 지름길이 하나 줄었을 뿐 잃은 정보는 없다. */

/* 묻는 칸 */
/*  ══ ★ 묻는 칸은 **깊은 홈**이다 (2026-08-12 지정: "질의어 박스와 답변 박스는
    음각으로 처리해서 구별해") ══════════════════════════════════════════════
    ▣ 음각은 **두 겹**이다 — 파인 홈의 위벽은 그늘, 아래벽은 빛. 빛은 위에서
      온다. 이 파일의 붙박이 띠(.composer)가 이미 같은 방식으로 파여 있다.
    ▣ ★ 상자에 거는 것이니 `box-shadow: inset` 이 맞다. 아이콘에 쓴
      `filter: drop-shadow` 와 헷갈리지 않는다 — 그건 **그림(글리프)** 에 걸어
      선 모양을 따라 그림자를 놓는 물건이고, 이건 **면**을 파는 물건이다.
    ▣ ★ 답 말풍선과 **깊이로 가른다** — 묻는 칸은 글을 담는 그릇이라 깊게
      (2px 흐림 · 그늘 .30), 답은 읽는 면이라 얕게(1px 흐림 · 그늘 .13) 판다.
      색조도 갈린다: 묻는 칸 바탕은 --abyss(가장 밝은 바닥)라 홈이 또렷하고,
      답은 --hull(카드 바탕)이라 은근하다. 손이 닿는 곳이 더 깊게 파인 셈이다.
    ▣ ★ 테두리를 박은 값(#B9D5DF)에서 var(--line) 으로 옮긴다 — 박은 값은
      어두운 테마에서 오히려 **밝은 테**가 되어 음각이 뒤집혀 보였다.
    ▣ ★ 밝은 테마는 그늘이, 어두운 테마는 --eng-light 의 밝은 줄이 홈을 보이게
      한다. 한 겹만 두면 그쪽 테마에서 아무것도 안 보인다.
      --sh·--eng-light 는 네 테마 모두 정의돼 있다(_tokens.php). 그래도 되돌아갈
      값을 함께 적는다 — var(--없는것) 하나면 선언이 통째로 사라진다. */
/*  ★ 음각을 걷어내고 **왼쪽 황색 띠**로 바꾼다 (2026-08-12 지정).
    TODAY(물빛 띠)·RANK(불빛 띠)와 **같은 방식**이고 색만 황색이다 —
    한 화면에서 '묻는 자리 · 답 · 목록' 이 띠 색으로 갈린다.
    ▣ ★ 띠는 border 가 아니라 inset box-shadow 다. border 를 주면 안쪽 너비가
      줄어 글줄이 다른 덩이와 어긋난다(TODAY 쪽에 적어 둔 이유 그대로).
    ▣ 색은 이미 쓰는 토큰(--sonar)이다. 「질의」 단추 바탕과 같은 황색이라
      묻는 자리가 한 덩이로 읽힌다.
    ▣ 「찾기」의 검색칸도 이 규칙을 함께 쓴다 — 같은 자리의 같은 것이 화면마다
      다르면 고장으로 보인다. */
/*  ★ 아래끝 맞춤 → **가운데 맞춤** (2026-08-21). 입력칸이 두 줄이 되면서
    왼쪽 단추 덩이(두 줄)와 키가 비슷해졌다 — 가운데로 맞춰야 나란하다. */
.askbox{display:flex;align-items:center;gap:8px;background:var(--abyss);
  border:1px solid var(--line);border-radius:12px;padding:8px 8px 8px 12px;
  box-shadow:inset 3px 0 0 var(--sonar)}
/*  ★ 초점이 음각에 묻히면 안 된다 (지정). 안쪽 textarea 는 outline:0 이라
    스스로 초점을 못 보인다 — 홈 **바깥**에 소나색 테를 두르고 테두리를 바꾼다.
    음각은 그대로 두되 그늘만 한 단 얕게: 글을 치는 동안에는 홈이 열린 셈이다. */
.askbox:focus-within{border-color:var(--sonar);
  box-shadow:inset 3px 0 0 var(--sonar),0 0 0 2px rgba(var(--sonar-rgb),.35)}
/*  ★ **두 줄**이 보이게 한다 (2026-08-21 지정). 16px × 1.5줄 × 2줄 + 위아래
    여백 8 = 56px. 한 줄만 보이면 긴 질문을 쓰는 동안 앞머리가 위로 밀려
    올라가 무엇을 썼는지 안 보인다.
    ▣ 「찾기」 칸(#findbar)은 한 줄 그대로다 — 그쪽은 이름 하나를 치는 자리라
      두 줄이 필요 없다. 그래서 .composer 안에서만 키운다. */
.askbox textarea{flex:1;border:0;outline:0;background:transparent;color:var(--ink);
  font:inherit;font-size:16px;line-height:1.5;resize:none;max-height:120px;padding:4px 0}
.composer .askbox textarea{min-height:56px}
/*  ★ 44px — 계획 §6 의 표적 크기. 40px 로 뒀더니 실측에서 미달로 잡혔다.
    묻는 칸의 보내기는 이 화면에서 가장 자주 누르는 단추다. */
.send{width:44px;height:44px;border-radius:12px;border:0;background:var(--sonar);
  color:#141E26;font-size:18px;font-weight:700;cursor:pointer;
  box-shadow:inset 0 -2px 0 rgba(var(--btn-sh),.35)}
.send[disabled]{opacity:.5}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
/*  ★ 예시 칩도 44px — 누르면 묻는 칸에 복사되는 단추다(계획 §6).
    8px 여백으로는 38px 남짓이라 실측에서 미달로 잡혔다. */
.chip{min-height:44px;padding:0 13px;display:inline-flex;align-items:center;
  border-radius:99px;border:1px solid var(--line);background:var(--hull);
  font:inherit;font-size:12px;color:var(--ink-soft);cursor:pointer}
.chip.on{background:var(--sonar);border-color:var(--sonar);color:var(--on-sonar);font-weight:700}

/*  ══ 묻는 칸을 **화면 맨 아래**로 (2026-08-12 지정 — 채팅형 개편) ═══════════
    ▣ 왜 아래인가 — 이 화면은 묻고 답하는 화면이다. 채팅과 같은 몸짓이라야
      배우지 않고 쓴다: 아래에서 묻고, 답은 위로 흐른다.
    ▣ ★ **탭띠 바로 위**에 올린다. 탭띠는 56px + 홈바(safe-area) 다 —
      그만큼 띄우지 않으면 조황·찾기·물때 단추를 가린다.
    ▣ ★ 조황 탭에서만 보인다(.on). 붙박이라 그냥 두면 물때·예측 탭에도 따라온다.
    ▣ 높이는 JS 가 재어 --askh 에 적는다(위 main 규칙 참고). */
/*  ══ 붙박이 띠의 바탕 — **화면 배경과 같은 색** (2026-08-12 지정) ═══════════
    ▣ 전에는 var(--hull)(카드 색)이라 띠 하나가 화면 위에 떠 있는 판처럼 보였다.
      바탕을 배경색으로 맞추면 입력 상자만 떠 있고 나머지는 화면의 일부가 된다.
      ★ 입력 상자(.askbox)는 그대로 둔다 — 바뀌는 것은 **상자 밖 여백**이다.
    ▣ ★ **불투명해야 한다.** 밑으로 결과 줄이 스크롤해 지나가므로 반투명이면
      글자가 비쳐 지나간다. var(--page2) 는 색값(그라데이션 아님)이라 불투명하다.
      body 의 배경 그라데이션은 위(page1)에서 아래(page2)로 가므로, 화면 맨
      아래에 붙는 이 띠의 색은 page2 가 맞다.
    ▣ ★ 되돌아갈 값을 함께 적는다 — var(--없는것) 하나면 선언이 통째로 사라진다.

    ══ 위·아래 **음각 선** ═══════════════════════════════════════════════════
    바탕이 위아래와 같은 색이 되었으니 경계를 선으로 만든다. 음각은 **두 겹**이다 —
    파인 홈의 위벽은 그늘(어두운 선), 아래벽은 빛(밝은 선). 빛은 위에서 온다.
      · 위 경계 : border-top(어두움) 아래에 밝은 1px  ← 결과 영역과 가른다
      · 아래 경계: 띠의 맨 아랫줄에 그늘 1px, 그 아래 밝은 줄은 **탭띠**가 갖는다
        (탭띠의 border-top 안쪽에 밝은 선을 깔았다 — .tabs 참고)
    ★ 색은 이 저장소의 음각 토큰을 쓴다 — --sh(그림자 밑색)·--eng-light(아래 빛줄).
      둘 다 _tokens.php 에 테마마다 정의돼 있고 이 파일이 이미 쓰고 있다.
      그래도 되돌아갈 값을 함께 적는다. */
.composer{position:fixed;left:0;right:0;z-index:34;display:none;
  /*  ★ 57px = 탭 단추 56 + 탭띠의 윗선 1 (실측: 56 으로 두었더니 1px 겹쳐
      탭띠의 윗선을 덮었다). 홈바(safe-area)는 탭띠가 제 아래 여백으로 갖는다. */
  bottom:calc(57px + env(safe-area-inset-bottom));
  background:var(--page2, #D5E8EF);
  border-top:1px solid var(--line);
  padding:8px 10px 9px;
  box-shadow:inset 0  1px 0 var(--eng-light, rgba(255,255,255,.6)),
             inset 0 -1px 0 rgba(var(--sh), .20)}
.composer.on{display:block}
.composer .askhint{margin:0 0 6px 3px;font-size:12px;color:var(--ink-soft)}
.composer .askhint b{color:var(--sonar-ink)}
/*  「질의」 — 글자가 들어가므로 44px 정사각을 풀고 폭만 늘린다(높이는 지킨다).
    ★ 높이는 **손대지 않는다**(44px). 두 번 줄여 봤고 두 번 다 운영자가
      "작아졌다, 되돌려라" 고 했다 — 화면에서 보면 낮은 단추는 눌리는 물건으로
      안 보인다. 옆 아이콘을 20px 로 키운 뒤에도 마찬가지였다.
      **다시 줄이지 말 것.** 줄이려면 화면을 보고 결정할 일이다. */
/*  ★ 2026-08-21 지정으로 **34px 정사각**이 됐다 — "질의 아이콘을 마이크
    아이콘과 같은 크기로". 위의 '높이는 손대지 말라' 는 그때(한 줄 짜임)의
    규칙이고, 이번에는 운영자가 화면을 보며 새 짜임과 함께 정한 값이다.
    ▣ 34 는 마이크가 쓰는 값이다(Voice.mic 의 size). 두 단추가 한 변을 공유해야
      아랫줄이 반듯하다 — 한쪽만 바꾸면 어긋난다.
    ▣ 글자 「질의」는 남긴다(11px) — 이 화면에서 가장 자주 누르는 단추라
      그림만 두면 무엇인지 배워야 한다.
    ▣ ★ 표적이 44 보다 작아진다(34). 이 저장소의 기본은 44 이지만 여기서는
      운영자가 크기를 못박았다 — 대신 단추 사이 틈(6px)으로 손끝이 옆을
      잘못 누르지 않게 벌려 두었다. */
.composer .send{width:34px;height:34px;min-width:0;padding:0;border-radius:11px;
  font-size:11px;font-weight:800;line-height:1;letter-spacing:-.5px;
  display:inline-flex;align-items:center;justify-content:center}
/*  ★ 짜임 (2026-08-21 재지정): **왼쪽 세로**에 질의 예시·지난 질문,
    **오른쪽 세로**에 마이크·질의. 가운데가 통째로 글 쓰는 자리가 된다.
    ▣ 앞서는 넷을 모두 왼쪽에 두었는데(같은 날 첫 지정), 그러면 왼쪽 덩이가
      두꺼워져 입력칸이 오른쪽으로 밀렸다. 양쪽으로 갈라 세우면 가운데가 넓다.
    ▣ 마이크는 JS 가 #sendBtn 앞에 넣으므로 .askgo 가 둘을 담고, 세로로 쌓는다. */
.composer .askicons{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;padding:0}
/*  ★ 질의 예시·지난 질문 아이콘은 **조금 작게** (2026-08-21 지정).
    이 둘은 '가끔 여는 서랍' 이고, 마이크·질의는 '늘 누르는 단추' 다 —
    자주 쓰는 쪽이 더 커야 손이 먼저 간다. 28 대 34. */
/*  ★ 두 아이콘에 **상자를 두른다** (2026-08-21 지시: "질의어 입력창 좌측에
    아이콘 2개에 박스 처리해줘").
    ▣ ★ 이 자리만 두른다 — 선택자를 `#composer` 로 좁힌 까닭이다.
      「찾기」 탭(#findbar)도 class 가 .composer 라, `.composer` 로 적으면
      그쪽 깔때기까지 함께 상자가 생긴다(실측). 그쪽은 지시 밖이라 그대로 둔다 —
      맞출지는 화면을 보고 정한다.
    ▣ 옷은 이미 화면에 있는 것을 쓴다 — 칩·묻는 칸과 같은 테(--line)·바탕
      (--hull). 새 색을 들이면 이 줄에만 낯선 상자가 생긴다.
    ▣ 모서리 9px — 오른쪽 「질의」(11px)·마이크(10px)보다 한 단 작다.
      상자가 28px 로 더 작으니 같은 값을 주면 더 둥글어 보인다.
    ▣ 그림의 음각 그늘은 그대로 둔다 — 상자 안에서도 선이 떠 보여야 한다. */
.composer .askicons button{width:28px;height:28px}
#composer .askicons button{border:1px solid var(--line);
  background:var(--hull);border-radius:9px}
.composer .askicons button svg{width:15px;height:15px}
/*  ★ 「AI 답변」 줄의 스피커·서랍 단추에 **상자를 두른다** (2026-08-24 지시:
    "m.naksigo.com 에서도 스피커 아이콘에 대하여 박스를 추가해").
    ▣ 공용 조각(_voice_css.php)은 답변 자리의 단추에서 상자를 일부러 걷어
      두었다(그림만으로 충분하다는 판단). 폰에서는 그 판단을 뒤집는다 —
      제목 옆에 그림만 떠 있으면 글씨 장식처럼 보여 눌러 볼 생각을 안 한다.
      데스크톱은 그대로 둔다(지시가 폰을 가리켰다).
    ▣ 옷은 왼쪽 질의 아이콘 상자와 **같은 것**을 쓴다 — 테 --line · 바탕
      --hull · 모서리 9px. 한 화면에 상자가 두 벌이면 서로 남처럼 보인다.
    ▣ 표적(::after 44px)·초점 테두리·켜짐 색(aria-pressed)은 손대지 않는다. */
.vcbar .vcwrap .vcbtn{border:1px solid var(--line);background:var(--hull);
  border-radius:9px}
.vcbar .vcwrap .vcbtn:hover{border-color:var(--line);background:var(--hull)}
/*  ★ **읽는 중일 때 아이콘이 통째로 사라지던 것**을 고친다 (2026-08-24 지시:
    "「답변 바로 읽기」가 선택되어 있는 경우에 아이콘이 박스의 배경색 때문인지
     전혀 안 보여").
    ▣ 까닭 — 공용 규칙은 눌린 상태를 `배경 물빛 + 흰 아이콘` 으로 그린다. 그런데
      위에서 상자를 두르며 넣은 `background:var(--hull)` 이 **같은 특이도(0,3,0)
      이면서 뒤에 와서** 배경만 이겨 버렸다. 아이콘은 규칙대로 흰색인데 바탕은
      흰색이라, 「답변 바로 읽기」로 읽기가 시작되는 순간 단추가 빈 네모가 됐다
      (실측: 배경 rgb(251,253,253) · 아이콘 rgb(255,255,255)).
    ▣ 그래서 눌린 상태를 **여기서 다시 온전히** 그린다 — 배경·테·아이콘 셋을
      한 자리에서 정한다. 상자를 두른 화면은 눌린 모양도 제가 책임진다. */
.vcbar .vcwrap .vcbtn[aria-pressed="true"]{
  background:var(--vc-accent);border-color:var(--vc-accent);color:#fff}
/*  ★ 질의 줄 **마이크의 '듣는 중'** 도 또렷하게 (2026-08-24).
    이 화면에는 `.composer button`·`.qbox button` 처럼 단추 바탕을 정하는 규칙이
    따로 있어, 공용 규칙의 눌린 모양(물빛 바탕 + 흰 아이콘)이 배경만 덮여
    **듣고 있는지 알 수 없었다**(실측: 흰 바탕에 곁말색 아이콘).
    답변 줄 단추와 **같은 모양**으로 못박는다 — 한 화면에서 켜짐이 두 가지로
    보이면 둘 다 장식으로 읽힌다. 숨쉬는 테(.vclive)는 그대로 둔다. */
.composer .vcwrap .vcbtn[aria-pressed="true"],
#composer .vcwrap .vcbtn[aria-pressed="true"],
.qbox .vcwrap .vcbtn[aria-pressed="true"]{
  background:var(--vc-accent);border-color:var(--vc-accent);color:#fff}
/*  ★ 녹음이 안 되는 기기의 마이크 — 잠긴 모양(공용 .vclock)이 상자 안에서도
    보이게. 감추지 않는다: 눌러 보면 까닭을 한 줄로 말한다. */
.vcwrap .vcbtn.vclock{opacity:.42}

/*  ★ **상자만 한 단 줄인다 — 그림은 그대로** (2026-08-24 지시: "스피커 아이콘
    및 설정 아이콘은 그대로 유지하고 박스는 조금 줄여줘").
    ▣ 공용 조각은 그림을 상자의 56% 로 그린다. 상자(34→30px)만 줄이면 그림도
      19→17px 로 함께 줄어든다 — 그래서 그림 크기를 **19px 로 못박는다**.
      줄어든 6px 는 전부 상자의 여백에서 나온다.
    ▣ 왼쪽 질의 아이콘 상자(28px·그림 15px)와 한 벌로 보이는 크기다 —
      답변 줄 쪽이 그림이 커서 상자도 두 단계 크게 남는다.
    ▣ 누르는 자리는 그대로 44px 다(::after 가 max(44px, 상자)로 깔려 있다) —
      상자를 줄여도 손가락 표적은 줄지 않는다. */
/*  ★ 변수(--vc-btn)가 아니라 **크기를 바로** 적는다 — JS 가 붙일 때
    그 변수를 낱장 style 로 박아 넣어(frame()), CSS 로 덮이지 않는다. */
.vcbar .vcwrap .vcbtn{width:30px;height:30px}
.vcbar .vcwrap .vcbtn svg{width:19px;height:19px}
.composer .askgo{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px}
/*  묻는 칸 안쪽 좌우 여백도 한 단 줄인다 — 위 아이콘과 같은 이유로,
    글을 치는 자리를 넓히려는 것이다. */
.composer .askbox{padding:7px 5px 7px 10px;gap:4px}
/*  ══ 오른쪽 끝의 아이콘들 — **그림만, 크게, 도드라지게** (2026-08-12 지정 ⑭)
    조황의 「질의 예시·지난 질문」, 찾기의 「검색 범위」가 여기 해당한다.
    ▣ 크기 — 그림 **10px**. 껍데기가 없으니 '보이는 크기' 는 곧 그림 크기다.
      (20px → 절반. 운영자가 화면을 보며 상대값으로 지시한 결과다:
       10 → 2배 20 → 다시 절반 10. 단추 상자는 내내 44×44 로 두었다)
      ★ 단추 상자 44×44 는 **누르는 자리**다 — 보이는 것은 가운데 10px 그림뿐이고
        나머지는 투명한 여백이다. 이래야 그림이 작아도 손가락이 맞힌다.
    ▣ ★ 껍데기를 없앤다 — 상자에 걸리는 box-shadow 로는 그림을 도드라지게 할 수
      없다. 그림(SVG)에 걸리는 **filter: drop-shadow() 두 겹**을 쓴다:
      위쪽에 옅은 빛, 아래쪽에 그늘. 빛은 위에서 온다(이 저장소의 규칙).
      · drop-shadow 는 **글리프의 모양**을 따라 그림자를 놓는다. 상자가 없어도
        선 하나하나가 떠 보이는 이유다.
      · 눌림(:active)은 빛과 그늘을 **뒤집고** 1px 내려앉힌다. 뒤집지 않으면
        눌린 것이 안 눌린 것처럼 보인다.
    ▣ ★ 어두운 화면에서도 보여야 한다 — 밝은 쪽은 --eng-light(테마마다 정의된
      '음각의 아래 빛줄'), 그늘은 rgba(var(--sh),…). 둘 다 _tokens.php 에 테마마다
      있고 이 파일이 이미 쓰고 있다. 되돌아갈 값을 함께 적는다.
    ▣ ★ 껍데기가 없어져도 **누르는 넓이는 44×44** 그대로다(단추 상자가 그대로다).
    ▣ ★ 초점 표시는 반드시 남긴다 — 상자가 없으면 키보드로 어디 있는지 알 길이
      사라진다. 아래 :focus-visible 이 테두리를 그린다(전역 규칙보다 구체적으로
      적어 둔다 — 배경까지 함께 줘야 바탕 없는 그림 뒤에서 눈에 든다).
    ▣ ④ 와 결이 맞는다 — **띠는 평평하고, 그 위에서 도드라진 것은 그림**이다.
    ▣ 두 탭이 같은 규칙을 쓴다(#composer · #findbar 둘 다 .askicons) — 같은 자리의
      같은 성격이라 모양이 다르면 고장으로 보인다. */
/*  ★ **좌우 여백을 줄인다** (2026-08-12 지정).
    그림이 10px 인데 상자가 44px 이라 아이콘 둘이 묻는 칸 폭을 88px 이나 먹었다.
    ▣ **가로만** 줄인다(44 → 30). 세로 44 는 그대로다 — 손가락이 닿는 자리는
      세로가 더 중요하고, 세로까지 줄이면 안 눌린다.
    ▣ 사이 틈과 왼쪽 여백도 줄인다(6 → 2 / 2 → 0).
      결과: 아이콘 두 칸이 88+14 → 60+2 로 **약 40px 이 묻는 칸에 돌아간다.**
    ▣ 그래도 세로 44 × 가로 30 이면 손끝(평균 45×35)에 들어온다 — 가로를
      이보다 더 줄이면 옆 단추를 잘못 누르기 시작한다. */
.askicons{display:flex;gap:0;flex:0 0 auto;padding-left:0}
.askicons button{position:relative;width:28px;height:44px;border:0;border-radius:10px;
  background:transparent;color:var(--ink-soft);cursor:pointer;display:grid;place-items:center}
/*  그림자 크기도 그림에 맞춰 줄인다 — 10px 글리프에 1.5px 그늘을 깔면
    그림이 흐려 보인다(그림자가 선보다 굵어진다). */
/*  ★ 그림은 **크게(20px), 자리는 좁게** (2026-08-12 지정 · 정착).
    ▣ 이 값이 하루 사이 10 → 20 → 10 → 20 으로 오갔다. 오간 이유가 뒤늦게
      드러났는데 — 답답했던 것은 **그림 크기가 아니라 좌우 여백**이었다.
      상자가 44px 이라 그림을 키우면 자리가 더 넓어 보이고, 줄이면 그림이
      안 보였다. 지금은 **상자를 30px 로 좁히고 그림은 20px 로 크게** 둔다.
      그림 24 / 상자 28 이면 양옆 여백이 2px 씩이라 꽉 찬다 — 「질의」 옆에서
      그림이 또렷이 보이면서도 자리는 예전의 3분의 2 다.
    ▣ 그늘도 그림에 맞춘다 — 20px 에 1px 그늘은 납작해 보이고, 10px 에 2px
      그늘은 흐려 보인다.
    ▣ **다시 바꾸려거든 화면을 보고 정할 것.** 숫자만 보고 고치면 또 되돌아온다.
    ▣ 「질의」 단추(50×44)는 손대지 않는다 — 두 번 줄였다 두 번 되돌렸다. */
.askicons button svg{width:24px;height:24px;
  filter:drop-shadow(0 -1px 0 var(--eng-light, rgba(255,255,255,.75)))
         drop-shadow(0  2px 2px rgba(var(--sh), .55))}
.askicons button:hover{color:var(--ink)}
.askicons button:active svg{
  filter:drop-shadow(0  1px 0 var(--eng-light, rgba(255,255,255,.75)))
         drop-shadow(0 -2px 2px rgba(var(--sh), .5));
  transform:translateY(1px)}
.askicons button:focus-visible{outline:2px solid var(--sonar);outline-offset:-2px;
  background:var(--hull-2)}
/*  ★ 「찾기」의 검색 범위(깔때기)도 20px 이다 — 이제 `.askicons` 기본이
    20px 이라 따로 덮을 필요가 없다(전에는 조황 쪽만 10px 이라 예외를 뒀다). */

/*  ══ 레이어 팝업 — 질의 예시 · 지난 질문 (2026-08-12 지정) ═════════════════
    ★ <dialog> 를 쓴다 — 초점 가두기·Esc·바깥 어둡게를 브라우저가 해 준다.
      이 저장소가 설문(_survey.php)에서 이미 같은 판단을 했다.
    ★ display 는 **[open] 일 때만** 준다. 그냥 flex 로 두면 닫힌 dialog 의
      기본값(display:none)을 덮어써서 안 보이는 빈 상자가 자리를 차지한다(실측). */
/*  ★ 층의 모양은 **클래스 하나(`dialog.pop`)로 정한다** (2026-08-13 고침).
    ▣ 전에는 규칙 넉 줄이 id 를 나열했다(#exDlg,#hsDlg,…). 그래서 #portDlg
      (항구 바꾸기)를 새로 만들며 **넣는 것을 잊었고**, 그 층만 모서리가 각지고
      폭이 232px 로 좁고 높이 제한이 없어 1,189px 까지 늘어나 「닫기」가 화면
      밖으로 밀려났다. 다른 층과 나란히 놓고 보기 전에는 "왜 이것만 이상하지"
      를 설명할 수 없었다.
    ▣ ★ 고친 뒤에도 같은 함정이 남아 있었다 — id 를 **네 곳에** 적어야 하니
      다음 사람도 또 빠뜨린다. 그래서 목록 자체를 없앴다.
      이제 `<dialog class="pop">` 만 붙이면 모양·[open]·backdrop·움직임이
      **저절로 따라온다.** 잊을 자리를 없애는 것이 잊지 말자고 적어 두는 것보다 낫다. */
/*  ★ 「찾기」의 층 둘(#scopeDlg 검색 범위 · #boatDlg 낚시배 상세)도 **같은
    규칙**을 그대로 쓴다 (2026-08-12). 한 화면에서 층이 종류마다 다르게 뜨면
    사람이 닫는 법을 매번 다시 배운다 — 닫기는 늘 위 오른쪽 ✕ 와 아래 「닫기」다. */
dialog.pop{border:0;padding:0;border-radius:14px;width:min(94vw,420px);
  max-width:min(94vw,420px);max-height:calc(82vh / var(--fs,1));overflow:hidden;
  background:var(--hull);color:var(--ink);
  box-shadow:0 18px 60px rgba(var(--sh),.38)}
dialog.pop[open]{display:flex;flex-direction:column}
dialog.pop::backdrop{background:rgba(6,18,26,.55)}
/*  ★ 좌우 여백을 넓힌다 13 → **18px** (2026-08-13 지정: "모든 팝업창은 박스의
    좌우 여백을 추가해").
    ▣ 왜 — 층 안의 줄(.poplist button)이 제 테두리를 갖고 있어서, 여백이 좁으면
      **줄의 테두리가 층의 테두리에 거의 붙는다.** 상자 안에 상자가 꽉 낀 모양이라
      숨 쉴 자리가 없어 보인다. 층은 화면 위에 뜬 종이라, 가장자리에 여백이
      있어야 떠 있는 것으로 읽힌다.
    ▣ ★ `.pop-in` 하나만 고치면 **여섯 층이 모두** 따라온다(질의 예시·지난 질문·
      검색 범위·낚시배 상세·항구 바꾸기·달력). 층마다 여백을 적어 두었으면
      여기서도 하나씩 고쳐야 했을 것이다. */
.pop-in{position:relative;display:flex;flex-direction:column;min-height:0;flex:1 1 auto;
  overflow:hidden;padding:14px 18px 12px}
.pop-in > h2{margin:0 0 4px;font-size:16px;letter-spacing:-.3px;padding-right:40px}
.pop-in > .muted{margin:0 0 9px}
/*  긴 목록만 그 안에서 구른다 — 창은 자리를 지키고 ✕ 와 「닫기」는 늘 보인다. */
/*  ★ 층 안의 찾는 칸 (2026-08-13 — 항구 바꾸기). 층에는 입력칸이 처음이라
    규칙이 없었다. 화면의 다른 입력칸과 같은 결로 두되, 목록이 자리를
    다 갖도록 자신은 **늘어나지 않는다**(flex:0 0 auto). */
#portQ{flex:0 0 auto;width:100%;box-sizing:border-box;margin:0 0 8px;
  min-height:44px;padding:0 12px;border:1px solid var(--bay-line);border-radius:10px;
  background:var(--abyss);color:var(--ink);font:inherit;font-size:14px}
#portQ:focus-visible{outline:2px solid var(--sonar);outline-offset:-1px}
#portNow{margin:0 0 8px}
/*  ★ 처음에 **일곱 줄**만 보이고 나머지는 구른다 (2026-08-13 지정).
    ▣ 왜 일곱인가 — 층이 화면을 다 덮으면 뒤에 있던 물때가 안 보여 '무엇을
      바꾸는 중인지' 를 잃는다. 일곱 줄이면 층 아래로 물때 카드가 남는다.
    ▣ 줄 하나 = 43px + 사이 6px. 일곱 줄이면 343px 다.
    ★ 층 전체의 최대 높이(82vh)는 그대로 둔다 — 작은 화면에서는 그쪽이 먼저
      걸려야 한다. 둘 중 **작은 쪽**이 이긴다. */
#portList{max-height:343px}
.poplist{overflow:auto;-webkit-overflow-scrolling:touch;min-height:0;flex:1 1 auto}
.poplist button{display:block;width:100%;text-align:left;padding:11px 11px;min-height:44px;
  border:1px solid var(--line);border-radius:10px;background:var(--hull-2);
  color:var(--ink);font:inherit;font-size:13px;line-height:1.5;cursor:pointer;
  margin-bottom:6px;word-break:break-word}
.poplist button:hover{border-color:var(--sonar)}
/*  ★ 닫기가 **두 곳**이다 — 맨 위 오른쪽 모서리(✕)와 아래 가운데(「닫기」).
    ✕ 는 이 저장소의 규칙 자리이고, 아래 단추는 목록을 다 훑고 내려온 손의 자리다. */
.popfoot{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding-top:10px;border-top:1px solid var(--line)}
.popclose{min-height:44px;padding:0 26px;border-radius:11px;border:1px solid var(--line);
  background:var(--hull-2);color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;
  cursor:pointer}
.popclose:hover{border-color:var(--sonar)}
.popx{position:absolute;top:6px;right:6px;width:38px;height:38px;border:0;border-radius:10px;
  background:none;color:var(--dim);font-size:16px;line-height:1;cursor:pointer;z-index:2}
.popx:hover{background:rgba(var(--sh),.08);color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  dialog.pop[open]{animation:pop .16s ease-out}
}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1}}

/* 목록 */
.li{display:block;width:100%;text-align:left;padding:10px 0;border:0;border-top:1px solid var(--line);
  background:none;font:inherit;color:var(--ink);cursor:pointer}
.li:first-of-type{border-top:0}
.li .h{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.li .m{margin-top:3px;font-size:11px;color:var(--dim);display:flex;gap:5px;flex-wrap:wrap}
.li .m time{font-family:var(--mono)}
/*  ★ 조황 사진 썸네일 — 그 줄의 **아래 오른쪽 끝** (2026-08-10 지정).
    ▣ 왜 절대배치인가 — 흐름에 두면 글이 짧은 줄과 긴 줄에서 그림이 위아래로
      들쭉날쭉해진다. 줄의 오른쪽 아래에 못박아야 눈이 한 줄로 훑는다.
    ▣ 그림이 들어갈 자리만큼 글에 오른쪽 여백을 준다(padding-right) —
      안 그러면 제목이 그림 밑으로 파고든다.
    ▣ ★ 없는 그림은 **그 자리를 없앤다**(onerror 로 감춤). 깨진 아이콘이
      남으면 '사진이 있었는데 못 불러왔다' 로 읽힌다 — 대개는 애초에 없다. */
.li.haspic{padding-right:70px}
.li .th{position:absolute;right:0;bottom:9px;width:62px;height:46px;object-fit:cover;
  border-radius:7px;border:1px solid var(--line);background:var(--hull-2);display:block}
/*  ★ 사진이 없는 줄의 **점선 빈 자리** (2026-09-02 지시: "TODAY 내역에서 우측에
    썸네일이 없는 경우 점선 박스로 표시").
    ▣ 모양은 이 저장소가 오늘 정한 「빈 자리」와 같다 — **배경 없음 · 점선
      테두리 · 그림자 없음**(naksigo /today 의 빈 그래프, fishtoday·fishlog 의
      썸네일 빈 칸과 한 벌). 크기(62×46)·모서리(7px)는 위 .th 를 그대로 쓴다 —
      한 화면에서 같은 자리가 두 크기로 보이면 안 된다.
    ▣ 글자는 넣지 않는다(지시: "점선 박스로 표시") — 「사진 없음」 같은 말을
      적으면 없는 것이 있는 것보다 눈에 띈다. */
.li .th.nothumb{background:none;border:1px dashed var(--line);box-shadow:none}
.li{position:relative}
/*  ★ 누를 수 있는 썸네일 — 손가락에 답이 있어야 한다 (2026-08-12 지정).
    줄 전체(상세)와 다른 일을 하므로 눌리는 것임이 보여야 한다. */
.li .th[data-photo]{cursor:zoom-in}
.li .th[data-photo]:active{opacity:.85}
.li .th[data-photo]:focus-visible{outline:2px solid var(--sonar);outline-offset:2px}
/*  설문 평가 별 — 이름 옆. 평가가 없으면 이 조각 자체가 안 그려진다. */
.stars{margin-left:6px;font-size:11px;color:var(--lamp);white-space:nowrap;font-weight:700}
.stars .cnt{color:var(--dim);font-weight:400;margin-left:2px}
.more{display:block;width:100%;margin-top:9px;padding:11px;border:1px dashed var(--line);
  border-radius:9px;background:transparent;text-align:center;font:inherit;font-size:12px;
  color:var(--dim);cursor:pointer;min-height:44px}
/*  ★ 「조과 예측 — N일치 보기」(N은 설정값)만 **파랑으로 채운다** (2026-08-13 지정).
    ▣ .more 는 원래 '더 보기' 처럼 **있어도 그만인 것**을 뜻하는 점선 단추다.
      예측은 그런 곁가지가 아니라 이 화면이 권하는 다음 걸음이라, 같은 모양에
      두면 눈에 걸리지 않는다. 손잡이(data-fcboat)가 붙은 것만 골라 채운다.
    ★ 색은 순위 줄의 「예측」 알약과 **같은 --fc** 다 — 같은 곳으로 가는 문이다. */
.more[data-fcboat]{border:1px solid transparent;background:var(--fc);
  color:var(--on-fc);font-weight:700;font-size:12.5px;
  box-shadow:inset 0 -2px 0 rgba(8,50,90,.34), 0 1px 2px rgba(var(--sh),.18)}
.more[data-fcboat]:hover{filter:brightness(1.08)}
/*  ★ 「조과 분석 — 최근 15일」 (2026-09-05 지시로 배 낱장에) — 바로 아래
    「조과 예측」과 **같은 기하**로 서되 색이 다르다. 예측은 채운 파랑,
    분석은 **테두리만 있는 조용한 단추**다. 이 저장소가 네 사이트에서 지켜 온
    규율 그대로다 — 분석은 이미 들어온 15일치를 읽으러 가는 것이고, 예측은
    이 화면이 권하는 다음 걸음이라 한 단 앞에 선다.
    ★ 누르는 넓이는 `.more` 가 이미 44px 로 잡아 둔다(min-height).
    ★ 그림 크기는 손잡이 **한 벌 값**(--btbtn-ico)이다 — 안 재면 브라우저
      기본(100%)으로 부풀어 줄을 무너뜨린다. 글자 옆에 나란히 서게 가운데
      정렬로 편다(.more 는 원래 text-align 만으로 가운데를 잡는다). */
/*  선사 칸 단추(coPortBtns·coOneBtns) — 이름 옆에 붙는 작은 한 줄 */
.cobtns{display:inline-flex!important;flex-wrap:wrap;gap:4px 5px;margin:2px 6px 2px 4px!important;vertical-align:middle}
.cobtns .ptbtn{padding:3px 8px;min-height:26px;font-size:12px;border-radius:7px}
.more[data-boattrend]{display:flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);background:var(--hull);
  color:var(--ink);font-weight:700;font-size:12.5px}
.more[data-boattrend]:hover{background:var(--hull-2)}
.more[data-boattrend] .rfcico{
  width:var(--btbtn-ico,11px);height:var(--btbtn-ico,11px);flex:0 0 auto}
.more[disabled]{opacity:.6}

/* 답변 */
/*  ══ ★ 답 말풍선은 **얕은 홈**이다 (2026-08-12 지정 — 묻는 칸의 주석 참고) ══
    ▣ 같은 음각 계열이되 묻는 칸보다 **얕다**(1px 흐림 · 그늘 .13). 왜 얕은가 —
      이 칸은 글을 **읽는** 면이다. 깊게 파면 위쪽 두어 줄에 그늘이 얹혀
      본말전도가 된다. 손이 닿는 곳(묻는 칸)이 더 깊다는 규칙이기도 하다.
    ▣ ★ **어두운 테마에서는 그늘만으로 못 가른다** (실측으로 알았다). 어두운
      바탕은 이미 검정에 가까워 그늘을 두 배로 넣어도 더 어두워지지 않는다
      (황혼: 묻는 칸 그늘 −3.7 · 답 −3.4 — 거의 같았다). 그래서 **아래 빛줄의
      세기**로도 가른다: 묻는 칸은 --eng-light 를 그대로(짙게), 답은 --hl 을
      .16 으로 옅게. 실측(황혼)으로 빛줄이 면보다 묻는 칸 +52.6 · 답 +26.6 —
      그늘 깊이의 비(밝은 테마 47 : 20)와 **같은 2배**로 맞췄다.
      밝은 테마에서는 그늘 깊이가, 어두운 테마에서는 빛줄 세기가 둘을 가른다 —
      어느 쪽 테마에서도 한 축은 살아 있다.
      ★ --hl 은 '솟은 면·음각 홈이 받는 빛'의 밑색(r,g,b)이고 네 테마 모두
        정의돼 있다. 그래도 되돌아갈 값을 함께 적는다.
    ▣ ★ 그래서 한 화면의 셋이 이렇게 갈린다:
        · 묻는 칸  — 깊은 홈 + 짙은 빛줄 + 주황 「질의」 단추 (손이 닿는 자리)
        · 답      — 얕은 홈 + 옅은 빛줄, 머리띠 없음         (읽는 자리)
        · 목록    — 얕은 홈 + 옅은 빛줄 + **색 머리띠**       (TODAY 물빛 · RANK 불빛)
      목록은 답과 **같은 그릇**이라야 한다는 앞의 판단(②)을 지킨다 — 가르는
      것은 여전히 머리띠 색이고, 음각은 셋 모두를 바탕에서 떼어 놓는 몫이다. */
.bubble{border-radius:13px;padding:11px 12px;margin-bottom:9px;font-size:13.5px;line-height:1.7}
/*  ★ 답변 상자도 음각을 걷고 **왼쪽 황색 띠**로 (2026-08-12 지정).
    묻는 칸과 같은 황색이다 — 물음과 답이 한 짝으로 읽힌다.
    TODAY(물빛)·RANK(불빛)는 아래에서 제 색으로 덮어쓴다. */
.bubble.ai{background:var(--hull);border:1px solid var(--line);border-bottom-left-radius:4px;
  box-shadow:inset 3px 0 0 var(--sonar)}
.stage{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);margin:0 0 8px 2px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--sonar);animation:bl 1.1s infinite}
@keyframes bl{50%{opacity:.25}}
/*  ★ 기다리는 중임을 알리는 고리 (2026-08-21 지정). 답이 오기까지 몇 초
    걸리는데 글자만 있으면 멈춘 것으로 읽힌다. */
.spin{width:12px;height:12px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(var(--sonar-rgb),.28);border-top-color:var(--sonar);
  animation:vspin .8s linear infinite}
@keyframes vspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dot,.spin{animation:none}}
.ent{border:0;background:none;font:inherit;color:inherit;padding:0 0 1px;cursor:pointer;
  border-bottom:2px solid rgba(var(--sonar-rgb),.55)}
.rank{display:flex;align-items:baseline;gap:8px;width:100%;padding:9px 0;border:0;
  border-top:1px solid var(--line);background:none;font:inherit;color:var(--ink);
  cursor:pointer;text-align:left}
.rank .no{font-family:var(--mono);font-weight:700;color:var(--sonar-ink);font-size:12px}
.rank{align-items:center}
/*  ★ 글 칸은 **남는 폭을 다 쓴다**(flex:1) (2026-08-14 실측 수정).
    앞서는 폭이 내용만큼이라, 첫 줄의 margin-left:auto 가 밀어 봐야 **글 칸
    끝**까지였다 — 줄마다 좋아요가 오른쪽에서 1px·19px·21px 로 들쭉날쭉했다. */
.rank .who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
/*  ★ 둘째·셋째 줄과 사진은 **한 가로줄**이다 (2026-08-14 지정: "썸네일은 첫
    줄을 제외하고 나머지 줄을 합쳐서 우측에 배치").
    ▣ 앞서는 사진을 줄에 절대배치하고 2·3줄에 오른쪽 여백 70px 을 주는
      꼼수였다 — 글자 크기(zoom)를 키우면 여백과 사진이 어긋났다.
    ▣ 이제 진짜 두 칸이다: 왼쪽에 2·3줄, 오른쪽에 사진. 첫 줄은 위에서
      폭을 다 쓰므로 좋아요·관심선박이 사진 위 오른쪽 끝까지 나간다. */
.rank .rbody{display:flex;align-items:flex-start;gap:8px;min-width:0}
.rank .rlines{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
/*  ★ 순위 줄을 **층으로 나눈다** (2026-08-14 지정: "RANK 에 표시되는 UI를 다시
    점검해서 재배치. 삼성 갤럭시 UI 기준").
    ▣ 무엇이 잘못이었나 — 한 층에 일곱이 폭을 다퉜다(번호·이름·자리·어종·예측·
      별·건수, 게다가 오른쪽 70px 은 사진 몫이다). 360px 에서 남는 폭이
      240px 뿐이라 **「8건」이 「8」/「건」 두 줄로 쪼개졌다**(실측).
    ▣ 이제 왼쪽 한 칸에 **네 층**으로 쌓는다 —
      ① 이름 + 별  ② 자리  ③ 어종  ④ 예측·건수.
      가로로 다투던 것이 세로로 서니 폭이 모자랄 일이 없다.
    ▣ ★ 별을 이름 옆에 둔 것은 「나」의 관심선박·「예측」의 제원 줄과 **같은
      자리**다. 같은 뜻(그 배의 등급)이 화면마다 다른 데 있으면 매번 찾아야 한다.
    ▣ ★ 이름만 말줄임한다(.nmt) — 별은 잘리면 안 되는 값이라 제 폭을 지킨다. */
.rank{cursor:pointer}
.rank:focus-visible{outline:2px solid var(--sonar);outline-offset:2px;border-radius:8px}
.rank .nm{font-size:13px;font-weight:600;display:flex;align-items:center;gap:4px;
  min-width:0}
/*  ★ 첫 층은 **왼쪽 묶음 + 오른쪽 묶음** 둘이다 (2026-08-14 다시 배치).
    지시: "낚시배·조과예측·조황지수는 **좌측 정렬**(좌측부터 붙여서),
    좋아요·관심선박은 **우측 정렬**."
    ▣ 왼쪽 셋은 **그 배를 말하는 것**이다 — 이름, 예측으로 가는 문, 조황지수.
      붙여 두면 눈이 한 번에 읽는다.
    ▣ 오른쪽 둘은 **내가 하는 일**이다 — 좋아요·담기. 성격이 다르니 멀리 둔다.
    ★ 이름이 길면 이름만 줄고(.nmt 말줄임) 나머지는 줄지 않는다 — 지수와
      숫자는 줄일 수 없는 값이다. */
.rank .rkright{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto}
/*  ★ 이름은 **끝까지 줄지 않는다** (2026-08-14 실측 수정).
    첫 층에 다섯이 들어가면서(이름·예측·지수·좋아요·관심선박) 360px 에서
    이름이 「범..」 두 글자로 뭉개졌다. 이 줄에서 **가장 중요한 값이 이름**인데
    그것이 먼저 사라지면 순위표가 아니다.
    ▣ 최소 폭을 준다 — 여덟 자쯤(96px)은 지키고, 그보다 길면 그때 말줄임.
    ▣ 예측 단추의 말도 「조과 예측」 → 「예측」 으로 줄였다(26px 절약).
      눌러 열리는 곳의 제목이 '조과 예측' 이라 뜻은 이어진다. */
.rank .nmt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:0 1 auto;min-width:0}
/*  ★ 최소 폭(96px)을 **뺐다** (2026-08-14 다시 지정: "낚시배·조과예측·조황지수는
    한 개의 컬럼으로 통합해서 좌측부터 붙여서 정렬").
    ▣ 최소 폭이 있으면 이름이 짧은 배(단비호)도 이름 칸이 96px 로 벌어져,
      예측·지수가 **늘 같은 x** 에 섰다 — 눈에는 세 개의 딴 컬럼이다.
    ▣ 이제 이름은 제 글자만큼만 차지하고 예측·지수가 바로 뒤에 붙는다.
      셋이 한 덩이로 왼쪽에 서고, 이름이 길 때만 이름이 줄어든다(말줄임). */
.rank .nm .pips{flex:0 0 auto}
/*  ★ 셋째 층 — 출조 수·어종·물때·수온·바람 (2026-08-14 지정).
    ▣ '그래서 어땠나' 를 한 줄에 모은다. 어종은 이 줄 안에서 물빛으로 남겨
      (아래 .spc 규칙은 그대로 쓴다) 나머지 잿빛과 갈린다.
    ▣ ★ 예보가 아니라 **지난 출조의 조건**이다 — 날짜를 title 로 밝힌다.
      이 줄을 '오늘 물때' 로 읽으면 배를 잘못 고른다. */
.rank .cond{font-size:11px;color:var(--dim);line-height:1.45;
  word-break:keep-all}
/*  ★ 이 줄만 **접히게 둔다** (2026-08-14 실측).
    다섯 값(출조·어종·물때·수온·바람)은 360px 에서 사진 자리(70px)를 빼면
    240px 안에 못 들어간다 — 한 줄로 못박으면 「수온 2…」 처럼 **잘려서
    아예 못 읽는다.** 잘린 값보다 접힌 값이 낫다.
    ▣ `keep-all` — 접히더라도 **낱말 가운데서** 쪼개지지 않는다(한글은 아무
      자리에서나 줄이 바뀐다). '수온 25.6℃' 가 '수' / '온…' 이 되면 안 된다. */
/*  자리 — 이름보다 한 단 물러난다. 이름을 찾는 눈이 먼저 이름에 닿아야 한다. */
.rank .loc{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/*  ★ 자리 중 **항구만** 눌러 열린다 (2026-08-12 지정).
    ▣ 줄 전체도 눌리므로(배 상세) 눈으로 갈려야 한다 — 잿빛 자리 안에서
      항구만 물빛 + 점선 밑줄이다. 점선이라 줄 높이가 밀리지 않는다.
    ▣ 손가락 자리를 위아래로 조금 넓힌다. 여백만큼 음수 여백을 줘서
      11px 한 줄의 높이는 그대로 둔다 — 순위 줄 높이가 흔들리면 안 된다. */
/*  ★ 순위 안에만 두었던 모양을 **화면 전체**로 꺼냈다 (2026-08-12 지정 —
    "TODAY 리스트에도 RANK 처럼 링크"). 같은 뜻의 손잡이가 자리마다 다르게
    생기면 무엇이 눌리는지 매번 다시 배워야 한다. */
.plink{color:var(--sonar-ink);cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;
  padding:4px 2px;margin:-4px -2px}
.plink:active{color:var(--sonar)}
.plink:focus-visible{outline:2px solid var(--sonar);outline-offset:1px;border-radius:3px}
/* 찾기 첫 화면의 지역별 조황분석 줄(2026-10-08, dev.naksigo.com) — 줄 전체는 눌리지 않고 안쪽 어종·항구만 눌린다 */
.saline{cursor:pointer}
.saline:focus-visible{outline:2px solid var(--sonar);outline-offset:2px;border-radius:6px}
/* 조황분석 지역 상세 칸(2026-10-08) — 넓은 표는 그 표만 가로로 구른다(CLAUDE.md §4) */
.rgm h2.t{margin:4px 0 2px}
.rgm h3{margin:16px 0 2px;font-size:14px}
.rgm .rgsum{margin:8px 0 4px;font-size:13px;line-height:1.6}
.rgm .rgsea{margin:4px 0;font-size:12px;color:var(--dim,#6B7F86);line-height:1.6}
.rgm .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px;max-width:100%}
.rgm table{border-collapse:collapse;font-size:12px;min-width:640px}
.rgm th,.rgm td{padding:6px 8px;border-bottom:1px solid var(--line,#D2E0E3);text-align:left;white-space:nowrap;vertical-align:middle}
.rgm th{font-weight:600;color:var(--dim,#6B7F86);background:var(--card,#fff)}
.rgm .up{color:#C0392B}
.rgm .rgbar rect{fill:var(--sonar,#2E7D91)}
.saline .satx{display:block;margin-top:4px;font-size:12.5px;line-height:1.55;color:var(--ink,#12303A);white-space:normal}
.saline .sal{display:block;margin-top:4px;font-size:12px;line-height:1.7;color:var(--dim,#6B7F86);white-space:normal}
.saline .sal .up{color:#C0392B}
/* 조황분석 지역 기록 아이콘·칸(2026-10-09 지시, m.naksigo.com) — 누를 칸 32×28, 그림 15px */
.saline .rghbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:28px;margin:-6px 0 -6px 2px;
  vertical-align:middle;border:0;border-radius:6px;background:none;color:var(--sonar-ink,var(--sonar));cursor:pointer}
.saline .rghbtn svg{width:15px;height:15px;display:block}
.saline .rghbtn:focus-visible{outline:2px solid var(--sonar);outline-offset:1px}
.rgh{padding:4px 2px 16px}
.rgh .rghlist{list-style:none;margin:0;padding:0}
.rgh .rghlist > li{padding:10px 0 12px;border-bottom:1px solid var(--line)}
.rgh .rghlist > li:last-child{border-bottom:0}
.rgh .rghd{margin:0 0 5px;font-size:13px;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
.rgh .rghd time{font-family:var(--mono,monospace);font-size:12px;color:var(--dim)}
.rgh .rghd .m{font-size:12px;color:var(--dim)}
.rgh .rghtx{margin:0;font-size:14px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.rgh .saent{border:0;background:none;padding:2px 0;font:inherit;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:2px}
.rgh .rghmore{display:block;width:100%;margin-top:8px}
.saline .saent,.rgm .saent{border:0;background:none;padding:2px 0;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
/*  ★ 그 조황에 나온 어종 — 자리 **아래 한 줄** (2026-08-12 지정 22).
    자리와 나란히 두면 폭이 모자라 어종이 통째로 잘린다(실측). 색을 달리해
    자리(잿빛)와 어종(물빛)이 눈에 갈리게 한다. */
.rank .spc{font-size:11px;color:var(--sonar-ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/*  순위 줄의 사진 — 근거와 **같은 자리·같은 크기**(줄의 아래 오른쪽 끝).
    한 화면에서 같은 것이 같게 보여야 사람이 다시 배우지 않는다. */
.rank{position:relative}
/*  ★ 사진은 **첫 줄을 비켜** 둘째·셋째 줄 오른쪽에 선다 (2026-08-14 지정:
    "썸네일은 첫 줄을 제외하고 나머지 줄을 합쳐서 우측에 배치").
    ▣ 앞서는 줄 전체에 오른쪽 여백(70px)을 줘서 **첫 줄까지 좁아졌다** —
      거기에 좋아요·관심선박이 서니 이름 자리가 그만큼 더 줄었다.
    ▣ 이제 여백은 **둘째·셋째 줄에만** 준다. 첫 줄은 폭을 다 쓰고, 오른쪽 끝까지
      좋아요·관심선박이 나간다. 사진은 그 아래 두 줄과 나란히 선다. */
.rank.haspic{min-height:52px}
.rank .th{flex:0 0 auto;width:62px;height:46px;object-fit:cover;
  border-radius:7px;border:1px solid var(--line);background:var(--hull-2);display:block}
.pips{letter-spacing:1px;color:var(--sonar)}
/*  ★ 이용자 평가 별 — 빈 별 다섯 위에 **채운 별을 폭으로 잘라** 겹친다
    (2026-08-14). 개수로 찍으면 3.5 와 3.0 이 같은 그림이 된다(실측).
    ★ 두 겹의 글자가 **정확히 겹쳐야** 한다 — 같은 글자·같은 자간이라 겹친다.
      letter-spacing 을 여기서 주면 두 겹이 어긋나므로 주지 않는다. */
.sbar{position:relative;display:inline-block;white-space:nowrap;
  color:var(--line);letter-spacing:0}
.sbar .on{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;
  color:var(--sonar)}
/*  ══ 조황지수 아이콘 — **다섯 칸 게이지** (2026-08-14 지정) ═══════════════════
    지시: "조황지수의 아이콘을 사용하도록 해. m.naksigo.com 에서 사용하는 모든
    조황지수 아이콘을 대체해 줘."
    ▣ 데스크톱(naksigo.com 「낚시배 순위」)이 쓰는 것과 **같은 그림**이다.
      폰만 별(★)을 쓰고 있어서, 같은 값이 두 화면에서 다르게 보였다.
    ▣ ★ 왜 글자(★)가 아니라 그린 칸인가 — 데스크톱에서 이미 겪은 것이다:
      · 글자는 **높이를 글꼴이 정해** 옆 숫자와 키가 안 맞는다.
      · 별 다섯은 좁은 폭에서 **줄바꿈으로 쪼개진다**(nowrap+flex 로 막는다).
      · 색맹·흑백 인쇄에서 채움을 구별 못 한다 → **채운 칸은 솟고, 빈 칸은
        파인다.** 색이 아니라 **입체 방향**이 채움을 말한다.
    ▣ ★ 등급이 아예 없으면 다섯 칸 다 비우되 한 단 더 옅게(.none) — '나쁘다'가
      아니라 **'매길 근거가 없다'** 는 뜻이라 있는 등급의 빈 칸과 같으면 안 된다.
    ▣ 폰은 데스크톱보다 한 치수 작게 잡는다(11×13 → 9×11) — 줄 높이가 13px 대다. */
.gauge{display:inline-flex;gap:2px;vertical-align:-1px;
  letter-spacing:0;white-space:nowrap;flex:0 0 auto}
.gauge i{flex:0 0 auto;width:9px;height:11px;border-radius:2px;
  font-size:0;line-height:0;
  background:rgba(var(--sh),.07);
  box-shadow:inset 0 1.5px 2px rgba(var(--sh),.30),
             inset 0 -1px 0 rgba(var(--hl),.55),
             0 1px 0 var(--eng-light)}
.gauge i.on{background:linear-gradient(180deg,
    color-mix(in srgb, var(--sonar) 72%, #fff) 0%,
    var(--sonar) 46%,
    color-mix(in srgb, var(--sonar-ink) 82%, #000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.60),
             inset 0 -1px 0 rgba(var(--sh),.30),
             0 1px 1.5px rgba(var(--sh),.38)}
/*  ★ 등급이 **없을 때** — 점선 빈 칸 다섯 (2026-09-04, 다섯 사이트 한 벌).
    ▣ 앞서는 **옅게만**(opacity:.5) 했다. 그러면 파인 홈(음각)이 그대로 남아
      ★0(재어 보니 최악)과 같은 그림이 되고, 흑백으로 찍으면 아예 안 갈린다.
      「없음」은 잰 값이 아니라 **아직 못 잰 자리**라, 확정된 결은
      `background:none · 1px dashed · box-shadow:none · opacity:.85` 다
      (docs/onfishing_chart_spec.md 「지수가 없을 때」 · naksigo `/today`
       `.grade.none i` · m.onfishing `.gidx.none i` 와 같은 선언).
    ▣ 폭·키(9×11)는 그대로다 — `*{box-sizing:border-box}` 라 테두리를 둘러도
      칸이 커지지 않는다(값 있는 칸과 같은 자리에 선다). */
.gauge.none i{background:none;border:1px dashed var(--line);
  box-shadow:none;opacity:.85}
details.fold{border:1px solid var(--line);border-radius:10px;background:var(--hull);
  margin-bottom:8px;overflow:hidden}
details.fold>summary{list-style:none;display:flex;align-items:center;gap:7px;padding:11px;
  font-size:12.5px;color:var(--ink-soft);cursor:pointer;min-height:44px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary .cnt{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
details.fold .in{padding:0 11px 11px}
/*  ★ 펼친 근거 칸의 **아래 닫기** (2026-08-12 지정) — 근거를 다 읽고 내려온
    손이 다시 위로 올라가지 않아도 접을 수 있어야 한다. 접히면 스크롤이
    펼치기 전 자리로 되돌아간다(JS 의 openFold/closeFold 참고). */
details.fold.srcfold .foldclose{margin-top:10px}
/*  ★ 「나」 의 접는 칸 — 카드 안에 들어앉으므로 테두리를 한 겹 덜어 낸다.
    카드에 이미 테두리가 있어 두 겹이면 상자 안의 상자로 보인다. */
details.fold.mefold{margin:6px 0 0;background:transparent;border-color:var(--line)}
details.fold.mefold>summary{padding:10px 11px;color:var(--sonar-ink);font-weight:700}
/*  ★ 펼침·닫힘 표시를 **세 배로** 키운다 (2026-08-13 지정: "펼침, 닫힘의 ▼
    아이콘 3배 크게"). 12.5px 글자에 딸려 가던 것이 1em → **3em** 이다.
    ▣ 왜 줄높이를 눌러 두나 — 글자를 세 배로 키우면 그 줄 전체가 세 배로
      벌어져 접힌 칸이 손가락 두 개만큼 두꺼워진다. `line-height:0`(글자
      상자를 없앤다) + `translateY` 로 **자리는 그대로 두고 그림만** 키운다.
    ▣ ★ 색을 --dim 에서 --ink-soft 로 올린다. 커지면 흐린 색이 더 흐려 보인다
      (같은 회색도 면적이 넓으면 배경에 가까워진다).
    ▣ 손이 닿는 자리(min-height:44px)는 건드리지 않았다 — 그림만 커졌지
      누르는 자리가 커진 것이 아니다. 누르는 자리는 원래 줄 전체다. */
details.fold.mefold>summary::after{content:'▾';margin-left:6px;color:var(--ink-soft);
  font-weight:400;font-size:3em;line-height:0;transform:translateY(-.06em)}
details.fold.mefold[open]>summary::after{content:'▴';transform:translateY(.06em)}
/*  ★ 같은 지시(3배)를 **다른 자리의 ▾ 에도** 준다 (2026-08-13).
    처음에는 「나」의 접는 칸만 키웠는데, 같은 뜻의 표시가 세 군데 더 있었다:
    근거 글 접기 · 상세의 접는 칸 · 물때 날짜 고르기.
    ▣ ★ 한 화면 안에서 같은 뜻의 표시가 크기가 다르면 그것대로 어긋나 보인다 —
      "왜 여기만 작지" 가 된다. 지시의 뜻은 '펼침·닫힘 표시를 키워라' 다.
    ▣ 방식은 위와 같다 — `line-height:0` 으로 글자 상자를 없애고 키운다.
      줄 높이를 그대로 두어야 접힌 칸이 두꺼워지지 않는다.
    ▣ ★ 열리면 **뒤집는다**(rotate) — 글자를 '▴' 로 바꾸면 폭이 미세하게 달라
      옆 글자가 흔들린다. 돌리면 자리가 그대로다. */
.tri{display:inline-block;font-size:3em;line-height:0;vertical-align:-.02em;
  margin-left:2px;transition:transform .12s}
details[open] > summary .tri{transform:rotate(180deg)}
details.fold.mefold .in{padding:0 11px 11px}

/* 시트 */
#sheet{position:fixed;inset:0;z-index:40;display:none}
#sheet.on{display:block}
#sheet .dim{position:absolute;inset:0;background:rgba(10,29,37,.4)}
/*  ★ 시트는 **화면의 절반 이상**을 차지한다 (2026-08-10 지정).
    내용이 짧다고 손바닥만 하게 뜨면 '뭔가 덜 나온 화면' 으로 읽힌다 —
    상세는 이 화면에서 가장 오래 읽는 곳이라 자리를 먼저 잡아 준다. */
/*  ★ **> .in** 이어야 한다 (2026-08-10 실측). `#sheet .in` 으로 두었더니
    접이(details)의 속칸도 같은 이름이라 **절대배치 흰 판**이 되어 상세를
    통째로 덮었다 — 화면에는 제원만 뜨고 선사·항구·전화가 사라져 보였다.
    DOM 에는 멀쩡히 있어서 텍스트만 보면 아무 이상이 없다. */
#sheet > .in{position:absolute;left:0;right:0;bottom:0;min-height:calc(58svh / var(--fs,1));max-height:88%;overflow:auto;
  -webkit-overflow-scrolling:touch;background:var(--hull);border-radius:18px 18px 0 0;
  border:1px solid var(--line);border-bottom:0;padding:8px 13px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px rgba(var(--sh),.22)}
/*  잡는 띠 — 손가락이 닿는 높이(28px)를 준다. 막대는 그 안의 표식일 뿐이다. */
.sheetgrip{position:relative;height:28px;display:flex;align-items:center;justify-content:center;
  margin:-2px -13px 4px;touch-action:none;cursor:grab}
.sheetgrip:active{cursor:grabbing}
.grab{width:38px;height:4px;border-radius:99px;background:#C3D6DC;display:block}
.sheetx{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;border-radius:50%;background:var(--hull-2);
  color:var(--ink-soft);font-size:14px;line-height:1;cursor:pointer;
  display:grid;place-items:center}
.sheetx:hover{color:var(--ink)}
.sheetx:focus-visible{outline:2px solid var(--sonar);outline-offset:2px}
/*  끄는 동안에는 손가락을 따라가고(전환 없음), 놓으면 제자리로 미끄러진다. */
#sheet > .in{transition:transform .18s ease-out}
#sheet > .in.dragging{transition:none}
@media (prefers-reduced-motion:reduce){#sheet > .in{transition:none}}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 11px;font-size:12.5px;margin:8px 0}
.dl dt{color:var(--dim)}
.dl dd{margin:0;min-width:0;word-break:break-word}
.hearts{display:flex;gap:6px;margin-left:auto}
/*  ★ 단추 글자가 **단추 안에서 쪼개지던 것**을 고친다 (2026-08-14 지정:
    "낚시배에서 맨 하단 전화·예약·홈페이지가 1줄 초과하여 아이콘이 너무 커지고 있어").
    ▣ 무엇이 잘못이었나 — `flex:1` 로 셋이 폭을 똑같이 나눠 갖는데, 글꼴이
      커지면 「홈페이지 ↗」 가 그 폭에 안 들어간다. 그런데 줄바꿈이 허용돼 있어
      **단추가 옆으로 넘어가는 대신 글자가 세로로 쌓였다** — 갤럭시 글꼴 1.2배에서
      단추 높이가 50 → **85px(세 줄)** 이 됐다(실측). 글자가 쪼개지니 그 옆의
      아이콘만 멀쩡히 커 보여 '아이콘이 너무 크다' 로 읽힌다.
    ▣ 고침은 둘이다:
      ① 글자는 **쪼개지지 않는다**(nowrap) — 단추 안의 말은 한 덩이다.
      ② 대신 **단추가 다음 줄로 내려간다**(flex-wrap). 좁으면 2+1 로 접힌다.
         가로로 욱여넣는 것보다 아래로 내려가는 편이 읽힌다(§4 와 같은 태도).
    ▣ ★ `flex:1 1 auto` + 최소 폭 — 셋이 억지로 같은 폭을 갖지 않는다.
      「전화」와 「홈페이지 ↗」는 글자 수가 다른데 같은 폭을 주면 짧은 쪽이
      헐겁고 긴 쪽이 터진다. */
.cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.cta a{flex:1 1 auto;min-width:96px;text-align:center;padding:13px 12px;
  border-radius:11px;font-size:13.5px;white-space:nowrap;
  font-weight:700;text-decoration:none;min-height:44px}
/*  ★ 아이콘은 글자를 따라 커지되 **한도를 둔다** — 글꼴을 키우면 1.05em 이
    그대로 커져 글자보다 아이콘이 도드라진다. 18px 에서 멈춘다. */
.cta .ic-s{max-width:18px;max-height:18px}
.cta .call{background:var(--sonar);color:var(--on-sonar);box-shadow:inset 0 -2px 0 rgba(var(--btn-sh),.35)}
.cta .book{background:var(--hull-2);border:1px solid var(--line);color:var(--ink)}
/*  ★ 「홈페이지 ↗」는 조금 작게 (2026-10-01 지시: "m.naksigo.com 의 선박정보에서 홈페이지 박스를 조금 줄여줘") — 전화·예약이 먼저 눈에 들고,
    홈페이지는 곁 길이다. 늘어나 칸을 나눠 갖지 않고(flex 0) 글자·여백을 줄인다. 누름판 높이는 44px 그대로. */
.cta a.home{flex:0 0 auto;min-width:0;padding:11px 12px;font-size:12.5px;font-weight:600}
/*  최근 조황사진 제목 줄 — 오른쪽에 「조과 분석」·「조과 예측」(2026-10-01 지시) */
.phhead{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:12px 2px 0}
.phhead .fh{margin:0;flex:1 1 auto}
.phhead .pcall{margin:0!important;flex:0 0 auto}

/*  ══ 찾기 (2026-08-12 지정 — 조황 탭과 같은 결로 다시 만든다) ═══════════════
    ▣ 묻는 칸이 아래 붙박이인 조황 탭과 **같은 몸짓**이라야 한다. 찾는 칸도
      아래(#findbar, .composer 를 그대로 쓴다), 결과는 **아래에서 위로** 쌓인다.
    ▣ ★ 왜 아래에서 위인가 — 손은 화면 아래에 있다. 찾자마자 나온 것이 손
      바로 위에 있어야 눈과 손이 같은 곳에 있다. 더 보려고 위로 굴리는 것은
      채팅에서 지난 말을 거슬러 보는 몸짓과 같다.
    ▣ ★ justify-content:flex-end 는 **줄이 적을 때만** 뜻이 있다. 넘치면
      평소처럼 아래로 흐른다 — 그때는 이 규칙이 아무 일도 하지 않는다.
    ▣ ★ 상세를 보는 동안에는 끈다(.bottomup 을 뗀다). 긴 글이 아래에 붙으면
      제목이 화면 위로 밀려 올라가 무엇을 보는 중인지 사라진다. */
/*  ★ 150px = 앱바 52 + 본문 위여백 12 + 본문 아래여백 78, 그리고 홈바 몫 몇 px.
    main 이 이미 아래로 78+askh 를 비워 두므로 여기서 그만큼을 빼야 자리가 맞는다.
    ★ **조황 탭도 같은 규칙**이다 (2026-08-12 지정) — TODAY 도 답변도 아래에서
      나타나 위로 흘러간다. 두 탭이 다른 규칙으로 움직이면 안 된다. */
/*  ★ **다섯 탭 모두** 같은 규칙이다 (2026-08-12 지정 — 물때·예측·나까지 넓힘).
    ▣ 운영자 지시: "물때, 예측, 나 메뉴에서도 출력 방식은 항상 하단 맞춤이
      유지되어야 하고, 하단에 1라인씩 출력되는 방식으로 해".
    ▣ ★ 새 선택자를 만들지 않고 **이 규칙에 이름만 더한다.** 탭마다 제 규칙을
      두면 반드시 갈린다 — 150px·--askh 계산이 한 곳이라야 다섯이 같이 움직인다.
    ▣ 물때·예측·나에는 붙박이 칸이 없어 --askh 는 0 이다(fitComposer 가 그렇게
      적는다). 그래도 같은 식을 쓴다 — 값이 0 이면 아무 일도 하지 않는다. */
section[data-tab="ask"].on,
section[data-tab="find"].on,
section[data-tab="tide"].on,
section[data-tab="fc"].on,
section[data-tab="me"].on{display:flex;flex-direction:column;
  min-height:calc(100vh / var(--fs,1) - 150px - var(--askh, 0px));
  min-height:calc(100svh / var(--fs,1) - 150px - var(--askh, 0px))}
section[data-tab].on.bottomup{justify-content:flex-end}
/*  ★ 목록을 담는 껍데기 = **답변 말풍선 그대로** (2026-08-12 지정).
    한 화면에 답과 목록이 나란히 서는데 껍데기가 다르면 두 화면처럼 보인다.
    ▣ ★ 목록을 markdown 글로 바꾸지는 않는다 — 줄은 눌러야 하고 썸네일이
      붙어야 한다. 맞추는 것은 **담는 그릇과 흐름**이다.
    ▣ 안쪽 줄(.li)은 제 글씨 크기를 그대로 쓴다(제목 13 · 곁말 11). 말풍선의
      13.5/1.7 은 글을 읽는 크기이지 목록을 훑는 크기가 아니다. */
.bubble.ai.listbub{padding:11px 12px 6px}
/*  ★ TODAY 와 RANK 를 **한눈에 가른다** (2026-08-12 지정 ⑮).
    ▣ 그릇은 같다(② — 답변과 같은 말풍선). 가르는 것은 **머리**다:
      · 작은 라벨(.k)의 색 — TODAY 는 물빛, RANK 는 불빛
      · 왼쪽 모서리의 3px 색띠 — 곁눈으로도 어느 덩이인지 알게
    ▣ ★ 띠는 border 가 아니라 **inset box-shadow** 다. border 를 주면 안쪽
      너비가 줄어 두 덩이의 글줄이 서로 어긋난다(같은 그릇이어야 한다).
    ▣ 색은 이미 쓰는 토큰만 — --water(물빛)·--sonar-hot(불빛). 되돌아갈 값은
      필요 없다: 둘 다 이 파일이 여러 곳에서 이미 쓰고 있다. */
/*  ★ 음각을 걷은 뒤로는 띠만 적으면 된다 (2026-08-12). 셋이 **같은 방식·다른 색**:
    묻는 칸·답변 = 황색(--sonar) · TODAY = 물빛(--water) · RANK = 불빛(--sonar-hot). */
.bubble.ai.listbub.todaybub{box-shadow:inset 3px 0 0 var(--water)}
.bubble.ai.listbub.rankbub{box-shadow:inset 3px 0 0 var(--sonar-hot)}
.k.k-rank{color:var(--sonar-hot)}
/*  종류 뱃지 — '항구'인지 '낚시배'인지 한눈에. 전체로 찾을 때 여섯 종류가
    섞여 나오므로 이름만으로는 무엇인지 알 수 없다. */
.kd{display:inline-block;margin-right:5px;padding:1px 6px;border-radius:99px;
  background:var(--hull-2);border:1px solid var(--line);color:var(--sonar-ink);
  font-size:10px;font-family:var(--mono);vertical-align:1px}
/*  ★ 줄 하나가 곧 단추다 — .li 를 그대로 쓴다(조황 근거·순위와 같은 모양). */
.fli .m{display:block}
/*  ★ 긴 목록은 **그 칸만** 구른다 (지정: 본문이 밀리면 안 된다).
    선사의 배 107척·조황글이 본문을 밀어내면 뒤로 갈 길이 화면 밖으로 나간다. */
.scrollbox{max-height:calc(46vh / var(--fs,1));overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:10px;padding:0 9px;background:var(--hull-2)}
.scrollbox .li:first-of-type{border-top:0}
/*  규모 한 줄 — 항구 화면에서 반드시 보여야 하는 값(선사 수·낚시배 수). */
.tallies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:9px;
  overflow:hidden;margin:9px 0}
.tallies .c{background:var(--hull);padding:8px 9px;min-width:0}
.tallies .c .l{display:block;font-size:10px;color:var(--dim)}
.tallies .c .v{display:block;font-family:var(--mono);font-size:14px;font-weight:700}
/*  ★ 상세의 머리 줄 — 종류 이름(왼쪽)과 나가는 문 ✕(오른쪽)이 한 줄이다
    (2026-08-12 지정). 닫기는 이 화면 어디서나 맨 위 오른쪽 모서리다. */
.dhead{display:flex;align-items:center;gap:8px}
.dhead .k{flex:1 1 auto;min-width:0}
.dx{flex:0 0 auto;width:38px;height:38px;margin:-6px -6px -6px 0;border:0;border-radius:10px;
  background:none;color:var(--dim);font-size:16px;line-height:1;cursor:pointer}
.dx:hover{background:rgba(var(--sh),.08);color:var(--ink)}
.dx:focus-visible{outline:2px solid var(--sonar);outline-offset:1px}
/*  뒤로 — 상세에서 목록으로. 맨 위 왼쪽(읽기 시작하는 자리)에 둔다.
    ★ 「찾기」 상세는 이제 위의 .dx(✕)를 쓴다 — 이 모양은 다른 화면에 남아 있다. */
.backbtn{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--hull-2);
  color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer;margin-bottom:9px}
.backbtn:hover{border-color:var(--sonar)}
/*  「상세보기」 — 이름 줄의 오른쪽 끝. 44px 손가락 표적. */
.detbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;height:44px;
  padding:0 12px;border:1px solid var(--line);border-radius:11px;
  background:var(--sonar);color:var(--on-sonar);font:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;box-shadow:inset 0 -2px 0 rgba(var(--btn-sh),.3)}
.guidetext{white-space:pre-wrap;font-size:12.5px;line-height:1.75;color:var(--ink-soft)}

/* 물때 */
/*  ★ 날짜 단추가 **두 줄로 접히던 것**을 고친다 (2026-08-13 지정: "「내일의
    물때」 옆 날짜 표시 및 선택 ▼ 아이콘은 2/3 사이즈로 하고 전체적으로 글자간
    간격을 줄여 줘. 삼성 갤럭시에서는 2줄로 보이고 있어").
    ▣ 왜 접혔나 — 앞서 지시대로 ▼ 를 세 배(3em)로 키웠는데, **이 단추만은**
      글자와 한 줄에 나란히 서는 자리라 그 폭이 그대로 줄을 밀어냈다.
      360px 에서 단추 높이가 40 → 56px(세 줄분)이 됐다(실측).
      ★ 같은 표시라도 **혼자 서는 자리**(접는 칸)와 **글자 옆에 서는 자리**는
        다르다. 키우는 지시는 앞의 것이고, 여기는 뒤의 것이다.
    ▣ 그래서 셋을 함께 줄인다 — ▼ 는 2/3(3em→2em) · 자간 -0.3px · 사이 여백 6→4px.
      자간은 이 단추가 **고정폭 글꼴**(--mono)이라 특히 헐거웠다.
    ▣ ★ 누르는 자리(min-height:40px)는 그대로다 — 글자만 좁혔지 손가락 자리를
      좁힌 것이 아니다. */
.datebtn{display:flex;align-items:center;gap:2px;padding:7px 6px;border:1px solid var(--line);
  border-radius:9px;background:var(--hull-2);font-family:var(--mono);font-size:12px;
  letter-spacing:-.6px;white-space:nowrap;flex:0 0 auto;
  color:var(--ink);cursor:pointer;min-height:40px}
/*  ★ 화살표 옆의 빈틈까지 없앤다 — 3em 짜리 글리프는 좌우에 제 여백을 달고
    온다(글자 상자가 크다). 음수 여백으로 그만큼 당긴다. */
.datebtn .tri{font-size:1.8em;margin:0 -2px 0 0}
.bar{height:9px;border-radius:99px;background:var(--hull-2);overflow:hidden;margin:8px 0 4px}
.bar i{display:block;height:100%;background:var(--tide-bar);border-radius:99px}
.exs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-top:9px}
.exs .c{background:var(--hull);padding:7px 5px;text-align:center}
.exs .c .l{display:block;font-size:10px;color:var(--dim)}
.exs .c .v{display:block;font-family:var(--mono);font-size:12.5px;font-weight:700}
.exs .c.hi .l{color:var(--sonar-ink)}
.tsea{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:9px;
  background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.tsea .c{background:var(--hull);padding:7px 8px;min-width:0}
.tsea .c .l{display:block;font-size:10px;color:var(--dim)}
.tsea .c .v{display:block;font-family:var(--mono);font-size:12.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/*  ══ 조석 곡선 (2026-08-12 지정 — 데스크톱 「내일의 물때」에서 옮겨 옴) ═══════
    ▣ 왜 폰에도 필요한가 — 만·간조 **시각 넉 줄**만으로는 "지금 물이 드는 중인가"
      를 알 수 없다. 곡선 위의 '지금' 선 하나가 그 답이다.
    ▣ ★ 조위는 **cm 실축**으로 그린다. 2주 그래프처럼 0~1 로 눕히면 조차 30cm
      날과 700cm 날이 같은 높이가 되어, 조차를 보려는 그림에서 조차가 사라진다.
    ▣ ★ viewBox 를 폰 폭에 맞춰 새로 잡았다(320×126). 데스크톱 것(720)을 그대로
      가져오면 360px 화면에서 0.43배로 눌려 12px 글자가 5px 가 된다 — 못 읽는다.
    ▣ ★ preserveAspectRatio 를 건드리지 않는다(기본 유지). 2주 그래프의
      `none` 을 베껴 붙이면 점과 글자가 가로로 뭉개진다. */
.tdc{margin-top:10px}
.tdc svg{display:block;width:100%;height:auto;color:var(--water)}
.tdc .grid{stroke:var(--line);stroke-width:1}
.tdc .area{fill:var(--water);opacity:.13}
.tdc .curve{fill:none;stroke:currentColor;stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tdc .pk{fill:var(--lamp)}
.tdc .lb{font-family:var(--mono);font-size:9px;fill:var(--dim)}
.tdc .lb.hi{fill:var(--lamp);font-weight:700}
.tdc .nowline{stroke:var(--sonar-hot);stroke-width:.7;stroke-dasharray:2.5 2.5}
.tdc .nowdot{fill:var(--sonar-hot)}
.tdc .nowlb{font-family:var(--mono);font-size:9px;fill:var(--sonar-hot);font-weight:700}
/*  ★ 조석 곡선의 **자** (2026-08-14 지정: "X축은 시간, Y축은 11m 고정 조차"). */
.tdc .ax{stroke:var(--line);stroke-width:.8}
.tdc .ax.bold{stroke-width:1.2}
.tdc .axlb{font-family:var(--mono);font-size:8px;fill:var(--dim)}
.tdc .axlb.unit{font-size:7px;opacity:.8}
.tdc .cap{margin:4px 2px 0;font-size:10px;color:var(--dim)}
.tdc .cap b{color:var(--ink)}
/*  여러 날 조차 문장 — 한 줄에 나란히, 좁으면 접힌다 (2026-09-28, /tides) */
.tdc .caps{display:flex;flex-wrap:wrap;gap:0 24px}
.tdc .caps .cap{flex:1 1 300px;min-width:0}
/*  여러 날 곡선의 날짜 머리·자정 경계 (데스크톱 /tides — _tide_js.php tideCurve 머리말) */
.tdc .daylb{font-family:var(--mono);font-size:9px;font-weight:700;fill:var(--ink-soft)}
.tdc .daysep{stroke:var(--dim);stroke-width:1;stroke-dasharray:1 3}
/*  ══ 유속·풍속 — **구간 띠** (2026-08-12 지정) ════════════════════════════
    ▣ ★ 선으로 긋지 않는다. 이 자료의 알갱이는 **오전·오후·일** 셋뿐이다
      (예보표가 그렇게 온다). 하루를 가로지르는 선을 그으면 없는 시간별 값을
      지어내는 것이 된다. 있는 만큼만 — 구간마다 min~max 띠 하나다.
    ▣ ★ 값이 없는 구간은 **띠를 안 그린다.** 0 으로 그리면 '물이 안 선다'·
      '바람이 없다' 로 읽힌다 — 자료가 없는 것과 다른 말이다. */
.tspd{margin-top:10px}
.tspd h3{margin:0 0 5px;font-size:11px;font-weight:700;color:var(--dim);
  display:flex;align-items:baseline;gap:6px}
.tspd h3 .u{font-family:var(--mono);font-weight:400}
.tspd .r{display:grid;grid-template-columns:34px 1fr auto;align-items:center;
  gap:7px;margin-bottom:5px}
.tspd .r .n{font-size:11px;color:var(--dim)}
.tspd .r .t{position:relative;height:10px;border-radius:99px;background:var(--hull-2)}
.tspd .r .f{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--tide-bar)}
.tspd.wind .r .f{background:var(--sonar)}
.tspd .r .v{font-family:var(--mono);font-size:11.5px;font-weight:700;white-space:nowrap}
/*  풍랑주의보 기준선(14 m/s) — 넘으면 낚시배가 못 나간다. 자로 재는 자리다. */
.tspd .r .lim{position:absolute;top:-3px;bottom:-3px;width:0;
  border-left:1.5px dashed var(--sonar-hot)}
.tspd .note{margin:2px 2px 0;font-size:10.5px;color:var(--dim)}

/*  ★ 물때 탭의 출항 제한 — 예측 칸의 같은 알림(.fclim)과 같은 결. */
.tidelimit{margin:9px 0 0;padding:9px 10px;border-radius:9px;font-size:11.5px;
  line-height:1.6;color:var(--ink);
  background:color-mix(in srgb, var(--sonar) 12%, var(--hull));
  border:1px solid color-mix(in srgb, var(--sonar) 38%, var(--line))}
.tidelimit.alert{background:color-mix(in srgb, var(--sonar-hot) 12%, var(--hull));
  border-color:color-mix(in srgb, var(--sonar-hot) 40%, var(--line))}
.tidelimit .sub{display:block;margin-top:3px;font-size:10.5px;color:var(--ink-soft)}
/*  달력 — **조금 줄였다** (2026-08-12 지정)
    ▣ 어떻게 — 칸을 찌그러뜨리지 않고 **판 전체의 폭을 묶어** 줄인다
      (max-width 282px, 가운데 정렬). 칸은 정사각 그대로라 날짜가 눌러야 할
      자리처럼 보인다. 360px 화면에서 한 칸 42px → 약 38px 이 된다.
    ▣ ★ 38px 아래로는 안 내린다. 새벽에 배를 고르는 손은 정확하지 않다 —
      더 줄이려면 폭이 아니라 여백(gap)을 줄일 일이지 표적을 줄일 일이 아니다.
    ▣ 요일 줄도 **같은 폭**으로 묶는다. 안 그러면 요일과 날짜의 칸이 어긋난다. */
/*  ★ 달력은 **화면 가운데 뜨는 층**이다 (2026-08-12 지정).
    전에는 아래에서 올라오는 시트였다. 시트는 목록처럼 **아래로 이어지는 것**의
    자리다 — 달력은 한 판이 통째로 보여야 하는 것이라 가운데가 맞다.
    ★ 창 폭은 다른 층과 같은 규칙(min(94vw,420px))을 그대로 쓴다. 한 화면에서
      층이 종류마다 다른 크기로 뜨면 사람이 매번 다시 가늠한다. */
/*  ★ 한 번 더 줄였다 (2026-08-12 지정, 두 번째).
    ▣ 어떻게 — **판(달력) 말고 그 둘레**를 먼저 깎았다: 창 폭을 판에 바짝 붙이고
      (420 → 300), 제목·안내글·아래 닫기 자리의 여백을 줄였다. 날짜 칸을 먼저
      줄이면 화면은 작아지지만 **누르기 어려워진다** — 손이 먼저다.
    ▣ 칸은 38 → 36px 로 조금만 내렸다. ★ 여기가 바닥이다. 새벽 배 위에서
      장갑 낀 손이 누르는 자리라, 더 줄여야 하면 칸이 아니라 달을 넘기는 방식
      (예: 주 단위 보기)을 바꿀 일이다. */
#calDlg{width:min(90vw,300px);max-width:min(90vw,300px)}
/*  ★ 달력도 좌우 여백을 넓힌다 10 → 14px (2026-08-13 지정 "모든 팝업창").
    ▣ 다른 층(18px)보다 좁게 두는 까닭 — 이 층은 폭이 300px 로 못박혀 있고
      안이 **7칸 격자**다. 여백을 18px 로 주면 한 칸이 그만큼 좁아져 날짜
      두 자리가 갑갑해진다. 격자가 있는 층은 여백보다 칸이 먼저다.
    ▣ 그래도 10px 은 줄과 테두리가 붙어 보였다 — 14px 이 둘 사이의 자리다. */
#calDlg .pop-in{padding:10px 14px 8px}
#calDlg > .pop-in > h2{font-size:14px;margin-bottom:2px;padding-right:34px}
#calDlg .calhead{display:flex;align-items:center;gap:6px;margin-bottom:0}
#calDlg .calhead b{flex:1 1 auto;text-align:center;font-size:13.5px}
#calDlg .calhead .datebtn{min-height:34px;padding:6px 9px}
#calDlg .calnote{margin:7px 2px 0;font-size:10.5px;line-height:1.45}
#calDlg .popfoot{padding-top:7px}
#calDlg .popclose{min-height:38px;padding:0 20px;font-size:13px}
#calDlg .popx{top:3px;right:3px;width:34px;height:34px}
.cal,.calwk{max-width:268px;margin-left:auto;margin-right:auto}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:6px}
.cal button{aspect-ratio:1;min-height:36px;border:1px solid transparent;border-radius:8px;
  background:var(--hull-2);
  font:inherit;font-family:var(--mono);font-size:12px;color:var(--ink);cursor:pointer}
.cal button.on{background:var(--sonar);color:var(--on-sonar);font-weight:700}
.cal button[disabled]{opacity:.28;cursor:default}
.calwk{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:10px;
  color:var(--dim);text-align:center;margin-top:6px}

/* 예측 */
.fc{display:grid;grid-template-columns:repeat(var(--fcn,14),1fr);gap:3px;align-items:end;height:82px;margin:10px 0 4px}
.fc i{display:block;background:var(--sonar);border-radius:3px 3px 0 0}
.fc i.n{background:#C9D9DE}
.fcx{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);font-family:var(--mono)}
.basis{margin-top:9px;padding:9px 10px;border-radius:9px;background:var(--hull-2);
  font-size:11.5px;color:var(--ink-soft)}

/* 나 */
.tokbig{display:flex;align-items:baseline;gap:6px}
.tokbig b{font-family:var(--mono);font-size:26px;color:var(--sonar-ink)}
.themes{display:flex;gap:6px;margin-top:8px}
.themes button{flex:1;height:40px;border-radius:9px;border:1px solid var(--line);
  font:inherit;font-size:11px;cursor:pointer}
.themes button[aria-pressed="true"]{outline:2px solid var(--sonar);outline-offset:1px}
/*  글자 크기 고르는 단추 — 테마 단추와 같은 줄 모양을 쓰되, 색이 아니라
    **크기**를 미리보기로 보여 준다(큰 '가' + 그 아래 이름). */
.themes.fzs button{flex-direction:column;gap:1px;height:auto;padding:7px 0 6px;
  background:var(--hull);color:var(--ink);line-height:1.1}
.themes.fzs button span{font-size:10.5px;color:var(--dim);line-height:1.2}
.themes.fzs button[aria-pressed="true"]{background:var(--hull-2)}
/*  ★ 한글은 **낱말 가운데서 끊지 않는다** (2026-08-28). 기본값은 CJK 를
    아무 자리에서나 접어, 좁은 폰에서 「사업자등록번/호」로 잘렸다(실측).
    keep-all 이면 띄어쓰기에서만 접힌다. */
.foot{margin:14px 2px 0;text-align:center;color:var(--dim);font-size:11.5px;line-height:1.9;word-break:keep-all}
.foot a{color:inherit}

/* 탭띠 */
/*  ★ 탭띠의 윗선이 **음각의 밝은 아랫벽**을 맡는다 (2026-08-12 지정).
    붙박이 띠의 맨 아랫줄 그늘 + 여기 밝은 줄이 붙어 한 줄의 홈이 된다.
    선을 한쪽에서 두 겹 다 그릴 수 없어(요소 밖은 못 칠한다) 나눠 그린다. */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;
  grid-template-columns:repeat(5,1fr);background:var(--hull);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);
  box-shadow:inset 0 1px 0 var(--eng-light, rgba(255,255,255,.6))}
.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:56px;border:0;background:none;font:inherit;font-size:10.5px;color:var(--dim);cursor:pointer}
.tabs button .i{width:21px;height:21px}
.tabs button[aria-selected="true"]{color:var(--sonar-ink);font-weight:700}
.tabs button[aria-selected="true"] .i{color:var(--sonar-hot)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--sonar);outline-offset:2px}
.warn{color:var(--sonar-hot)}

/*  ══ 좋아요 · 관심선박 (2026-08-10 지정) ═════════════════════════════════
    ★ 폰 화면에는 이 규칙이 **아예 없었다** — 회원 스크립트가 그린 하트·별이
      브라우저 기본 단추 모양으로 떴다. 데스크톱과 같은 입체 언어를 여기도 준다.
    ▣ 빛은 위에서 온다 — 안 누른 것은 **파이고**(위 그늘·아래 빛),
      누른 것은 **솟는다**(위 빛·아래 그늘). 순서를 뒤집으면 눌린 것이
      안 눌린 것처럼 보인다.
    ▣ 그늘은 검정이 아니라 **제 색을 옅게** 깐다(currentColor) — 붉은 하트
      밑에 잿빛 얼룩이 앉으면 둘이 다른 재질로 보인다. */
.nkacts{display:inline-flex;gap:6px;align-items:center}
.nkacts button{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px;
  border:1px solid var(--line);border-radius:99px;background:var(--hull-2);
  color:var(--ink-soft);font:inherit;font-size:11.5px;cursor:pointer}
.nkacts .ic{font-size:15px;line-height:1;
  text-shadow:
    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 .cnt{font-family:var(--mono);font-weight:400}
.nkacts .lb{font-size:10.5px}
.nkacts .nklike.on{color:var(--sonar-hot);border-color:color-mix(in srgb,var(--sonar-hot) 40%,var(--line))}
.nkacts .nkfav.on{color:var(--sonar-ink);border-color:color-mix(in srgb,var(--sonar) 45%,var(--line))}
/*  ★ 「예측」의 배 고르기 줄에서는 **알약 상자를 걷는다** (2026-08-14 지정:
    "좋아요·관심선박 아이콘 박스는 제거하고 우측으로 배치").
    ▣ 왜 — 이 줄에는 이미 눌리는 것이 하나 더 있다(줄 전체 = 예측 보기).
      테두리 있는 알약이 둘 서면 **어느 것이 이 줄의 일인지** 흐려진다.
      상자를 걷어 아이콘만 두면 '곁들여진 손잡이' 로 읽힌다.
    ▣ ★ 손가락 자리는 줄이지 않는다 — 상자만 없앴지 높이(30px)와 좌우 여백은
      남긴다. 보이는 것이 작아도 **눌리는 자리는 그대로**여야 한다.
    ▣ 오른쪽 끝에 세로로 가운데 맞춤 — 글 두 줄의 오른편이 비어 있던 자리다. */
/*  ★ 좋아요·관심선박을 **첫 줄 맨 오른쪽**에 세운다 (2026-08-14 지정:
    "낚시배와 조황지수와 분리하여 첫 줄의 맨 우측에 정렬").
    ▣ 앞서는 두 줄에 걸쳐 세로 가운데에 띄워 두었다(absolute). 그러면 어느 줄에
      속한 것인지 모호하고, 순위(RANK) 줄과도 자리가 달랐다.
    ▣ 이제 첫 줄이 한 줄짜리 flex 다 — 왼쪽에 이름, 그다음 조황지수,
      margin-left:auto 로 좋아요·관심선박이 맨 오른쪽에 붙는다.
      순위 줄과 **같은 짜임**이라 두 화면을 한 번만 배우면 된다.
    ▣ ★ 이름만 줄어든다(말줄임) — 지수와 숫자는 줄일 수 없는 값이다.
    ▣ 앞에 붙어 있던 ☆ 글자는 뺐다 — 이제 진짜 별 단추가 그 줄에 서 있어
      같은 그림이 두 번 나온다(하나는 글자, 하나는 단추). */
/*  ★ 별점은 **제 줄에 둔다** (2026-08-14 지정: "별점을 다음 줄로 해").
    ▣ 앞서는 둘째 줄 끝에 붙였다 — 「지역·정원·톤수·어종·N명이 담음·★★★☆☆ 3.5」
      가 되어 배에 따라 셋째 줄로 넘쳤고, **넘치는 배와 안 넘치는 배의 줄
      높이가 달라** 목록이 들쭉날쭉했다.
    ▣ 별은 성격도 다르다 — 위 줄은 '이 배가 어떤 배인가'(사실), 별은 '사람들이
      어떻게 봤나'(평가)다. 자리를 나누면 줄마다 읽을 것이 하나씩이 된다. */
.li.fcrow .m.mstar{margin-top:1px}
.li.fcrow > .h{display:flex;align-items:center;gap:6px;min-width:0}
/*  ★ 이름과 조황지수는 **한 묶음**이다 (2026-08-14 지정: "낚시배와 조황지수는
    같은 컬럼으로 묶어서 좌측 정렬").
    ▣ 앞서는 이름 칸에 최소 폭(96px)을 줘서, 이름이 짧아도 지수가 **늘 같은
      x 에** 섰다 — 이름과 지수 사이가 벌어져 **딴 칸처럼** 보였다.
    ▣ 이제 이름은 제 글자만큼만 차지하고(flex:0 1 auto) 지수가 **바로 뒤에**
      붙는다. 둘이 한 덩이로 왼쪽에 서고, 좋아요·관심선박만 오른쪽 끝이다.
    ▣ ★ 이름이 길면 그때만 줄어든다(말줄임) — 지수는 밀리지 않는다. */
.li.fcrow .fnm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:0 1 auto;min-width:0}
.li .nkslot.fcnk{margin-left:auto;flex:0 0 auto}
/*  ★ 순위(RANK) 줄도 **같은 모양**이다 (2026-08-14 지정: "RANK 에서도 좋아요·
    관심선박 아이콘 박스는 제거하고 낚시배·조과예측과 분리하여 조황지수와 함께
    우측 정렬"). 두 화면이 같은 것을 다르게 보여 주면 안 된다.
    ▣ 순위 줄은 첫 층 오른쪽(.rkright)에 조황지수와 **나란히** 선다 —
      '이 배가 어떤가'(등급)와 '내가 어떻게 할까'(담기)가 한 묶음이고,
      왼쪽의 이름·조과 예측과는 자리로 갈린다. */
.li .nkslot.fcnk .nkacts button,
.rank .rkright .nkacts button{border:0;background:transparent;padding:0 4px;
  color:var(--dim)}
.li .nkslot.fcnk .nkacts .cnt,
.rank .rkright .nkacts .cnt{font-size:11px}
/*  ★★ 상자를 걷으면서 **켜진 상태의 색까지 덮어써 버렸다** (2026-08-14 실측).
    위의 `color:var(--dim)` 이 `.nkacts .nklike.on` 보다 셌다 — 내가 누른
    좋아요와 안 누른 좋아요가 **같은 잿빛**이 됐다.
    ▣ 공통 규칙(운영자 지정): **아이콘은 '내가 했나' 를 말하고, 옆 숫자는
      '전체 사람이 몇 번 했나' 를 말한다.** 아이콘이 상태를 못 말하면 이 규칙이
      절반만 사는 셈이다.
    ▣ 모양(찬 하트/빈 하트·찬 별/빈 별)은 이미 갈리지만 **색까지 갈라야** 한다 —
      작은 아이콘에서 채움만으로는 눈에 잘 안 걸린다. 흑백에서도 모양이 남는다. */
.li .nkslot.fcnk .nkacts .nklike.on,
.rank .rkright .nkacts .nklike.on{color:var(--sonar-hot)}
.li .nkslot.fcnk .nkacts .nkfav.on,
.rank .rkright .nkacts .nkfav.on{color:var(--sonar-ink)}
/*  ★ 아이콘만 남으니 둘 사이가 붙어 보인다 — 사이를 조금 벌린다. */
.rank .rkright .nkacts{gap:2px}
.nkacts .nklike.on .ic,
.nkacts .nkfav.on .ic{
  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 button:focus-visible{outline:2px solid var(--sonar);outline-offset:2px}

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

/*  ★ 순위 줄의 작은 '예측' (2026-08-10 지정).
    ▣ 폰에서는 글자를 **'예측'** 두 자로 줄인다 — 데스크톱과 달리 이 줄에는
      번호·이름·자리·별·건수·사진이 이미 들어 있다. '조과 예측' 네 자를 넣으면
      이름이 잘린다(이름은 잘리면 안 되는 유일한 글자다).
      대신 눌렀을 때 열리는 곳의 제목이 '조과 예측' 이라 뜻이 이어진다.
    ▣ ★ button 안에 button 을 넣을 수 없다 — 줄 전체가 이미 단추다.
      span[role=button] 으로 두고 손잡이(data-fcboat)만 단다. */
/*  ★ 「예측」 알약은 **파랑(--fc #2088E6)** 이다 (2026-08-13 지정: "'예측',
    '조과 예측 - N일치 보기(기간은 설정값)' 의 배경색은 #2088E6 으로 통일").
    ▣ 전에는 주황(--sonar)이었다 — 묻는 칸·답 칸과 같은 색이라, 이 알약이
      '질의 계열' 로 읽혔다. 예측은 다른 화면으로 가는 문이다.
    ▣ 이제 예측으로 가는 문 셋(순위 줄 알약 · 상세의 N일치 보기 · 「나」의
      조과 예측)이 **한 색**이라, 어디서 만나도 같은 곳으로 간다는 것이 보인다.
    ★ 그늘은 파랑에 맞춘 어두운 파랑으로 준다 — 주황용 --btn-sh 를 그대로 쓰면
      파란 단추 아래에 갈색 그늘이 깔린다. */
/*  ★ 안쪽 여백을 8px→6px 로, 이름줄 사이 여백을 6px→4px 로 줄였다
    (2026-09-03, 「분석」이 한 자리 더 들어서면서).
    ▣ 왜 여백부터인가 — 이 줄에서 **잘리면 안 되는 글자는 배 이름**이다.
      알약 두 개의 글자('분석'·'예측')도 잘라서는 안 된다(지시). 그래서 줄일
      수 있는 것은 여백뿐이고, 여백을 다 줄인 뒤에도 모자라면 그때 이름이
      말줄임으로 접힌다 — 360px 에서 여덟 자짜리 이름('오천항 서해낚시')이
      그 자리다(실측: 이 알약이 붙기 전에도 88.5/89px 로 이미 한계였다).
    ▣ ★ 두 알약은 **같은 여백**을 쓴다 — 나란히 선 둘이 다르면 그것이 먼저
      눈에 띈다. 그래서 「분석」만 줄이지 않고 이 한 줄에서 함께 줄인다. */
/*  ★ 누름판 44px (2026-09-06 — 확정 규칙 「누르는 것 44px」). 옆의 「분석」
    (.btmini)은 2026-09-03 에 `::before` 누름판을 얻었는데 이 「예측」 알약만
    빠져 있었다 — **같은 줄의 두 알약이 다른 표적**이었다. 같은 방법으로
    보이는 알약은 그대로 두고 표적만 넓힌다(아래 .btmini 의 같은 규칙은
    중복이 되지만, 갈래가 늘 때 한쪽만 고쳐지는 일을 막으려 그대로 둔다). */
.rank .fcmini{flex:0 0 auto;position:relative;padding:3px 6px;border-radius:99px;
  background:var(--fc);
  color:var(--on-fc);font-size:10.5px;font-weight:700;line-height:1.3;
  box-shadow:inset 0 -1.5px 0 rgba(8,50,90,.34), 0 1px 2px rgba(var(--sh),.18)}
.rank .fcmini::before{content:'';position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:var(--btbtn-tap,44px)}
.rank.haspic .fcmini{margin-right:2px}
/*  ★ 순위 줄의 「분석」 알약 (2026-09-03 지시: "RANK 에서 각 내역에 있는
    「예측」 앞에 「분석」이라는 아이콘을 추가하고 아이콘 배경색은 #F7C284").
    ▣ ★ 색은 **새로 적지 않는다** — 「나」 관심선박의 「전부」·「개별 조과 분석」이
      이미 쓰는 `--favbtn-bg`/`--favbtn-fg` 를 가리켜 쓴다(아래 배경색 표에 이
      자리도 적어 두었다). 흩어 적으면 다음에 바꿀 때 하나가 남는다.
    ▣ ★ **모양·크기는 옆의 「예측」과 한 벌**이다 — 두 알약이 같은 줄에 나란히
      서므로 여기서는 그것이 「같은 것은 같게」다. 그래서 손잡이 한 벌 값 중
      **아이콘 크기(--btbtn-ico)와 누름판(--btbtn-tap 44px)만** 가져온다.
      보이는 높이(--btbtn-h 26px)를 여기 씌우면 「분석」만 홀로 두꺼워져
      **한 줄 안에서** 어긋난다(그 값은 「나」·/favorites 의 큰 단추 것이다).
    ▣ ★ 44px 누름판은 `::before` 로 깐다 — 보이는 알약은 작게 두고 손가락
      표적만 넓힌다(관심선박 줄 `.msv .mini` 와 같은 방법). */
.rank .fcmini.btmini{display:inline-flex;align-items:center;gap:2px;position:relative;
  background:var(--favbtn-bg);color:var(--favbtn-fg);
  box-shadow:inset 0 -1.5px 0 rgba(18,48,58,.28), 0 1px 2px rgba(var(--sh),.18)}
.rank .fcmini.btmini .rfcico{width:var(--btbtn-ico,11px);height:var(--btbtn-ico,11px);
  flex:0 0 auto}
.rank .fcmini.btmini::before{content:'';position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:var(--btbtn-tap,44px)}
.rank .fcmini.btmini:focus-visible{outline:2px solid var(--favbtn-fg);outline-offset:2px}

/*  예측 막대의 가로축 — 막대와 **같은 칸 나눔**이라야 날짜가 제 막대 아래 선다. */
/*  ★ minmax(0,1fr) 이라야 한다 (실측: 1fr 로 뒀더니 화면이 가로로 밀렸다).
    1fr 은 '내용보다 작아지지 않는다' 라서, '08.11' 이 칸보다 넓으면 칸을
    넓혀 버린다 — 열넷이 조금씩 넓어져 판이 화면을 넘었다.
    0 을 최소로 주면 칸은 화면을 나눠 갖고 글자만 칸 밖으로 비어져 나온다. */
/*  예측 카드의 배 제원 한 줄 (2026-08-13) — 이름 바로 아래, 한 단 작게. */
.fcspec{margin:3px 0 0;font-size:11.5px;line-height:1.5}
/*  ★ 이번 예측이 **무슨 어종**인가 (2026-08-14). 제원 줄(잿빛)과 눈으로 갈리게
    강조색을 쓴다 — 하나는 '이 배가 어떤 배인가', 이것은 '이 별이 무엇의 별인가'
    라 성격이 다르다. */
.fcsp{margin:3px 0 0;font-size:12px;color:var(--sonar-ink)}
.fcx{display:grid;grid-template-columns:repeat(var(--fcn,14),minmax(0,1fr));gap:3px;font-size:8px;
  font-family:var(--mono);color:var(--dim);text-align:center;justify-items:center}
.fcx span{white-space:nowrap;min-width:0}
.fcx span.we{color:var(--sonar-ink);font-weight:700}
/*  날짜별 조과 예측 — 날짜 아래 물때(2026-10-01 지시) */
.fcx span em.mul{display:block;font-style:normal;font-size:8px;line-height:1.2;color:var(--water,#2E7D91);font-weight:400}
.fcx span em.mul.jo{color:#B3372A}
/*  ★ 지우지 않고 감춘다 — 지우면 칸이 밀려 날짜가 남의 막대 아래로 간다. */
.fcx span.hid{visibility:hidden}

/*  ★ 예측 칸의 배 이름은 **크고 진하게** (2026-08-10 지정) — 이 화면에서
    사람이 계속 확인하는 것은 기능 이름이 아니라 '어느 배' 다.
    곁말(항구)은 그대로 작게 둔다 — 둘 다 커지면 무엇이 이름인지 흐려진다. */
/*  ★ h2.fcname 으로 적어야 한다 (실측: .fcname 만으로는 안 커졌다).
    바로 위에 h2.t{font-size:15.5px} 가 있는데 그쪽이 **더 구체적**이라
    나중에 적어도 이긴다 — 자리(순서)가 아니라 구체성이 이긴다. */
h2.fcname{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--lamp)}
h2.fcname .muted{font-size:12px;font-weight:400}

/*  ★ 출항 제한 (풍랑주의보·경보) — 막대와 안내. 2026-08-10 지정. */
.fc i.lim{background:var(--sonar);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sonar-ink) 60%,transparent)}
.fc i.lim.alert{background:var(--sonar-hot)}
.fc i.n.lim{background:color-mix(in srgb, var(--sonar) 45%, #C9D9DE)}
.fc i.n.lim.alert{background:color-mix(in srgb, var(--sonar-hot) 45%, #C9D9DE)}
/*  ★ 금어기 날 (2026-08-24 지시) — 색만으로 알리지 않는다. 막대가 흐려지고
    빗금이 지며, title 에 「금어기 …(잡을 수 없는 날)」 이 함께 붙는다.
    출항 제한(.lim)과 **겹칠 수 있다** — 둘은 다른 사실이라 표시도 따로 남긴다. */
.fc i.closed{opacity:.45;background-image:repeating-linear-gradient(
  45deg, rgba(0,0,0,.28) 0 2px, transparent 2px 5px)}
.fcseason{margin:10px 0 0;padding:9px 11px;border:1px solid var(--line);
  border-left:3px solid var(--sonar);border-radius:8px;background:var(--hull);
  font-size:12.5px;line-height:1.6}
.fcseason b{color:var(--sonar)}
.fcseason .sub{display:block;color:var(--dim);font-size:11.5px}
.fcseason.shut{border-left-color:var(--sonar-hot)}
.fcseason.shut b{color:var(--sonar-hot)}
.fclim{margin:9px 0 0;padding:9px 10px;border-radius:9px;font-size:11.5px;line-height:1.6;
  background:color-mix(in srgb, var(--sonar) 12%, var(--hull));
  border:1px solid color-mix(in srgb, var(--sonar) 38%, var(--line));color:var(--ink)}
.fclim.alert{background:color-mix(in srgb, var(--sonar-hot) 12%, var(--hull));
  border-color:color-mix(in srgb, var(--sonar-hot) 40%, var(--line))}
.fclim .sub{display:block;margin-top:3px;font-size:10.5px;color:var(--ink-soft)}

/*  ══ 실시간 남은 자리 (2026-08-15) ═══════════════════════════════════
    ★ 예측 막대 **바로 아래**다(2026-08-14 지정) — 「언제 잘 잡히나」 다음
      물음이 「그날 자리가 있나」 다.
    ★ 데스크톱(layout/_forecast.php)과 **같은 말·같은 차례**를 쓴다.
      정원 → 요약 → 편 목록 → 기준 시각. 폰이라고 다른 이름을 쓰면
      같은 것이 화면마다 달라 보인다.
    ★ 폰에서는 한 편이 **두 줄**이다 — 날짜·시각·자리 수를 한 줄에 넣으면
      360px 에서 어종이 잘린다. */
.bkh2{display:flex;align-items:baseline;gap:8px}
.bkh2 .muted{flex:1 1 auto;font-size:11.5px;font-weight:400;margin:0}
/*  ★ 여는 단추 — 제목 줄 **맨 오른쪽**(2026-08-15 지정). 누르면 그때 수집한다. */
.bktog{flex:0 0 auto;min-height:0;padding:4px 12px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:var(--hull);color:var(--ink);
  font:inherit;font-size:11.5px;font-weight:700}
.bktog[aria-expanded="true"]{background:var(--line);color:var(--dim)}
.bktog:disabled{opacity:.6;cursor:progress}
.bkcap{margin:10px 0 6px;font-size:12.5px;color:var(--ink)}
.bkcap b{font-family:var(--mono)}
.bkcap .alt{display:block;margin-top:2px;font-size:11px;color:var(--ink-soft)}
.bksum{margin:0 0 7px;font-size:12px;color:var(--ink-soft);line-height:1.65}
.bksum b{color:var(--ink);font-family:var(--mono)}
.bklist{max-height:230px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;
  background:var(--hull)}
/*  ★ 칸 자리를 **못박는다**(grid-area). 자동 배치에 맡기면 안 된다 —
    자리 수 알약에 grid-row 만 주고 열을 비워 뒀더니, 행이 정해진 항목이
    먼저 놓이는 규칙 때문에 알약이 **1열(날짜 자리)로 가고 날짜가 오른쪽으로
    밀렸다**(2026-08-15 실측). 날짜가 왼쪽, 자리 수가 오른쪽이다. */
.bkrow{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px 10px;
  border-bottom:1px solid var(--line)}
.bkrow:last-child{border-bottom:0}
.bkrow .dt{grid-area:1/1;font-family:var(--mono);font-size:12px;color:var(--ink)}
.bkrow .dt i{font-style:normal;margin-left:3px;font-size:11px;color:var(--dim)}
.bkrow .dt i.we{color:var(--sonar-ink)}
.bkrow .tm{margin-left:6px;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.bkrow .sp{grid-area:2/1;font-size:11px;color:var(--ink-soft);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bkrow .sp b{color:var(--ink);font-weight:600}
.bkseat{grid-area:1/2/3/3;align-self:center;justify-self:end;padding:3px 9px;border-radius:99px;
  white-space:nowrap;font-family:var(--mono);font-size:11.5px;font-weight:700;
  background:color-mix(in srgb, var(--water) 14%, transparent);
  color:color-mix(in srgb, var(--water) 55%, var(--ink))}
/*  빈자리 알림 단추 — 마감 줄에서만 뜬다. 대기 중이면 채운 모양. (2026-08-16) */
.vabell{margin-left:6px;padding:1.5px 8px;border-radius:99px;border:1px solid var(--line);
  background:var(--hull,#FBFDFD);font-size:10.5px;color:var(--ink-soft);cursor:pointer}
.vabell.on{background:var(--sonar,#F0A038);border-color:transparent;
  color:var(--on-sonar,#141E26);font-weight:700}
.vabell:disabled{opacity:.5}
.vanote{margin:6px 2px 0;font-size:11.5px;color:var(--ink-soft)}
.varow{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.varow .h{flex:1 1 100%}
.varow .m{flex:1 1 auto;font-size:11px;color:var(--dim)}
.varow .mini{flex:0 0 auto}
.bkseat.few{background:color-mix(in srgb, var(--sonar-hot) 13%, transparent);
  color:color-mix(in srgb, var(--sonar-hot) 62%, var(--ink))}
/*  ★ 자리가 없는 것과 **모르는 것**은 옷이 다르다 — 같으면 '0자리' 로 읽힌다. */
.bkseat.off{background:var(--hull-2,#EDF3F4);color:var(--ink-soft);
  font-family:var(--ui);font-weight:600;font-size:11px}
.bkseat.unk{background:none;border:1px dashed var(--line);color:var(--dim);
  font-family:var(--ui);font-weight:600;font-size:11px}
.bkfoot{margin:7px 0 0;font-size:10.5px;color:var(--ink-soft);line-height:1.7}
.bkfoot b{color:var(--ink)}
.bkfoot a{color:var(--water);font-weight:600}

/*  (출항 제한 .tidelimit 은 service/_tide_css.php 로 옮겼다 — 데스크톱 /tides 와 공용) */

/*  ══ 2주 물때 그래프 · 이날을 권합니다 (2026-08-10 지정) ═══════════════
    데스크톱과 **같은 규칙**을 쓴다 — 기준선 실선, 날짜 점선, 출항 제한 띠.
    ★ 폰이라 판을 낮게 잡는다(94px) — 여기서 읽는 것은 값이 아니라 흐름이다. */
.fcchart{position:relative;margin-top:6px}
.fcchart svg{width:100%;height:94px;display:block;overflow:visible}
.fcchart .ln{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.fcchart .s1{stroke:var(--water)} .fcchart .s2{stroke:var(--sonar-hot)}
.fcchart .s3{stroke:var(--sonar-ink)} .fcchart .s4{stroke:var(--dim)}
.fcchart .axis{stroke:var(--ink-soft);stroke-width:2;vector-effect:non-scaling-stroke;opacity:.85}
.fcchart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3;
  vector-effect:non-scaling-stroke;opacity:.62}
/*  ★ 추정 구간 — 점선 (2026-08-22 지정). 예보가 없어 '가장 최근 같은 물때'
    로 되짚은 값이다. 색은 같게 두고 **선의 결만** 바꾼다 — 다른 색을 주면
    다섯 번째 계열로 읽힌다. */
.fcchart .ln.est{stroke-dasharray:3 2.4;opacity:.9}
/*  ★ 곡선 고르기 (2026-10-01 지시: "전체 사이트에서 조과 예측에서 유속,수온,바람,파고 에 대하여 클릭을 하면 해당
    그래프가 도드라지게 해") — 이름표가 단추다. 누른 곡선은 굵고 진하게, 나머지는 흐리게. 다시 누르면 풀린다. */
.fclegend button.fcsb{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:3px;
  padding:0 4px;margin:0 -4px;border-radius:5px;border:1px solid transparent;line-height:1.35}   /* 상자를 작게(2026-10-01 지시) */
.fclegend button.fcsb:hover{background:rgba(127,127,127,.08)}
.fclegend button.fcsb:focus-visible{outline:2px solid var(--water,#2E7D91);outline-offset:1px}
.fclegend button.fcsb[aria-pressed="true"]{border-color:var(--line,#C9D6DA);background:rgba(127,127,127,.06);font-weight:700}
.fcchart.fcsel .fclegend button.fcsb:not([aria-pressed="true"]){opacity:.5}
.fcchart .ln{transition:opacity .2s ease,stroke-width .2s ease}
.fcchart.fcsel .ln{opacity:.14}
.fcchart.fcsel .ln.on{opacity:1;stroke-width:2.8}
/*  곡선 옮김(fcMorph, 2026-10-01) — 옮기는 동안 진짜 새 곡선은 숨기고 사본(.fcmv)만 보인다. */
.fcchart.fcmorph .ln.on{opacity:0!important}
.fcchart.fcmvend .ln,.fcchart.fcmvend .fcvals{transition:none!important;animation:none!important}
.fcchart .ln.fcmv{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;transition:none}
.fcchart.fcsel .ln.est.on{opacity:.95}
@media (prefers-reduced-motion:reduce){ .fcchart .ln{transition:none} }

/*  추정 근거 한 줄 */
.fcest{margin:8px 0 0;font-size:11.5px;line-height:1.65;color:var(--ink-soft)}
.fcest b{color:var(--ink)}
.fcest .sub{display:block;color:var(--dim);font-size:11px}
.fcchart .cut{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.fcchart .lim{fill:var(--sonar);opacity:.13}
.fcchart .lim.alert{fill:var(--sonar-hot);opacity:.18}
/*  ★ 축·눈금 (2026-08-16 운영자 지시 — 데스크톱과 같은 규칙).
    Y축 라벨 몫으로 판 왼쪽에 홈을 낸다 — svg·날짜·범례가 함께 밀려 정렬이 산다. */
.fcchart{padding-left:22px}
.fcchart .grid.gh{opacity:.4}
.fcchart .fcyaxis{position:absolute;left:0;top:0;width:18px;height:94px}
.fcchart .fcyaxis span{position:absolute;right:2px;transform:translateY(-50%);
  font-family:var(--mono);font-size:8px;color:var(--dim)}
/*  날짜별 조과 예측 — 등급 자(왼쪽)와 바닥선. 막대(.fc)·날짜(.fcx)를 .fcg 로
    묶어 같은 홈을 파야 눈금·막대·날짜의 세로줄이 맞는다. */
.fcg{position:relative;padding-left:20px}
.fcg .fc{border-left:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft)}
.fcg .fcgy{position:absolute;left:0;top:10px;width:16px;height:82px}
.fcg .fcgy b{position:absolute;right:3px;transform:translateY(50%);
  font-family:var(--mono);font-size:8px;font-weight:400;color:var(--dim)}
.fcg .fcgy .cap{position:absolute;right:1px;top:calc(100% + 4px);
  font-size:8px;color:var(--dim)}
.fclegend{display:flex;gap:5px 12px;flex-wrap:wrap;margin-top:7px;font-size:10.5px;
  color:var(--ink-soft)}
.fclegend i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:4px;
  vertical-align:middle}
.fclegend .s1 i{background:var(--water)} .fclegend .s2 i{background:var(--sonar-hot)}
.fclegend .s3 i{background:var(--sonar-ink)} .fclegend .s4 i{background:var(--dim)}
.fclegend .cutlb{color:var(--dim)}
/*  이날을 권합니다 */
.fcstory{margin-top:16px;padding:11px 12px;border-radius:11px;background:var(--hull-2);
  border:1px solid var(--line)}
.fcstory .pick{margin:0 0 6px;font-size:15px;font-weight:800;color:var(--lamp)}
.fcstory .pick .g{margin-left:7px;padding:2px 8px;border-radius:99px;font-size:11px;
  background:var(--sonar);color:var(--on-sonar);vertical-align:2px}
.fcstory .more{margin-top:10px}
.fctale{margin:9px 0 0;padding:9px 10px;border-radius:9px;background:var(--hull);
  border:1px solid var(--line);font-size:11.5px;line-height:1.6;color:var(--ink-soft)}
.fctale .tag{display:block;font-size:10px;color:var(--sonar-ink);font-weight:700;
  letter-spacing:.04em;margin-bottom:2px}
/*  ══ 시트에 편 조황글 (2026-09-01) ═══════════════════════════════════════
    ★ 낱장(/report/{id})의 CSS 는 그 페이지에만 있다. 낱장 HTML 만 가져다 넣으면
      글자·색·여백이 이 화면 기본값으로 떨어진다 — 그래서 낱장과 **같은 규칙**을
      통째로 두고, 폰 폭에 맞출 몇 줄만 아래에서 덮는다.
    ★ 두 자리에 같은 글이 있다 — 낱장은 Pages.php 의 reportCss(). 고칠 때 둘 다. */
.rp{max-width:860px;margin:0 auto;padding:18px var(--colgap,18px) 30px}
.rp .crumb{font-size:11.5px;color:var(--ink-soft);margin:0 0 10px}
.rp .crumb a{color:inherit}
.rp .place{font-size:12px;color:var(--ink-soft);margin:0 0 4px}
.rp h1{font-size:20px;line-height:1.45;margin:2px 0 10px}
.rp .who{font-size:13px;margin:0 0 12px}
.rp .sp{font-size:13px;color:var(--ink-soft);margin:0 0 12px}
.rp .env{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-soft);
  margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.rp .env b{color:var(--ink);font-weight:700}
.rp img.th{max-width:100%;border:1px solid var(--line);border-radius:10px;margin:0 0 8px}
.rp .body{font-size:14px;line-height:1.75;margin:0 0 14px;white-space:pre-wrap}
.rp .src{font-size:12px;color:var(--ink-soft)}
.rp .src a{color:inherit}
/*  선박 박스 — 이 글이 어느 배의 것인지 한 눈에. 없는 칸은 줄째로 빠진다. */
.rp .spec{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 14px}
.rp .spec h2{font-size:13px;font-weight:800;margin:0 0 8px;letter-spacing:-.01em}
.rp .spec h2 b{font-weight:800}
/*  조황글 시트의 항구·선박 기능 단추 줄(2026-09-29) — service/report.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-29 지시: "m.naksigo.com 조황글 시트의 단추도 작게 줄여줘") —
    데스크톱 첫 화면 오른쪽 칸(service/ask.php #detailBody)과 같은 값. 보이는 상자만 줄이고 누르는 넓이 44px 은
    .ptbtn::before 누름판이 그대로 지킨다. */
#sheetBody .rpacts .ptcall{gap:4px 5px;margin:4px 0 0}
#sheetBody .rpacts .ptbtn{padding:3px 7px;min-height:26px;font-size:12px;border-radius:7px;gap:3px}
#sheetBody .rpacts .lb{font-size:11.5px;min-width:0;margin-right:2px}
/*  배 이름 = 선박정보 링크 (2026-09-28, service/report.php) — 항구 링크(.rpport)처럼 밑줄로 눌리는 것임을 보인다 */
.rp .spec h2 b a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rp .spec h2 b a:hover{color:var(--accent,#0f6fd1)}
/*  ★ 「예약 ↗」·「홈페이지 ↗」 알약 — 데스크톱(ask.php)과 한 벌 (2026-09-16 지시). */
.rp .spec h2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.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 지시) */
/*  ★ 여섯 칸을 **한 줄에** 늘어놓는다 (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} }
#sheet .rp{padding:0;max-width:none}
#sheet .rp h1{font-size:16px;line-height:1.45;margin:2px 0 8px}
#sheet .rp .spec{padding:10px 12px}
#sheet .rp img.th{max-height:220px;object-fit:cover}
/*  ★ 목록 제목의 링크 — 늘 밑줄을 긋지 않는다(제목이 여럿이라 밑줄밭이 된다).
    손이 가면 그때 긋는다. 색은 제목 그대로다. */
.li .h a.rlink{color:inherit;text-decoration:none}
.li .h a.rlink:hover,.li .h a.rlink:focus-visible{text-decoration:underline}

/* ══ 칸 줄(SN) — 팝업 대신 오른쪽으로 넘기는 칸 (2026-10-01 지시, docs/mobile_stack_nav_plan_naksigo.md) ══════════
   ▣ ★ 「덮는 칸 줄」 — 뿌리(탭 화면)는 창 스크롤·아래붙임·바닥 붙박이 칸 그대로 두고, 앱바 아래 ~ 탭띠 위를 덮는 고정 줄을
     탭마다 하나 둔다. 줄의 첫 칸은 **투명한 빈 칸**(뿌리 자리) — 왼쪽으로 넘기면 그 너머로 밑의 뿌리가 그대로 보인다.
   ▣ 깊이 0 이면 줄을 감춘다(.on 이 없다). 칸이 열려 있는 동안 창 스크롤을 잠근다(html.snlock).
   ▣ z 34 — 붙박이 칸(묻는 칸·찾는 칸, z34)과 같고 문서 뒤에 놓여 그것을 덮는다. 탭띠(z35)는 늘 위. */
.snov{position:fixed;left:0;right:0;top:calc(52px + env(safe-area-inset-top));bottom:calc(57px + env(safe-area-inset-bottom));
  z-index:34;display:none}
.snov.on{display:block}
html.snlock,html.snlock body{overflow:hidden}
.snov .stk{height:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.snov .stk::-webkit-scrollbar{display:none}
.snov .pnl{flex:0 0 100%;min-width:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;
  scroll-snap-align:start;scroll-snap-stop:always;position:relative;background:var(--hull)}
.snov .pnl.ghost{background:transparent;pointer-events:none}
.snov .pnl.sub{box-shadow:-8px 0 18px rgba(10,29,37,.10)}
.snov .pnl > .pin{max-width:760px;margin:0 auto;padding:4px 13px calc(28px + env(safe-area-inset-bottom))}
.pnlh{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:4px;height:44px;padding:0 4px 0 0;
  background:var(--hull);border-bottom:1px solid var(--line)}
.pnlh .bk{flex:0 0 auto;min-width:44px;height:44px;border:0;background:none;color:var(--ink);font-size:24px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pnlh .bk:focus-visible{outline:2px solid var(--sonar);outline-offset:-4px}
.pnlh .t{flex:1 1 auto;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnlh .dots{flex:0 0 auto;display:flex;gap:4px;padding-right:8px}
.pnlh .dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.pnlh .dots i.on{background:var(--sonar)}
/* 시트에만 걸리던 글 모양을 칸에도 */
.snov .pnl .rp{padding:0;max-width:none}
.snov .pnl .rp h1{font-size:16px;line-height:1.45;margin:2px 0 8px}
.snov .pnl .rp .spec{padding:10px 12px}
.snov .pnl .rp img.th{max-height:220px;object-fit:cover}
.snov .pnl .rpacts .ptcall{gap:4px 5px;margin:4px 0 0}
.snov .pnl .rpacts .ptbtn{padding:3px 7px;min-height:26px;font-size:12px;border-radius:7px;gap:3px}
.snov .pnl .rpacts .lb{font-size:11.5px;min-width:0;margin-right:2px}
/* 찾기 상세는 칸 머리의 ‹ 가 닫기 몫 — 카드의 ✕ 는 걷는다 */
.snov .pnl .dx{display:none}
/* 공용 층을 칸 안에 눕힌다 — 공용 파일은 그대로, 여기서만 모양을 바꾼다(dev.onfishing.net 과 같은 규칙) */
.snov .pnl .inpnl{position:static!important;inset:auto!important;display:block!important;z-index:auto!important}
.snov .pnl .inpnl > .ptdim,.snov .pnl .inpnl > .btdim,.snov .pnl .inpnl > .vcdim,.snov .pnl .inpnl > .pdim,.snov .pnl .inpnl > .spdim{display:none!important}
.snov .pnl .inpnl .ptwin,.snov .pnl .inpnl .btwin,.snov .pnl .inpnl .vcwin,.snov .pnl .inpnl .pwin,.snov .pnl .inpnl .spwin{position:static!important;transform:none!important;
  left:auto!important;top:auto!important;width:auto!important;max-width:none!important;max-height:none!important;
  height:auto!important;overflow:visible!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  margin:0!important;padding:6px 0 0!important;background:transparent!important}
.snov .pnl .inpnl #ptBox,.snov .pnl .inpnl #btBox,.snov .pnl .inpnl #vcBox{max-height:none!important;overflow:visible!important}
.snov .pnl .inpnl .ptx,.snov .pnl .inpnl .btx,.snov .pnl .inpnl .vcx,.snov .pnl .inpnl .px,.snov .pnl .inpnl .spx{display:none!important}
/* ★ 사진 칸에서는 손가락을 브라우저에 돌려준다 — 좌우 넘김(뒤로)·두 손가락 확대(dev.onfishing 지시 9) */
.snov .pnl .inpnl .pbody{height:clamp(220px,calc(62dvh / var(--fs,1)),640px)!important;touch-action:auto!important;cursor:auto!important}
.snov .pnl dialog.inpnl{position:static!important;display:block;inset:auto;margin:0!important;padding:0!important;border:0!important;
  width:auto!important;max-width:none!important;max-height:none!important;height:auto!important;overflow:visible!important;
  background:transparent!important;color:inherit;box-shadow:none!important;transform:none!important;animation:none!important}
.snov .pnl dialog.inpnl::backdrop{display:none}
.snov .pnl dialog.inpnl .popx,.snov .pnl dialog.inpnl .svx,.snov .pnl dialog.inpnl > .pop-in > h2:first-child{display:none!important}
.snov .pnl dialog.inpnl > div,.snov .pnl dialog.inpnl .pop-in{max-height:none!important;overflow:visible!important;width:auto!important;
  max-width:none!important;padding:6px 0 0!important;border:0!important;box-shadow:none!important;background:transparent!important}
.snov .pnl dialog.inpnl .popfoot{display:none!important}   /* 「닫기」 단추도 ‹ 가 맡는다 */
/* 칸으로 가져온 쪽(/analysis 등)의 쪽 넘김 — 손가락 크기 단추(dev.onfishing 링크 점검 때 고친 것과 같다) */
.snov .pnl nav.pager{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 8px}
.snov .pnl nav.pager a,.snov .pnl nav.pager span{min-width:38px;height:38px;padding:0 8px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:9px;background:var(--hull);color:var(--ink);
  text-decoration:none;font-size:13px;box-sizing:border-box}
.snov .pnl nav.pager span.on{background:var(--ink);color:var(--hull);border-color:transparent;font-weight:700}
.snov .pnl .tw{overflow-x:auto}
/* 개체 칸 단추 줄 — 작게(2026-10-01, dev.onfishing 지시 「크기 축소」). 누름판은 ::before 로 40px 를 지킨다. */
.snov .pnl .pcall{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.snov .pnl .pcall .ptbtn{position:relative;padding:4px 10px;min-height:28px;font-size:12px;border-radius:7px}
.snov .pnl .pcall .ptbtn::before{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:40px}
/* 이름 칩(어종·항구·선사) — 작게(dev.onfishing 지시 「어종 박스를 줄여」) */
.snov .pnl .dl .ent,.snov .pnl .chips .chip,.snov .pnl .chip{position:relative;min-height:24px;padding:1px 9px;font-size:12.5px;border-radius:7px;margin:1px 0}
.snov .pnl .dl .ent::before,.snov .pnl .chip::before{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:36px}
/* ══ 질의결과·근거 — 펼친 채로, 조금 큰 접기/펼치기 단추 (2026-10-01 — dev.onfishing 지시 10) ══ */
.qfold > summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.qfold > summary::-webkit-details-marker{display:none}
.qfold > summary .qh{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.qfold > summary .qh .t,.qfold.srcfold > summary .t{font-size:15.5px;font-weight:700;letter-spacing:-.3px;color:var(--ink)}
.qfold.srcfold > summary .t{flex:1 1 auto;min-width:0}
.qfold > summary .tg{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--hull-2);color:var(--ink);font-size:13px;font-weight:700}
.qfold > summary:focus-visible .tg{outline:2px solid var(--sonar);outline-offset:2px}
.qfold > summary .tg .cl{display:none}
.qfold:not([open]) > summary .tg .op{display:none}
.qfold:not([open]) > summary .tg .cl{display:inline}
/* 조황사진 목록 칸 (2026-10-01 지시) — 사진은 칸 폭 그대로, 아래에 출처. 두 손가락 확대는 브라우저 몫. */
.snov .pnl .phli{margin:0 0 14px}
.snov .pnl .phli img{display:block;width:100%;height:auto;min-height:120px;border-radius:10px;border:1px solid var(--line);background:var(--hull-2)}
.snov .pnl .phli figcaption{margin-top:5px;font-size:11.5px;color:var(--dim);line-height:1.5;word-break:break-all}
.snov .pnl .phli figcaption .n{font-family:var(--mono);color:var(--ink-soft)}
.snov .pnl .phli figcaption b{color:var(--ink)}
.snov .pnl .phli figcaption a{color:var(--dim)}
/* 로그인 칸 — 로그인 쪽의 모양을 칸에 그대로(2026-10-01 지시) */
.snov .pnl .loginwrap{max-width:460px;margin:10px auto}
.snov .pnl .loginwrap h1{font-size:22px;margin:0 0 6px;color:var(--lamp)}
.snov .pnl .loginwrap .lead{color:var(--dim);font-size:14px;margin:0 0 18px}
.snov .pnl .bonus{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
  background:var(--bay);color:var(--on-bay-dim);font-size:13.5px;margin-bottom:16px}
.snov .pnl .bonus b{font-family:var(--mono);font-size:16px}
.snov .pnl .sso{display:flex;flex-direction:column;gap:9px}
.snov .pnl .sso a{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 14px;border-radius:11px;text-decoration:none;font-weight:700;
  font-size:15px;border:1px solid rgba(var(--sh),.18)}
.snov .pnl .sso a:hover{filter:brightness(.96)}
.snov .pnl .sso .mk{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;
  font-size:12px;font-weight:800;background:rgba(255,255,255,.22)}
.snov .pnl .sso .off{opacity:.45;pointer-events:none}
.snov .pnl .why{margin-top:18px;font-size:12.5px;color:var(--dim);line-height:1.7}
.snov .pnl .why b{color:var(--ink)}

/*  ══ 조과 예측 — 값 글자·확대 (2026-10-01 지시) ══ */
.fc i{position:relative}
.fc i > .fcv{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);padding-bottom:1px;
  font:700 9px/1 var(--mono);color:var(--ink);white-space:nowrap;pointer-events:none}
.fcscroll,.fcin{position:relative}
.fcvals{display:none;position:absolute;left:0;right:0;top:0;height:94px;pointer-events:none}
.fcvals b{position:absolute;transform:translate(-50%,-120%);font:700 9px/1 var(--mono);color:var(--ink);white-space:nowrap;
  text-shadow:0 0 2px var(--hull),0 0 2px var(--hull),0 0 2px var(--hull)}
.fcchart[data-fcsel="s1"] .fcvals.s1,.fcchart[data-fcsel="s2"] .fcvals.s2,
.fcchart[data-fcsel="s3"] .fcvals.s3,.fcchart[data-fcsel="s4"] .fcvals.s4{display:block}
.fcchart.fcmorph .fcvals{opacity:0}
.fcchart .fcvals b:first-child{transform:translate(-10%,-120%)}
.fcchart .fcvals b:last-child{transform:translate(-90%,-120%)}   /* 양 끝 값은 판 밖으로 안 나가게 안쪽으로 */
h2.fcname .fczbtn{position:relative;vertical-align:middle;margin-left:6px;width:24px;height:24px;border:1px solid var(--line);border-radius:6px;
  background:var(--hull);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
h2.fcname .fczbtn::before{content:'';position:absolute;inset:-10px}
h2.fcname .fczbtn svg{width:14px;height:14px}
h2.fcname .fczbtn:focus-visible{outline:2px solid var(--sonar);outline-offset:2px}
/*  ★ 굴림 껍데기는 늘 새 판(flow-root) — 확대 때만 판이 되면(overflow) 안쪽 여백이 겹치던 것이 풀려 막대가 눈금보다 아래로 밀렸다(실측).
    곡선 판은 위에 값 글자 자리(12px)를 늘 두고 왼쪽 자도 그만큼 내린다. */
.fcscroll{display:flow-root}
.fcchart .fcscroll{padding-top:12px}
.fcchart .fcyaxis{top:12px}
.fczoom .fcscroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin}
.fczoom .fcin{width:200%}
.fczoom .fcx{font-size:10.5px}
.fczoom .fcx span em.mul{font-size:10px}
.fczoom .fc i > .fcv,.fczoom .fcvals b{font-size:11.5px}
.fcchart .fcyaxis{z-index:2;background:linear-gradient(90deg,var(--hull) 70%,transparent)}
@media (prefers-reduced-motion:reduce){ .snov .stk{scroll-behavior:auto} }