: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 는 함께 없앴다). */
/* ★ 「AI 답변」 제목 줄의 스피커·서랍 단추에 **상자를 두른다** (2026-08-24 지시:
"naksigo.com, m.naksigo.com 의 AI답변의 스피커 아이콘에 대하여 박스를 추가해").
▣ 공용 조각(_voice_css.php)은 2026-08-21 지시로 답변 자리의 단추에서만
상자를 걷어 두었다. 이 화면에서는 그 판단을 뒤집는다 — 지시가 데스크톱
주소까지 함께 가리켰다. 폰(mobile/app.php)은 제 자리에서 이미 두르고 있다.
▣ 옷은 **질의 줄의 마이크와 같은 것**을 쓴다 — 공용 조각의 기본값(테
--vc-line · 바탕 --vc-face · 모서리 10px)으로 되돌리기만 한다. 한 화면에
상자가 두 벌이면 같은 단추가 남처럼 보인다.
▣ 테 굵기는 본래 1px 그대로다(걷을 때도 색만 투명으로 두었다) — 상자가
서고 지워져도 단추 크기·글줄 높이는 움직이지 않는다.
▣ 표적(::after 44px)·초점 테두리·켜짐 색(aria-pressed)은 손대지 않는다.
▣ onfishing.net 데스크톱은 그대로 두었다 — 지시가 naksigo 두 주소만 댔다. */
/* ★ **상자만 한 단 줄인다 — 그림은 그대로** (2026-08-24 지시: "스피커 아이콘
및 설정 아이콘은 그대로 유지하고 박스는 조금 줄여줘"). 폰(m.naksigo)과 같은
값이다 — 상자 34 → 30px, 그림 19px.
▣ 공용 조각은 그림을 상자의 56% 로 그린다. 상자만 줄이면 그림도 17px 로
함께 줄어들어, 그림 크기를 **못박고** 줄어든 몫을 여백에서만 뺐다.
▣ 크기는 변수(--vc-btn)가 아니라 바로 적는다 — JS 가 붙일 때 그 변수를
낱장 style 로 박아 넣어(frame()) CSS 로는 덮이지 않는다.
▣ 누르는 자리는 44px 그대로다(::after 가 max(44px, 상자)를 깔아 둔다). */
#answerPanel h2 .vcwrap .vcbtn{
border-color:var(--vc-line);background:var(--vc-face);
width:30px;height:30px}
#answerPanel h2 .vcwrap .vcbtn svg{width:19px;height:19px}
#answerPanel h2 .vcwrap .vcbtn:hover:not(:disabled):not([aria-pressed="true"]){
border-color:var(--vc-accent);background:var(--vc-face);color:var(--vc-accent)}
/* ★ 눌린 상태(읽는 중)는 **여기서 다시 온전히** 그린다 (2026-08-24).
위 규칙이 #answerPanel(아이디)까지 안고 있어 공용 규칙의 눌린 모양을
배경째 덮는다 — 그러면 읽는 중인지가 화면에서 사라진다(폰에서는 흰 바탕에
흰 아이콘이 되어 아예 안 보였다). 상자를 세운 화면이 눌린 모양도 책임진다. */
#answerPanel h2 .vcwrap .vcbtn[aria-pressed="true"]{
background:var(--vc-accent);border-color:var(--vc-accent);color:#fff}
/* ── 계기 상단 띠 ───────────────────────────────────────── */
.strip{
position:sticky; top:0; z-index:20;
/* ★ 넓은 폭에서는 **한 줄을 지킨다**(nowrap).
wrap 이면 브라우저가 '줄이기'보다 '줄바꿈'을 먼저 골라, 가운데 띠가
680px 를 못 줄이고 통째로 아랫줄로 내려가 머리띠가 세 줄이 됐다.
nowrap 이면 띠가 남는 자리에 맞춰 줄어든다. 좁은 폭에서는 아래에서 다시 wrap. */
padding:0;
/* ★ 머리띠는 쪽빛 바다색 (2026-08-05 지정).
본문은 옅은 물빛 위에 흰 박스가 떠 있는 화면이라, 맨 위 한 줄만
진한 물색으로 두면 수면을 내려다보는 위치가 잡힌다.
쪽빛은 남색에 보랏기가 도는 우리 쪽물 색이다 — 어두운 끝을 남보라로,
밝은 끝을 트인 바다 파랑으로 흘려 한 색으로 칠한 띠보다 물처럼 보이게
했다. 이 화면에서 가장 진한 색은 여기 하나뿐이다. */
background:linear-gradient(100deg,var(--strip1) 0%,var(--strip2) 55%,var(--strip3) 100%);
border-bottom:1px solid var(--strip-line);
/* position:sticky 자체가 기준 상자(positioned)라, 가운데 띠의 절대배치가
이 머리띠를 기준으로 선다 — 따로 relative 를 더할 필요가 없다. */
}
/* ★ 양옆(브랜드·로그인)은 줄이지 않는다. 줄이면 그쪽이 먼저 두 줄로 접혀
머리띠가 두꺼워졌다(1100px 에서 75px). 줄어드는 몫은 가운데 띠가 다 진다. */
/* ★ 맨 위 타이틀은 한 단 진하게 (2026-08-05 지정).
밝은 머리띠 위에서 13px 고정폭 글씨는 자간까지 넓어 흐리게 보인다.
굵기(600)와 크기(13.5px)를 올리고 자간을 조금 좁혀 또렷하게 만든다 —
자간이 넓으면 글자 사이 흰 여백이 글씨를 옅어 보이게 한다. */
/* ★ 이제 다 (2026-08-09) — 링크 기본 밑줄·색을 걷어내고 상표 모양을
지킨다. 손가락 모양만 남겨 누를 수 있다는 것을 알린다. */
.brand{text-decoration:none;cursor:pointer;
font-family:var(--mono);font-size:13.5px;letter-spacing:.1em;
font-weight:600;color:var(--lamp);
flex:0 0 auto; white-space:nowrap;
/* ★ 로고 칸을 못 박는다 — 안쪽 화면(layout/shell.php)과 **같은 값**이라야
맨 위 메뉴가 화면을 옮겨도 그 자리에 선다(2026-09-24 지시). */
min-width:128px}
.brand b{color:var(--sonar-ink);font-weight:700}
.strip .sp{flex:1}
.linkish{background:none;border:0;color:var(--dim);font:inherit;cursor:pointer;
text-decoration:underline;text-underline-offset:3px;padding:0}
.linkish:hover{color:var(--sonar-ink)}
/* ── 쪽빛 머리띠 위의 글자 ──────────────────────────────────────────
머리띠만 진한 물색이 되었다. 본문용 글자색(--ink·--dim·--lamp)은 밝은
바탕을 전제로 어둡게 잡아 둔 값이라 여기서는 그대로 두면 안 보인다.
★ 토큰을 고치지 않고 **머리띠 안에서만** 덮어쓴다 — 토큰을 건드리면
본문 수백 줄이 같이 움직인다. 선택자를 한 단 올려(.strip .brand)
원래 규칙을 이긴다.
★ 흰색도 바탕의 기운을 조금 머금게 한다 — 쪽빛 위에 순백을 얹으면
글자만 오려 붙인 것처럼 뜬다. 푸른기를 살짝 섞어 띠에 앉힌다.
★ 브랜드의 주황(--sonar-ink)은 진한 바탕에서 탁해진다. 밝은 호박색으로
올려 브랜드 색은 지키되 읽히게 한다 — 쪽빛의 보색이라 가장 먼저 띈다. */
/* ★ 메인 타이틀도 음각 (2026-08-05 지정) — 쪽빛 판에 새긴 글씨다.
▣ 여기서는 **밝기를 뒤집어야** 한다
흰 카드 위의 이름표는 '위 어둡게 · 아래 희게'로 새겼다. 머리띠는
바탕이 진한 쪽빛이라 흰 선을 그으면 새긴 게 아니라 글자에 흰 테를
두른 것처럼 보인다. 판이 어두우면 —
위 : 판보다 **더 어두운** 남색 — 파고 들어간 벽의 그늘
아래: 판보다 **조금 밝은** 쪽빛 — 홈 가장자리가 받는 빛
둘 다 쪽빛 집안이라 글자가 판에서 떨어져 나오지 않는다.
▣ 아래 빛줄을 흰색으로 하지 않는 이유가 하나 더 있다
머리띠는 왼쪽이 어둡고 오른쪽이 밝은 그라데이션이다. 흰 선을 고정으로
깔면 어두운 왼쪽에서만 도드라져 브랜드가 한쪽만 빛나 보인다. */
/* ★ 더 깊게 판다 (2026-08-06 지정) — 한 줄짜리 음각은 '선을 그은 것'이었다.
▣ 홈에는 **벽과 바닥**이 있다
1px 선 하나로는 경계만 생기고 깊이가 없다. 위쪽에 또렷한 그늘(1px) 과
그 그늘이 판 위로 번지는 자리(2px·번짐 3px)를 겹치면 그제야 글자 위로
**벽이 서 있는** 것처럼 보인다. 아래쪽도 같은 방식으로 또렷한 빛줄(1px)
과 번지는 빛(2px·번짐 2px)을 겹쳐 홈의 아랫입술을 만든다.
▣ 진하기도 함께 올렸다(.55 → .88 / .70)
번짐이 들어가면 같은 알파라도 옅어 보인다. 테마 다섯 곳의 토큰을 모두
올렸다 — 색은 각 테마의 제 판에서 뽑은 것이라 그대로 두고 진하기만 뺐다.
▣ 글자색은 건드리지 않는다
더 깊어 보이라고 글자를 어둡게 하면 쪽빛 판 위에서 대비가 무너진다.
깊이는 **가장자리**가 만든다. */
.strip .brand{
color:var(--on-strip);
text-shadow:
0 -1px 0 var(--strip-eng-dark),
0 -2px 3px var(--strip-eng-dark),
0 1px 0 var(--strip-eng-light),
0 2px 2px var(--strip-eng-light);
}
.strip .brand b{
color:var(--brand-accent);
/* 주황 글자의 아랫줄은 밝은 주황이어야 같은 재질로 읽힌다 —
본문 버튼에서 쓴 것과 같은 규칙이다. */
text-shadow:
0 -1px 0 var(--strip-eng-warm),
0 -2px 3px var(--strip-eng-warm),
0 1px 0 var(--strip-eng-warm-hl),
0 2px 2px var(--strip-eng-warm-hl);
}
.strip .linkish{color:var(--on-strip-soft)}
.strip .linkish:hover{color:var(--brand-accent)}
/* ── 테마 고르개 ─────────────────────────────────────────────────────
머리띠 맨 오른쪽. 평소엔 아이콘 하나, 누르면 목록이 아래로 뜬다.
★ 목록을 늘 펼쳐 두지 않는다 — 테마는 한 번 고르면 끝인데, 늘 네 칸을
차지하면 좁은 화면에서 머리띠가 또 한 줄 늘어난다. */
.themepick{position:relative;flex:0 0 auto}
.themebtn{
background:transparent;border:1px solid var(--on-strip-dim);color:var(--on-strip);
width:28px;height:28px;border-radius:50%;font-size:14px;line-height:1;
display:grid;place-items:center;cursor:pointer;
transition:border-color .12s,color .12s,background .12s;
}
.themebtn:hover,.themebtn[aria-expanded="true"]{
border-color:var(--brand-accent);color:var(--brand-accent);
background:rgba(var(--hl),.10);
}
.thememenu{
position:absolute;right:0;top:calc(100% + 8px);z-index:50;
background:var(--hull);border:1px solid var(--line);border-radius:var(--r);
padding:6px;min-width:190px;
box-shadow:0 10px 28px -6px rgba(var(--sh),.35);
display:grid;gap:2px;
}
/* ── 설정 목록 (2026-08-11 지정) ─────────────────────────────────────
테마 목록과 **같은 틀**을 쓴다(같은 자리, 같은 몸짓). 다만 여기 있는 것은
고르는 것이 아니라 **켜고 끄는 것**이라 줄마다 체크박스를 세운다. */
.optmenu{min-width:210px;padding:6px}
.optmenu .opthd{margin:6px 8px 2px;font-size:11px;font-weight:700;
color:var(--dim);letter-spacing:.02em}
.optmenu .opthd:first-child{margin-top:2px}
.optmenu .sw{display:flex;align-items:center;gap:8px;margin:0;padding:7px 8px;
border-radius:8px;font-size:13px;color:var(--ink);cursor:pointer;line-height:1.3}
.optmenu .sw:hover{background:var(--hull-2)}
.optmenu .sw input{accent-color:var(--sonar);width:15px;height:15px;flex:0 0 auto}
/* ── 칸의 ✕ (2026-08-11 지정) ─────────────────────────────────────────
▣ 왜 두나 — 낚시꾼마다 보고 싶은 것이 다르다. 물때만 보는 사람도,
질의 예시를 이미 아는 사람도 있다. 접을 수 있어야 제 화면이 된다.
▣ ★ 접은 것은 **기억한다**(⚙ 설정과 같은 값). 새로고침하면 되살아나는
닫기는 닫은 것이 아니다.
▣ 제목 줄 오른쪽 끝. 음각(그늘 위·빛 아래)으로 이 화면의 말과 같게. */
/* ★ ✕ 는 **칸의 오른쪽 위 모서리**에 못박는다 (2026-08-11 지정).
제목 줄 안에 흘려 두었더니 제목 글자 바로 뒤에 붙어(제목이 짧으면 왼쪽에)
어느 칸을 닫는 단추인지 한눈에 안 왔다. 칸을 기준으로 자리를 잡으면
세 칸(질의 예시·내일의 물때·NaksiGO)이 **같은 자리**에 선다 —
한 번 익히면 어느 칸에서나 손이 같은 곳으로 간다. */
#exCard,#tideCard,#introCard{position:relative}
.cardx{position:absolute;top:8px;right:8px;z-index:2;
width:26px;height:26px;display:grid;place-items:center;
border:0;border-radius:8px;background:none;
color:var(--dim);font-size:12px;line-height:1;cursor:pointer;font-family:var(--ui)}
/* 제목이 ✕ 밑으로 파고들지 않게 자리를 비운다. */
#exCard > h3,#tideCard > h3,#intro > .kind{padding-right:30px}
.cardx:hover{background:var(--hull-2);color:var(--ink)}
.cardx:focus-visible{outline:2px solid var(--water);outline-offset:2px}
/* 시안 목록은 다 — 새 창으로 나가는 것이라 button 이 아니다.
생김새는 테마 목록과 같게 둔다(같은 자리, 같은 몸짓). */
/* ★ 테마 목록과 **같은 격자**를 쓴다(auto 1fr auto). flex 로 뒀더니 오른쪽의
'새 창'이 제 줄로 밀려 이름 위에 얹혔다 — 셋을 같은 칸에 맞춰야 한 줄이 된다. */
.thememenu a{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;
width:100%;text-align:left;background:none;border:0;color:var(--ink);
font-family:var(--ui);font-size:13px;padding:7px 8px;border-radius:var(--r-sm);
cursor:pointer;text-decoration:none}
.thememenu a:hover{background:var(--hull-2)}
.thememenu .swatch.mok{
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:10px;font-weight:700;color:var(--water);
background:var(--hull-2)}
/* ★ 같은 글자를 쓴 시안이 둘 이상일 때 그 줄에 표를 낸다.
색만 바꾸면 색을 못 보는 사람이 못 알아채므로 **테두리도** 준다.
옆의 곁말 자리에는 파일 이름이 나와 어느 것인지 가릴 수 있다. */
.thememenu .swatch.mok.dup{
color:var(--sonar-ink); background:rgba(240,160,56,.16);
box-shadow:inset 0 0 0 1px var(--sonar-ink)}
.thememenu button{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;
width:100%;text-align:left;background:none;border:0;color:var(--ink);
font-family:var(--ui);font-size:13px;padding:7px 8px;border-radius:var(--r-sm);
cursor:pointer;transition:background .12s;
}
.thememenu button:hover{background:var(--hull-2)}
/* ★ 이름만으로는 어떤 색인지 모른다. 그 테마의 **바다와 머리띠**를 한 알에
담아 보여 준다 — 위 절반이 머리띠, 아래 절반이 바다다. */
.thememenu .swatch{
width:18px;height:18px;border-radius:50%;border:1px solid var(--line);
flex:0 0 auto;
}
/* ★ margin 을 0 으로 되돌린다 — 이것이 어긋난 진짜 원인이었다.
아래쪽에 있는 전역 규칙 `.sub{margin:0 0 18px}`(로그인 패널 부제용)이
여기까지 걸려, 아래 여백 18px 때문에 칸 안에서 **한 줄 높이 떠 보였다**
(실측: 이름 중심 77px ↔ 이 글 68px). 테마 목록도 같은 증상이었다 —
한 줄 고치니 둘 다 맞는다. */
.thememenu .sub{font-family:var(--mono);font-size:10px;color:var(--dim);
margin:0;align-self:center;justify-self:end;white-space:nowrap}
.thememenu button[aria-checked="true"]{background:var(--hull-2);font-weight:700}
.thememenu button[aria-checked="true"] .sub{color:var(--sonar-ink)}
/* ── 본문 ──────────────────────────────────────────────── */
/* ── 3단 계기판 ──────────────────────────────────────────
왼쪽 = 조작(예시·지난 질문·설정) · 가운데 = 질의와 답변 · 오른쪽 = 상세.
배 조타실을 닮았다: 손잡이는 옆에, 보는 것은 앞에, 참고는 옆에.
▣ 좁아지면 한 단으로 접는다 (360px 에서 확인)
· 1180px 미만 — 오른쪽 칸이 **아래에서 올라오는 시트**가 된다.
상세는 항상 필요한 게 아니라 눌렀을 때만 필요하다.
· 900px 미만 — 왼쪽 칸도 접어 넣는다(상단 '도구' 토글).
가운데(질문·답변)는 어느 폭에서도 맨 위에 그대로 남는다. */
main{
/* 1420px 로 줄였다. 가운데 답변이 1,000px 가까이 늘어나면 한 줄이 너무 길어
눈이 다음 줄을 찾지 못한다 — 읽는 글은 폭이 좁아야 편하다. */
max-width:1420px; margin:0 auto; padding:20px var(--colgap) 96px;
display:grid; gap:var(--colgap);
/* 좌·우를 **같은 폭**으로 둔다. 246 vs 330 이던 때는 화면이 한쪽으로 기울어
보였고, 왼쪽 질문 목록이 좁아 두 줄로 접혔다. */
grid-template-columns:var(--sidew) minmax(0,1fr) var(--sidew);
align-items:start;
}
.col{min-width:0}
/* ★ overflow-y 만 주면 브라우저가 overflow-x 를 auto 로 계산해
**아래쪽에 가로 스크롤바가 생긴다**(세로 스크롤바가 폭을 먹어서 1~2px 넘친다).
x 를 명시로 막아야 사라진다. */
.col-l,.col-r{position:sticky; top:60px; max-height:calc(100vh - 76px);
overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
scrollbar-width:thin}
/* 스크롤바가 어두운 바탕에서 튀지 않게 */
.col-l::-webkit-scrollbar,.col-r::-webkit-scrollbar{width:8px}
.col-l::-webkit-scrollbar-thumb,.col-r::-webkit-scrollbar-thumb{
background:var(--line);border-radius:4px}
/* 좌·우 카드 — 같은 토큰을 쓴다. 여기가 어긋나면 화면이 기울어 보인다. */
.side{background:var(--hull);border:1px solid var(--line);border-radius:var(--r);
padding:var(--pad);margin:0 0 var(--gap);min-width:0}
/* 카드 안 어떤 글도 칸을 넘지 않는다 — 좁은 칸에서 가장 흔한 사고다 */
.side *{min-width:0}
.side:last-child{margin-bottom:0}
.side h3{font-size:11.5px;letter-spacing:.02em;color:var(--dim);
margin:0 0 10px;font-weight:600;display:flex;align-items:center;gap:8px}
/* ★ 한 줄로 자르고 넘치면 '…' — 접히게 두면 목록이 아니라 문단으로 보인다.
긴 예시가 두 줄이 되면 항목 경계가 흐려져 몇 개인지 세기 어렵다.
잘린 전체 문장은 title 로 뜨고, 눌러 보면 질문 칸에 온전히 들어간다. */
.side .row{display:block;width:100%;text-align:left;background:none;border:0;
color:var(--ink);font-family:var(--ui);font-size:13px;line-height:1.45;
padding:7px 8px;border-radius:var(--r-sm);cursor:pointer;
transition:background .12s;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .row:hover{background:var(--hull-2)}
.side .row+.row{margin-top:1px}
.side .muted{color:var(--dim);font-size:12px;margin:0}
.side label.sw{display:flex;align-items:center;gap:8px;font-size:13px;
padding:5px 0;cursor:pointer}
.side label.sw input{accent-color:var(--sonar-ink)}
/* ══════════ 배너 자리 둘 — 오른쪽 칸 「NaksiGO」 아래 (2026-09-03 지시) ═══
지시: "우측 섹션의 「NAKSIGO」 아래에 점선 박스로 2개의 배너 자리를 표시해"
▣ ★ **아직 배너가 없다.** 자리만 잡아 두는 것이라 카드(.side)로 만들지
않는다 — 바탕·테두리·그림자를 주면 '내용이 안 들어온 카드' 로 보인다.
이 저장소가 이미 쓰는 **빈자리의 결**을 그대로 쓴다: `1px dashed
var(--line)` (썸네일 없는 자리 `.li .th.nothumb`, 곡선 없는 날
`.nocurve`, 빈 좌석 `.bkseat.unk` 가 같은 선이다). 새 색을 짓지 않는다.
▣ ★ 비율은 **320×100**(3.2:1) — 오른쪽 칸 폭이 `--sidew:320px` 라
가로로 꽉 차면 그대로 320px 다. 320×100 은 흔한 띠배너 규격이라
실제 배너를 받아 끼울 때 자르거나 늘릴 일이 없다.
`aspect-ratio` 로 적어 두면 칸 폭이 바뀌어도 비율이 따라온다.
▣ ★ **누를 수 없다.** 링크도 버튼도 아니고 tabindex 도 없다 — 탭으로
짚어도 걸리지 않는다. 빈 자리에 포커스가 서면 키보드로 훑는 사람이
"여기 뭔가 있나" 하고 멈춘다.
▣ ★ `aria-hidden="true"` — 화면 낭독기가 "배너 자리, 배너 자리" 를
읽어 주면 그것만으로 방해다. 아직 아무 내용도 없다.
▣ 안에 옅은 글자를 둔다 — 점선 네모만 있으면 화면이 깨진 것으로 보인다.
▣ ★ 높이는 **반**으로 — 320×50 (2026-09-17 지시 "우측의 배너 자리의 높이를 반으로 축소해").
처음엔 320×100 이었다(2026-09-03). 비율만 바꿨으니 실제 배너를 받을 때 320×50 규격으로 끼운다. */
.adslots{display:grid;gap:var(--gap);margin:0 0 var(--gap)}
.adslot{border:1px dashed var(--line);border-radius:var(--r);
aspect-ratio:320/50;background:none;
display:flex;align-items:center;justify-content:center;
font-size:11.5px;letter-spacing:.04em;color:var(--dim);opacity:.6;
-webkit-user-select:none;user-select:none}
/* ══════════ 요즘 조황 — **서버가 그리는 글** (2026-09-07 지시 "첫 화면 내용도 늘려") ══
▣ 왜 이 자리인가 — 오른쪽 칸의 **맨 끝**이다.
· 1280px 에서 이 칸은 저 혼자 구르는 칸이라(.col-r{overflow-y:auto}),
맨 끝에 붙은 카드는 **처음 보이는 자리를 하나도 밀지 않는다**.
운영자가 오래 다듬은 화면의 짜임을 그대로 두려면 여기뿐이었다.
· 낱말을 눌러 상세(#detail)가 열릴 때도 상세보다 **아래**라 밀리지 않는다.
· 1180px 아래에서는 이 카드를 **가운데 칸 맨 아래**(#railSlot)로 옮긴다 —
그 폭에서 오른쪽 칸은 아래로 숨는 시트라, 두면 폰으로 온 사람은 한 번도
못 본다(까닭은 placeRail 의 같은 자리 주석). 위의 것은 그대로 두고
**빈 자리에 붙는** 것이라 짜임은 두 폭 모두 그대로다.
▣ ★ 「검색용으로만 숨긴 글」이 아니다. 다른 카드와 **같은 .side 옷**을 입고,
굴려 내리면 사람이 그대로 읽고 누른다. 감추는 규칙(hidden·display:none·
글자색 감추기)을 하나도 쓰지 않는다 — 그것은 구글이 가림글로 보는 짓이다.
▣ 새 색·새 치수를 짓지 않는다. 카드는 .side, 소제목은 .side h3 와 같은 값,
낱말표는 이 화면이 이미 쓰는 테두리·둥근모(--line·--r-sm)를 그대로 쓴다. */
.facts h4{font-size:11.5px;letter-spacing:.02em;color:var(--dim);
margin:14px 0 6px;font-weight:600}
.facts p.lead{font-size:12.5px;line-height:1.65;color:var(--dim);margin:0}
.facts ul{list-style:none;margin:0;padding:0}
.facts li{padding:5px 0;border-top:1px solid var(--line)}
.facts li:first-child{border-top:0;padding-top:0}
/* ★ 제목은 한 줄로 자르고 넘치면 '…' — 질의 예시(.side .row)와 같은 규칙이다.
조황글 제목은 원문 그대로라 길게는 백 자가 넘는다. 넉 줄로 접히면
목록이 아니라 문단으로 보인다. 전체 문장은 title 로 뜬다. */
.facts .ti{display:block;font-size:12.5px;line-height:1.45;color:var(--ink);
text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.facts .ti:hover{text-decoration:underline}
/* ★ 곁말 속 링크(항구·배·어종) — 글자 색은 그대로, 손을 올렸을 때만 밑줄.
곁말은 이미 흐린 글씨라 색까지 바꾸면 줄이 두 색으로 갈린다 (2026-09-24). */
.facts .m a.pl{color:inherit;text-decoration:none}
.facts .m a.pl:hover{color:var(--sonar-ink);text-decoration:underline;text-underline-offset:2px}
.facts .m a.pl:focus-visible{outline:2px solid var(--sonar);outline-offset:2px;border-radius:3px}
.facts .m{display:block;font-size:11px;color:var(--dim);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 낱말표 — 항구·어종. 답변 속의 눌리는 낱말(.ent)과 다른 모양을 쓴다.
저쪽은 '눌러서 오른쪽 칸에 펴는 것', 이쪽은 '제 주소로 떠나는 링크'다. */
/* ★ 카드 제목을 접기 손잡이로 (2026-09-24) — 겉모습은 제목 그대로다.
누를 수 있다는 것은 ▾ 한 글자가 말하고, 접히면 ▸ 로 눕는다. */
.facts h3 .foldbtn{all:unset;display:flex;align-items:center;gap:6px;width:100%;
cursor:pointer;box-sizing:border-box}
.facts h3 .foldbtn:focus-visible{outline:2px solid var(--sonar);outline-offset:3px;border-radius:4px}
/* ★ 접기 표는 **눌러야 할 것**이라 작으면 안 보인다 (2026-09-24 재지시:
"아이콘을 조금 더 크게"). 11px → 17px, 색도 한 단 진하게. */
.facts h3 .ar{margin-left:auto;font-size:17px;line-height:1;color:var(--ink-soft);
transition:transform .15s ease}
.facts.folded h3 .ar{transform:rotate(-90deg)}
.facts.folded #factsBody{display:none}
/* ★ 접힌 카드는 **제목 한 줄**이다 — 카드의 안쪽 여백(--pad)과 제목의 아래
여백(10px)이 그대로 남으면 한 줄짜리가 필요 이상으로 두툼하다
(2026-09-24 재지시: "접힌 상태의 높이는 조금 더 적게"). */
.facts.folded{padding-top:10px;padding-bottom:10px}
.facts.folded h3{margin-bottom:0}
/* ══ 오른쪽 칸 카드의 접기/펼침 (2026-09-24 지시) ════════════════════════
"우측 섹션에 표시되는 내용은 접기/펼침 기능을 넣어줘. 하나가 펼침이 되면
나머지는 접기가 되어야 해."
▣ 카드마다 **머리 띠**(.foldstrip)를 하나 얹는다 — 접히면 그 띠만 남는다.
띠에 적히는 이름은 그 카드가 지금 무엇을 보여 주는지(항구 이름·설문 등)에서
가져온다. 카드마다 다른 제목 자리를 찾아 헤매지 않고, 접을 때 한 번 읽는다.
▣ ★ 한 번에 하나만 편다(아코디언) — 오른쪽 칸은 세로로 쌓이는 자리라 여럿이
펴져 있으면 아래 것이 화면 밖으로 밀린다. 편 것 하나만 길게 둔다.
▣ ★ 배너(#adslots)와 닫기(#sheetClose)는 카드가 아니라 접지 않는다. */
.side > .foldstrip{display:flex;align-items:center;margin:0}
.side > .foldstrip .fb{all:unset;display:flex;align-items:center;gap:8px;width:100%;
cursor:pointer;box-sizing:border-box;font-size:11.5px;letter-spacing:.02em;
color:var(--dim);font-weight:600}
.side > .foldstrip .fb:focus-visible{outline:2px solid var(--sonar);outline-offset:3px;border-radius:4px}
.side > .foldstrip .fb .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side > .foldstrip .fb .ar{margin-left:auto;font-size:17px;line-height:1;color:var(--ink-soft);
transition:transform .15s ease}
.side.folded > .foldstrip .fb .ar{transform:rotate(-90deg)}
/* ★ 접히면 **띠만** 남는다 — 카드 안의 다른 것은 통째로 물러난다. */
.side.folded > *:not(.foldstrip){display:none}
.side.folded{padding-top:10px;padding-bottom:10px}
/* ★ 펴져 있을 때는 띠에 **이름을 적지 않는다** — 바로 아래에 그 카드의 제 제목이
있어 같은 말이 두 줄이 된다(2026-09-24 화면 확인에서 드러났다: 「내일의 물때」가
두 번, 「비응항」이 두 번). 그때 띠는 **접기 표 한 자리**로만 남고, 접히면 그
자리에 이름이 돌아온다. 누르는 넓이는 줄 전체 그대로다. */
.side:not(.folded) > .foldstrip{margin-bottom:0;margin-top:-2px}
.side:not(.folded) > .foldstrip .nm{display:none}
.side.folded > .foldstrip{margin-bottom:0}
@media (prefers-reduced-motion:reduce){ .side > .foldstrip .fb .ar{transition:none} }
@media (prefers-reduced-motion:reduce){ .facts h3 .ar{transition:none} }
/* ★ 「더보기」는 **칸 가운데**에 둔다 (2026-09-24 재지시) — 목록의 끝이자
다음 걸음이라, 왼쪽 끝에 붙으면 곁줄(.more 의 링크들)과 섞여 보인다. */
.facts .more.mid{display:flex;justify-content:center;margin-top:10px}
/* 「다음 10개 더보기」 단추 — 곁줄(.more)의 링크와 **같은 크기**로 둔다.
여기서 가장 큰 것은 조황 제목이고, 이 단추는 그 다음 걸음이다. */
.facts .morebtn{font:inherit;font-size:12px;color:var(--sonar-ink);background:none;
border:1px solid var(--line);border-radius:999px;padding:5px 12px;min-height:32px;
cursor:pointer}
.facts .morebtn:hover{border-color:var(--sonar);background:var(--hull-2)}
.facts .morebtn[disabled]{opacity:.5;cursor:default}
.facts .tags{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.facts .tags a{font-size:12px;color:var(--ink);text-decoration:none;
border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 7px}
.facts .tags a:hover{background:var(--hull-2)}
.facts .tags a b{font-weight:600;color:var(--dim);font-size:11px;margin-left:4px}
.facts .more{margin:8px 0 0;font-size:12px;color:var(--dim)}
.facts .more a{color:var(--water);text-decoration:none}
.facts .more a:hover{text-decoration:underline}
/* ══════════ 내일의 물때 카드 (2026-08-06 · 08-09 내일 기준) ═════════
▣ 색은 토큰만 쓴다 — 그래야 테마 다섯(여명·새벽·노을·해도·백파)이 저절로 따라온다.
SVG 안에서도 마찬가지다. `stroke="#2E8090"` 처럼 박으면 새벽 테마에서
혼자 낮 색으로 남는다. 그래서 곡선·글자를 전부 currentColor 나
var(--…) 로 칠하고, 아래 규칙이 그 색을 정한다.
▣ 곡선은 넓게, 숫자는 작게
그래프는 '지금 물이 드는 중인지 나는 중인지'만 한눈에 답하면 된다.
정확한 시각은 그 아래 글자가 말한다 — 그림에 숫자를 더 얹으면 둘 다 안 읽힌다. */
.tide h3{display:flex;align-items:center;gap:8px}
.tidenow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
margin:2px 0 8px}
.tidenow b{font-size:15px;font-weight:700;color:var(--lamp);letter-spacing:-.01em}
.tidenow .mul{font-family:var(--mono);font-size:12px;font-weight:700;
color:var(--water);display:inline-flex;align-items:center}
/* ★ 좁아지면 그래프만 가로로 민다 — 본문이 밀리면 안 된다(CLAUDE.md 4항).
min-width 를 두는 이유: 320px 로 눌리면 만조·간조 글자가 서로 겹친다. */
.tidewrap{overflow-x:auto;margin:0 -4px}
.tidewrap svg{display:block;width:100%;min-width:284px;height:auto;
color:var(--water)}
.tide .grid{stroke:var(--line)}
.tide .area{fill:var(--water);opacity:.13}
.tide .curve{fill:none;stroke:currentColor;stroke-width:2.2;
stroke-linejoin:round;stroke-linecap:round}
.tide .pk{fill:var(--lamp)}
.tide .lb{font-family:var(--mono);font-size:12px;fill:var(--dim)}
.tide .lb.hi{fill:var(--lamp);font-weight:700}
.tide .nowline{stroke:var(--sonar-hot);stroke-width:1.5;stroke-dasharray:3 3}
.tide .nowdot{fill:var(--sonar-hot)}
.tide .nowlb{font-family:var(--mono);font-size:12px;fill:var(--sonar-hot);
font-weight:700}
/* ★ 조석 곡선의 **자** (2026-08-14 지정: "X축은 시간, Y축은 11m 고정 조차").
선은 옅게, 글자는 작게 — 자가 곡선보다 도드라지면 무엇이 자료인지 헷갈린다. */
.tide .ax{stroke:var(--line);stroke-width:.8}
.tide .ax.bold{stroke-width:1.2}
.tide .axlb{font-family:var(--mono);font-size:10px;fill:var(--dim)}
.tide .axlb.unit{font-size:9px;opacity:.8}
/* 물살의 세기 막대 — **0~100% 자로 잰 길이**다 (2026-08-06 지정).
▣ 왜 숫자 옆에 막대를 두나
'62%' 는 읽어야 알고, 막대는 **보면 안다.** 물때는 하루에도 여러 번
들여다보는 값이라 눈으로 훑고 지나갈 수 있어야 한다.
▣ ★ 예전에 걷어낸 조황 막대와 다른 것이다
그것은 배들끼리 견준 **상대 길이**라 옆의 숫자·등급과 같은 말을 세 번
했다(2026-08-05 제거). 이 막대는 **100% 라는 고정된 자** 위의 길이다 —
숫자만으로는 '62가 센 편인가'를 알 수 없으니 새로 말해 주는 것이 있다.
▣ 두 자리(오늘·내일)에 같은 자를 쓴다. 길이가 같은 뜻이어야 견줄 수 있다. */
.pctbar{display:inline-block;width:56px;height:9px;border-radius:4px;
background:rgba(var(--sh),.14);vertical-align:middle;margin-left:6px;
position:relative;overflow:hidden;flex:0 0 auto}
/* ── 유속·풍속 두 눈금 (2026-08-06 지정) ──────────────────────────────
▣ 왜 나란히 두나
출조를 접는 이유는 대개 둘 중 하나다 — 물이 안 서거나(유속), 바람이
세거나(풍속). 한 줄에 같은 길이의 자로 놓으면 "오늘 뭐가 문제인지"가
한눈에 잡힌다.
▣ 자가 서로 다르다는 것을 색으로 알린다
유속은 물때 세기(%) 그대로, 풍속은 **10m/s 를 100% 로 본 길이**다.
같은 파랑으로 칠하면 같은 자로 읽는다 — 그래서 풍속은 호박색이다.
10m/s 는 낚시배가 출항을 다시 생각하는 언저리라 자로 삼기에 맞다. */
.gauges{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:8px;
font-family:var(--mono);font-size:11px;color:var(--dim)}
.gauges .g{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.gauges .g .lb{color:var(--dim)}
.gauges .g b{color:var(--ink);font-weight:700}
.pctbar.wind::before{background:var(--sonar-ink)}
/* 자를 넘어 꽉 찬 막대 — 오른쪽 끝을 각지게 해 '여기서 잘렸다'를 알린다.
둥근 채로 두면 마침 100% 인 것과 구별되지 않는다. */
.pctbar.over::before{border-radius:4px 0 0 4px}
/* ★ 채우는 색은 **파랑**이다 (2026-08-06 지정).
물의 세기니까 물빛(--water, 청록)이 맞겠다 싶었지만, 카드 안 글자·곡선이
이미 청록이라 막대만 도드라지지 않았다. 파랑은 이 카드에서 여기 하나뿐이라
눈이 바로 잡는다 — 머리띠의 밝은 끝(트인 바다 파랑)과 같은 계열이다.
★ 테마마다 값을 따로 준다(--tide-bar). 어두운 판에서는 진한 파랑이 묻히고
흰 판(백파)에서는 옅은 파랑이 안 보인다 — 판마다 보이는 파랑이 다르다. */
.pctbar::before{content:"";position:absolute;top:0;bottom:0;left:0;
width:var(--p,0%);background:var(--tide-bar);border-radius:3px}
.tidefoot{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:8px;
align-items:center;
font-family:var(--mono);font-size:11px;color:var(--dim)}
.tidefoot > span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.tidefoot .lb{color:var(--dim)}
/* ★ 옆 날 손잡이(.daybtn)를 걷어냈다 (2026-08-09 지정) — 카드가 내일
기준이 되면서 그 안의 '다른 날' 줄이 사라졌다. 옷도 함께 걷는다.
되살릴 일이 생기면 git 에서 꺼낸다(커밋 '내일의 물때'). */
.tidefoot b{color:var(--ink);font-weight:700}
.tidefoot b.up{color:var(--water)}
/* 수온·바람·파고·낚시지수 — 두 칸씩 두 줄.
★ 처음엔 네 칸을 한 줄에 뒀다가 값이 전부 잘렸다("26.4~…", "0.8~2…").
오른쪽 칸은 320px 이고 네 칸이면 한 칸이 70px 다 — 범위(26.4~26.7°)가
들어갈 자리가 아니다. 잘린 숫자는 없는 숫자보다 나쁘다(0.1~0 으로 읽힌다).
두 칸이면 한 칸이 150px 이라 어떤 값도 그대로 들어간다. */
.seagrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;margin-top:10px;background:var(--line);
border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.seagrid .c{background:var(--hull);padding:7px 8px;min-width:0}
.seagrid .k{display:block;font-size:10px;color:var(--dim);letter-spacing:.02em}
.seagrid .v{display:block;font-family:var(--mono);font-size:13px;font-weight:700;
color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seagrid .v s{all:unset;font-size:10px;font-weight:400;color:var(--dim)}
/* 낚시지수는 다섯 단계다(매우나쁨~매우좋음). 색으로만 말하지 않는다 —
글자가 이미 등급을 말하고, 색은 거들기만 한다(색각 이상 고려). */
.seagrid .v.s5,.seagrid .v.s4{color:var(--water)}
.seagrid .v.s2,.seagrid .v.s1{color:var(--warn-ink)}
.tidesrc{margin:8px 0 0;font-size:10.5px;color:var(--dim);line-height:1.6}
.tidesrc .warn{color:var(--warn-ink)}
/* 오른쪽 상세 칸 */
.detail h2{font-size:16px;letter-spacing:-.01em;font-weight:700;
color:var(--lamp);margin:2px 0 6px}
.detail .kind{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
color:var(--sonar-ink);text-transform:uppercase}
.detail h3{font-size:11.5px;color:var(--dim);font-weight:600;
margin:14px 0 6px;letter-spacing:.02em}
.detail dl{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;
font-size:12.5px;margin:10px 0}
.detail dt{color:var(--dim);white-space:nowrap}
.detail dd{margin:0;word-break:break-word}
.detail .unk{color:var(--dim);font-style:normal}
/* 기간이 지난 신고처럼 **그냥 넘기면 안 되는 값**. 붉게 적되 굵기는 올리지
않는다 — 표 안에서 한 줄만 굵으면 그 줄만 읽고 나머지를 안 본다. */
.detail .warn{color:var(--warn-ink)}
/* 목록 제목 옆의 '159곳' — 이것이 곧 여닫는 손잡이다. 글씨는 곁말 크기로
두되 밑줄로 **누를 수 있다**는 것을 알린다(제목처럼 보이면 아무도 안 누른다). */
.detail .countbtn{font-family:var(--mono);font-size:11px;font-weight:400;
margin-left:6px;border-bottom:1px dashed var(--line);display:inline-flex;
align-items:baseline;gap:4px}
.detail .countbtn:hover{color:var(--sonar-ink);border-bottom-color:var(--sonar-ink)}
.detail .countbtn .caret-i{font-style:normal;font-size:9px;line-height:1;
transition:transform .18s ease;display:inline-block}
.detail .countbtn[aria-expanded="true"] .caret-i{transform:rotate(180deg)}
/* 엔티티 설명 원고(어종·물때·항구) ─────────────────────────────
예전엔 첫 문단에만 인라인으로 font-size 를 줘서, 줄바꿈으로 갈라져 나온
둘째 절부터는 크기가 제멋대로였다("어떤 물고기인가"만 작고 나머지는 컸다).
본문 규칙을 여기 한 번만 두어 **모든 절이 같은 크기·같은 색**이 되게 한다. */
.guide{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.guide p{margin:0 0 9px;font-size:11.5px;line-height:1.75;color:var(--ink-soft)}
.guide p:last-child{margin-bottom:0}
.guide b.gh{color:var(--water);font-weight:700} /* [절 제목] */
.guide b.ge{color:var(--ink);font-weight:600} /* 원고 안의 **강조** */
.guide p.gsrc{margin-top:11px;font-size:11px;color:var(--dim)}
.detail ul{list-style:none;margin:8px 0 0;padding:0}
.detail li{padding:5px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.detail li:last-child{border-bottom:0}
/* ── 선사·낚시배·주차장 목록 접기 (2026-08-06 지정) ────────────────────
셋 다 **처음엔 통째로 닫혀 있고** 제목 옆 숫자를 눌러 연다(countbtn).
감출 때는 hidden 을 쓴다 — 투명도만 낮추면 접어도 아래가 250줄 밀려 있다. */
/* ── 지역의 항구 목록만 **앞 12줄을 펼쳐 둔다**(peekList) ────────────────
그 화면의 본문이라 한 줄도 안 보이면 아무 말도 안 한 셈이 되기 때문이다.
★ 13 은 JS 의 PEEK(12) + 1 이다 — 두 값은 같이 고친다. */
.peeklist[data-open="0"] li:nth-child(n+13){display:none}
/* 접혀 있을 때 마지막으로 보이는 줄의 밑줄은 지운다 — 버튼 윗선과 겹쳐
두 줄로 보인다. */
.peeklist[data-open="0"] li:nth-child(12){border-bottom:0}
.detail .peekmore{margin-bottom:2px}
/* 목록 제목 옆의 총계 — '선사 105곳' 처럼 **몇 개 중 12개인지** 알려준다.
이게 없으면 12줄이 전부인 줄 안다. */
.detail h3 .muted{font-weight:400;margin-left:6px;font-family:var(--mono);font-size:11px}
.sheet-close{display:none}
/* 답변 안에서 눌러볼 수 있는 낱말 */
/* 눌러볼 수 있는 낱말 — **조용해야 한다.**
처음엔 주황 글씨 + 점선으로 칠했더니 낚시배 이름·어종·항구가 전부 물들어
답변이 글이 아니라 링크 덩어리로 보였다(한 화면에 166개가 표시됐다).
글은 글대로 읽히고, 누를 수 있다는 것은 **가까이 갔을 때** 알면 된다.
· 평소 : 글자색 그대로 + 아주 옅은 밑줄
· 호버 : 그때 호박색으로 살아난다
· 선택 : 지금 오른쪽에 뜬 것 하나만 또렷하게 */
.ent{background:none;border:0;padding:0;font:inherit;color:inherit;
cursor:pointer;border-bottom:1px solid rgba(var(--sonar-rgb),.22);
transition:color .1s, border-color .1s, background .1s}
.ent:hover,.ent:focus-visible{color:var(--sonar-ink);
border-bottom-color:var(--sonar-ink);background:rgba(var(--sonar-rgb),.08)}
.ent.on{color:var(--sonar-ink);border-bottom-color:var(--sonar-ink);
background:rgba(var(--sonar-rgb),.16)}
/* 낚시배 순위·근거는 이미 색과 굵기로 구분돼 있다 — 밑줄까지 더하면 표가 지저분해진다.
여기서는 밑줄을 빼고 호버로만 알린다. */
#boats .ent,#sources .ent{border-bottom-color:transparent}
#boats .ent:hover,#sources .ent:hover,
#boats .ent.on,#sources .ent.on{border-bottom-color:var(--sonar-ink)}
/* ★ 기본 선언을 미디어쿼리보다 **앞**에 둔다.
뒤에 두었더니 같은 특이도라 나중 규칙이 이겨서 @media 의 display:block 을
덮었고, 360px 에서 '도구 열기' 버튼이 끝내 안 보였다(Playwright 로 잡았다). */
.toolstoggle{display:none;width:100%;background:var(--hull);color:var(--ink);
border:1px solid var(--line);border-radius:var(--r);padding:9px;
font-family:var(--mono);font-size:12px;letter-spacing:.1em;cursor:pointer;
margin:0 0 10px}
@media (max-width:1180px){
main{grid-template-columns:230px minmax(0,1fr)}
/* 오른쪽은 눌렀을 때만 아래에서 올라온다 */
.col-r{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;
max-height:78vh;background:var(--hull);border-top:1px solid var(--line);
padding:14px 16px 20px;transform:translateY(101%);transition:transform .18s ease;
box-shadow:0 -18px 40px rgba(var(--sh),.24)}
.col-r.open{transform:none}
.sheet-close{display:block;position:sticky;top:0;margin-left:auto;
background:var(--hull-2);color:var(--ink);border:1px solid var(--line);
border-radius:var(--r);padding:5px 12px;font-size:12px;cursor:pointer}
}
@media (max-width:900px){
main{grid-template-columns:minmax(0,1fr);padding:16px 14px 72px}
.col-l{position:static;max-height:none;overflow:visible;order:2}
.col-c{order:1}
/* 좁은 화면에서 도구는 접어 둔다 — 질문 칸이 먼저 보여야 한다 */
.col-l[data-collapsed="1"] .side{display:none}
.toolstoggle{display:block}
}
/* 눈썹 글씨를 뺐다 — '조황 질의' 라고 또 적을 필요가 없다.
제목이 이미 무엇을 하는 곳인지 말한다. 한 겹 줄이면 질문 칸이 위로 올라온다. */
.eyebrow{display:none}
h1{
font-size:clamp(22px,3vw,28px); line-height:1.3; margin:0 0 8px;
letter-spacing:-.02em; font-weight:700;
/* ★ 박스 밖에 놓인 유일한 제목이다 — 바탕 위라 바탕과 갈리는 색이어야 한다. */
color:var(--ink-page);
/* ★ 한 단 연하게 (2026-08-07 지정). 너무 진해 글자가 앞으로 튀어나와 보였다.
색을 새로 고르지 않고 **바탕 쪽으로 조금 섞는다** — 그래야 테마 다섯이
각자 제 바탕으로 연해진다. 밝은 테마에서는 밝아지고 어두운 테마에서는
어두워지는데, 둘 다 '바탕에 가까워진다' 는 같은 뜻이다.
★ 위 줄을 남겨 둔다. color-mix 를 모르는 브라우저는 그 줄을 쓴다. */
color:color-mix(in srgb, var(--ink-page) 84%, var(--page2));
/* ★ 입체감 (2026-08-07 다시 잡음) — 글자를 깎아 세우되 **얕게** 세운다.
▣ 전에는 아래로만 4칸을 쌓고 그림자를 9px/18px 로 떨궜다. 두껍고
무거워, 제목이 판 위에 얹힌 것이 아니라 **판에서 뽑혀 나온 것**처럼
보였다. 계단을 둘로 줄이고 그림자를 끌어올린다.
▣ 오른쪽으로도 민다 (지정)
빛이 **왼쪽 위**에서 드는 것으로 자리를 잡는다. 그러면 옆면과 그늘은
오른쪽 아래로 진다 — 아래로만 지던 것보다 방향이 분명해져 얕은
두께로도 입체로 읽힌다. 이것이 '고급스럽다' 는 인상의 대부분이다.
▣ 겹의 뜻
① 윗변의 빛 — 솟은 면이 빛을 정면으로 받는 한 줄. 이것이 없으면
글자가 판에 눌러 찍힌 것(음각)으로 보인다
② 옆면 두 칸 — 번짐 없이(blur 0) 1px 씩. 그 사이가 메워져 한 면이 된다
③ 닿는 그늘 — 짧고 진하게. 글자가 판에 붙어 있는 자리
④ 퍼지는 그늘 — 길고 옅게. 이것 하나만 쓰면 글자가 공중에 뜬다
★ 옆면·그늘 색은 검정이 아니라 **바탕의 물빛을 어둡게 한 색**이다.
검정을 섞으면 물빛 바탕 위에서 때가 낀 것처럼 탁해진다. */
text-shadow:
-1px -1px 0 rgba(var(--hl),.78),
1px 1px 0 var(--h1a),
2px 2px 0 var(--h1c),
3px 3px 3px rgba(var(--sh),.20),
4px 5px 11px rgba(var(--sh),.15);
}
/* 좁은 화면에서는 글자가 작아진다(clamp 22px). 옆면을 그대로 두면 두께가
글자를 잡아먹어 획이 뭉갠다 — 계단을 두 칸으로 줄인다. */
@media (max-width:640px){
h1{
/* 글자가 작아지면(clamp 22px) 옆면 두께가 획을 잡아먹는다 — 한 칸으로 줄인다. */
text-shadow:
-1px -1px 0 rgba(var(--hl),.76),
1px 1px 0 var(--h1a),
2px 2px 2px rgba(var(--sh),.20),
3px 4px 9px rgba(var(--sh),.14);
}
}
.sub{color:var(--dim);margin:0 0 18px;font-size:13.5px}
.sub b{color:var(--ink);font-family:var(--mono);font-weight:600}
/* 질문 입력 = 계기 콘솔 */
/* 질문 칸 — 대화 앱의 입력창처럼 한 덩어리로 묶는다.
버튼을 칸 밖에 두면 "쓰는 곳"과 "보내는 곳"이 갈려 시선이 두 번 움직인다. */
.console{
/* ★ 묻는 자리 — **바탕을 칠하지 않는다** (2026-08-07 지정).
전에는 쪽빛(--bay)으로 채워 흰 박스들 사이에서 떠오르게 했다.
이제는 화면 전체 바탕이 그대로 비쳐 보이게 둔다 —
`transparent` 는 색을 하나 골라 맞추는 것과 다르다. 바탕이 위아래로
번지는 그라데이션이라, 색을 박아 두면 어느 한 높이에서만 맞고 나머지는
어긋난다. 비워 두면 **어느 자리에서든 정확히 같은 색**이다.
(body 의 배경이 background-attachment:fixed 라 스크롤해도 계속 맞는다.)
★ 그래서 이 칸을 세우는 것은 이제 색이 아니라 **테두리**다.
테두리는 쪽빛 계열로 남긴다 — 흰 박스용 옅은 선은 이 바탕에서 사라진다. */
background:transparent; border:1px solid var(--bay-line); border-radius:14px;
padding:14px 14px 10px;
transition:border-color .14s, box-shadow .14s;
}
.console:focus-within{
border-color:var(--bay-rail);
/* 포커스 고리를 얹되 **입체감은 그대로 둔다.** box-shadow 는 뒤에 오는
선언이 앞을 통째로 덮으므로, 고리만 쓰면 상자가 납작해진다. */
box-shadow:
0 0 0 3px rgba(var(--sh),.20),
inset 0 1px 0 rgba(var(--hl),.75),
0 2px 4px rgba(var(--sh),.10),
0 12px 26px -8px rgba(var(--sh),.30);
}
/* ── 가운데 칸 박스의 입체감 (2026-08-05 지정) ────────────────────────
▣ 왜 가운데만인가
왼쪽은 조작, 오른쪽은 참고다. 사람이 보는 것은 가운데 — 묻고, 답을 읽고,
순위를 훑는 자리다. 가운데만 물 위로 띄우면 어디를 보면 되는지가
색이나 글씨가 아니라 **높이**로 말해진다.
▣ 그림자 세 겹 — 하나로는 입체가 안 된다
· inset 흰 선 : 상자 **윗변 안쪽** 1px. 위에서 든 빛이 모서리에 걸린 것.
이것 하나로 상자에 두께가 생긴다.
· 가까운 그림자 : 2px 4px — 바닥에 닿는 자리. 상자의 무게.
· 먼 그림자 : 14px 30px, 음수 퍼짐 — 넓고 옅게. 바탕에서 띄운다.
★ 검정이 아니라 쪽빛 남색(21,44,91)을 쓴다. 검정 그림자는 물빛 바탕
위에서 때가 낀 것처럼 탁해진다. 바탕색과 같은 집안이어야 맑다.
▣ 높이는 역할 순서를 따른다
묻는 칸이 가장 높고(30%), 답변이 그다음(26%), 나머지 표는 낮다(18%).
전부 같은 높이로 띄우면 층이 없어 입체가 아니라 그냥 흐릿해진다. */
.col-c .console{
box-shadow:
inset 0 1px 0 rgba(var(--hl),.75),
0 2px 4px rgba(var(--sh),.10),
0 12px 26px -8px rgba(var(--sh),.30);
}
.col-c .panel{
box-shadow:
inset 0 1px 0 rgba(var(--hl),.85),
0 1px 3px rgba(var(--sh),.07),
0 8px 20px -8px rgba(var(--sh),.18);
}
.col-c .panel.answer-panel{
box-shadow:
inset 0 1px 0 rgba(var(--hl),.75),
0 2px 4px rgba(var(--sh),.09),
0 10px 24px -8px rgba(var(--sh),.26);
}
/* 알림 줄은 곁말이라 바닥에 붙여 둔다 — 띄우면 본문보다 앞으로 나선다 */
.col-c .note{box-shadow:0 1px 2px rgba(var(--sh),.10)}
textarea{
width:100%; min-height:60px; resize:vertical;
border:0; color:var(--ink); font-family:var(--ui); font-size:16px;
line-height:1.6; outline:none;
}
/* 자리표시글은 홈(#CAE1EA) 안에 놓인다 — 홈이 진해진 만큼 함께 내려 잡는다.
대비 4.9:1. 본문(9.2:1)보다는 확실히 흐려서 '아직 안 쓴 글'로 읽히되,
무엇을 물으면 되는지는 읽힌다. */
textarea::placeholder{color:var(--bay-ph)}
/* ── 글이 담기는 홈 (2026-08-05 지정) ────────────────────────────────
▣ 무엇을 말하려는 표시인가
상자는 물 위로 떠 있고(그림자), 글이 들어가고 나오는 자리는 그 상자에
**파인 홈**이다. 쓰는 곳과 읽는 곳이 같은 모양이라 "여기가 글의 자리"
라는 것이 한 번에 읽힌다.
▣ 안으로 눌려 보이게 하는 법 — 빛의 방향을 뒤집는다
떠 있는 상자는 **윗변 안쪽이 밝고**(inset 흰 선) 바깥 아래로 그림자가
진다. 홈은 그 반대다 —
· inset 0 2px 5px 어둡게 : 윗변 **안쪽**에 그늘. 위에서 든 빛이
턱에 막혀 생기는 그림자다. 이것이 깊이다.
· inset 0 -1px 0 밝게 : 아랫변 안쪽에 빛. 홈 바닥이 반사되는 자리.
두 줄의 순서를 바꾸면 그대로 볼록해 보인다. 위가 어두워야 오목하다.
▣ 바탕을 한 단 진하게(#CAE1EA)
그림자만으로는 홈이 얕다. 파인 자리는 빛이 덜 들어 어둡다.
★ 그래도 글은 읽혀야 한다 — 본문(--ink) 대비 9.1:1 로 넉넉하다. */
.console textarea,
.answer-panel .answer{
/* ★ 글이 실제로 오가는 두 자리 — **왼쪽 예시 칸과 같은 색**(--hull).
(2026-08-07 지정. 그 앞 판에서는 비워 뒀고, 그보다 앞에서는 --well 로
한 단 진하게 깔았다.)
▣ 왜 --hull 인가
왼쪽 예시·설정 칸(.side), 순위·근거 칸(.panel) 이 모두 이 색이다.
여기까지 같은 색을 쓰면 **글이 담기는 자리는 전부 한 색**이 된다 —
바탕(그라데이션)은 배경이고, 흰 면은 내용이라는 규칙이 화면 전체에
하나로 선다.
▣ 바깥 칸은 여전히 비어 있다
그래서 질의·답변은 '바탕 위에 놓인 흰 면' 으로 보이고, 테두리가 그
둘레를 잡는다. 색을 더해서가 아니라 **덜어서** 다른 칸과 갈린다.
▣ 안쪽 그림자는 남긴다
여기는 '여기에 쓴다'와 '여기에 온다'를 뜻하는 자리다. 완전히 평평하면
어디에 써야 할지 모른다. --hull 은 바탕보다 밝아 그림자가 얕게 걸리는데,
그 얕음이 '눌린 종이' 처럼 읽혀 오히려 알맞다. */
background:var(--hull);
border-radius:10px;
padding:11px 13px;
box-shadow:
inset 0 2px 5px rgba(var(--sh),.20),
inset 0 1px 1px rgba(var(--sh),.12),
inset 0 -1px 0 rgba(var(--hl),.55);
}
/* 글을 쓰는 동안에는 홈을 한 뼘 더 깊게 — 지금 여기에 쓰고 있다는 표시 */
.console:focus-within textarea{
box-shadow:
inset 0 3px 7px rgba(var(--sh),.26),
inset 0 1px 2px rgba(var(--sh),.16),
inset 0 -1px 0 rgba(var(--hl),.55);
}
/* 포커스 표시는 **바깥 상자 하나만** 쓴다. 안쪽 textarea 에까지 주황 아웃라인이
겹치면 입력창이 오류난 것처럼 보인다(화면을 열자마자 그 상태였다).
키보드 사용자는 상자 전체가 청록으로 바뀌는 것으로 충분히 알 수 있다. */
textarea:focus-visible{outline:none}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
button{font-family:var(--ui);cursor:pointer;border-radius:var(--r-sm)}
.btn{
background:var(--sonar); color:var(--on-sonar); border:1px solid var(--sonar);
font-weight:700; font-size:14px; padding:5px 18px;
/* 높이 33px — 44px 의 3/4(사용자 지정). 질문 칸이 화면 위를 차지하는데
버튼까지 두툼하면 입력 영역이 아래로 밀린다. */
min-height:33px; display:inline-flex; align-items:center; gap:9px;
transition:filter .12s, box-shadow .12s, transform .08s;
/* ★ 버튼에 입체감 (2026-08-05 지정) — 누를 수 있는 것은 솟아 있어야 한다.
글이 담기는 자리는 안으로 파고(홈), 누르는 자리는 밖으로 솟는다.
화면 안에서 이 둘이 반대 방향이라 무엇이 입력이고 무엇이 조작인지가
글자를 읽기 전에 구분된다.
· inset 0 1px 0 밝게 : 윗면이 빛을 받는 자리
· inset 0 -1px 0 어둡게 : 아랫면 안쪽 그늘 — 버튼에 두께를 준다
· 0 1px 2px / 0 4px 9px : 바닥에 닿는 그림자와 퍼지는 그림자
★ 그림자는 바탕과 같은 물빛 집안(16,52,66)이다. 주황 버튼이라고
검정 그림자를 쓰면 그 자리만 탁해진다. */
box-shadow:
inset 0 1px 0 rgba(var(--hl),.45),
inset 0 -1px 0 rgba(var(--btn-sh),.30),
0 1px 2px rgba(var(--sh),.20),
0 4px 9px -2px rgba(var(--sh),.28);
}
/* ★ 손가락으로 누르는 기기에서는 44px 를 지킨다.
배 위에서 젖은 손으로 누르는 화면이라 여기서까지 줄이면 잘 안 눌린다.
마우스가 있는 화면에만 3/4 를 적용한다. */
@media (pointer:coarse){ .btn{min-height:44px; padding:9px 18px} }
/* 손이 올라가면 한 뼘 더 솟는다 */
.btn:hover{
filter:brightness(1.08);
box-shadow:
inset 0 1px 0 rgba(var(--hl),.5),
inset 0 -1px 0 rgba(var(--btn-sh),.30),
0 2px 4px rgba(var(--sh),.20),
0 7px 14px -3px rgba(var(--sh),.30);
}
/* ★ 누르는 순간에는 **안으로 들어간다.** 1px 내려앉히고 그림자를 걷은 뒤
안쪽 그늘로 바꾼다 — 솟은 것이 눌리는 모습이라 손끝의 반응이 눈에 보인다. */
.btn:active{
transform:translateY(1px);
filter:brightness(.97);
box-shadow:
inset 0 2px 4px rgba(var(--btn-sh),.35),
inset 0 -1px 0 rgba(var(--hl),.25),
0 1px 1px rgba(var(--sh),.16);
}
/* 못 누르는 버튼은 솟아 있으면 안 된다 — 눌릴 것처럼 보인다 */
.btn:disabled{
opacity:.45;cursor:not-allowed;filter:none;transform:none;
box-shadow:inset 0 -1px 0 rgba(var(--btn-sh),.18);
}
.btn .tag{font-family:var(--mono);font-size:11px;opacity:.75;font-weight:600}
/* ★ '검색만'은 곁버튼이라 한 단 낮게 띄운다. 두 버튼이 같은 높이로 솟으면
어느 쪽이 주된 동작인지가 사라진다. 투명하던 바탕에 옅은 흰 면을 깔아야
솟은 면이 생긴다 — 배경이 없으면 그림자만 뜬다. */
.btn.ghost{
background:rgba(var(--hl),.62);color:var(--ink);border-color:var(--line);
box-shadow:
inset 0 1px 0 rgba(var(--hl),.85),
inset 0 -1px 0 rgba(var(--sh),.14),
0 1px 2px rgba(var(--sh),.14),
0 3px 7px -2px rgba(var(--sh),.20);
}
.btn.ghost:hover{
border-color:var(--water);filter:none;background:rgba(var(--hl),.85);
box-shadow:
inset 0 1px 0 rgba(var(--hl),.9),
inset 0 -1px 0 rgba(var(--sh),.14),
0 2px 4px rgba(var(--sh),.15),
0 6px 12px -3px rgba(var(--sh),.24);
}
.btn.ghost:active{
transform:translateY(1px);
box-shadow:
inset 0 2px 4px rgba(var(--sh),.22),
inset 0 -1px 0 rgba(var(--hl),.5),
0 1px 1px rgba(var(--sh),.12);
}
.hint{color:var(--dim);font-size:12px;font-family:var(--mono);margin-right:auto}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{
background:transparent;border:1px solid var(--line);color:var(--dim);
font-size:13px;padding:6px 12px;
min-height:44px;display:inline-flex;align-items:center;text-align:left;
}
.chip:hover{border-color:var(--water);color:var(--ink)}
/* ── 결과 ──────────────────────────────────────────────── */
/* 결과 묶음의 윗 여백 — 카드 사이 간격과 같게 둔다(사용자 지정).
40px 로 크게 띄웠더니 첫 알림 줄만 혼자 멀찍이 떨어져 보였다.
(그때 첫 줄이던 '찾은 조건'은 2026-08-05 에 없앴다.) */
section.out{margin-top:var(--gap)}
.panel{
background:var(--hull); border:1px solid var(--line); border-radius:var(--r);
padding:var(--pad); margin-bottom:var(--gap);
/* 스크롤로 데려올 때 상단 고정 띠에 가리지 않게 */
scroll-margin-top:64px;
}
.panel > h2{
font-size:11.5px; letter-spacing:.02em; color:var(--dim);
margin:0 0 12px; font-weight:600;
display:flex; align-items:baseline; gap:10px;
}
/* ★ 곁말은 **바짝 붙여** 쓴다 (2026-08-09 지정).
고정폭 글꼴이라 한글 한 자가 통째로 한 칸을 먹고, 가운뎃점 앞뒤 빈칸까지
같은 폭이라 줄이 실제보다 훨씬 길어 보였다(실측 276px).
자간을 당기고(물려받은 +0.23px 를 음수로 뒤집는다) 빈칸을 좁힌다.
★ 글꼴은 그대로 둔다 — 다른 칸의 곁말은 숫자를 적어서 고정폭이 맞다. */
.panel > h2 .meta{margin-left:auto;color:var(--dim);font-family:var(--mono);
font-size:11px;letter-spacing:-.045em;word-spacing:-2.5px}
/* 답변 — 이 화면에서 사람이 실제로 읽는 유일한 글이다.
★ 다른 칸과 같은 카드 배경을 쓰되(2026-08-03 사용자 지정), **한 단 밝게** 띄워
"또 하나의 표"가 아니라 "읽을 것"으로 보이게 한다. 왼쪽 물빛 띠가 시작점을
짚어 준다 — 배경만 같으면 낚시배 순위 카드와 구분이 안 된다.
★ 폭은 66ch 로 묶는다 — 넓은 화면에서 한 줄이 길어지면 다음 줄을 못 찾는다. */
.panel.answer-panel{
/* ★ 답이 오는 자리 — 질의 칸과 **같게** 둔다 (2026-08-07 지정).
둘 다 바탕을 칠하지 않는다. 물음과 답이 같은 처리를 받아야 한 쌍으로
읽히는데, 그 '같음' 이 이제는 쪽빛이 아니라 **바탕 그대로**다.
다른 칸(순위·근거)은 여전히 옅은 --hull 이라 이 두 자리는 여전히 갈린다 —
색을 더해서가 아니라 색을 **빼서** 갈린다. */
background:transparent; border:1px solid var(--bay-line);
/* 왼쪽 띠도 쪽빛 계열로 내린다 — 청록(--water)은 쪽빛 위에서 남의 색이다 */
border-left:3px solid var(--bay-rail); border-radius:var(--r);
/* 왼쪽 띠가 3px, 오른쪽 테두리가 1px 이라 그냥 두면 바깥에서 잰 여백이
2px 어긋난다. 왼쪽 안쪽 여백에서 그 2px 를 덜어 좌우를 같게 맞춘다. */
padding:var(--pad) var(--pad) var(--pad) calc(var(--pad) - 2px);
}
/* ── 쪽빛 칸 안의 글자 ──────────────────────────────────────────────
질의·답변 칸은 바탕이 쪽빛(--bay)이고, 그 안의 홈은 한 단 더 진하다
(#CAE1EA). 본문(--ink #12303A)은 홈 위에서도 9.2:1 이라 그대로 읽히지만,
**곁말로 흐리게 잡아 둔 색**들은 대비가 3:1 아래로 떨어져 사라진다.
그 몇 곳만 남색으로 내려 잡는다.
★ 토큰(--dim)을 고치지 않는다 — 흰 박스 쪽 곁말까지 같이 어두워진다.
선택자를 한 단 올려 이 두 칸 안에서만 이긴다. */
.console .hint{color:var(--on-bay-dim)}
/* ★ 위쪽 textarea::placeholder 보다 이 규칙이 우선한다(선택자가 더 구체적).
홈 색을 바꿀 때는 **여기를** 고쳐야 한다 — 위만 고치면 값이 안 먹는다. */
/* ★ 자리표시 글 (2026-08-07)
--bay-ph 는 **쪽빛 바탕(--bay)에 맞춰 고른 색**이었다. 이 칸의 바탕이
왼쪽 예시 칸과 같은 --hull 로 바뀌면서 그 색은 근거를 잃었고, 실측해 보니
해도 3.4:1 · 백파 4.1:1 · 새벽 4.2:1 로 **작은 글씨 기준 4.5:1 아래**였다.
--on-bay-dim 으로 바꾼다 — 이 바탕에서 8.1~11.5:1 이다.
★ 그래도 본문(--ink, 13~16:1)보다는 확실히 옅다. 자리표시 글은 읽히되
**입력한 글로 오해받으면 안 된다.** */
.console textarea::placeholder{color:var(--on-bay-dim);opacity:.85}
.answer-panel > h2,
.answer-panel > h2 .meta{color:var(--on-bay-dim)}
/* ── 음각 글씨 (2026-08-05 지정) ─────────────────────────────────────
▣ 양각과 음각은 **빛의 순서가 반대**다
솟은 글자(h1)는 윗변이 밝고 아래로 그림자가 진다.
파인 글자는 그 반대다 — 홈의 **위쪽 안벽이 그늘**이고, 홈 아래
바깥면이 빛을 받아 밝다. 두 줄의 위아래를 바꾸면 그대로 양각이 된다.
0 -1px 0 어둡게 : 글자 위쪽 — 파고 들어간 벽의 그늘
0 1px 0 밝게 : 글자 아래쪽 — 홈 가장자리가 반사되는 자리
▣ 왜 이 넷인가
'답변', 'Ctrl+Enter 로 질문', 두 버튼의 글자는 모두 **면에 새겨진 표시**
다. 읽는 글(답변 본문)이나 누르는 면 자체가 아니라, 그 면이 무엇인지
알려 주는 이름표다. 새겨 두면 면과 한 몸이 되어 앞으로 나서지 않는다.
▣ text-shadow 는 물려받는다
버튼에 걸면 안쪽 '빠름'(.tag)과 '4.2초'(.meta)까지 함께 새겨진다 —
따로 적을 필요가 없다. */
/* 세 칸의 이름표를 모두 새긴다 — 왼쪽 '질의 예시·지난 질문·설정',
가운데 '처리 중·낚시배 순위·근거', 오른쪽 'NAKSIGO·선박·지역·항구·물때'
와 그 안의 소제목.
★ 이 이름표들은 **흰 카드** 위에 있다. 아래 빛줄을 순백으로 둔다 —
카드가 이미 희어서 반투명하게 주면 아무것도 안 보인다.
★ 엔티티 이름(.detail h2, 예: '진두항')은 새기지 않는다. 그것은 이름표가
아니라 **읽는 내용**이라 앞에 나서야 한다. 답변 본문·낚시배 이름과 같다. */
.side h3,
.panel > h2,
.detail .kind,
.detail h3{
text-shadow:
0 -1px 0 rgba(var(--sh),.16),
0 1px 0 var(--eng-light);
}
/* 쪽빛 칸 위의 이름표 — 바탕이 흰색이 아니라 아래 빛줄을 조금 눌러 둔다.
★ .answer-panel > h2 는 위 .panel > h2 와 특이도가 같다. **뒤에** 두어야
이긴다 — 앞으로 옮기면 쪽빛 칸 이름표가 흰 카드용 값을 쓰게 된다. */
.console .hint,
.answer-panel > h2{
text-shadow:
0 -1px 0 rgba(var(--sh),.22),
0 1px 0 rgba(var(--hl),.85);
}
/* 곁버튼은 흰 면이라 밝은 쪽을 더 세게 줘야 홈이 보인다 */
.console .btn.ghost{
text-shadow:
0 -1px 0 rgba(var(--sh),.20),
0 1px 0 rgba(var(--hl),.95);
}
/* ★ 주황 버튼의 아랫줄은 흰색이 아니라 **밝은 주황**이다.
흰 선을 그으면 새긴 것이 아니라 글자에 흰 테를 두른 것처럼 보인다.
파인 자리라도 그 면의 색으로 빛나야 같은 재질로 읽힌다. */
.console .btn:not(.ghost){
text-shadow:
0 -1px 0 rgba(var(--btn-sh),.30),
0 1px 0 rgba(var(--btn-hl),.75);
}
/* ghost 버튼('검색만')의 테두리는 흰 박스용 옅은 선이라 쪽빛 위에서 사라진다 */
.console .btn.ghost{border-color:var(--bay-line)}
.console .btn.ghost:hover{border-color:var(--bay-rail)}
/* 근거 번호는 주황 글씨다. 쪽빛 위에서 탁해져 한 단 진하게 내린다 */
.answer-panel /* ★ 아직 답이 오기 전, '무엇이 올 자리인지' 알려 주는 글.
읽는 글이 아니라 **안내**라 한 단 물러나 보여야 한다. 쪽빛 칸 위에서는
곁말색(--dim)이 대비 2.9:1 로 떨어지므로 --on-bay-dim 을 쓴다(7.6:1). */
.answer .ph{color:var(--on-bay-dim);font-size:14.5px}
.answer .cite{color:var(--bay-cite)}
/* max-width 를 걷어냈다(사용자 지정) — 66ch 로 묶으면 넓은 화면에서 오른쪽에
빈 띠가 남아 카드 안이 한쪽으로 쏠려 보인다. 이제 좌우 여백이 카드 패딩
하나로 같아진다. */
.answer{font-size:15.5px;line-height:1.85;white-space:pre-wrap;margin:0;
letter-spacing:-.003em}
/* ★ 답변 칸은 **처음 크기 밑으로 내려가지 않는다**(2026-08-09 지정).
--answer-min 은 아래 쌍둥이를 재서 JS 가 넣는다. 값이 아직 없을 때를 대비해
3줄치를 기본으로 둔다 — 그래야 스크립트가 늦어도 칸이 한 줄로 쪼그라들지 않는다. */
.answer:not(.answer-ghost){min-height:var(--answer-min, calc(3 * 1.85 * 15.5px))}
/* 자리만 차지하지 않게 화면에서 빼 둔다. display:none 이면 높이를 못 잰다.
★ **폭이 본 칸과 같아야** 잰 값이 맞다. left/right:0 으로 뒀더니 자리를 잡아
주는 조상이 패널이 아니라 더 바깥이어서, 390px 에서 3줄로 접혀 80px 이
나왔다 — 실제 칸은 4줄 108px 이었다. 그래서 답변이 오는 순간 칸이
108 → 80 으로 **줄었다**(실측). 패널을 기준으로 삼고 좌우를 패널 안여백에
맞춘다. */
.answer-panel{position:relative}
.answer-ghost{position:absolute;visibility:hidden;pointer-events:none;
left:var(--pad);right:var(--pad);min-height:0;height:auto}
.answer .cite{
font-family:var(--mono);font-size:12px;color:var(--sonar-ink);
text-decoration:none;border-bottom:1px dotted var(--sonar);padding:0 1px;
}
.answer .cite:hover{background:rgba(var(--sonar-rgb),.14)}
/* 시그니처 — 조황 리턴 바 */
/* ★ 행을 하나씩 구분한다 (2026-08-05 지정).
한 배가 한 줄이 아니다 — 이름·마리수 아래로 '출조 5건 · 최근 …', '물때 …'
같은 곁줄이 두세 개 더 붙는다. 실선 하나만 그으면 어디부터 어디까지가
같은 배인지 눈으로 세어야 한다.
▣ 띠(band)로 묶는다 — 한 칸 걸러 옅게 깔면 경계마다 색이 바뀌어
곁줄까지 통째로 한 배로 읽힌다. 줄이 아니라 **면**이 구분한다.
▣ 좌우로 카드 안쪽 여백만큼 넓힌다(margin 음수). 띠가 글자에서 끝나면
덧칠한 것처럼 보이고, 카드 안쪽 끝까지 닿아야 '칸'으로 보인다.
▣ 실선은 남긴다 — 띠가 없는 홀수 칸끼리 맞닿는 자리는 색차가 없다.
▣ 손이 올라간 줄은 한 단 더 진하게. 어느 줄을 보고 있는지 알려 준다. */
.boat{
display:grid; grid-template-columns:22px 1fr auto; gap:10px 12px;
align-items:baseline;
padding:11px 10px; margin:0 -10px;
border-radius:6px;
transition:background .12s;
/* ★ 배와 배 사이는 **음각선 하나로만** 가른다 (2026-08-05 지정).
한 칸 걸러 띠를 깔던 것을 걷어냈다. 배 하나가 이미 네 줄(이름·홈·출조·
물때)이라, 거기에 띠까지 얹으니 표가 아니라 카드 더미로 보였다.
선 하나면 충분하다 — 세는 눈은 색이 아니라 경계를 따라간다.
★ 띠가 없어진 만큼 선이 혼자 가르는 일을 다 진다. 한 줄짜리 회색 선은
그어 놓은 금이지 파인 자국이 아니라, 세 겹으로 판다 —
border-top : 홈의 위쪽 모서리
inset 0 4px 5px -4px: 그 아래로 떨어지는 그늘(밝은 테마에서 일한다)
inset 0 1px 0 빛 : 모서리 아래 반사(어두운 테마에서 일한다) */
border-top:1px solid rgba(var(--sh),.22);
box-shadow:
inset 0 1px 0 rgba(var(--hl),.95),
inset 0 4px 5px -4px rgba(var(--sh),.30);
}
/* 첫 줄 위에는 팔 자리가 없다 — 카드 안쪽 여백이라 홈이 뜬금없이 보인다 */
.boat:first-of-type{border-top:0;box-shadow:none}
/* 손이 올라간 줄만 아주 옅게 — 늘 깔린 띠가 아니라 **지금 보는 줄** 표시다.
줄이 여덟이라 이것마저 없으면 가로로 눈이 미끄러진다. */
.boat:hover{background:rgba(var(--sh),.055)}
.boat .rank{font-family:var(--mono);font-size:12px;color:var(--dim)}
/* ── 가운데 칸의 「오늘 조황 갈래」 (2026-09-24 지시) ──────────────
★ 오른쪽 카드(.facts)에서 옮겨 온 덩이라 **그 옷을 그대로 입는다** —
알약(.tags a)·곁줄(.more)은 이미 그 카드의 규칙이 있다. 여기서는
가운데 칸의 판(.panel) 안에 들어가며 달라지는 것만 적는다.
★ 칸 이름이 h3 이 아니라 h2 다(가운데 칸의 다른 판과 같은 층) — 크기는
판의 h2 규칙이 정하고, 알약은 카드의 규칙이 정한다. */
.panel.facts .tags{margin:8px 0 0}
.panel.facts .more{margin:8px 0 0}
}
/* ★ 배 이름은 솟게 한다 (2026-08-05 지정) — 이 표에서 눈이 가장 먼저
닿아야 하는 낱말이다. 주위가 전부 새겨져(음각) 물러난 자리라, 하나만
솟으면 그 대비로 이름이 먼저 잡힌다.
0 -1px 0 희게 : 윗면이 빛을 받는 자리
0 1px 0 어둡게 : 아랫면 그늘 — 두께
0 2px 3px 옅게 : 바닥에 지는 그림자
★ 제목(h1)처럼 계단을 여러 칸 쌓지 않는다. 14px 글씨에 두께를 주면
획이 뭉갠다. 한 칸이면 솟은 것으로 읽히기에 충분하다. */
.boat .nm{
font-weight:700;
text-shadow:
0 -1px 0 rgba(var(--hl),.95),
0 1px 0 rgba(var(--sh),.28),
0 2px 3px rgba(var(--sh),.16);
}
.boat .loc{color:var(--dim);font-size:12px;font-family:var(--mono);margin-left:8px}
/* ══ 「조과 분석」 — 순위 줄·오른쪽 선박 정보 (2026-09-28 지시) ═══════════════
*"naksigo.com 의 조황정보에서 검색된 낚시배 순위 내역에서 조과 예측 앞에
「조과분석」, 우측의 선박 정보에도 조과 예측 좌측에 조과 분석을 넣어서
기능을 추가해."*
▣ 층은 layout/_boattrend.php **한 벌**을 그대로 쓴다(다섯 앱 md5 규칙 —
안 고쳤다). 이 첫 화면은 껍데기(layout/shell)를 안 쓰므로 shell 이 가진
.btbtn 옷과 층 include 가 여기까지 오지 않는다 — 그래서 여기 둔다.
▣ 옷은 **배 낱장(/boat, shell.php 의 .btbtn)과 같은 값**이다 — 분석은
테두리만 있는 조용한 단추, 예측은 채운 호박. 순위 줄의 작은 알약도 같은
규율로 **테두리 알약**이다(예측 알약 .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}
.fccall .rfcico{width:var(--btbtn-ico,11px);height:var(--btbtn-ico,11px);flex:0 0 auto}
.boat .fcmini.btmini{display:inline-flex;align-items:center;gap:3px;
background:var(--hull);color:var(--ink);box-shadow:none;
outline:1px solid var(--line);outline-offset:-1px}
.boat .fcmini.btmini + .fcmini{margin-left:4px}
.boat .fcmini.btmini:hover{background:var(--hull-2);filter:none}
.boat .fcmini.btmini:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.boat .fcmini.btmini .rfcico{width:var(--btbtn-ico,11px);height:var(--btbtn-ico,11px);flex:0 0 auto}
/* .num 은 '평균·최대 + 조황등급 + 최대어' 를 담는다. 통째로 nowrap 이면
다섯째 칸이 오른쪽 밖으로 밀려 잘렸다 — 셀은 줄바꿈을 허용하고
**덩어리 안쪽만** 붙여 둔다. */
/* ★ 평균 마리수를 뺀 뒤로 이 칸은 '최대어 · 등급 · 좋아요/관심선박' 이다
(2026-08-09 지정). 좁은 화면에서 접히지 않게 한 줄로 세운다. */
.boat .num .nkslot{display:inline-flex;vertical-align:baseline}
.boat .num{font-family:var(--mono);font-size:12px;color:var(--lamp);text-align:right;
min-width:0}
/* 평균 마리수는 이 줄에서 가장 먼저 읽히는 숫자라 크기를 지킨다 —
라벨만 한 단 줄여 숫자가 더 도드라진다. */
.boat .num b{font-size:13px}
.boat .num s{color:var(--dim);text-decoration:none;font-size:11px}
/* ★ 조황 막대를 뺐다 (2026-08-05 지정).
막대는 평균 마리수를 배들끼리 견준 **상대 길이**였는데, 같은 줄에 이미
'평균 21 · 전체 21' 과 다섯 칸 등급이 숫자로 서 있다. 같은 것을 세 번
말하는 셈이라 줄만 길어졌다.
★ 막대가 지고 있던 '표본이 적다'는 경고(빗금)는 사라지지 않는다 —
곁줄에 '출조 1건 — 표본이 적어 단정하기 어렵습니다'가 붉게 남는다.
형태로 주던 것을 글로만 주게 되니, 그 문구는 더 지워선 안 된다. */
/* ★ 첫 줄(배 이름·마리수)과 곁줄(출조·물때) 사이에도 음각선을 판다
(2026-08-05 지정). 한 배 안에서도 **단정 지은 값**과 **그 근거**는 성격이
다르다. 줄 사이 여백만으로는 어디까지가 결론인지 흐리다.
★ 칸 사이 구분선(.boat 위)보다 얕게 판다(.13 ↔ .17). 같은 깊이로 파면
한 배가 두 배로 쪼개져 보인다 — 안쪽 홈은 바깥 홈보다 얕아야 한다.
★ 이 줄은 grid-column:2/-1 이라 순위 숫자 칸을 비우고 배 이름부터 시작한다.
홈도 그 자리에서 시작해 조황 막대와 왼쪽 끝이 맞는다. */
.boat .why{
grid-column:2 / -1;font-family:var(--mono);font-size:11px;color:var(--dim);
margin-top:7px;
}
/* ★ '표본이 적어 단정하기 어렵습니다' 는 **굵게 쓰지 않는다** (2026-08-11 지정).
굵히면 경고처럼 읽혀 그 배가 나쁜 배처럼 보인다 — 실은 '아직 모른다' 는 말이다.
일반 서체로 한 단 연하게 두어, 읽히되 앞서지 않게 한다. */
.boat .why .thin{font-weight:400;font-family:var(--ui);opacity:.78}
/* ── 첫 줄 아래의 음각선 ─────────────────────────────────────────────
▣ 왜 조황 막대 **위**인가
한 배의 첫 줄은 **단정 지은 값**(이름·평균·등급)이고, 그 아래는 전부
그 값이 어떻게 나왔는지다 — 막대도, 출조 건수도, 물때도. 가르는 자리는
막대 위다. 막대 아래에 그으면 막대가 첫 줄에 붙어 버려 어디까지가
결론인지 흐려진다.
▣ 흰 카드 위에서 '빛줄'만으로는 홈이 안 보인다
카드가 #FBFDFD 로 이미 희어서, 아래에 흰 줄을 그어도 1%밖에 안 밝다.
파인 자국은 선이 아니라 **그늘**이다 — 세 겹으로 판다.
선 : 홈의 위쪽 모서리(가장 진한 한 줄)
그늘 : 그 아래로 떨어지는 그림자. 이것이 깊이를 만든다
빛줄 : 모서리 바로 아래 반사. 흰 카드에선 거의 안 보이지만
어두운 테마에서는 이 줄이 홈을 완성한다
▣ 칸 사이 구분선보다 얕다(.16 ↔ .22)
안쪽 홈이 바깥보다 깊으면 한 배가 두 배로 쪼개져 보인다. */
.boat .cut{
grid-column:2 / -1;
height:1px;margin:7px 0 0;
background:rgba(var(--sh),.16);
box-shadow:
0 1px 0 rgba(var(--hl),.9),
0 3px 4px -3px rgba(var(--sh),.30);
}
.boat .why b{color:var(--sonar-hot);font-weight:600}
/* 최근 출조 조건 — 출조 건수 줄 **아래** 한 단 더. 같은 줄에 이어 붙이면
한 줄이 너무 길어져 어디까지가 조과이고 어디부터가 조건인지 안 갈린다. */
/* ── 조황 등급 다섯 칸 (2026-08-09 새로 만듦) ────────────────────────
▣ 무엇을 바꿨나
전에는 글자 ■/□ 였다. 글자라서 **높이를 글꼴이 정했고**(11px 정사각),
납작해서 옆의 숫자와 키가 안 맞았다.
이제 진짜 칸이다 — 좌우폭은 **그대로 11px**(줄 길이를 건드리지 않으려고),
높이만 **왼쪽 숫자만큼**(13px = .num b) 세우고 입체를 준다.
▣ 입체는 두 방향이다 — 이것이 이 눈금의 핵심이다
채운 칸 = **도드라진다**(양각) : 위가 밝고 아래가 어두운 결 + 아래로 그림자
빈 칸 = **파여 있다**(음각) : 안쪽 위 그늘 + 아래 모서리 빛줄
그래서 다섯 칸이 계단처럼 읽힌다 — 올라온 것과 내려간 것.
▣ ★ 색을 못 봐도 셀 수 있어야 한다
전에는 글리프(■/□)가 그 일을 했다. 지금은 **채움과 입체 방향**이 한다 —
채운 칸은 색이 차 있고 위로 솟았고, 빈 칸은 비었고 안으로 파였다.
흑백으로 찍어도 갈린다. 색만 다르게 만들지 말 것.
▣ ★ 줄이 좁아져도 다섯 칸이 쪼개지지 않는다
flex:0 0 auto + nowrap. 좁은 화면에서 칸이 세로로 흩어진 적이 있다. */
.boat .grade{display:inline-flex;gap:2px;margin-left:8px;
vertical-align:-2px; /* 키가 커졌으니 밑선을 조금 내려 숫자와 가운데를 맞춘다 */
letter-spacing:0;white-space:nowrap;flex:0 0 auto}
.boat .grade i{
flex:0 0 auto;
width:11px;height:13px; /* ★ 폭은 옛 글자와 같게, 높이는 왼쪽 숫자(.num b 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);
}
/* 채운 칸 — 솟은 칸. 위에서 빛이 오므로 **위가 밝고 아래가 어둡다**.
(빈 칸과 정확히 반대다 — 그 반대됨이 '차 있다'를 말한다) */
.boat .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);
}
/* 등급 자체가 없을 때 — **점선 빈 칸 다섯**. '나쁘다'가 아니라 '매길 근거가
없다'는 뜻이라, 있는 등급의 빈 칸과 같은 모양이면 안 된다.
★ 2026-09-04 — 여기만 **옅게(opacity:.5)** 로 남아 있었다. 다섯 사이트가
함께 정한 「없음」의 결은 `background:none · 1px dashed · box-shadow:none
· opacity:.85` 다(docs/onfishing_chart_spec.md 「지수가 없을 때」).
· 옅게만 하면 **파인 홈이 그대로 남아** ★0(재어 보니 최악)과 같은 그림이
되고, 흑백으로 찍으면 아예 안 갈린다. 점선은 '아직 안 찍힌 틀'이다.
· 같은 규칙을 naksigo `/today`(.today .src .grade.none i)·m.onfishing
(.gidx.none i)·fishlog(.v.gx.none .pips i)이 이미 쓰고 있다. */
.boat .grade.none i{background:none;border:1px dashed var(--line);
box-shadow:none;opacity:.85}
/* 최대어 — 조과(주황)와 구분되게 물빛으로 두고 '추정'을 흐리게 붙인다 */
.boat .big{display:inline-block;margin-left:8px;font-size:11.5px;color:var(--water);
white-space:nowrap}
.boat .big s{text-decoration:none;opacity:.6;margin-left:3px;font-size:10.5px}
.boat .env{margin-top:3px;color:var(--dim);display:flex;flex-wrap:wrap;
align-items:baseline;gap:0 5px}
.boat .env b{color:var(--water);font-weight:600} /* 조건은 물빛으로 — 조과(주황)와 구분 */
.boat .env s{text-decoration:none;opacity:.7} /* 물세기·날짜 같은 곁가지 */
.boat .env i{font-style:normal;opacity:.35} /* 구분점 */
/* 근거 */
/* ★ 근거 줄은 **`#sources` 안에서만** 이 모양이다 (2026-09-01 실측으로 좁혔다).
`.src` 는 이름이 너무 흔하다 — 조황글 낱장(report.php)의 맨 아랫줄
`글과 사진의 권리는…
` 과 **부딪쳤다**. 그 낱장을 오른쪽
칸에 펴자 그 한 줄이 이 규칙(격자·테두리·12px 안쪽여백)을 뒤집어써
**높이 273px** 짜리 덩어리가 됐다(실측). 이름을 바꾸는 대신 자리를 좁힌다 —
낱장은 onfishing 과 같은 파일이라 거기 클래스를 건드리면 두 사이트가 갈린다. */
#sources .src{padding:12px 0;border-top:1px solid var(--line);display:grid;
grid-template-columns:30px 1fr;gap:12px}
#sources .src:first-of-type{border-top:0}
#sources .src .n{font-family:var(--mono);font-size:12px;color:var(--sonar-ink)}
#sources .src .t{margin:0 0 4px;font-size:14px}
/* ★ 근거 글의 **제목 전체**가 눌린다 (2026-09-01 지시). 전에는 아래 「원문 보기」
한 조각만 눌렸는데, 사람이 먼저 손을 대는 곳은 제목이다.
▣ ★ 가는 곳은 **우리 낱장**(/report/{id})이지 남의 원문이 아니다 —
onfishing.net 의 「조황글」과 같은 내용으로 우리가 그린다(Pages::report).
원문으로 바로 보내면 어종·물때·배 제원 같은 우리가 붙인 값이 다 사라지고,
그 사이트가 글을 내리면 손님은 빈손이 된다. 「원문 보기」는 그대로 남긴다.
▣ 밑줄을 늘 긋지 않는다 — 근거 목록은 제목이 여럿이라 밑줄밭이 된다.
손이 가면(hover) 그때 긋는다. */
#sources .src .t a.rlink{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
#sources .src .t a.rlink:hover,#sources .src .t a.rlink:focus-visible{border-bottom-color:currentColor}
/* ══ 조황글 낱장의 규칙을 **이 칸에도** (2026-09-01) ══════════════════════
★ 낱장(/report/{id})의 CSS 는 그 페이지에만 있다. 오른쪽 칸에 낱장 HTML 만
가져다 넣으면 글자·색·여백이 **이 화면 기본값**으로 떨어진다 — 맨 아랫줄
「글과 사진의 권리는…」이 15px 진한 글씨에 밑줄 친 주황 링크로 섰다(실측).
★ 그래서 낱장과 **같은 규칙**을 여기에 통째로 둔다(칸에 맞춘 몇 줄은 아래에서
덮는다). 두 자리에 같은 글이 있다 — 낱장은 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 지시: "우측섹션에 표시되는 조황글에서는
조과 추이, 빈자리 찾기, 조과 분석, 조과 예측 은 박스를 작게 표시해줘, 특히 좌우 여백은 줄여줘").
보이는 상자만 줄인다 — 누르는 넓이 44px 은 .ptbtn::before 누름판이 그대로 지킨다. 낱장·폰은 그대로. */
#detailBody .rpacts .ptcall{gap:4px 5px;margin:4px 0 0}
#detailBody .rpacts .ptbtn{padding:3px 7px;min-height:26px;font-size:12px;border-radius:7px;gap:3px}
#detailBody .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)}
/* ★ 「예약 ↗」·「홈페이지 ↗」 — 선박 제목 줄 오른쪽 (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 지시) */
.rp .spec h2 .go:hover{border-color:var(--accent,#0f6fd1)}
/* ★ 여섯 칸을 **한 줄에** 늘어놓는다 (2026-09-01 지시: "선사·항구·주소·정원·
톤수·주어종을 같은 줄에 배치해. 지금은 라인이 바뀌고 있어").
▣ 전에는 `58px | 1fr` 두 칸 격자라 **항목마다 한 줄**을 먹었다 — 여섯 줄이다.
폰에서 이 상자 하나가 화면의 3분의 1을 차지했다.
▣ 이제 항목을 낱개(div.it)로 묶어 옆으로 흘린다. 자리가 모자라면 **항목째**
다음 줄로 넘어간다 — 이름과 값이 갈라지지 않는다(그것이 지금의 불만이다).
▣ 주소는 길어 혼자 한 줄을 쓸 수 있다. 그래도 이름과 값은 붙어 있다. */
.rp .spec dl{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:13px}
.rp .spec dl > .it{display:flex;align-items:baseline;gap:5px;min-width:0}
.rp .spec dt{color:var(--ink-soft);font-size:12px;flex:0 0 auto}
.rp .spec dd{margin:0;word-break:keep-all;min-width:0}
@media (max-width:520px){ .rp .spec dl{gap:3px 11px;font-size:12.5px} }
/* ══ 오른쪽 칸에 편 조황글 (2026-09-01 · onfishing 에서 옮김) ═══════════════════════════════════
낱장을 그대로 가져다 넣으므로 글자 크기만 이 칸에 맞춘다 — 칸 폭이
428px 뿐이라 낱장의 30px 제목은 세 줄을 먹는다(실측).
▣ 낱장 자체는 안 건드린다(거기서는 그 크기가 옳다). */
#detail .rp{padding:0;max-width:none}
#detail .rp h1{font-size:17px;line-height:1.45;margin:2px 0 8px}
#detail .rp .spec{padding:10px 12px}
/* ★ 선박 박스 — 낱장의 규칙이 **여기까지 안 따라온다**(낱장 CSS 는 그 쪽
페이지에만 있다). 그래서 시트/칸 안에서는 dl 이 브라우저 기본값으로 떨어져
이름과 값이 **줄마다 따로** 섰다 (2026-09-01 지시: "같은 줄에 배치해.
지금은 라인이 바뀌고 있어"). 낱장과 **같은 규칙**을 여기에도 둔다.
★ 두 자리에 같은 글이 있다 — 낱장은 Pages.php 의 reportCss(). 고칠 때 둘 다. */
#detail .rp .spec dl{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:13px}
#detail .rp .spec dl > .it{display:flex;align-items:baseline;gap:5px;min-width:0}
#detail .rp .spec dt{color:var(--ink-soft);font-size:12px;flex:0 0 auto}
#detail .rp .spec dd{margin:0;word-break:keep-all;min-width:0}
#detail .rp img.th{max-height:260px;object-fit:cover}
#sources .src .m{font-family:var(--mono);font-size:11.5px;color:var(--dim);
display:flex;gap:12px;flex-wrap:wrap}
#sources .src a.orig{font-family:var(--mono);font-size:11.5px}
#sources .src:target .n{background:var(--sonar);color:var(--on-sonar);padding:0 4px}
/* ── 진행 단계 — 계기 부팅 순서처럼 ─────────────────────── */
/* ── '처리 중' 은 **상자를 벗는다** (2026-08-09 지정) ─────────────────
▣ 왜
답을 기다리는 동안 보이는 것은 진행 단계뿐인데, 그것이 카드 안에 담겨
있으면 **답변 카드와 같은 무게**로 서 있다. 기다림은 결과가 아니다 —
바탕 위에 얹힌 글자여야 한다.
▣ ★ .panel 클래스는 **떼지 않는다**
커튼 여닫기(openPanel/closePanel)가 .panel 을 잡고 높이를 잰다.
클래스를 떼면 '처리 중'이 펼쳐지지도 걷히지도 않는다.
그래서 id 로 덮어쓴다 — 옷만 벗기고 뼈대는 그대로 둔다. */
#stagePanel{background:none;border:0;box-shadow:none;padding:2px 0 0}
/* 제목도 한 단 낮춘다 — 상자가 없으니 크기까지 크면 혼자 튄다. */
#stagePanel > h2{font-size:14px;color:var(--ink-soft);font-weight:700;
border:0;padding:0;margin:0 0 8px}
#stagePanel > h2 .meta{color:var(--dim)}
.stages{display:grid;gap:9px;margin:0}
.stg{display:grid;grid-template-columns:16px 1fr auto;gap:10px;align-items:baseline;
font-size:13.5px;color:var(--dim)}
.stg .dot{width:8px;height:8px;border-radius:50%;background:var(--line);
align-self:center;justify-self:center}
.stg .t{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.stg.on{color:var(--ink)}
.stg.on .dot{background:var(--sonar);animation:pulse 1.1s ease-in-out infinite}
.stg.done{color:var(--dim)}
.stg.done .dot{background:var(--water)}
/* 단계 라벨 뒤 괄호 — 줄을 바꾸지 않고 문장에 이어 붙는다 */
.stg .sub{font-style:normal;font-family:var(--mono);font-size:11px;
color:var(--water)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}
/* 스트리밍 커서
★ **깜빡임을 걷었다** (2026-08-21 운영자 신고: "답변시 떨림이 있어").
▣ 무엇이 떨렸나 — 글자가 흘러드는 동안 커서가 1초마다 켜졌다 꺼졌다 했다.
글은 오른쪽으로 자라는데 그 끝에서 막대가 명멸하니, 답 전체가 흔들리는
것처럼 보인다(화면을 0.4초 간격으로 찍어 대조하니 같은 장면이 되돌아왔다 —
깜빡임이다).
▣ 깜빡임이 하던 일은 '아직 오는 중' 을 알리는 것이었다. 그 일은 **글자가
실제로 늘어나는 것**이 이미 하고 있고, 위의 진행 줄도 말로 알린다.
그래서 막대는 **가만히 켜 둔다** — 자리는 지키되 떨지 않는다.
▣ prefers-reduced-motion 을 따로 둘 필요도 없어졌다(움직임이 없다). */
.caret{display:inline-block;width:7px;height:1.05em;background:var(--sonar);
vertical-align:-2px;margin-left:2px}
/* ── 지난 질문 ─────────────────────────────────────────── */
.hist{margin-top:22px}
.hist h3{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--water);
margin:0 0 9px;font-weight:600;display:flex;align-items:center;gap:12px}
.hist h3 .clear{margin-left:auto;letter-spacing:.04em}
/* 지난 질문 — 박스를 없애고 글 목록처럼 둔다.
왼쪽 칸은 좁다. 항목마다 테두리를 두르면 다섯 개만 있어도 답답하고,
정작 읽어야 할 질문 글씨가 작아 보인다. 삭제는 줄 끝 아이콘으로 붙인다. */
/* ★ 그리드·플렉스 항목은 기본이 min-width:auto 라 **내용만큼 늘어난다.**
긴 질문이 카드 밖으로 삐져나가 '…' 없이 그냥 잘렸다(카드가 클립할 뿐이었다).
min-width:0 을 줘야 칸에 맞춰 줄고 그때서야 text-overflow 가 동작한다. */
.hlist{display:grid;gap:1px;min-width:0}
/* ── 지난 질문 접기 (2026-08-05 지정) ────────────────────────────────
최근 5개만 보이고 나머지는 접는다. 접힌 줄은 **자리를 차지하지 않아야**
한다 — 투명도만 낮추면 아래 '설정' 카드가 그대로 밀려 있다. */
.hlist[data-folded="1"] .hitem.more{display:none}
.histmore{
width:100%; margin-top:6px; background:transparent; border:0;
border-top:1px solid var(--line);
color:var(--dim); font-family:var(--mono); font-size:11px; letter-spacing:.02em;
padding:8px 4px 2px; cursor:pointer;
display:flex; align-items:center; justify-content:center; gap:6px;
transition:color .12s;
}
.histmore:hover{color:var(--sonar-ink)}
/* 펼침 표시 — 아래를 가리키다가 열리면 뒤집힌다. 글자와 아이콘이 같은 것을
말해야 한다(‘더 보기 ▾’ ↔ ‘접기 ▴’). */
.histmore .caret-i{
font-style:normal; font-size:9px; line-height:1;
transition:transform .18s ease;
}
.histmore[aria-expanded="true"] .caret-i{transform:rotate(180deg)}
/* 한 줄 = 질문(위) + 메타(아래). 세로로 쌓아야 좁은 칸에서 질문이 안 잘린다. */
.hitem{display:flex;flex-direction:column;gap:0;border-radius:var(--r-sm);
padding:6px 8px 7px;min-width:0}
.hitem:hover{background:var(--hull-2)}
.hitem .q{width:100%;min-width:0;background:transparent;border:0;color:var(--ink);
font:inherit;font-size:13px;line-height:1.4;text-align:left;
padding:0;cursor:pointer}
/* 질문은 한 줄로 자른다 — 두 줄이 되면 목록이 아니라 문단으로 보인다 */
.hitem .qt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
display:block;max-width:100%}
/* 시점 → 삭제 순서로 나란히. 왼쪽 정렬이라 눈이 질문에서 바로 이어진다. */
.hitem .meta{display:flex;align-items:center;gap:2px;margin-top:1px}
/* 언제 물었는지 — 같은 질문을 또 하려는지 판단하는 데 필요하다 */
.hitem .when{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
/* ★ 삭제 버튼은 **늘 보인다.** 호버에서만 나오게 했더니 터치 기기에서는
아예 지울 수가 없었고, 마우스에서도 있는 줄 몰랐다.
평소엔 흐리게 두고 가까이 가면 또렷해진다 — 있다는 건 보이되 시끄럽지 않게. */
.hitem .del{flex:0 0 auto;background:transparent;border:0;color:var(--del-ink);
font-size:14px;line-height:1;width:20px;height:20px;border-radius:5px;
cursor:pointer;display:grid;place-items:center;
transition:color .12s,background .12s}
.hitem:hover .del{color:var(--dim)}
.hitem .del:hover,.hitem .del:focus-visible{
color:var(--sonar-hot);background:rgba(var(--hot-rgb),.16)}
/* 알림 */
.note{
/* ★ 알림 박스 바탕은 실버 (2026-08-05 지정).
어두운 화면 때 쓰던 #0A1F2A 자리다. 다른 박스가 전부 흰색·물빛이라
회색 한 칸이 "본문이 아니라 곁말"이라는 표시가 된다.
은색은 물빛이 섞이지 않은 중립 회색이어야 옆 칸과 안 헷갈린다. */
border-left:2px solid var(--water); background:var(--note-bg); padding:10px 14px;
font-size:13.5px; color:var(--note-ink);
/* 위아래 모두 카드 간격과 같게. 예전엔 아래만 18px 이라 이 줄만
다른 리듬으로 놓여 있었다. */
margin:0 0 var(--gap);
}
.note.warn{border-color:var(--sonar-hot);color:var(--warn-ink)}
.note b{color:var(--ink)}
.spinner{width:13px;height:13px;border:2px solid rgba(var(--sh),.35);
border-top-color:var(--on-sonar);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
[hidden]{display:none !important}
/* ══════════ 흐르는 안내 띠 ══════════
오른쪽 → 왼쪽. 두 벌을 이어 붙이고 **정확히 절반**만큼 옮겨 끊김을 없앤다.
컨테이너가 overflow:hidden 이라 본문이 가로로 밀리지 않는다(규칙 §3). */
.marquee{
/* ★ 절대배치로 화면 한가운데에 못 박았더니 **모든 폭에서 브랜드·로그인과
겹쳤다**(680px 은 1400px 에서만 여유가 있다). flex 항목으로 되돌리고
양옆 여백(.sp)이 밀어 가운데에 서게 한다 — 브랜드(161)와 로그인(157)이
거의 같은 폭이라 결과도 화면 한가운데다.
flex:0 1 680px → 자리가 넉넉하면 680px, 좁아지면 줄어든다. */
/* 폭 규칙을 두 번 고쳤다.
flex:0 1 680px → 900~1100px 에서 머리띠가 두세 줄로 접혔다(줄어들 수 없어서)
flex:1 1 200px → 접히진 않지만 넓은 화면에서도 680px 에 못 미쳤다
기본값 680px + **줄어들 수 있게**(shrink 1) + 최대 680px 이 답이다:
자리가 넉넉하면 정확히 680px, 좁아지면 접히지 않고 줄어든다. */
/* ★ 이제 판 안을 통째로 쓴다 (2026-08-09) — 머리띠 안의 좁은 틈이 아니다.
680px 로 묶던 규칙을 걷어냈다. */
width:100%; min-width:0;
position:relative; overflow:hidden;
background:transparent; padding:7px 0;
/* 양 끝을 흐리게 — 글자가 테두리에서 뚝 잘리지 않고 스며들 듯 사라진다.
★ 6%/94% 는 1400px 화면에서 양 끝 84px 이 옅어져, 거기 걸린 글자가
읽히지 않았다. 3%/97% 로 좁힌다 — 스며드는 느낌은 남고 옅은 구간만 준다. */
-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
/* ★ 다 지나가면 **빈 채로** 10초 쉰다 (2026-08-06 지정)
쉬지 않고 흐르면 눈이 계속 그쪽으로 끌려가 정작 질문 칸에 집중이 안 된다.
쉬는 동안 문구가 서 있으면 그것대로 계속 읽히므로, 아예 **띠를 비운다.**
▣ 왜 CSS 가 아니라 JS(initMarquee)인가
'완전히 빠져나간 자리'는 -(글줄 폭)이고 '들어오기 직전'은 +(띠 폭)이다.
transform 의 백분율은 **제 폭** 기준이라 띠 폭을 가리킬 수 없다 —
두 값을 실제로 재서 px 로 넣어야 한다. 그래서 Web Animations API 로
키프레임을 만든다(멈춤 구간은 같은 값을 두 번 두어 붙잡는다).
▣ 애니메이션이 붙기 전에는 숨겨 둔다
JS 가 자리를 잡기 전 한 프레임 동안 문구가 왼쪽에 붙어 보였다.
.marquee-track 은 기본이 투명이고, initMarquee 가 자리를 잡은 뒤 켠다. */
.marquee-track{display:flex; width:max-content; opacity:0}
.marquee-track.on{opacity:1}
.marquee-line{display:flex; align-items:center}
.mq-item{
white-space:nowrap; padding:0 22px; position:relative;
/* ★ 전광판 글씨 — 고정폭에 자간을 벌린다. LED 판은 글자마다 같은 칸을 쓰고,
벌어진 자간이 '점으로 그린 글자' 처럼 읽힌다. */
/* ★ 잘 안 보인다는 지적으로 셋을 함께 올렸다 (2026-08-09 지정).
① 크기 12.5 → 13.5px ② 굵기 600 → 700 ③ 색 --ink-soft → --ink
음각은 본디 대비를 깎는다(글자가 바탕에 가까워야 새겨져 보인다).
그 손해를 **크기·굵기**로 메우고 색은 본문 먹까지 올린다 —
새김은 이제 그림자 두 줄이 혼자 만든다. */
font-family:var(--mono); font-size:13.5px; font-weight:700;
letter-spacing:.02em;
color:var(--ink);
text-shadow:
0 -1px 0 rgba(var(--sh),.40), /* 윗입술 그늘 — 파인 쪽 */
0 1px 0 var(--eng-light); /* 아랫입술 빛줄 — 올라온 쪽 */
}
/* 문구 사이 구분점 — 마지막 뒤에도 찍혀야 두 벌이 이어질 때 간격이 같다 */
.mq-item::after{
content:"·"; position:absolute; right:-3px; color:var(--dim); opacity:.7;
}
/* ★ 마지막 한 줄(부르는 말)은 판의 강조색으로 — 전광판에서 색이 바뀌는 줄은
"이것을 보라" 는 뜻이다. */
/* 마지막 한 줄(부르는 말)만 물빛으로 — 같은 깊이로 새기되 색만 다르다.
★ --water 를 그대로 쓰니 여명·노을·해도에서 대비가 3.2~3.8 이었다(실측).
물빛에 본문 먹을 섞어 한 단 가라앉힌다 — 색은 여전히 물빛인데 읽힌다.
본문이 --ink 로 올라갔으므로 이쪽도 같이 진하게(62 → 50) 맞춘다. */
.mq-cta{color:color-mix(in srgb, var(--water) 50%, var(--ink)); font-weight:800}
/* 마우스를 올리면 멈춘다 — 읽고 싶은 문구가 지나가 버리면 답답하다.
(Web Animations 로 돌리므로 멈추는 것도 JS 가 한다 — initMarquee 참고) */
/* ── 커튼 여닫기 (2026-08-05 지정) ──────────────────────────────────
'처리 중'은 **아래로 펼쳐지며** 나타나고, 답이 다 오면 **위로 걷히며**
사라진다. 커튼과 같다 — 위에 매달려 있어 내려오고 올라간다.
▣ 왜 애니메이션 클래스인가
[hidden] 은 display:none 이라 transition 이 걸리지 않는다. 그래서
나타날 때·사라질 때 각각 한 번 도는 keyframes 를 쓰고, 사라지는 쪽은
**애니메이션이 끝난 뒤에** JS 가 hidden 을 채운다(closePanel).
▣ 왜 max-height 를 함께 움직이나
높이가 그대로면 커튼만 흐려지고 아래 칸들은 제자리에 멈춰 있다.
높이·안쪽 여백·바깥 여백을 같이 접어야 아래 답변·순위 칸이 **따라
올라오며** 자리를 메운다. 그 따라 오는 움직임이 '걷힌다'는 느낌을 만든다.
★ 끝값은 **JS 가 잰 실제 높이**(--curtain-h)다. 340px 로 박아 뒀더니
내용이 191px 인 칸에서 56% 지점에 이미 다 펼쳐지고 나머지 시간은
아무 일도 일어나지 않았다 — 시간을 늘려도 펼침이 느려지지 않은 이유다.
(setCurtainHeight 참고. JS 가 없을 때를 대비해 340px 를 기본값으로 둔다.)
▣ overflow:hidden 은 애니메이션 동안만 건다
평소에도 걸어 두면 카드가 접힐 때 안쪽 글이 잘리는 게 보인다. 또 이
상자는 그림자를 갖고 있는데, overflow 는 제 그림자를 자르지 않으므로
입체감은 그대로 남는다. */
@keyframes curtainDown{
from{max-height:0; opacity:0; transform:translateY(-10px)}
55% {opacity:1}
to {max-height:var(--curtain-h,340px); opacity:1; transform:none}
}
@keyframes curtainUp{
from{max-height:var(--curtain-h,340px); opacity:1; transform:none}
35% {opacity:.35}
to {max-height:0; opacity:0; transform:translateY(-14px);
padding-top:0; padding-bottom:0; margin-bottom:0}
}
/* ★ 속도 — 펼치는 쪽 2.5s / 걷는 쪽 0.7s (2026-08-06 지정)
▣ 펼치는 쪽만 두 배 더 느리게 (1.25s → 2.5s)
.72s → 1.25s 로 늦췄더니 '움직였다'는 보이는데 아직 **커튼이 내려오는
것**으로는 안 읽혔다. 천에 무게가 있으면 그만큼 시간이 걸린다. 답변이
4초쯤 걸리는 화면이라 2.5초는 기다림에 얹히지 않는다 — 오히려 그 2.5초
동안 '지금 뭔가 하고 있다'가 계속 보인다.
▣ 걷는 쪽은 1.0s → 0.7s (2026-08-06 지정, 조금 더 빠르게)
사라지는 것을 기다리게 하면 다음 내용(답변)이 늦게 오는 것처럼 느껴진다.
게다가 커튼이 이제 **제 높이만큼** 움직이므로(--curtain-h) 1.0s 는 전부
눈에 보이는 시간이 되어 예전보다 길게 느껴졌다. 나타날 때는 천천히,
물러날 때는 서둘러 — 여는 쪽과 3.6배 차이다.
★ JS 쪽은 손댈 것이 없다 — closePanel 은 초를 세지 않고 animationend 를
기다린다. 그래서 여기 숫자만 고치면 뒷정리 시점이 저절로 따라온다. */
.curtain-in{overflow:hidden; animation:curtainDown 2.5s cubic-bezier(.2,.75,.3,1) both}
/* ★ 내용이 **들어오면서 자라는 칸**을 위한 커튼 (2026-08-08).
답변 칸은 열릴 때 비어 있고(자리표시글 한 줄) 그 뒤로 글이 흘러 들어온다.
그런데 커튼은 **열던 순간의 높이**로 천장(max-height)을 정해 놓는다 —
실측: 천장 116px 인데 내용이 200px 까지 자라, 2.5초 내내 아래쪽이
30~86px 잘려 있었다. 사람 눈에는 **아래 여백이 줄었다가 되돌아오는 것**으로
보인다(커튼이 끝나면 천장이 사라지므로).
그래서 자라는 칸은 **자르지 않고** 밝기와 위치로만 나타낸다 —
커튼처럼 보이는 것보다 여백이 일정한 것이 낫다. */
@keyframes curtainDownSoft{
from{opacity:0; transform:translateY(-10px)}
to {opacity:1; transform:none}
}
.curtain-soft{animation:curtainDownSoft 2.5s cubic-bezier(.2,.75,.3,1) both}
.curtain-out{overflow:hidden; animation:curtainUp .7s cubic-bezier(.45,0,.7,.5) both;
pointer-events:none}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms !important;transition-duration:.01ms !important}
/* 흐르지 않게 두되 글은 읽혀야 한다 — 줄바꿈을 허용해 그 자리에 편다.
(JS 도 이 설정을 보고 아예 움직이지 않는다 — initMarquee)
★ .on 을 안 붙여도 보이게 해야 한다. 여기서는 JS 가 자리를 안 잡는다. */
.marquee-track{animation:none; width:100%; opacity:1}
.marquee-line{flex-wrap:wrap; justify-content:center}
.mq-item{white-space:normal}
}
/* 좁아지면 머리띠는 여러 줄을 허용한다 — 한 줄로 우겨넣으면 글자가 뭉갠다 */
@media (max-width:700px){
.strip{flex-wrap:wrap}
.marquee{flex:1 1 100%; order:3; max-width:none}
.strip .sp{display:none}
}
@media (max-width:560px){
main{padding:28px 16px 72px}
.hint{margin-right:0;width:100%;order:-1}
.boat{grid-template-columns:20px 1fr}
.boat .num{grid-column:1 / -1;text-align:left}
}
/* ★ 로그인·가입 — 테마 아이콘 옆(머리띠 오른쪽). 아이콘들과 같은 높이·같은
테두리로 맞춘다. 글자가 있는 것 하나만 다르면 줄이 삐뚤어 보인다. */
.stripme{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
padding:5px 11px;border-radius:99px;white-space:nowrap;text-decoration:none;
font-size:12.5px;font-weight:700;color:var(--on-strip);
border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.10)}
.stripme:hover{background:rgba(255,255,255,.20);color:var(--on-strip-hi)}
.stripme b{font-family:var(--mono);font-weight:700;color:var(--brand-accent)}
.stripme .nm{max-width:9ch;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){ .stripme{padding:4px 9px;font-size:12px} }
/* ── 회원 기능 — 껍데기(layout/shell.php)와 **같은 모양**이어야 한다 ── */
.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}
.nkacts.link .nklike.on{background:none;border:0;color:var(--sonar-hot)}
.nkacts.link .nkfav.on{background:none;border:0;color:var(--sonar-ink)}
/* ★ 「내 관심선박」 표 — 이름 줄 안에 서는 **작은 표식** (2026-08-11 지정).
▣ 줄에서 가장 큰 것은 배 이름이다. 표가 이름만 해지면 무엇을 먼저 읽어야
할지 흐려진다 — 색으로 알아보게 하고 글자는 한 단 줄인다.
▣ 별 하나를 앞에 세운다. 오른쪽 단추의 별(담김)과 **같은 말**이라
둘이 같은 뜻임이 눈으로 이어진다.
▣ 좁은 화면(≤560px)에서는 글자를 접고 별만 남긴다 — 이름·항구·마리수가
먼저다. 뜻은 title 로 남는다. */
/* ★ 바탕도 테두리도 두지 않는다 (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}
}
/* ★ 담은 배의 줄은 테를 두른다 — 표가 작아진 만큼 **줄 전체**가 알려 준다. */
.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} }
/* ── 평판 별 · 설문 → layout/_survey.php 로 옮겼다 (2026-08-11).
해도 화면도 같은 설문 칸을 쓴다 — 옷이 두 벌이면 한쪽만 고치게 된다. */
/* ── 조과 예측 → layout/_forecast.php 로 옮겼다 (2026-08-11).
선박정보 상세(/boat)·해도 화면도 같은 층을 쓴다 — 옷이 여러 벌이면
한쪽만 고쳐지고 나머지가 어긋난다. */
/* ── 「설문 보기」·참여 층·설문지 작성 → layout/_survey.php (2026-08-11) */
/* ★ 「설문 보기」도 가운데 칸(#svWrite)에 뜬다 (2026-08-11 지정) —
그 칸을 기준으로 ✕ 를 오른쪽 위에 못박는다(이 저장소의 닫기 규칙). */
#svWrite{position:relative}
#svWrite .vwx{position:absolute;top:10px;right:10px}
#svWrite > .kind{display:block;font-size:11px;letter-spacing:.08em;color:var(--sonar-ink);
font-family:var(--mono);margin-bottom:2px}
#svWrite > h2{padding-right:44px}
#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)}
/* ── 「내 관심선박」 목록 (오른쪽 칸) ───────────────────────────────── */
.favlist{list-style:none;margin:8px 0 0;padding:0}
.favrow{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:baseline;
padding:8px 6px;border-top:1px solid var(--line);cursor:pointer;border-radius:6px}
.favrow:first-child{border-top:0}
.favrow:hover{background:var(--hull-2)}
.favrow.now{background:rgba(var(--sonar-rgb),.10)}
/* ★ 칸을 못박는다. 자리를 안 정해 주니 「빼기」가 첫 칸을 차지하고 배 이름이
오른쪽으로 밀려 잘렸다(실측). 이름은 1열, 빼기는 2열에 세로로 걸친다. */
.favrow .fn{grid-column:1;min-width:0;font-weight:700;color:var(--ink);font-size:13.5px;
overflow-wrap:anywhere}
.favrow .fn s{color:var(--dim);text-decoration:none;font-size:11px;font-weight:400}
.favrow .fp{grid-column:1;font-size:11.5px;color:var(--dim);font-family:var(--mono)}
.favrow .favdrop{grid-column:2;grid-row:1/3;align-self:center;justify-self:end;border:1px solid var(--line);
background:var(--hull);color:var(--sonar-hot);border-radius:7px;cursor:pointer;
font-size:11.5px;padding:3px 9px;font-family:var(--ui)}
.favrow .favdrop:hover{border-color:var(--sonar-hot)}
/* ── 물때 날짜 고르개 (2026-08-09 지정) ──────────────────────────────
★ 제목 옆 날짜가 **누를 수 있는 것**으로 보여야 한다. 점선 밑줄 하나면
충분하다 — 알약을 두면 제목보다 단추가 먼저 읽힌다. */
.daypick{border:0;background:none;cursor:pointer;padding:0 2px;margin-left:2px;
font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--water);
border-bottom:1px dotted var(--water)}
.daypick:hover{color:var(--sonar-ink);border-bottom-color:var(--sonar-ink)}
/* 달력 — 카드 안에 떠서 아래를 덮는다. 카드 밖으로 나가면 좁은 화면에서 잘린다. */
.tide{position:relative}
.calpop{position:absolute;z-index:40;left:10px;right:10px;top:38px;
background:var(--hull);border:1px solid var(--line);border-radius:10px;
padding:10px 10px 8px;box-shadow:0 16px 40px -12px rgba(var(--sh),.45)}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.calhead b{font-size:13px;color:var(--lamp)}
.calhead button{border:1px solid var(--line);background:var(--hull);color:var(--ink);
width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:14px;line-height:1}
.calhead button:disabled{opacity:.3;cursor:default}
.calwk,.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calwk span{text-align:center;font-size:10.5px;color:var(--dim);padding:2px 0}
.calwk span:first-child{color:var(--sonar-hot)}
.calgrid button{border:0;background:none;cursor:pointer;border-radius:6px;
padding:5px 0;font-family:var(--mono);font-size:12px;color:var(--ink)}
.calgrid button:hover:not(:disabled){background:var(--hull-2)}
.calgrid button:disabled{color:var(--line);cursor:default}
/* ★ 오늘은 테두리로, 고른 날은 채워서. 색만 다르게 하면 어느 쪽이 '고른 것'
인지 헷갈린다 — 채워진 쪽이 고른 것이다. */
.calgrid button.today{box-shadow:inset 0 0 0 1px var(--water)}
.calgrid button.on{background:var(--sonar);color:var(--on-sonar);font-weight:700}
.calnote{margin:8px 0 0;font-size:10.5px;color:var(--dim);line-height:1.5}
.nocurve{margin:10px 0 4px;font-size:11.5px;color:var(--dim);line-height:1.6;
padding:10px;border:1px dashed var(--line);border-radius:8px;text-align:center}
/* ── 차림표를 머리띠 안으로 · 안내 띠를 아래 줄로 (2026-08-09 지정) ────
★ 자리를 맞바꾸면 두 가지가 따라와야 한다 —
① 차림표는 이제 좁은 화면에서 **가로로 굴러야** 한다(머리띠 폭을 나눠 쓰므로)
② 안내 띠는 제 줄을 통째로 쓰므로 절대배치가 필요 없다 */
.topnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto}
.topnav::-webkit-scrollbar{display:none}
/* ★ 머리띠는 **진한 쪽빛**이다. 본문용 글자색(--ink/--dim)을 그대로 쓰면
바탕에 묻힌다 — 머리띠 전용 색(--on-strip*)을 쓴다. 테마 넷이 저마다 제
값을 갖고 있어 한 줄로 다 덮인다.
★ 지금 보고 있는 칸은 **흰색**이다(2026-08-09 지정). --on-strip-hi 는 테마
넷 모두 #FFFFFF 라, 어느 테마에서도 고른 칸이 가장 밝게 선다. */
.topnav a{flex:0 0 auto;display:block;padding:6px 10px;border-radius:7px;white-space:nowrap;
/* ★ 안 고른 칸은 --on-strip-dim 이었는데 노을 테마에서 대비가 3.97 로
기준(4.5)에 못 미쳤다(실측). 한 단 밝은 --on-strip-soft 로 올린다.
고른 칸은 흰색 + 옅은 바탕 + 밑줄이라 여전히 확실히 갈린다. */
color:var(--on-strip-soft);text-decoration:none;font-size:13px;font-weight:700}
.topnav a:hover{background:rgba(255,255,255,.12);color:var(--on-strip)}
/* ★ 회원 전용 칸(관심선박)은 로그인 전에 한 단 물러난다 — 껍데기 차림표와 같다. */
.topnav a.off{opacity:.55}
.topnav a.off::after{content:'·';margin-left:4px;opacity:.8}
.topnav a.on{color:var(--on-strip-hi);background:rgba(255,255,255,.14);
box-shadow:inset 0 -2.5px 0 var(--brand-accent)}
/* ── 안내 띠 (2026-08-09 지정: **전광판 모양을 걷어낸다**) ───────────
한때 LED 판처럼 꾸몄다 — 검은 판·점 격자·빛 번짐·깜빡이는 등.
쓸데없이 시끄러웠다. 이 줄은 지나가는 안내지 볼거리가 아니다.
지금은 **판이 없다**: 종이 위에 흐르는 한 줄. 양 끝만 흐리게 해서
글자가 뚝 잘리지 않게 하고, 아래에 실선 하나로 본문과 가른다.
★ 대신 **글자 자체를 바탕에 새긴다**(음각, 2026-08-09 지정) — 판이 흐르는
것이 아니라 **새겨진 글씨가 지나간다**. 판을 세우지 않고도 깊이가 생긴다.
새기는 법은 이 화면의 다른 음각과 같다: 위에 그늘, 아래에 빛줄.
빛은 위에서 오므로 홈의 **윗입술이 어둡고 아랫입술이 밝다** — 순서를
뒤집으면 그대로 **양각**(도드라져 보임)이 된다.
★ 획이 12.5px 로 가늘어서 1px 한 겹씩만 쓴다. 두 겹을 겹치면 획 사이가
메워져 글자가 뭉갠다(h1 은 커서 두 겹을 쓴다 — 같은 값을 옮겨 쓰지 말 것).
★ 판이 없어졌으므로 글자색도 바뀌어야 한다 — 쪽빛 판 위의 색
(--on-strip*)을 종이 위에 그대로 쓰면 하얀 데 하얀 글씨가 된다.
본문 색(--dim/--ink/--water)으로 되돌린다.
★ 좌우는 본문·머리띠와 같은 자리(1420px + --colgap). */
/* ★ 머리띠 속 — 본문(main)과 같은 최대폭·같은 좌우 여백. 띠 바탕만 화면 끝까지 간다. */
.strip-in{max-width:1420px;margin:0 auto;padding:10px var(--colgap);
display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
.marqrow{position:sticky;top:var(--strip-h,52px);z-index:19;
background:var(--page2);border-bottom:1px solid var(--line)}
.marqrow-in{max-width:1420px;margin:0 auto;padding:0 var(--colgap)}
.marqboard{position:relative}
@media (max-width:700px){ .marqrow{position:static} }
/* 바닥글 — 눈에 띄되 답변을 가리지 않는다(2026-08-10). */
/* ★ 바닥글은 **본문과 같은 폭**으로 선다 (2026-08-11 지정).
1680px 로 두었더니 본문(main, 1420px)보다 넓어, 다른 화면에서는 맞던
좌우 끝이 이 화면에서만 어긋났다. 폭도 좌우 여백도 main 과 같은 값을 쓴다. */
/* ★ 바닥글 **가운데 정렬** (2026-08-28 지시) — 껍데기(layout/shell.php)의
바닥글과 같은 규칙이다. 이 화면은 껍데기를 안 쓰는 통짜 페이지라 여기에도
따로 적어야 한다. 가로 flex 라 justify-content 로 밀고, 접힌 줄의 글자
몫으로 text-align 을 함께 둔다. */
/* ★ 한글은 **낱말 가운데서 끊지 않는다** (2026-08-28). 기본값은 CJK 를
아무 자리에서나 접어, 좁은 폰에서 「사업자등록번/호」로 잘렸다(실측).
keep-all 이면 띄어쓰기에서만 접힌다. */
.pvfoot{max-width:1420px;margin:22px auto 0;padding:14px var(--colgap) 26px;
border-top:1px solid var(--line);display:flex;gap:6px 14px;flex-wrap:wrap;
align-items:center;justify-content:center;text-align:center;
font-size:12px;color:var(--dim,#6b7785);word-break:keep-all}
.pvfoot a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.pvfoot a:hover{color:var(--ink)}
/* ★ 바닥글 글자는 **한 크기**다 (2026-08-28 지시: "footer 의 글자 크기를
통일하고, 첫줄과 둘째줄 간격을 좁혀줘"). .biz 만 11px 로 작아 두
줄의 크기가 달랐다(실측 12px vs 11px) — 물려받게 두면 한 벌이 된다.
자리(제 줄을 차지)와 옅기는 그대로 둔다. */
.pvfoot .biz{flex:1 0 100%;opacity:.8;line-height:1.6}
/* ★ '자료는 수집 시점 기준…' 안내를 **한 단 작게** (2026-08-12 지정).
★ 클래스를 새로 붙이지 않는다 — 처음에 `note` 를 붙였다가 이 화면에 이미
있던 **알림 박스 스타일**(왼쪽 굵은 선·회색 바탕·안여백)이 그대로 먹어
바닥글 한 줄이 상자가 됐다(실측). 이름이 겹치는 클래스는 조용히 딸려 온다.
markup 은 원래대로 두고 **자리로만** 고른다. */
/* ★ 2026-08-28 지시("footer 의 글자 크기를 통일")로 **걷었다.**
2026-08-12 에 이 안내만 한 단 작게 두었는데, 이제 바닥글은 한 크기다.
덜 급한 글이라는 표시는 크기가 아니라 **옅기**(색)가 이미 하고 있다. */
@media (max-width:640px){.pvfoot{padding:12px var(--colgap) 24px}}
/* ★ 조황 사진 썸네일 — 그 줄의 **아래 오른쪽 끝** (2026-08-10 지정).
▣ 흐름에 두면 글이 짧은 줄과 긴 줄에서 그림이 들쭉날쭉해진다.
줄의 오른쪽 아래에 못박아야 눈이 한 줄로 훑는다.
▣ ★ 없는 그림은 그 자리를 **없앤다**(onerror). 깨진 아이콘이 남으면
'사진이 있었는데 못 불러왔다' 로 읽힌다 — 대개는 애초에 없다.
▣ 그림이 있는 줄만 오른쪽을 비운다 — 없는 줄까지 비우면 글이 좁아진다. */
#sources .src{position:relative}
#sources .src:has(.th){padding-right:84px}
#sources .src .th{position:absolute;right:10px;bottom:10px;width:70px;height:52px;object-fit:cover;
border-radius:8px;border:1px solid var(--line);background:var(--hull-2);display:block}
@media (max-width:520px){
#sources .src:has(.th){padding-right:70px}
#sources .src .th{width:58px;height:44px;right:8px;bottom:8px}
}
/* 순위 줄의 조황 사진 — 근거(.src .th)와 같은 규칙·같은 크기(2026-08-10 지정). */
/* ══ 순위 줄의 조황 사진 ══════════════════════════════════════════════
▣ ★ 오른쪽 끝을 **'전체 34 ♡0 ☆0' 줄과 맞춘다** (2026-08-10 지정)
전에는 줄 전체에 padding-right 를 줘서 자리를 비웠다. 그러면 사진은
오른쪽 끝에 붙는데 **윗줄(마리수·하트·별)만 88px 안쪽으로 밀려**
두 오른쪽 끝이 어긋났다 — 한 칸 안에 오른쪽 끝이 둘이 되는 셈이다.
★ 이제 여백을 주지 않는다. 사진은 줄의 오른쪽 안쪽 여백(10px)에 맞춰
붙이고, 윗줄도 그 자리에서 끝난다 — 두 끝이 한 선에 선다.
★ 대신 **아래 두 줄(출조·물때)에만** 사진 폭만큼 오른쪽을 비운다.
거기가 실제로 사진과 같은 높이라 글이 사진 밑으로 파고들던 자리다. */
.boat{position:relative}
.boat .num{justify-self:end}
.boat .th{position:absolute;right:10px;bottom:11px;width:70px;height:52px;object-fit:cover;
border-radius:8px;border:1px solid var(--line);background:var(--hull-2);display:block}
.boat:has(.th) .why{padding-right:84px}
@media (max-width:520px){
.boat .th{width:58px;height:44px;right:10px;bottom:10px}
.boat:has(.th) .why{padding-right:70px}
/* 좁은 화면에서는 '전체 34…' 줄이 아래로 내려가 사진과 겹친다 —
그때는 그 줄에도 자리를 비워 준다. */
.boat:has(.th) .num{padding-right:70px}
}
/* ★ 하트·별이 **글자에서 그림(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}
/* ── 조과 예측의 나머지 옷도 layout/_forecast.php 로 옮겼다 (2026-08-11). */