:root, :root[data-theme="dark"]{
  --bg:#0f1115; --card:#1c1e24; --card2:#23262e; --line:#2a2e37;
  --tx:#e6e6e6; --dim:#8b93a1;
  --sky:#87ceeb; --green:#4caf50; --magenta:#c2185b;
  --amber:#ffa726; --cyan:#00d4ff; --lime:#00ff9d;
  --hi:#ff8a80; --lo:#82b1ff; --sat:#64b5f6; --sun:#f48fb1;
  --g-blue:#03a9f4; --g-green:#43a047; --g-yellow:#fdd835; --g-red:#e53935; --g-track:#3a3f4a;
  --needle:#ffffff; --needle-stroke:#0f1115;
  --chart-tick:#8b93a1; --chart-grid:rgba(255,255,255,.07);
  --sunicon:#ffd54f; --wicon:#b0bec5; --shadow:none;
  --wx-rain:#4fc3f7; --wx-snow:#e3f2fd; --wx-bolt:#ffd54f;
  /* 구름 그림 **위에** 얹는 강수량 글자. --wx-rain(#4fc3f7)을 그대로 쓰면
     구름(#b0bec5)과 명암비가 1.05:1 이라 통째로 묻힌다. 같은 파란색 계열에서
     구름보다 충분히 어두운 쪽으로 내린 값이다(#01579b, 구름 위 3.9:1).
     테두리는 반대로 밝게 — 글자가 구름 밖으로 나가도 카드 위에서 읽힌다. */
  --wx-rain-ink:#01579b; --wx-rain-halo:rgba(255,255,255,.9);
  --ok-bg:#1a3a2a; --ok-tx:#66bb6a; --warn-bg:#3a2a0a; --warn-tx:#ffb74d;
  --err-bg:#3a0a0a; --err-tx:#ff7043;
  --stat-blue:#42a5f5; --stat-green:#66bb6a; --stat-red:#ef5350; --grade-good:#4fc3f7;
  --cur-bg:#0a0e1a; --cur-line:#1e2d4a; --cur-label:#4a6080; --cur-track:#16203a;
  /* 조석 진행 게이지 (다크) */
  --tp-plate:#2f3641; --tp-major:#f0f2f6; --tp-minor:#8d95a3; --tp-ring:#737b89;
  --tp-label:#f7f9fc; --tp-pct:#aab3c0; --tp-cap1:#697384; --tp-cap2:#3c4450;
  --tp-band-lo:rgba(0,150,250,.26); --tp-band-hi:rgba(0,150,250,.66);
}
:root[data-theme="light"]{
  --bg:#eceff3; --card:#ffffff; --card2:#f3f6fa; --line:#dde3ea;
  --tx:#1e2430; --dim:#68727f;
  --sky:#0b6ea8; --green:#2e7d32; --magenta:#ad1457;
  --amber:#e07b00; --cyan:#0277bd; --lime:#00875a;
  --hi:#d84315; --lo:#1565c0; --sat:#1565c0; --sun:#c2185b;
  --g-blue:#039be5; --g-green:#43a047; --g-yellow:#f9c000; --g-red:#e53935; --g-track:#dde2e9;
  --needle:#2b3240; --needle-stroke:#ffffff;
  --chart-tick:#68727f; --chart-grid:rgba(0,0,0,.09);
  --sunicon:#f0a000; --wicon:#78909c; --shadow:0 1px 3px rgba(20,30,50,.10);
  --wx-rain:#0277bd; --wx-snow:#4fc3f7; --wx-bolt:#f0a000;
  /* 라이트 모드 구름은 #78909c 로 어둡다 — 같은 파란색 계열에서 반대로
     밝은 쪽을 골라 뒤집는다(#b3e5fc, 구름 위 3.5:1). 테두리도 어둡게. */
  --wx-rain-ink:#b3e5fc; --wx-rain-halo:rgba(0,0,0,.7);
  --ok-bg:#e3f4e7; --ok-tx:#2e7d32; --warn-bg:#fdf1dc; --warn-tx:#b26a00;
  --err-bg:#fdeaea; --err-tx:#c62828;
  --stat-blue:#1565c0; --stat-green:#2e7d32; --stat-red:#c62828; --grade-good:#0277bd;
  --cur-bg:#ffffff; --cur-line:#dde3ea; --cur-label:#68727f; --cur-track:#e6ebf2;
  /* 조석 진행 게이지 (라이트) — 기존 흰 문자판 그대로 */
  --tp-plate:#fdfdfd; --tp-major:#1a1a1a; --tp-minor:#7a7a7a; --tp-ring:#6f6f6f;
  --tp-label:#111111; --tp-pct:#5f5f5f; --tp-cap1:#ffffff; --tp-cap2:#dcdcdc;
  --tp-band-lo:rgba(0,150,250,.25); --tp-band-hi:rgba(0,150,250,.75);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);
  font-family:"Noto Sans KR",system-ui,-apple-system,sans-serif;font-size:12.5px;line-height:1.32}
a{color:inherit;text-decoration:none}
.dim{color:var(--dim)} .small{font-size:11px}
.c-blue{color:var(--stat-blue)} .c-green{color:var(--stat-green)}
.c-red{color:var(--stat-red)} .amber{color:var(--amber)}
.ms{font-family:"Material Symbols Outlined";font-weight:400;font-style:normal;
  font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}

/* ── 레이아웃 ───────────────────────────── */
/* 4단 균등폭 — 각 컬럼의 카드는 컬럼 폭을 꽉 채운다 */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;padding:10px;align-items:start;max-width:2100px;margin:0 auto}
.col>.card,.col>.gauge-row,.col>.hstack,.col>.toolbar{width:100%}
.col{display:flex;flex-direction:column;gap:10px;min-width:0}
.hstack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
/* 게이지를 넓게, 조석예보 칸은 좁게 */
.hstack.tide-row{grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:8px}
.card{background:var(--card);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}

/* ── 상단 버튼 바 (통계 / 모드) ─────────── */
.toolbar{display:flex;gap:8px}
.tbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--card);color:var(--tx);border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;
  cursor:pointer;box-shadow:var(--shadow);transition:background .15s,border-color .15s}
.tbtn{white-space:nowrap}
@media(max-width:1500px){.toolbar .tbtn{font-size:12px;padding:8px 6px;gap:4px}
  .toolbar .tbtn .ms{font-size:16px}}
.tbtn:hover{border-color:var(--sky)}
.tbtn.back{color:var(--sky)}
.tbtn.back:hover{background:var(--card2)}
.tbtn .ms{font-size:18px;color:var(--sky)}
.stats-nav .tbtn{flex:0 0 auto;padding:4px 12px;font-size:12px;border-radius:999px}
.stats-nav .tbtn .ms{font-size:15px}
.card-title{font-size:15px;margin-bottom:8px}
/* 카드 제목 통일 — 크기·굵기는 전곡 마리나 조위, 색은 해무 예보 */
.card-title.uni{font-size:17px;font-weight:700;color:var(--sky)}
.md-title{text-align:center;color:var(--sky);font-size:17px;font-weight:700;margin:2px 0 10px}
.md-title.strong{font-weight:700}
.md-title i{font-style:normal;font-size:11px;color:var(--dim)}

/* ── 보트 사진 ──────────────────────────── */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px}
.photos a,.photos .nolink{position:relative;display:block;border-radius:8px;
  overflow:hidden;aspect-ratio:1;background:#000}
.photos .nolink{cursor:default}
.photos img{width:100%;height:100%;object-fit:cover;display:block}
.photos span{position:absolute;left:0;right:0;bottom:0;font-size:10px;text-align:center;
  color:#fff;
  background:rgba(0,0,0,.55);padding:2px}

/* ── weather-forecast 카드 ──────────────── */
.wf-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.wf-l{display:flex;align-items:center;gap:10px}
.wf-l .wi{font-size:34px;color:var(--sunicon)}
.wf-l b{display:block;font-size:17px;font-weight:500}
.wf-l span{display:block;font-size:11px}
.wf-r{text-align:right}
.wf-r b{display:block;font-size:22px;font-weight:500}
.wf-r span{font-size:11px}
.wf-hours{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  border-top:1px solid var(--line);padding-top:8px;text-align:center}
.wf-hours .t{display:block;font-size:10px;color:var(--dim)}
.wf-hours .wi{font-size:22px;color:var(--wicon);margin:3px 0}
.wf-hours .v{display:block;font-size:12px}

/* ── entities 카드 (야외 활동 지표) ─────── */
.ent>div{display:flex;align-items:center;gap:10px;padding:5px 0}
.ent .ms{font-size:20px;color:var(--dim);flex:0 0 22px}
.ent .n{flex:1;font-size:13px}
.ent .v{font-size:13px;color:var(--dim)}
.ent .v.g-좋음{color:var(--grade-good)} .ent .v.g-보통{color:var(--stat-green)}
.ent .v.g-나쁨{color:var(--amber)} .ent .v.g-매우나쁨{color:var(--stat-red)}

/* ── 해무 예보 ─────────────────────────── */
.fog{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.fog-cell{background:var(--card2);border-radius:8px;padding:10px 4px}
.fog-cell .t{display:block;font-size:12px}
.fog-cell .p{display:block;font-size:14px;margin-top:4px}

/* ── 수문방류 공지 ─────────────────────── */
.notice-head{font-size:12px;border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:6px}
.notice{list-style:none;font-size:12.5px}
.notice li{padding:2.5px 0}

/* ── 전곡항 weather-chart-card ──────────── */
.wc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.wc-left{min-width:0}
/* 제목 옆 일출·일몰 두 줄 */
.wc-title{display:flex;align-items:center;gap:10px}
/* 제목 색은 다른 카드 제목과 같게 (.md-title / .card-title.uni 와 동일) */
.wc-name{font-size:20px;color:var(--sky)}
/* 제목에서 네 글자쯤 띄운다 */
.wc-sun{display:flex;flex-direction:column;line-height:1.35;
  font-size:10.5px;color:var(--dim);margin-left:4em}
.wc-sun span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.wc-sun .ms{font-size:13px;color:var(--sunicon)}
.wc-when{text-align:right;line-height:1.25}
.wc-when b{display:block;font-size:20px;font-weight:500}
.wc-when span{display:block;font-size:11px;color:var(--dim)}
/* 제목 줄과 살짝 띄운다(2px 은 너무 붙어 보였다). 아래 .wc-attrs 와는 6px. */
.wc-cur{display:flex;align-items:center;gap:10px;margin:8px 0 0}
.wc-top+.wc-attrs{margin-top:6px}
.wc-lunar{color:var(--dim)}
.wc-cur .wi{font-size:40px;color:var(--sunicon)}
.wc-cur b{font-size:30px;font-weight:500}
.wc-cur b i{font-style:normal;font-size:14px;color:var(--dim)}
.wc-cur>span{font-size:13px;color:var(--dim)}
.wc-attrs{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--tx);margin-bottom:6px}
.wc-attrs span{display:inline-flex;align-items:center;gap:5px}
.wc-attrs .ms{font-size:16px;color:var(--sunicon)}
/* 미세먼지 줄과 주간 기온 그래프 사이를 띄운다 — 붙어 있으면 요일 눈금이
   미세먼지 줄에 딸린 것처럼 보인다. */
.wc-chart{width:100%;margin-top:22px}
.wc-chart svg{width:100%;height:150px;display:block;overflow:visible}
/* 전곡항 카드의 "met.no · 갱신" 줄은 2026-09-18 삭제. 남아 있던 .wc-foot 규칙도
   같이 지운다 — /wind-compare 쪽에서 같은 이름을 쓰고 있어 헷갈린다. */

/* ── 게이지 (HA gauge card) ─────────────── */
.gauge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gauge-card{padding:10px 8px 8px;text-align:center}
.gauge svg{width:100%;height:auto;display:block}
.gauge .g-val{font-size:16px;font-weight:700;fill:var(--tx)}
.gauge .g-unit{font-size:8px;fill:var(--dim)}
/* 돌풍 — 조류현황의 조류강도와 같은 모양(작은 회색 라벨 + Orbitron 주황 숫자) */
.gauge .g-sub-l{font-size:8px;letter-spacing:1px;fill:var(--dim)}
.gauge .g-sub-v{font-family:"Orbitron",monospace;font-size:11px;font-weight:700;fill:var(--amber)}
.gauge-name{font-size:12px;color:var(--dim);margin-top:2px}
.gauge-name span{color:var(--cyan)}

/* ── 조석 진행 게이지 ──────────────────── */
.tp-card{padding:10px 8px 6px;text-align:center}
.tp-wrap{display:flex;justify-content:center}
#tide-phase{max-width:100%;height:auto}
.tp-card .gauge-name{font-size:16px;color:var(--tx);margin-top:4px}

/* ── 조석예보 glance ───────────────────── */
.glance-card{padding:8px 10px;display:flex;flex-direction:column}
.glance-card .card-title{font-size:17px;font-weight:700;margin-bottom:.585em;color:var(--sky)}
.glance{display:grid;grid-template-columns:auto 1fr auto;gap:10px 5px;padding-left:1em;align-items:center;
  font-size:12.5px;line-height:1.1;flex:1;align-content:start}
.glance i{font-style:normal;color:var(--dim);font-size:.8em}
.glance>span{white-space:nowrap}
.glance>span:nth-child(3n+1),.glance>span:nth-child(3n+2){font-size:1.08em}
.glance>span:nth-child(3n+1){text-align:left}
.glance>span:nth-child(3n+2){text-align:center}
.glance>span:nth-child(3n){text-align:right;color:var(--dim);font-size:.7em}
.glance>span.ph{text-align:center;font-size:1em;color:var(--dim)}
.glance .hi{color:var(--hi)} .glance .lo{color:var(--lo)}

/* ── 조위 ──────────────────────────────── */
.lvl-stats{display:flex;justify-content:space-around;gap:6px;margin-bottom:4px}
.lvl-stats>span{display:flex;flex-direction:column;align-items:center;min-width:0}   /* 값 안쪽 span 은 제외 */
.lvl-stats b{font-size:19px;font-weight:600;white-space:nowrap}
.lvl-stats b em{font-style:normal;font-size:10px;margin-left:1px}
.lvl-stats i{font-style:normal;font-size:9.5px;color:var(--dim);white-space:nowrap}
.chart-box{position:relative;height:210px;margin-top:6px}

/* ── 조류현황 ──────────────────────────── */
.cur-card{background:var(--cur-bg);border:1px solid var(--cur-line)}
.cur-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0}
.cur-title{color:var(--sky);font-weight:700;font-size:17px}   /* 다른 카드 제목과 통일 */
#current-gauge{width:100%;height:auto;display:block}
.cur-row{display:flex;align-items:center;justify-content:center;margin-top:4px}
.cur-row>div{flex:1;text-align:center}
.cur-row .sep{flex:0 0 1px;height:34px;background:var(--cur-line)}
.cur-row .l{display:block;font-size:10px;color:var(--cur-label);letter-spacing:1.5px;margin-bottom:3px}
.cur-row .v{font-family:"Orbitron",monospace;font-size:24px;font-weight:700;color:var(--lime)}
.cur-row .v.amber{color:var(--amber)}   /* 조류강도 — 게이지 최대유속 삼각형과 같은 색 */
.cur-row .v i{font-style:normal;font-size:12px;color:var(--cur-label);margin-left:1px}

/* ── 공통 표 (풍속파고 / 입출항) ───────── */
.grid-table{width:100%;border-collapse:collapse;font-size:12px;text-align:center}
.grid-table th{color:var(--green);font-weight:700;font-size:14px;padding:5px 4px;
  background:var(--card2);border:1px solid var(--card)}
.grid-table th em{font-style:normal;color:var(--magenta)}
.grid-table td{padding:6px 4px;background:var(--card2);border:1px solid var(--card);
  vertical-align:middle}
.grid-table .c-day b{display:block;font-size:13px;margin-bottom:3px}   /* 날짜와 물때 사이 */
.grid-table .c-day .wt{display:block;font-size:13px;color:var(--tx)}
.grid-table .c-day .cs{display:block;font-size:11px;color:var(--cyan)}
.grid-table .c-day.sat b{color:var(--sat)} .grid-table .c-day.sun b{color:var(--sun)}
.grid-table .sky{color:var(--tx);margin-bottom:1px}
.grid-table td div{font-size:12.5px;white-space:nowrap}
.pb .c-ev div{color:var(--tx)}
.pb .c-pb div{color:var(--amber);font-weight:700}

/* ── 방문 통계 ─────────────────────────── */
.stats-page{max-width:1200px;margin:0 auto}
.stats-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:10px;flex-wrap:wrap;margin-bottom:12px}
.stats-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.stats-nav a,.stats-nav .tbtn{white-space:nowrap}   /* 좁은 화면에서 글자가 쪼개지지 않게 */
.stats-nav a{padding:4px 12px;border-radius:999px;background:var(--card2);
  font-size:12px;color:var(--dim)}
.stats-nav a.on{background:#1e5fa8;color:#fff}
.stats-nav a.back{background:var(--card2);border:1px solid var(--amber);
  color:var(--amber);font-weight:700}   /* 전체보기 단추와 같은 색·테두리 */
.stats-nav a.back:hover{background:var(--amber);color:var(--card)}
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stat-tiles>div{background:var(--card2);border-radius:10px;padding:12px;text-align:center}
.stat-tiles .l{display:block;font-size:11px;color:var(--dim);margin-bottom:4px}
.stat-tiles .v{font-family:"Orbitron",monospace;font-size:26px;font-weight:700}
.stats-chart{position:relative;height:260px}
.stats-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats-scroll{max-height:340px;overflow:auto}
.stat-table{width:100%;border-collapse:collapse;font-size:12px}
.stat-table th{position:sticky;top:0;background:var(--card);color:var(--dim);
  font-weight:500;text-align:right;padding:6px 8px;border-bottom:1px solid var(--line)}
.stat-table th:first-child{text-align:left}
.stat-table td{padding:5px 8px;text-align:right;border-bottom:1px solid var(--card2)}
.stat-table td:first-child{text-align:left}
.stat-table tr.zero td{color:var(--dim)}
.stat-table .pathcell{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}

/* ── 1년치 조석 페이지 ─────────────────── */
.mini-btn{display:inline-block;margin-left:8px;padding:4px 13px;border-radius:999px;
  background:var(--card2);border:1px solid var(--amber);color:var(--amber);
  font-size:11px;font-weight:700;vertical-align:middle;cursor:pointer}
.mini-btn:hover{background:var(--amber);color:var(--card)}
.tides-page{gap:8px}
.tides-top{position:sticky;top:0;z-index:5}
.month-nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.month-nav a{padding:4px 11px;border-radius:999px;background:var(--card2);
  font-size:12px;color:var(--dim)}
.month-nav a.on{background:#1e5fa8;color:#fff}
.month-nav a:hover{color:var(--sky)}
/* 1년치 머리 — 제목은 가운데, 이동 단추는 오른쪽 */
.tides-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.tides-head .tides-title{grid-column:2;margin:0;font-weight:500}
.tides-head .tides-title .yr{font-weight:800;font-size:1.25em;margin-right:.15em}
.tides-head .stats-nav{grid-column:3;justify-content:flex-end}
@media(max-width:760px){
  .tides-head{grid-template-columns:1fr}
  .tides-head .tides-title,.tides-head .stats-nav{grid-column:1}
  .tides-head .stats-nav{justify-content:center}
}
.build-note{text-align:center;padding:26px 16px}
.build-note p{margin:4px 0}

/* 12개월 한 화면 그리드 */
/* 최대폭을 310px 로 묶어두니 넓은 화면에서 좌우가 크게 비고 위 머리말
   카드와 폭이 어긋났다. 남는 폭을 칼럼들이 나눠 갖게 한다. */
.year-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));
  gap:9px;align-items:start}
/* 12개월 표가 365행·1,095칸이라, 가로 폭이 바뀌면 12개 표 전체를 다시
   계산하고 그리느라 창을 끌 때 멈춘다(세로는 폭이 안 변해 영향 없음).
   화면 밖 월은 통째로 건너뛰게 한다. auto 를 붙이면 한 번 그린 뒤에는
   실제 높이를 기억해 스크롤 위치도 어긋나지 않는다. */
.month-card{padding:6px 5px 4px;
  content-visibility:auto; contain-intrinsic-size:auto 1750px}
.month-name{text-align:center;color:var(--sky);font-size:15px;font-weight:700;margin-bottom:4px}
/* 365행이라 글자는 키우고 여백은 최소로. 날짜 칸 = 날짜·요일 / 물때 / 조류세기 */
.year-table{font-size:13px;table-layout:fixed}
.year-table th{font-size:14px;padding:3px 2px;line-height:1.15}
.year-table th:nth-child(1){width:18%} .year-table th:nth-child(2){width:55%}
.year-table th:nth-child(3){width:27%}
.year-table td{padding:2px;vertical-align:middle;line-height:1.2}
.year-table .c-day{white-space:nowrap}
.year-table .c-day b{font-size:15px}
.year-table .c-day b .wd{font-weight:400;font-size:12px;margin-left:2px}
.year-table .c-day .wt{font-size:12.5px}
.year-table .c-day .cs{font-size:12px}
.year-table .c-ev{font-size:13px;white-space:nowrap}
.year-table .c-ev span{margin-right:3px}
.year-table .c-ev i{font-style:normal;color:var(--dim);font-size:11.5px}
.year-table .c-ev .hi{color:var(--hi)} .year-table .c-ev .lo{color:var(--lo)}
.year-table .c-pb{font-size:13px;color:var(--amber);white-space:nowrap}
.year-table tr.istoday td{outline:2px solid var(--sky);outline-offset:-2px}

/* ── 보트 상세 ─────────────────────────── */
.col.wide{grid-column:1/-1}
/* 전폭 단일 페이지(1년치·통계·로그인·배 소개)는 대시보드의 멀티칼럼 흐름을 쓰지 않는다.
   그대로 두면 310px 칼럼 하나에 갇혔다가 1500px 를 넘는 순간 통째로 튀어나온다. */
.board.plain{display:block;columns:auto;column-gap:0}
.boat-expired{background:var(--warn-bg);color:var(--warn-tx);border-radius:8px;
  padding:8px 12px;font-size:13px;margin:0 0 10px}
.boat-expired a{color:inherit;font-weight:700;text-decoration:underline}
.boat-hero{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.boat-hero img{width:180px;height:130px;object-fit:cover;border-radius:10px}
.section-title{font-size:12px;color:var(--dim);margin:14px 0 8px;border-bottom:1px solid var(--line);padding-bottom:4px}
.bcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.bcard{background:var(--card2);border-radius:10px;padding:12px;text-align:center}
.bcard .l{display:block;font-size:11px;color:var(--dim)}
.bcard .v{display:block;font-family:"Orbitron",monospace;font-size:24px;font-weight:700;color:var(--cyan)}
.bcard .v.small{font-size:13px}
.bcard .u{font-size:10px;color:var(--dim)}
.diag{display:flex;flex-direction:column;gap:6px}
.diag>div{border-radius:6px;padding:8px 12px;font-size:13px}
.diag .d-ok{background:var(--ok-bg);color:var(--ok-tx)}
.diag .d-warn{background:var(--warn-bg);color:var(--warn-tx)}
.diag .d-error{background:var(--err-bg);color:var(--err-tx)}

@media(max-width:1500px){
  /* 그리드로 두면 행 높이가 가장 큰 칼럼에 맞춰져 빈 공간이 크게 생긴다.
     멀티칼럼으로 바꿔 카드 묶음이 위로 촘촘히 채워지게 한다. */
  /* 개수 고정이 아니라 폭 기준 — 화면이 허용하는 만큼 칼럼이 늘어난다 */
  /* 카드 묶음(.col) 통째로 break-inside:avoid 를 걸면, 칼럼 높이를 맞추려고
     거대한 덩어리 4개를 놓고 이분탐색을 돌아 레이아웃 1회에 ~500ms 가 든다.
     (마우스로 창 크기를 끌면 그대로 멈춘다.) 카드 단위로 쪼개면 ~17ms. */
  .board{display:block;columns:310px;column-gap:10px}
  .board:not(.plain)>.col{display:block;margin:0}   /* plain 페이지는 건드리지 않는다 */
  .board:not(.plain)>.col>*{break-inside:avoid;margin:0 0 10px}
}
@media(max-width:900px){
  .hstack:not(.tide-row){grid-template-columns:1fr}
  .tide-row .glance{font-size:14px}
  .tide-row .gauge-name{font-size:13px}
  .gauge-row{grid-template-columns:repeat(3,1fr)}
  .stats-two{grid-template-columns:1fr}
}

/* ── 날씨 아이콘 애니메이션 ──────────────── */
.wi{display:inline-block;line-height:0}
.wi .wx{display:block;overflow:visible}
@keyframes wx-spin{to{transform:rotate(360deg)}}
@keyframes wx-drift{0%,100%{transform:translateX(-1px)}50%{transform:translateX(1px)}}
@keyframes wx-fall{0%{transform:translateY(-4px);opacity:0}
  20%{opacity:1}80%{opacity:1}100%{transform:translateY(5px);opacity:0}}
@keyframes wx-snowfall{0%{transform:translateY(-4px) rotate(0deg);opacity:0}
  20%{opacity:1}80%{opacity:1}100%{transform:translateY(5px) rotate(120deg);opacity:0}}
@keyframes wx-flash{0%,86%,100%{opacity:1}90%{opacity:.2}94%{opacity:1}97%{opacity:.35}}
.wx-rays{animation:wx-spin 26s linear infinite}
.wx-cloud{animation:wx-drift 5s ease-in-out infinite}
.wx-drop{animation:wx-fall 1.5s linear infinite}
.wx-flake{animation:wx-snowfall 2.6s linear infinite}
.wx-drop.d1,.wx-flake.d1{animation-delay:.5s}
.wx-drop.d2,.wx-flake.d2{animation-delay:1s}
.wx-bolt{animation:wx-flash 3s linear infinite}
.wx-fog{animation:wx-drift 4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.wi *{animation:none!important}}

/* ── 관리자 로그인 ──────────────── */
.login-page{max-width:420px;margin:40px auto}
.login-card{padding:22px 20px;text-align:center}
.login-note{margin:2px 0 14px}
.login-form{display:flex;flex-direction:column;gap:10px;margin:0 0 12px}
.login-form input{background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;color:var(--tx);font:inherit;font-size:15px}
.login-form input:focus{outline:none;border-color:var(--sky)}
.login-form button{background:#1e5fa8;border:0;border-radius:10px;padding:11px 12px;
  color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.login-form button:hover{background:#2a72c4}
.login-error{color:var(--hi);font-size:13px;margin:0 0 12px}
.login-card code{background:var(--card2);padding:1px 5px;border-radius:4px;font-size:12px}

/* ── 지난 기록 페이지 ── */
.hist-picks{display:flex;flex-direction:column;gap:6px;margin:10px 0 12px}
.hist-row{display:flex;flex-wrap:wrap;gap:6px}
.hist-btn{background:var(--card2);border:1px solid var(--line);color:var(--dim);
  border-radius:7px;padding:4px 11px;font-size:12px;font-family:inherit;cursor:pointer}
.hist-btn:hover{color:var(--fg)}
.hist-btn.on{border-color:var(--sky);color:var(--sky);font-weight:700}
.hist-chart{position:relative;height:340px}
.hist-note{margin-top:8px;font-size:12px;color:var(--dim);text-align:center}
.hist-dates{align-items:center;gap:8px}
.hist-dates label{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--dim)}
.hist-dates input[type=date]{background:var(--card2);border:1px solid var(--line);color:var(--fg);
  border-radius:7px;padding:4px 8px;font-size:12px;font-family:inherit;color-scheme:dark light}
.hist-btn.go{border-color:var(--sky);color:var(--sky);font-weight:700}
.hist-quick{display:inline-flex;gap:5px;margin-left:auto}

/* 풍속 및 파고 예보 표의 날씨 아이콘 */
.grid-table .sky .wi{font-size:24px;color:var(--wicon)}
.grid-table .sky{line-height:1;margin-bottom:2px}

/* 풍속 및 파고 예보 표만 세로를 줄인다.
   .pb 가 붙은 조석·입출항 표는 건드리지 않는다.
   날짜(.c-day)와 제목 글자 크기는 그대로 둔다 — 셀 안쪽 여백과
   오전/오후 칸의 글씨·아이콘만 줄인다. */
.grid-table:not(.pb) td{padding:3px 4px}
.grid-table:not(.pb) td div{font-size:11.5px;line-height:1.25}
.grid-table:not(.pb) .sky{margin-bottom:0;line-height:1}
.grid-table:not(.pb) .sky .wi{font-size:19px}

/* 해무 예보 — 글자 크기는 그대로 두고 칸 안쪽 여백만 줄여 세로를 낮춘다 */
.fog{gap:6px}
.fog-cell{padding:5px 4px}
.fog-cell .t{line-height:1.2}
.fog-cell .p{margin-top:1px;line-height:1.15}

/* 해무 예보를 조석예보 카드 아래쪽 남는 공간에 넣는다.
   카드 폭이 168px 남짓이라 3칸이 들어가도록 촘촘하게 잡는다. */
.glance-card .fog-in{margin-top:auto;padding-top:6px;border-top:1px solid var(--line)}
.glance-card .fog-in-t{font-size:11px;color:var(--dim);text-align:center;margin-bottom:4px}
.glance-card .fog{gap:4px}
.glance-card .fog-cell{padding:3px 2px;border-radius:6px}
.glance-card .fog-cell .t{font-size:10.5px;line-height:1.2}
.glance-card .fog-cell .p{font-size:12px;margin-top:0;line-height:1.2}
.glance-card .fog-cell{padding:3px 1px}
.glance-card .fog-cell .t,.glance-card .fog-cell .p{white-space:nowrap}

/* 해무 예보를 조석예보처럼 세로 줄 배치로 (3열 격자 해제) */
.glance-card .fog{display:block;gap:0}
.glance-card .fog-cell{display:flex;justify-content:space-between;align-items:baseline;
  background:none;border-radius:0;padding:3px 0 3px 1em}
.glance-card .fog-cell .t{display:inline;font-size:1.08em;line-height:1.2;white-space:nowrap}
.glance-card .fog-cell .p{display:inline;font-size:1.08em;line-height:1.2;margin:0;white-space:nowrap}

/* 조석예보 카드: 조석예보 + 해무예보 묶음을 세로 가운데로 */
.glance-card{justify-content:center}
.glance-card .fog-in{margin-top:0;padding-top:0;border-top:none}
/* '해무 예보' 는 '조석예보' 와 같은 제목 형식. 위 줄과 간격을 둔다 */
.glance-card .fog-in-t{font-size:17px;font-weight:700;color:var(--sky);
  text-align:left;margin:18px 0 .585em}

/* 해무 예보 내용을 조석 예보(저조/고조)와 같은 글자 크기로.
   .glance 는 기준 14px 에 1.08em → 15.12px 이므로 기준을 맞춘다. */
.glance-card .fog{font-size:14px}
.glance-card .fog-cell .t,.glance-card .fog-cell .p{font-size:1.08em}
/* 카드 위쪽 빈칸 축소 */
.glance-card{padding-top:4px}
.glance-card .card-title{margin-bottom:.45em}
/* 해무 예보 내용: 두 칸 모두 큰 글씨라 줄이 무거워 보인다.
   조석 예보 줄(오른쪽 칸이 작아 가볍다)과 무게를 맞추려 한 단계 줄인다. */
.glance-card .fog-cell .t,.glance-card .fog-cell .p{font-size:13.5px}
/* 해무 예보 내용 30% 축소 (13.5px -> 9.5px). 조석 예보의 '348 cm'(9.8px) 와 비슷한 무게 */
.glance-card .fog-cell .t,.glance-card .fog-cell .p{font-size:9.5px}
/* 조석 예보(저조·고조 / 시각) 와 해무 예보(시각 / %) 네 가지를 13px 로 통일 */
.glance-card .glance>span:nth-child(3n+1),
.glance-card .glance>span:nth-child(3n+2){font-size:13px}
.glance-card .fog-cell .t,.glance-card .fog-cell .p{font-size:13px}

/* 카드 위아래 여백을 대칭으로 되돌려 진짜 수직 가운데가 되게 한다
   (앞서 위만 4px 로 줄여 두어 아래로 치우쳐 있었다) */
.glance-card{padding:8px 10px;justify-content:center}

/* 해무 예보: '18시 :  0 %' 처럼 붙여 쓴다.
   display:contents 로 두 칸을 바깥 격자에 직접 넣어 콜론이 세로로 맞는다. */
.glance-card .fog{display:grid;grid-template-columns:auto auto;
  justify-content:center;column-gap:8px;row-gap:3px}
.glance-card .fog-cell{display:contents}
.glance-card .fog-cell .t{text-align:right}
.glance-card .fog-cell .t::after{content:" :"}
.glance-card .fog-cell .p{text-align:left}
/* 조석 예보 카드: 가운데 정렬 대신 위로 붙인다.
   옆 게이지 카드 높이에 맞춰 늘어날 때 남는 공간은 아래로 몰아,
   '조석 예보' 위에 빈칸이 생기지 않게 한다. */
.glance-card{justify-content:flex-start}
/* 제목 한 단계 축소 + 카드 위 여백 최소화 */
.glance-card .card-title,.glance-card .fog-in-t{font-size:15px}
.glance-card{padding-top:2px}
/* 조석 예보 카드는 flex 세로 정렬을 쓰지 않는다.
   flex + justify-content 조합이 화면 폭에 따라 남는 공간을 위로 몰아
   제목이 아래로 밀리는 일이 있었다. block 이면 항상 맨 위에서 시작한다. */
.glance-card{display:block}
/* 인라인 marginTop(자바스크립트)이 사라졌으므로 이제 세로 가운데 정렬이 제대로 먹는다 */
.glance-card{display:flex;flex-direction:column;justify-content:center;padding:8px 10px}


/* 눌러서 지난 기록으로 넘어가는 카드 (조류현황·풍도 수온/풍속/파고) — 2026-09-09
   누르기 전에는 아무 표시도 하지 않는다: 테두리도 커서도 그대로 둔다. */

/* 바람 모델 비교 페이지 (/wind-compare) — 2026-09-18
   표는 장식이 아니다: 라이트 모드에서 계통색 하나가 대비 3:1 에 못 미쳐,
   색만으로 구분되지 않도록 같은 값을 글자로도 읽을 수 있어야 한다. */
.mc-lab{font-size:12px;color:var(--dim);align-self:center;margin-right:2px}
#lead-row{display:inline-flex;flex-wrap:wrap;gap:6px}
.mc-table{margin-top:12px;font-size:12px}
.mc-table th{color:var(--dim);font-weight:600;font-size:11px}
.mc-table td:nth-child(2),.mc-table td:nth-child(3),.mc-table td:nth-child(4)
  {text-align:right;font-variant-numeric:tabular-nums}
.mc-table tr.mc-on td{color:var(--tx)}
.mc-table tr:not(.mc-on) td{color:var(--dim)}
.mc-dot{display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:6px;vertical-align:baseline}
.mc-table tr:not(.mc-on) .mc-dot{opacity:.35}
.mc-tog{padding:1px 8px;font-size:11px}
.mc-foot{margin:12px 2px 0;font-size:11.5px;line-height:1.7;color:var(--dim)}
.mc-foot b{color:var(--tx);font-weight:600}

/* 입파도 기상 그래프 카드 (Open-Meteo GFS) — 2026-09-18
   풍속·돌풍은 한 그래프, 기온은 단위가 달라 따로. 축 두 개를 겹치지 않는다. */
.ipa-now{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:2px 2px 10px;border-bottom:1px solid var(--line);margin-bottom:8px}
.ipa-now .wi{font-size:30px;color:var(--sunicon)}
.ipa-now b{font-size:22px;font-weight:700}
.ipa-now b i{font-style:normal;font-size:12px;color:var(--dim);margin-left:1px}
.ipa-now>span{font-size:12px;color:var(--dim)}
/* 오른쪽 끝은 출처 꼬리표 차지다. 기온까지 auto 를 주면 둘이 공간을 나눠 갖는다. */
.ipa-now .tmp{font-size:15px;color:var(--tx)}
.ipa-sec{margin:10px 0 2px}
.ipa-lab{display:block;font-size:11px;color:var(--dim);margin-bottom:4px}
/* 하루치만 보이고 나머지는 옆으로 민다. 날씨 행과 그래프가 같은 트랙 안에 있어야
   스크롤이 함께 움직이고 시각이 어긋나지 않는다. 트랙 폭은 dashboard.js 가 잡는다. */
.ipa-plot{position:relative}
/* 스크롤바는 감춘다. 날짜는 제목 옆 ‹ 9/18 (금) › 로 넘긴다.
   scroll-snap 은 쓰지 않는다 — 칸마다 걸려 하루 단위 이동과 부딪친다. */
.ipa-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.ipa-scroll::-webkit-scrollbar{width:0;height:0;display:none}
.ipa-track{min-width:100%;position:relative}
/* 하루 경계 스냅 표식 — 보이지 않고 자리도 차지하지 않는다 */
.ipa-snaps i{position:absolute;top:0;width:1px;height:1px;scroll-snap-align:start}
/* 스크롤 밖에 떠 있는 고정 y축. 그래프의 왼쪽 여백(IPA_AXIS_W)과 폭을 맞춘다. */
.ipa-yaxis{position:absolute;left:0;top:0;bottom:0;pointer-events:none;
  background:var(--card)}
.ipa-yaxis span{position:absolute;right:4px;transform:translateY(-50%);
  font-size:10px;color:var(--chart-tick,var(--dim));line-height:1;
  font-variant-numeric:tabular-nums}
.ipa-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 10px;
  margin-top:6px;font-size:11px;color:var(--tx)}
/* 예보 / 풍도 실측 을 갈라 주는 꼬리표 — 항목이 다섯이라 묶어야 읽힌다 */
.ipa-legend .grp{color:var(--dim);font-size:10px;margin-left:6px}
.ipa-legend .grp:first-child{margin-left:0}
.ipa-legend span{display:inline-flex;align-items:center;gap:5px}
.ipa-legend i{width:20px;height:0;border-top:2px solid currentColor;display:inline-block}
.ipa-legend i.dash{border-top-style:dashed}
.ipa-chart{position:relative;height:160px}
/* 칸은 그래프의 그 시각 자리에 절대배치된다(dashboard.js). flex 균등분할은
   눈금과 반 칸씩 어긋나서 버렸다. */
.ipa-sky{position:relative;padding-bottom:2px}
.ipa-s{position:absolute;top:0;transform:translateX(-50%);text-align:center;
  min-width:46px}
.ipa-s .t{display:block;font-size:10px;color:var(--dim)}
/* 강수량을 겹쳐 얹으려면 아이콘 상자가 그림과 꼭 맞아야 한다 — inline 이면
   글꼴의 baseline 여유만큼 상자가 커져 위치를 픽셀로 잡을 수 없다. */
/* 26px — 20px 이면 구름 위에 남는 자리가 8px 뿐이라 강수량을 읽을 수 있는
   크기로 못 올린다. 아이콘을 키운 만큼 글자 자리가 생긴다. */
.ipa-s .wi{display:block;line-height:1;font-size:26px;color:var(--wicon)}
/* 그림(.wx)은 display:block 이라(358줄) .wi 를 블록으로 만든 순간 왼쪽에 붙는다 —
   text-align 은 블록 상자를 가운데로 못 민다. 가로 중앙은 margin 으로 잡는다.
   이걸 빠뜨리면 아이콘만 왼쪽으로 가고 강수량은 칸 중앙에 남아 13px 어긋난다. */
.ipa-s .wi .wx{margin:0 auto}
.ipa-s .c{display:block;font-size:11.5px;color:var(--tx);font-variant-numeric:tabular-nums}
/* 강수량 — 날씨 아이콘 위에 겹쳐 얹는다. 절대배치라 자리를 차지하지 않아,
   비가 오는 칸만 길어지는 일이 없다(칸 높이는 JS 가 첫 칸 하나만 재서 박는다).
   자리가 빠듯하다 — 구름 꼭대기는 가운데 봉우리뿐이라 폭이 11px 이고(숫자는
   17px), 구름 몸통의 넓은 띠는 빗방울(wx-fall 로 위아래로 움직인다)이 올라오는
   구간과 겹친다. 그래서 윗봉우리에 얹고, 구름 밖으로 삐져나간 양끝이 카드
   배경에서 묻히지 않게 테두리를 두른다(--wx-rain-halo). */
.ipa-s .ico{position:relative;display:block;line-height:1}
.ipa-s em{position:absolute;left:0;right:0;top:4px;font-style:normal;
  font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--wx-rain-ink);pointer-events:none;
  text-shadow:0 0 2px var(--wx-rain-halo),0 0 2px var(--wx-rain-halo),
              0 0 3px var(--wx-rain-halo)}

/* 날짜 넘기기 — ‹ 9/18 (금) › */
.ipa-nav{float:right;font-style:normal;display:inline-flex;align-items:center;gap:6px}
.ipa-nav b{font-weight:600;color:var(--tx);font-size:11.5px;min-width:64px;
  text-align:center;font-variant-numeric:tabular-nums}
.ipa-nav button{background:var(--card2);border:1px solid var(--line);color:var(--tx);
  border-radius:6px;width:20px;height:18px;line-height:1;padding:0;font:inherit;
  font-size:13px;cursor:pointer}
.ipa-nav button:hover:not(:disabled){border-color:var(--sky);color:var(--sky)}
.ipa-nav button:disabled{opacity:.3;cursor:default}

/* 자외선 "오늘 최고" — 등급 옆 숫자는 작고 흐리게 */
.ent .v i{font-style:normal;font-size:11px;margin-left:3px}
.ent .n i{font-style:normal;font-size:10px;margin-left:4px}

/* 전곡항 카드에 합친 옛 '야외 활동 지표' 줄들 (2026-09-18) */
.wc-air{margin-top:2px;font-size:11.5px;color:var(--dim)}
.wc-air .ms{font-size:15px}
.wc-air i{font-style:normal;opacity:.75;margin-left:2px}
.wc-attrs .g-좋음{color:var(--grade-good)} .wc-attrs .g-보통{color:var(--stat-green)}
.wc-attrs .g-나쁨{color:var(--amber)} .wc-attrs .g-매우나쁨{color:var(--stat-red)}
/* 음력 옆 달 모양 */
.wc-lunar i{font-style:normal;opacity:.85;margin-left:2px}
/* 제목 줄과 게이지 사이 공백을 절반으로 — 캔버스를 그만큼 끌어올린다.
   캔버스 안 여백(위 7px)만으로는 모자라서 음수 마진을 쓴다. */
/* "60" 이 제목 줄 옆·위로 올라와도 된다(사용자 승인). 제목은 왼쪽,
   숫자는 가운데라 글자끼리 부딪히지 않는다. */
#current-gauge{margin-top:-20px}
.cur-card{padding-top:8px}
.cur-row{margin-top:0}
/* 입파도 카드 맨 윗줄의 출처 꼬리표 — 풍도 실측인지 입파도 예보인지 */
.ipa-now .src{margin-left:auto;font-size:10px;color:var(--dim);white-space:nowrap}
/* 아이콘 칸의 풍속·돌풍 — 색은 아래 그래프의 두 선과 같다(인라인으로 넣는다) */
.ipa-s .w{display:block;font-size:10.5px;line-height:1.35;
  font-variant-numeric:tabular-nums}
.ipa-s .w b{font-weight:400}

/* 풍속 및 예보 — 윗줄 글자 크기를 하나로 맞춘다(기온·풍속·m/s·돌풍 모두 18px).
   풍속·돌풍은 오른쪽으로 몰아 기온과 떨어뜨린다. */
.ipa-now .tmp{font-size:18px;color:var(--tx)}
.ipa-now b{font-size:18px;margin-left:auto}
.ipa-now b i{font-size:18px;font-weight:400;color:var(--dim)}
.ipa-now .gust{font-size:18px}
/* 관측시각은 제목 줄 오른쪽 끝. 제목은 가운데 정렬이라 절대배치로 띄운다. */
.ipa-title{position:relative}
.ipa-title #ipa-obs{position:absolute;right:0;bottom:2px;
  font-size:11px;font-weight:400;color:var(--dim)}
/* 2026-09-20: 글자 16px 으로 조금 줄이고, 제목↔윗줄↔라벨 사이 간격을 좁힌다. */
.ipa-now .tmp{font-size:16px}
.ipa-now b{font-size:16px}
.ipa-now b i{font-size:16px}
.ipa-card .md-title{margin-bottom:4px}
.ipa-now{padding-bottom:4px;margin-bottom:4px}

/* 관측시각 표기 — 조류현황·입파도 두 카드가 같은 모양을 쓴다 (2026-09-20) */
.obs-at{font-size:11px;color:var(--dim)}

/* 전곡 마리나 조위 — 숫자를 줄이고 위아래를 좁힌다 */
/* 제목이 남기는 10px 여백까지 끌어올려 숫자 줄을 제목에 붙인다 */
.lvl-stats{margin:-6px 0 2px}
.lvl-stats b{font-size:15px}
.lvl-stats b em{font-size:9px}
.lvl-stats i{font-size:9px}
/* 그래프 아래(범례 밑) 공백도 줄인다 */
.chart-box{height:196px;margin-top:2px;margin-bottom:-6px}
/* 윗줄은 굵기를 400 으로 통일. 단위(m/s)와 돌풍만 흐리게. */
.ipa-now b{font-weight:400}
.ipa-now b i{font-weight:400;color:var(--dim)}