/* 짬낚 — 화면 기준은 G:\workspace\UIUX.md 다.
 *
 * 🔥 색은 전부 토큰으로만 참조한다. 라이트/다크 어느 한쪽에만 있는 색을 만들지 않는다.
 * 🔥 아래 대비는 전부 실제로 계산한 값이다(WCAG 2.x 상대휘도). 새 색을 만들면 같이 잰다.
 */

/* 2026-10-10 하양 + 주황 강조로 바꿨다(사용자 지시 — 참고 앱의 하양·파랑과 갈리게). 옛 청록 강조는 남기지 않는다.
 * 수치는 paper(=surface, 흰색) / sunken 순서. 주황은 글자·버튼 바탕에 쓰므로 진한 주황이다(밝은 주황은 흰 위에서 3:1 도 안 된다).
 * 🔥 --crit 은 주황과 섞이지 않게 진홍(색상각 344° · 주황 18°)으로 옮겼다. 위험 표시는 늘 글자('주의'·'지금 금어기')가 같이 붙는다.
 * 2026-10-10 바탕을 순백으로 — 웜그레이(#fbf9f7)·베이지 면이 폰에서 "누렇게 보인다"(사용자). 면·선도 중립 회색으로 바꿨다. */
:root {
  --paper: #ffffff;
  --surface: #ffffff;
  --sunken: #f4f4f5;     /* 중립 회색 면 */
  --ink: #1f1915;        /* 17.4 / 15.8 — 본문 */
  --ink-2: #463a31;      /* 11.0 / 10.0 — 부제 */
  --muted: #6a5d53;      /* 6.4 / 5.8   — 보조 설명 */
  --line: #e4e4e7;       /* 비텍스트. 경계선(중립) */
  --line-strong: #c8c8cc;
  --accent: #b93e0b;     /* 5.6 / 5.1 · --accent-soft 위 4.8 · 흰 글자를 5.6:1 로 받는다 */
  --accent-soft: #fdebdc; /* 비텍스트 면(paper 1.2) */
  --good: #1f7a52;       /* 5.3 / 4.8 */
  --warn: #7f6600;       /* 5.5 / 5.0 — 노랑 쪽(색상각 48°)으로 옮겨 주황 강조와 갈린다 */
  --crit: #b0123b;       /* 7.0 / 6.4 — 오류·위험 전용이다. 강조색으로 쓰지 않는다 */
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17120f;
    --surface: #211a16;
    --sunken: #2b231e;
    --ink: #f2ebe5;      /* 15.8 / 14.5 / 13.1 */
    --ink-2: #d6cac0;    /* 11.6 / 10.7 / 9.6 */
    --muted: #a99a8e;    /* 6.8 / 6.3 / 5.7 */
    --line: #3a2f28;
    --line-strong: #55463c;
    --accent: #fb923c;   /* 8.2 / 7.6 / 6.8 · --accent-soft 위 6.3 · --on-accent 글자 8.2 */
    --accent-soft: #3e2414;
    --good: #57bd8c;     /* 8.0 / 7.4 / 6.7 */
    --warn: #d4bb45;     /* 9.7 / 9.0 / 8.1 — 색상각 50° */
    --crit: #ff8a9e;     /* 8.3 / 7.7 / 6.9 — 장미빛(350°). 주황(27°)과 밝기가 같아 색상각과 글자로 갈린다 */
    --on-accent: #17120f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-wrap: break-word;   /* overflow-wrap:anywhere 를 모르는 Safari 15.0~15.3 의 바탕 — 긴 주소가 가로 스크롤을 만들지 않게 */
}
/* 다크 모드에서 날짜·select·스크롤바 같은 브라우저 기본 부품도 어둡게(메타 color-scheme 과 같이). */
:root { color-scheme: light dark; }

img { max-width: 100%; height: auto; }

a { color: var(--accent); }
a:hover { text-decoration: underline; }

/* 접근성 기본 — 게을러도 되는 항목이 아니다. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* :focus-visible 을 모르는 Safari 15.4 미만 — 이 두 줄 중 :not(:focus-visible) 를 못 읽고 버려 :focus 링이 남는다. */
:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  padding: 12px 16px; z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

.wrap { max-width: 880px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }   /* 아이폰 가로 — 노치 아래로 들어가지 않게(viewport-fit=cover) */

/* 폼 칸 — iOS Safari 날짜 칸 가운데 정렬·칸 넘침, macOS Safari 검색 칸 기본 모양을 걷어낸다. */
input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="search"] { -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* ---------------------------------------------------------------- 머리·내비 */

.top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.top__in {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px;
  padding-block: 8px;
}
.mark {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.mark span { color: var(--accent); }
.mark:hover { text-decoration: none; }

/* 내비는 5칸이다. 늘리지 않는다 — UIUX.md 적용범위 절. */
.nav { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-left: auto; }
.nav a {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px;
  padding: 0 10px; border-radius: 6px;
  color: var(--ink-2); text-decoration: none; font-size: 15px;
}
.nav a:hover { background: var(--sunken); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; background: var(--accent-soft); }

.page { padding-block: 24px 40px; }

h1 { font-size: 26px; line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-size: 19px; margin: 36px 0 8px; }   /* 제목은 자기 본문에 붙는다 */
h3 { font-size: 16px; margin: 24px 0 8px; }
.lede { color: var(--muted); margin: 0 0 24px; }

/* ---------------------------------------------------------------- 점수 */

/* 이 화면에서 사람이 하는 일은 "간다/안 간다" 를 정하는 것이다.
 * 그래서 크게 보이는 숫자는 점수 하나뿐이다. 나머지 값은 같은 크기로 늘어놓지 않는다. */
.score {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 4px;
}
.score__n {
  font-size: 52px; line-height: 1; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
  color: var(--accent);
}
.score__n--none { font-size: 24px; color: var(--muted); font-weight: 600; }
.score__u { font-size: 18px; color: var(--muted); }
.score__why { color: var(--ink-2); margin: 0 0 4px; }
.score__missing { color: var(--muted); font-size: 14px; margin: 0; }

.warnbar {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--sunken); border-left: 3px solid var(--crit);
  padding: 12px 16px; margin: 16px 0; border-radius: 0 6px 6px 0;
}
.warnbar b { color: var(--crit); flex: none; }   /* flex 줄에서 제목이 눌려 세 줄로 부서지지 않게 */

/* ---------------------------------------------------------------- 값 묶음 */

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 4px 16px; margin: 16px 0; }   /* 313~328px 본문에서도 2열 */
.fact { padding-block: 8px; border-bottom: 1px solid var(--line); }
.fact dt { color: var(--muted); font-size: 13px; margin: 0 0 2px; }
.fact dd { margin: 0; font-size: 17px; font-variant-numeric: tabular-nums; }
.fact dd.none { color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- 목록 */

.list { list-style: none; margin: 0; padding: 0; }
.list__i { position: relative; border-bottom: 1px solid var(--line); }
.list__i a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
  min-height: 44px; padding: 10px 0;
  color: var(--ink); text-decoration: none;
}
.list__i a:hover { text-decoration: none; }
.list__i a:hover .list__t { text-decoration: underline; }
.list__t { font-weight: 600; }
.list__m { grid-column: 1; color: var(--muted); font-size: 14px; }
.list__s {
  grid-row: 1 / span 2; font-size: 24px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.list__s--none { font-size: 14px; font-weight: 400; color: var(--muted); }

.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--sunken); color: var(--ink-2); font-size: 13px;
}
.tag--season { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* 링크인 알약(홈 '이달 대상 어종' 등)은 누르는 칸 44px — 글자 알약(목록 속 표시)은 작게 그대로. */
a.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 4px 6px 0; padding: 0 12px 0 6px;
        text-decoration: none; font-size: 15px; }
a.tag:hover { text-decoration: underline; }
/* 어종 목록에서는 대부분 줄에 붙어 배경이 된다 — 강조색을 빼고 회색 알약으로(--ink-2 on --sunken 10.0:1). 상세 h1 알약은 주황 그대로. */
.list .tag--season { background: var(--sunken); color: var(--ink-2); font-weight: 400; }

/* ---------------------------------------------------------------- 필터 */

.filter { display: flex; gap: 4px; margin: 0 0 16px; }
.filter a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  color: var(--ink-2); text-decoration: none; font-size: 15px;
}
.filter a[aria-current="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600;
}
.filter a:hover { text-decoration: none; }

/* ---------------------------------------------------------------- 표 (물때) */

.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }

/* 시간별 예보(포인트 상세 #forecast) — 표만 가로로 밀리고 첫 열은 고정. 색은 기존 토큰만(새 색 없음). */
.fc { overflow-x: auto; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 12px; }
.fc:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fc__t { width: auto; font-size: 14px; }
.fc__t th, .fc__t td { text-align: center; padding: 4px 6px; height: 40px; min-width: 52px; white-space: nowrap; }
.fc__t tbody th, .fc__t thead th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--surface);
  text-align: left; min-width: 72px; color: var(--muted); font-weight: 600; font-size: 13px; border-right: 1px solid var(--line); }
.fc__d { text-align: left !important; font-weight: 700; border-left: 1px solid var(--line); }
.fc__mid { border-left: 1px solid var(--line); }
.fc__n { font-variant-numeric: tabular-nums; }
.fc__hi { font-weight: 800; }
.fc__ic { display: block; font-size: 18px; line-height: 1.1; }
.fc__s { display: block; font-size: 12px; color: var(--muted); }
.fc__wd { display: inline-block; font-size: 18px; font-weight: 700; line-height: 1; }
.fc__wd--1 { transform: rotate(45deg); } .fc__wd--2 { transform: rotate(90deg); } .fc__wd--3 { transform: rotate(135deg); }
.fc__wd--4 { transform: rotate(180deg); } .fc__wd--5 { transform: rotate(225deg); } .fc__wd--6 { transform: rotate(270deg); }
.fc__wd--7 { transform: rotate(315deg); }
caption { text-align: left; color: var(--muted); font-size: 14px; padding-block: 8px; }
th, td { text-align: left; padding: 0 12px 0 0; height: 44px; border-bottom: 1px solid var(--line); }
th { font-size: 13px; color: var(--muted); font-weight: 600; }
td { font-variant-numeric: tabular-nums; }
td:last-child, th:last-child { padding-right: 0; }
.hl { color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- 조위 곡선 · 수온 흐름
   새 색을 만들지 않는다. 선은 --accent(5.3:1)·--muted(6.1:1) — 비텍스트 3:1 을 넘는다.
   예측과 실측은 색만이 아니라 점선/실선으로도 갈린다. */

.chart { margin: 8px 0 16px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart__axis { stroke: var(--line); stroke-width: 1; }
.chart__pred { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 5; }
.chart__obs { fill: none; stroke: var(--accent); stroke-width: 3; }
.chart__label { fill: var(--muted); font-size: 22px; /* viewBox 단위. 360px 폭에서 약 12px */ font-variant-numeric: tabular-nums; }
.chart figcaption { color: var(--muted); font-size: 14px; margin-top: 4px; }

.flow { list-style: none; padding: 0; margin: 12px 0 4px; }
.flow li { padding-block: 4px; }
.flow b { font-weight: 600; margin-right: 6px; }

/* ---------------------------------------------------------------- 본문 */

.prose { max-width: 62ch; }
.prose h2 { margin-top: 32px; }
.prose p { margin: 0 0 16px; }
.prose ul { padding-left: 20px; margin: 0 0 16px; }
.prose li { margin-bottom: 4px; }

.empty { color: var(--muted); padding: 24px 0; }
/* 빈 목록엔 캐릭터 '짬이'(static/jjami.svg)를 왼쪽에. 글자색·대비는 위와 같다 — 그림은 장식이라 배경으로 둔다 */
.empty { background: url("../jjami.7bc4fde2240b.svg") no-repeat left center / 56px auto; padding-left: 68px; min-height: 92px; display: flex; flex-wrap: wrap; align-items: center; }
.mascot { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.mascot img { width: 120px; height: auto; flex: none; }
.mascot p { margin: 0; }
/* 홈 '오늘 브리핑'(2026-10-11 재배치) — 날짜·음력·물때 이름 한 줄 + 특보 + 안내. 새 색 없음(특보는 --warn 5.5:1) */
.brief { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-r, 16px); padding: 12px 16px; margin: 0 0 16px; }
.brief p { margin: 0 0 4px; }
/* 포인트 '추천 채비' 카드 — 기존 토큰만(.brief 와 같은 상자, dl 은 .variants 꼴의 두 칸) */
.gear { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-r, 16px); padding: 12px 16px; margin: 0 0 12px; }
.gear__t { margin: 0 0 8px; font-size: 17px; }
.gear__lv { font-size: 13px; font-weight: 400; color: var(--muted); }
.gear__dl { margin: 0 0 8px; }
.gear__dl div { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; padding-block: 6px; border-bottom: 1px solid var(--line); }
.gear__dl dt { font-weight: 600; }
.gear__dl dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.gear p { margin: 0 0 6px; }
.brief__d { font-size: 17px; }
.brief__w a { color: var(--warn); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.brief__l { color: var(--muted); font-size: 14px; }
.brief__l .inl { display: inline-flex; align-items: center; min-height: 44px; }
/* 홈 브리핑 '오늘 1위' — 홈에서 큰 숫자는 이것 하나(2026-10-13). 색은 기존 --accent(paper 위 5.6 / 다크 8.2) */
.brief__top { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 0 8px; color: var(--ink); text-decoration: none; }
.brief__top:hover b { text-decoration: underline; }
.brief__n { font-size: 40px; font-weight: 800; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.brief__k { color: var(--muted); font-size: 14px; }
.brief__top[hidden] { display: none; }
.brief__n--none { font-size: 15px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.brief .near { padding: 0 0 8px; margin: 0 0 8px; border-bottom: 1px solid var(--line); }
.brief .near__me { padding: 0 10px; }
/* 홈 브리핑 고르기 줄 — 기준 문구 + 내 위치 단추 + 순서(점수순/거리순). 단추 꼴은 .search button 과 같은 파랑 면 */
.near { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.near__o { margin: 0; color: var(--muted); font-size: 14px; }
.near__c { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.near__me { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--blue-soft, var(--accent-soft)); color: var(--blue, var(--accent)); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.near__me:hover { background: var(--blue-soft-2, var(--accent-soft)); }
.near__me svg { width: 18px; height: 18px; }
.near__k { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); }
.near__k select { min-height: 44px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.list__same { display: block; font-size: 13px; color: var(--muted); }
.list__same[hidden] { display: none; }
.list--score .list__same { grid-column: 2 / -1; }
/* 홈 중단 칸 — 홈에서만 설명 줄을 숨겨 높이를 줄인다(사진·이름·쿠팡에서 보기·대가성 문구는 그대로) */
.cpn-home .cpn__n { display: none; }
/* 홈 이달 어종 — 캐릭터 가로 줄(넘치면 줄바꿈, 가로 스크롤 없음) */
.hchars { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; }
.hchars a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: 4px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 14px; }
.hchars a:hover { background: var(--accent-soft); }
.hchars img { width: 72px; height: auto; }
/* 어종 캐릭터(static/mascots/) — 도감 제목 옆 · 소개 '친구들' 격자 */
.h1char { width: 56px; height: auto; flex: none; align-self: center; margin-right: 8px; }
.h1char + h1 { flex: 1; }

/* 운영 대시보드(/dashboard/, staff 전용). 기존 토큰만 — 새 색 없음. 큰 숫자는 '남은 할 일' 하나. */
.dkpi { margin: 8px 0 12px; }
.dkpi__n { font-size: 48px; font-weight: 800; line-height: 1; margin: 0; color: var(--accent); }
.dkpi__k { margin: 4px 0 0; color: var(--muted); }
.dnav { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0 0 8px; }
.dnav a { display: inline-flex; align-items: center; min-height: 44px; }
.dmsg { padding: 12px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.dsec { margin-top: 28px; scroll-margin-top: 72px; }
.dspot { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.dspot h3 { font-size: 16px; margin: 0 0 4px; }
.drow { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.drow--text { grid-template-columns: 1fr; }
.drow img { width: 120px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--sunken); }
.drow__b { min-width: 0; overflow-wrap: anywhere; }
.drow__t { margin: 0; font-weight: 600; line-height: 1.4; }
.drow__m { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.dwarn { color: var(--crit); }
.dbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.dbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
        border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink);
        font: inherit; text-decoration: none; cursor: pointer; }
.dbtns .cform__btn { padding: 0 18px; width: auto; }
.dmore summary { display: flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; cursor: pointer; }
.dstat { padding-left: 20px; }
.dstat li { margin-bottom: 6px; }
.drow--sel { grid-template-columns: 44px 120px 1fr; }
.drow--pub { grid-template-columns: 44px 1fr; }
.dchk { display: flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; }
.dchk input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
/* 선택 막대 — 휴대폰에서 목록을 내려가도 버튼이 손 닿는 데 있게 아래에 붙인다 */
.dsel { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
        padding: 8px 0; margin: 8px 0; background: var(--surface); border-top: 1px solid var(--line); }
.dsel .cform__btn { padding: 0 18px; width: auto; }
.dsel__n { color: var(--muted); font-size: 14px; }
.dbar { display: grid; grid-template-columns: 5.5em 1fr 4em; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; }
.dbar i { display: block; height: 10px; border-radius: 5px; background: var(--accent); min-width: 2px; }
.dbar b { text-align: right; font-variant-numeric: tabular-nums; }
.dtop { padding-left: 20px; font-size: 14px; }
.dtop li { margin-bottom: 4px; overflow-wrap: anywhere; }
@media (max-width: 400px) { .drow { grid-template-columns: 96px 1fr; } .drow img { width: 96px; }
  .drow--sel { grid-template-columns: 36px 96px 1fr; } .drow--pub { grid-template-columns: 36px 1fr; } }

/* 유튜버 방문 영상(포인트 상세 #videos · 지도 팝업). 색은 기존 토큰만 — 새 색 없음.
   1위는 썸네일 위·글 아래, 2위부터는 왼쪽 작은 썸네일 + 제목. 줄 전체가 링크(누르러 온 줄, 44px 이상). */
.ytsrc { font-size: 13px; font-weight: 700; color: var(--muted); }
.yt { display: grid; grid-template-columns: 120px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: start;
      min-height: 44px; padding: 8px 0; color: var(--ink); text-decoration: none; }
.yt img { grid-row: span 2; width: 120px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--sunken); }
.yt__t { font-weight: 600; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.yt__m { color: var(--muted); font-size: 14px; }
.yt:hover .yt__t { text-decoration: underline; }
.yt--top { grid-template-columns: 1fr; max-width: 560px; }
.yt--top img { grid-row: auto; width: 100%; border-radius: 12px; }
.ytl { list-style: none; margin: 0; padding: 0; }
.ytl li { border-top: 1px solid var(--line); }
.ytmore summary { display: flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; cursor: pointer; }
.map .leaflet-popup-content .popyt { display: block; margin-top: 4px; }
.map .leaflet-popup-scrolled { overflow-x: hidden; }
.map .leaflet-popup-content .popyt a.yt { display: grid; min-height: 44px; padding: 4px 0; color: var(--ink); }
.map .leaflet-popup-content .popyt .yt--top img { width: 220px; margin: 2px 0 4px; }
.map .leaflet-popup-content .popyt .ytl .yt { grid-template-columns: 1fr; }
.map .leaflet-popup-content .popyt .yt__t { font-size: 13px; }
.map .leaflet-popup-content .popyt .yt__m { font-size: 12px; }
.prose .chars { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 4px; }
.prose .chars li { margin: 0; }
.chars a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: 4px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 14px; }
.chars a:hover { background: var(--accent-soft); }
.chars img { width: 80px; height: auto; }
.fineprint { color: var(--muted); font-size: 14px; }
/* 쿠팡 파트너스 칸(angling/coupang.py) — 본문 사이 고정 칸(떠 있거나 본문을 가리지 않는다: 쿠팡 2025-02-06 금지 배너).
   대가성 문구는 본문과 다른 색(--accent, 흰 바탕 5.6:1 · 다크 8.2:1)으로 — 공정위 지침 '쉽게 인식'. 새 색 없음. */
.cpn { margin: 24px 0; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.cpn__h { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.cpn__d { margin: 4px 0 8px; font-size: 13px; color: var(--muted); }
.cpn__l { list-style: none; margin: 0; padding: 0; }
.cpn__l li + li { border-top: 1px solid var(--line); }
/* 2026-10-13 추천 장비 카드 — 줄 전체가 링크(::after inset:0, UIUX '누르러 온 줄'). 사진 88px 고정 = 자리 흔들림 없음. 새 색 없음. */
.cpn__i { position: relative; display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.cpn__img { flex: none; width: 88px; height: 88px; object-fit: contain; border-radius: 8px; background: #fff; }
.cpn__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpn__a { color: var(--ink); font-weight: 700; line-height: 1.4; text-decoration: none; }
.cpn__a::after { content: ""; position: absolute; inset: 0; }
.cpn__a:focus-visible { outline: none; }
.cpn__a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.cpn__i:hover .cpn__a { text-decoration: underline; }
.cpn__n { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.cpn__go { color: var(--accent); font-size: 14px; font-weight: 700; }
.cpn__b { display: block; width: 100%; max-width: 100%; border: 0; }
/* 상단 칸(제목 아래) — 한 상품, 작게. 본문 첫 화면을 덜 먹게 사진·여백을 줄인다 */
.cpn--top { margin: 12px 0 16px; padding: 8px 12px; }
.cpn--top .cpn__h { font-size: 15px; }
.cpn--top .cpn__d { margin-bottom: 4px; }
.cpn--top .cpn__i { padding: 4px 0; }
.cpn--top .cpn__img { width: 56px; height: 56px; }
.cpn--top .cpn__n { display: none; }

/* ---------------------------------------------------------------- 꼬리 */

.foot {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center;
  border-top: 1px solid var(--line); padding-block: 16px 40px;
  color: var(--muted); font-size: 14px;
}
.foot a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink-2);
}
.foot span { flex-basis: 100%; }

@media (max-width: 560px) {
  .top__in { padding-block: 4px; }
  .nav { margin-left: 0; width: 100%; order: 1; }   /* 폰에서는 '로그인' 이 로고 줄 오른쪽에 남는다 */
  .acct { margin-left: auto; }
  .nav a { padding: 0 10px; font-size: 14px; }
  h1 { font-size: 22px; }
  .score__n { font-size: 44px; }
}

/* 물때 그림 */
/* 들물·날물 면은 새 색이다. 아래 수치는 WCAG 2.x 상대휘도로 실제 계산했다.
   (2026-10-10 주황 강조로 바꾸며 다시 쟀다. 들물은 물빛 파랑을 그대로 둔다 — 강조색이 아니라 뜻이 있는 면이다.)
   라이트  --flood #d3e4ee : paper 1.24 · ink 13.3 · ink-2 8.4 · muted(점선) 4.9 · accent(실측선) 4.3
           --ebb   #f2e2c6 : paper 1.21 · ink 13.6 · ink-2 8.6 · muted 5.0 · accent 4.4 · flood↔ebb 1.02
   다크    --flood #1d4150 : paper 1.70 · ink 9.3  · ink-2 6.8 · muted 4.0 · accent 4.8
           --ebb   #43381f : paper 1.61 · ink 9.8  · ink-2 7.2 · muted 4.2 · accent 5.1 · flood↔ebb 1.05
   🔥 두 면은 밝기 대비로 갈리지 않는다(1.0~1.6). 그래서 뜻은 색이 아니라 면 위의 글자
   ('들물'·'날물', --ink-2 7:1 이상)와 범례 문장이 전한다. 면 위의 선·글자는 위 수치대로 모두 3:1·4.5:1 을 넘는다.
   막대는 --muted(6.1:1 · 다크 6.8:1, 비텍스트 3:1 이상). 강조색은 실측선 하나에만 남긴다. */

:root { --flood: #d3e4ee; --ebb: #f2e2c6; }
@media (prefers-color-scheme: dark) {
  :root { --flood: #1d4150; --ebb: #43381f; }
}

.chart__flood { fill: var(--flood); }
.chart__ebb { fill: var(--ebb); }
.chart__phase { fill: var(--ink-2); font-size: 22px; }
.chart__now { stroke: var(--ink); stroke-width: 2; }
.chart__dot { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.chart__mark { fill: var(--ink); font-size: 24px; /* viewBox 단위. 360px 폭에서 약 13px */ font-variant-numeric: tabular-nums; }
.chart__bar { fill: var(--muted); }

/* 물때 설명 그림(angling/tidefigs.py). 새 색 없음 — 기존 토큰만 쓴다(대비는 위·:root 주석의 값 그대로).
   글자 25 = viewBox 640 폭에서 360px 화면(스크롤바 빼고 그림 313px) 약 12.2px. 위험·안전은 색과 함께 글자('위험'·'안전한 시간')로도 말한다. */
.tfig { margin: 8px 0 24px; }
.tfig svg { display: block; width: 100%; max-width: 520px; height: auto; }  /* 넓은 화면에서 글자 약 20px — 본문보다 너무 커지지 않게 */
.tfig text { fill: var(--ink); font-size: 25px; font-variant-numeric: tabular-nums; }
.tfig .t-sub { fill: var(--ink-2); }
.tfig .t-good { fill: var(--good); font-weight: 700; }
.tfig .t-crit { fill: var(--crit); font-weight: 700; }
.tfig figcaption { margin-top: 4px; }
.tt__i .tfig a { display: inline; }  /* 캡션 문장 안 출처 링크 — .tt__i a 의 44px 칸이 문장을 끊는다(문장 속 링크는 예외) */
.tfig__ln { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tfig__guide { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 5; }
.tfig__dot { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.tfig__bar { fill: var(--muted); }
.tfig__sun { fill: var(--warn); }
.tfig__earth { fill: var(--flood); stroke: var(--ink); stroke-width: 2; }
.tfig__moon { fill: var(--muted); }
.tfig__band { fill: var(--ink); }
.tfig__hollow { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.tfig__good { fill: none; stroke: var(--good); stroke-width: 3; }
.tfig__crit { fill: none; stroke: var(--crit); stroke-width: 3; stroke-dasharray: 8 6; }
.tfig__critln { fill: none; stroke: var(--crit); stroke-width: 3; }

.key { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }
.key__sw {
  display: inline-block; width: 14px; height: 14px; border-radius: 2px;
  border: 1px solid var(--line-strong);
}
.key__sw.chart__flood { background: var(--flood); }
.key__sw.chart__ebb { background: var(--ebb); }

/* ---------------------------------------------------------------- 채비 그림
   새 색을 만들지 않는다. SVG 는 currentColor 라 --ink(본문과 같은 대비)를 따른다.
   카드 전체가 링크다(UIUX Fitts). */

.rigs { list-style: none; margin: 16px 0; padding: 0;
        display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
/* 240px 아래로 줄이면 라벨 글자가 10px 밑으로 내려간다. 썸네일(--sm)은 라벨이 없다. */
.rigs__card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 44px; padding: 12px; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); text-decoration: none;
}
.rigs__card:hover { border-color: var(--line-strong); text-decoration: none; }
.rigs__card:hover .rigs__t { text-decoration: underline; }
.rigs__card svg { display: block; width: 100%; height: auto; max-height: 260px; }
.rigs__t { font-weight: 600; text-align: center; }
.rigs--sm { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.rigs--sm .rigs__card svg { max-height: 140px; }

.rig { margin: 0 0 24px; }
.rig svg { display: block; width: 100%; max-width: 420px; height: auto; color: var(--ink); }

/* 지도 ----------------------------------------------------------------
   새 색을 만들지 않는다. 우리 포인트 --accent · 갯바위포인트 --warn · 금지구역 --crit(위험이라 빨강이 맞다).
   Leaflet 기본 흰 배경 위젯은 토큰으로 덮는다 — 다크에서 --accent 링크가 흰 팝업 위에 놓이면 대비가 무너진다.
   Leaflet 단추는 30px 라 44px 로 키운다. */

.map { height: 440px; margin: 16px 0 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--sunken); }
@media (max-width: 560px) {   /* '지도' 탭 — 폰에서는 화면을 더 쓴다. dvh 를 모르는 브라우저는 앞 줄 vh */
  .map { height: max(360px, calc(100vh - 260px)); height: max(360px, calc(100dvh - 260px)); }
}
.map.leaflet-container .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }  /* leaflet.css 가 뒤에 와서 한 단계 높인다 */
.map .leaflet-bar a,
.map .leaflet-control-layers,
.map .leaflet-popup-content-wrapper,
.map .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
.map .leaflet-control-layers-toggle { width: 44px; height: 44px; }
.map .leaflet-control-layers label { display: flex; align-items: center; min-height: 44px; }
.map .leaflet-popup-content a { display: inline-flex; align-items: center; min-height: 44px; }
/* 팝업 아이콘 링크: 폰에서는 이름 글자가 아이콘 옆에 붙는다(아래 '폰(터치)' 규칙). 팝업 폭이 좁으면 그 글자가
   한 글자씩 세로로 접혔다(2026-10-10 운영 캡처) — 한 줄에 하나씩 세로로 쌓고 글자는 접지 않는다. */
.map .leaflet-popup-content .tools { flex-direction: column; align-items: flex-start; gap: 0; margin: 4px 0 0; }
.map .leaflet-popup-content .tools .ico::after { white-space: nowrap; }
.map .leaflet-control-attribution { background: var(--surface); color: var(--muted); }
.map .leaflet-popup-content a,
.map .leaflet-control-attribution a { color: var(--accent); }  /* Leaflet 기본 #0078A8 은 다크 표면에서 대비가 모자란다 */
.filter--wrap { flex-wrap: wrap; }
.rocks { list-style: none; margin: 0; padding: 0; overflow-wrap: anywhere; }
.rocks li { padding-block: 12px; border-bottom: 1px solid var(--line); }
.rocks__m { color: var(--muted); font-size: 14px; }

@media (max-width: 560px) {
  .map { height: 360px; }
}  /* 2026-10-10 이 괄호가 빠져 아래 조과 폼 규칙 전부가 폰 폭에서만 먹고 있었다 */

/* 조과 제보
   새 색을 만들지 않는다. 버튼은 --accent 바탕 + --on-accent 글자(5.6:1 / 다크 8.2:1, 위 토큰 주석).
   오류 글자는 --crit(6.7:1 / 다크 8.3:1). */

.catch-links { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 8px 0 0; }
.catch-links a { display: inline-flex; align-items: center; min-height: 44px; }

.cform { display: grid; gap: 16px; max-width: 560px; margin: 0 0 16px; }
.cform__row { display: grid; gap: 4px; }
.cform__row label { font-weight: 600; font-size: 15px; }
.cform input:not([type="checkbox"]):not([type="radio"]), .cform select, .cform textarea {
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); color: var(--ink); font: inherit;
}
.cform__chk { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; }
.cform__chk input { width: 24px; height: 24px; margin: 10px 0; accent-color: var(--accent); }
.cform__chk label { padding-block: 10px; }
.cform__chk .errorlist { grid-column: 2; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform .errorlist { list-style: none; margin: 0; padding: 0; color: var(--crit); font-size: 14px; }
.cform__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px;
  border: 0; border-radius: 6px; background: var(--accent); color: var(--on-accent);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.cform__btn:hover { text-decoration: none; }

/* 회원 화면(가입·로그인·내 정보·포인트 등록). 새 색 없음 — --muted 6.1:1 · --ink-2 10.5:1 · --crit 6.7:1(다크 6.8·11.6·8.3). */
.cform__help { color: var(--muted); font-size: 14px; }
.cform__help ul { margin: 0; padding-left: 20px; }
.cform__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.cform__set legend { padding: 0; margin: 0 0 4px; font-weight: 600; font-size: 15px; }
.cform__set > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0 12px; }
.cform__set label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.cform__set input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--accent); }
.map--pick { height: 320px; margin: 0; cursor: crosshair; }

.acct { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ink-2); font-size: 14px; }
/* 머리말 사람 아이콘(로그인·내 정보) — 탭 대상은 .ico 가 44×44 로 채운다. 내 정보 화면에서는 강조색. */
.acct.ico { color: var(--ink-2); padding: 0; border-radius: 999px; }
.acct.ico[aria-current="page"] { color: var(--accent); }

.mine { list-style: none; margin: 0; padding: 0; overflow-wrap: anywhere; }
.mine__i { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding-block: 4px; border-bottom: 1px solid var(--line); }
.mine__t { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.mine__m { color: var(--muted); font-size: 14px; }
.mine__w { flex-basis: 100%; color: var(--crit); font-size: 14px; }
.mine__a { display: flex; margin-left: auto; }   /* 지우기는 줄 끝 — 주 행동 옆에 두지 않는다 */
.mine__a a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }

.cgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
         grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }   /* 좁은 폭 2열 · 넓은 폭 빈 칸 없이 */
.cgrid__i a { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.cgrid__i a:hover .cgrid__t { text-decoration: underline; }
.cgrid__i img:not(.fpic) { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--sunken); }
.cgrid__t { font-weight: 600; }
.cgrid__m { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

/* 포인트 상세 '현장 참고 그림'. 새 색 없음. 그림은 원본 비율 그대로(지도 글씨를 자르지 않는다) */
.refs { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin: 0 0 16px; }
.refs__i { margin: 0; min-width: 0; }
.refs__i a { display: block; }
.refs__i img { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--sunken); }
.refs__i figcaption { margin-top: 8px; overflow-wrap: anywhere; }
.refs__src { display: block; color: var(--muted); font-size: 14px; }
/* 포인트 '실시간 바다'(cctv.py) — 화면 하나씩, 둘 이상이면 위 단추로 고른다 */
.live { margin: 0 0 24px; max-width: 720px; }
.live__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.live__tab { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.live__tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.live__tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.live__i { margin: 0 0 16px; }
.live__i[hidden], .live__i[data-off] { display: none; }
.live__i img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 6px; background: var(--sunken); }
.live__v { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.live__v iframe, .live__v video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live__i figcaption { margin-top: 8px; overflow-wrap: anywhere; }
/* 포인트 지도의 CCTV 아이콘·팝업 */
.cctvpin { border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.popcam { display: block; }
.popcam__v { display: block; position: relative; aspect-ratio: 16 / 9; margin: 6px 0; border-radius: 4px; overflow: hidden; background: #000; }
.popcam__v video, .popcam__v iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.popcam__m { color: var(--muted); }
.map .leaflet-popup-content img { display: block; width: 160px; height: auto; margin: 4px 0; border-radius: 4px; }

.pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 24px 0 0; color: var(--muted); }
.pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }

.cphoto { margin: 0 0 16px; }
.cphoto img { display: block; border-radius: 6px; }
.cphoto figcaption { color: var(--ink-2); margin-top: 8px; }

@media (max-width: 560px) {
  .cform__btn { width: 100%; }   /* 폰에서 주 버튼은 폭을 채운다 */
}

/* ── 물때표의 음력·물때 이름. 조위차가 주인공이라 보조 글씨로만 둔다. 새 색 없음(--muted 5.6:1) */
.moon { display: block; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 지역 금어기·금지체장 표 */
/* 새 색 없음. '지금 금어기' 는 .warnbar b 와 같은 --crit on --sunken 짝을 쓴다. */
.rules th, .rules td { padding-block: 8px; vertical-align: top; }
.rules th[scope="row"] { color: var(--ink); font-size: 15px; white-space: nowrap; }
.tag--closed { color: var(--crit); font-weight: 600; }

/* 지역 필터·검색 */
/* 새 색 없음. 강조색(--accent 바탕)은 지금 고른 칩 하나에만 쓴다 — 검색 단추는 테두리 꼴(보조)이다.
   최근 검색지역 줄은 JS 가 hidden 을 걷는다. display 를 주면 hidden 이 무력해지므로 [hidden] 을 다시 막는다. */
.search { margin: 0 0 12px; }
.search label { display: block; font-weight: 600; font-size: 15px; margin: 0 0 4px; }
.search__hint { color: var(--muted); font-weight: 400; font-size: 14px; }
.search__row { display: flex; gap: 8px; }
.search input {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); color: var(--ink); font: inherit;
}
.search button {
  min-height: 44px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.search button:hover { background: var(--sunken); }

.recent { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 16px; }
.recent[hidden] { display: none; }
.recent__h { color: var(--muted); font-size: 14px; }
.recent ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.recent li { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--sunken); }
.recent li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 0 14px; color: var(--ink-2); text-decoration: none; }
.recent li a:hover { text-decoration: underline; }
.recent button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.recent li button .i { width: 16px; height: 16px; }   /* 칩 안 '지우기'는 글자 크기에 맞춘다 */
.recent__clear { padding: 0 8px; text-decoration: underline; }

.area h2 { margin-top: 32px; }
.area__n { color: var(--muted); font-size: 14px; font-weight: 400; }
.area__h { display: flex; align-items: center; gap: 6px; }   /* 작은 '42곳'을 제목 글자 높이 가운데에 */
.cells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cells a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); text-align: center; text-decoration: none; overflow-wrap: anywhere;
}
.cells a:hover { border-color: var(--line-strong); text-decoration: underline; }
.area__more { margin-top: 8px; }   /* 물때표 묶음의 '더 보기' — <details>, JS 없음. 펼침 삼각형은 남긴다 */
.area__more summary { min-height: 44px; line-height: 44px; cursor: pointer; text-decoration: underline; }
.area__more[open] summary { margin-bottom: 8px; }
.empty .more { display: inline-flex; align-items: center; min-height: 44px; margin-left: 8px; }

/* 모바일 하단 탭바·더보기 */
/* 새 색 없음. --surface 위에서 다시 잰 값: 탭 글자 --muted 6.4:1(다크 6.3:1), 현재 탭 --accent 5.6:1(다크 7.6:1),
   더보기 격자는 --paper 위 --ink-2(10.5:1 · 다크 11.6:1, 위 토큰 주석). 계정 카드(--surface) 글자는 --ink.
   좁은 화면(≤720px)에서는 상단 5칸 내비를 숨기고 하단 탭바 5칸을 띄운다 — 상단엔 로고·로그인만 남는다.
   탭바는 순수 링크(JS 없음). 칸은 56px 높이, 아이폰 홈 막대 자리는 safe-area-inset-bottom 으로 띄운다.
   z-index 는 Leaflet 단추(1000)보다 위여야 지도 화면에서 안 가린다. */
.tabbar { display: none; }
@media (max-width: 720px) {
  .nav { display: none; }
  .acct { margin-left: auto; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }   /* 본문·꼬리가 탭바에 가리지 않게 */
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; color: var(--muted); font-size: 12px; text-decoration: none;
  }
  .tabbar a:focus-visible { outline-offset: -4px; }   /* 화면 가장자리에서 링이 잘리지 않게 안쪽으로 */
  .tabbar a[aria-current="page"] { color: var(--accent); font-weight: 700; }
  /* 글을 칠 때는 탭바를 내린다 — 폰 키보드 위에 떠서 입력 칸을 가렸다. :has 모르는 브라우저는 지금처럼 보인다. */
  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select):focus) .tabbar { display: none; }
  body.kb .tabbar { display: none; }   /* :has 모르는 iOS Safari 15.0~15.3 — base.html 의 focusin 스크립트가 .kb 를 단다 */
}

.acard { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin: 0 0 24px; }
.acard__t { font-weight: 600; margin: 0; }
.acard__a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 0; }
.acard__a > a:not(.cform__btn) { display: inline-flex; align-items: center; min-height: 44px; }
.acard .catch-links { margin-top: 4px; }

/* 360px 에서도 4열. 칸 폭 약 76px — 긴 이름은 두 줄로 접는다. */
.mgrid { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mgrid a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 96px; padding: 12px 4px; border-radius: 12px; background: var(--sunken);   /* 칸 높이를 고르게(세 줄 이름) — --ink-2 on --sunken 10.0:1 */
  color: var(--ink-2); font-size: 13px; line-height: 1.35; text-align: center; text-decoration: none;
  word-break: keep-all; overflow-wrap: anywhere;
}
.mgrid a:hover { background: var(--line); text-decoration: underline; }
.mgrid svg { color: var(--ink-2); }   /* 아이콘 15개를 주황으로 칠하지 않는다(강조색은 주 행동에만) — --ink-2 11.0:1 */

/* 금어기·금지체장 카드형 목록 — 360px 에서 가로 스크롤 없이 줄을 바꾼다 */
.rlist { list-style: none; margin: 0; padding: 0; }
.rlist__i { padding-block: 12px; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.rlist__i p { margin: 0; }
.rlist__h { font-weight: 600; }
.rlist__h a { display: inline-flex; align-items: center; min-height: 44px; }
.rlist__r { overflow-wrap: anywhere; }
.rlist__r + .rlist__r { margin-top: 4px; }
.rlist__i .rlist__b { margin-top: 4px; }
/* 사진은 어종 목록과 같은 96×64 칸(아래 .list__img 주석). 360px 에서도 글 칸이 240px 남는다. */
.rlist__i--img { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.rlist__img { display: block; width: 96px; height: 64px; margin-top: 6px; object-fit: cover; border-radius: 6px; background: var(--sunken); }
.warnbar a { color: var(--ink); }
.rlist__today { margin: 16px 0; }

/* ---------------------------------------------------------------- 어종 사진·구분 포인트 */
/* 새 색 없음. 출처 글씨는 --muted(5.6:1 · 다크 7.2:1), 빈 칸 바탕은 --sunken(포인트 갤러리와 같음).
   목록 썸네일은 고정 96×64 칸에 object-fit 으로 잘라 넣는다 — 원본 비율이 제각각이라
   칸을 고정하지 않으면 줄 높이가 사진마다 달라진다. 앵커가 줄 전체라 탭 대상 44px 은 그대로다. */
.list--thumbs .list__i a { grid-template-columns: 96px 1fr; align-items: start; }
/* 요약이 긴 줄(매거진)은 세 줄까지 — 전문은 상세에 있다. 표현만 줄인다. */
.list--thumbs .list__m { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.list--thumbs .list__t, .list--thumbs .list__m { grid-column: 2; }
.list__img {
  grid-row: 1 / span 2; display: block; width: 96px; height: 64px;
  object-fit: cover; border-radius: 6px; background: var(--sunken);
}
.list__img--none {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px;
}
/* 매거진 목록의 SVG 대표 그림(물때·채비) — 장식이라 글씨는 읽히지 않아도 된다. 색은 .tfig·currentColor 그대로(새 색 없음). */
.list__img--svg { margin: 0; padding: 4px; color: var(--ink); background: var(--sunken); }
.list__img--svg svg { width: 100%; height: 100%; max-width: none; }
/* 매거진 본문 그림 — 사진 아래 '자세히 보기'와 포인트 참고 그림. 새 색 없음. */
.afig__more { margin: -16px 0 24px; }
.afig__spot { margin: 0 0 24px; max-width: 720px; }
.sphoto { margin: 0 0 24px; }
.sphoto img { display: block; width: 100%; max-width: 720px; height: auto; border-radius: 6px; background: var(--sunken); }
.sphoto figcaption { margin-top: 8px; overflow-wrap: anywhere; }
.sphoto__src { display: block; color: var(--muted); font-size: 14px; }
.sphoto--none { color: var(--muted); }
.confused { padding-left: 20px; }
.confused li { margin-bottom: 8px; }
.confused a { display: inline-block; min-height: 44px; line-height: 44px; }  /* 탭 대상 44px */

/* ---------------------------------------------------------------- 아이콘 링크·툴팁 (2026-10-10)
   기능 링크(지도로 보기·고치기·지우기·목록으로…)는 아이콘이다. 그림은 templatetags/icons.py 한 곳.
   이름은 aria-label, 보이는 이름은 data-tip 툴팁 — 마우스 오버(hover 되는 기기만)와 키보드 초점(focus-visible)에서 뜬다.
   title 은 쓰지 않는다(aria-label 과 겹쳐 두 번 읽히고, 브라우저 기본 풍선이 CSS 툴팁과 겹친다).
   새 색 없음: 툴팁은 --ink 바탕에 --paper 글자 = 본문 대비를 뒤집은 짝(16.6:1 · 다크 15.8:1).
   하단 탭바·더보기 격자는 글자를 그대로 둔다 — 터치 화면엔 마우스 오버가 없다. */
.i {
  width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }   /* 붙은 아이콘 사이 8px */
.tools form { display: inline-flex; margin: 0; }
.ico {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0; border-radius: 6px;
  color: var(--accent); text-decoration: none;
}
button.ico { border: 0; background: none; font: inherit; cursor: pointer; }
.ico:hover { background: var(--sunken); text-decoration: none; }
.mine__a { gap: 8px; }
.mine__a a.ico { padding: 0; }
.search button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 10px; }   /* 테두리 꼴 그대로, 글자 대신 돋보기 */

[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); display: none;
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 1200;   /* 기본은 왼쪽 정렬 — 아이콘 줄이 대개 왼쪽에서 시작한다 */
  width: max-content; max-width: min(240px, calc(100vw - 32px));
  padding: 4px 8px; border-radius: 4px;
  background: var(--ink); color: var(--paper);
  font-size: 13px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal;
  pointer-events: none; animation: tip-in .12s ease-out;   /* prefers-reduced-motion 이면 위 전역 규칙이 끈다 */
}
.tip--end[data-tip]::after, .tip--end [data-tip]::after { left: auto; right: 0; }   /* 오른쪽 끝 요소는 오른쪽 정렬 */
@media (hover: hover) { [data-tip]:hover::after { display: block; } }   /* 터치에서 누른 뒤 남아 가리지 않게 */
[data-tip]:focus-visible::after { display: block; }
@keyframes tip-in { from { opacity: 0; } }

/* 마우스가 없는 넓은 화면(태블릿)에서는 상단 내비 아이콘 옆에 이름을 늘 보인다 — 툴팁을 띄울 방법이 없다. */
@media (hover: none) {
  .nav a::after, .nav a:focus-visible::after {
    display: inline; position: static; width: auto; max-width: none; padding: 0;
    background: none; color: inherit; font-size: 15px; animation: none;
  }
}

/* ---------------------------------------------------------------- 물때 가이드·팁 (2026-10-10)
   새 색 없음. 오늘 시간대는 .hl(--accent, 5.3:1 · 다크 8.2:1)로 '지금' 해당하는 줄에만 칠한다 — 한 화면 강조 하나.
   카드 목록(표 아님)이라 360px 에서 가로로 넘치지 않는다. 링크는 줄 안의 어종·근거라 줄 전체를 덮지 않는다(읽는 줄). */
.tt__today { color: var(--ink-2); margin: 0 0 8px; overflow-wrap: anywhere; }
.tt { list-style: none; margin: 0 0 16px; padding: 0; }
.tt__i { padding-block: 12px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.tt__i p { margin: 0; }
.tt__i p + p { margin-top: 4px; }
.tt__w { font-weight: 600; }
.tt__now { font-variant-numeric: tabular-nums; }
.tt__m { color: var(--ink-2); }
.tt__i a, .tt__names a { display: inline-flex; align-items: center; min-height: 44px; }
.tt__names { display: flex; flex-wrap: wrap; gap: 0 16px; }
.tip__body { max-width: 62ch; overflow-wrap: anywhere; }
.tip__body p { margin: 0 0 16px; }
.tip__url { overflow-wrap: anywhere; }

/* 배우기 */
/* 새 색 없음. 카드 바탕 --surface·제목 --ink(17.4:1 · 다크 14.5:1)·한 줄 --muted(6.4:1 · 다크 6.3:1)·아이콘 --accent(5.6:1 · 다크 7.6:1).
   그림은 currentColor 라 본문 대비를 따른다. 카드 전체가 링크다(UIUX Fitts). 360px 에서는 한 줄에 카드 하나. */
.lcards { list-style: none; margin: 16px 0 24px; padding: 0;
          display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lcard {
  display: flex; align-items: center; gap: 12px; height: 100%; min-height: 64px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); text-decoration: none;
}
.lcard:hover { border-color: var(--line-strong); text-decoration: none; }
.lcard:hover .lcard__t { text-decoration: underline; }
.lcard > .i { color: var(--accent); }
.lcard .lure__svg { flex: none; width: 96px; height: 64px; padding: 4px; border-radius: 6px; background: var(--sunken); color: var(--ink); }   /* 사진 칸과 같은 96×64 — 글자 시작선을 맞춘다. --ink on --sunken 15.8:1 */
.lcard__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lcard__t { font-weight: 600; }
.lcard__m { color: var(--muted); font-size: 14px; line-height: 1.5; }
.learn { max-width: 62ch; }
.learn p { margin: 0 0 16px; }
.lfig { margin: 0 0 24px; color: var(--ink); }
.lfig .lure__svg { display: block; width: 160px; height: auto; }
.lfig svg { display: block; width: 100%; max-width: 420px; height: auto; }
.lfig figcaption { margin-top: 4px; }
.lfig--none { color: var(--muted); background: var(--sunken); padding: 12px 16px; border-radius: 6px; }
.steps { padding-left: 24px; margin: 0 0 16px; }
.steps li { margin-bottom: 8px; }
/* 릴·낚싯대 숫자 읽기 — 품번을 칸으로 나눠 보인다. 글자·테두리 색은 기존 토큰(--ink·--line) 그대로라 대비 추가 측정 없음 */
.spec { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; font: 600 20px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--ink); }
.learn .dogam__t { margin-bottom: 16px; }
.spec span { padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--sunken); }
.spec--sm { display: block; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--sunken); font-size: 15px; overflow-wrap: anywhere; }
.tsteps { padding-left: 24px; margin: 0 0 16px; }
.tsteps h2 { font-size: 17px; margin: 24px 0 4px; }
.variants { margin: 0 0 16px; }
.variants div { padding-block: 8px; border-bottom: 1px solid var(--line); }
.variants dt { font-weight: 600; }
.variants dd { margin: 0; color: var(--ink-2); }
a.inl { display: inline; padding-block: 10px; margin-block: -10px; }   /* 문장 속 링크 — 줄 간격은 그대로, 누르는 범위만 위아래로 넓힌다 */
.share__url { align-self: center; overflow-wrap: anywhere; }
.share__msg { align-self: center; }
.ico[hidden] { display: none; }   /* .ico 의 inline-flex 가 hidden 속성을 이기지 않게 — JS 없으면 공유 단추는 숨는다 */

/* 2차 띠 */
/* 배우기 묶음(/learn/·/rig/·/guide/·/tips/) 위의 글자 링크 줄. 새 색 없음 — 상단 내비와 같은 짝:
   글자 --ink-2 on --surface(10.5:1 · 다크 11.6:1), 현재 위치 --accent on --accent-soft(.nav 와 같음).
   좁으면 줄을 바꾼다 — 가로 스크롤 금지(UIUX). 칸은 44px. */
.band { background: var(--surface); border-bottom: 1px solid var(--line); }
.band__in { display: flex; flex-wrap: wrap; gap: 0 4px; padding-block: 4px; }
.band a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center;
  padding: 0 10px; border-radius: 6px; color: var(--ink-2); font-size: 15px; text-decoration: none;
}
.band a:hover { background: var(--sunken); }
.band a[aria-current="page"] { color: var(--accent); font-weight: 600; background: var(--accent-soft); }
@media (max-width: 720px) { .band__in { gap: 0; } .band a { padding: 0 4px; font-size: 14px; } }
@media (max-width: 380px) { .band a { padding: 0 3px; font-size: 13.5px; letter-spacing: -0.01em; } }   /* 스크롤바가 폭을 먹는 좁은 창(본문 313px)에서도 두 줄 — --ink-2 10.5:1 그대로 */   /* 360px 에서 두 줄 — '월별 어종' 을 더하며 6px→4px(둘째 줄 합 323px / 칸 328px) */   /* 2026-10-10 '체크리스트'(13칸째, 약 73px)를 더해 360px 에서 세 줄이 됐다 — 칸 44px 를 지키면 두 줄 합 656px 안에 13칸(약 700px)이 안 들어간다 */
.mgroup { font-size: 16px; margin: 24px 0 8px; }

/* ---------------------------------------------------------------- 표 한 줄 · 어종 썸네일 (2026-10-10)
   새 색 없음. 360px 에서 숫자·날짜 칸이 두 줄로 접히지 않게 한다 — 글자를 줄이지 않고 열 구성을 바꿨다
   (물때: 만조·간조를 열로 / 물때표 상세: 만조·간조 하나가 한 줄 / 금어기: 근거를 아래 한 줄로).
   썸네일(templatetags/fishui.fishpic)은 이름 앞에 붙는 장식이다(alt 없음). 빈 칸 바탕은 --sunken. */
.nw { white-space: nowrap; }
.tm + .tm { margin-left: 8px; }
.rules__g tr:first-child > * { border-bottom: 0; padding-bottom: 0; }
.rules td.rules__note { height: auto; padding-block: 0 8px; }.tide__d td { height: 36px; }   /* 읽기만 하는 표 — 누를 것이 없어 44px 을 강제하지 않는다 */
.tide__d td[rowspan] { vertical-align: top; padding-top: 6px; }
.tide__d tr:not(:last-child) > td:not([rowspan]) { border-bottom-color: transparent; }   /* 줄은 날짜 사이에만 */
.fpic {
  display: inline-block; width: 48px; height: 32px; margin-right: 8px; vertical-align: middle;
  max-width: none;   /* 전역 img max-width:100% 는 표 칸의 최소 폭 계산에서 그림을 0 으로 쳐 옆 칸과 겹치게 한다 */
  object-fit: cover; border-radius: 4px; background: var(--sunken);
}
/* 홈·포인트 목록: 점수(큰 숫자 하나)를 이름 바로 앞에 붙이고, 값 줄은 한 줄. 값 조각은 쪼개지 않고(.nw), 넘치면 말줄임이 마지막 안전장치 */
.list--score .list__i a { grid-template-columns: 56px minmax(0, 1fr); }
.list--score .list__s { grid-column: 1; grid-row: 1 / span 2; text-align: center; }
.list--score .list__t, .list--score .list__m { grid-column: 2; }
.list__m--one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 이름 옆 지역 — 글자색은 --muted(6.1:1 · 다크 6.8:1, 위 토큰 주석). */
.list__rg { margin-left: 4px; color: var(--muted); font-size: 13px; font-weight: 400; white-space: nowrap; }
.fpic--sm { width: 24px; height: 24px; margin-right: 6px; border-radius: 50%; }

/* 제목 줄 아이콘(.sec) — '전체 보기·목록으로' 같은 이동 단추는 섹션·화면 제목 줄 끝에 아이콘으로 둔다(2026-10-10 사용자 지시).
   제목 칸의 위아래 여백을 .sec 가 가져가고 제목 자신은 0. 아이콘은 44px, 툴팁은 오른쪽 끝 정렬(tip--end). 새 색 없음. */
.sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 36px 0 8px; }
.sec--h1 { margin: 0 0 8px; }
.sec h1, .sec h2 { margin: 0; min-width: 0; }
.sec__a { display: flex; flex: none; gap: 4px; }

/* 포인트 목록 줄의 대략 위치(fishui.minimap) — 이름 줄 오른쪽 끝, 값 줄은 그 아래 전체 폭(값 칸을 좁히지 않는다).
   윤곽 --line-strong, 점 --accent(흰 바탕 5.6:1 — 비텍스트 3:1 이상). 장식이라 aria-hidden, 지역 이름이 옆 글자로 있다. */
.list--score .list__i a { grid-template-columns: 56px minmax(0, 1fr) auto; }
.list--score .list__m { grid-column: 2 / span 2; }
.mmap { flex: none; display: block; width: 40px; height: 44px; }
.mmap use { fill: var(--line-strong); }
.mmap circle { fill: var(--accent); stroke: var(--surface); stroke-width: 12; }
.list--score .mmap { grid-column: 3; grid-row: 1; }
.list__img .mmap { width: 50px; height: 54px; }

/* 폰(터치)에는 마우스 오버가 없다 — 줄에 놓인 아이콘 링크는 툴팁 글자를 아이콘 옆에 늘 보인다. 데스크톱은 아이콘 + 툴팁 그대로. */
@media (max-width: 720px), (hover: none) {
  .tools .ico { gap: 6px; padding: 0 12px 0 10px; }
  .tools .ico::after, .tools .ico:hover::after, .tools .ico:focus-visible::after {
    display: inline; position: static; width: auto; max-width: none; padding: 0;
    background: none; color: inherit; font-size: 15px; animation: none;
  }
}

/* 배우기 사진 */
/* 새 색 없음. 목록 카드 썸네일은 고정 96x64 칸(어종 목록 .list__img 와 같은 크기)에 넣어 카드 높이를 맞춘다.
   사진은 cover 로 잘라 넣고, 도해(kind '그림')는 글자·단계가 잘리지 않게 contain + --sunken 바탕.
   상세의 큰 사진·출처 글씨는 어종 사진의 .sphoto 를 그대로 쓴다(--muted 5.6:1 · 다크 7.2:1). */
.lcard__img { flex: none; display: block; width: 96px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--sunken); }
.lcard__img--fig { object-fit: contain; }

/* 날짜별 물때 카드 */
/* 포인트 상세 '물때'·물때표 상세(templates/angling/_tide_days.html). 새 색 없음 — 토큰 주석의 값 그대로:
   칩 글자 --ink-2 on --surface(11.0:1 · 다크 10.7:1), 칩 아래 조위차 --muted(6.4:1 · 다크 6.3:1),
   고른 칩 --accent on --accent-soft(4.8:1 · 다크 6.3:1) — 한 화면 강조 하나(지금 위치). 막대는 --muted 면(비텍스트).
   조위차가 카드의 주인공이라 그 숫자만 크게 둔다(점수 52px 보다는 작게 — 포인트 상세의 큰 숫자는 점수다).
   카드 줄·칩 줄만 가로로 움직인다(overscroll contain) — 페이지 가로 스크롤 0. 칩·단추는 44px. */
.tdays { margin: 8px 0 16px; }
.tdays__bar { display: flex; align-items: center; gap: 4px; }
.tdays__chips {
  position: relative; flex: 1; min-width: 0; display: flex; gap: 4px; padding: 4px;   /* 4px = 포커스 링 자리 */
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.tdays__chip {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; min-height: 44px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink-2); font-size: 14px; line-height: 1.3;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none;
}
.tdays__chip small { color: var(--muted); font-size: 12px; }
.tdays__chip:hover { border-color: var(--line-strong); text-decoration: none; }
.tdays__chip[aria-current] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.tdays__chip[aria-current] small { color: var(--accent); }
.tdays .ico:disabled { opacity: .4; cursor: default; }
.tdays__track {
  position: relative; display: flex; gap: 12px; margin-top: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
@media (prefers-reduced-motion: no-preference) { .tdays__track, .tdays__chips { scroll-behavior: smooth; } }
.tday {
  flex: 0 0 100%; min-width: 0; scroll-snap-align: start; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.tday__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.tday__d { margin: 0; font-size: 17px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tday__d small { margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 400; }
.tday__moon { margin: 0; color: var(--muted); font-size: 14px; }
.tday__range { margin: 0; text-align: right; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tday__range span { display: block; color: var(--muted); font-size: 13px; }
.tday__range b { font-size: 28px; }
.tday__rel { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.tday__bar { flex: 1; height: 8px; border-radius: 4px; background: var(--sunken); overflow: hidden; }
.tday__bar i { display: block; height: 100%; border-radius: 4px; background: var(--muted); }
.tday__fig { margin: 8px 0 0; }
.tday__fig svg { max-width: 600px; margin-inline: auto; }   /* 넓은 화면에서 글자가 30px 넘게 커지지 않게 — viewBox 600 그대로 */
.tday__fig .chart__mark { paint-order: stroke; stroke: var(--surface); stroke-width: 6px; stroke-linejoin: round; }   /* 글자 테두리 — '지금' 선·면 위에서도 읽힌다 */
.tdays__chips, .tdays__track { scrollbar-color: var(--line-strong) transparent; }   /* 다크에서 밝은 기본 스크롤바가 튀지 않게 */
.tday__turns { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 12px 0 0; }
.tday .empty { padding-top: 16px; padding-bottom: 4px; }
.tdays__key { margin: 8px 0 0; }
.tdays__table { margin: 8px 0 16px; }
.tdays__table summary { min-height: 44px; line-height: 44px; cursor: pointer; color: var(--accent); }   /* list-item 그대로 — 펼침 삼각형을 남긴다 */

/* ---------------------------------------------------------------- 금어기·금지체장 '대표' 카드 (2026-10-10)
   새 색 없음 — 전부 기존 토큰 짝이고 대비는 위 :root 주석의 실측값이다.
     기간 배지   --on-accent on --accent          5.6 / 다크 8.2
     지금 금어기 --crit on --paper                7.0 / 다크 8.3   (빨강은 위험 전용 — 금어기 경고에만)
     큰 숫자     --accent on --accent-soft        4.82 / 다크 6.32 — 카드 바닥이 --surface→--accent-soft 그라데이션이라 가장 나쁜 끝값
     표준명      --muted  on --accent-soft        5.48 / 다크 5.25
     단위·태그   --ink-2  on --accent-soft·--sunken 9.47·10.0 / 다크 8.91·9.6   (2026-10-10 WCAG 식으로 계산)
   큰 숫자를 여러 개 두는 것은 사용자 요청(카드뉴스형)이다. 금지체장은 낚시인이 재서 놓아주는 '손을 쓰는 숫자'라 그 카드에만 둔다.
   360px: 본문 폭 328px → 2열(칸 158px). 넓으면 3열(560px~)·4열(800px~). */
.rcards__lede { color: var(--muted); margin: 0 0 12px; }
.rcards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
@media (min-width: 560px) { .rcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 800px) { .rcards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rcards > li { min-width: 0; }
.rcard {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 40%, var(--accent-soft));
  color: var(--ink); text-decoration: none;
  transition: transform .15s ease-out, border-color .15s ease-out;   /* reduced-motion 이면 전역 규칙이 끈다 */
}
.rcard:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
.rcard:focus-visible { border-radius: 12px; }
.rcard__pic { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--sunken); }
.rcard__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rcard__none { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.rcard__now {
  position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--paper); color: var(--crit); font-size: 13px; font-weight: 700;
}
.rcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
.rcard__name { font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.rcard__name small { color: var(--muted); font-size: 13px; font-weight: 400; }
.rcard__badge {
  max-width: 100%; padding: 2px 10px; border-radius: 12px;   /* 999px 면 두 줄로 접힐 때(고등어 '(2026년도 고시)') 모서리가 찌그러진다 */
  background: var(--accent); color: var(--on-accent);
  font-size: 15px; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.rcard__badge--muted { background: var(--sunken); color: var(--ink-2); font-weight: 600; }
.rcard__n {
  font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.rcard__n small { margin-left: 4px; color: var(--ink-2); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.precheck { margin-top: 36px; padding: 4px 16px 16px; background: var(--sunken); border-radius: 12px; }
.precheck h2 { margin-top: 12px; }
.precheck__l { margin: 0; padding-left: 20px; }
.precheck__l li + li { margin-top: 8px; }
.precheck__l b { display: block; }

/* 어종별 추천 루어 (/learn/lures/ 위, templates/angling/learn_list.html) — 카드뉴스 꼴의 어두운 장을 옆으로 넘긴다.
   장은 라이트·다크 모두 같은 어두운 섬이라 토큰도 한 벌이다. 대비는 --deck-bg(#1b2420) 위:
   --deck-ink 15.9:1 · --deck-muted 9.0:1 · --deck-hi 10.1:1(어종↔루어 강조 글자 · 포커스 링, 비텍스트 3:1 이상).
   장 테두리 --line-strong — 다크 paper(#17120f)와 장 바탕은 1.2:1 이라 테두리가 경계를 맡는다(라이트 white 와는 15.9:1).
   줄만 가로로 움직인다(overscroll contain) — 페이지 가로 스크롤 0. 단추는 .ico(44px), JS 없으면 숨는다. */
:root { --deck-bg: #1b2420; --deck-ink: #ffffff; --deck-muted: #b9c6bf; --deck-hi: #7ee2a8; }
@media (prefers-color-scheme: dark) { :root { --deck-bg: #1b2420; --deck-ink: #ffffff; --deck-muted: #b9c6bf; --deck-hi: #7ee2a8; } }
.deck { margin-bottom: 24px; }
.deck__track {
  display: flex; gap: 12px; padding: 4px;   /* 4px = 포커스 링 자리 */
  overflow-x: auto; overflow-y: hidden;   /* 도는 장이 원근으로 커져 세로 스크롤바가 생기지 않게 */
  overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  perspective: 1200px;
}
.deck__card {
  flex: 0 0 100%; max-width: 520px; min-width: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: var(--deck-bg); color: var(--deck-ink); border: 1px solid var(--line-strong); border-radius: 12px;
}
.deck__card :focus-visible { outline-color: var(--deck-hi); }
.deck__n { margin: 0; color: var(--deck-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.deck__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.deck__pics:has(> :only-child) { grid-template-columns: 1fr; }   /* 사진 한 장이면 반쪽 빈 칸 없이 */
.deck__pics > :only-child { aspect-ratio: 16 / 9; }
.deck__pics img, .deck__svg { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--deck-ink); }
.deck__svg { display: grid; place-items: center; padding: 8px; background: none; border: 1px solid var(--deck-muted); color: var(--deck-ink); }
.deck__svg svg { width: 100%; height: 100%; }
.deck__q { margin: 8px 0 0; font-size: 24px; line-height: 1.3; word-break: keep-all; }
.deck__q strong { display: block; color: var(--deck-hi); font-size: 32px; }
.deck__d { margin: 0; color: var(--deck-muted); font-size: 14px; }
.deck__a { display: flex; flex-wrap: wrap; gap: 0 16px; margin: auto 0 0; }
.deck__a a { display: inline-flex; align-items: center; min-height: 44px; color: var(--deck-ink); text-decoration: underline; }
/* 책장 넘김 — 들어오는 장은 왼쪽 가장자리, 나가는 장은 오른쪽 가장자리를 축으로 돈다(넘기는 쪽이 책등). 지원 브라우저·움직임 허용일 때만. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .deck__card { animation: deck-flip linear both; animation-timeline: view(inline); }
  }
}
@keyframes deck-flip {
  0% { transform-origin: left center; transform: rotateY(-55deg); opacity: .5; }
  42%, 58% { transform: none; opacity: 1; }   /* 멈춘 장은 몇 px 어긋나도(줄 안쪽 여백) 기울지 않게 평평한 구간 */
  100% { transform-origin: right center; transform: rotateY(55deg); opacity: .5; }
}

/* ---------------------------------------------------------------- 월별 추천 어종 (2026-10-10)
   /season/ 과 홈 카드 뉴스. 새 색 없음 — 토큰 주석의 값 그대로:
   카드 글자 --ink on --surface(17.4:1 · 다크 14.5:1), 한 줄 --ink-2(11.0:1 · 다크 10.7:1), 기록·권역 --muted(6.4:1 · 다크 6.3:1),
   뒤 카드 탭 --ink-2 on --sunken(10.0:1 · 다크 9.6:1). 지도 점 --accent(비텍스트, 5.6:1 · 다크 7.6:1), 윤곽 --line-strong(fishui.minimap 과 같다). */
.rmap { display: block; flex: none; width: 48px; height: 52px; }
.rmap use { fill: var(--line-strong); }
.rmap circle { fill: var(--accent); }

.rcover { list-style: none; margin: 16px 0 8px; padding: 0; display: grid; gap: 8px;
          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.rcover a {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 0 8px;
  min-height: 64px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.rcover a:hover { border-color: var(--line-strong); }
.rcover a:hover .rcover__t { text-decoration: underline; }
.rcover .rmap { grid-row: 1 / span 2; }
.rcover__t { font-weight: 600; align-self: end; }
.rcover__m { color: var(--muted); font-size: 13px; align-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.region { scroll-margin-top: 16px; }
.region__head { display: flex; align-items: center; gap: 12px; margin: 36px 0 12px; }   /* 제목은 자기 본문에 붙는다 */
.region__head h2 { margin: 0; }
.region__head .rmap { width: 64px; height: 70px; }
.scards { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px;
          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.scards a {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 0 0 12px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-decoration: none;
}
.scards a:hover { border-color: var(--line-strong); }
.scards a:hover .scards__t { text-decoration: underline; }
.scards img, .scards__none { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--sunken); margin-bottom: 4px; }
.scards__none { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.scards__t, .scards__m, .scards__n { padding-inline: 12px; }
.scards__t { font-weight: 600; }
.scards__m { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.scards__n { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.region__pts { margin: 0; overflow-wrap: anywhere; }
.region__pts b { margin-right: 4px; }
.region__pts a { min-width: 44px; text-align: center; }   /* '기장' 처럼 두 글자 이름도 탭 대상 44px */
.pager [aria-current] { font-weight: 600; color: var(--ink); }

/* 홈 카드 뉴스 — 석 장을 한 칸(grid-area 1/1)에 겹친다. 이달이 앞, 양옆은 scale .9 로 작게 뒤로.
   폭 72% + translateX ±24.4% 면 뒤 카드가 칸 가장자리(0~14%, 360px 화면에서 약 46px)까지만 나온다 — 칸 밖으로 넘치지 않아
   가로 스크롤이 없고, 보이는 띠가 44px 이상이라 탭 대상이 된다. 뒤 카드 본문은 가리고(visibility) 책갈피 탭만 보인다.
   키보드 초점이 뒤 카드에 가면 맨 앞으로 올라온다(:has(a:focus-visible)). 움직임 없음. */
.mcards { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; display: grid; }
.mcard { grid-area: 1 / 1; width: 72%; justify-self: center; z-index: 2; }
.mcard--prev, .mcard--next { z-index: 1; }
.mcard--prev { transform: translateX(-24.4%) scale(.9); }
.mcard--next { transform: translateX(24.4%) scale(.9); }
/* 🔥 :focus-within 을 쓰지 않는다 — 폰에서 뒤 카드를 누른 뒤 뒤로 오면(bfcache) 초점이 남아 그 카드가 이달 카드를 덮었다
   (2026-10-10 운영 캡처, 삼성 인터넷·크롬). 키보드 초점(:focus-visible)일 때만 올린다. :has 없는 브라우저는 안 올라오고 테두리만 보인다. */
.mcard:has(a:focus-visible) { z-index: 3; }
.mcard a {
  position: relative; display: block; height: 100%; min-height: 44px; padding: 16px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none;
}
.mcard--prev a, .mcard--next a { background: var(--sunken); border-color: var(--line); }
.mcard--prev .mcard__body, .mcard--next .mcard__body { visibility: hidden; }
.mcard a:hover .mcard__t { text-decoration: underline; }
.mcard__tab { position: absolute; top: 12px; display: flex; flex-direction: column; color: var(--ink-2); font-size: 12px; line-height: 1.3; }
.mcard__tab b { font-size: 15px; }
.mcard--prev .mcard__tab { left: 8px; }
.mcard--next .mcard__tab { right: 8px; text-align: right; }
.mcard__body { display: flex; flex-direction: column; gap: 4px; }
.mcard__t { margin-bottom: 4px; font-weight: 600; }
.mcard__t b { font-size: 22px; }
.mcard__r { display: flex; align-items: center; min-width: 0; font-size: 14px; white-space: nowrap; }
.mcard__rg { flex: none; width: 72px; color: var(--muted); font-size: 13px; }
.mcard__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- 조황 카드 (2026-10-10, _catch_card.html)
   사진 위 반투명 검은 띠 + 흰 글자. 사진은 밝기를 모르므로 '가장 밝은 사진(흰 바탕)' 기준으로 쟀다:
   --ov-bg rgba(0,0,0,.6) 를 흰 픽셀 위에 얹으면 #666666 → 흰 글자 5.74:1(AA 통과). 검은 사진 위면 21:1.
   사진 위 띠라 라이트·다크가 같다(:root 하나에 두 테마 공통으로 정의). 그 밖의 색은 기존 토큰.
   목록 칸은 세 줄 축약(줄마다 한 줄 말줄임), 상세는 제목 띠·전체 줄·맺음 띠. 칸이 사진보다 길면 사진이 늘어나 덮는다(grid 겹치기). */
:root { --ov-bg: rgba(0, 0, 0, 0.6); --ov-ink: #ffffff; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }   /* display:none 이면 일부 브라우저가 참조(<use>)를 안 그린다 */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a.ccard, .ccard { display: grid; gap: 0; position: relative; color: var(--ov-ink); text-decoration: none; }
.ccard > .ccard__img, .ccard > .ccard__o { grid-area: 1 / 1; }
.ccard .ccard__img { display: block; width: 100%; height: 100%; min-height: 100%; align-self: stretch; object-fit: cover;
                     border-radius: 6px; background: var(--sunken); }
.ccard__o { align-self: end; display: grid; gap: 2px; min-width: 0; margin: 8px; padding: 4px 8px;
            border-radius: 8px; background: var(--ov-bg); color: var(--ov-ink); font-size: 13px; line-height: 1.45; }
.ccard__r { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ccard__r .i { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.ccard__r .fpic--sm { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
a.ccard:hover .ccard__r:first-child { text-decoration: underline; }

.ccard--full { margin: 0 0 8px; }
.ccard--full .ccard__img { aspect-ratio: auto; }
.ccard--full .ccard__o { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
                         margin: 0; padding: 12px; background: none; font-size: 15px; }
.ccard__h, .ccard__f, .ccard__l, .ccard__by { margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--ov-bg); }
.ccard__h { font-size: 17px; font-weight: 700; }
.ccard__h::before, .ccard__h::after { content: "★"; content: "★" / ""; margin: 0 4px; }   /* 장식 별 — 글자는 '오늘의 조황'/'조황' */
.ccard__l { display: grid; gap: 4px; padding: 8px 12px; border-radius: 8px; max-width: 100%; }
.ccard__l .ccard__r { display: flex; align-items: center; gap: 8px; white-space: normal; overflow-wrap: anywhere; }
.ccard__l dt { display: flex; flex: none; }
.ccard__l dd { margin: 0; min-width: 0; }
.ccard__l .i, .ccard__l .fpic--sm { width: 18px; height: 18px; margin: 0; vertical-align: 0; }
.ccard__by { font-size: 14px; }
.ccard__f { margin-top: auto; align-self: center; font-weight: 600; }
.ccard--full figcaption { grid-area: 2 / 1; margin-top: 8px; color: var(--ink-2); overflow-wrap: anywhere; }

/* 조과 폼 — 주소·장소 검색 줄과 결과. 새 색 없음(--surface·--ink·--line-strong·--muted). '찾기' 는 보조 버튼(테두리) — 강조색은 '올리기' 하나 */
.cwhere { display: grid; gap: 16px; }
.cwhere__s { display: flex; gap: 8px; }
.cwhere__s input { flex: 1; min-width: 0; }
.cwhere__b, .cwhere__pick { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 6px;
                            background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.cwhere__b { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 10px; }   /* 글자 대신 돋보기 — 위 .search button 과 같은 꼴 */
.cwhere__lb { font-weight: 600; font-size: 15px; }
.cwhere__r { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cwhere__pick { display: grid; width: 100%; padding: 8px 12px; text-align: left; }
.cwhere__pick small { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
#cmap-at:empty, #geo-msg:empty { display: none; }

/* ---------------------------------------------------------------- 지형별 공략 (2026-10-10)
   /spots/ 위 넘기는 장 + 포인트 상세의 같은 카드(templates/angling/_terrain_deck.html, angling/terrain.py).
   .deck 장 위라 새 색 없음 — .deck 구역 주석의 값 그대로(--deck-bg 위 --deck-ink 15.9:1 · --deck-muted 9.0:1 · --deck-hi 10.1:1).
   그림 선·면은 currentColor(= --deck-ink) 투명도, 번호 표지는 --deck-hi 바탕에 --deck-bg 글자(10.1:1), 지금 포인트 칩도 같은 짝.
   그림 글자 13px × (296/320) ≈ 12px(360px 화면). 칩·근거 링크는 44px. */
.terr__h { margin: 4px 0 0; font-size: 22px; line-height: 1.3; word-break: keep-all; }
.terr__fig { margin: 0; }
.terr__fig { margin: 0 -12px; }   /* 포스터는 장 폭 가득 — 360px 화면에서 라벨 글자가 13px 안팎으로 읽힌다 */
.terr__fig figcaption { padding: 0 12px; }
.terr__fig svg { display: block; width: 100%; height: auto; border-radius: 10px; color: var(--deck-ink); }
/* 포스터 꼴(terrain._svg) — 바다 그라데이션 바탕 위 제목·라벨 상자. 새 색 셋(바탕 그라데이션)과 대비(가장 밝은 --terr-g1 기준):
   흰 제목 #ffffff 11.0:1 · --deck-hi #7ee2a8 7.0:1 · --deck-muted #b9c6bf 6.2:1. 라벨 글자는 --terr-box(#081416, 92%) 상자 위 흰색 약 18.4:1.
   라이트·다크 같은 섬이라 한 벌. */
:root { --terr-g0: #0d2229; --terr-g1: #164249; --terr-g2: #0a1c20; --terr-box: rgba(8, 20, 22, .92); }
.terr__pill { fill: none; stroke: var(--deck-muted); stroke-width: 1; }
.terr__pt { fill: var(--deck-muted); font-size: 12px; letter-spacing: .1em; }
.terr__title { fill: var(--deck-ink); font-size: 30px; font-weight: 800; }
.terr__hi { fill: var(--deck-hi); }
.terr__sub { fill: var(--deck-muted); font-size: 13px; }
.terr__lead { fill: none; stroke: var(--deck-hi); stroke-width: 1.2; stroke-opacity: .8; }
.terr__box { fill: var(--terr-box); stroke: var(--deck-hi); stroke-opacity: .6; }
.terr__bt { fill: var(--deck-ink); font-size: 15px; font-weight: 700; }
.terr__dot { fill: var(--deck-hi); stroke: var(--terr-g0); stroke-width: 2; }
.terr__fig figcaption { margin-top: 4px; color: var(--deck-muted); font-size: 13px; }
/* 실제 예시 사진 — 새 색 없음(--deck-ink·--deck-muted). width/height 속성 + height:auto 라 늦게 받아도 자리가 안 밀린다 */
.terr__photo { margin: 0; }
.terr__photo img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--deck-muted); }
.terr__photo figcaption { margin-top: 6px; color: var(--deck-ink); font-size: 14px; overflow-wrap: anywhere; word-break: keep-all; }
.terr__credit { display: block; margin-top: 2px; color: var(--deck-muted); font-size: 13px; }
.terr__credit a { color: inherit; text-decoration: underline; }
.terr__ln { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.terr__water { fill: currentColor; fill-opacity: .12; }   /* .terr__ln 뒤에 둔다 — 같이 달린 면은 칠한다 */
.terr__land { fill: currentColor; fill-opacity: .32; }
.terr__slow { stroke-dasharray: 5 4; }
.terr__flow { stroke-width: 3; }
.terr__dam { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; }
.terr__t { fill: var(--deck-muted); font-size: 13px; }
.terr__mk circle { fill: var(--deck-hi); }
.terr__mk text { fill: var(--deck-bg); font-size: 14px; font-weight: 700; }
.terr__l { margin: 0; padding-left: 24px; }
.terr__l li::marker { color: var(--deck-hi); font-weight: 700; }
.terr__line { margin: 0; font-size: 15px; word-break: keep-all; }
.terr__chips, .terr__src ul { list-style: none; margin: 0; padding: 0; }
.terr__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.terr__chips a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 1px solid var(--deck-muted); border-radius: 999px; color: var(--deck-ink); text-decoration: none;
}
.terr__chips a:hover { text-decoration: underline; }
.terr__chips a[aria-current] { background: var(--deck-hi); border-color: var(--deck-hi); color: var(--deck-bg); font-weight: 700; }
/* 근거 문서 — 장 밖(페이지 바탕)이라 기본 링크색(--accent) 그대로 */
.terr__src { margin-top: 8px; font-size: 14px; }
.terr__src summary { min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--ink-2); }   /* flex 로 하면 펼침 삼각형이 사라진다 */
.terr__src a { display: flex; align-items: center; min-height: 44px; text-decoration: underline; }

/* ── 즐겨찾기 별(포인트 상세 제목 줄) — 단추 안에 빈 별·찬 별을 둘 다 두고 aria-pressed 로 하나만 보인다.
   JS 는 aria-pressed 만 바꾸면 된다. 색은 .ico 의 --accent 그대로(새 색 없음). */
.i--fill { fill: currentColor; }
.fav { display: inline-flex; margin: 0; }
.fav [aria-pressed="false"] .i--fill, .fav [aria-pressed="true"] .i:not(.i--fill) { display: none; }

/* ── 기상특보 배지(점수 줄 이름 끝, angling/wxwarn.py). 점수와 무관한 별도 표시. 새 색 없음 —
   글자 --crit on --paper 7.0:1(다크 8.3:1 · --surface 위 7.7:1), 테두리는 비텍스트. 늘 '풍랑주의보' 같은 글자가 붙는다.
   포인트 상세는 기존 .warnbar(--crit on --sunken 6.4 / 다크 6.9)를 그대로 쓴다. */
.wxw {
  display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--crit); border-radius: 999px;
  color: var(--crit); font-size: 13px; font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: 1px;
}

/* ── 출조 전 체크리스트 (/learn/checklist/) — 새 색 없음.
   글자 --ink on --paper(17.4 · 다크 15.8), 보조 --muted(6.4 · 다크 6.8), 근거 접기 --ink-2(11.0 · 다크 11.6).
   체크박스는 accent-color --accent(비텍스트 3:1 이상 — 흰 위 5.6 · 다크 8.2). 누르는 칸은 label 전체 44px.
   링크·근거는 label 밖 아래 줄(label 안 링크는 누를 곳이 겹친다). 360px 에서 가로 스크롤 없음 — fieldset min-width:0. */
.ck__g { border: 0; margin: 0 0 32px; padding: 0; min-width: 0; }
.ck__g legend { padding: 0; }
.ck__g legend h2 { margin: 0 0 8px; }
.ck__place { font-size: 16px; margin: 24px 0 4px; color: var(--ink-2); }
.ck__i { border-top: 1px solid var(--line); }
.ck__l { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0 4px; cursor: pointer; word-break: keep-all; }
.ck__l input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); cursor: pointer; }   /* 첫 줄(26px) 가운데 */
.ck__note { display: block; color: var(--muted); font-size: 14px; }
.ck__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; padding-left: 32px; font-size: 14px; }
.ck__more > a { display: inline-flex; align-items: center; min-height: 44px; }
.ck__src summary { min-height: 44px; line-height: 44px; cursor: pointer; color: var(--ink-2); }   /* list-item 그대로 — 펼침 삼각형 */
.ck__src[open] { flex-basis: 100%; }
.ck__src ul { margin: 0 0 8px; padding-left: 16px; }
.ck__src a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.ck__where { display: block; color: var(--muted); margin-top: -8px; padding-bottom: 4px; }
.ck__tools { margin: 0 0 24px; }
.ck__clear {
  min-width: 44px; min-height: 44px; padding: 0; font: inherit; color: var(--ink-2); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px;
}
.ck__clear:hover { background: var(--sunken); }

/* ---------------------------------------------------------------- 그림으로 보기 (카드뉴스, templates/angling/_infocards.html)
   새 색 없음. 카드 바탕 --surface, 제목 --ink(17.4 · 다크 14.5). 줄만 가로로 움직인다(overscroll contain) — 페이지 가로 스크롤 0.
   한 장 폭 80%(넓으면 400px) — 다음 장 가장자리가 보여 옆으로 넘길 수 있다는 것이 보인다. 카드 전체가 링크(큰 그림). */
.icards { margin: 36px 0 24px; }
.icards h2 { margin: 0 0 8px; }
.icards__track {
  list-style: none; margin: 0; padding: 4px 4px 12px; display: flex; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.icards__i { flex: 0 0 min(80%, 400px); scroll-snap-align: start; }
.icards__i a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow);   /* --shadow 는 아래 '면·음영' 구역의 토큰 */
  color: var(--ink); text-decoration: none;
}
.icards__i img { display: block; width: 100%; height: auto; background: var(--sunken); }
.icards__t { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; font-weight: 600; }
.icards__i a:hover .icards__t { text-decoration: underline; }
.afig__card { margin: 0 0 24px; max-width: 720px; }   /* 매거진 본문 속 카드뉴스 한 장([[card:..]]) */
.afig__card img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--sunken); }
.afig__card figcaption { margin-top: 6px; }

/* ---------------------------------------------------------------- 면·음영 (2026-10-10 사용자 지시 — 토스형)
   바탕은 연한 청회색(위쪽은 옅은 파랑 그라데이션), 묶음은 흰 카드 + 부드러운 그림자로 바탕과 갈린다.
   강조는 그대로 주황(주 행동·현재 위치) 하나, 보조 행동(아이콘 단추·찾기)·메뉴 아이콘은 밝은 파랑.
   🔥 맨 끝에 둔다 — 위 구역들의 테두리·회색 면을 여기서 덮는다. 새 색과 대비(WCAG 2.x, 이 구역 작업 때 계산):
   라이트  --bg #f2f4f8 · --bg-top #e6eefc(그라데이션 가장 진한 끝)
             바탕 위 글자  ink 15.8/14.9 · ink-2 10.0/9.4 · muted 5.8/5.5 · accent 5.1/4.8 · blue 4.9/4.6
           --blue #1b64da : 흰 5.4 · --blue-soft(#e8f0fe) 위 4.7   --blue-soft 위 ink-2 9.6 · accent 4.9
   다크    --bg #100d0b(카드 --surface 보다 어둡다)  바탕 위 ink 16.4 · ink-2 12.1 · muted 7.1 · accent 8.6
           --blue #8ab4f8 : surface 8.1 · --blue-soft(#1a2638) 위 7.2   --blue-soft 위 ink-2 9.5 · muted 5.6
   그림자는 비텍스트 장식 — 경계는 바탕과 카드의 밝기 차가 맡고, 다크는 그림자 대신 1px 테두리 고리. */
:root {
  --bg: #f2f4f8; --bg-top: #e6eefc; --card-r: 16px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 20px rgba(30, 64, 175, .07);
  --blue: #1b64da; --blue-soft: #e8f0fe; --blue-soft-2: #d9e6fd;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #100d0b; --bg-top: #17120f;
    --shadow: 0 0 0 1px #2e2520;
    --blue: #8ab4f8; --blue-soft: #1a2638; --blue-soft-2: #22324a;
  }
}
body { background: linear-gradient(180deg, var(--bg-top), var(--bg) 360px) no-repeat var(--bg); }
.top, .band { background: transparent; border-bottom: 0; }
.foot { border-top: 0; }

/* 묶음 = 흰 카드. 줄 목록은 안쪽 여백 16px, 마지막 줄 선은 뺀다(카드 가장자리가 대신한다). */
:is(.list, .facts, .tablewrap, .tt, .rlist, .rocks, .mine, .variants) {
  background: var(--surface); border-radius: var(--card-r); box-shadow: var(--shadow); padding: 4px 16px;
}
:is(.prose, .learn, .cform, .precheck) {
  max-width: none; background: var(--surface); border-radius: var(--card-r); box-shadow: var(--shadow); padding: 20px;
}
.cform { max-width: 600px; }
:is(.list, .tt, .rlist, .rocks, .mine, .variants) > :last-child,
.tablewrap tr:last-child > * { border-bottom: 0; }
/* 카드 안의 묶음은 카드를 겹치지 않는다 */
:is(.prose, .learn, .acard, .precheck, .tday, .cform) :is(.list, .facts, .tablewrap, .tt, .rlist, .rocks, .mine, .variants) {
  background: none; box-shadow: none; border-radius: 0; padding-inline: 0;
}

/* 원래 테두리가 있던 카드 — 테두리 대신 그림자 */
:is(.acard, .lcard, .rigs__card, .cells a, .tday, .scards a, .rcover a, .rcard, .mcard:not(.mcard--prev, .mcard--next) a, .tdays__chip:not([aria-current])) {
  border-color: transparent; box-shadow: var(--shadow);
}
:is(.acard, .lcard, .rigs__card, .tday, .scards a, .rcover a, .rcard, .mcard a) { border-radius: var(--card-r); }
.map { border: 0; border-radius: var(--card-r); box-shadow: var(--shadow); }
.warnbar { background: var(--surface); box-shadow: var(--shadow); border-radius: 0 12px 12px 0; }
.filter a, .search input { background: var(--surface); border-color: var(--line); }

/* 밝은 파랑 — 보조 행동(아이콘 단추·찾기·초기화)과 메뉴 아이콘. 주 행동(.cform__btn)·현재 위치는 주황 그대로. */
.ico { color: var(--blue); background: var(--blue-soft); border-radius: 12px; }
.ico:hover { background: var(--blue-soft-2); }
.acct.ico { color: var(--ink-2); background: none; }
.acct.ico[aria-current="page"] { color: var(--accent); }
.mine__a a.ico { padding: 0; }
.fav .ico { color: var(--accent); background: var(--accent-soft); }   /* 즐겨찾기 별은 주황 그대로(accent-soft 위 4.8) */
:is(.search button, .cwhere__b, .ck__clear) { background: var(--blue-soft); color: var(--blue); border-color: transparent; border-radius: 12px; }
:is(.search button, .cwhere__b, .ck__clear):hover { background: var(--blue-soft-2); }
.cform__btn { border-radius: 12px; }
.mgrid a { background: var(--surface); box-shadow: var(--shadow); border-radius: var(--card-r); }
.mgrid a:hover { background: var(--blue-soft); }
.mgrid svg, .lcard > .i { color: var(--blue); }
/* 홈 월별 카드의 양옆 책갈피 — 밝은 파랑 면, 탭 글자 파랑(ink-2 9.6 · blue 4.7) */
:is(.mcard--prev, .mcard--next) a { background: var(--blue-soft); border-color: transparent; }
.mcard__tab b { color: var(--blue); }

/* 어종 도감 카드(2026-10-11) — 사진·소개·표를 흰 카드 한 장에. 표 머리 칸은 muted(5.8:1), 줄 선은 --line(비텍스트) */
.dogam { background: var(--surface); border-radius: var(--card-r); box-shadow: var(--shadow); padding: 16px; margin: 0 0 24px; }
.dogam .sphoto { margin-bottom: 12px; }
.dogam__intro { margin: 0 0 12px; }
.dogam__t { width: 100%; border-collapse: collapse; }
.dogam__t th, .dogam__t td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.dogam__t th { width: 5.5em; padding-right: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.dogam__t tr:last-child > * { border-bottom: 0; }

/* 지역별 낚시 권역(2026-10-11) — 남한 윤곽(blue-soft 면) 위 번호 점. 점은 accent 면에 흰 숫자(5.6:1, 다크 on-accent 8.2).
   숫자 34 = viewBox 526 이 360px 화면(약 330px)에서 약 21px. 포커스는 점 둘레 고리(:focus-visible). */
.amap { margin: 0 0 16px; background: var(--surface); border-radius: var(--card-r); box-shadow: var(--shadow); padding: 12px; }
.amap svg { display: block; width: 100%; max-width: 480px; height: auto; margin-inline: auto; }
.amap__land { fill: var(--blue-soft-2); }
.amap__hit { fill: transparent; }
.amap__dot { fill: var(--accent); stroke: var(--surface); stroke-width: 4; }
.amap__n { fill: var(--on-accent); font-size: 24px; font-weight: 700; pointer-events: none; }
.amap__pin:hover .amap__dot { fill: var(--blue); }
.amap__pin:focus { outline: none; }
.amap__pin:focus-visible .amap__hit { stroke: var(--blue); stroke-width: 6; }
.areas { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.area { background: var(--surface); border-radius: var(--card-r); box-shadow: var(--shadow); padding: 16px; scroll-margin-top: 72px; }
.area .area__t, .amodal .area__t { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 18px; }
/* 권역 번호 원은 권역 제목(.area__t) 안에서만 — 물때 목록 제목의 '42곳'(.area__n, 위 680줄)이 원으로 그려져 아래로 처졌다(2026-10-14) */
.area__t .area__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 14px; flex: none; }
.area p { margin: 0 0 8px; }
.area__f { margin: 0 0 8px; }
.area__f div { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.area__f dt { color: var(--muted); font-weight: 600; }
.area__f dd { margin: 0; }
.area__a { margin: 12px 0 0; }
.amodal { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 0; border: 0; border-radius: var(--card-r);
  background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px rgba(15, 23, 42, .25); }
.amodal::backdrop { background: rgba(15, 23, 42, .45); }
.amodal__body { padding: 20px 20px 0; }
.amodal__body .area__a .cform__btn { width: 100%; }
.amodal form { padding: 12px 20px 20px; }
.amodal__x { width: 100%; min-height: 44px; border: 0; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; }
.amodal__x:hover { background: var(--blue-soft-2); }

/* 출처·라이선스(2026-10-11) — 메뉴별 한 줄씩. 작은 글씨는 muted(5.8:1) */
.credits { list-style: none; padding: 4px 16px; margin: 0 0 16px; background: var(--surface); border-radius: var(--card-r); box-shadow: var(--shadow); }
.credits li { padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.credits li:last-child { border-bottom: 0; }
.credits__d, .credits__s { display: block; margin-top: 4px; }
.credits__s { color: var(--muted); font-size: 14px; }

/* 하단 탭바 — 바닥에서 띄운 둥근 판 */
@media (max-width: 720px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .tabbar {
    left: 12px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); padding-bottom: 0;
    border-top: 0; border-radius: 24px; box-shadow: 0 6px 24px rgba(15, 23, 42, .14), 0 0 0 1px var(--line);
  }
}