/* 커스텀 CSS - Tailwind로 표현하기 어려운 스플래시 배경/애니메이션 보강 */

* {
  -webkit-tap-highlight-color: transparent;
}

/* Alpine x-cloak: 초기화 전 깜빡임 방지 */
[x-cloak] {
  display: none !important;
}

/* 브라우저(엣지/크롬)의 이미지 호버 "비주얼 검색·설정" 메뉴 차단.
   img 자체의 포인터 이벤트를 끄면 호버 메뉴가 뜨지 않는다.
   - <a>/<button>으로 감싼 이미지는 클릭이 부모로 전달되어 그대로 동작.
   - 이미지 위에서 직접 클릭이 필요하면 이미지 위에 투명 오버레이를 올려 처리한다(예: 대표사진 선택). */
img {
  pointer-events: none;
}
/* 직접 클릭/드래그가 꼭 필요한 이미지는 이 클래스로 예외 처리(단, 해당 이미지엔 호버 메뉴가 다시 보일 수 있음) */
.img-interactive {
  pointer-events: auto;
}

/* 역동적·힘찬 헤드라인용 폰트 (배너 타이틀) */
.font-impact {
  font-family: "Black Han Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  letter-spacing: -0.02em;
}

html,
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "맑은 고딕", sans-serif;
}

/* 스플래시·메인처럼 화면 고정이 필요한 페이지만 body에 부여(스크롤 잠금) */
body.no-scroll {
  height: 100%;
  overflow: hidden;
}

/* ── 스플래시 배경 이미지 (컨테이너에 꽉 채워 원본 전체 노출, 비율 왜곡 허용) ── */
.splash-bg {
  background-color: #0d3b6e; /* 이미지 없을 때 폴백 */
  /* 표시 폭이 최대 640px이라 900px WebP로 충분하다. 원본 2475px JPEG(1.5MB)은 첫 화면에 과했다.
     OG 공유용은 스크래퍼 호환 때문에 splash-og.jpg 를 따로 둔다(header.php 기본 og:image) */
  background-image: url("/assets/images/splash.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── 조류 보기: 유향(흐르는 방향)으로 화살표가 흘러가는 애니메이션 ── */
/* 부모 div가 유향 각도로 rotate → 자식이 위(전방)로 이동하며 페이드 = 그 방향으로 흐름 */
@keyframes bn-cur-flow {
  0%   { transform: translateY(5px);  opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(-7px); opacity: 0; }
}
.bn-cur-flow {
  animation-name: bn-cur-flow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 바람 보기: 이동 거리를 더 크게(현재 대비 ×1.5 → 11.25/-15.75px) 흐르는 애니메이션 */
@keyframes bn-wind-flow {
  0%   { transform: translateY(11.25px);  opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(-15.75px); opacity: 0; }
}
.bn-wind-flow {
  animation-name: bn-wind-flow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 기상특보 버튼 깜박임 */
@keyframes bn-warn-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.bn-warn-blink {
  animation: bn-warn-blink 1.5s ease-in-out infinite;
}

/* 드래그로 좌우 이동하는 영역 — 스크롤바만 감춘다(스크롤 기능은 그대로, 터치 스와이프도 그대로) */
.bn-nosb {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* 구형 Edge */
}
.bn-nosb::-webkit-scrollbar {   /* Chrome·Safari·Edge */
  width: 0;
  height: 0;
  display: none;
}

/* 커뮤니티 리치 에디터로 쓴 본문 — 상세 화면(.bn-body)이 작성 화면(.bn-editor)과 같아 보이게 한다.
   여기 없는 서식은 작성할 땐 보이고 저장 뒤엔 사라져 "왜 다르지"가 된다. */
.bn-body img { max-width: 95%; height: auto; border-radius: .5rem; margin: .25rem 0; }
@media (min-width: 768px) { .bn-body img { max-width: 90%; } }   /* 데스크탑은 조금 좁게 (2026-08-14) */
.bn-body table { border-collapse: collapse; margin: .5rem 0; table-layout: fixed; max-width: 100%; }
.bn-body th,
.bn-body td { border: 1px solid #d1d5db; padding: .35rem .5rem; font-size: 14px; word-break: break-all; }
.bn-body th { background: #f1f5f9; font-weight: 700; }
.bn-body blockquote { border-left: 3px solid #cbd5e1; padding-left: .75rem; color: #475569; margin: .5rem 0; }
.bn-body hr { border: 0; border-top: 1px solid #cbd5e1; margin: .9rem 0; }
.bn-body ul { list-style: disc; padding-left: 1.25rem; }
.bn-body ol { list-style: decimal; padding-left: 1.25rem; }
.bn-body a { color: #1d4ed8; text-decoration: underline; }
.bn-body a[class] { color: inherit; text-decoration: none; }   /* 링크 카드는 제 스타일을 쓴다 */