/* =========================================================
   낚시 물때 가이드 — 전용 스타일 (공유 style.css 뒤에 로드)
   테마: "도시어부"풍 방송 그래픽 텐션 — 심해 네이비 + 입질 레드오렌지 +
   부표 옐로우 + 씨폼 틸. 이 파일은 이 페이지에서만 로드되므로 body/.nav/
   .footer/.card 등 전역 클래스를 직접 override해도 다른 도구엔 영향 없음.
   ========================================================= */
:root{
  --ft-font:'Do Hyeon',var(--font);
  --ft-bg:#071E33;     /* 심해 네이비 배경 */
  --ft-panel:#0F3459;  /* 패널 네이비 */
  --ft-ink:#F4F7FA;    /* 포말 화이트 텍스트 */
  --ft-line:#1B4A73;   /* 패널 내부 경계선 */
  --ft-accent:#FF4B3E; /* 입질 레드오렌지 — 강조/CTA */
  --ft-accent2:#FFC93C;/* 부표 옐로우 — 보조 강조 */
  --ft-teal:#2EC4B6;   /* 씨폼 틸 — 매칭 태그 */
  --ft-muted:#9FB3C8;  /* 보조 텍스트 */
}

/* ---------- 페이지 전체 톤 ---------- */
body{
  background:var(--ft-bg);
  background-image:radial-gradient(ellipse at top, rgba(46,196,182,.08), transparent 60%);
  color:var(--ft-ink);
}
.nav{background:#051524;border-bottom:3px solid var(--ft-accent);backdrop-filter:none}
.nav .brand{color:var(--ft-ink)}
.nav .brand svg{color:var(--ft-accent2)}
.nav .links a{color:var(--ft-muted)}
.nav .links a:hover{color:#fff;background:var(--ft-panel)}
.theme-btn{background:var(--ft-panel);border:1px solid var(--ft-line);color:var(--ft-ink)}
.theme-btn:hover{border-color:var(--ft-accent2);color:var(--ft-accent2)}
.ver-badge{background:var(--ft-panel);border:1px solid var(--ft-line);color:var(--ft-accent2)}
.footer{background:#051524;border-top:1px solid var(--ft-line)}
.footer a{color:var(--ft-muted)}
.footer a:hover{color:var(--ft-accent2)}
.footer .sep{color:var(--ft-line)}
.footer .cp{color:#5E7B98}

/* 카드 전반("다른 도구" 포함) — 패널 톤 통일 */
.card{
  background:var(--ft-panel);
  color:var(--ft-ink);
  border:1px solid var(--ft-line);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.card>h2{font-family:var(--ft-font);font-size:19px;color:#fff;letter-spacing:.02em}
.card>.desc{color:var(--ft-muted)}
.guides a{
  background:#0C2C4B;
  border:1px solid var(--ft-line);
  color:var(--ft-ink);
  border-radius:12px;
}
.guides a:hover{border-color:var(--ft-teal);box-shadow:0 0 0 2px rgba(46,196,182,.25)}
.guides a span{color:var(--ft-muted)}
.ad-slot{border:1px dashed var(--ft-line);background:#0C2C4B;color:var(--ft-muted)}

/* ---------- 히어로: 속보 배너 시그니처 ---------- */
.hero.ft-theme{
  position:relative;
  background:linear-gradient(180deg,#0C3155,#071E33);
  border:1px solid var(--ft-line);
  border-radius:16px;
  padding:30px 22px 24px;
  overflow:hidden;
}
.hero.ft-theme::before{
  content:"오늘 낚시, 가도 될까?";
  position:absolute;
  top:14px; right:-42px;
  background:var(--ft-accent);
  color:#fff;
  font-family:var(--ft-font);
  font-size:12px;
  letter-spacing:.03em;
  padding:5px 50px;
  transform:rotate(28deg);
  box-shadow:0 4px 14px rgba(255,75,62,.4);
}
.hero.ft-theme h1{
  font-family:var(--ft-font);
  font-size:26px;
  letter-spacing:.01em;
  margin:0 0 10px;
  color:#fff;
}
.hero.ft-theme p{font-size:14.5px;color:var(--ft-muted);margin:0;max-width:82%}
.hero.ft-theme b{color:var(--ft-accent2)}

/* ---------- 안내 배너 ---------- */
.note.ft-theme{
  background:#0C2C4B;
  color:var(--ft-muted);
  border:1px solid var(--ft-line);
  border-left:4px solid var(--ft-teal);
  border-radius:12px;
}
.note.ft-theme b{color:var(--ft-ink)}

/* ---------- 질문지·결과 패널 ---------- */
.step.ft-theme{
  background:var(--ft-panel);
  color:var(--ft-ink);
  border:1px solid var(--ft-line);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.step.ft-theme .q{font-family:var(--ft-font);font-size:20px;color:#fff;letter-spacing:.01em}
.step.ft-theme .desc{color:var(--ft-muted)}

/* 진행 표시 */
.ft-progress{display:flex;gap:5px}
.ft-progress span{flex:1;height:5px;border-radius:999px;background:#0C2C4B;border:1px solid var(--ft-line)}
.ft-progress span.done{background:var(--ft-teal);border-color:var(--ft-teal)}

/* 선택지 */
.ft-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
@media(min-width:560px){.ft-opts{grid-template-columns:repeat(3,1fr)}}
.ft-opt{
  font:inherit;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 10px;cursor:pointer;text-align:center;
  background:#0C2C4B;
  color:var(--ft-ink);
  border:1px solid var(--ft-line);
  border-radius:14px;
  transition:transform .12s,border-color .12s,box-shadow .12s,background .12s;
}
.ft-opt:hover{
  border-color:var(--ft-teal);
  background:#123a61;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(46,196,182,.18);
}
.ft-opt .ic{font-size:25px;line-height:1}
.ft-opt .lb{font-size:13px;font-weight:700;line-height:1.35}

/* 버튼 */
.step.ft-theme .cta{
  font-family:var(--ft-font);
  letter-spacing:.02em;
  background:var(--ft-accent);
  color:#fff;
  border:0;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(255,75,62,.35);
}
.step.ft-theme .cta:hover{filter:brightness(1.06)}
.step.ft-theme .cta.ghost{background:#0C2C4B;color:var(--ft-teal);border:1px solid var(--ft-line);box-shadow:none}
.step.ft-theme .cta.ghost:hover{border-color:var(--ft-teal)}

/* ---------- 로딩 ---------- */
.ft-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 0}
.ft-loading[hidden]{display:none}
.ft-loading.ft-theme{color:var(--ft-muted)}
.ft-spinner{width:30px;height:30px;border-radius:50%;border:3px solid #0C2C4B;border-top-color:var(--ft-accent);animation:ft-spin .8s linear infinite}
@keyframes ft-spin{to{transform:rotate(360deg)}}
.ft-loading-txt{font-size:13px;color:var(--ft-muted)}
@media (prefers-reduced-motion:reduce){.ft-spinner{animation:none}}

/* ---------- 결과 카드 ---------- */
.ft-results{display:flex;flex-direction:column;gap:12px}
.ft-card{
  padding:16px;
  background:#0C2C4B;
  color:var(--ft-ink);
  border:1px solid var(--ft-line);
  border-radius:14px;
}
.ft-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ft-name{font-size:16px;font-weight:800;color:#fff;word-break:break-word}
.ft-copy{
  font:inherit;font-size:12px;font-weight:700;padding:7px 12px;cursor:pointer;flex:none;
  border-radius:999px;border:1px solid var(--ft-line);background:#071E33;color:var(--ft-muted);
}
.ft-copy:hover{border-color:var(--ft-teal);color:var(--ft-teal)}
.ft-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ft-tag{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:#071E33;color:var(--ft-muted);border:1px solid var(--ft-line)}
.ft-tag.match{background:rgba(46,196,182,.16);color:var(--ft-teal);border-color:var(--ft-teal)}
.ft-tag.tide{background:rgba(255,201,60,.16);color:var(--ft-accent2);border-color:var(--ft-accent2)}
/* 만조·간조 시각 — 여러 시각이 한 줄에 들어가므로 폭이 넓어질 수 있다 */
.ft-tag.time{background:rgba(46,196,182,.12);color:var(--ft-teal);border-color:var(--ft-teal);cursor:help}
.ft-tag.unknown{background:rgba(255,75,62,.12);color:var(--ft-accent);border-color:var(--ft-accent)}
.ft-desc{font-size:13px;color:var(--ft-muted);margin-top:9px;line-height:1.6}
.ft-actions{margin-top:11px}
.ft-maplink{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ft-teal);border:1px solid var(--ft-teal);border-radius:999px;padding:7px 14px}
.ft-maplink:hover{background:rgba(46,196,182,.12);text-decoration:none}
.ft-src{font-size:11.5px;color:#5E7B98;margin-top:9px}
.ft-src a{color:#7A9BB8}

/* ---------- 낚시 기본 팁 ---------- */
.ft-tips h3{font-family:var(--ft-font);color:#fff;font-size:17px}
.ft-tip-item{font-size:13.5px;color:var(--ft-muted);line-height:1.7;padding:11px 13px;background:#0C2C4B;border:1px solid var(--ft-line);border-radius:10px;margin-top:8px}

/* 포커스 링 */
.ft-opt:focus-visible,
.step.ft-theme .cta:focus-visible,
.ft-copy:focus-visible,
.ft-maplink:focus-visible{
  outline:2px solid var(--ft-teal);outline-offset:2px;
}

/* ---------- 선택지 부제(지역 건수 · 목표 설명) ---------- */
.ft-opt .sub{font-size:11px;color:var(--ft-muted);line-height:1.3;font-weight:600}
.ft-opt:hover .sub{color:var(--ft-teal)}

/* ---------- 안전 고지 (결과 맨 위) ----------
   이 도구의 포인트는 전부 갯바위인데 타깃은 초보라, 결과를 보기 전에 먼저 읽혀야 한다. */
.ft-safety{
  padding:14px 16px;margin-bottom:12px;border-radius:14px;
  background:rgba(255,75,62,.10);
  border:1px solid var(--ft-accent);
  border-left:4px solid var(--ft-accent);
  font-size:13px;line-height:1.7;color:var(--ft-ink);
}
.ft-safety b{color:var(--ft-accent2)}

/* ---------- 다른 낚시 방법 접이식 ---------- */
.ft-more-tips{margin-top:10px}
.ft-more-tips>summary{
  cursor:pointer;font-size:13px;font-weight:700;color:var(--ft-teal);
  padding:9px 13px;border:1px solid var(--ft-line);border-radius:10px;background:#0C2C4B;
  list-style:none;
}
.ft-more-tips>summary::-webkit-details-marker{display:none}
.ft-more-tips>summary::after{content:" ▾"}
.ft-more-tips[open]>summary::after{content:" ▴"}
.ft-more-tips>summary:hover{border-color:var(--ft-teal)}
.ft-tips b{color:var(--ft-ink)}

/* ---------- 카드 안내 줄 (초보에게 여기가 어떤 곳인지 설명) ---------- */
.ft-guide{margin-top:11px;display:flex;flex-direction:column;gap:5px}
.ft-guide-line{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:var(--ft-muted)}
.ft-guide-line[hidden]{display:none}
.ft-guide-line .gi{flex:none;width:16px;text-align:center}
.ft-guide-line.good{color:var(--ft-teal)}
.ft-guide-line.warn{color:var(--ft-accent2)}
.ft-guide-line.bad{color:var(--ft-accent);font-weight:700}

/* ---------- 지도 ----------
   Leaflet 기본 스타일이 밝은 톤이라 이 페이지의 심해 네이비와 안 맞는다.
   컨테이너와 팝업만 어둡게 맞추고 타일 자체는 건드리지 않는다. */
.ft-map-wrap{margin-top:14px;border-radius:14px;overflow:hidden;border:1px solid var(--ft-line)}
#ft-map{height:340px;width:100%;background:#0C2C4B}
@media(min-width:700px){#ft-map{height:440px}}

.ft-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.ft-lg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ft-muted)}
.ft-lg i{width:10px;height:10px;border-radius:50%;flex:none}

/* 팝업 */
.ft-pop .leaflet-popup-content-wrapper{
  background:var(--ft-panel);color:var(--ft-ink);
  border:1px solid var(--ft-line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.ft-pop .leaflet-popup-tip{background:var(--ft-panel);border:1px solid var(--ft-line)}
.ft-pop .leaflet-popup-content{margin:14px 15px;font-size:13px;line-height:1.5}
.ft-pop a.leaflet-popup-close-button{color:var(--ft-muted)}
.ft-pop a.leaflet-popup-close-button:hover{color:var(--ft-accent2)}
.ft-pop-name{font-size:15px;font-weight:800;color:#fff;line-height:1.35}
.ft-pop-sub{font-size:11.5px;color:var(--ft-muted);margin-top:2px}
.ft-pop-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.ft-pop-chip{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;
  background:#071E33;color:var(--ft-muted);border:1px solid var(--ft-line)}
.ft-pop-time{margin-top:9px;font-size:12px;color:var(--ft-muted)}
.ft-pop-time.on{color:var(--ft-teal);font-weight:700}
.ft-pop-map{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:700;
  color:var(--ft-teal);border:1px solid var(--ft-teal);border-radius:999px;padding:6px 12px}
.ft-pop-map:hover{background:rgba(46,196,182,.12);text-decoration:none}
/* 팝업 안에서는 안내 줄 여백을 좁힌다 */
.ft-pop .ft-guide{margin-top:9px;gap:4px}
.ft-pop .ft-guide-line{font-size:12px}

/* 지도 위 이동 버튼 — 확대해서 시작하되 전체도 볼 수 있게 */
.ft-map-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ft-mbtn{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:8px 13px;
  border-radius:999px;border:1px solid var(--ft-line);background:#0C2C4B;color:var(--ft-teal)}
.ft-mbtn:hover{border-color:var(--ft-teal);background:#123a61}

/* 추천 1~3번 마커 번호 */
.ft-mk-num{background:transparent;border:0;box-shadow:none;color:#fff;
  font-weight:800;font-size:12px;padding:0}
.ft-mk-num::before{display:none}

/* 출처 안내를 접어둔다 — 330자 면책 문구가 첫 버튼보다 위에서 한 화면을 잡아먹었다 */
.ft-src-note{background:#0C2C4B;border:1px solid var(--ft-line);border-left:4px solid var(--ft-teal);
  border-radius:12px;padding:12px 15px}
.ft-src-note>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--ft-teal);list-style:none}
.ft-src-note>summary::-webkit-details-marker{display:none}
.ft-src-note>summary::after{content:" ▾"}
.ft-src-note[open]>summary::after{content:" ▴"}
.ft-src-note>div{margin-top:9px;font-size:12.5px;line-height:1.7;color:var(--ft-muted)}
.ft-src-note b{color:var(--ft-ink)}

/* 안전 안내를 행동 3가지로 */
.ft-safe-l{margin-top:8px;font-size:12.5px;line-height:1.65}
.ft-safety b{color:var(--ft-accent2)}

/* 준비물·비용 */
.ft-tip-buy{border-color:var(--ft-teal);background:rgba(46,196,182,.08)}
.ft-tip-buy b{color:var(--ft-teal)}

/* 팝업 안 "몇 시에 가면 좋아요" */
.ft-pop-go{margin-top:6px;color:var(--ft-accent2);font-weight:700}

/* 오늘이 며칠인지 밝힌다 — "오늘 기준"이라면서 날짜가 없었다 */
.ft-datestamp{font-size:12.5px;font-weight:700;color:var(--ft-accent2);margin-bottom:10px}

/* 앞으로 7일 물때 띠 — 고른 날 말고 다른 날도 한눈에 */
.ft-week{display:flex;align-items:center;gap:4px;margin-top:9px;flex-wrap:wrap}
.ft-week-t{font-size:11px;color:var(--ft-muted);margin-right:4px;flex:none}
.ft-day{display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  min-width:26px;padding:4px 2px;border-radius:8px;border:1px solid var(--ft-line);
  background:#071E33;cursor:help}
.ft-day b{font-size:10px;font-weight:700;color:var(--ft-muted);font-style:normal}
.ft-day i{font-size:12px;font-style:normal;color:#5E7B98;line-height:1}
.ft-day.good{border-color:var(--ft-teal);background:rgba(46,196,182,.14)}
.ft-day.good i,.ft-day.good b{color:var(--ft-teal)}
.ft-day.soso i{color:var(--ft-accent2)}
.ft-day.on{outline:2px solid var(--ft-accent2);outline-offset:1px}