: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)}
/* 오른쪽 상세 칸 */
/* 「조황분석」 지역 카드(2026-10-08 dev) — 지역마다 머리(이름·수) + 분석 글 + 많은 어종·항구. 얇은 밑줄로만 가른다. */
/* 「오늘 조황」 카드 자리의 조황분석(#anaBody, 2026-10-08 dev) — 상세 칸(.detail)과 같은 모양. 물린 쪽은 .anahide. */
#factsCard .anahide{display:none !important}
/* 답변의 「근거」 칸은 늘 물린다 — 되살린 화면(앞서 본 답)에 남아 있던 것까지(2026-10-08 dev 지시 「AI 답변에서도 근거 는 제거해」). */
#srcPanel{display:none !important}
#anaBody h2{font-size:16px;letter-spacing:-.01em;font-weight:700;color:var(--lamp);margin:2px 0 6px}
#anaBody .sacard{padding:4px 0 10px;border-bottom:1px solid var(--line)}
#anaBody .sacard:last-child{border-bottom:0}
#anaBody .sacard h3{margin:10px 0 4px;font-size:13.5px;color:var(--ink);font-weight:700;letter-spacing:-.01em}
#anaBody .sacard h3 .cnt{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--dim);margin-left:6px}
#anaBody .satext{margin:0 0 6px;font-size:12.5px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
#anaBody .salist2{margin:2px 0 0;font-size:11.5px;color:var(--dim);overflow-wrap:anywhere}
#anaBody .salist2 .ent{font-size:11.5px}
#anaBody .salist2 .up{color:var(--warn-ink)}
.detail .sacard{padding:4px 0 10px;border-bottom:1px solid var(--line)}
.detail .sacard:last-child{border-bottom:0}
.detail .sacard h3{margin:10px 0 4px;font-size:13.5px;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.detail .sacard h3 .cnt{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--dim);margin-left:6px}
.detail .satext{margin:0 0 6px;font-size:12.5px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.detail .salist2{margin:2px 0 0;font-size:11.5px;color:var(--dim);overflow-wrap:anywhere}
.detail .salist2 .ent{font-size:11.5px}
.detail .salist2 .up{color:var(--warn-ink)}
/* ★ 조황분석 지역명 옆 「상세」 아이콘 + 팝업(#rgModal) (2026-10-08 지시, 대상 dev.naksigo.com: "조황분석의 지역명 옆에 상세 아이콘을
추가하고 클릭시 팝업으로 http://adm.naksigo.com:8093/admin/regions 해당 정보에서 LLM 분석내용만 제거하고 보여주는 기능을 추가해").
조황분석 카드(#anaBody·.detail .sacard)에서만 쓰는 이름이다 — 공용 팝업(_porttrend 등)은 건드리지 않고 모양만 맞췄다. */
.sacard h3 .rgdet{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:-3px;
width:22px;height:22px;margin-left:4px;padding:0;border:1px solid var(--line);border-radius:6px;
background:transparent;color:var(--dim);cursor:pointer}
.sacard h3 .rgdet::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%)} /* 옆 「어종 분석」을 걷어 누름판을 40px 로 되돌림(2026-10-08) */
.sacard h3 .rgdet:hover{color:var(--ink);background:rgba(127,127,127,.12)}
.sacard h3 .rgdet:focus-visible{outline:2px solid var(--sonar-ink);outline-offset:2px}
.sacard h3 .rgdet svg{width:13px;height:13px}
/* ★ 조황분석 지역명 옆 「지난 기록」 아이콘 + 오른쪽 칸 기록(.rghx) (2026-10-09 지시, 대상 naksigo.com: "「조황분석」의 우측섹션 조황분석
내역에서 지역명 옆에 History를 의미하는 아이콘을 디자인하여 추가하고 해당 아이콘을 클릭하는 경우 조황분석은 접기하고 아래에 해당 지역의
LLM분석 내용을 최신부터 과거순으로 5개씩 페이지네이션으로 표시해. LLM 분석 내용에 항구명과 어종명이 있으면 링크를 추가하여 구성해").
상세 아이콘(.rgdet)과 같은 틀 — 조황분석 카드(.sacard)와 기록 칸(.rghx)에서만 쓰는 이름이다. */
.sacard h3 .rghist{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:-3px;
width:22px;height:22px;margin-left:4px;padding:0;border:1px solid var(--line);border-radius:6px;
background:transparent;color:var(--dim);cursor:pointer}
.sacard h3 .rghist::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:40px;transform:translate(-50%,-50%)}
.sacard h3 .rghist:hover{color:var(--ink);background:rgba(127,127,127,.12)}
.sacard h3 .rghist:focus-visible{outline:2px solid var(--sonar-ink);outline-offset:2px}
.sacard h3 .rghist svg{width:13px;height:13px}
.sacard h3 .rgdet::after{width:26px} /* 옆에 기록 아이콘이 서서 두 누름판이 겹치지 않게 폭만 줄임(높이 40px 그대로, 2026-10-09) */
.detail .rghx ol{list-style:none;margin:6px 0 0;padding:0}
.detail .rghx li{padding:9px 0 11px;border-bottom:1px solid var(--line)}
.detail .rghx li:last-child{border-bottom:0}
.detail .rghx .rghd{margin:0 0 4px;font-size:12.5px;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
.detail .rghx .rghd time{font-family:var(--mono);font-size:11px;color:var(--dim)}
.detail .rghx .rghd .m{font-size:11px;color:var(--dim)}
.detail .rghx .rghtx{margin:0;font-size:12.5px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.detail .rghx .rghtx .ent{font:inherit;font-weight:700;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;
text-decoration:underline;text-underline-offset:2px}
.detail .rghx .rghtx .ent:focus-visible{outline:2px solid var(--sonar-ink);outline-offset:1px}
.detail .rghpg{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin:12px 0 2px}
.detail .rghpg button{min-width:30px;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:7px;background:transparent;
color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.detail .rghpg button:hover:not(:disabled){background:rgba(127,127,127,.12)}
.detail .rghpg button:focus-visible{outline:2px solid var(--sonar-ink);outline-offset:1px}
.detail .rghpg button[aria-current="page"]{background:var(--sonar-ink);border-color:var(--sonar-ink);color:#fff;font-weight:700}
.detail .rghpg button:disabled{opacity:.4;cursor:default}
.detail .rghpg .gap{color:var(--dim);font-size:12px;padding:0 2px}
.detail .rghpg .of{flex-basis:100%;text-align:center;font-size:11px;color:var(--dim)}
#rgModal{position:fixed;inset:0;z-index:93;display:none}
#rgModal.on{display:block}
#rgModal .rgdim{position:absolute;inset:0;background:rgba(6,20,28,.55)}
#rgModal .rgwin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:min(860px,calc(100vw - 24px));max-height:min(90vh,940px);overflow:auto;overscroll-behavior:contain;
background:var(--hull,#FBFDFD);color:var(--ink);border:1px solid var(--line);border-radius:16px;
box-shadow:0 24px 60px rgba(6,20,28,.45);padding:16px 18px 18px}
#rgModal .rgx{position:absolute;right:10px;top:10px;width:32px;height:32px;border:0;border-radius:9px;
cursor:pointer;font-size:15px;line-height:1;background:transparent;color:var(--ink)}
#rgModal .rgx:hover{background:rgba(127,127,127,.14)}
#rgModal .rgx:focus-visible{outline:2px solid var(--sonar-ink);outline-offset:2px}
#rgModal h2{font-size:16px;font-weight:700;color:var(--lamp);margin:2px 40px 6px 0;letter-spacing:-.01em}
#rgModal h2 .muted{font-size:11.5px;font-weight:400}
#rgModal .rgsum{margin:8px 0;font-size:13px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
#rgModal .rgsea{margin:6px 0;font-size:12px;line-height:1.6;color:var(--dim)}
#rgModal h3{font-size:12.5px;font-weight:700;color:var(--ink);margin:14px 0 4px}
#rgModal h3 .muted{font-weight:400;font-size:11px}
#rgModal .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
#rgModal table{border-collapse:collapse;font-size:12px;min-width:100%;white-space:nowrap}
#rgModal th,#rgModal td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left}
#rgModal th{color:var(--dim);font-weight:600;font-size:11px}
#rgModal .rgbar rect{fill:var(--sonar-ink,#2E8090)}
#rgModal .rgbar{display:block}
#rgModal .tag{display:inline-block;padding:0 5px;border-radius:5px;font-size:11px;background:rgba(127,127,127,.12)}
#rgModal .tag.up{color:var(--warn-ink)}
#rgModal .ent{font:inherit;font-weight:700;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
@media (max-width:520px){#rgModal .rgwin{width:calc(100vw - 12px);max-height:94vh;padding:12px 12px 14px}}
/* ★ 조황분석 「어종 분석」 아이콘·팝업 [어종 추이]는 걷었다 (2026-10-08 지시: "조황분석의 어종 분석 아이콘은 제거하고 대신 어종정보에서
해당 어종에 대한 아이콘+어종분석 을 추가하여 해당 기능을 제공해") — 그림은 layout/_sptrend.php 로 옮겨 어종 칸의 「어종분석」이 부른다. */
.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). */