: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; /* 물빛 — 밝은 바탕에서 읽히게 한 단 내렸다 */ --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; --page-hi:#FFFFFF; --page1:#F2F6F5; --page2:#E7EFEE; --page3:#DCE9E7; --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} body{ /* ★ 바다 느낌 배경 (2026-08-05 지정) 박스는 옅은 흰색이라 그 뒤가 물이면 종이가 물 위에 뜬 것처럼 보인다. 두 겹으로 만든다 — ① 위에서 비치는 햇빛(radial) — 수면이 가장 밝은 자리 ② 아래로 갈수록 깊어지는 물빛(linear) — 얕은 물 → 깊은 물 ★ 조용해야 한다. 배경이 세면 박스 안의 표와 숫자가 묻힌다. 그래서 가장 깊은 곳도 #C6DFE8 에서 멈춘다 — 물빛이지 물감이 아니다. ★ background-attachment:fixed — 스크롤해도 물이 따라 흐르지 않는다. 같이 움직이면 긴 답변에서 배경만 눈에 밟힌다. ★ 색을 가진 것은 여전히 **박스뿐**이라는 규칙은 그대로다. 머리띠·카드· 패널은 옅은 --hull, 묻는 칸과 답 칸만 연한 쪽빛(--bay)이다. */ background: radial-gradient(120% 70% at 50% -10%, var(--page-hi) 0%, transparent 60%), linear-gradient(180deg, var(--page1) 0%, var(--page2) 45%, var(--page3) 100%); background-attachment:fixed; color:var(--ink); font-family:var(--ui); font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; } a{color:var(--sonar-ink)} ::selection{background:var(--sonar);color:var(--on-sonar)} :focus-visible{outline:2px solid var(--sonar);outline-offset:2px} /* ── 껍데기 ──────────────────────────────────────────────────────────── ★ 묻고 답하는 화면(ask.php)과 **같은 색·같은 테마**를 쓴다. 다른 껍데기를 새로 지으면 한 서비스가 두 서비스처럼 보인다. */ .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(12px,3vw,22px)} /* ★ 머리띠는 **조황정보 화면과 같아야 한다** (2026-08-09 지정). 화면을 옮길 때마다 맨 위가 흰 띠 ↔ 쪽빛 띠로 바뀌면 딴 사이트로 넘어온 것처럼 보인다. 같은 색·같은 글자·같은 자리로 맞춘다. ★ 문서 제목()은 **화면마다 다르게 둔다** — 그것이 검색결과에 뜨는 줄이라 전부 같게 만들면 검색에서 손해다. 눈에 보이는 머리띠와 문서 제목은 다른 것이다. */ .strip{position:sticky;top:0;z-index:20; background:linear-gradient(100deg,var(--strip1) 0%,var(--strip2) 55%,var(--strip3) 100%); border-bottom:1px solid var(--strip-line); box-shadow:0 2px 10px rgba(var(--sh),.18)} .strip .wrap{display:flex;align-items:center;gap:14px;min-height:52px; flex-wrap:nowrap} .brand{font-family:var(--ui);font-size:19px;font-weight:400;letter-spacing:-.01em; color:var(--on-strip);text-decoration:none;white-space:nowrap;flex:0 0 auto} .brand b{font-weight:800;color:var(--brand-accent)} /* 차림표 — 좁아지면 **가로로 굴린다**. 접어 넣는 햄버거보다 낫다: 칸이 여섯뿐이고, 낚시꾼은 한 손으로 화면을 넘긴다. */ .nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0; flex:1 1 auto;-webkit-overflow-scrolling:touch} .nav::-webkit-scrollbar{display:none} .nav a{flex:0 0 auto;display:block;padding:6px 10px;border-radius:7px;white-space:nowrap; color:var(--on-strip-soft);text-decoration:none;font-size:13px;font-weight:700} .nav a:hover{background:rgba(255,255,255,.12);color:var(--on-strip)} /* ★ 지금 보고 있는 칸은 **흰 글씨**다(2026-08-09 지정) — 진한 쪽빛 위에서 가장 밝게 선다. 밑줄과 옅은 바탕까지 함께 둬서 색을 못 보는 사람도 갈린다. */ .nav a.on{color:var(--on-strip-hi);background:rgba(255,255,255,.14); box-shadow:inset 0 -2.5px 0 var(--brand-accent)} main{padding:clamp(14px,2.4vw,24px) 0 40px} /* 길잡이 — 지금 어디에 있나. 검색으로 바로 들어온 사람에게 특히 필요하다. */ .crumb{display:flex;gap:6px;align-items:center;flex-wrap:wrap; font-size:12.5px;color:var(--dim);margin-bottom:10px} .crumb a{color:var(--dim);text-decoration:none} .crumb a:hover{color:var(--sonar-ink);text-decoration:underline} .crumb i{font-style:normal;opacity:.5} .card{background:var(--hull);border:1px solid var(--line);border-radius:12px; padding:clamp(13px,2vw,18px);margin-bottom:14px; box-shadow:0 1px 0 rgba(var(--hl),.7), 0 2px 12px rgba(var(--sh),.07)} .card h2{margin:0 0 10px;font-size:16px;letter-spacing:-.01em;color:var(--lamp); display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .card h2 .meta{font-size:11.5px;font-weight:400;color:var(--dim); font-family:var(--mono)} .card h3{margin:16px 0 8px;font-size:13.5px;color:var(--ink)} .card h3:first-child{margin-top:0} .muted{color:var(--dim)} .mono{font-family:var(--mono)} /* ★ 한글은 **낱말 가운데서 끊지 않는다** (2026-08-28). 기본값은 CJK 를 아무 자리에서나 접어, 좁은 폰에서 「사업자등록번/호」로 잘렸다(실측). keep-all 이면 띄어쓰기에서만 접힌다. */ .foot{border-top:1px solid var(--line);margin-top:24px;padding:16px 0 30px; font-size:12.5px;color:var(--dim);word-break:keep-all} /* ★ 바닥글 글자는 **한 크기**다 (2026-08-28 지시) — .biz 만 11px 로 작아 두 줄의 크기가 달랐다. 물려받게 두면 한 벌이 된다. */ .foot .biz{flex:1 0 100%;opacity:.75;line-height:1.6} /* ★ '자료는 수집 시점 기준…' 안내는 **한 단 작게** (2026-08-12 지정). 바닥글에서 가장 덜 급한 글인데 이용약관·개인정보와 같은 크기라 눈이 먼저 갔다. 지우지는 않는다 — 밝혀야 하는 말이다. */ /* ★ 2026-08-28 지시("footer 의 글자 크기를 통일")로 **걷었다.** 2026-08-12 에 이 안내만 한 단 작게 두었는데, 이제 바닥글은 한 크기다. 덜 급한 글이라는 표시는 크기가 아니라 **옅기**(색)가 이미 하고 있다. */ .foot .pv{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;opacity:.85} .foot .pv:hover{opacity:1} /* ★ 바닥글 **가운데 정렬** (2026-08-28 지시). 속이 가로 flex 라 text-align 만으로는 안 움직인다 — 칸을 미는 것은 justify-content 다. 접힌 둘째 줄의 글자 몫으로 text-align 을 함께 둔다(.biz 는 flex:1 0 100% 라 늘 제 줄이다). */ .foot .wrap{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center; justify-content:center;text-align:center} .foot a{color:var(--dim)} @media (max-width:560px){ .strip .wrap{gap:8px;min-height:48px} .brand{font-size:17px} .nav a{padding:6px 8px;font-size:12.5px} } /* 움직임을 줄여 달라는 설정을 존중한다 */ @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ── 회원 기능 — 좋아요 하트 · 관심선박 ──────────────────────────────── ★ 배가 나오는 자리마다 같은 모양이어야 한다. 목록·상세·답변 어디서 눌러도 같은 것이 같게 보여야 사람이 배운 것을 다시 안 배운다. ★ **단추처럼 보여야 한다.** 처음에는 회색 ♡ 하나만 뒀더니 무엇을 누르는 것인지 알 수 없었고 받은 수도 안 보였다(지적받음). 테두리를 주고, 넓은 자리에서는 이름까지 적고, 받은 수를 늘 옆에 둔다. */ .nkacts{display:inline-flex;gap:5px;margin-left:8px;vertical-align:middle} /* ★ 글자색은 --dim 이 아니라 --ink-soft 다. --dim 으로 뒀더니 밝은 테마 둘에서 대비가 기준(작은 글씨 4.5:1)에 못 미쳤다 — 여명 4.36 · 해도 4.45 (실측). 누르라고 만든 것이 흐리면 안 된다. */ .nkacts button{display:inline-flex;align-items:center;gap:4px;cursor:pointer; padding:3px 9px;border-radius:99px;line-height:1.5; border:1px solid var(--line);background:var(--hull);color:var(--ink-soft); font-family:var(--ui);font-size:12.5px;font-weight:700;white-space:nowrap} .nkacts button:hover{background:var(--hull-2);color:var(--ink);border-color:var(--water)} /* ── 하트·별에 입체를 준다 (2026-08-09 지정: "조황 등급 아이콘처럼") ──── ▣ 등급 칸과 **같은 말**을 쓴다 — 방향이 뜻이다 안 누른 것 = **파여 있다**(음각) : 위에 그늘, 아래에 빛줄 누른 것 = **도드라진다**(양각) : 위가 밝고 아래가 어둡고, 아래로 그림자 한 화면에서 두 벌의 입체 언어를 쓰면 둘 다 장식으로 읽힌다. 등급 칸이 이미 '올라온 것과 내려간 것'으로 말하고 있으므로 여기도 같게 한다. ▣ ★ 다만 등급 칸과 달리 **그림을 다시 그리지 않는다** 등급은 네모라서 CSS 로 그릴 수 있었지만 하트와 별은 모양 자체가 뜻이다. 글자(♡♥☆★)로 두고 **text-shadow 로만** 판다 — 이 화면의 상표·전광판이 쓰는 것과 같은 방법이다. ▣ ★ 빛은 위에서 온다 음각은 위가 어둡고 아래가 밝다. 양각은 그 반대다. 순서를 뒤집으면 눌린 것이 안 눌린 것처럼 보인다. ▣ ★ 색은 건드리지 않는다 진하기를 얻겠다고 글자색을 어둡게 하면 애써 맞춘 대비가 무너진다. 깊이는 **가장자리**가 만든다. */ .nkacts .ic{font-size:15px;line-height:1; text-shadow: /* ★ var() 하나가 못 풀리면 **선언 전체가 무효**가 된다 — 토큰을 안 가진 화면에서 하트·별의 입체가 통째로 사라진 적이 있다(onfishing.net 해도). 그래서 되돌아갈 값을 함께 적는다. */ /* ★ 더 깊게 판다 (2026-08-10 지정). 선 두 줄만으로는 '그어 놓은 금' 에 가까웠다. 홈은 **모서리(선)와 그 안쪽(번짐)** 두 겹으로 보인다 — 선은 경계를, 번짐은 깊이를 만든다. */ 0 -1px 0 rgba(var(--sh),.55), /* 윗입술 모서리 — 파인 쪽 */ 0 -2px 2px rgba(var(--sh),.30), /* 그 안쪽 그늘 — 깊이 */ 0 1px 0 var(--eng-light,rgba(255,255,255,.60)), /* 아랫입술 빛줄 */ 0 2px 2px color-mix(in srgb, var(--eng-light,#fff) 45%, transparent); } /* 누른 것 — 솟는다. 위아래가 정확히 뒤집히고 아래로 그림자가 진다. */ .nkacts .nklike.on .ic, .nkacts .nkfav.on .ic{ /* ★ 아래 그늘을 회색(--sh)으로 뒀더니 붉은 하트 밑에 **잿빛 얼룩**이 앉아 둘이 다른 재질로 보였다. 제 색을 옅게 깐다(currentColor) — 하트는 붉은 그늘을, 별은 주황 그늘을 진다. 이 저장소가 h1 에서 쓰는 규칙과 같다 ("그늘 색은 검정이 아니라 바탕의 색을 어둡게 한 것"). */ /* ★ 윗면 빛을 순백(rgba(255,255,255,.60))으로 뒀더니 **어두운 테마에서 번쩍였다** — 솟은 것이 아니라 발광하는 것으로 보였다(실측: 새벽 테마). --eng-light 는 테마마다 값이 다르다(밝은 곳은 흰색, 어두운 곳은 옅은 푸른빛 35%). 이 화면의 다른 음각·양각이 모두 쓰는 값이라 결도 맞는다. */ /* ★ 더 솟게 한다 (2026-08-10 지정) — 빛 두 겹, 그늘 세 겹. 멀어질수록 옅고 넓게 편다(1px 선 → 2px 번짐 → 5px 그림자). 그림자가 한 겹뿐이면 '붙어 있는 것', 세 겹이면 '떠 있는 것' 으로 읽힌다. */ text-shadow: 0 -1px 0 var(--eng-light,rgba(255,255,255,.60)), 0 -2px 2px color-mix(in srgb, var(--eng-light,#fff) 50%, transparent), 0 1px 0 color-mix(in srgb, currentColor 55%, transparent), 0 2px 2px color-mix(in srgb, currentColor 38%, transparent), 0 4px 6px color-mix(in srgb, currentColor 22%, transparent); } .nkacts .cnt{font-family:var(--mono);font-weight:400;color:var(--ink-soft)} /* ★ 이름표(좋아요·관심선박·내 관심선박)만 **2px 작게** 한다 (2026-08-09 지정). 하트·별 그림과 숫자는 그대로 둔다 — 눈이 먼저 잡는 것은 그림과 숫자이고, 이름표는 그것이 무엇인지 알려 주는 곁말이라 한 단 물러나도 된다. */ .nkacts .lb{font-size:10.5px} .nkacts .cnt{font-size:12.5px} /* ★ 채워진 하트가 눈에 띄어야 한다. 빈 하트가 진하면 이미 누른 줄 안다. ★ 눌린 색은 **한 단 내려** 쓴다. 주황(--sonar-hot/--sonar-ink)을 그대로 썼더니 옅은 주황 바탕 위에서 대비가 4.32·4.19 로 기준(4.5:1)에 못 미쳤다 (여명 테마, 실측). 잉크 쪽으로 22% 섞어 색은 지키고 진하기만 얻는다. */ .nkacts .nklike.on{color:color-mix(in srgb, var(--sonar-hot) 78%, var(--lamp)); border-color:var(--sonar-hot); background:rgba(var(--hot-rgb),.07)} .nkacts .nklike.on .cnt{color:color-mix(in srgb, var(--sonar-hot) 78%, var(--lamp))} .nkacts .nklike.has .cnt{color:var(--ink)} .nkacts .nkfav.on{color:color-mix(in srgb, var(--sonar-ink) 78%, var(--lamp)); border-color:var(--sonar); background:rgba(var(--sonar-rgb),.10)} .nkacts .nkfav.on .cnt{color:color-mix(in srgb, var(--sonar-ink) 78%, var(--lamp))} .nkacts .nkfav.has .cnt{color:var(--ink)} /* ★ 링크 모양 (2026-08-09 지정) — 순위표와 항구의 낚시배 목록에서 쓴다. 알약 단추는 배 상세처럼 **한 자리에 하나** 있을 때 알맞다. 줄마다 두 개씩 여덟 줄이면 알약 열여섯이 화면을 뒤덮어, 정작 배 이름이 안 읽힌다. 글자 링크로 낮추고 크기도 한 단 줄인다 — 누를 수 있다는 것만 알면 된다. ★ 배 상세(data-boat-wide)는 지정대로 알약을 그대로 쓴다. */ .nkacts.link{gap:8px;margin-left:8px} .nkacts.link button{border:0;background:none;padding:0;border-radius:0; font-size:11.5px;font-weight:600;color:var(--water); text-decoration:none;border-bottom:1px dotted transparent} .nkacts.link button:hover{background:none;border-bottom-color:currentColor; color:var(--sonar-ink)} /* ★ 링크 모양에서는 글자가 12.5px 로 작다 — 같은 두께로 파면 획이 메워져 하트가 동그라미로 뭉갠다. 그늘만 한 겹, 빛줄은 반만 준다. */ /* ★ 작은 자리(목록 안)도 한 단 깊게 (2026-08-10 지정). 다만 큰 것보다 **한 겹 덜** 쓴다 — 13px 글자에 세 겹을 얹으면 획이 뭉개진다. */ .nkacts.link .ic{font-size:13px; text-shadow:0 -1px 0 rgba(var(--sh),.46), 0 -2px 1.5px rgba(var(--sh),.22), 0 1px 0 var(--eng-light,rgba(255,255,255,.55))} .nkacts.link .nklike.on .ic, .nkacts.link .nkfav.on .ic{ text-shadow:0 -1px 0 var(--eng-light,rgba(255,255,255,.60)), 0 1px 0 color-mix(in srgb, currentColor 48%, transparent), 0 2px 3px color-mix(in srgb, currentColor 30%, transparent)} .nkacts.link .cnt{font-size:11px;color:inherit;opacity:.85} .nkacts.link .nklike.on{background:none;border:0;color:var(--sonar-hot)} .nkacts.link .nkfav.on{background:none;border:0;color:var(--sonar-ink)} .nkfavtag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px; font-size:11px;font-weight:700;vertical-align:middle; background:var(--sonar);color:var(--on-sonar)} .is-fav{outline:1px solid var(--sonar);outline-offset:2px;border-radius:8px} @media (max-width:560px){ .nkacts{gap:4px;margin-left:6px} .nkacts button{padding:3px 7px;font-size:12px} .nkacts .lb{display:none} } #nktoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px); background:var(--lamp);color:#fff;padding:9px 16px;border-radius:99px; font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s; z-index:60;box-shadow:0 6px 22px rgba(var(--sh),.30);max-width:92vw;text-align:center} #nktoast.on{opacity:1;transform:translate(-50%,0)} /* 머리띠 오른쪽 — 로그인 / 내 정보. 조황정보 화면의 .stripme 와 같은 모양이다. */ .nkme{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap; font-size:12.5px;font-weight:700;color:var(--on-strip);text-decoration:none; padding:5px 11px;border-radius:99px; border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.10)} .nkme:hover{background:rgba(255,255,255,.20);color:var(--on-strip-hi)} .nkme .tk{font-family:var(--mono);color:var(--brand-accent)} @media (max-width:560px){ .nkme{padding:4px 9px;font-size:12px} } .repcard{max-width:900px;margin:16px auto;padding:0 12px} /* ★ 제목 태그만 h3 → h1 로 바꿨다(2026-09-23) — **옷은 그대로** 두려고 두 이름을 나란히 적는다. 글자 크기·여백·짜임이 한 값이라 화면은 달라지지 않는다. (h1 기본 크기는 2em 이라 그냥 두면 갑자기 커진다 — 그래서 여기서 못 박는다.) */ .repcard>h1, .repcard>h3{display:flex;align-items:baseline;gap:8px;margin:0 0 10px; font-size:15px;color:var(--ink)} .repcard>h1 .cnt, .repcard>h3 .cnt{font-size:11.5px;color:var(--dim);font-family:var(--mono)} /* ★ 다른 쪽 창으로 가는 길 — 오른쪽 끝에 세운다(제목과 다투지 않게). 두드림 자리 44px 은 이 집안이 맞춰 둔 값이다. */ .repcard>h1 .other, .repcard>h3 .other{margin-left:auto;min-height:44px;display:inline-flex;align-items:center; font-size:12px;font-weight:400;color:var(--dim);text-decoration:none;white-space:nowrap} .repcard>h1 .other, .repcard>h3 .other:hover{color:var(--magenta)} /* 찾기 — 형제 사이트(fishlog·fishtoday)의 `/reports` 와 같은 자리·같은 결. */ .repcard .rq{display:flex;gap:6px;margin:0 0 10px} .repcard .rq input{flex:1 1 auto;min-width:0;min-height:44px;padding:0 12px; border:1px solid var(--line);border-radius:8px;background:var(--card); color:var(--ink);font:inherit;font-size:13px} .repcard .rq input:focus{outline:none;border-color:var(--magenta)} .repcard .rq button,.repcard .rq .clear{min-height:44px;padding:0 14px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:8px;background:var(--card-2); color:var(--ink);font:inherit;font-size:13px;cursor:pointer;text-decoration:none} .repcard .rq button:hover,.repcard .rq .clear:hover{border-color:var(--magenta);color:var(--magenta)} .repcard .empty{color:var(--dim);font-size:13px;padding:20px 0;text-align:center} .replist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px; background:var(--line);overflow:hidden;border:1px solid var(--line);border-radius:10px} .replist li{background:var(--card);padding:8px 9px;min-width:0} .repitem .rt{font-size:12.5px;line-height:1.45;color:var(--ink); overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .repitem .rt a{color:inherit;text-decoration:none;border-bottom:1px solid transparent} .repitem .rt a:hover{color:var(--magenta);border-bottom-color:currentColor} .repitem .rm{margin-top:4px;font-size:11px;color:var(--dim); display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;min-width:0} .repitem .rm time{font-family:var(--mono);color:var(--dim)} .repitem .rm .sep{opacity:.5} /* ★ 카드에서는 `cursor:pointer` 와 점선 밑줄이 붙는다 — 여기서는 뺀다. 누를 수 없는 글자에 누를 수 있는 옷을 입히지 않는다. */ .repitem .rm b,.repitem .rm i{all:unset;color:var(--ink);font-size:11px} .repitem .rm em{all:unset;font-size:11px;color:var(--dim)} .replist li.repitem{position:relative} .repitem.haspic{padding-right:66px} .repitem .th{position:absolute;right:9px;bottom:8px;width:52px;height:40px;object-fit:cover; border-radius:6px;border:1px solid var(--line);background:var(--card-2);display:block} .repcard .pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center; margin:14px 0 4px} /* ★ 두드림 자리는 44px — 이 집안이 맞춰 둔 값이다(폰에서 손가락으로 눌린다). */ .repcard .pager a,.repcard .pager b{min-width:44px;min-height:44px; display:inline-flex;align-items:center;justify-content:center;padding:0 10px; border:1px solid var(--line);border-radius:8px;font-size:12px; color:var(--ink);text-decoration:none;font-weight:400} .repcard .pager a:hover{border-color:var(--magenta);color:var(--magenta)} .repcard .pager b{background:var(--card-2);border-color:var(--ink);font-weight:600} /* ★ 하트·별이 **글자에서 그림(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}