/* 격자 배경 — 다크 톤 위에 얇은 그리드 */
.hex-bg {
  background-color: #080a0f;
  background-image:
    linear-gradient(rgba(14, 19, 31, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 19, 31, 0.6) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* 실시간(24/7) 카드 — 다크모드에서 눈이 아프지 않게 느리고 옅은 숨쉬기 효과만 */
@keyframes liveBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); border-color: #1e293b; }
  50%      { box-shadow: 0 0 14px -4px rgba(0, 229, 255, 0.28); border-color: #14384a; }
}
.live-card { animation: liveBreath 5s ease-in-out infinite; }
@keyframes liveDot { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }
.live-dot { animation: liveDot 2.6s ease-in-out infinite; }
@keyframes liveSweep { 0% { opacity: 0; } 40% { opacity: .5; } 100% { opacity: 0; } }
.live-underline {
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .45), transparent);
  animation: liveSweep 5s ease-in-out infinite;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #080a0f; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #00ff66; }

#briefingText { transition: opacity .15s ease; }
input[type="date"] { color-scheme: dark; }
.chart-hit { cursor: crosshair; }

/* 모달·표 팝업이 열려 있는 동안은 뒤 화면이 굴러가지 않는다.
   덮개(어두운 배경) 위에 커서를 두고 굴리면 위 요소가 스크롤을 안 받아서
   그대로 body 로 내려가는데, 그게 "뒤에꺼까지 같이 굴러가는" 정체다.
   안쪽 컨테이너의 overscroll-contain 은 끝에 닿았을 때의 전파만 막으므로 둘 다 필요하다. */
html.overlay-open, html.overlay-open body { overflow: hidden; }

/* 스크롤바 자리를 늘 비워 둔다 — 위에서 overflow 를 잠글 때 스크롤바가 사라지며
   화면이 옆으로 튀는 것을 막는다. 이 페이지는 어차피 늘 세로로 길어서 손해가 없다. */
html { scrollbar-gutter: stable; }

/* 모바일 — 필터 줄은 옆으로 밀고, 모달은 바닥 시트로 뜬다 */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.sheet-foot { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
@media (max-width: 639px) {
  input { font-size: 16px; }   /* iOS 는 16px 미만 입력칸에 포커스하면 화면을 확대한다 */
}
html { -webkit-tap-highlight-color: transparent; }
/* 가로로 끌면 차트를 훑고, 세로로 끌면 모달이 스크롤된다 */
#chartSvg svg { touch-action: pan-y; }

/* 푸터 방문자 카운터 — 옛날 오도미터. 칸마다 검은 판에 초록 LED 숫자 */
.hit-odometer { display: inline-flex; gap: 2px; padding: 2px; background: #000; border: 1px solid #1e293b; border-radius: 3px; }
.hit-digit {
  width: 1.1em; padding: 1px 0; text-align: center; font-weight: 700; font-size: 13px; line-height: 1.3;
  color: #00ff66; text-shadow: 0 0 6px rgba(0, 255, 102, .55);
  background: linear-gradient(#0e131f 0 48%, #05070b 52% 100%);
  border-radius: 2px;
}