:root{ /* 전표 색 — mokups/시안E~N 이 쓰는 값 그대로. */ --desk:#D8CFBC; --ledger:#F6EEDD; --ledger-2:#EFE4CD; --ink:#2B2420; --ink-soft:#5A4C40; --dim:#8A7B68; --stamp:#B7282E; --carbon:#3E5E86; --rule:#D3C2A0; --rule-2:#E3D7BC; --edge:#C6B694; /* 썸네일 한 칸 — 그림·점선 자리·격자 칸이 **이 한 값**을 같이 본다. 2026-09-02: 62×47 → 84×63 → **96×72**(지시 두 번 "조금 크게" → "조금 더"). ★ 여기까지가 **줄이 두꺼워지지 않는 끝**이다 — 줄 안쪽 높이가 86px (105px 에서 위아래 여백 19px 을 뺀 값)이라, 72px 까지는 글이 정한 높이 안에 들어간다. 그 위(84px)로 가면 사진이 줄 높이를 밀어 올려 한 화면에 들어오는 글이 준다. 「조금 더」의 자리는 그 앞이다. ★ 4:3 은 그대로 — 조황 사진이 대개 가로라 비율을 바꾸면 잘리는 자리가 는다. 폰 갈래가 74×56 으로 되돌린다(폰은 이 지시의 대상이 아니다). */ --th-w:96px; --th-h:72px; --th-r:10px; /* ★ 조과 추이 층(layout/_porttrend.php)이 받는 껍데기 색·모서리 (2026-09-02). 그 조각은 onfishing.net·fishtoday.kr 과 **같은 파일**이라 값을 못 박을 수 없다 — 껍데기만 변수로 받아 사이트마다 제 팔레트로 선다. 저쪽 둘은 인광 초록·호박이고, 이 원장은 **먹 + 장부지**다(흰 창을 띄우면 그 층만 남의 화면에서 오려 붙인 것처럼 뜬다). ★ 단추를 먹으로 채우는 것은 원장의 다른 단추(.qbar button:hover)와 같은 모양이다 — 이 화면에 **새 색을 들이지 않는다**. ★ 모서리도 원장의 것(2~4px)으로 낮춘다 — 전표는 각진 종이다. */ --pt-accent:var(--ink); --pt-on-accent:var(--ledger); --pt-dim:var(--dim); --pt-paper:var(--ledger); --pt-line:var(--rule); --pt-r:4px; --pt-r-sm:3px; --mono:"D2Coding",ui-monospace,"SFMono-Regular",Consolas,monospace; --gothic:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--desk);color:var(--ink);font-family:var(--gothic); font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased} /* ══ 글자 크기 (2026-08-27 지시: "m.onfishing.net/#me 의 「글자 크기」 기능을 m.fishlog.kr/mine 에도 추가해서 구현해") ═══════════════════════════════════════ ▣ ★ 왜 `zoom` 인가 — 이 화면은 글자·여백·아이콘이 **전부 px** 로 짜여 있다. html 의 font-size 를 키워도 px 값은 꿈쩍하지 않아 글자만 커지고 칸은 그대로다(줄이 넘치고 단추 안에서 글자가 잘린다). zoom 은 화면 전체를 같은 비율로 키워 짜임새를 지킨다 — 손가락으로 벌린 것과 같다. m.onfishing.net·m.fishnow.kr 이 같은 까닭으로 같은 것을 쓴다. ▣ ★ 다만 **vh·vw 는 zoom 을 따라오지 않는다** — 92vh 가 그대로 1.35배가 되어 화면 밖으로 넘친다. 그래서 vh·vw 를 쓰는 자리마다 `/var(--fs,1)` 로 되돌려 나눈다(이 파일과 팝업 조각들). ▣ ★ 기본값이 1 이라 **데스크톱에는 아무 일도 안 일어난다** — --fs 를 정하는 것은 폰의 「내 기록」 화면뿐이다. ▣ 기본은 1 이고 **키우기만** 한다 — 지시가 '더 크게' 다. ▣ 단계·이름·저장 방식은 m.onfishing.net 과 같다(같은 것을 다르게 두면 두 화면을 오가는 사람이 매번 다시 익힌다). */ body.mo{zoom:var(--fs,1)} body.mo .fzs{display:flex;gap:6px;margin-top:8px} body.mo .fzs button{flex:1 1 0;min-width:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:2px;padding:9px 0 8px; border:1px solid var(--rule);border-radius:3px;background:var(--paper,#FFFDF7); color:var(--ink);font:inherit;line-height:1.1;cursor:pointer} body.mo .fzs button span{font-size:10.5px;color:var(--dim);line-height:1.2} body.mo .fzs button[aria-pressed="true"]{border-color:var(--carbon);color:var(--carbon)} a{color:var(--carbon)} ::selection{background:var(--stamp);color:#fff} :focus-visible{outline:2px solid var(--stamp);outline-offset:2px} /* ── 전표 한 장 ── */ .slip{max-width:1180px;margin:0 auto;background:var(--ledger);border:1px solid var(--edge); box-shadow:0 0 0 1px rgba(43,36,32,.06),0 14px 34px -22px rgba(43,36,32,.55); min-height:calc(70vh / var(--fs,1))} @media (max-width:860px){.slip{margin:0 6px}} /* ── 머리 — 데스크톱은 원장 머리, 폰은 집게(clip) ── */ header.head{border-bottom:3px double var(--ink);padding:14px 24px 11px;position:relative} .hrow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; font-family:var(--mono);font-size:11.5px;color:var(--dim);padding-right:186px} .brand{font-family:var(--gothic);font-size:18px;font-weight:800;color:var(--ink); text-decoration:none} .brand b{color:var(--stamp)} .brand small{font-weight:400;font-size:11.5px;color:var(--dim);margin-left:8px} .hrow .sp{flex:1} .hrow .cntno{color:var(--carbon);border:1px solid var(--carbon);border-radius:2px; padding:1px 7px;white-space:nowrap} .hrow nav a{margin-left:10px;text-decoration:none;border-bottom:1px solid #C6D2E0} .hrow nav a[aria-current]{color:var(--ink);font-weight:700;border-bottom:2px solid var(--ink)} /* ★ 큰 도장 — 원장 머리 오른쪽. 글자 자리(padding-right)는 비워 두었다: 도장이 접수 건수를 덮으면 도장이 아니라 가림막이 된다(시안 M 실측). */ .stamp-xl{position:absolute;right:26px;top:8px;transform:rotate(-9deg); border:3px solid var(--stamp);color:var(--stamp);border-radius:4px; font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.3em; padding:6px 11px 6px 15px;opacity:.85;mix-blend-mode:multiply;pointer-events:none; box-shadow:inset 0 0 0 1.5px var(--stamp)} .stamp-xl small{display:block;font-size:8.5px;letter-spacing:.1em;font-weight:400; text-align:center;margin-top:2px} @media (max-width:860px){ /* 폰 — 시안 N 의 집게: 먹 바탕의 띠가 뭉치를 문다. */ header.head{background:var(--ink);color:var(--ledger);border-bottom:0; border-radius:3px 3px 0 0;padding:10px 14px} .hrow{font-size:11px;padding-right:0;gap:10px} .brand{color:var(--ledger);font-size:16px} .brand b{color:#E8A0A4} .brand small{color:#B7AC97} .hrow .cntno{border-color:#8A97AC;color:#C9D4E4} .hrow nav a{color:#C9D4E4;border-bottom-color:#5A6478} .hrow nav a[aria-current]{color:var(--ledger);border-bottom-color:var(--ledger)} .stamp-xl{display:none} } main.paper{padding:0 0 26px} /* ── 절 — 뜯는 선으로 가른다 ── */ .sec{padding:14px 24px 16px;border-bottom:1px dashed var(--rule)} .sec:last-child{border-bottom:0} /* ★ 머리 줄은 **접힌다 — 낱말을 쪼개지 않고** (2026-09-03 화면 점검). 360px 에서 이 줄이 한 줄에 셋(SEARCH · 제목 · 셈/정렬)을 억지로 세우느라 저마다 안에서 줄이 갈렸다: 「'갈치' 조회 결/과」·「마/리순」처럼 **한 낱말 가운데가 끊겼다**(실측). 한글은 낱말 사이에서 끊어야 읽힌다. · flex-wrap — 좁으면 셋이 각자 제 줄로 내려간다(줄어들다 깨지지 않게) · keep-all — 한글 낱말 가운데를 끊지 않는다 · anywhere — 그래도 한 낱말이 한 줄보다 길면(긴 검색어) 끊어서 밀림을 막는다 ★ 데스크톱은 그대로다 — 1280px 에서는 셋이 한 줄에 들어가 접힐 일이 없다. 두 판이 다른 것은 **칸의 판(Feed::CARDS)**이지 이 줄의 옷이 아니다. */ h2.k,.sec h2{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--dim); font-weight:700;margin:0 0 10px;display:flex;align-items:baseline;gap:9px; flex-wrap:wrap;word-break:keep-all;overflow-wrap:anywhere} h2.k::before,.sec h2::before{content:"■";color:var(--stamp);font-size:8px} h2 .meta{font-size:10px;letter-spacing:.02em;font-weight:400;color:var(--carbon)} /* 정렬 손잡이(최신순·마리순)는 낱말 하나다 — 어느 폭에서도 안 쪼갠다. */ h2 .meta a{white-space:nowrap} .note{font-size:12.5px;color:var(--ink-soft);line-height:1.65} /* ══ 약관·개인정보취급방법 (2026-08-24) ═══════════════════════════════════ ★ 두 글은 **같은 옷**을 입는다 — 한쪽만 급히 만든 문서처럼 보이지 않게. ★ 읽는 글이라 한 줄 폭을 좁게 잡는다(38em ≈ 한글 40자 안팎). 넓으면 다음 줄 첫 글자를 눈이 못 찾는다. */ .policy{max-width:38em;margin:0 auto;line-height:1.75;font-size:13.5px} .policy h1{font-size:20px;margin:2px 0 10px} .policy h2{font-size:14.5px;margin:22px 0 6px;padding-top:12px; border-top:1px solid var(--rule)} .policy h3{font-size:13px;margin:12px 0 4px} .policy p{margin:8px 0} .policy ul{margin:8px 0;padding-left:18px} .policy li{margin:5px 0} .policy code{font-family:var(--mono);font-size:12px} .policy .lead{font-size:14px} /* 한 줄 요약 — 다 읽지 않는 사람이 여기만 읽어도 뜻이 통해야 한다. */ .policy .quick{padding:10px 12px;border:1px solid var(--rule);border-radius:10px; background:var(--ledger-2)} .policy a{color:var(--carbon)} .note b{color:var(--ink)} .errbox{margin:14px 24px;padding:11px 14px;border:1.5px solid var(--stamp); color:var(--stamp);font-size:13.5px;border-radius:2px} /* ── 기재란 — 조회 ── */ .qbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap; padding:13px 24px;border-bottom:1px dashed var(--rule)} .qbar label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--dim)} .qbar input{flex:1;min-width:170px;border:0;border-bottom:1.5px solid var(--ink); background:transparent;font:inherit;font-size:16px;padding:3px 1px;color:var(--ink)} .qbar input::placeholder{color:var(--dim);font-size:12.5px} .qbar button{border:1.5px solid var(--ink);background:transparent;color:var(--ink); font:inherit;font-family:var(--mono);font-size:12px;padding:6px 14px;cursor:pointer; border-radius:2px;min-height:38px} .qbar button:hover{background:var(--ink);color:var(--ledger)} .zones{display:flex;gap:2px 12px;flex-wrap:wrap;font-family:var(--mono);font-size:12px} .zones a{color:var(--ink-soft);text-decoration:none;padding:6px 1px} .zones a.on{color:var(--ink);font-weight:700;border-bottom:2px solid var(--ink)} /* 찾은 말 지움 칩 — 사람이 쓴 조건이라 파랑. */ .qchip{font-family:var(--mono);font-size:12px;color:var(--carbon);text-decoration:none; border:1px solid var(--carbon);border-radius:2px;padding:4px 9px;white-space:nowrap} .qchip b{font-weight:800;margin-left:5px} /* ── 원장 줄 / 낱장 — 같은 마크업, 두 판형 ── */ /* ★ 썸네일 칸을 **기입 왼쪽**에 낸다 (2026-08-22 지시: "각 조과의 우측에 썸네일"). 오른쪽 끝은 기입(담기·좋아요)이 이미 쓰고 있어, 사진은 그 바로 앞에 세운다 — 눈이 왼쪽에서 오른쪽으로 사실을 읽고 마지막에 증거(사진)를 보고 손이 기입으로 간다. */ /* ★ 「마리」 칸을 걷고 그 자리에 **둘째 줄(배 제원)** 을 냈다 (2026-09-02 지시: "둘째 줄에 정원·톤수·어선 번호·어업 종류·신고 유효·선박지수를 더한다", "첫 줄에 있는 마리수는 제거한다"). ▣ 줄이 셋이 된다 — ①사실(항구·선박·어종·물때) ②배 제원 ③글 제목. 제원을 **둘째**에 놓은 것은 지시 그대로이고, 읽는 차례로도 맞다: ①줄이 「어느 배가」를 말하고 둘째 줄이 그 배가 **어떤 배인지**를 잇는다. 제목은 이 원장에서 곁말이라(작은 글씨) 셋째로 내려도 잃는 것이 없다. ▣ 칸은 아홉에서 **여덟**이 됐다(64px 짜리 마리 칸이 빠졌다). 제원 줄은 항구·선박·어종 세 칸을 합쳐 쓴다 — 1280px 에서 818px 이라 여섯이 한 줄에 선다. 좁아지면 그 안에서 접힌다(표는 안 흔들린다). ▣ 제원이 하나도 없는 줄은 _spec 이 **아무것도 내지 않는다** — 그 줄만 두 줄짜리로 서고 격자는 그대로다. */ /* ★ 썸네일은 **맨 오른쪽**이다 (2026-09-02 지시: "썸네일은 맨 우측에 배치해"). 앞서는 기입(담기·좋아요) 왼쪽이었다 — 눈이 사실을 읽고 마지막에 증거(사진)를 본 뒤 손이 기입으로 간다는 뜻이었는데, 실제로는 **사진이 표 한가운데 갇혀** 줄 끝이 단추밭으로 끝났다. ★ 칸 너비도 **함께** 자리를 바꿨다(62px↔158px). 안 바꾸면 사진이 158px 칸에, 단추가 62px 칸에 들어가 단추 글자가 세로로 접힌다(fishtoday 에서 실측한 함정과 같은 것이다). ★ 폰 갈래는 이미 사진이 오른쪽이라(…"tit th" "boat th") 손대지 않았다. */ .ledger-h{display:grid;grid-template-columns:46px 52px 1.1fr 0.95fr 1.4fr 46px 158px var(--th-w); gap:0 10px;padding:9px 24px 6px;border-bottom:2px solid var(--ink); font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim)} .ledger-h .n{text-align:right} .row{display:grid;grid-template-columns:46px 52px 1.1fr 0.95fr 1.4fr 46px 158px var(--th-w); /* ★ 줄 차례 — **제목이 제원보다 위**다 (2026-09-02 지시: "셋째줄과 넷째줄의 순서를 변경해줘"). ▣ 앞서는 ①사실 ②제원 ③제목이었다. 목록에서 사람이 먼저 읽는 것은 **제목**인데 제원 아래에 깔려 있었다 — 오늘 제목을 12→13.5px 로 키운 것(e709e724)과 같은 결의 고침이다. ▣ 이제 ①어느 배가 무엇을 잡았나 → ②무슨 글인가 → ③어떤 배인가 로 읽힌다. 제원은 줄 맨 아래에 서서 '더 알고 싶으면 보는 값' 자리가 된다. */ grid-template-areas:"no d port boat sp mul act th" "no d tit tit tit mul act th" "no d spec spec spec mul act th"; gap:1px 10px;padding:9px 24px 10px;border-bottom:1px solid var(--rule); align-items:baseline} .row:hover{background:var(--ledger-2)} .row .no{grid-area:no;font-family:var(--mono);font-size:11px;color:var(--dim)} .row .d{grid-area:d;font-family:var(--mono);font-size:12px;white-space:nowrap} /* ★ 항구+배 껍데기 — **데스크톱에서는 없는 셈**이다(display:contents). 두 이름이 예전처럼 격자의 제 칸(port·boat)에 그대로 선다. 폰에서만 이 껍데기가 한 칸(who)을 차지한다(아래 폰 갈래). */ .row .who{display:contents} .row .port{grid-area:port;font-size:13.5px;min-width:0} .row .port i{font-style:normal;color:var(--dim);font-size:11.5px;display:block} .row .boat{grid-area:boat;font-weight:700;font-size:13.5px;color:var(--ink); text-decoration:none;min-width:0;overflow-wrap:anywhere} .row .boat:hover{color:var(--stamp)} .row .sp{grid-area:sp;color:var(--ink-soft);font-size:12.5px;min-width:0} /* ── 둘째 줄 — 배 제원 여섯 (2026-09-02) ────────────────────────────── ★ 상자를 두르지 않는다. 이 원장에서 상자는 **도장**(.seal·.lack)의 몫이고, 제원은 원부에서 옮겨 적은 **사실**이라 도장이 아니다. 이름표는 흐리게, 값만 진하게 — 눈이 값의 줄을 따라 흐른다. ★ 이름표와 값 사이 3px, 칸 사이 11px — 상자 없이도 어디까지가 한 칸인지 이 차이가 말한다. */ .row .spec{grid-area:spec;display:flex;flex-wrap:wrap;align-items:baseline; gap:2px 11px;min-width:0} .row .spec .v{display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap} .row .spec .v i{font-style:normal;font-family:var(--mono);font-size:10px; letter-spacing:.06em;color:var(--dim)} .row .spec .v b{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink-soft)} /* 신고가 지난 배 — 지우면 '없는 것' 이 되고, 그대로 두면 '유효' 라는 거짓이 된다. 이름표를 「신고만료」로 바꾸고 값에 줄을 긋는다. */ .row .spec .v.off i{color:var(--stamp)} .row .spec .v.off b{color:var(--dim);text-decoration:line-through} /* ★ 선박지수 — 별 다섯. 채운 별은 **도장 붉은색**이다: 이 원장에서 붉은색은 「기계가 헤아린 것」의 색이고(도장·표본부족), 선박지수도 기계가 매긴 등급이다. 사람이 쓴 것(기입)의 파랑과 섞이면 뜻이 흐려진다. 빈 별은 테두리만 — 색을 못 봐도 **차 있는가 비었는가**로 세어진다. ★ 몇 칸을 채우는지는 화면이 안 정한다 — :8100 이 준 반올림 정수다 (fishtoday.kr·fishnow.kr 의 다섯 칸과 같은 값. _spec.php 머리말). */ .row .spec .v.gr .stars{display:inline-flex;align-items:center;gap:1.5px} .row .spec .v.gr .stars svg{width:11px;height:11px;display:block;flex:0 0 auto} .row .spec .v.gr .stars svg path{fill:none;stroke:var(--edge);stroke-width:1.7} .row .spec .v.gr .stars svg.on path{fill:var(--stamp);stroke:var(--stamp)} /* ★ 선박지수가 **없는 배** — **점선 윤곽의 빈 별 다섯** (2026-09-02 지시: "선박지수가 없을 때 조황지수처럼 점선 빈 그래프로 통일해"). ▣ ★ **다섯 사이트가 한 벌인 값**이다 — onfishing.net·naksigo.com 이 먼저 그린 그 별을 **그대로** 쓴다(viewBox 16 · stroke-width 1.3 · `stroke-dasharray "3 2"` · `1em` · 바탕·그늘 없음 · opacity .85). 값이 있을 때의 별은 **쓰던 그림 그대로**다(viewBox 20, 11px). ▣ ★ 처음에는 「빈 별 + 점선 밑줄」로 그렸다. 11px 별에 점선을 걸어 보니 부스러진 얼룩이 되었기 때문인데, **그때 쓴 값이 틀렸다** — viewBox 20 기준 `2.6 2.2`(실치수 1.4px)라 저쪽이 버린 잔 값과 같았다. 저쪽 값 `3 2`(viewBox 16)는 실치수 **2.2px** 라 두 곱 가까이 굵다. 실제 크기로 다시 찍어 대조하니 **또렷이 점선으로 읽혔다.** 확대한 그림이 아니라 **1배 화면 그대로** 보고 고른 것이다. ▣ ★ 크기는 `1em` 인데 이 칸의 글자를 그대로 따르면 15px 라 **값 있는 줄의 별(11px)보다 커진다** — 없는 줄이 있는 줄보다 커 보이는 것은 거꾸로다. 그래서 이 자리의 `1em` 을 **12px** 로 둔다: 값 별(11px)과 눈으로 같은 키이면서 점선이 뭉개지지 않는 가장 작은 크기다(11·12·13·15px 를 실제 크기로 찍어 골랐다). onfishing 의 폰(12px)과 같은 치수이기도 하다. ▣ ★ **★0 과 갈린다** — ★0 은 **실선** 빈 별이고 없음은 **점선**이다. (이 화면은 값이 있으면 최소 한 칸이라 ★0 이 실제로 서지는 않지만, 다섯 사이트가 같은 어휘를 쓰려면 규칙이 같아야 한다.) ▣ ★ 굵기·점선을 **CSS 로 한 번 더** 못 박는다 — 위의 `.stars svg path` 규칙(stroke:var(--edge); stroke-width:1.7)이 그림에 적힌 속성을 이기기 때문이다. 여기서 다시 적지 않으면 점선이 통째로 사라진다. ▣ 말은 그대로다 — aria-label 에 「선박지수 없음 — 매길 기록이 부족합니다」가 남고(Feed::boatGradeCells) **숫자는 안 적는다**. */ .row .spec .v.gr.none .stars{font-size:12px;color:var(--dim);opacity:.85; line-height:1;gap:1.5px} .row .spec .v.gr.none .stars svg{width:1em;height:1em} .row .spec .v.gr.none .stars svg path{fill:none;stroke:currentColor; stroke-width:1.3;stroke-dasharray:3 2} /* ── 조황지수 — **막대 다섯 칸** (2026-09-02 지시 둘) ───────────────────── 데스크톱은 ①줄 어종 뒤(.sp .v.gx), 폰은 제원 줄에서 **선박지수를 대신해** (.spec .v.gx) 선다. 두 자리가 같은 모양이라 규칙도 한 벌이다. ★ 왜 별이 아니라 막대인가 — 데스크톱에서는 한 줄에 **조황지수(이 글 하나) 와 선박지수(그 배 글들의 평균)가 함께** 선다. 둘 다 별 다섯이면 사람이 무엇이 무엇인지 못 가른다. 막대 다섯은 fishnow.kr(.row .grade i)이 같은 값에 쓰는 모양이라 새로 지어낸 것이 아니다 — 사이트를 오가도 「조황지수 = 막대 다섯」이다(fishtoday.kr 의 조황 카드도 같다). ★ 채운 칸은 선박지수와 **같은 도장 붉은색**이다 — 둘은 같은 1~5 눈금이고 (선박지수는 그 눈금의 평균이다) 둘 다 기계가 매긴 값이다. 같은 눈금을 다른 색으로 칠하면 서로 다른 척도로 읽힌다. 가르는 것은 **모양과 이름표**이지 색이 아니다. ★ 빈 칸은 테두리 색(--edge)으로 **비어 있다** — 색을 못 봐도 차 있는가 비었는가로 세어진다. ★ 이름표(「조황지수」)는 어느 폭에서도 안 접는다 — 다섯 칸에는 단위가 없어 이름이 사라지면 무엇의 눈금인지 알 길이 없다. */ .row .v.gx{display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .row .v.gx>i{font-style:normal;font-family:var(--mono);font-size:10px; letter-spacing:.06em;color:var(--dim)} .row .v.gx .pips{display:inline-flex;align-items:center;gap:2px} .row .v.gx .pips i{display:block;flex:0 0 auto;width:5px;height:12px; border-radius:1.5px;background:var(--edge);font-size:0} .row .v.gx .pips i.on{background:var(--stamp)} /* ★ 등급이 **없는** 줄 — 다섯 칸을 그리되 **모양을 달리한다** (2026-09-02 지시: "조황지수 없을 때 fishtoday, fishlog 도 빈 그래프로 통일해". naksigo.com /today · m.onfishing.net 이 먼저 그렇게 바뀌었고 그쪽 규칙이 `.grade.none i{background:none;border:1px dashed …}` 이다). ▣ ★ 왜 그냥 「안 채운 다섯 칸」이면 안 되나 — 등급 1칸짜리 줄과 거의 같아 보인다. 그러면 「매길 기록이 부족한 글」이 **최저보다 못한 글**로 읽힌다. 이 저장소의 오랜 규칙이 그 오해를 막는 것이다(grade.py: "근거 없는 별을 채우느니 빈 별이 정직하다"). ▣ 그래서 **바탕 없는 점선 틀**로 둔다 — 있는 등급의 빈 칸은 **실한 회색 막대**(--edge)라 눈에 확 갈리고, 이쪽은 '아직 안 찍힌 자리'로 읽힌다. 사진 없는 줄(.nothumb)을 점선으로 둔 것과 **같은 결**이라 이 화면 안에서 「점선 = 아직 없음」이 한 벌이다. ▣ 흑백으로 찍어도 갈린다 — 색이 아니라 **채움과 테두리**로 가른 값이다. ▣ 말은 그대로다 — title·aria-label 에 「조황지수 없음 — 매길 기록이 부족합니다」가 남는다(Feed::gradeCells). 그림만 비우고 뜻까지 비우지 않는다. 이름표(「조황지수」)도 그대로 선다. ▣ ★ **막대는 막대로 둔다** — naksigo 의 모양을 통째로 베끼지 않았다. 이 화면은 한 줄에 조황지수(막대)와 선박지수(별)가 함께 서서 모양으로 둘을 가르기 때문이다. 가져온 것은 「없음을 어떻게 보이나」의 규칙뿐이다. */ .row .v.gx.none .pips i{background:none;border:1px dashed var(--edge); box-shadow:none;opacity:.85} /* ★ ①줄에서는 어종 글자 **바로 뒤**에 붙는다 — 사이는 한 칸(8px)만 두고, 어종이 길어 줄이 감기면 어종과 함께 자연히 흐른다(제 칸을 안 만든다). 담기·좋아요(.act)는 이 줄 오른쪽 끝의 **다른 칸**이라 부딪히지 않는다. */ .row .sp .v.gx{margin-left:8px;vertical-align:middle} .row .mul{grid-area:mul;font-family:var(--mono);font-size:12px;color:var(--carbon); white-space:nowrap} /* ★ 제목을 **조금** 키웠다 (2026-09-02 지시: "조황글의 타이틀은 조금 키워줘"). 12px → **13.5px** — 같은 줄의 항구·선박과 **나란한 크기**다. 앞서는 이 줄에서 가장 작은 글자였는데, 목록에서 사람이 먼저 읽는 것이 제목이다. ★ 더 키우지 않았다("조금"). 14px 로 하면 제목이 배 이름보다 커져 이 화면이 원장이 아니라 게시판처럼 보인다 — 이 사이트는 사실이 앞서는 전표다. ★ 색(--ink-soft)은 **그대로 둔다.** 지시는 크기였고, 색까지 --ink 로 올리면 제목이 배 이름과 같은 무게가 되어 줄의 위아래가 다투게 된다. 크기를 나란히 맞춘 것만으로 이미 눈에 든다(전후 확인). */ .row .tit{grid-area:tit;font-size:13.5px;color:var(--ink-soft);text-decoration:none; min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .row .tit:hover{color:var(--stamp)} .row .act{grid-area:act;white-space:nowrap;text-align:right} /* ★ 사진 자리 — 줄 세 칸을 세로로 걸친다. 비어 있어도 자리는 남긴다: 있는 줄과 없는 줄이 어긋나면 표가 흔들린다. ★ **크기는 한 자리(--th-w/--th-h)에서 정한다** (2026-09-02 지시: "우측 썸네일을 조금 크게"). 앞서는 그림·점선 자리·격자 칸 세 곳에 62px 을 따로 적어 두어, 한 곳만 고치면 사진 있는 줄과 없는 줄의 자리가 어긋났다. 이제 세 곳이 같은 값을 본다 — 다음에 또 바뀔 값이다. ★ **62×47 → 84×63** 이다("조금"). 4:3 은 그대로 지켰다 — 조황 사진이 대개 가로 사진이라 비율을 바꾸면 잘리는 자리가 늘어난다. · 왜 더 안 키웠나 — 이 화면은 **원장(표)** 이다. 사진이 커지면 줄이 두꺼워져 한 화면에 들어오는 글이 준다. fishtoday 카드에서 이미 겪었다 ("사진이 글보다 컸다" — 그쪽 _rcard.php 머리말). · 줄 높이는 104px 그대로다(실측) — 세 줄 높이 안에 63px 이 들어간다. 곧 **줄은 안 두꺼워지고 사진만 커진다.** 그래서 이만큼이 「조금」이다. */ /* ★ 모서리를 둥글린다 (2026-09-02 지시: "썸네일에 각 모서리 라운드 처리를 해"). ▣ 값은 **--th-r 한 자리**에서 정한다 — 사진과 점선 자리가 같은 값을 봐야 사진 있는 줄과 없는 줄이 같은 모양으로 선다(크기를 맞춘 그 자리와 같다). ▣ **10px — fishtoday.kr 의 조황 카드 썸네일과 같은 값**이다. 같은 것(조황 사진 썸네일)을 사이트마다 다른 모양으로 그리지 않는다. 이 원장이 대체로 각진 판이긴 하지만(도장 1px · 칩 2px) 10px 이 낯설지도 않다 — 「채비」 접이(.tkfind)가 이미 10px 이다. ▣ `object-fit:cover` 인 에도 border-radius 는 그림째 잘린다(실측). */ .row .th{grid-area:th;grid-row:1 / span 3;align-self:center; width:var(--th-w);height:var(--th-h);border-radius:var(--th-r); display:block;object-fit:cover;border:1px solid var(--edge);background:var(--ledger-2); cursor:zoom-in} .row .th:hover{border-color:var(--stamp)} .row .nothumb{grid-area:th;grid-row:1 / span 3;align-self:center; width:var(--th-w);height:var(--th-h);border-radius:var(--th-r); border:1px dashed var(--rule-2);background:transparent} /* 기입 단추 — 사람의 몫이라 파랑. 누르는 넓이는 ::after 로 44px 을 지킨다 (작업규칙 §4 — 시안은 모양만 보였지만 구현은 표적을 지킨다). */ .jot{position:relative;border:1px solid var(--carbon);background:transparent; color:var(--carbon);font-family:var(--mono);font-size:10.5px;padding:3px 9px; border-radius:2px;cursor:pointer} .jot::after{content:"";position:absolute;left:50%;top:50%;width:max(44px,100%); height:44px;transform:translate(-50%,-50%)} .jot.on{background:var(--carbon);color:var(--ledger)} .jot .n{margin-left:3px} /* 도장 — 비스듬히. 반듯하면 로고로 보이고, 그러면 경고가 아니라 장식이 된다. */ .seal{display:inline-block;border:1px solid var(--stamp);color:var(--stamp); font-family:var(--mono);font-size:9px;letter-spacing:.08em;padding:0 4px; border-radius:1px;transform:rotate(-3deg);margin-right:6px;vertical-align:1px} .lack{display:inline-block;border:1.5px solid var(--stamp);color:var(--stamp); font-family:var(--mono);font-size:9px;letter-spacing:.14em;padding:0 5px; transform:rotate(-4deg);border-radius:1px;opacity:.85} .stamp{position:absolute;right:14px;top:4px;transform:rotate(-8deg); border:2.5px solid var(--stamp);color:var(--stamp);border-radius:3px; font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.26em; padding:3px 8px 3px 11px;opacity:.88;mix-blend-mode:multiply;pointer-events:none; box-shadow:inset 0 0 0 1px var(--stamp)} @media (max-width:860px){ /* ── 폰 — 낱장(시안 N): 왼쪽 천공, 제목이 앞장선다 ── */ .ledger-h{display:none} /* ★ 낱장에서는 사진을 **제목 오른쪽**에 세운다 — 전표에 사진을 붙여 놓은 모양이다. 제목·배 이름 두 줄을 세로로 걸친다. */ /* ── ★ 폰 판(2026-09-02 지시 둘) ──────────────────────────────────── ① "첫줄을 제외한 나머지 2,3,4 줄을 합하여 우측 썸네일을 구성" ② "넷째줄 선박명은 둘째 줄로 이동 배치" 그래서 줄이 이렇게 선다 — **줄 번호가 아니라 이름으로** 짠다(나중에 줄이 바뀌어도 안 깨진다): 1줄 날짜 · 번호 ┐ 2줄 항구 · 배 이름 │ 3줄 제목 ├ 썸네일(th)이 **줄 전체**를 덮는다 4줄 배 제원 │ (2026-09-02 지시: "썸네일은 전체 row 를 5줄 어종 · 기입 ┘ 한 줄로 합하여 우측에 표시") ★ 기입(담기·좋아요)은 **마지막 내용 줄(어종)을 나눠 쓴다** — 그 줄이 폭 전체(`"sp sp"`)라 단추가 썸네일 칸까지 지나 **줄의 진짜 오른쪽 끝**(실측 390px: 369, 줄 안쪽 끝과 같다)에 붙는다. 지시 셋을 차례로 만족한 자리다 (2026-09-02): ① "같은 줄에 맨 우측에 표시" → 어종 줄 오른쪽 끝으로 옮겼다 ② "썸네일 영역을 포함해서 맨 우측" → 그 줄을 폭 전체로 넓혔다 ③ "라인이 추가 되었어. 동일 라인에 배치" → 단추 전용 행을 없애고 어종과 **한 칸**을 나눠 쓰게 했다(줄이 다시 하나 줄었다). ▣ ★ 양보하는 쪽은 **어종**이다 — 어종 칸 오른쪽에 단추 폭만큼 자리를 비워 두어(padding-right) 글자가 길면 그 앞에서 감긴다. 단추는 안 줄인다 (white-space:nowrap) — 줄어들면 「좋 아 요」로 세로로 접힌다. ▣ ★ 단추를 **썸네일 칸에 넣지 않았다** — 그 칸이 74px 인데 단추 둘이 107px 이라 같은 함정에 빠진다(fishtoday 에서 실측). ▣ 그래서 썸네일은 **위 네 줄**(날짜·항구배·제목·제원)을 덮는다. ★ 배 이름이 항구 곁으로 올라와 줄이 하나 줄었다. ★ **빈 줄이 사라진 까닭** — 앞서는 썸네일이 2·3·4줄만 덮어서, 18px 짜리 항구 줄이 썸네일 높이(56px)에 눌려 **42px 이 비어 보였다**(실측). 줄 전체를 덮으면 그 높이가 여섯 칸에 나뉘어 어느 한 줄도 부풀지 않는다 (지시: "셋째줄 빈 라인은 제거"). 짜임이 스스로 푼다. ★ 날짜와 번호는 **한 칸(d)을 나눠 선다** — 왼쪽 끝 날짜, 오른쪽 끝 번호. 썸네일이 오른쪽 칸을 통째로 가져갔으니 번호가 설 칸이 따로 없다. */ .row{grid-template-columns:minmax(0,1fr) 74px; grid-template-areas:"d th" "who th" "tit th" "spec th" "sp sp"; gap:2px 10px;padding:12px 14px 12px 32px;position:relative; border-bottom:1px dashed #B9A87F} /* ★ 썸네일은 **줄 전체**를 덮는다 — 그림 자체는 74×56 그대로 두고 **위에** 붙인다(align-self:start). 칸이 길어졌다고 사진이 커질 까닭은 없고, 가운데에 두면 긴 줄에서 사진이 허공에 뜬다. */ /* ★ 폰은 **이번 지시 대상이 아니다** — 앞서 정한 74×56 그대로다. 데스크톱에서 키운 값이 새어 들어오지 않게 여기서 되돌린다. */ .row{--th-w:74px; --th-h:56px} /* 모서리는 --th-r 을 그대로 물려받는다 — 데스크톱만 둥글면 폰에서 각진다. */ /* ★ `grid-row:auto` 를 **쓰면 안 된다** — `grid-area:th` 가 방금 정한 줄 걸침을 도로 풀어 버려, 썸네일이 한 줄에만 놓이고 그 줄이 56px 로 부풀었다(실측 2026-09-02: 그 밑에 41px 짜리 빈 줄이 생겼다. 지시의 "셋째줄 빈 라인" 이 바로 이것이었다). 이름(th)만 주고 손대지 않는다. */ .row .th,.row .nothumb{grid-area:th; width:var(--th-w);height:var(--th-h);align-self:start;margin-top:2px} /* ★ 사진이 없는 줄은 **점선 박스만** (2026-09-02 지시: "썸네일이 없는 경우에는 점선으로 박스만 표시"). 앞서는 폰에서 통째로 지웠는데(0×0), 그러면 사진 있는 줄과 없는 줄의 자리가 어긋나 표가 흔들리고, '여기 사진이 들어올 자리' 라는 말도 사라진다. 데스크톱과 같은 꼴이다 (점선 테두리 · 배경 없음). */ .row .nothumb{display:block} .row::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:10px; background-image:radial-gradient(circle 3.5px at 5px 50%,var(--desk) 3.4px,transparent 4px); background-size:10px 26px;background-repeat:repeat-y} /* ★ 날짜와 번호가 **한 칸을 나눠 선다** — 왼쪽 끝·오른쪽 끝. 썸네일이 오른쪽 칸을 통째로 가져갔으니 번호가 설 칸이 따로 없다. 겹치지 않는 것은 둘 다 짧은 글자(09.03 · 0001)라서다. */ .row .d{grid-area:d;justify-self:start} .row .no{grid-area:d;justify-self:end;text-align:right;color:var(--carbon)} /* ★ 항구와 배가 한 줄에 선다. **둘이 갈려 보여야 한다** — 항구는 눌러서 항구 낱장으로 가고(오늘 c925db93 로 손잡이가 됐다) 배는 배 낱장으로 간다. 그래서 ① 사이에 가운뎃점을 넣고 ② 배 이름을 **진하게** 둔다. 점 하나만으로는 색을 못 보는 사람에게 약해서 굵기까지 함께 쓴다. ▣ 안 들어가면 **감긴다**(flex-wrap) — 자르면 긴 항구 이름 (「고성 대진항」)이나 긴 배 이름이 통째로 사라진다. */ .row .who{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px; grid-area:who;min-width:0} .row .who .boat::before{content:"·";color:var(--edge);margin-right:6px} .row .port{font-family:var(--mono);font-size:11.5px;color:var(--dim)} .row .port i{display:inline;margin-left:6px} /* ★ 제목은 **두 줄까지만 보인다** (2026-09-02 지시: "셋째줄의 조황 제목이 2줄을 초과하지 않도록 단축 처리"). ▣ 전에는 아무 제한이 없어 여덟 줄 중 둘이 3줄·4줄로 넘쳤다(실측 360px: 1줄 2건 · 2줄 4건 · 3줄 1건 · 4줄 1건). 그 둘 때문에 낱장 높이가 들쭉날쭉해 원장이 흔들렸다. ▣ ★ **글자를 잘라 내지 않는다** — CSS 로 가릴 뿐이라 원문은 HTML 에 그대로 남는다. 이 사이트는 **검색 노출이 목적**이라 제목 글자가 색인에 들어가야 하고, 낭독기도 `overflow:hidden` 너머의 글을 다 읽는다. (그래서 `title` 도 더하지 않았다 — 폰에는 마우스 올림이 없고, 낭독기는 이미 온 제목을 읽는다. 없는 값을 덧붙이지 않는다.) ▣ ★ **높이를 두 줄로 못 박지는 않는다** — 한 줄짜리 제목까지 두 줄 자리를 차지하면 짧은 줄마다 빈 자리가 생긴다. 오늘 폰에서 빈 줄을 걷어낸 것과 정반대다. 들쭉날쭉의 진짜 원인이던 3·4줄이 사라지면 그것으로 충분하다. ▣ 오늘 제목을 12→13.5px(폰 14.5px)로 키운 것과 어긋나지 않는다 — 크기는 그대로 두고 줄 수만 묶는다. */ .row .tit{font-family:var(--gothic);font-size:14.5px;font-weight:700;color:var(--ink); white-space:normal;line-height:1.45;margin:2px 0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .row .boat{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink)} .row .sp{border-top:1px solid var(--rule-2);padding-top:7px;margin-top:4px} /* 낱장은 폭이 귀하다 — 제원 여섯의 이름표를 줄인다. 단위(명·t)와 값이 이미 무엇인지 말하고, 온말은 title 에 그대로 있다. ★ 「선박지수」만 이름표를 남긴다 — 별 다섯만 있으면 무엇의 별인지 알 수 없다. */ .row .spec{gap:2px 9px;margin-top:5px} /* ★ 앞서는 여기서 어선 번호·신고 만료일을 CSS 로 감췄다. 이제 **판이 정한다**(Feed::CARDS) — 감추지 않고 안 만든다. 폰에서 빠지는 것은 「어업 종류」 하나다(2026-09-02 지시). */ .row .spec .v i{font-size:9.5px} .row .spec .v b{font-size:11px} .row .mul{display:none} /* 물때는 낱장에선 접는다 — 날짜 곁 정보가 이미 많다 */ /* ★ 기입은 **어종과 같은 칸**을 나눠 쓴다(위 짜임 주석) — 제 줄을 만들지 않으므로 낱장이 한 줄 더 짧다. 어종 쪽이 단추 폭만큼 자리를 비워 준다. 누르는 넓이 44px 은 .jot::after 가 그대로 지킨다. */ .row .act{grid-area:sp;justify-self:end;align-self:center; text-align:right;margin-top:0;white-space:nowrap} .row .sp{padding-right:118px} .jot{padding:6px 12px;font-size:11px} .sec{padding:14px 14px 16px} .qbar{padding:13px 14px} .ledger-f{padding:11px 14px} } /* ── 원장 발치 — 건수·쪽넘김 ── */ .ledger-f{display:flex;justify-content:space-between;align-items:baseline;gap:10px; flex-wrap:wrap;padding:11px 24px;font-family:var(--mono);font-size:11px;color:var(--dim)} .ledger-f .pg{display:flex;gap:2px} .ledger-f .pg a{color:var(--carbon);text-decoration:none;padding:6px 7px} .ledger-f .pg a.on{color:var(--ink);font-weight:700;border-bottom:2px solid var(--ink)} .ledger-f .pg .gap{padding:6px 2px} /* ── 절취선 + 반쪽 전표(내 기록) ── */ .tear{position:relative;border-top:2px dashed #B9A87F;margin-top:8px} .tear::before{content:"✂ 내 기록 — 뜯어 가는 몫 · 이 기기에만 남습니다 (로그인 없음)"; position:absolute;top:-9px;left:24px;background:var(--ledger);padding:0 8px; font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--carbon)} @media (max-width:860px){.tear::before{left:14px}} .half{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--ledger-2)} .half>div{padding:16px 24px 18px;border-right:1px dashed var(--rule);position:relative} .half>div:last-child{border-right:0} @media (max-width:860px){.half{grid-template-columns:minmax(0,1fr)} .half>div{border-right:0;border-bottom:1px dashed var(--rule);padding:14px}} .half h2{color:var(--carbon)} .half h2::before{color:var(--carbon)} .mine-l{font-family:var(--mono);font-size:12.5px;color:var(--carbon)} .mine-l .r{display:flex;justify-content:space-between;gap:10px;padding:5px 0; border-bottom:1px solid var(--rule)} .mine-l .r:last-child{border-bottom:0} .mine-l a{color:var(--carbon)} .mine-l .st{letter-spacing:.18em} /* ── 주간 집계 ── */ .rk{font-family:var(--mono);font-size:12.5px;max-width:430px} .rk .r{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px; padding:5px 0;border-bottom:1px solid var(--rule-2);align-items:baseline} .rk .r:last-child{border-bottom:0} .rk .i{color:var(--dim);font-size:10.5px} .rk .n{text-align:right;font-variant-numeric:tabular-nums} /* ══ 주간 두 칸 — 「주간 어종 집계」 · 「어종별 출항선박」 (2026-08-27 지시) ═══ ▣ 좁아지면 한 단으로 접는다. 이 판의 다른 두 단(.half)과 같은 문턱(860px)을 쓴다 — 접히는 폭이 칸마다 다르면 화면이 계단처럼 무너진다. ▣ 가운데 점선은 전표의 접는 선과 같은 잉크다(--rule). */ .wk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px} .wk > div + div{border-left:1px dashed var(--rule);padding-left:24px} @media (max-width:860px){ .wk{grid-template-columns:minmax(0,1fr);gap:14px 0} .wk > div + div{border-left:0;padding-left:0;border-top:1px dashed var(--rule);padding-top:14px} } /* 표 — 원장의 다른 숫자 칸과 **같은 고정폭 글꼴·같은 줄** 이다. */ .wkt{width:100%;max-width:430px;border-collapse:collapse; font-family:var(--mono);font-size:12.5px} .wkt th{font-weight:700;font-size:10.5px;letter-spacing:.1em;color:var(--dim); text-align:left;padding:0 0 5px;border-bottom:1px solid var(--rule)} .wkt th:last-child{text-align:right} .wkt td{padding:5px 0;border-bottom:1px solid var(--rule-2)} .wkt tr:last-child td{border-bottom:0} .wkt td.n{text-align:right;font-variant-numeric:tabular-nums} .wkt td.n i{font-style:normal;color:var(--dim);font-size:10.5px;margin-left:3px} .wkt a{color:inherit;text-decoration:none} .wkt a:hover{text-decoration:underline} .rk .bar{height:4px;background:var(--ledger-2);margin-top:3px;grid-column:2 / span 2} .rk .bar i{display:block;height:100%;background:var(--ink-soft)} /* ── 발 ── */ footer.foot{max-width:1180px;margin:0 auto;padding:14px 10px 44px; font-family:var(--mono);font-size:10.5px;color:#7A6E5C;text-align:center;line-height:1.8} footer.foot a{color:var(--carbon)} /* 바닥글 링크 줄 — 약관·개인정보는 **늘 같은 자리**에 선다(2026-08-24). */ footer.foot .links{display:inline-flex;flex-wrap:wrap;gap:10px} footer.foot .links a{white-space:nowrap} footer.foot .biz{opacity:.85} @media (prefers-reduced-motion: reduce){*{transition:none !important}} /* ══ 폰 껍데기 — 아래 탭 (2026-08-28 지시: "스마트 폰 접속시 화면 구성은 PC 화면과 별도로 구성해줘") ═══════════════════════════════════════════ ▣ ★ **호스트로 가른다**(body.mo), 창 너비로 가르지 않는다 — 데스크톱을 좁게 열었다고 탭바가 올라오면 안 된다(이 파일의 오래된 규율). ▣ ★ 차림표를 위에서 아래로 옮긴다. 폰은 한 손으로 쥐고 엄지로 쓴다 — 화면 맨 위는 엄지가 가장 못 닿는 자리다. 머리줄에는 '무엇을 보고 있나' (상호·날짜·접수 건수)만 남기고 '어디로 갈까' 는 아래로 내린다. ▣ ★ 큰 결재도장(.stamp-xl)은 폰에서 **접는다** — 데스크톱 전표에서는 종이의 여백을 채우는 표식이지만, 폰에서는 그 여백이 없어 첫 화면의 절반을 도장이 먹는다. 같은 말(어종·마리수는 기계 판독)은 바닥글에 있다. ▣ 탭바가 마지막 줄을 가리지 않도록 자리를 비운다. iPhone 홈 막대까지. */ body.mo{padding-bottom:calc(64px + env(safe-area-inset-bottom))} body.mo .stamp-xl{display:none} body.mo header.head{padding:11px 14px 9px} /* ★ 칸 수는 **탭 수와 같이 간다** — 2026-09-03 에 「낚시채비」가 늘어 셋이다. minmax(0,1fr) 이라 360px 에서도 칸이 고르게 나뉘고 글자가 안 밀린다. */ body.mo .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40; display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--ink);border-top:2px solid var(--rule); padding-bottom:env(safe-area-inset-bottom)} body.mo .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;height:64px;font-size:10.5px;font-weight:700;color:#BFB09A;text-decoration:none; border:0} body.mo .tabbar a svg{width:21px;height:21px} body.mo .tabbar a path{fill:#BFB09A} /* ★ 켜진 칸은 **전표의 종이색**이다 — 이 판에서 붉은 도장(--stamp)은 '확인 도장' 한 가지 뜻으로만 쓴다. 지금 서 있는 자리에 도장 색을 빌려 쓰면 도장의 뜻이 흐려진다. 색만으로 알리지 않고 글자도 굵게 둔다. */ body.mo .tabbar a[aria-current]{color:var(--ledger)} body.mo .tabbar a[aria-current] path{fill:var(--ledger)} body.mo .tabbar a:focus-visible{outline:2px solid var(--ledger);outline-offset:-3px}