.fccall{margin:14px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* ★ 한 단 줄였다 (2026-08-09 지정) — 40px 짜리 알약은 배 상세에서 혼자 너무 크게 서서, 정작 그 위의 배 정보보다 먼저 읽혔다. 부르는 말이지 표제는 아니다. 손가락 자리는 34px 로 남긴다. */ /* ★ 보이는 상자는 34px 그대로 두고 **누름판만 44px** 로 채운다 (2026-09-06 지시 "onfishing 도 맞춰" — naksigo 와 같은 자리·같은 방법). ▣ 왜 글자를 안 키우나 — 2026-08-09 지정이 "배 정보보다 먼저 읽히면 안 된다"고 크기를 줄인 자리다. 그 판단을 뒤집지 않고 **손끝 면만** 넓힌다. ▣ 값은 손잡이 한 벌 값(--btbtn-tap, layout/_boattrend.php)을 가리켜 쓴다 — 두 곳에 숫자를 적으면 갈린다. */ .fcbtn{position:relative;display:inline-flex;align-items:center;gap:5px;cursor:pointer; padding:7px 13px;border-radius:9px;border:0;min-height:34px; background:var(--sonar,#F0A038);color:var(--on-sonar,#141E26); font-family:var(--ui);font-size:13px;font-weight:800} .fcbtn::before{content:'';position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);height:var(--btbtn-tap,44px)} .fcbtn:hover{filter:brightness(.96)} .fcbtn .ar{font-weight:400} .fccall .sub{font-size:11.5px;color:var(--ink-soft)} /* ★ ✕ 는 **음각**이다(지정) — 위에 그늘, 아래에 빛줄. 이 화면의 다른 입체와 같은 말을 쓴다. 눌리면 잠깐 더 깊이 파인다. */ /* ══════════════════════════════════════════════════════════════════════ 조과 예측 — **화면 한가운데 떠오르는 층**(2026-08-11 지정) ───────────────────────────────────────────────────────────────────── ▣ 왜 팝업인가 전에는 가운데 칸 아래에 이어 붙이고 그리로 굴려 보냈다. 그런데 이 화면은 답변·순위·근거가 이미 길어서, 예측이 붙는 자리가 **화면 두세 개 아래**다. 눌렀는데 아무 일도 안 일어난 것처럼 보이는 일이 잦았다. 예측은 '이 배로 언제 갈까' 를 정하는 자리다 — 그 순간에는 그것만 보면 된다. ▣ ★ 맨 위에 뜬다(z-index). 상세 시트·달력보다 위다. ▣ ★ 뒤를 어둡게 덮되 **지우지는 않는다** — 어디서 눌렀는지를 잃지 않게. ▣ ★ 닫는 길을 셋 둔다: ✕ · 바깥 어두운 데 · Esc. 하나만 두면 반드시 못 닫는 사람이 생긴다. ▣ ★ 열려 있는 동안 뒷 화면은 굴리지 않는다(body overflow) — 폰에서 손가락이 뒤를 굴려 버리면 팝업이 허공에 뜬 것처럼 보인다. */ #fcModal{position:fixed;inset:0;z-index:90;display:none} #fcModal.on{display:block} #fcModal .fcdim{position:absolute;inset:0;background:rgba(6,20,28,.55)} /* ★ 스크롤을 **안쪽(#fcBox)** 으로 옮겼다 (2026-08-11 지정). 창이 통째로 굴렀을 때는 오른쪽 위의 ✕ 도 함께 밀려 올라가 사라졌다 — 긴 예측을 보다가 닫으려면 맨 위까지 되감아야 했다. 창은 자리를 잡고, 내용만 그 안에서 구른다. */ #fcModal .fcwin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(760px,calc(100vw - 28px));max-height:min(88vh,900px);overflow:visible; display:flex;flex-direction:column; background:var(--hull,#FBFDFD);border:1px solid var(--line);border-radius:16px; box-shadow:0 24px 60px rgba(6,20,28,.45);padding:16px 18px 18px} /* ★ 여기 있던 좁은 화면·움직임 규칙의 **여는 줄이 통째로 빠져 있었다** (2026-08-11 실측). 떼어 낼 때 @media 두 줄이 잘려 나가고 닫는 중괄호만 남아, 그 아래 규칙들이 파서에 먹혀 **한 줄도 살지 못했다** — 눈으로는 "좀 허전하네" 로만 보이는 고장이다. 원래 두 규칙을 되살린다. */ @media (max-width:520px){ #fcModal .fcwin{width:calc(100vw - 12px);max-height:92vh;padding:12px 12px 14px; border-radius:14px} } @media (prefers-reduced-motion:no-preference){ #fcModal.on .fcwin{animation:fcpop .16s ease-out both} @keyframes fcpop{from{opacity:0;transform:translate(-50%,-46%)}} } /* ★ 오른쪽에 여유를 둔다(2026-08-17 지정) — margin(패딩이 아니다)이어야 한다. 스크롤바는 **박스 자신의 테두리**에 붙어 그려지므로, 안쪽 여백을 늘려 봐야 스크롤바는 그대로 ✕ 밑에 있다. 박스 자체를 오른쪽에서 줄여야 스크롤바가 ✕(오른쪽 8~38px 자리)를 벗어난다. */ /* ★★ 제목을 **스크롤 상자 밖으로 아예 빼냈다** (2026-08-17 세 번째 지정 — "캐시 삭제 후에도 두 사이트 모두 스크롤바가 타이틀을 초과하여 표시되고 있어. 재구성해"). sticky + scrollbar-gutter 로는 글자와 스크롤바의 "가로" 자리만 갈랐을 뿐, 스크롤바 자체(세로로 긴 막대)는 여전히 #fcBox 의 테두리를 따라 **제목과 같은 높이까지 그대로 이어져** 있었다 — "제목의 줄에 스크롤바가 지나간다"는 인상은 그래서 안 없어졌다. 근본적으로 막으려면 제목이 **스크롤 컨테이너 소속이 아니어야** 한다. 그래서 마크업을 나눴다: `.fcwin` 안에 `#fcHead`(안 구른다, 제목 전용) 와 `#fcBox`(구른다, 제목 뺀 나머지 전용) 두 형제를 두고, 자바스크립트도 fcHead() 의 결과를 `#fcHead` 에, 나머지를 `#fcBox` 에 따로 써 넣는다 (자리는 스크립트 아래쪽 참고). 이제 스크롤바는 #fcBox 높이만큼만 생기므로 제목 줄에는 물리적으로 닿지 않는다 — sticky 도 더는 필요 없다. */ #fcModal #fcHead{flex:0 0 auto} #fcModal #fcBox{margin:0 24px 0 0;padding-right:12px;overflow:auto; scrollbar-gutter:stable;min-height:0;flex:1 1 auto} #fcBox{position:relative} #fcHead h2{padding-right:8px} /* ★ 상자를 벗겼다 (2026-08-09 지정) — 테두리도 바탕도 없이 **글자만** 남고, 그 글자를 바탕에 새긴다(음각). 단추처럼 보이면 이 화면에서 가장 큰 다음 걸음(예약·설문)과 무게가 같아진다. 닫기는 곁일이다. ★ box-shadow 로 파던 것을 **text-shadow** 로 옮겼다 — 판이 없어졌으니 팔 자리도 글자밖에 없다. 위에 그늘, 아래에 빛줄(이 화면의 다른 음각과 같다). ★ 상자는 없어도 **누를 자리는 남긴다**(32×32) — 폰에서 놓치면 못 닫는다. */ /* ★ 제목 줄 안의 형제다 — 자리는 배 이름 바로 뒤, 크기는 배 이름과 **같다** (font-size:inherit → .meta 의 크기를 그대로 받는다). ★ 누를 자리는 글자보다 넓혀 둔다(padding) — 11px 글자는 손가락으로 못 짚는다. 넓히되 줄 높이는 안 밀도록 line-height 를 1 로 묶는다. */ /* ★ font-size:inherit 로 뒀더니 h2(11.5px)를 물려받아 배 이름(11px)과 **0.5px 어긋났고**, 밑선도 3px 넘게 달랐다(실측). 물려받지 말고 `.panel > h2 .meta` 와 **같은 값을 그대로 적는다** — 11px·고정폭. ★ 밑선을 맞춘다(align-self:baseline). h2 가 flex 라 이것이 있어야 배 이름과 같은 줄에 선다. 위아래 여백은 대칭으로 둬야 밑선이 안 밀린다. */ /* ★ ✕ 는 **창의 맨 위 오른쪽 모서리**다 (2026-08-11 지정). 이 저장소의 모든 닫기는 그 자리에 선다 — 화면마다 다른 곳에 있으면 닫을 때마다 눈으로 찾아야 한다. 제목 줄 안에 있던 것을 창 기준으로 옮겼다. */ .fcx{position:absolute;top:8px;right:8px;z-index:3; width:30px;height:30px;display:grid;place-items:center; cursor:pointer;border:0;border-radius:8px;background:none;color:var(--ink-soft); font-size:13px;line-height:1;font-family:var(--ui); text-shadow:0 -1px 0 rgba(var(--sh),.42), 0 1px 0 var(--eng-light,rgba(255,255,255,.55))} .fcx:hover{color:var(--ink)} /* 누르면 더 깊이 파인다 — 판이 없어도 눌린 느낌은 있어야 한다 */ .fcx:active{text-shadow:0 -1px 1px rgba(var(--sh),.60), 0 1px 0 var(--eng-light,rgba(255,255,255,.35))} .fcx:focus-visible{outline:2px solid var(--water);outline-offset:2px} /* ✕ 가 제목 줄 안으로 들어와 오른쪽 여백을 비울 이유가 없어졌다. */ .fcwho{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:baseline; font-size:12.5px;margin:0 0 10px} .fcwho i{font-style:normal;color:var(--ink-soft);margin-right:5px;font-size:11.5px} .fcwho .basis{margin-left:auto;font-family:var(--mono);font-size:11px; color:var(--ink-soft);background:var(--hull-2,#EDF3F4);padding:3px 9px;border-radius:99px} /* 어종 고르개 */ .fcsp{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 12px} .fcsp button{padding:5px 10px;border-radius:99px;border:1px solid var(--line); background:var(--hull,#FBFDFD);color:var(--ink-soft);font-size:12px;cursor:pointer; font-family:var(--ui);min-height:30px} .fcsp button i{font-style:normal;font-family:var(--mono);font-size:10.5px; opacity:.7;margin-left:4px} .fcsp button:hover{border-color:var(--water);color:var(--ink)} .fcsp button.on{background:var(--sonar,#F0A038);color:var(--on-sonar,#141E26); border-color:var(--sonar,#F0A038);font-weight:700} /* ── 조황등급 막대 — 등급 칸과 **같은 아이콘·같은 입체** ──────────── */ .fcgrid{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px; overflow-x:auto;padding-bottom:2px} .fcday{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:26px} .fcday .bars{display:flex;flex-direction:column-reverse;gap:2px} /* 등급 칸(.boat .grade i)과 같은 규칙 — 찬 것은 솟고 빈 것은 파인다 */ .fcday .bars i{width:100%;min-width:16px;height:9px;border-radius:2.5px; 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,rgba(255,255,255,.55))} .fcday .bars i.on{ background:linear-gradient(180deg, color-mix(in srgb, var(--sonar,#F0A038) 72%, #fff) 0%, var(--sonar,#F0A038) 46%, color-mix(in srgb, var(--sonar-ink,#A9640A) 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)} /* ★ 예보 밖인 날은 **속 빈 막대**다 — 신뢰도가 다르다는 것을 형태로 말한다. */ .fcday.beyond .bars i.on{background:none; border:1px solid var(--sonar,#F0A038);box-shadow:none} /* ★ 판단 보류인 날은 빈 자리로 둔다. 채우지 않는다. */ .fcday.none .bars i{opacity:.35} /* ── 금어기 띠·금어기 날 (2026-08-24 지시) ───────────────────────── ★ 색만으로 알리지 않는다 — 띠에는 '금어기' 라는 말이, 날칸에는 '금' 글자와 title 이 함께 붙는다(색을 못 보는 사람도 같은 것을 안다). */ .fcseason{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline; margin:10px 0 2px;padding:9px 12px;border:1px solid var(--line); border-left:3px solid var(--water);border-radius:8px;background:var(--hull); font-size:13px;line-height:1.6} .fcseason b{color:var(--water)} .fcseason i{font-style:normal;color:var(--dim);font-size:12.5px;width:100%} .fcseason.shut{border-left-color:var(--warn-ink,#B3402A)} .fcseason.shut b{color:var(--warn-ink,#B3402A)} .fcday.closed .bars{opacity:.45} .fcday.closed .fcban{display:block;margin:2px auto 0;width:16px;height:16px; line-height:16px;border-radius:50%;font-size:10px;font-weight:700; color:#fff;background:var(--warn-ink,#B3402A)} .fcday .dt{font-family:var(--mono);font-size:9.5px;color:var(--ink-soft); text-align:center;line-height:1.3;white-space:nowrap} .fcday .dt i{display:block;font-style:normal;font-size:9px;color:var(--dim)} .fcday .dt.we{color:var(--sonar-hot,#CC4318)} .fcnote{margin:8px 0 0;font-size:11.5px;color:var(--ink-soft);line-height:1.7} .fcnote b{color:var(--ink)} /* ── 말로 하는 설명 ──────────────────────────────────────────────── */ .fcstory{margin-top:14px;padding:12px 14px;border-radius:11px; background:var(--hull-2,#EDF3F4);border:1px solid var(--line)} .fcstory .fch3{margin-top:0} .fcstory p{margin:0 0 8px;font-size:13px;line-height:1.75;color:var(--ink)} .fcstory .pick{font-size:16px} .fcstory .pick .g{margin-left:8px;font-size:12.5px;padding:3px 10px;border-radius:99px; background:var(--sonar,#F0A038);color:var(--on-sonar,#141E26);font-weight:700} .fcstory s{text-decoration:none;color:var(--ink-soft);font-size:12px} .fcstory .book{margin-bottom:0} .fcday .dt{font-size:9px} /* 선장 설문이 말하는 특징 — 좋은 것/아쉬운 것을 색으로 가른다. ★ '보통' 은 아예 안 적는다. 배를 고르는 데 아무 도움이 안 된다. */ .fccap{font-size:13px;line-height:2.1} .fccap .tr{display:inline-block;margin:0 4px 4px 0;padding:3px 10px;border-radius:99px; background:color-mix(in srgb, var(--water) 12%, transparent); color:color-mix(in srgb, var(--water) 55%, var(--ink));font-size:12px;font-weight:600} .fccap .tr.bad{background:color-mix(in srgb, var(--sonar-hot,#CC4318) 12%, transparent); color:color-mix(in srgb, var(--sonar-hot,#CC4318) 60%, var(--ink))} .fccap .tr.neu{background:var(--hull,#FBFDFD);color:var(--ink-soft);border:1px solid var(--line)} .fccap .tr i{font-style:normal;font-family:var(--mono);font-size:10px;opacity:.75; margin-left:5px} /* 설문이 없을 때 — 없다고 말하고 채워 달라고 부른다 */ .fcask{font-size:12.5px;color:var(--ink-soft);line-height:1.8} .fcask b{color:var(--ink)} /* 미담 — **실화만** 적는다(fcTale 주석 참고) */ .fctale{margin:10px 0 8px !important;padding:10px 12px;border-radius:10px; background:var(--hull,#FBFDFD);border:1px solid var(--line);font-size:12.5px;line-height:1.85} .fctale .tag{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:99px; background:var(--bay,var(--hull-2,#EDF3F4));color:var(--ink-soft); font-size:10.5px;font-weight:700;letter-spacing:.02em} .fctale s{text-decoration:none;color:var(--water);font-weight:600} /* ★ 순위 줄의 작은 '조과 예측' 단추 (2026-08-10 지정). ▣ 큰 단추(.fcbtn)와 **같은 색·같은 모서리**를 쓰되 한 단 작다 — 다른 물건으로 보이면 눌러 놓고 다른 것이 열릴까 망설이게 된다. ▣ 이름과 자리 사이에 끼므로 위아래 여백을 최소로 두고 밑선을 맞춘다. ▣ 좁은 화면에서는 글자를 줄이지 않는다 — '예측' 두 글자로 줄이면 무엇의 예측인지 모른다. 대신 여백만 줄인다. */ /* ★ '.boat .fcmini' 였다 — 관심선박 게시판의 줄에서도 같은 단추를 쓰려니 그 자리에서는 선택자가 안 맞아 **옷을 통째로 벗었다**(실측: 브라우저 기본 회색 단추). 예측 단추의 옷은 예측 조각이 갖는다. */ /* ★ 알약은 작게 그대로 두고 `::before` 로 **보이지 않는 표적만** 넓힌다 (2026-09-06 지시 — naksigo `.fcmini` 와 같은 방법). 관심선박 줄에서 글줄 사이에 서므로 상자를 키우면 줄 간격이 무너진다. */ .fcmini{position:relative;margin-left:7px;vertical-align:1px;cursor:pointer; padding:2px 8px;border:0;border-radius:99px;min-height:0; background:color-mix(in srgb, var(--sonar,#F0A038) 88%, var(--hull,#FBFDFD)); color:var(--on-sonar,#141E26);font-family:var(--ui);font-size:10.5px;font-weight:700; box-shadow:inset 0 -1.5px 0 rgba(var(--btn-sh),.32), 0 1px 2px rgba(var(--sh),.18)} .fcmini::before{content:'';position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);height:var(--btbtn-tap,44px)} .fcmini:hover{filter:brightness(.96)} .fcmini:active{box-shadow:inset 0 1.5px 0 rgba(var(--btn-sh),.32)} .fcmini:focus-visible{outline:2px solid var(--water);outline-offset:2px} /* ★ 그래프 제목 줄 — 그래프와 한 벌이라 여기 둔다(2026-08-20). 데스크톱에만 있던 탓에 폰에서는 곁말('겹쳐 그렸습니다…')이 제목 크기로 떠서 두 줄이 같은 무게로 보였다(실측). */ .fch3{margin:14px 0 6px;font-size:13.5px;color:var(--lamp,#0A1D25); display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .fch3 .sub{font-size:11px;color:var(--ink-soft);font-weight:400} /* 물때 그래프 — 단위가 다른 넷을 각자 눕혀 한 판에 겹친다 */ .fcchart svg{width:100%;height:120px;display:block;overflow:visible} .fcchart .ln{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke; stroke-linejoin:round;stroke-linecap:round} .fcchart .s1{stroke:var(--water)} .fcchart .s2{stroke:var(--sonar-hot,#CC4318)} .fcchart .s3{stroke:var(--sonar-ink,#A9640A)} .fcchart .s4{stroke:var(--dim)} /* ★ 추정 구간 — 점선 (2026-08-22 지정). 예보가 없어 '가장 최근 같은 물때' 로 되짚은 값이다. 색은 같게 두고 **선의 결만** 바꾼다 — 다른 색을 주면 다섯 번째 계열로 읽힌다. vector-effect 때문에 dasharray 도 화면 픽셀이다. */ .fcchart .ln.est{stroke-dasharray:3 2.4;opacity:.9} /* ★ 곡선 고르기 (2026-10-01 지시: "전체 사이트에서 조과 예측에서 유속,수온,바람,파고 에 대하여 클릭을 하면 해당 그래프가 도드라지게 해") — 이름표가 단추다. 누른 곡선은 굵고 진하게, 나머지는 흐리게. 다시 누르면 풀린다. */ .fclegend button.fcsb{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:3px; padding:0 4px;margin:0 -4px;border-radius:5px;border:1px solid transparent;line-height:1.35} /* 상자를 작게(2026-10-01 지시) */ .fclegend button.fcsb:hover{background:rgba(127,127,127,.08)} .fclegend button.fcsb:focus-visible{outline:2px solid var(--water,#2E7D91);outline-offset:1px} .fclegend button.fcsb[aria-pressed="true"]{border-color:var(--line,#C9D6DA);background:rgba(127,127,127,.06);font-weight:700} .fcchart.fcsel .fclegend button.fcsb:not([aria-pressed="true"]){opacity:.5} .fcchart .ln{transition:opacity .2s ease,stroke-width .2s ease} .fcchart.fcsel .ln{opacity:.14} .fcchart.fcsel .ln.on{opacity:1;stroke-width:2.8} /* 곡선 옮김(fcMorph, 2026-10-01) — 옮기는 동안 진짜 새 곡선은 숨기고 사본(.fcmv)만 보인다. */ .fcchart.fcmorph .ln.on{opacity:0!important} .fcchart.fcmvend .ln,.fcchart.fcmvend .fcvals{transition:none!important;animation:none!important} .fcchart .ln.fcmv{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;transition:none} /* 고른 곡선의 날짜별 값(2026-10-01) — 그림(svg)과 같은 상자(.fcsvgw) 위에 얹는다. */ .fcchart .fcsvgw{position:relative} .fcchart .fcvals{display:none;position:absolute;inset:0;pointer-events:none} .fcchart .fcvals b{position:absolute;transform:translate(-50%,-125%);font:700 11px/1 var(--mono,ui-monospace,monospace);color:var(--ink,#12303A); white-space:nowrap;text-shadow:0 0 2px var(--paper,#fff),0 0 2px var(--paper,#fff),0 0 3px var(--paper,#fff)} .fcchart[data-fcsel="s1"] .fcvals.s1,.fcchart[data-fcsel="s2"] .fcvals.s2, .fcchart[data-fcsel="s3"] .fcvals.s3,.fcchart[data-fcsel="s4"] .fcvals.s4{display:block} .fcchart.fcmorph .fcvals{opacity:0} .fcchart .fcvals b:first-child{transform:translate(-10%,-125%)} .fcchart .fcvals b:last-child{transform:translate(-90%,-125%)} /* 양 끝 값은 판 밖으로 안 나가게 안쪽으로 */ .fcchart.fcsel .ln.est.on{opacity:.95} @media (prefers-reduced-motion:reduce){ .fcchart .ln{transition:none} } /* 추정 근거 한 줄 */ .fcest{margin:8px 0 0;font-size:11.5px;line-height:1.65;color:var(--ink-soft)} .fcest b{color:var(--ink)} .fcest .sub{display:block;color:var(--dim);font-size:11px} /* 예보가 끝나는 자리 — 여기서부터는 가정이다 */ .fcchart .cut{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3; vector-effect:non-scaling-stroke} .fclegend{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:8px; font-size:11.5px;color:var(--ink-soft)} .fclegend i{display:inline-block;width:14px;height:3px;border-radius:2px; margin-right:5px;vertical-align:middle} .fclegend .s1 i{background:var(--water)} .fclegend .s2 i{background:var(--sonar-hot,#CC4318)} .fclegend .s3 i{background:var(--sonar-ink,#A9640A)} .fclegend .s4 i{background:var(--dim)} .fclegend b{color:var(--ink);font-family:var(--mono);font-size:11px;font-weight:600} .fclegend .cutlb{color:var(--dim)} /* ★ 물때 그래프의 가로축 날짜 (2026-08-10 지정). ▣ 선의 점과 같은 자리에 못박는다(left:% 로 두고 가운데로 당긴다). ▣ 14개가 한 줄에 서므로 글자는 작고 **고정폭**이다 — 자릿수가 흔들리면 숫자가 춤춘다. ▣ 좁은 화면에서는 **하루 걸러** 적는다. 겹쳐서 못 읽는 글자를 다 적느니 절반을 또렷하게 적고 나머지는 눈금으로 두는 편이 낫다. */ .fcchart{position:relative} .fcxaxis{position:relative;height:14px;margin-top:2px} .fcxaxis span{position:absolute;transform:translateX(-50%);white-space:nowrap; font-family:var(--mono);font-size:9px;line-height:14px;color:var(--dim)} .fcxaxis span.we{color:var(--sonar-ink,#A9640A);font-weight:700} /* ★ 양 끝은 당기지 않는다 — 가운데로 당기면 절반이 판 밖으로 나가 잘린다 (실측: '08.11' 이 '11' 로, 마지막 날은 '08.' 로 보였다). 첫 라벨은 왼쪽에 붙이고 마지막 라벨은 오른쪽에 붙인다. */ .fcxaxis span:first-child{transform:none} .fcxaxis span:last-child{transform:translateX(-100%)} /* 예보가 닿지 않는 날 — 흐리게. 그래프의 세로 금 오른쪽과 같은 뜻이다. */ .fcxaxis span.beyond{opacity:.45} /* ★ 날짜는 **하루마다** 적는다 (2026-08-16 운영자 지시 — "1단위로"). 하루 걸러 숨기던 규칙은 14일 시절의 것이다 — 지금 기간(7일)이면 360px 에서도 다 들어간다(naksigo 실측 겹침 0). */ /* ★ **겹칠 때만 하루 걸러 적는다** — 판단은 CSS 가 아니라 JS 가 한다 (2026-08-24 지시: "예측 날짜가 많아서 X축의 날짜가 겹치는 경우에는 날짜 표시를 격일로 처리해서 겹치지 않게"). ▣ 앞서는 여기서 `@media (max-width:400px)` 로 **무조건** 하루 걸러 숨겼다. 그러면 401px 폰에서는 열넉 개가 그대로 겹치고, 기간이 짧아 다 들어가는 좁은 화면에서는 들어가는데도 절반이 사라졌다. 폭이 아니라 **들어가는지**를 재야 맞다 — 그 셈은 _fcchart_js.php 의 fcDateStep() 이 한다. ▣ 숨기는 것은 그대로 `visibility` 다 — 자리를 지워 버리면 남은 날짜가 제 눈금에서 밀려난다. */ .fcxaxis span.hid{visibility:hidden} /* ★ 끝에서 둘째도 숨긴다 — 마지막 날은 늘 보이므로 홀수 자리인 끝둘째와 맞닿아 겹친다(실측 360px: 08.29↔08.30). */ .fcxaxis span:nth-last-child(2){visibility:hidden} .fcxaxis span:first-child, .fcxaxis span:last-child{visibility:visible} } /* ★ 판의 눈금 (2026-08-10 지정) — 왼쪽 기준선은 실선, 날짜는 점선. ▣ ★ vector-effect:non-scaling-stroke 가 **반드시** 있어야 한다. 이 판은 viewBox 100×34 를 폭에 맞춰 늘여 쓴다(preserveAspectRatio:none). 가로가 6배 넘게 늘어나므로, 그 효과가 없으면 세로선의 굵기만 6배가 되어 **점선이 굵은 띠**가 된다. 자료선(.ln)이 이미 같은 이유로 쓰고 있다. ▣ 눈금은 **바탕**이다 — 자료선보다 옅고 가늘게. 눈금이 또렷하면 흐름을 읽는 눈이 격자에 붙잡힌다. ▣ 주말 눈금만 한 단 진하게 — 가로축 날짜의 주말 강조와 짝을 이룬다. */ /* ★ 기준선은 **진하고 조금 두껍게** (2026-08-10 지정). --line 은 표의 칸을 가르는 옅은 선이라, 판의 테두리로 쓰면 눈금(점선)과 구별이 안 됐다. 글자와 같은 계열의 어두운 색(--ink-soft)으로 올리고 굵기도 한 단 올린다(1.4 → 2). 점선(1px)과 두 배 차이가 나야 '테두리'로 읽힌다. ★ 그래도 자료선(1.4px 유채색)보다 앞으로 나서지는 않는다 — 축은 판이고 자료가 주인공이다. 그래서 색만 진하게 하고 opacity 로 한 단 눌러 둔다. */ .fcchart .axis{stroke:var(--ink-soft);stroke-width:2;vector-effect:non-scaling-stroke; opacity:.85;stroke-linecap:square} .fcchart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3; vector-effect:non-scaling-stroke;opacity:.62} .fcchart .grid.we{opacity:.9;stroke:color-mix(in srgb, var(--sonar,#F0A038) 45%, var(--line))} /* ★ 출항 제한 (풍랑주의보·경보) — 2026-08-10 지정. ▣ 왜 등급보다 앞서나 — 아무리 조황이 좋아도 **못 나가는 날**은 못 나간다. 예측 등급은 '얼마나 잡히나' 이고 이것은 '나갈 수 있나' 다. 차원이 다르다. ▣ 띠는 옅게, 글은 진하게 — 띠가 진하면 자료선이 안 보인다. */ .fcchart .lim{fill:var(--sonar,#F0A038);opacity:.13} .fcchart .lim.alert{fill:var(--sonar-hot,#CC4318);opacity:.18} .fcxaxis span.lim{color:var(--sonar-ink,#A9640A);font-weight:700} .fcxaxis span.lim::after{content:'⚑';display:block;font-size:8px;line-height:1;margin-top:-1px} .fcxaxis span.lim.alert{color:var(--sonar-hot,#CC4318)} .fclegend .limlb{color:var(--sonar-ink,#A9640A);font-weight:700} .fclegend .limlb.alert{color:var(--sonar-hot,#CC4318)} .fclim{margin:8px 0 0;padding:9px 11px;border-radius:9px;font-size:12px;line-height:1.6; background:color-mix(in srgb, var(--sonar,#F0A038) 12%, var(--hull,#FBFDFD)); border:1px solid color-mix(in srgb, var(--sonar,#F0A038) 38%, var(--line));color:var(--ink)} .fclim.alert{background:color-mix(in srgb, var(--sonar-hot,#CC4318) 12%, var(--hull,#FBFDFD)); border-color:color-mix(in srgb, var(--sonar-hot,#CC4318) 40%, var(--line))} .fclim .sub{display:block;margin-top:4px;font-size:11px;color:var(--ink-soft)} /* ★ 조과 예측 — 배 이름은 이 칸의 **주인공**이다 (2026-08-10 지정). '조과 예측' 은 기능 이름이라 한 번 읽으면 그만이고, 사람이 계속 확인하는 것은 '어느 배' 다. 곁말 크기(11px 고정폭)로는 그 일을 못 한다. */ #fcHead h2 .fcname{margin-left:10px;font-family:var(--ui);font-size:17px; font-weight:800;letter-spacing:-.3px;color:var(--lamp,#0A1D25); /* 글자가 커진 만큼 음각도 한 단 깊게 — 이 화면의 제목이 쓰는 말과 같다. */ text-shadow:0 -1px 0 rgba(var(--sh),.28), 0 1px 0 var(--eng-light,rgba(255,255,255,.6))} /* ✕ 가 오른쪽 끝을 맡는다(이름이 그 자리를 비웠다). */ #fcHead h2 .fcx{margin-left:auto} /* ★ 등급 칸에도 출항 제한을 표시한다 (2026-08-10 지정). 사람이 '언제 갈까' 를 고르는 곳이 여기다 — 막힌 날에 별 다섯이 떠 있으면 그 별을 보고 예약한다. 칸을 물들이고 날짜 위에 깃발을 세운다. ★ 별(등급)을 지우지는 않는다 — 사실은 사실대로 두고, 못 나간다는 것을 **덧붙인다**. 지우면 왜 이 날이 빠졌는지 알 수 없다. */ .fcgrid .fcday.lim{background:color-mix(in srgb, var(--sonar,#F0A038) 14%, transparent); border-radius:6px} .fcgrid .fcday.lim.alert{background:color-mix(in srgb, var(--sonar-hot,#CC4318) 16%, transparent)} .fcgrid .fcday.lim .dt{color:var(--sonar-ink,#A9640A);font-weight:700} .fcgrid .fcday.lim.alert .dt{color:var(--sonar-hot,#CC4318)} .fcgrid .fcday.lim .dt::before{content:'⚑ ';font-size:9px} /* ★ 조과 예측 제목의 항구 — 이름보다 한 단 작고 한 단 물러난다. */ #fcHead h2 .fcport{margin-left:7px;font-family:var(--ui);font-size:12px; font-weight:600;color:var(--dim);letter-spacing:0} #fcHead h2 .fcport::before{content:'· '} /* ★ 내일의 물때 — 출항 제한 (2026-08-10 지정). 물때·조차보다 **앞서는 사실**이다. 조황이 좋아도 못 나가면 소용이 없다. ★ 조과 예측의 같은 알림(.fclim)과 **같은 색·같은 결**을 쓴다 — 두 화면이 같은 것을 말하는데 모양이 다르면 다른 일로 읽힌다. */ .tidelimit{margin:8px 0 0;padding:8px 10px;border-radius:8px;font-size:11.5px; line-height:1.55;color:var(--ink); background:color-mix(in srgb, var(--sonar,#F0A038) 13%, var(--hull,#FBFDFD)); border:1px solid color-mix(in srgb, var(--sonar,#F0A038) 40%, var(--line))}.tidelimit.alert{background:color-mix(in srgb, var(--sonar-hot,#CC4318) 13%, var(--hull,#FBFDFD)); border-color:color-mix(in srgb, var(--sonar-hot,#CC4318) 42%, var(--line))} .tidelimit .sub{display:block;margin-top:3px;font-size:10.5px;color:var(--ink-soft)} /* ── 실시간 남은 자리 (2026-08-15) ──────────────────────────────────── ★ 예측 그래프 바로 아래에 선다. 「언제 잘 잡히나」 다음 물음이 「그날 자리가 있나」 라, 두 물음 사이에 다른 것을 끼우지 않는다. ★ 값의 성질이 다르다 — 예측은 하루 한 번 바뀌지만 이 숫자는 **분 단위**로 바뀐다. 그래서 기준 시각을 반드시 함께 적는다(.bkfoot). */ .fcbook{margin-top:16px} /* ★ 여는 단추 — 제목 줄 **맨 오른쪽** (2026-08-15 지정). 누르면 그때 수집한다. ▣ 제목과 같은 줄에 두는 까닭 — 무엇을 여는 단추인지가 글자 옆에 있어야 한다. 아래에 두면 목록의 머리처럼 읽힌다. ▣ 예측의 다른 단추(.fcmini)와 **같은 결**이되 색은 곁색이다 — 이것은 다른 화면으로 가는 문이 아니라 이 자리를 여닫는 손잡이다. */ .fcbook .fch3{display:flex;align-items:baseline;gap:8px} .fcbook .fch3 .sub{flex:1 1 auto} .bktog{flex:0 0 auto;cursor:pointer;min-height:0;padding:3px 12px;border-radius:99px; border:1px solid var(--line);background:var(--hull,#FBFDFD);color:var(--ink); font-family:var(--ui);font-size:11.5px;font-weight:700} .bktog:hover{background:var(--hull-2,#EDF3F4)} .bktog[aria-expanded="true"]{background:var(--hull-2,#EDF3F4);color:var(--ink-soft)} .bktog:disabled{opacity:.6;cursor:progress} .bktog:focus-visible{outline:2px solid var(--water);outline-offset:2px} /* 수집 중 — 기다리는 동안 **무엇을 기다리는지** 적는다(빈 칸은 고장으로 읽힌다) */ /* ★ 「열기」를 누르면 **모래시계가 돈다** — 2026-08-20 운영자 지시 ("남은 자리 열기를 클릭하는 경우 모래 시계 등 아이콘으로 진행 중임을 표시"). ▣ 왜 필요한가 — 이 단추는 그 배의 예약 사이트를 그 자리에서 긁는다. 배에 따라 **최대 15초** 걸린다. 그동안 글자만 있으면 눌린 것인지 멈춘 것인지 알 수 없어 사람이 다시 누른다. ▣ 글자도 같이 바꾼다("여는 중…") — 그림만으로 알리지 않는다. 색·움직임을 못 보는 사람에게도 상태가 말로 전해져야 한다(aria-busy 도 같이 준다). ▣ prefers-reduced-motion 이면 **돌리지 않는다**. 멈춰 있어도 모래시계와 글자가 이미 '기다리는 중'을 말한다. */ .bkhg{width:13px;height:13px;vertical-align:-2px;margin-right:4px; animation:bkhgspin 1.6s ease-in-out infinite} @keyframes bkhgspin{0%,45%{transform:rotate(0)}55%,100%{transform:rotate(180deg)}} @media (prefers-reduced-motion:reduce){.bkhg{animation:none}} .bkwait{margin:8px 0 0;font-size:12.5px;color:var(--ink-soft);line-height:1.7} .bkwait b{color:var(--ink)} .bkwait .sub{margin-left:6px;font-size:11px;color:var(--dim)} .bkcap{margin:0 0 8px;font-size:13px;color:var(--ink)} .bkcap b{font-family:var(--mono)} .bkcap .alt{margin-left:8px;font-size:11.5px;color:var(--ink-soft)} .bksum{margin:0 0 8px;font-size:12.5px;color:var(--ink-soft);line-height:1.7} .bksum b{color:var(--ink);font-family:var(--mono)} /* ★ 하루로 접지 않는다 — 한 배가 하루 두 번 나간다(04:00 / 16:30). 접으면 오전만 보고 온 손님이 헛걸음한다(docs/booking_crawl.md §3.1). */ .bklist{max-height:246px;overflow-y:auto;border:1px solid var(--line);border-radius:10px; background:var(--hull,#FBFDFD)} .bkrow{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center; gap:4px 10px;padding:7px 11px;border-bottom:1px solid var(--line);font-size:12.5px} .bkrow:last-child{border-bottom:0} .bkrow .dt{font-family:var(--mono);font-size:12px;color:var(--ink);white-space:nowrap} .bkrow .dt i{font-style:normal;margin-left:3px;color:var(--dim);font-size:11px} .bkrow .dt i.we{color:var(--sonar-hot,#CC4318)} .bkrow .tm{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);white-space:nowrap} .bkrow .sp{font-size:11.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .bkrow .sp b{color:var(--ink);font-weight:600} /* 남은 자리 — 숫자는 고정폭으로, 상태 글자는 서버가 준 말 그대로. */ .bkseat{justify-self:end;padding:3px 10px;border-radius:99px;white-space:nowrap; font-family:var(--mono);font-size:12px;font-weight:700; background:color-mix(in srgb, var(--water) 13%, transparent); color:color-mix(in srgb, var(--water) 55%, var(--ink))} .bkseat.few{background:color-mix(in srgb, var(--sonar-hot,#CC4318) 13%, transparent); color:color-mix(in srgb, var(--sonar-hot,#CC4318) 62%, var(--ink))} /* ★ 자리가 없는 것과 **모르는 것**은 다른 옷을 입는다. 같은 회색이면 "0자리" 로 읽힌다 — 우리가 안 재 본 날을 손님이 다 찼다고 읽으면 안 된다. */ .bkseat.off{background:var(--hull-2,#EDF3F4);color:var(--ink-soft); font-family:var(--ui);font-weight:600;font-size:11.5px} .bkseat.unk{background:none;border:1px dashed var(--line);color:var(--dim); font-family:var(--ui);font-weight:600;font-size:11.5px} .bkfoot{margin:8px 0 0;font-size:11px;color:var(--ink-soft);line-height:1.75} .bkfoot b{color:var(--ink)} .bkfoot a{color:var(--water);font-weight:600} /* ★ 출처 이름에 **따로 옷을 입히지 않는다**. 고정폭 글꼴로 감쌌더니 좁은 폭에서 「선상 / 24」 로 갈라졌고, nowrap 을 줘도 그 칸이 줄을 통째로 차지해 「선상24」 만 한 줄에 남았다(2026-08-15 360px 실측). 문장 속 글자다. */ /* ★ 좁은 폭에서는 한 편이 **두 줄**이다 — 넷을 한 줄에 두면 어종이 잘린다. 자리는 grid-area 로 **못박는다**. 자동 배치에 맡기면 행만 정해진 항목이 먼저 놓여 알약이 날짜 자리로 간다(폰 화면에서 실측한 자리 바꿈이다). */ @media (max-width:520px){ .bkrow{grid-template-columns:auto 1fr auto;row-gap:2px} .bkrow .dt{grid-area:1/1} .bkrow .tm{grid-area:1/2} .bkrow .sp{grid-area:2/1/3/3} .bkseat{grid-area:1/3/3/4;align-self:center} } /* 날짜별 조과 예측 — 날짜 아래 물때 (2026-10-01 지시: "날짜별 조과 예측의 그래프 하단 날짜 아래에 물때를 추가해"). 조금·무시는 붉게(조과 추이 물때 줄과 같은 결). */ .fcday .dt em.mul{display:block;font-style:normal;font-size:9.5px;line-height:1.2;color:var(--water,#2E7D91);white-space:nowrap} .fcday .dt em.mul.jo{color:#B3372A}