/* static/lib/shore/shore_guide.css — 낚시 현장: 길안내 시트(ShoreGuide) · 어장 층(ShoreFarm) · 낚시선 클래스(ShoreEdu)  2026-10-15 S4
   시트 틀·여백·제목 = fish.css .ufs-sh / .ufs-sec 그대로 (본문 맨 위 18 · 묶음 사이 26 · 제목↔내용 12) */

/* 시작 버튼 — .ufs-go(52px) 에 화살표 */
.sg-start{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.sg-start i{width:22px;height:22px;display:inline-flex;transform:rotate(0)}
.sg-start i svg{width:100%;height:100%}

/* 머리줄 버튼 — 돌아가기 · 끝내기 (두 개 반반) */
.sg-sh .hb.sg-modeb{background:#dcfce7;color:#15803d}
.sg-sh.back .hb.sg-modeb{background:#dbeafe;color:#1d4ed8}
.sg-sh .hb.sg-endb{color:#dc2626}
.sg-sh .hb.sg-endb.arm{background:#dc2626;color:#fff}

/* 물때 줄 — 해루질 */
.sg-tide{display:flex;align-items:center;gap:8px;border-radius:12px;padding:12px 14px;font-size:15px;background:#f0f9ff;color:#0c4a6e}
.sg-tide svg{width:22px;height:22px;flex:none}
.sg-tide b{font-weight:800}
.sg-tide span{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
.sg-tide.org{background:#fff7ed;color:#b45309}
.sg-tide.red{background:#fef2f2;color:#dc2626;animation:sg-blink 1.6s ease-in-out infinite}
@keyframes sg-blink{50%{background:#fee2e2}}

/* 나침반 — 큰 화살표 */
.sg-cmp{display:flex;flex-direction:column;align-items:center;gap:12px}
.sg-rose{--sg-n:0deg;position:relative;width:200px;height:200px;border-radius:50%;border:3px solid var(--ufs-line,#e2e8f0);display:flex;align-items:center;justify-content:center}
.sg-rose .n{position:absolute;inset:0;transform:rotate(var(--sg-n));transition:transform .3s linear;font:900 14px/1 Pretendard,sans-serif;color:#dc2626;text-align:center;padding-top:8px;pointer-events:none}
.sg-arr{width:140px;height:140px;display:flex;color:var(--ufs-blue,#1e6fd9);transition:transform .3s linear}
.sg-arr svg{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(15,23,42,.25))}
.sg-sh.back .sg-arr{color:#16a34a}
.sg-dist{display:flex;flex-direction:column;align-items:center;gap:4px}
.sg-dist b{font:900 34px/1.1 Pretendard,sans-serif;color:var(--ufs-ink,#0f172a);font-variant-numeric:tabular-nums}
.sg-dist span{font-size:14px;font-weight:700;color:var(--ufs-sub,#64748b)}
.sg-ori:empty{display:none}
.sg-ori small{font-size:12px;color:var(--ufs-sub,#64748b);font-weight:600}
.sg-perm{height:44px;padding:0 20px;border:1.5px solid var(--ufs-blue,#1e6fd9);border-radius:12px;background:#fff;color:var(--ufs-blue,#1e6fd9);font:800 15px Pretendard,sans-serif;cursor:pointer}

/* 지도 */
.sg-map{height:240px;border-radius:14px;overflow:hidden;background:#e2e8f0}
.sg-mk{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.sg-mk svg{width:100%;height:100%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.sg-mk.st{color:#16a34a}
.sg-mk.dst{color:#1e6fd9}

/* 준비물 — 줄마다 체크 (구분선) */
.sg-list{display:flex;flex-direction:column}
.sg-li{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 2px;border-bottom:1px solid var(--ufs-line,#e2e8f0);font-size:15px;font-weight:700;cursor:pointer}
.sg-li:last-child{border-bottom:none}
.sg-li input{width:22px;height:22px;accent-color:var(--ufs-blue,#1e6fd9);flex:none;margin:0}
.sg-li span{display:flex;flex-direction:column;gap:2px}
.sg-li small{font-size:12px;font-weight:600;color:var(--ufs-sub,#64748b)}
.sg-li b{font-weight:inherit;display:flex;align-items:center;gap:6px}
.sg-must{font-style:normal;font-size:12px;font-weight:800;color:#dc2626;background:#fef2f2;border-radius:6px;padding:1px 6px;flex:none}
.sg-li.on .sg-must{color:#94a3b8;background:#f1f5f9}
.sg-li.on span{color:var(--ufs-sub,#64748b);text-decoration:line-through}

/* 시트 닫힌 뒤 — 지도 위 [길안내] 알약 */
.sg-pill{position:fixed;z-index:1900;left:50%;transform:translateX(-50%);bottom:calc(var(--msq,98px) + 14px + env(safe-area-inset-bottom));height:48px;padding:0 20px 0 14px;border:none;border-radius:999px;
  background:var(--ufs-blue,#1e6fd9);color:#fff;font:800 15px Pretendard,sans-serif;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 18px rgba(15,23,42,.3);cursor:pointer}
.sg-pill.back{background:#16a34a}
.sg-pill i{width:22px;height:22px;display:inline-flex}
.sg-pill i svg{width:100%;height:100%}
.sg-tip{position:fixed;z-index:3000;left:50%;top:calc(env(safe-area-inset-top) + 70px);transform:translate(-50%,-8px);opacity:0;transition:.25s;background:rgba(15,23,42,.9);color:#fff;
  font:700 14px Pretendard,sans-serif;padding:10px 16px;border-radius:999px;pointer-events:none;white-space:nowrap}
.sg-tip.on{opacity:1;transform:translate(-50%,0)}

/* 어장 — 경고 한 줄 · 정보 시트 */
.sf-warn{display:flex;flex-direction:column;gap:4px;border-radius:12px;padding:12px 14px;font-size:14px;background:#f8fafc;color:#334155}
.sf-warn b{font-weight:800;font-size:15px}
.sf-warn span{font-size:13px;font-weight:600}
.sf-warn.ban{background:#fef2f2;color:#b91c1c}
.sf-warn.warn{background:#fff7ed;color:#b45309}
.sf-rows{display:flex;flex-direction:column}
.sf-r{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--ufs-line,#e2e8f0);font-size:14px}
.sf-r:last-child{border-bottom:none}
.sf-r span{flex:0 0 56px;color:var(--ufs-sub,#64748b);font-weight:700}
.sf-r b{font-weight:700;min-width:0;word-break:keep-all}

/* 낚시선 클래스 마커 · 카드 */
.sed-m{position:relative;width:36px;height:36px;transform:scale(var(--nvm-sym,1));cursor:pointer}
.sed-m .b{width:36px;height:36px;border-radius:50%;box-sizing:border-box;border:2.5px solid #fff;background:#5b4fe0;display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 0 0 2px #b9b3ff,0 2px 8px rgba(67,56,202,.4)}
.sed-m .b svg{width:20px;height:20px;color:#fff}
.sed-m .b img{width:100%;height:100%;object-fit:cover}
.sed-m>i{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);height:18px;padding:0 7px;border-radius:9px;background:#5b4fe0;color:#fff;font:900 12px/18px Pretendard,sans-serif;font-style:normal;white-space:nowrap;border:1.5px solid #fff}
.sed-l{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:4px;white-space:nowrap;pointer-events:none;text-align:center;font:800 12.5px/1.25 Pretendard,sans-serif;color:#1e1b4b;
  background:rgba(255,255,255,.94);padding:2px 7px;border-radius:8px;box-shadow:0 1px 4px rgba(15,23,42,.18);max-width:160px;overflow:hidden;text-overflow:ellipsis}
.sed-l small{display:block;font-size:12px;color:#4338ca}
.sed-card{position:absolute;z-index:880;left:50%;bottom:calc(var(--msq,98px) + 14px + env(safe-area-inset-bottom));transform:translate(-50%,8px);opacity:0;transition:.3s;
  display:flex;align-items:center;gap:10px;min-width:260px;max-width:calc(100% - 32px);padding:10px 12px;border:none;border-radius:16px;background:#fff;box-shadow:0 6px 20px rgba(15,23,42,.25);cursor:pointer;text-align:left;font-family:Pretendard,sans-serif}
.sed-card.on{opacity:1;transform:translate(-50%,0)}
.sed-card .b{width:40px;height:40px;border-radius:50%;background:#5b4fe0;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.sed-card .b svg{width:22px;height:22px;color:#fff}
.sed-card .b img{width:100%;height:100%;object-fit:cover}
.sed-card .t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sed-card .t b{font-size:15px;font-weight:800;color:#1e1b4b}
.sed-card .t small{font-size:12px;font-weight:700;color:#4338ca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sed-card .x{font-style:normal;font-size:20px;color:#94a3b8;padding:0 4px}
/* 연안·해루질 구역 팝업 맨 위 — 어장 경고 + [시작] (S7) */
.sh-atop{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.sh-atop [data-farm]:empty{display:none}
.sh-atop .sg-start{width:100%}