:root{ /* ★ 바다 밑에서 올려다본 어두운 계기판을 **낮의 바다**로 뒤집었다 (2026-08-05 지정). 낚시꾼은 새벽에 배를 고르고 해 뜬 부두에서 다시 본다 — 직사광 아래에서 어두운 화면은 거울이 된다. 이름은 그대로 둔다(--hull 은 여전히 '박스 바탕'이다). 값만 뒤집으면 규칙 수백 줄을 건드리지 않고 화면 전체가 따라온다. */ --abyss:#FFFFFF; /* 가장 밝은 바닥 — 입력칸 안쪽 */ --hull:#FBFDFD; /* 박스 바탕 — 흰색에 가까운 연한 색 */ --hull-2:#EDF3F4; /* 눌리는 줄에 손이 갔을 때 */ --line:#D2E0E3; /* 테두리 */ /* ★ 질의 박스와 답변 박스는 쪽빛 (#D3E5EC — 2026-08-05 지정). 묻는 곳과 답이 오는 곳 — 이 화면에서 사람이 실제로 오가는 두 자리다. 머리띠의 쪽빛과 같은 물에서 나온 색이라 맨 위 띠와 이 두 칸이 이어진다. ★ 흰 박스보다 진해서 **곁말 글씨**(--dim #5F7C87)가 대비 2.9:1 로 떨어진다 — 작은 글씨에 필요한 4.5:1 에 못 미친다. 아래 '쪽빛 칸 안의 글자'에서 그 몇 곳만 남색으로 내려 잡는다(7.6:1). 본문(--ink)은 8.9:1 이라 그대로 둔다. */ --bay:#D3E5EC; /* 쪽빛 칸 위에서 곁말·자리표시글에 쓰는 어두운 남색 */ --on-bay-dim:#173A5C; /* 주황은 **채우는 색**으로만 쓴다(버튼·막대·점). 밝은 바탕 위에 같은 주황으로 글씨를 쓰면 흐려서 안 읽혀, 글자용 주황을 따로 둔다. */ --sonar:#F0A038; --sonar-ink:#A9640A; --sonar-hot:#CC4318; --water:#2E8090; /* 물빛 — 밝은 바탕에서 읽히게 한 단 내렸다 */ /* ★ 조과 예측의 파랑 — **테마가 갈아 끼우지 않는 한 색** (2026-08-13 지정: "'예측', '조과 예측 - N일치 보기(기간은 설정값)' 의 배경색은 #2088E6 으로 통일"). ▣ 왜 토큰으로 두나 — 이 파랑이 붙는 자리가 셋이다(순위 줄의 「예측」 알약 · 상세의 「조과 예측 — N일치 보기」(N은 설정값) · 「나」 관심선박 줄의 「조과 예측」). 값을 세 곳에 적으면 한 곳만 고쳐지고 나머지가 옛 색으로 남는다. ▣ ★ 테마마다 다시 정의하지 **않는다.** '예측으로 가는 문' 이라는 뜻을 색이 지고 있어, 테마를 바꿨다고 문 색이 달라지면 그 뜻이 끊긴다. 그래서 아래 테마 블록에 --fc 가 없다 — 빠뜨린 것이 아니다. ★ #2088E6 위의 글자는 흰색이다(대비 4.6:1). 검정을 얹으면 3.9:1 로 작은 글씨 기준(4.5:1)에 못 미친다. */ --fc:#2088E6; --on-fc:#FFFFFF; --ink:#12303A; --dim:#5F7C87; --lamp:#0A1D25; /* 설명 원고 본문 — 우리 데이터(표·목록)보다 한 단 물러나 보이게 --ink 와 --dim 사이에 둔다. 읽히되 앞으로 나서지 않는 밝기다. */ --ink-soft:#3E5C68; /* 박스 밖 글자색. 박스 안팎이 모두 밝아진 지금은 --ink 와 같아도 되지만, 제목은 본문보다 한 단 더 또렷해야 해서 --lamp 쪽으로 붙여 둔다. ★ 박스 밖에 있는 것은 제목 h1 하나뿐이다 — 부제(.sub)는 로그인 패널 안에 있고, 안내문(.note)도 제 배경을 갖고 있다. */ --ink-page:#0A1D25; /* ══ 테마가 갈아 끼우는 색 ══════════════════════════════════════════ 여기까지가 '기본 테마 = 여명'다. 아래 :root[data-theme] 블록은 **이 토큰들만** 다시 정의한다 — 규칙 수백 줄은 건드리지 않는다. ★ 그림자·음각은 색이 아니라 **밑색(r,g,b)** 으로 둔다. 진하기는 자리마다 다른데(.10 ~ .55) 색만 갈아 끼우면 되기 때문이다. 어두운 테마에서 검정 그림자를 쓰면 화면이 탁해져, 테마마다 제 바탕의 어두운 쪽을 준다. */ --sh:16,52,66; /* 그림자·음각의 어두운 밑색 */ --hl:255,255,255; /* 솟은 면·음각 홈이 받는 빛 */ --eng-light:#FFFFFF; /* 흰 카드 위 음각의 아래 빛줄 */ --sonar-rgb:240,160,56; /* 눌러볼 낱말에 겹칠하는 주황 */ --hot-rgb:255,106,61; --on-sonar:#141E26; /* 주황으로 채운 면 위의 글자 */ --btn-sh:90,55,5; /* 주황 버튼 안쪽 아랫면 그늘 */ --btn-hl:255,226,170; /* 주황 버튼 위 음각의 빛줄 */ /* 바다 배경 — 위에서 비친 햇빛 + 아래로 깊어지는 물 */ --page-hi:#F2FAFB; --page1:#E4F1F5; --page2:#D5E8EF; --page3:#C6DFE8; /* 머리띠 */ --strip1:#152C5B; --strip2:#1D4E93; --strip3:#2E6BB8; --strip-line:#0E2549; --tide-bar:#2E6BB8; /* 물살의 세기 막대 */ --on-strip:#F1F6FE; --on-strip-hi:#FFFFFF; --on-strip-dim:#B7CCEA; --on-strip-soft:#D5E4F8; --brand-accent:#FFCE7A; --strip-eng-dark:rgba(4,14,34,.88); --strip-eng-light:rgba(140,186,240,.70); --strip-eng-warm:rgba(60,28,2,.80); --strip-eng-warm-hl:rgba(255,214,140,.60); /* 묻는 칸 · 답 칸 */ --well:#CAE1EA; /* 글이 담기는 홈 */ --bay-line:#4E8799; --bay-rail:#0F3F4C; --bay-ph:#33587F; --bay-cite:#7A4405; /* 제목 옆면 네 칸 — 아래로 갈수록 어둡다 */ --h1a:#B4CDD6; --h1b:#A3BEC9; --h1c:#92AFBC; --h1d:#82A0AF; /* 곁것 */ --note-bg:#DDE1E3; --note-ink:#4A5257; --del-ink:#9BB0B8; --warn-ink:#8A3512; --mono:"D2Coding",Consolas,"SFMono-Regular",ui-monospace,monospace; --ui:"Malgun Gothic","Apple SD Gothic Neo","Segoe UI",-apple-system,sans-serif; /* ── 간격 토큰 ────────────────────────────────────────── 좌·가운데·우 칸이 제각각 값을 쓰다가 오른쪽만 좁아 보였다. 세 칸이 **같은 토큰**을 쓰게 해서 눈으로 재지 않아도 맞게 한다. */ --pad:16px; /* 카드 안쪽 여백 — 세 칸 공통 */ --gap:14px; /* 카드 사이 */ --colgap:20px; /* 칸 사이 */ --sidew:320px; /* 좌·우 칸 폭 — **같아야 한다** */ --r:10px; /* 카드 모서리 */ --r-sm:8px; /* 버튼·입력 */ } /* ══════════ 테마 ══════════════════════════════════════════════════════ ▣ 왜 이 넷인가 — 바다를 보는 **시간**이다 낚시꾼은 하루에 이 화면을 여러 번, 아주 다른 빛 아래에서 본다. 새벽 세시 방을 어둡게 하고 배를 고르고, 해 뜬 부두에서 다시 확인하고, 돌아오는 길 노을에 조황을 적는다. 테마는 취향이 아니라 **그 시간**이다. 여명(기본) · 새벽 · 노을 · 해도 · 백파 ▣ 토큰만 갈아 끼운다 규칙은 한 줄도 건드리지 않는다. 그래서 새 화면을 만들어도 테마가 저절로 따라온다 — 색을 직접 적지 말고 토큰을 쓰면 된다. ▣ 그림자 밑색(--sh)을 테마마다 다시 준다 어두운 테마에서 밝은 테마의 그림자색을 그대로 쓰면 화면이 뿌옇다. 제 바탕의 가장 어두운 쪽을 밑색으로 줘야 그늘이 맑다. */ /* ── 새벽 — 해 뜨기 전. 방이 어둡고 눈이 부시면 안 된다 ───────────── */ :root[data-theme="dawn"]{ --abyss:#0A1620; --hull:#12212D; --hull-2:#1A2C3A; --line:#263E4E; --ink:#DCE9F0; --dim:#8CA5B4; --lamp:#F4FBFD; --ink-soft:#B0C6D3; --ink-page:#EAF4F9; --sonar:#F0A038; --sonar-ink:#F5B860; --sonar-hot:#FF7A4D; --water:#5FB3C6; --sh:0,8,16; --hl:170,205,230; --eng-light:rgba(150,190,220,.35); --on-sonar:#12212D; --page-hi:#16293A; --page1:#0E1B27; --page2:#0A151F; --page3:#060F17; --strip1:#050C16; --strip2:#0D2038; --strip3:#143154; --strip-line:#020710; --tide-bar:#4C86D8; /* 물살의 세기 막대 */ --on-strip:#DCEAF8; --on-strip-hi:#FFFFFF; --on-strip-dim:#7C9AB8; --on-strip-soft:#B3C9E0; --brand-accent:#FFC061; --strip-eng-dark:rgba(0,0,0,.92); --strip-eng-light:rgba(96,150,205,.52); --strip-eng-warm:rgba(45,20,0,.85); --strip-eng-warm-hl:rgba(255,198,110,.42); --bay:#152A3A; --well:#0F2130; --bay-line:#2E5B76; --bay-rail:#4FA3C0; --on-bay-dim:#9DBACC; --bay-ph:#5F86A0; --bay-cite:#E0A659; --h1a:#0B1A26; --h1b:#08151F; --h1c:#061119; --h1d:#040C12; --note-bg:#1C2730; --note-ink:#9FB0BC; --del-ink:#5A7484; --warn-ink:#FFB59A; } /* ── 노을 — 돌아오는 길. 하늘이 붉고 물이 금빛이다 ─────────────────── */ :root[data-theme="dusk"]{ --abyss:#FFFDFB; --hull:#FFF9F4; --hull-2:#F7EAE0; --line:#E8D2C2; --ink:#3A2118; --dim:#8A6553; --lamp:#2A1610; --ink-soft:#61402F; --ink-page:#2A1610; --sonar:#EE7B3C; --sonar-ink:#A33F0C; --sonar-hot:#C2321B; --water:#9A5A2E; --sh:74,30,12; --hl:255,252,246; --eng-light:#FFFFFF; --sonar-rgb:238,123,60; --hot-rgb:194,50,27; --on-sonar:#2A1610; --btn-sh:110,40,10; --btn-hl:255,222,190; --page-hi:#FFF6E8; --page1:#FDE9D3; --page2:#F8D2B4; --page3:#EFB894; --strip1:#5B1F22; --strip2:#9C3A22; --strip3:#D46A2C; --strip-line:#3E1214; --tide-bar:#3E7FC4; /* 물살의 세기 막대 */ --on-strip:#FFF3E6; --on-strip-hi:#FFFFFF; --on-strip-dim:#E8BC9A; --on-strip-soft:#FBDCC2; --brand-accent:#FFD98A; --strip-eng-dark:rgba(38,8,4,.88); --strip-eng-light:rgba(246,168,118,.62); --strip-eng-warm:rgba(64,22,0,.80); --strip-eng-warm-hl:rgba(255,224,152,.58); --bay:#FBE3CE; --well:#F7D8BE; --bay-line:#C08154; --bay-rail:#7A3312; --on-bay-dim:#6B3418; --bay-ph:#9A6540; --bay-cite:#8A3A05; --h1a:#F0CBAA; --h1b:#E3B792; --h1c:#D3A27C; --h1d:#C08D68; --note-bg:#EFE3DA; --note-ink:#5C463B; --del-ink:#BFA292; --warn-ink:#93300F; } /* ── 해도 — 바다의 지도. 눈금과 등화 자홍 ───────────────────────── */ :root[data-theme="chart"]{ --abyss:#FFFFFF; --hull:#FBFDFC; --hull-2:#E4EFED; --line:#C3D6D6; --ink:#14333C; --dim:#5C7B84; --lamp:#0A2028; --ink-soft:#40626D; --ink-page:#0A2028; --sonar:#A93A80; --sonar-ink:#8E2A69; --sonar-hot:#C2185B; --water:#2E8FA0; --sh:20,51,60; --hl:255,255,255; --eng-light:#FFFFFF; --sonar-rgb:169,58,128; --hot-rgb:194,24,91; --on-sonar:#FFFFFF; --btn-sh:70,10,50; --btn-hl:245,200,228; /* ★ 판 바탕을 **해도의 옅은 청색**으로 바꾼다 (2026-08-13 지정: "화면 테마 중 해도의 배경색을 조정하고 버튼의 색상을 일치시켜 줘"). ▣ 무엇이 어긋나 있었나 — 이 테마는 **밝은 화면**인데(--abyss #FFFFFF) 「나」의 테마 고르는 단추만 짙은 남색(#0B1A26)이었다. 눌러 보기 전에는 어두운 테마인 줄 안다. 단추는 그 테마의 **미리보기**여야 한다. ▣ 왜 청색인가 — 이름이 '해도(海圖)' 다. 종이 해도는 물이 옅은 청색이고 뭍이 미색이다. 앞의 초록빛 회색(#F2F6F5)은 그 이름과 이어지지 않았다. ▣ 여명(#E4F1F5)과 어떻게 가르나 — 바탕만으로는 비슷하다. 이 테마를 가르는 것은 **자홍 강조색**(--sonar #A93A80)이라, 단추에서도 글자를 자홍으로 두어 그 차이가 먼저 보이게 했다. ★ 카드(--hull #FBFDFC)보다 판을 한 단 낮춰 카드가 저절로 떠오르게 한다 — 둘 다 흰색이면 경계가 선에만 걸린다(백파에 적어 둔 것과 같은 이유). */ --page-hi:#FFFFFF; --page1:#EFF5F9; --page2:#E2EEF5; --page3:#D4E5F0; --strip1:#0C2830; --strip2:#14333C; --strip3:#1E4A55; --strip-line:#061A20; --tide-bar:#2F6FA8; /* 물살의 세기 막대 */ --on-strip:#EAF3F2; --on-strip-hi:#FFFFFF; --on-strip-dim:#94AFB4; --on-strip-soft:#C7DAD9; --brand-accent:#E48CC0; --strip-eng-dark:rgba(0,8,12,.88); --strip-eng-light:rgba(126,168,178,.58); --strip-eng-warm:rgba(46,0,30,.80); --strip-eng-warm-hl:rgba(236,158,204,.52); --bay:#DEEBEA; --well:#D2E4E2; --bay-line:#7FA3A3; --bay-rail:#A93A80; --on-bay-dim:#28545E; --bay-ph:#6F8E95; --bay-cite:#8E2A69; --h1a:#CFDEDC; --h1b:#BCD0CD; --h1c:#A8C1BE; --h1d:#94B2AF; --note-bg:#E2E6E4; --note-ink:#4C5B5C; --del-ink:#9FB3B4; --warn-ink:#9C1F4E; } /* ── 백파(白波) — 부서지는 하얀 파도. **바탕이 흰색이다** (2026-08-06 지정) ── ▣ 왜 흰 바탕인가 기본 테마(여명)는 옅은 물빛 위에 흰 카드가 떠 있는 화면이다. 부두에서 해를 정면으로 받으면 그 옅은 물빛조차 빛나 보여 카드와의 경계가 녹는다. 백파는 바탕에서 물빛을 뺀다 — 파도가 부서진 자리처럼 희고, 남는 색은 머리띠 하나뿐이다. 다만 판(#F0F0F0)은 카드(#FFFFFF)보다 한 단 낮춰 **카드가 저절로 떠오르게** 한다. 둘 다 순백이면 경계가 선에만 걸린다. ▣ 그래서 --line 을 한 단 진하게 잡는다 바탕과 카드가 둘 다 흰색이면 카드를 알아보게 하는 것은 테두리와 그림자뿐이다. 기본(#D2E0E3)보다 진한 #D3DBE0 에 중성 회색 그늘(--sh)을 준다 — 물빛 그늘을 흰 바탕에 쓰면 파란 때가 낀 것처럼 보인다. ▣ 색을 가진 것은 여전히 박스뿐 묻는 칸·답 칸(--bay)만 아주 옅은 청회색으로 남긴다. 이 두 자리는 사람이 실제로 오가는 곳이라, 흰 바탕에서도 어디에 쓰고 어디서 읽는지 보여야 한다. ▣ 대비는 직사광 기준으로 올린다 곁말(--dim #5A6B75)이 흰 바탕에서 5.6:1, 묻는 칸 위에서도 5.2:1 이다. 물빛(--water)도 한 단 내려 잡아 5:1 을 넘긴다. */ :root[data-theme="whitecap"]{ --abyss:#FFFFFF; --hull:#FFFFFF; --hull-2:#EFF3F5; --line:#D3DBE0; --ink:#16232B; --dim:#5A6B75; --lamp:#0B141A; --ink-soft:#3C4C56; --ink-page:#0B141A; --sonar:#F0A038; --sonar-ink:#9A5A06; --sonar-hot:#C23C12; --water:#1F6E80; /* 그늘은 중성 회색 — 물빛 그늘(16,52,66)을 흰 바탕에 쓰면 파랗게 뜬다 */ --sh:24,36,44; --hl:255,255,255; --eng-light:#FFFFFF; --sonar-rgb:240,160,56; --hot-rgb:255,106,61; --on-sonar:#141E26; --btn-sh:90,55,5; --btn-hl:255,226,170; /* ★ 박스 **밖**은 #F0F0F0 (2026-08-06 지정) — 네 칸을 같은 값으로 둬서 body 의 두 겹 그라데이션이 통째로 한 색 판이 된다. ▣ 왜 순백이 아닌가 처음엔 네 칸을 모두 #FFFFFF 로 뒀다. 그러면 바탕과 카드(--hull #FFFFFF)가 **같은 색**이라 카드가 어디서 시작하는지 선과 그늘로만 알 수 있었다. 한 단만 내려 두면 카드가 저절로 떠오른다 — 흰 것이 주인이라는 뜻은 그대로 두면서(카드가 순백) 판만 뒤로 물린다. */ --page-hi:#F0F0F0; --page1:#F0F0F0; --page2:#F0F0F0; --page3:#F0F0F0; --strip1:#12345B; --strip2:#1B4E8C; --strip3:#2C6AB3; --strip-line:#0C2340; --tide-bar:#1B62C4; /* 물살의 세기 막대 */ --on-strip:#F2F6FD; --on-strip-hi:#FFFFFF; --on-strip-dim:#B4C8E6; --on-strip-soft:#D3E2F7; --brand-accent:#FFCE7A; --strip-eng-dark:rgba(3,12,30,.88); --strip-eng-light:rgba(130,180,238,.70); --strip-eng-warm:rgba(60,28,2,.80); --strip-eng-warm-hl:rgba(255,214,140,.60); --bay:#EDF3F6; --well:#E3EBEF; --bay-line:#9DB3BD; --bay-rail:#1F6E80; --on-bay-dim:#33454F; --bay-ph:#6C808B; --bay-cite:#8A4E05; --h1a:#D8DEE2; --h1b:#C7CFD4; --h1c:#B5BFC6; --h1d:#A3AFB8; --note-bg:#F0F2F3; --note-ink:#4A5257; --del-ink:#A8B2B8; --warn-ink:#A3300F; } *{box-sizing:border-box} html,body{margin:0;padding:0} /* ★ **스크롤 막대 자리를 늘 비워 둔다** (2026-09-24 지시: "각 메뉴 클릭시 우측의 스크롤 바 생성 유무에 따라 화면이 움직이는데 … 일정하게 출력되도록"). ▣ 무엇이 문제였나 — 화면마다 길이가 다르다. 긴 화면(항구정보)에는 막대가 서고 짧은 화면(물때정보)에는 안 선다. 그 막대 폭(15px)만큼 본문 폭이 달라져, 차림표를 누를 때마다 화면이 **좌우로 덜컥** 움직였다. ▣ `scrollbar-gutter:stable` 은 막대가 없어도 그 자리를 비워 둔다 — 폭이 늘 같으니 움직이지 않는다. 막대를 억지로 띄우는 것이 아니다. ▣ 이 속성을 모르는 브라우저(사파리 18 아래)는 **늘 막대를 띄워** 같은 결과를 만든다 — 그 자리를 비워 두는 다른 길이 없다. ▣ 폰은 막대가 화면 위에 겹쳐 뜨는(overlay) 쪽이라 애초에 자리를 안 먹는다 — 이 규칙이 있어도 달라지는 것이 없다. */ html{scrollbar-gutter:stable} @supports not (scrollbar-gutter:stable){ html{overflow-y:scroll} } body{ /* ★ 바다 느낌 배경 (2026-08-05 지정) 박스는 옅은 흰색이라 그 뒤가 물이면 종이가 물 위에 뜬 것처럼 보인다. 두 겹으로 만든다 — ① 위에서 비치는 햇빛(radial) — 수면이 가장 밝은 자리 ② 아래로 갈수록 깊어지는 물빛(linear) — 얕은 물 → 깊은 물 ★ 조용해야 한다. 배경이 세면 박스 안의 표와 숫자가 묻힌다. 그래서 가장 깊은 곳도 #C6DFE8 에서 멈춘다 — 물빛이지 물감이 아니다. ★ background-attachment:fixed — 스크롤해도 물이 따라 흐르지 않는다. 같이 움직이면 긴 답변에서 배경만 눈에 밟힌다. ★ 색을 가진 것은 여전히 **박스뿐**이라는 규칙은 그대로다. 머리띠·카드· 패널은 옅은 --hull, 묻는 칸과 답 칸만 연한 쪽빛(--bay)이다. */ background: radial-gradient(120% 70% at 50% -10%, var(--page-hi) 0%, transparent 60%), linear-gradient(180deg, var(--page1) 0%, var(--page2) 45%, var(--page3) 100%); background-attachment:fixed; color:var(--ink); font-family:var(--ui); font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; } a{color:var(--sonar-ink)} ::selection{background:var(--sonar);color:var(--on-sonar)} :focus-visible{outline:2px solid var(--sonar);outline-offset:2px} /* ── 껍데기 ──────────────────────────────────────────────────────────── ★ 묻고 답하는 화면(ask.php)과 **같은 색·같은 테마**를 쓴다. 다른 껍데기를 새로 지으면 한 서비스가 두 서비스처럼 보인다. */ .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(12px,3vw,22px)} /* ★ **머리띠 안쪽만** 첫 화면과 같은 치수로 (2026-09-24 지시: "맨 상단 메뉴 위치가 이동하는데 이것 또한 항상 고정되도록 해"). ▣ 무엇이 문제였나 — 첫 화면(service/ask.php)의 머리띠 안쪽은 `.strip-in` (max-width 1420 · 좌우 20px)이고, 나머지 화면은 이 `.wrap`(1180 · 22px)이다. 그래서 차림표를 누를 때마다 로고가 23px ↔ 145px 로, 첫 메뉴가 142px ↔ 287px 로 **좌우로 덜컥** 옮겨 앉았다(실측). ▣ 어느 쪽에 맞추나 — **넓은 쪽**이다. 띠는 창 끝까지 이어지는 막대라 그 안의 글이 창 가장자리 가까이 서는 것이 자연스럽고, 가장 많이 들어오는 첫 화면이 한 자리도 안 움직인다(그 화면의 본문도 1420이다). ▣ **본문은 그대로 1180** 이다 — 이 규칙은 머리띠 안쪽에만 건다. */ .strip > .wrap{max-width:1420px;padding-left:20px;padding-right:20px} /* ★ 머리띠는 **조황정보 화면과 같아야 한다** (2026-08-09 지정). 화면을 옮길 때마다 맨 위가 흰 띠 ↔ 쪽빛 띠로 바뀌면 딴 사이트로 넘어온 것처럼 보인다. 같은 색·같은 글자·같은 자리로 맞춘다. ★ 문서 제목()은 **화면마다 다르게 둔다** — 그것이 검색결과에 뜨는 줄이라 전부 같게 만들면 검색에서 손해다. 눈에 보이는 머리띠와 문서 제목은 다른 것이다. */ .strip{position:sticky;top:0;z-index:20; background:linear-gradient(100deg,var(--strip1) 0%,var(--strip2) 55%,var(--strip3) 100%); border-bottom:1px solid var(--strip-line); box-shadow:0 2px 10px rgba(var(--sh),.18)} /* ★ 사이 띄움도 첫 화면과 같은 16px (2026-09-24) — 로고 칸 너비(min-width)와 이 값이 함께 **첫 메뉴가 서는 자리**를 정한다. 둘 중 하나만 맞추면 여전히 어긋난다. */ .strip .wrap{display:flex;align-items:center;gap:16px;min-height:52px; flex-wrap:nowrap} .brand{font-family:var(--ui);font-size:19px;font-weight:400;letter-spacing:-.01em; color:var(--on-strip);text-decoration:none;white-space:nowrap;flex:0 0 auto} /* ★ 로고 칸을 **못 박는다** (2026-09-24 지시: 맨 위 메뉴가 화면마다 옮겨 앉지 않도록). 첫 화면의 로고는 모노 13.5px(104px), 여기 로고는 고딕 19px(128px)라 글자 폭이 달라 **첫 메뉴가 142px ↔ 165px 로 흔들렸다**(실측). 글꼴을 한쪽으로 통일하면 두 화면 중 하나의 생김새가 바뀐다 — 생김새는 그대로 두고 **칸 너비만** 같게 잡는다. 좁은 폭에서는 아래 미디어 규칙이 푼다. */ .strip .brand{min-width:128px} .brand b{font-weight:800;color:var(--brand-accent)} /* 차림표 — 좁아지면 **가로로 굴린다**. 접어 넣는 햄버거보다 낫다: 칸이 여섯뿐이고, 낚시꾼은 한 손으로 화면을 넘긴다. */ .nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0; flex:1 1 auto;-webkit-overflow-scrolling:touch} .nav::-webkit-scrollbar{display:none} .nav a{flex:0 0 auto;display:block;padding:6px 10px;border-radius:7px;white-space:nowrap; color:var(--on-strip-soft);text-decoration:none;font-size:13px;font-weight:700} .nav a:hover{background:rgba(255,255,255,.12);color:var(--on-strip)} /* ★ 지금 보고 있는 칸은 **흰 글씨**다(2026-08-09 지정) — 진한 쪽빛 위에서 가장 밝게 선다. 밑줄과 옅은 바탕까지 함께 둬서 색을 못 보는 사람도 갈린다. */ /* ★ 회원 전용 칸(관심선박)은 로그인 전에는 **한 단 물러난다**. 감추지 않는 이유 — 있는 줄 알아야 로그인할 마음이 든다. */ .nav a.off{opacity:.55} .nav a.off::after{content:'·';margin-left:4px;opacity:.8} .nav a.on{color:var(--on-strip-hi);background:rgba(255,255,255,.14); box-shadow:inset 0 -2.5px 0 var(--brand-accent)} main{padding:clamp(14px,2.4vw,24px) 0 40px} /* 길잡이 — 지금 어디에 있나. 검색으로 바로 들어온 사람에게 특히 필요하다. */ .crumb{display:flex;gap:6px;align-items:center;flex-wrap:wrap; font-size:12.5px;color:var(--dim);margin-bottom:10px} .crumb a{color:var(--dim);text-decoration:none} .crumb a:hover{color:var(--sonar-ink);text-decoration:underline} .crumb i{font-style:normal;opacity:.5} .card{background:var(--hull);border:1px solid var(--line);border-radius:12px; padding:clamp(13px,2vw,18px);margin-bottom:14px; box-shadow:0 1px 0 rgba(var(--hl),.7), 0 2px 12px rgba(var(--sh),.07)} /* ★ 낱장의 맨 위 제목은 **h1 로 적는다**(2026-09-23, 구글 SEO 시작 가이드) — 검색 로봇은 h1 로 「이 쪽이 무엇인가」를 읽는다. 모양은 h2 와 **똑같이** 둔다: 화면은 하나도 바뀌지 않고 글의 층만 바로 선다. */ .card h2,.card h1{margin:0 0 10px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--lamp); display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .card h2 .meta,.card h1 .meta{font-size:11.5px;font-weight:400;color:var(--dim); font-family:var(--mono)} .card h3{margin:16px 0 8px;font-size:13.5px;color:var(--ink)} .card h3:first-child{margin-top:0} .muted{color:var(--dim)} .mono{font-family:var(--mono)} /* ★ 한글은 **낱말 가운데서 끊지 않는다** (2026-08-28). 기본값은 CJK 를 아무 자리에서나 접어, 좁은 폰에서 「사업자등록번/호」로 잘렸다(실측). keep-all 이면 띄어쓰기에서만 접힌다. */ .foot{border-top:1px solid var(--line);margin-top:24px;padding:16px 0 30px; font-size:12.5px;color:var(--dim);word-break:keep-all} .foot .pv{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;opacity:.85} .foot .pv:hover{opacity:1} /* ★ 바닥글 글자는 **한 크기**다 (2026-08-28 지시: "footer 의 글자 크기를 통일하고, 첫줄과 둘째줄 간격을 좁혀줘"). .biz 만 11px 로 작아 두 줄의 크기가 달랐다(실측 12px vs 11px) — 물려받게 두면 한 벌이 된다. 자리(제 줄을 차지)와 옅기는 그대로 둔다. */ .foot .biz{flex:1 0 100%;opacity:.75;line-height:1.6} /* ★ '자료는 수집 시점 기준…' 안내는 **한 단 작게** (2026-08-12 지정). 바닥글에서 가장 덜 급한 글인데 이용약관·개인정보와 같은 크기라 눈이 먼저 갔다. 지우지는 않는다 — 밝혀야 하는 말이다. */ /* ★ 2026-08-28 지시("footer 의 글자 크기를 통일")로 **걷었다.** 2026-08-12 에 이 안내만 한 단 작게 두었는데, 이제 바닥글은 한 크기다. 덜 급한 글이라는 표시는 크기가 아니라 **옅기**(색)가 이미 하고 있다. */ /* ★ 바닥글은 **가운데 정렬**이다 (2026-08-28 지시: "footer 를 중앙 정렬해"). ▣ 이 바닥글의 속은 **가로 flex** 라 `text-align` 만으로는 안 움직인다 — 칸을 미는 것은 justify-content 다. 접힌 뒤(둘째 줄)에도 가운데를 지키려고 text-align 을 함께 둔다(줄 안의 글자 몫). ▣ .biz 는 `flex:1 0 100%` 라 늘 제 줄이다 — 그 줄도 가운데로 온다. */ .foot .wrap{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center; justify-content:center;text-align:center} .foot a{color:var(--dim)} @media (max-width:560px){ .strip .wrap{gap:8px;min-height:48px} /* 좁은 폭에서는 로고 칸을 풀어 준다 — 메뉴가 먼저 자리를 차지해야 한다. */ .strip .brand{min-width:0} .brand{font-size:17px} .nav a{padding:6px 8px;font-size:12.5px} } /* 움직임을 줄여 달라는 설정을 존중한다 */ @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ── 회원 기능 — 좋아요 하트 · 관심선박 ──────────────────────────────── ★ 배가 나오는 자리마다 같은 모양이어야 한다. 목록·상세·답변 어디서 눌러도 같은 것이 같게 보여야 사람이 배운 것을 다시 안 배운다. ★ **단추처럼 보여야 한다.** 처음에는 회색 ♡ 하나만 뒀더니 무엇을 누르는 것인지 알 수 없었고 받은 수도 안 보였다(지적받음). 테두리를 주고, 넓은 자리에서는 이름까지 적고, 받은 수를 늘 옆에 둔다. */ .nkacts{display:inline-flex;gap:5px;margin-left:8px;vertical-align:middle} /* ★ 글자색은 --dim 이 아니라 --ink-soft 다. --dim 으로 뒀더니 밝은 테마 둘에서 대비가 기준(작은 글씨 4.5:1)에 못 미쳤다 — 여명 4.36 · 해도 4.45 (실측). 누르라고 만든 것이 흐리면 안 된다. */ .nkacts button{display:inline-flex;align-items:center;gap:4px;cursor:pointer; padding:3px 9px;border-radius:99px;line-height:1.5; border:1px solid var(--line);background:var(--hull);color:var(--ink-soft); font-family:var(--ui);font-size:12.5px;font-weight:700;white-space:nowrap} .nkacts button:hover{background:var(--hull-2);color:var(--ink);border-color:var(--water)} /* ── 하트·별에 입체를 준다 (2026-08-09 지정: "조황 등급 아이콘처럼") ──── ▣ 등급 칸과 **같은 말**을 쓴다 — 방향이 뜻이다 안 누른 것 = **파여 있다**(음각) : 위에 그늘, 아래에 빛줄 누른 것 = **도드라진다**(양각) : 위가 밝고 아래가 어둡고, 아래로 그림자 한 화면에서 두 벌의 입체 언어를 쓰면 둘 다 장식으로 읽힌다. 등급 칸이 이미 '올라온 것과 내려간 것'으로 말하고 있으므로 여기도 같게 한다. ▣ ★ 다만 등급 칸과 달리 **그림을 다시 그리지 않는다** 등급은 네모라서 CSS 로 그릴 수 있었지만 하트와 별은 모양 자체가 뜻이다. 글자(♡♥☆★)로 두고 **text-shadow 로만** 판다 — 이 화면의 상표·전광판이 쓰는 것과 같은 방법이다. ▣ ★ 빛은 위에서 온다 음각은 위가 어둡고 아래가 밝다. 양각은 그 반대다. 순서를 뒤집으면 눌린 것이 안 눌린 것처럼 보인다. ▣ ★ 색은 건드리지 않는다 진하기를 얻겠다고 글자색을 어둡게 하면 애써 맞춘 대비가 무너진다. 깊이는 **가장자리**가 만든다. */ .nkacts .ic{font-size:15px;line-height:1; text-shadow: /* ★ var() 하나가 못 풀리면 **선언 전체가 무효**가 된다 — 토큰을 안 가진 화면에서 하트·별의 입체가 통째로 사라진 적이 있다(onfishing.net 해도). 그래서 되돌아갈 값을 함께 적는다. */ /* ★ 더 깊게 판다 (2026-08-10 지정). 선 두 줄만으로는 '그어 놓은 금' 에 가까웠다. 홈은 **모서리(선)와 그 안쪽(번짐)** 두 겹으로 보인다 — 선은 경계를, 번짐은 깊이를 만든다. */ 0 -1px 0 rgba(var(--sh),.55), /* 윗입술 모서리 — 파인 쪽 */ 0 -2px 2px rgba(var(--sh),.30), /* 그 안쪽 그늘 — 깊이 */ 0 1px 0 var(--eng-light,rgba(255,255,255,.60)), /* 아랫입술 빛줄 */ 0 2px 2px color-mix(in srgb, var(--eng-light,#fff) 45%, transparent); } /* 누른 것 — 솟는다. 위아래가 정확히 뒤집히고 아래로 그림자가 진다. */ .nkacts .nklike.on .ic, .nkacts .nkfav.on .ic{ /* ★ 아래 그늘을 회색(--sh)으로 뒀더니 붉은 하트 밑에 **잿빛 얼룩**이 앉아 둘이 다른 재질로 보였다. 제 색을 옅게 깐다(currentColor) — 하트는 붉은 그늘을, 별은 주황 그늘을 진다. 이 저장소가 h1 에서 쓰는 규칙과 같다 ("그늘 색은 검정이 아니라 바탕의 색을 어둡게 한 것"). */ /* ★ 윗면 빛을 순백(rgba(255,255,255,.60))으로 뒀더니 **어두운 테마에서 번쩍였다** — 솟은 것이 아니라 발광하는 것으로 보였다(실측: 새벽 테마). --eng-light 는 테마마다 값이 다르다(밝은 곳은 흰색, 어두운 곳은 옅은 푸른빛 35%). 이 화면의 다른 음각·양각이 모두 쓰는 값이라 결도 맞는다. */ /* ★ 더 솟게 한다 (2026-08-10 지정) — 빛 두 겹, 그늘 세 겹. 멀어질수록 옅고 넓게 편다(1px 선 → 2px 번짐 → 5px 그림자). 그림자가 한 겹뿐이면 '붙어 있는 것', 세 겹이면 '떠 있는 것' 으로 읽힌다. */ text-shadow: 0 -1px 0 var(--eng-light,rgba(255,255,255,.60)), 0 -2px 2px color-mix(in srgb, var(--eng-light,#fff) 50%, transparent), 0 1px 0 color-mix(in srgb, currentColor 55%, transparent), 0 2px 2px color-mix(in srgb, currentColor 38%, transparent), 0 4px 6px color-mix(in srgb, currentColor 22%, transparent); } .nkacts .cnt{font-family:var(--mono);font-weight:400;color:var(--ink-soft)} /* ★ 이름표(좋아요·관심선박·내 관심선박)만 **2px 작게** 한다 (2026-08-09 지정). 하트·별 그림과 숫자는 그대로 둔다 — 눈이 먼저 잡는 것은 그림과 숫자이고, 이름표는 그것이 무엇인지 알려 주는 곁말이라 한 단 물러나도 된다. */ .nkacts .lb{font-size:10.5px} .nkacts .cnt{font-size:12.5px} /* ★ 채워진 하트가 눈에 띄어야 한다. 빈 하트가 진하면 이미 누른 줄 안다. ★ 눌린 색은 **한 단 내려** 쓴다. 주황(--sonar-hot/--sonar-ink)을 그대로 썼더니 옅은 주황 바탕 위에서 대비가 4.32·4.19 로 기준(4.5:1)에 못 미쳤다 (여명 테마, 실측). 잉크 쪽으로 22% 섞어 색은 지키고 진하기만 얻는다. */ .nkacts .nklike.on{color:color-mix(in srgb, var(--sonar-hot) 78%, var(--lamp)); border-color:var(--sonar-hot); background:rgba(var(--hot-rgb),.07)} .nkacts .nklike.on .cnt{color:color-mix(in srgb, var(--sonar-hot) 78%, var(--lamp))} .nkacts .nklike.has .cnt{color:var(--ink)} .nkacts .nkfav.on{color:color-mix(in srgb, var(--sonar-ink) 78%, var(--lamp)); border-color:var(--sonar); background:rgba(var(--sonar-rgb),.10)} .nkacts .nkfav.on .cnt{color:color-mix(in srgb, var(--sonar-ink) 78%, var(--lamp))} .nkacts .nkfav.has .cnt{color:var(--ink)} /* ★ 링크 모양 (2026-08-09 지정) — 순위표와 항구의 낚시배 목록에서 쓴다. 알약 단추는 배 상세처럼 **한 자리에 하나** 있을 때 알맞다. 줄마다 두 개씩 여덟 줄이면 알약 열여섯이 화면을 뒤덮어, 정작 배 이름이 안 읽힌다. 글자 링크로 낮추고 크기도 한 단 줄인다 — 누를 수 있다는 것만 알면 된다. ★ 배 상세(data-boat-wide)는 지정대로 알약을 그대로 쓴다. */ .nkacts.link{gap:8px;margin-left:8px} .nkacts.link button{border:0;background:none;padding:0;border-radius:0; font-size:11.5px;font-weight:600;color:var(--water); text-decoration:none;border-bottom:1px dotted transparent} .nkacts.link button:hover{background:none;border-bottom-color:currentColor; color:var(--sonar-ink)} /* ★ 링크 모양에서는 글자가 12.5px 로 작다 — 같은 두께로 파면 획이 메워져 하트가 동그라미로 뭉갠다. 그늘만 한 겹, 빛줄은 반만 준다. */ /* ★ 작은 자리(목록 안)도 한 단 깊게 (2026-08-10 지정). 다만 큰 것보다 **한 겹 덜** 쓴다 — 13px 글자에 세 겹을 얹으면 획이 뭉개진다. */ .nkacts.link .ic{font-size:13px; text-shadow:0 -1px 0 rgba(var(--sh),.46), 0 -2px 1.5px rgba(var(--sh),.22), 0 1px 0 var(--eng-light,rgba(255,255,255,.55))} .nkacts.link .nklike.on .ic, .nkacts.link .nkfav.on .ic{ text-shadow:0 -1px 0 var(--eng-light,rgba(255,255,255,.60)), 0 1px 0 color-mix(in srgb, currentColor 48%, transparent), 0 2px 3px color-mix(in srgb, currentColor 30%, transparent)} .nkacts.link .cnt{font-size:11px;color:inherit;opacity:.85} /* ★ 하트·별 그림(SVG)의 크기 — 폰 갈래(아래 isHost 블록)·첫 화면(ask.php)에만 있어 데스크톱 낱장(항구·선사·배)에서는 그림이 0×0 이었다(2026-09-17 실측: 항구 화면 타일의 아이콘이 안 보이고 수만 보였다). 껍데기 공통에 둔다. */ .nkacts .ic{width:16px;height:16px;vertical-align:-3px;display:inline-block} .nkacts.link .ic{width:14px;height:14px;vertical-align:-2.5px} .nkacts.link .nklike.on{background:none;border:0;color:var(--sonar-hot)} .nkacts.link .nkfav.on{background:none;border:0;color:var(--sonar-ink)} .nkfavtag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px; font-size:11px;font-weight:700;vertical-align:middle; background:var(--sonar);color:var(--on-sonar)} .is-fav{outline:1px solid var(--sonar);outline-offset:2px;border-radius:8px} @media (max-width:560px){ .nkacts{gap:4px;margin-left:6px} .nkacts button{padding:3px 7px;font-size:12px} .nkacts .lb{display:none} } #nktoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px); background:var(--lamp);color:#fff;padding:9px 16px;border-radius:99px; font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s; z-index:60;box-shadow:0 6px 22px rgba(var(--sh),.30);max-width:92vw;text-align:center} #nktoast.on{opacity:1;transform:translate(-50%,0)} /* 머리띠 오른쪽 — 로그인 / 내 정보. 조황정보 화면의 .stripme 와 같은 모양이다. */ .nkme{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap; font-size:12.5px;font-weight:700;color:var(--on-strip);text-decoration:none; padding:5px 11px;border-radius:99px; border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.10)} .nkme:hover{background:rgba(255,255,255,.20);color:var(--on-strip-hi)} .nkme .tk{font-family:var(--mono);color:var(--brand-accent)} @media (max-width:560px){ .nkme{padding:4px 9px;font-size:12px} } /* ══ 「조과 분석」 부르는 단추 — 배 낱장(/boat/{이름}) ═══════════════════════ 2026-09-05 지시(전수 점검): *"naksigo.com·m.naksigo.com 배 낱장에는 「조과 예측」만 있고 「조과 분석」이 없다 — onfishing·fishlog 의 같은 자리에는 있다."* ▣ ★ **기하는 「조과 예측」(.fcbtn)과 한 벌**이다 — 같은 34px 높이·같은 9px 모서리·같은 13px 굵은 글자. 나란히 서는 두 단추의 크기가 다르면 그것이 어긋난 것이다(layout/_forecast.php 의 .fcbtn 을 그대로 잰 값). ▣ ★ **색만 갈랐다.** 예측은 채운 호박(--sonar), 분석은 **테두리만 있는 조용한 단추**다 — 이 저장소가 네 사이트에서 지켜 온 규율 그대로다 (onfishing.net 은 `.linkbtn`, fishlog.kr 은 `.btfl`, fishtoday.kr 은 `.btft`). 분석은 이미 들어온 15일치를 **읽으러** 가는 것이고, 예측은 이 서비스가 권하는 다음 걸음이라 한 단 앞에 선다. ▣ ★ 아이콘 크기는 손잡이 **한 벌 값**(--btbtn-ico:11px)을 따른다 — 그 값은 layout/_boattrend.php 가 정한다(네 화면이 나눠 쓴다). ▣ ★ 누르는 넓이 **44px** 은 `::before` 누름판이 지킨다(작업규칙 §4). 보이는 상자는 옆의 .fcbtn 과 나란한 34px 로 두고 표적만 넓힌다 — /favorites 의 작은 손잡이(.fcmini)가 쓰는 것과 같은 길이다. */ .btbtn{position:relative;display:inline-flex;align-items:center;gap:5px;cursor:pointer; padding:7px 13px;border-radius:9px;min-height:34px; border:1px solid var(--line);background:var(--hull);color:var(--ink); font-family:var(--ui);font-size:13px;font-weight:800} .btbtn::before{content:'';position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);height:var(--btbtn-tap,44px)} .btbtn:hover{background:var(--hull-2)} .btbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* ★ 그림 크기는 손잡이 **한 벌 값**(--btbtn-ico)이다 — 안 재면 브라우저 기본(100%)으로 부풀어 줄을 무너뜨린다. 값은 layout/_boattrend.php 가 정한다. ★ 「조과 예측」(.fcbtn)에는 그림이 없다 — 이 사이트의 다른 「조과 예측」도 글자만이라 여기만 붙이면 같은 단추가 두 모양이 된다. */ .fccall .rfcico{width:var(--btbtn-ico,11px);height:var(--btbtn-ico,11px);flex:0 0 auto} /* ★ 「내 관심선박」 표 — 목록·상세 어디서나 같은 모양(2026-08-11 지정). 조황정보 화면에만 옷이 있어, 게시판에서는 아무 꾸밈 없는 글자였다. */ /* ★ 바탕도 테두리도 두지 않는다 (2026-08-11 지정) — **누르는 것이 아니다.** 알약을 씌우면 옆의 「조과 예측」 단추와 같은 것으로 보여, 눌러 보고 아무 일이 없으면 고장으로 읽힌다. 별과 색만으로 충분히 눈에 걸린다. */ .nkfavtag{display:inline-flex;align-items:center;gap:3px;margin-left:6px; padding:0;border:0;background:none;line-height:1.5;white-space:nowrap; font-family:var(--ui);font-size:10.5px;font-weight:700;vertical-align:1px; color:var(--sonar-ink)} .nkfavtag .ic{font-size:9.5px;line-height:1} @media (max-width:560px){ .nkfavtag{padding:1px 5px;margin-left:4px} .nkfavtag .tx{display:none} } /* ── 상세 ───────────────────────────────────────────────────────────── 본문 + 곁칸. 좁아지면 곁칸이 **아래로** 내려간다 — 옆에 끼워 넣으면 본문 표가 눌려 숫자가 두 줄로 접힌다. */ .detail{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px; align-items:start} @media (max-width:820px){ .detail{grid-template-columns:minmax(0,1fr)} } /* 큰 숫자 — 이 화면에서 가장 먼저 읽혀야 하는 것 */ .big{display:flex;gap:22px;flex-wrap:wrap;margin:2px 0 14px} .big span{display:flex;align-items:baseline;gap:3px;font-size:13px;color:var(--dim)} .big b{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--water); line-height:1.1} .big i{font-style:normal;margin-left:6px} /* 이름:값 — 좁아지면 위아래로 접는다. 가로로 우겨 넣으면 주소가 다섯 줄이 된다. */ .kvs{margin:0} .kv{display:grid;grid-template-columns:82px minmax(0,1fr);gap:10px; padding:7px 0;border-top:1px solid var(--line)} .kv:first-child{border-top:0} .kv dt{color:var(--dim);font-size:13px} /* ★ 값 칸의 글자 (2026-09-17 지시 "항목명은 그대로, 값은 다시 폰트를 조정 · 링크를 확실하게"). 항목명(dt)은 그대로 두고 값(dd)만 — 본문 고딕 14.5px 반굵게 먹빛. 링크는 **물빛 굵게 + 밑줄(띄운 밑줄) + 꼬리표**로 '눌러지는 값'임을 한눈에: 바깥 사이트(http…)는 「↗」, 이 사이트 안(선사·항구·선적항)은 「›」, 전화는 「☎」. 칩(어종)은 제 옷 그대로. */ .kv dd{margin:0;word-break:break-word;font-family:var(--ui,inherit);font-size:14.5px;font-weight:500;color:var(--ink); line-height:1.5} .kv dd a:not(.chip):not(.btn):not(.fcmini){color:var(--water);font-weight:700;text-decoration:underline; text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--water) 45%,transparent)} .kv dd a:not(.chip):not(.btn):not(.fcmini):hover,.kv dd a:not(.chip):not(.btn):not(.fcmini):focus-visible{ color:var(--sonar-ink);text-decoration-color:currentColor} .kv dd a:not(.chip):not(.btn):not(.fcmini)::after{content:'›';margin-left:3px;font-weight:700;opacity:.7} .kv dd a[href^="http"]:not(.chip):not(.btn):not(.fcmini)::after{content:'↗';font-size:.85em;margin-left:4px} .kv dd a[href^="tel"]:not(.chip):not(.btn):not(.fcmini)::after{content:'☎' !important;font-size:.85em;margin-left:5px} @media (max-width:480px){ .kv{grid-template-columns:minmax(0,1fr);gap:1px} } .warn{color:var(--sonar-hot);font-size:12.5px} .src{font-size:12px;margin:6px 0 0} .chip{display:inline-block;padding:2px 9px;margin:2px 3px 2px 0;border-radius:99px; background:var(--hull-2);border:1px solid var(--line); color:var(--ink);text-decoration:none;font-size:13px} .chip:hover{background:var(--sonar);color:var(--on-sonar);border-color:var(--sonar)} /* ★ 못 여는 이름 — 링크처럼 보이면 안 된다 (2026-09-01 링크 점검). 선사의 항구 칸에는 사람이 적어 넣은 자유 글자가 섞인다(「적금리휴게소」). 항구 마스터에 없으면 눌러도 404 라, 아예 **눌리지 않는 모양**으로 둔다 — 글자는 남긴다(선사가 그렇게 적어 둔 사실이다). */ .chip.off{color:var(--ink-soft);border-style:dashed;cursor:default} .chip.off:hover{background:none;color:var(--ink-soft);border-color:var(--line)} /* 철 그림 — 달마다 얼마나 나오나 */ .months{display:flex;gap:4px;align-items:flex-end;overflow-x:auto;padding-bottom:2px} .mo{flex:1 1 0;min-width:26px;text-align:center} .mo .bar{height:74px;display:flex;align-items:flex-end; background:var(--hull-2);border-radius:4px;overflow:hidden} .mo .bar i{display:block;width:100%;background:var(--water);border-radius:4px 4px 0 0} .mo span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--dim); margin-top:3px} /* 조황이 한 건도 없는 달 — 이름표를 흐리게 해 **빈 달**임을 알린다 */ .mo.zero span{opacity:.45} .rank{margin:0;padding-left:20px} .rank li{padding:3px 0} .rank b{float:right;color:var(--dim);font-weight:400} .plain{list-style:none;margin:0;padding:0} .plain li{padding:5px 0;border-top:1px solid var(--line)} .plain li:first-child{border-top:0} /* ★ 곁칸 「이어서 보기」의 글자 (2026-09-17 지시 "글자색 및 폰트를 조정"). 여태는 링크 기본값(호박색·밑줄·모노 느낌)이라 본문과 따로 놀았다 — 본문 글꼴(고딕)에 먹빛, 밑줄 없이, 줄마다 화살표를 달아 '갈 수 있는 곳'임을 말한다. 호버·포커스에서만 물빛으로 든다. 「비응항」처럼 굵은 이름은 그대로 굵게. */ .side .card .plain li{padding:8px 0} .side .card .plain a{display:flex;align-items:center;gap:8px;font-family:var(--gothic,var(--ui,inherit)); font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none;line-height:1.45} .side .card .plain a::after{content:'→';margin-left:auto;color:var(--dim);font-weight:400;transition:transform .12s} .side .card .plain a:hover,.side .card .plain a:focus-visible{color:var(--water)} .side .card .plain a:hover::after{color:var(--water);transform:translateX(2px)} .side .card .plain a b{color:var(--sonar-ink);font-weight:800} /* 최근 조황 줄 — 제목 한 줄 + 그 밑 곁말 (2026-09-07). ★ 새 옷을 짓지 않는다: 틀은 .plain 그대로 쓰고 두 가지만 더한다. ① 제목은 **한 줄로 자르고 '…'** — 조황글 제목은 원문 그대로라 백 자가 넘는 것이 흔하다. 넉 줄로 접히면 목록이 아니라 문단으로 보인다. 전체 문장은 title 로 뜨고, 눌러 열면 낱장에 온전히 있다. ② 곁말은 작고 흐리게 — 배·항구·어종·날짜는 제목을 고르는 데 쓰는 곁가지지 읽을 글이 아니다. */ .rlist li a{display:block;color:var(--ink);text-decoration:none; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rlist li a:hover{text-decoration:underline} .rlist .rmeta{display:block;font-size:11.5px;color:var(--dim);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ★ 바다 값 줄은 **접힌다**(nowrap 이 아니다) — 다섯 값이라 좁은 폭에서 잘리면 뒤의 낚시지수가 늘 사라진다. 값 하나하나가 뜻이 있어 자를 수 없다. */ .rlist .renv{display:block;font-size:11px;color:var(--ink-soft);margin-top:1px} /* 항구 타일 — 지역 화면에서 한눈에 훑는다 */ .grid{display:grid;gap:8px; grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} .tile{display:block;padding:9px 11px;border:1px solid var(--line);border-radius:9px; background:var(--hull);text-decoration:none;color:var(--ink)} .tile:hover{border-color:var(--sonar);background:var(--hull-2)} .tile b{display:block;font-size:14px} .tile span{display:block;font-size:11.5px;color:var(--dim)} .tile em{display:block;font-style:normal;font-size:11.5px;color:var(--water); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ★ 하트·별은 링크 **밖**에 둔다. <a> 안에 <button> 을 넣으면 안 되고(중첩 금지), 넣으면 하트를 눌렀는데 배 화면으로 넘어간다. ★ 오른쪽 **위**에 얹어 봤다가 물렸다 — 단추에 바탕색이 있어 긴 배 이름을 덮었고(에이스 한스타호), 이름 쪽 자리를 112px 비우니 이번엔 '골드피싱/호' 처럼 두 줄로 접혔다(둘 다 실측). 230px 짜리 칸에서 가로를 나눠 쓸 방법이 없다. 그래서 **아래 줄로 내린다** — 이름은 칸을 다 쓰고 단추는 제 줄을 갖는다. ★ 테두리는 **감싸는 칸**이 갖는다. 안쪽 링크가 테두리를 가지면 단추가 그 밖으로 밀려나 딴 것처럼 보인다. */ .tilewrap{position:relative;display:flex;flex-direction:column; border:1px solid var(--line);border-radius:9px;background:var(--hull)} .tilewrap:hover{border-color:var(--sonar);background:var(--hull-2)} .tilewrap .tile{border:0;background:none;border-radius:0;flex:1;padding:0 11px 9px} .tilewrap .tile:hover{background:none;border:0} /* ★ 첫 줄 = 배 이름 + 하트·별 (2026-09-17 지시). 이름은 줄여 쓰고(ellipsis) 아이콘은 오른쪽에 붙는다. */ .tilewrap .tl1{display:flex;align-items:center;gap:6px;padding:9px 11px 2px} .tilewrap .tl1 .tname{flex:1 1 auto;min-width:0;text-decoration:none;color:inherit} .tilewrap .tl1 .tname b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tilewrap .tl1 .tname:hover b{color:var(--sonar)} .tilewrap .tl1 .nkslot{flex:0 0 auto} .tilewrap .tl1 .nkacts{margin:0;padding:0} /* ★ 목록에서는 **링크 모양**을 쓴다(2026-08-09 지정). 알약은 배 상세처럼 한 자리에 하나 있을 때 알맞고, 타일마다 둘씩 깔리면 화면이 알약 밭이 된다. */ .tilewrap > .nkacts{margin:0;padding:0 11px 9px;justify-content:flex-start} /* 슬롯이 없는 옛 타일용 */ .tilewrap .nkfavtag{margin:0 0 8px 11px;align-self:flex-start} .tilewrap.is-fav{outline:none;border-color:var(--sonar)} .guide p{color:var(--ink-soft);margin:.4em 0} /* ── 목록 ────────────────────────────────────────────────────────── */ .filter{display:flex;gap:8px;align-items:center;margin:4px 0 12px} .filter input{flex:1;min-width:0;padding:9px 12px;border-radius:9px; border:1px solid var(--line);background:var(--abyss);color:var(--ink); font-family:var(--ui);font-size:15px} .filter .cnt{font-family:var(--mono);font-size:12.5px;color:var(--dim); white-space:nowrap} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ★ 이름 목록은 **여러 단**으로. 한 단이면 707곳이 화면 열 번을 굴려야 끝난다. */ .names{list-style:none;margin:0;padding:0; columns:4 190px;column-gap:16px} .names li{break-inside:avoid;padding:3px 0} .names a{color:var(--ink);text-decoration:none;font-size:13.5px} .names a:hover{color:var(--sonar-ink);text-decoration:underline} .empty{margin-top:10px} /* ── 게시판 형식 목록 (2026-08-11 지정) ─────────────────────────────── ▣ 표로 짠다 — 칸이 여럿이고 **세로로 견주는** 화면이다. 카드로 늘어놓으면 '어느 항구가 배가 많나' 를 눈이 못 센다. ▣ ★ 숫자 칸은 오른쪽 정렬 · 고정폭 — 자릿수가 다른 수를 왼쪽에 맞추면 200 과 45 의 크기 차이가 안 보인다. ▣ ★ 좁아지면 **표만** 옆으로 구른다(본문은 안 밀린다 — 작업 규칙 4). */ .board .btable{overflow-x:auto;margin-top:10px;border:1px solid var(--line); border-radius:10px;background:var(--hull)} .board table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px} .board thead th{position:sticky;top:0;background:var(--hull-2);text-align:left; font-size:11.5px;font-weight:700;color:var(--dim);padding:8px 10px; border-bottom:1px solid var(--line);white-space:nowrap} .board thead th.r{text-align:right} .board tbody td{padding:9px 10px;border-top:1px solid var(--line);vertical-align:baseline} .board tbody tr:first-child td{border-top:0} .board tbody tr:hover{background:var(--hull-2)} .board td.no{width:52px;font-family:var(--mono);font-size:11.5px;color:var(--dim)} .board td.r{text-align:right;font-family:var(--mono);white-space:nowrap} .board td.r b{font-size:13.5px;color:var(--lamp)} .board td.mono{font-family:var(--mono);font-size:12px;color:var(--ink-soft);white-space:nowrap} .board td.nm a{font-weight:700;color:var(--ink);text-decoration:none; border-bottom:1px solid transparent} .board td.nm a:hover{color:var(--sonar-ink);border-bottom-color:currentColor} /* 주력 어종처럼 긴 글은 한 줄로 자른다 — 표의 높이가 줄마다 달라지면 못 센다. */ .board td.sp{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--ink-soft)} /* 지역 칸 — '전북 · 군산' 은 한 덩어리다. 좁다고 두 줄로 접히면 시(군)만 남은 줄이 생겨 어디인지 되레 헷갈린다. 표는 이미 제 안에서 가로로 민다. */ .board td.rg{white-space:nowrap;color:var(--ink-soft)} /* 빈 칸은 '—' 로 둔다. 비워 두면 표가 깨진 것처럼 보이고, 0 을 적으면 거짓이다. */ .board s{all:unset;color:var(--dim)} /* ★ Today 조황의 설명 줄은 .lead 다 — 조황글 한 건인 .src 와 이름이 겹치면 표 모양이 설명 줄까지 물고 들어간다. 두 이름을 따로 둔다. */ .board .src,.board .lead{margin:2px 0 0} /* 찾기 — 그냥 폼이다(자바스크립트가 없어도 된다) */ .bfind{display:flex;gap:6px;align-items:center;margin-top:10px;flex-wrap:wrap} .bfind input{flex:1 1 260px;min-width:0;padding:9px 11px;border:1px solid var(--line); border-radius:9px;background:var(--abyss);color:var(--ink);font-size:15px;font-family:var(--ui)} .bfind button{padding:9px 15px;border:0;border-radius:9px;background:var(--sonar); color:var(--on-sonar);font-weight:700;font-size:13px;cursor:pointer; box-shadow:inset 0 -2px 0 rgba(var(--btn-sh),.32)} .bfind .clear{font-size:12px;color:var(--dim)} /* ── 쪽 넘김 ───────────────────────────────────────────────────────── ★ 링크다. 자바스크립트가 없어도 넘어가고, 검색엔진도 안쪽 쪽까지 들어온다. */ .pager{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:14px; font-size:12.5px} .pager a,.pager span{display:inline-flex;align-items:center;justify-content:center; min-width:32px;height:32px;padding:0 9px;border-radius:8px;text-decoration:none; border:1px solid var(--line);color:var(--ink-soft);background:var(--hull)} .pager a:hover{border-color:var(--sonar);color:var(--sonar-ink)} .pager .pn.on{background:var(--sonar);border-color:var(--sonar);color:var(--on-sonar); font-weight:700} .pager .gap{border:0;background:none;min-width:18px;color:var(--dim)} .pager .pv.off{opacity:.42} .pager .of{margin-left:auto;border:0;background:none;color:var(--dim);font-family:var(--mono)} /* ── Today 조황 — 답변의 '근거' 와 같은 줄 모양을 쓴다 ────────────────── */ .today .srclist{margin-top:10px} .today .src{display:grid;grid-template-columns:38px minmax(0,1fr);gap:0 8px; padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--hull); margin-bottom:8px;position:relative} .today .src .n{font-family:var(--mono);font-size:11.5px;color:var(--sonar-ink)} .today .src .t{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)} /* ★ 제목 링크 — **글자는 그대로**다 (2026-09-24). 목록에서 파랗게 물들면 줄마다 링크 색이 먼저 눈에 들어와 제목이 안 읽힌다. 손을 올렸을 때만 밑줄로 "누를 수 있다"고 말한다(이 집안의 목록 링크와 같은 규칙). */ .today .src .t a{color:inherit;text-decoration:none} .today .src .t a:hover{text-decoration:underline;text-underline-offset:3px} .today .src .t a:focus-visible{outline:2px solid var(--sonar);outline-offset:2px;border-radius:3px} /* ★ 곁줄의 항구 이름 링크 (2026-09-24) — 제목 링크와 **같은 규칙**이다: 글자 색은 그대로, 손을 올렸을 때만 밑줄. 곁줄은 이미 흐린 글씨라 색까지 바꾸면 줄이 두 색으로 갈린다. */ .today .src .m a.pl{color:inherit;text-decoration:none} .today .src .m a.pl:hover{text-decoration:underline;text-underline-offset:3px;color:var(--sonar-ink)} .today .src .m a.pl:focus-visible{outline:2px solid var(--sonar);outline-offset:2px;border-radius:3px} .today .src .m{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:11.5px; color:var(--dim);font-family:var(--mono)} .today .src .orig{display:inline-block;margin-top:5px;font-size:11.5px;color:var(--water)} /* ── 조황지수 다섯 칸 (2026-09-02 지시: "원문보기 앞에 조황지수를 그래프로") ── ★ 모양은 근거 줄(ask.php `.boat .grade`)·fishnow(_row.php)와 **같은 것**이다. 칸 크기·둥근 정도·입체 방향까지 그대로 옮겼다 — 같은 등급이 화면마다 다르게 보이면 안 된다. 저쪽 규칙을 고치면 여기도 함께 본다. ★ 줄 높이가 흔들리지 않게 이 칸은 **등급이 없어도 늘 선다**(글자로). min-height 는 채운 칸의 키(13px)에 맞춘다. */ /* ★ 그래프와 「원문 보기」가 **한 줄**이다(2026-09-02 지시). 줄이 하나 줄어 카드가 짧아진다 — 열 줄짜리 목록에서 그만큼 더 보인다. 링크는 세로 여백을 그대로 두어 **누르는 높이**를 잃지 않는다. */ .today .src .gline{display:flex;align-items:center;gap:7px 12px;flex-wrap:wrap; margin-top:6px;min-height:15px;font-size:11.5px} .today .src .gline .orig{margin-top:0;padding:2px 0} .today .src .grade{display:inline-flex;gap:2px;flex:0 0 auto;white-space:nowrap; letter-spacing:0} /* 빈 칸 — 파인 홈(안쪽 위 그늘 + 아래 입술). 채운 칸과 **반대 방향**의 입체라, 흑백으로 찍어도 몇 칸이 찼는지 세어진다. */ .today .src .grade i{flex:0 0 auto;width:11px;height:13px;border-radius:2.5px; 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)} /* 채운 칸 — 솟은 칸(위가 밝고 아래가 어둡다). */ .today .src .grade 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)} .today .src .gk{color:var(--sonar-ink);font-weight:700} /* ★ 등급이 **없는** 줄 — 다섯 칸을 그리되 **모양을 달리한다** (2026-09-02 지시로 「조황지수 없음」 글자를 빈 그래프로 바꿈). ▣ 왜 다른 모양이어야 하나 — 낮은 등급(★1)의 빈 칸과 똑같이 그리면 「매길 기록이 부족한 글」이 **★0, 곧 최저보다 못한 글**로 읽힌다. 그 오해를 막는 것이 이 저장소의 오랜 규칙이다(grade.py: "근거 없는 별을 채우느니 빈 별이 정직하다"). ▣ 그래서 **점선 테두리에 바탕도 입체도 없는 틀**로 둔다 — 파인 홈(있는 등급의 빈 칸)과 눈에 확 갈리고, '아직 안 찍힌 자리'로 읽힌다. 사진 없는 칸(.th.none)을 점선으로 둔 것과 같은 결이다. ▣ 말은 그대로다 — title·aria-label 에 「매길 기록이 부족합니다」가 남는다. 그림만 비우고 뜻까지 비우지 않는다. */ .today .src .grade.none i{background:none;border:1px dashed var(--line); box-shadow:none;opacity:.85} .today .src.haspic{padding-right:96px} .today .src .th{position:absolute;right:12px;bottom:12px;width:70px;height:52px; object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--hull-2)} /* 사진이 없는 줄 — 같은 크기의 빈 칸. 그림이 있는 척하지 않고 그렇다고 적는다. ★ 점선으로 둔다. 실선이면 '그림이 안 열렸다' 로 읽힌다. */ .today .src .th.none{display:flex;align-items:center;justify-content:center; border-style:dashed;background:none;color:var(--dim);font-size:10.5px;letter-spacing:-.02em} @media (max-width:520px){ .today .src.haspic{padding-right:74px} .today .src .th{width:58px;height:44px;right:8px;bottom:10px} }