/* ══ 부르는 단추 — 「조과 예측」의 .fcbtn 과 같은 크기·같은 자리감 ═══════ ★ 색은 **초록**이다(예측 단추는 호박). 잉크 규율 그대로다 — 이쪽은 이미 들어온 조황글을 모아 센 **집계된 사실**이고, 예측은 아직 없는 날을 헤아리는 일이라 색이 달라야 한다. 나란히 서 있어도 헷갈리지 않는다. */ .ptcall{margin:12px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* ★ 보이는 상자 34px + **누름판 44px** (2026-09-06). 「조과 예측」(.fcbtn)과 한 벌이다 — 나란히 서는 단추라 손끝 면이 다르면 안 된다. 값은 --btbtn-tap 한 곳을 가리킨다. ★ 이 파일은 **네 사이트에 바이트까지 같은 사본**이다(naksigo·onfishing· fishtoday·fishlog). 한 곳만 고치면 갈린다 — 넷을 함께 고친다. */ .ptbtn{position:relative;display:inline-flex;align-items:center;gap:5px;cursor:pointer; padding:7px 13px;border-radius:var(--pt-r-sm,9px);border:0;min-height:34px; background:var(--pt-accent,var(--now,#3BE08A));color:var(--pt-on-accent,var(--on-now,#0A1A14)); font-family:var(--ui,inherit);font-size:13px;font-weight:800} .ptbtn::before{content:'';position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);height:var(--btbtn-tap,44px)} .ptbtn:hover{filter:brightness(.96)} .ptbtn .ptar{font-weight:400} .ptcall .ptsub{font-size:11.5px;color:var(--pt-dim,var(--ink-soft,#3E5C68))} /* ══ 떠오르는 층 — _forecast.php 의 #fcModal 과 같은 규칙 ════════════════ ▣ 뒤를 어둡게 덮되 지우지 않는다 — 어디서 눌렀는지를 잃지 않게. ▣ 닫는 길 셋: ✕ · 바깥 어두운 데 · Esc. ▣ 구르는 것은 **안쪽 상자**다 — 창이 통째로 구르면 ✕ 가 밀려 사라진다. */ #ptModal{position:fixed;inset:0;z-index:92;display:none} #ptModal.on{display:block} #ptModal .ptdim{position:absolute;inset:0;background:rgba(6,20,28,.55)} #ptModal .ptwin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(860px,calc(100vw - 24px));max-height:min(90vh,940px); display:flex;flex-direction:column; background:var(--pt-paper,var(--hull,#FBFDFD));color:var(--ink,#12303A); border:1px solid var(--pt-line,var(--line,#D2E0E3));border-radius:var(--pt-r,16px); box-shadow:0 24px 60px rgba(6,20,28,.45);padding:16px 18px 18px} #ptModal .ptx{position:absolute;right:10px;top:10px;width:32px;height:32px; border:0;border-radius:var(--pt-r-sm,9px);cursor:pointer;font-size:15px;line-height:1; background:transparent;color:var(--ink,#12303A)} #ptModal .ptx:hover{background:rgba(127,127,127,.14)} #ptHead{padding-right:38px} #ptHead .ptt{font-size:17px;font-weight:800;margin:0 0 2px} #ptHead .ptm{font-size:12px;color:var(--pt-dim,var(--ink-soft,#3E5C68))} #ptBox{overflow:auto;margin-top:12px;padding-right:2px} #ptBox .ptnote{margin:6px 0 0;font-size:11.5px;color:var(--pt-dim,var(--ink-soft,#3E5C68));line-height:1.55} #ptBox .ptghost{color:var(--pt-dim,var(--ink-soft,#3E5C68));font-size:13px;margin:16px 0} /* ══ 그래프 한 벌 ═══════════════════════════════════════════════════════ */ .ptg{margin:14px 0 0} .ptg > .ptk{font-size:14px;font-weight:800;margin:0 0 2px} .ptg > .ptk .ptu{font-weight:500;font-size:11.5px;color:var(--pt-dim,var(--ink-soft,#3E5C68));margin-left:6px} /* ★ 칸 나눔 — Y축 눈금(왼쪽) + 그림판. 두 그래프가 **같은 폭**이라야 같은 날짜가 위아래로 나란히 선다(눈이 그 줄을 따라 읽는다). */ .ptc{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 6px;margin-top:8px} .ptc .ptyax{position:relative;height:var(--ph,190px);font-size:10px; color:var(--pt-dim,var(--ink-soft,#3E5C68));font-family:var(--mono,ui-monospace,monospace)} .ptc .ptyax span{position:absolute;right:0;transform:translateY(50%);white-space:nowrap} /* ★ 여백을 두지 않는다 (2026-08-27, 3차원을 걷으면서 함께 바로잡음). 예전에는 입체가 삐져나갈 자리로 위·오른쪽에 9px 을 비웠는데, 그 여백이 **눈금선과 막대를 어긋나게 하고 있었다**: 눈금선(.ptgl)은 절대배치라 안쪽여백을 **포함한** 상자를 기준으로 서고, 막대(.ptbars)는 여백을 **뺀** 상자를 채운다. 그래서 꼭대기 값을 가진 막대가 맨 위 눈금선보다 9px 낮게 섰다 — 그림이 값보다 조금씩 작아 보였다. ★ 2차원에서는 삐져나갈 것이 없으므로 여백 자체를 없앤다. 이제 두 자가 같은 상자를 본다 — 꼭대기 막대가 맨 위 눈금선에 정확히 닿는다. */ .ptc .ptplot{position:relative;height:var(--ph,190px); border-left:1px solid var(--pt-line,var(--line,#D2E0E3)); border-bottom:1px solid var(--pt-line,var(--line,#D2E0E3))} .ptc .ptgl{position:absolute;left:0;right:0;height:0; border-top:1px dashed var(--pt-line,var(--line,#D2E0E3)); opacity:.55;pointer-events:none} .ptc .ptbars{position:relative;height:100%;display:flex;align-items:flex-end;gap:2px} .ptc .ptcol{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column; justify-content:flex-end;position:relative} /* 빈 날 — 막대가 없다. 자리는 남긴다(날짜가 밀리면 X축이 거짓말을 한다). */ .ptc .ptcol.zero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--pt-line,var(--line,#D2E0E3))} /* ══ 막대 조각 — **2차원 납작 막대** (2026-08-27 지시: "그래프를 2D로 변경해") 앞서 있던 윗면·옆면(가짜 요소로 깎아 붙이던 것)은 **걷어냈다.** ▣ ★ 3차원에서는 그 **윗면이 조각과 조각을 갈라 주는 구실**도 했다. 걷으면 색만 남아, 비슷한 색이 위아래로 붙으면 한 덩이로 보인다. 그래서 조각마다 머리카락 굵기의 밝은 선을 하나 둔다 — 맨 아래 조각에는 안 둔다(축 위에 군더더기 선이 겹친다). ▣ 값은 조각의 **높이 하나**로만 말한다. 2차원의 이점이 그것이다 — 입체는 보기에 좋지만 윗면 두께만큼 값이 부풀어 보인다. */ .ptc .ptseg{position:relative;background:var(--c,#3BE08A);min-height:2px} /* 고른 어종의 값 글자(window.PT_VALS 를 켠 곳만 들어 있다, 2026-10-01) — 조각 위에 붙는다. 고르기 전에는 안 보인다. */ .ptc .ptseg > .ptval{display:none;position:absolute;left:50%;bottom:100%;transform:translateX(-50%);padding-bottom:1px; font:700 9.5px/1 var(--mono,ui-monospace,monospace);color:var(--ink,#12303A);white-space:nowrap;pointer-events:none; text-shadow:0 0 2px var(--pt-bg,var(--hull,#fff)),0 0 2px var(--pt-bg,var(--hull,#fff))} #ptBox.ptsel .ptseg.on > .ptval{display:block} .ptc .ptdot > .ptval{padding-bottom:3px} /* 꺾은선 점 위 숫자 — 점과 조금 띄운다 */ /* 고른 어종 조각 꼭대기 위의 그림(window.PT_ICONS, 2026-10-01) — 몸은 흰색, 테두리는 진하게(같은 색 막대 위·흐린 이웃 조각 위 어디서나 보이게 — 처음엔 몸을 어종 색으로 칠했더니 같은 색 막대 위에서 검은 덩어리로 보였다). 그림이 있으면 값 글자는 그림 위로 올린다(조각이 낮아도 겹치지 않게). */ .ptc .ptseg > .ptic{display:none;position:absolute;left:50%;bottom:100%;transform:translateX(-50%); width:var(--ptic-w,min(22px,96%));height:var(--ptic-h,14px);color:var(--c,#3BE08A);pointer-events:none;overflow:visible} /* ★ 칠은 그림 파일에 **속성으로** 박혀 있다 — 의 복제에는 문서 CSS 가 안 걸린다(크롬 실측: 클래스로 칠하면 검게 나왔다). 그림 파일의 viewBox 는 그림에 꼭 맞춰 잘랐고 아래 맞춤(xMidYMax)이라 막대 꼭대기에 **붙는다**(2026-10-01 재지시: "막대그래프에 붙여서"). */ #ptBox.ptsel .ptseg.on > .ptic{display:block} /* ★ 자리 (2026-10-01 재지시: "선택된 어종에 대한 어종 아이콘을 막대 그래프 맨 상단에 표시하고 … 선박 아이콘을 표시하고 선박수 및 조과 지수는 아이콘 상단에 표시해") — 그림은 고른 조각의 **꼭대기 위**, 숫자는 **그림 위**. (처음엔 조각 맨 아래에 그렸다.) 그림 크기는 사이트가 --ptic-w·--ptic-h 로(naksigo.com 데스크톱이 키운다). */ #ptBox.ptsel .ptseg.on > .ptic ~ .ptval{bottom:calc(100% + var(--ptic-h,14px) + 1px)} /* ★ 조과지수 판의 숫자는 **막대 안 맨 위**(2026-10-04 지시: "조과 추이에서 막대그래프의 막대내 상단에 조과지수를 표시해"). 낚시배 판(척)은 그대로 그림 위. 조각이 글자보다 낮으면(12px 미만) 안에 안 들어가니 예전처럼 조각 위로 — 조각을 크기 그릇으로 재서 가른다 (조각 높이는 % 로 정해져 있어 size 그릇이 된다). 글자는 흰색 + 어두운 테(어종 색이 밝든 어둡든 읽히게). */ .ptc .ptseg:has(> .ptin){container-type:size;container-name:ptseg} /* ★ 색 (2026-10-04 재지시: "조과지수 수자가 잘 안보여 색상을 변경해") — 흰 글자 + 어두운 테는 밝은 어종 색(초록 등) 위에서 흐렸다. → 진한 굵은 글자. (흰 바탕 딱지를 잠깐 깔았다가 같은 날 "글자 배경은 제거해"로 걷었다 — 글자만 남긴다.) */ #ptBox.ptsel .ptseg.on > .ptval.ptin,#ptBox.ptsel .ptseg.on > .ptic ~ .ptval.ptin{bottom:auto;top:2px;padding:0; background:none;color:#0B2530;font-weight:800;text-shadow:none;box-shadow:none} @container ptseg (max-height:12px){ #ptBox.ptsel .ptseg.on > .ptval.ptin{top:auto;bottom:100%;padding:0 0 1px;color:var(--ink,#12303A); text-shadow:0 0 2px var(--pt-bg,var(--hull,#fff)),0 0 2px var(--pt-bg,var(--hull,#fff))} #ptBox.ptsel .ptseg.on > .ptic ~ .ptval.ptin{bottom:calc(100% + var(--ptic-h,14px) + 1px)} } @media (max-width:480px){ .ptc .ptseg > .ptval{font-size:8px;letter-spacing:-.4px} } /* 폰 — 칸이 좁아 이웃 값이 붙어 읽혔다(2026-10-01 실측 「2.02.0」) */ .ptc .ptseg:not(:last-child){box-shadow:inset 0 -1px 0 rgba(255,255,255,.55)} /* X축 — 막대와 **같은 칸 나눔**이라 그림과 어긋나지 않는다. */ .ptc .ptxax{grid-column:2;display:flex;gap:2px;margin-top:5px; font-size:9.5px;color:var(--pt-dim,var(--ink-soft,#3E5C68)); font-family:var(--mono,ui-monospace,monospace)} .ptc .ptxax i{flex:1 1 0;min-width:0;text-align:center;font-style:normal;line-height:1.25} .ptc .ptxax i b{display:block;font-weight:700;color:var(--ink,#12303A)} /* ══ 토·일 (2026-08-27 지시) ═══════════════════════════════════════════ ▣ ★ **막대 색은 건드리지 않는다.** 그 색은 이미 어종이 쓰고 있다 — 거기에 요일까지 실으면 한 색이 두 가지를 말하게 되고 둘 다 안 읽힌다. 요일은 **날짜 칸**으로 가른다: 글자 색 + 그 칸 뒤의 옅은 띠. ▣ 색은 달력의 관습을 그대로 쓴다 — **토요일 파랑 · 일요일 빨강**. 새로 가르치지 않아도 아는 색이라 범례가 필요 없다. ▣ 띠는 아주 옅게(7%) 깐다. 진하면 그 날 막대의 색이 그 위에서 달라 보인다 — 옆 칸과 견주는 그래프에서 그것은 거짓말이 된다. */ .ptc .ptxax i.sat b{color:#1F5FA8} .ptc .ptxax i.sun b{color:#B3372A} .ptc .ptcol.sat{background:rgba(31,95,168,.07)} .ptc .ptcol.sun{background:rgba(179,55,42,.07)} /* 이름표 — 두 그래프가 **같은 색·같은 차례**를 쓴다(위아래를 눈으로 잇는다). */ /* ══ 이름표 — 맨 위에 서고, **눌러서 고른다** (2026-08-27 지시) ═════════ ▣ 색이 무슨 어종인지 알려 주는 자리이자, 그 어종만 도드라지게 하는 손잡이다. ▣ 진짜