/* ============================================================
   검색용 정적 페이지 공용 스타일 — /spots/ · /spot/ · /fish/ (2026-09-19)
   페이지는 scripts/build-seo-pages.js가 만든다. 이 파일만 손으로 고친다.
   ★about.html과 같은 색·글꼴을 쓴다(검색으로 들어온 사람이 소개 페이지로 넘어가도 같은 사이트로 보이게).
   ★JS 없이 읽히는 페이지다 — 네이버·다음 크롤러는 JS를 거의 돌리지 않는다.
   ============================================================ */
:root{
  --primary:#0f6e3d; --primary-dark:#0a4f2c; --primary-light:#e8f5ee;
  --bg:#f5f5f5; --card:#fff; --text:#1a1a1a; --sub:#5b6672; --border:#e0e0e0;
  --warn-bg:#fff4e5; --warn-text:#8a4b00; --ban-bg:#fdecec; --ban-text:#a1261f;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.75;
     font-family:system-ui,-apple-system,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;
     -webkit-text-size-adjust:100%;overflow-wrap:anywhere}
.wrap{max-width:840px;margin:0 auto;padding:0 16px}
a{color:var(--primary)}
img{max-width:100%}

header.top{background:#fff;border-bottom:1px solid var(--border)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
header.top img{height:26px;width:auto;display:block}
.btn{display:inline-block;background:var(--primary);color:#fff;text-decoration:none;
     padding:9px 18px;border-radius:999px;font-weight:700;font-size:14px}
.btn:hover{background:var(--primary-dark)}
.btn.lg{font-size:16px;padding:12px 26px}
.btn.ghost{background:#fff;color:var(--primary);border:1px solid var(--primary)}

nav.crumbs{font-size:13px;color:var(--sub);padding:14px 16px 0}
nav.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
nav.crumbs li+li::before{content:'›';margin-right:4px;color:#9aa3ab}
nav.crumbs a{color:var(--sub);text-decoration:none}
nav.crumbs a:hover{text-decoration:underline}

main{padding-bottom:12px}
h1{font-size:26px;line-height:1.4;margin:10px 0 4px;letter-spacing:-.4px}
.kicker{font-size:14px;color:var(--sub);margin:0 0 14px}
.summary{font-size:16px;margin:0 0 18px}
h2{font-size:19px;margin:30px 0 10px;letter-spacing:-.3px}
h3{font-size:16px;margin:18px 0 6px}
.muted{color:var(--sub)}
.small{font-size:13px}

.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.card p{margin:0}
.card p+p{margin-top:8px}

table.facts{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
table.facts th,table.facts td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--border);font-size:15px}
table.facts tr:last-child th,table.facts tr:last-child td{border-bottom:0}
table.facts th{width:30%;color:var(--sub);font-weight:600;background:#fafafa;white-space:nowrap}
@media (max-width:520px){ table.facts th{width:34%;white-space:normal} }

ul.plain{margin:0;padding-left:20px}
ul.plain li{margin-bottom:4px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.grid a.tile{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;
             padding:12px 14px;text-decoration:none;color:var(--text)}
.grid a.tile:hover{border-color:var(--primary)}
.tile b{display:block;font-size:15px}
.tile span{display:block;font-size:13px;color:var(--sub);margin-top:2px}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chips li a,.chips li span{display:inline-block;border:1px solid var(--border);background:var(--card);
             border-radius:999px;padding:3px 11px;font-size:14px;text-decoration:none;color:var(--text)}
.chips li a:hover{border-color:var(--primary);color:var(--primary)}

.fishrow{border-top:1px solid var(--border);padding:12px 0}
.fishrow:first-child{border-top:0;padding-top:0}
.fishrow:last-child{padding-bottom:0}
.fishrow .nm{font-weight:700;font-size:16px}
.fishrow .ln{font-size:14px;color:var(--sub);margin-top:2px}

.months{display:flex;gap:3px;margin:6px 0 2px}
.months i{flex:1;height:20px;border-radius:4px;background:#eceff1;font-style:normal;font-size:11px;
          color:#6b7680;display:flex;align-items:center;justify-content:center;min-width:0}
.months i.on{background:#a8d5b8;color:#0a4f2c}
.months i.pk{background:var(--primary);color:#fff}
.months i.nc{background:#f4b4ae;color:#7a1a14}
.legend{font-size:12px;color:var(--sub);display:flex;gap:12px;flex-wrap:wrap}
.legend span::before{content:'';display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px;background:var(--c)}

.rule{border-radius:12px;padding:12px 14px;font-size:15px;background:var(--ban-bg);color:var(--ban-text)}
.rule.none{background:#f1f3f4;color:var(--sub)}
.rule.ad{background:var(--warn-bg);color:var(--warn-text)}
.rule ul{margin:4px 0 0;padding-left:18px}

.photo{margin:0 0 16px;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.photo img{display:block;width:100%;height:auto;max-height:360px;object-fit:cover;background:#f1f3f4}
.photo img.nd{object-fit:contain}
.photo figcaption{font-size:12px;color:var(--sub);padding:6px 12px}

.faq h3{margin:16px 0 4px}
.faq p{margin:0;color:var(--text)}

.cta{background:var(--primary-light);border-radius:16px;padding:20px;text-align:center;margin:28px 0 8px}
.cta p{margin:0 0 12px;color:var(--primary-dark);font-weight:600}
.cta .btn+.btn{margin-left:8px}
@media (max-width:420px){ .cta .btn{display:block;margin:8px 0 0 !important} }

.src{font-size:13px;color:var(--sub);border-top:1px dashed var(--border);margin-top:22px;padding-top:12px}
.src p{margin:0 0 4px}

footer{background:#fff;border-top:1px solid var(--border);margin-top:32px;padding:20px 0 36px}
footer .wrap{font-size:12px;color:var(--sub);line-height:1.9}
footer .lf-bz{white-space:nowrap}
footer .lf-sep{margin:0 5px}
footer .links{margin-top:8px}