/* static/lib/shore/shore.css — 유니티 낚시(UNITY FISH) 사이트 · 메인/지도 공용
 *   기본 규격은 fish_page.css(.fp-*) · 상단 section_hd.css(.sx-*), 여기는 낚시 전용 칸만
 *   색: UNITY FISH 브랜드 색(아래 --uf-*, 앱 아이콘 청록 #0e8c8c + 루어 주황) · 이 파일 한 곳에서 관리 (S8)
 */
/* ── UNITY FISH 색 — 원본은 이 파일 한 곳 (S14) ──
 *   마린(파랑 #2d7dd2·#1e6fd9 / 남색 #0f172a·#061a3a / 피싱 청록 #0e7490)과 겹치지 않게
 *   주 색 = 노을 주황(주 버튼·켜짐·칩·진행 바) · 바탕 = 짙은 녹청(상단 줄·안내 상자) · 보조 = 청록(링크·소제목)
 *   낚시 사이트 화면만 이 파일을 씀(지도·메인·마이페이지 직접, 공용 화면은 shell.js 가 불러옴) · 공용 모듈 덮어쓰기는 html.site-fish 범위로만
 */
:root{
  --uf-brand:#cf4a0c;--uf-brand-d:#a83a08;--uf-brand-l:#fff1e8;--uf-brand-m:#f6c3a2;   /* 주 색 · 흰 글씨 대비 4.5 이상 */
  --uf-accent:#ff9a5c;                                                                 /* 어두운 바탕 위 강조 */
  --uf-deep:#06302f;--uf-deep-2:#0b4744;--uf-ink:#0b2b29;                              /* 짙은 녹청 바탕 · 글자 */
  --uf-sea:#0e8c8c;--uf-sea-d:#0a6266;--uf-hl:#7fe3d6;--uf-tint:#e5f6f4;               /* 보조 청록 */
  --uf-pri:var(--uf-brand);--uf-pri-d:var(--uf-brand-d);--uf-mud:#a16207
}
/* 공용 변수 바꿔 끼우기 — css.css(--c-*) · landing_v2(--v-*) · fish.css(--um·--ufs-*) · unity_profile(--upf-*) · 지도(--tr-mode) */
html.site-fish{
  --c-brand:var(--uf-brand);--c-brand-2:var(--uf-sea);--c-brand-dark:var(--uf-brand-d);--c-brand-soft:var(--uf-brand-l);
  --v-blue:var(--uf-brand);--v-blue-d:var(--uf-brand-d);--v-blue-l:var(--uf-brand-l);--v-blue-m:var(--uf-brand-m);--v-cyan:var(--uf-sea);--v-ink:var(--uf-ink);--v-bg:#f4f8f7;
  --um:var(--uf-brand);--ufs-blue:var(--uf-brand);--ufs-calc:var(--uf-sea-d);
  --upf-crew:var(--uf-brand);
  --tr-mode:var(--uf-brand)
}
html.site-fish body,html.site-fish body.fish{--um:var(--uf-brand)}
.fp{--fp-deep:var(--uf-deep);--fp-sea:var(--uf-sea);--fp-teal:var(--uf-hl)}
.fp-btn.pri{background:var(--uf-pri);color:#fff}
.fp-btn.pri:hover{background:var(--uf-pri-d)}
.sx-hd.solid{background:rgba(6,48,47,.94)}
.sx-act .v-btn.pri{background:var(--uf-pri);border-color:var(--uf-pri)}
.sh-logo .mk{background:var(--uf-sea)}
.sh-logo b{color:var(--uf-hl)}

/* 상단 줄 · 버튼 (landing_v2 .v-*) */
html.site-fish .v-btn.pri{box-shadow:0 6px 16px rgba(207,74,12,.26)}
html.site-fish .v-logo{color:var(--uf-ink)}
html.site-fish .v-logo .mk,html.site-fish .v-logo .mk.sh-mk{background:var(--uf-deep)}
html.site-fish .v-logo .v-mr,html.site-fish .v-logo em{color:var(--uf-brand)}
html.site-fish .vseg{background:#e3efed}
html.site-fish .vseg a,html.site-fish .vseg a.vs-fish{color:var(--uf-deep)}
html.site-fish .vseg a.on{color:#fff !important}
html.site-fish .vseg-ind,html.site-fish .vseg-ind[data-k]{background:var(--uf-brand)}
@media (min-width:981px){
  html.site-fish body .v-hd{background:var(--uf-deep);border-bottom-color:var(--uf-deep)}
  html.site-fish .v-hd .v-act .v-btn.line{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
}

/* 지도 (static/user/shore/map.html) — 가입 카드 · 첫 안내 · 레이어 · 출처 */
html.site-fish .tr-guide{background:var(--uf-deep);box-shadow:0 8px 24px rgba(6,48,47,.35)}
html.site-fish .tr-guide b{color:var(--uf-hl)}
html.site-fish .tr-guide.cta .tx b{color:#fff}
html.site-fish .tr-guide.cta .pt{color:#c9e4e0}
html.site-fish .tr-guide.cta .pt em{color:var(--uf-accent)}
html.site-fish .tr-guide.cta .go{background:var(--uf-brand);color:#fff}
html.site-fish .fi-act button.pri{background:var(--uf-brand);color:#fff}
html.site-fish .fi-act button{background:var(--uf-tint);color:var(--uf-deep)}
html.site-fish .fi-hero .k{background:var(--uf-brand-l);color:var(--uf-brand-d)}
html.site-fish .fi-hero h2 em,html.site-fish .fi-hero h2{color:var(--uf-ink)}
html.site-fish .fi-hero h2 em{color:var(--uf-brand)}
html.site-fish .fi-dots i.on{background:var(--uf-brand)}
html.site-fish .tr-attr a{color:var(--uf-sea-d)}
html.site-fish .tr-lay.on{background:var(--uf-brand) !important}
html.site-fish .tr-login{background:rgba(6,48,47,.55)}

/* 지도 위 시트·하단 메뉴 (static/lib/fish/fish.css 공용 — 낚시 사이트만) */
html.site-fish .ufs-mode,html.site-fish .ufs-thumbs b,html.site-fish .ufs-nav button.on,html.site-fish .cw-season i.on,html.site-fish .ufs-dcr b,
html.site-fish .cg-c .ov .cp.sp,html.site-fish .ufs-cb .sp,html.site-fish .ufs-boat .bt-mode{background:var(--uf-brand)}
html.site-fish .ufs-nav button.on{border-color:var(--uf-brand)}
html.site-fish .ufs-q.mil .cs.p,html.site-fish .ufs-bt::before{background:var(--uf-sea)}
html.site-fish .ufs-q.mil em[data-mpq],html.site-fish .ufs-li .t .pl,html.site-fish .ufs-mt .gh,html.site-fish .ufs-mk .mk-h,html.site-fish .cg-c .loc,
html.site-fish .cw-h,html.site-fish .ufs-dcr .t,html.site-fish .cw-cond .t span{color:var(--uf-sea-d)}
html.site-fish .cg-c .ov .cp i svg,html.site-fish .ufs-cb .sp i svg{fill:var(--uf-brand)}
html.site-fish .ufs-li .ufs-fic{background:var(--c,var(--uf-sea))}
html.site-fish .ufs-go{background:var(--uf-brand)}
html.site-fish .ufs-go:hover{background:var(--uf-brand-d)}
html.site-fish .ufs-ms,html.site-fish .ufs-q,html.site-fish .ufs-act{color:var(--uf-ink)}
html.site-fish .ufs-q span{color:#4d6664}
html.site-fish .ufs-q.on span{color:#fff}
html.site-fish .ufs-q.mil{color:var(--uf-brand-d)}
html.site-fish .ufs-q:active{background:var(--uf-tint)}
html.site-fish .ufs-act{background:#f1f6f5;border-color:#d7e4e2}
html.site-fish .ufs-q.on,html.site-fish .ufs-act.on{background:var(--uf-brand);border-color:var(--uf-brand);color:#fff}   /* 켜짐 = 주 색 + 흰 글씨 */
html.site-fish .ufs-act.on span,html.site-fish .ufs-act.on svg{color:#fff;fill:#fff}
html.site-fish .ufs-sec-h{color:var(--uf-sea-d)}
html.site-fish .ufs-st.running,html.site-fish .ufs-st.queued,html.site-fish .ufs-st.ai_wait{background:var(--uf-tint);color:var(--uf-sea-d)}
html.site-fish .ufs-month i{background:#b9e3dd}
html.site-fish .ufs-milbox div:last-child b,html.site-fish .ufs-mil b[data-p]{color:var(--uf-sea-d)}
html.site-fish .ufs-mt .sp a{color:var(--uf-sea-d);background:var(--uf-tint)}
html.site-fish .cg-agree.on{border-color:var(--uf-brand);background:var(--uf-brand-l);color:var(--uf-brand-d)}
html.site-fish .cg-agree.on i{background:var(--uf-brand);border-color:var(--uf-brand)}
html.site-fish .ufs-list .ufs-li.on{background:var(--uf-brand-l);border-color:var(--uf-brand)}
html.site-fish .ufs-bar button.on{background:var(--uf-brand-l);color:var(--uf-brand-d)}
html.site-fish .cw-bar i b{background:linear-gradient(90deg,var(--uf-hl),var(--uf-sea))}
html.site-fish .cw-trk .bd{background:rgba(207,74,12,.18);border-color:var(--uf-brand)}
html.site-fish .cw-card b i{background:linear-gradient(90deg,var(--uf-brand) var(--p),#e2e8f0 var(--p))}
html.site-fish .ufs-wait{border-top-color:var(--uf-brand)}
html.site-fish .ufs-pick,html.site-fish .ufs-rq,html.site-fish .toast{background:var(--uf-deep)}
html.site-fish .ufs-sh .hd h3{color:var(--uf-ink)}
html.site-fish .ufs-sh .hb.pri{background:var(--uf-brand)}
html.site-fish .ufs-tabs button.on{color:var(--uf-brand-d)}
html.site-fish .ufs-in:focus{outline:none;border-color:var(--uf-brand)}
/* 귀환 나침반·준비물 (shore_guide.css) · 조사 스텝 (shore_survey.css) */
html.site-fish .sg-sh.back .hb.sg-modeb{background:var(--uf-tint);color:var(--uf-sea-d)}
html.site-fish .sg-mk.dst{color:var(--uf-brand)}
html.site-fish .ssv-opt.on{border-color:var(--uf-brand);background:var(--uf-brand-l);color:var(--uf-ink)}
html.site-fish .ssv-opt.on i{background:var(--uf-brand);border-color:var(--uf-brand)}
html.site-fish .ssv-chip.on{background:var(--uf-brand);border-color:var(--uf-brand)}
html.site-fish .ssv-prog span{color:var(--uf-brand-d)}
html.site-fish .ssv-prog em{background:var(--uf-brand)}
html.site-fish .ssv-toast{background:var(--uf-deep)}

/* 프로필 시트 (unity_profile.css --upf-*) — 낚시 프로필 */
html.site-fish .upf-row .t .k.crew,html.site-fish .upf-drop.over{background:var(--uf-brand-l)}
html.site-fish .upf-nudge .ic.ang svg,html.site-fish .upf-nudge .ic.ang svg:last-child,html.site-fish .upf-cta .ic.ang svg{background:var(--uf-sea)}
html.site-fish .upf-rc .no.top,html.site-fish .upf-rc .sc b,html.site-fish .upf-reg-here b{color:var(--uf-brand-d)}
html.site-fish .upf-reg-here .ic,html.site-fish .upf-sh-st .cr .ic{background:var(--uf-brand)}
html.site-fish .upf-card .st .ic.cw{background:var(--uf-brand-l);color:var(--uf-brand-d)}

/* 마이페이지 (mypage.css 공용 칸) */
html.site-fish .me .edit-link,html.site-fish .nm-list .row .edit-chip{color:var(--uf-sea-d);background:var(--uf-tint);border-color:#9fd9d5}
html.site-fish .me .edit-link:hover,html.site-fish .nm-list .row .edit-chip:hover{background:var(--uf-sea);border-color:var(--uf-sea);color:#fff}
html.site-fish .mp-fp-req{background:var(--uf-brand)}
html.site-fish .mp-fp-req.cg{background:var(--uf-deep)}
html.site-fish .mp-fp-h a{color:var(--uf-sea-d)}
html.site-fish .mp-fp-cnt .c.v{background:var(--uf-tint);color:var(--uf-sea-d)}
html.site-fish .mp-fp-cnt .c.v b{color:var(--uf-sea-d)}
html.site-fish .mp-fp-cells .ufs-st.running,html.site-fish .mp-fp-cells .ufs-st.queued,html.site-fish .mp-fp-cells .ufs-st.ai_wait{background:var(--uf-tint);color:var(--uf-sea-d)}
html.site-fish .mp-pf-go,html.site-fish .mp-pf-go.fish{background:var(--uf-deep);box-shadow:0 8px 20px rgba(6,48,47,.25)}
html.site-fish .mp-pf .hd .sc b{color:var(--uf-brand-d)}
html.site-fish .auth-badge.partial{background:var(--uf-brand-l);color:var(--uf-brand-d);border-color:var(--uf-brand-m)}
html.site-fish .nm-empty-cta:hover .nm-cta-plus{background:var(--uf-brand-l);color:var(--uf-brand)}

/* 메인 (fish_page.css 공용 칸) */
html.site-fish .fp-hero h1 em{color:var(--uf-accent)}
html.site-fish .fp-cell:hover{border-color:var(--uf-hl);box-shadow:0 6px 18px rgba(14,140,140,.12)}
html.site-fish .fp-ft a{color:var(--uf-hl)}
html.site-fish .v-nav a.fp-rec{background:var(--uf-brand)}
html.site-fish .fp-fr .fi{background:var(--uf-sea)}
html.site-fish .fp-fr .sc em{color:var(--uf-sea-d)}
html.site-fish .fp-moreline:hover{color:var(--uf-sea-d)}
html.site-fish .fp-moreline:hover::before,html.site-fish .fp-moreline:hover::after{background:var(--uf-sea-d)}
html.site-fish .sx-map{background:var(--uf-brand)}

/* 공용 화면 (css.css · 로그인·가입·마일리지 등) — 입력 테두리 빛 · 링크 */
html.site-fish input:focus,html.site-fish select:focus,html.site-fish textarea:focus{border-color:var(--uf-brand)}
html.site-fish .nm-fin-grid .nm-fin-c input:focus{box-shadow:0 0 0 2px rgba(207,74,12,.14)}
html.site-fish .agree-badge.rec{background:var(--uf-tint);color:var(--uf-sea-d)}
html.site-fish .agree-toggle{color:var(--uf-sea-d)}
html.site-fish .biz-fld input.biz-cell:focus{border-color:var(--uf-brand);box-shadow:0 0 0 3px rgba(207,74,12,.14)}
html.site-fish .biz-fld .biz-chkbtn,html.site-fish .p-cta{background:var(--uf-brand);border-color:var(--uf-brand)}
html.site-fish .nm-brk-card.on{background:var(--uf-brand-l);border-color:var(--uf-brand);box-shadow:none}
html.site-fish .nm-brk-card .ti{color:var(--uf-ink)}
html.site-fish .nm-brk-card.on .ti{color:var(--uf-brand-d)}
html.site-fish .nm-noti-chip,html.site-fish .nm-noti-all{color:var(--uf-sea-d);border-color:#b9e3dd}
html.site-fish .nm-noti-chip:hover,html.site-fish .nm-noti-all-chip:hover{background:var(--uf-tint);border-color:var(--uf-sea);color:var(--uf-deep)}
html.site-fish .nm-noti-cnt{background:var(--uf-brand)}
html.site-fish .nm-noti-toast{border-color:#b9e3dd;border-left-color:var(--uf-brand)}
html.site-fish .nm-more-item:hover,html.site-fish .nm-more-item:active{background:var(--uf-tint);border-color:#b9e3dd}
html.site-fish .nm-more-item.pri{background:var(--uf-brand-l);border-color:var(--uf-brand-m)}
html.site-fish .nm-more-item.pri .tx .nm{color:var(--uf-brand-d)}

/* 하단 사업자 정보 (static/lib/shore/shore_footer.js) — 공식 메인 .v-ft 규격 */
.sh-ft{background:#f2f7f6;border-top:1px solid #dfe9e7;color:#5b6b80;font-size:13px;padding:36px 0 calc(36px + env(safe-area-inset-bottom))}
.sh-ft .wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.sh-ft .top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.sh-ft .logo{font-weight:900;font-size:17px;letter-spacing:.5px;color:var(--uf-deep)}.sh-ft .logo b{color:var(--uf-sea)}
.sh-ft .links{display:flex;gap:16px;flex-wrap:wrap;font-weight:600}
.sh-ft .links a{color:inherit;text-decoration:none}.sh-ft .links a:hover{color:var(--uf-sea-d)}
.sh-ft .row{display:flex;flex-wrap:wrap;gap:6px 18px;line-height:1.8}
.sh-ft .lbl{color:#94a3b8;margin-right:6px}
.sh-ft .cp{margin-top:10px;color:#94a3b8}
.sh-ft.compact{background:none;border-top:1px solid #e2e8f0;padding:12px 0 0;margin-top:10px;font-size:12px}
.sh-ft.compact .wrap{padding:0}.sh-ft.compact .top{margin-bottom:8px}.sh-ft.compact .links{gap:6px 12px}
.sh-ft.compact .row{gap:2px 12px;line-height:1.6}

/* 오늘 물때 · 해루질 가능 시간 (카드 안은 줄 구분만 — 박스 안 박스 없음) */
.sh-tide .fp-card{display:flex;flex-direction:column;gap:12px}
.sh-tide .fp-card h4{display:flex;align-items:center;gap:8px;margin:0}
.sh-tide .fp-card h4 small{margin-left:auto;font-size:13px;font-weight:700;color:var(--fp-sub)}
.sh-md{display:flex;align-items:baseline;gap:10px}
.sh-md b{font-size:34px;font-weight:900;letter-spacing:-.5px;color:var(--uf-sea-d)}
.sh-md span{font-size:14px;color:var(--fp-sub);font-weight:700}
.sh-bar{height:8px;border-radius:99px;background:#e2e8f0;overflow:hidden}
.sh-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--uf-accent),var(--uf-brand))}
.sh-rows{display:flex;flex-direction:column}
.sh-rows .r{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--fp-line);font-size:15px}
.sh-rows .r:last-child{border-bottom:0}
.sh-rows .r .k{flex:none;width:56px;font-size:13px;font-weight:800;color:var(--fp-sub)}
.sh-rows .r .v{flex:1;font-weight:800}
.sh-rows .r .h{flex:none;font-size:13px;color:var(--fp-sub);font-weight:700}
.sh-rows .r.low .v{color:#a16207}.sh-rows .r.high .v{color:var(--uf-sea-d)}
.sh-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:900;background:var(--uf-tint);color:var(--uf-sea-d)}
.sh-tag.now{background:#a16207;color:#fff}
.sh-tag.mud{background:#fef3c7;color:#92400e}
.sh-loc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-10px 0 18px;font-size:14px;color:var(--fp-sub);font-weight:700}
.sh-loc .fp-btn.sm{height:36px}
.sh-safe{font-size:13px;color:#9a3412;font-weight:700;line-height:1.6;word-break:keep-all}

/* 낚시 구분 두 칸 (연안 · 해루질) — 누르면 그 구분으로 요청 */
.sh-zones{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sh-zones a{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--fp-line);border-radius:18px;padding:20px;color:var(--fp-ink);transition:border-color .15s,box-shadow .15s}
.sh-zones a:hover{border-color:var(--uf-hl);box-shadow:0 6px 18px rgba(14,140,140,.12)}
.sh-zones .ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--uf-sea);margin-bottom:4px}
.sh-zones .ic svg{width:24px;height:24px;fill:#fff}
.sh-zones a.mud .ic{background:#a16207}.sh-zones a.sea .ic{background:#1e3a8a}
.sh-zones h4{margin:0;font-size:17px}
.sh-zones p{margin:0;font-size:14px;line-height:1.6;color:var(--fp-sub);word-break:keep-all}
.sh-zones .go{margin-top:auto;padding-top:6px;font-size:14px;font-weight:800;color:var(--uf-sea-d)}

/* 조과기상 예고 · 앱 받기 */
.sh-soon{display:flex;flex-direction:column;gap:10px}
.sh-soon .sh-dirs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--fp-line)}
.sh-soon .sh-dirs div{padding:14px 10px;border-right:1px solid var(--fp-line);display:flex;flex-direction:column;gap:4px}
.sh-soon .sh-dirs div:last-child{border-right:0}
.sh-soon .sh-dirs b{font-size:15px}
.sh-soon .sh-dirs span{font-size:13px;color:var(--fp-sub)}
.sh-app{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sh-app .mk{flex:none;width:72px;height:72px;border-radius:20px;background:var(--uf-sea);display:flex;align-items:center;justify-content:center}
.sh-app .mk svg{width:40px;height:40px;fill:#fff}
.sh-app .tx{flex:1;min-width:220px}
.sh-app .tx h4{margin:0 0 4px;font-size:19px}
.sh-app .tx p{margin:0;font-size:14px;color:var(--fp-sub);line-height:1.6}
.sh-app .bt{display:flex;gap:8px;flex-wrap:wrap}
.sh-app .fp-btn[aria-disabled="true"]{background:#e2e8f0;color:#64748b;cursor:default}

@media (max-width:900px){.sh-zones{grid-template-columns:1fr}.sh-soon .sh-dirs{grid-template-columns:1fr 1fr}.sh-soon .sh-dirs div:nth-child(2){border-right:0}.sh-soon .sh-dirs div:nth-child(-n+2){border-bottom:1px solid var(--fp-line)}}

/* 지도 상단 — 로고 칸 = 물고기 심볼 */
.v-logo .mk.sh-mk{background:var(--uf-deep)}
.v-logo .mk.sh-mk svg{width:22px;height:22px;fill:#fff}
.v-logo:has(~ .vseg) .mk.sh-mk svg{width:27px;height:27px}
.v-logo .v-mr{color:var(--uf-brand)}
.fp-cg .fp-empty{grid-column:1/-1}
:root{--tr-mode:var(--uf-brand)}
@media (max-width:980px){ .vseg[data-page="shore"] a{padding:0 11px} }
@media (max-width:400px){ .vseg[data-page="shore"] a{padding:0 8px;gap:4px} }