/* ══ 24h 사이트 공통 CSS ═════════════════════════════════════════════════
   n-mk.kr/24h/ 산하 **모든 페이지가 공유**한다.
   쓰는 곳: /24h/(지금) · /24h/futures/(야간선물) · 앞으로 /24h/news/ · /24h/board/

   🔴 한 페이지만 보고 고치지 말 것. 여기 한 줄이 전 화면을 바꾼다.
   🔴 여기 있는 것을 페이지 인라인 <style> 에 **다시 선언하지 말 것**.
      인라인이 나중에 오므로 인라인이 이기고, shell.css 를 고쳐도 그 페이지만 안 바뀐다.

   ── 담당 범위 ──
     :root      색 토큰 · 레이아웃 토큰
     body       폰트·크기·행간 (기본값)
     .wrap      정렬 컨테이너 — 모든 글의 좌우 여백은 여기서 나온다
     #nav       상단 메뉴
     .bar       큰 정보 바   (24h .banner  = futures #header)
     .bar-sub   보조 정보 줄 (24h .ext     = futures #signal-bar)
     .live/.dot 연결 상태 표시

   ── 페이지 전용으로 남는 것 ──
     /24h/          .grid .card .sec        (카드 목록)
     /24h/futures/  #chart-wrap #bt-bar #sym-tabs  (차트 앱 레이아웃)

   ── 통합 이력 (2026-08-02) ──
     원래 두 페이지가 CSS 를 각자 인라인으로 들고 있었고 공유는 24% 뿐이었다.
     **폰트조차 달랐다** — 24h 는 Apple SD Gothic Neo/Noto Sans KR, futures 는 Pretendard.
     그래서 "야간선물처럼 맞춰줘" 가 매번 손으로 베껴 쓰는 작업이 됐다. 그걸 끝낸 것이 이 파일.
     색 토큰 대조: #c9d1d9→--tx · #21262d→--line · #f85149→--up · #58a6ff→--dn · #388bfd→--accent
══════════════════════════════════════════════════════════════════════════ */

:root{
  /* 색 */
  --bg:#0d1117; --card:#161b22; --card2:#1c2129; --line:#262c36;
  --tx:#e6edf3; --tx2:#8b949e; --tx3:#6e7681;
  --up:#f0616d; --dn:#4a9eff; --flat:#8b949e; --accent:#2f81f7; --err:#f85149;
  /* 기준선(앵커) 색 — "이 선이 국내 마감 종가다" 를 뜻하는 노랑.
     야간선물 차트의 정규종가 선과 24h 카드 미니차트의 종가 선이 **같은 색**이어야
     두 화면에서 같은 의미로 읽힌다 (2026-08-02). 경고색(#d29922)과 값이 같지만
     의미가 다르므로 토큰을 따로 둔다 — 한쪽만 바꿀 일이 생긴다. */
  --anchor:#d29922;

  /* 세그먼트 스위치의 '선택됨' 채움색. --accent(#2f81f7)보다 한 톤 진하다.
     🔴 취향이 아니라 **명암비** 때문이다 — 흰 글자를 얹었을 때
        #2f81f7 위 = 3.75:1 (WCAG AA 4.5:1 미달) / #1f6feb 위 = 4.63:1 (통과).
     --accent 는 글자·테두리용, 이 토큰은 **채움 위에 흰 글자**를 얹을 때만 쓴다.
     한쪽만 바꾸면 대비가 무너지므로 둘을 같이 볼 것. */
  --accent-fill:#1f6feb;

  --safe-b: env(safe-area-inset-bottom, 0px);

  /* 레이아웃 — 🔴 본문 폭. **제한하지 않는다(창 전체)** 가 이 사이트의 기준이다.
     2026-08-02: 한때 760/1180/1420px 로 가운데 정렬했더니 넓은 화면에서 글이
     창 안쪽으로 한참 밀려들어갔다. 야간선물 화면처럼 **창 끝에서 --wrap-pad 만큼만
     띄우는 것**이 기준이다 (진석님 지시). 차트가 화면을 꽉 쓰는 화면이라 글만
     가운데로 모이면 차트와 시작선이 어긋난다.
     나중에 폭을 제한하고 싶으면 여기만 값(예: 1420px)으로 바꾸면 전 페이지에 적용된다.
     .wrap 래퍼를 못 쓰는 곳(#bt-bar 의 <summary>)도 이 토큰을 그대로 쓴다. */
  --wrap-max: none;
  /* 창 가장자리와 글 사이 여백. 🔴 **야간선물 원래 값(16px)이 기준**이다 (2026-08-02 진석님).
     통합할 때 24h 값(14px)으로 잘못 통일했었다.
     여기 한 줄이 상단메뉴·배너·현황판·시세헤더·시그널바·갭예측력바·카드그리드
     **전부**를 동시에 움직인다. 페이지에서 좌우 padding 을 따로 주지 말 것. */
  --wrap-pad: 16px;

  /* 상단 바 실측 높이. shell.js 가 렌더 후 실제 픽셀로 덮어쓴다. */
  --nav-h: 38px;
}
/* ⚠️ --wrap-max 를 화면폭별로 줄이는 미디어쿼리는 **일부러 두지 않는다**.
   위 주석 참고 — 창 전체를 쓰는 게 기준이다. 카드 열 수는 페이지의 .grid 가 따로 조절한다. */

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent }

body{
  background:var(--bg); color:var(--tx);
  /* 🔴 사이트 전체 한 벌. 페이지에서 font-family 를 다시 쓰지 말 것.
     통합 전 futures 는 'Pretendard' 를 1순위로 뒀었는데, 이 사이트는 웹폰트를
     싣지 않으므로 그 글꼴이 깔린 PC 에서만 적용돼 기기마다 모양이 달랐다.
     메인(24h)의 시스템 폰트 스택으로 통일한다. */
  font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

/* ══ 정렬 컨테이너 ═══════════════════════════════════════════════════════
   🔴 **모든 글의 좌우 여백은 여기서만 나온다.**
   바(.bar/.bar-sub/#nav)는 배경을 화면 끝까지 깔고, 글은 이 .wrap 안에 넣는다.
   바에 직접 좌우 padding 을 주면 안 된다 — 넓은 모니터에서 글이 왼쪽 끝에
   홀로 붙어 카드 그리드와 어긋난다 (2026-08-02 진석님 지적).
══════════════════════════════════════════════════════════════════════════ */
.wrap{ max-width:var(--wrap-max); margin:0 auto; padding:0 var(--wrap-pad) }

/* ══ 상단 메뉴 ═══════════════════════════════════════════════════════════
   [로고] [ ╭─────────┬────────────╮ ] ············ [페이지별 상태]
          [ │ 🌍 지금 │ 🌙 야간선물│ ]
          [ ╰─────────┴────────────╯ ]
     고정      세그먼트 스위치(가로 스크롤)              고정

   ── 2026-08-03 세그먼트 전환 (진석님: "두 메뉴가 잘 안 보인다") ──
   전에는 탭이 **글자만** 있었고 비활성 색이 --tx3(#6e7681)이었다.
   --card(#161b22) 위에서 **명암비 3.84:1 = WCAG AA(4.5:1) 미달**이라
   평소엔 안 읽히고 hover 해야 겨우 보였다 → **폰에는 hover 가 없다**.
   고친 것 두 가지:
     ① 비활성 색 --tx3 → --tx2 (5.26:1, AA 통과)
     ② 묶음 테두리 + 채움 = "여기서 고르는 것"이 모양으로 읽히게

   ── 메뉴가 늘어나면 ──
   3~4개까지는 이대로 늘리면 된다(shell.js MENU 에 한 줄).
   폭이 모자라면 .seg 가 가로로 스크롤되고, 넘칠 때만 오른쪽에 페이드가 켜진다
   (#nav-tabs.scrollable — shell.js 가 실제 폭을 재서 붙인다).
   🔴 5개를 넘어가면 스크롤로 버티지 말고 '더보기' 로 접는 설계를 다시 할 것.
══════════════════════════════════════════════════════════════════════════ */
#nav{
  position:sticky; top:0; z-index:50;
  min-height:38px;
  background:var(--card);
  border-bottom:1px solid var(--line);
}
/* 안쪽에 .wrap 을 같이 달아 본문과 같은 선에서 시작한다 */
#nav .nav-in{ display:flex; align-items:center; gap:10px; min-height:38px }

#nav-brand{
  flex:0 0 auto;
  display:flex; align-items:baseline; gap:7px;
  text-decoration:none; color:var(--tx);
  font-size:16px; font-weight:800; letter-spacing:-.3px;
}
#nav-brand i{ font-style:normal; color:var(--accent) }
#nav-brand small{ font-size:11px; font-weight:500; color:var(--tx2); letter-spacing:0 }
@media(max-width:560px){ #nav-brand small{ display:none } }  /* 좁으면 탭이 우선 */

/* 스크롤 껍데기. 실제 모양은 안쪽 .seg 가 만든다.
   ⚠️ 개별 탭에 flex:1 을 주면 안 된다 — 메뉴가 늘수록 글자가 좁아져 깨진다.
      늘어나야 하는 건 '탭 묶음'이지 개별 탭이 아니다. */
#nav-tabs{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
#nav-tabs::-webkit-scrollbar{ display:none }

/* 메뉴가 폭을 넘칠 때만 오른쪽을 흐리게 = "옆에 더 있다"는 신호.
   🔴 항상 켜두면 안 된다 — 2개뿐인 지금은 넘치지 않는데 마지막 탭이
      괜히 흐려져 '비활성'으로 오해된다. shell.js 가 실제 폭을 재서 붙인다. */
#nav-tabs.scrollable{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
}

/* 세그먼트 스위치 묶음 — 이 테두리가 "여기서 하나를 고른다"를 말해준다 */
.seg{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:2px;
  padding:2px;
  background:var(--card2);
  border:1px solid var(--line);
  border-radius:9px;
}
.seg a{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px;
  font-size:13px; font-weight:600; white-space:nowrap; line-height:1.25;
  color:var(--tx2);                    /* 5.26:1 — 예전 --tx3 는 3.84:1 로 AA 미달이었다 */
  border-radius:7px; text-decoration:none;
  transition:background .12s, color .12s;
}
.seg a .ic{ font-size:12.5px; line-height:1 }   /* 이모지가 줄높이를 밀어올리지 않게 */
.seg a:hover{ color:var(--tx); background:rgba(255,255,255,.05) }
.seg a.on{
  color:#fff; font-weight:700;
  background:var(--accent-fill);       /* 흰 글자 기준 4.63:1 — :root 주석 참고 */
}
.seg a.on:hover{ background:var(--accent-fill) }   /* 선택된 건 hover 로 안 흔들린다 */
/* 아직 안 만든 메뉴 — 자리는 보여주되 눌리지 않는다.
   "곧 생긴다"를 화면으로 약속하는 용도. 빈 페이지로 보내는 것보다 정직하다. */
.seg a.soon{ opacity:.4; pointer-events:none }

/* 좁은 폰에서 메뉴가 3~4개가 되면 여기서 한 번 줄인다 (스크롤보다 먼저) */
@media(max-width:420px){
  .seg a{ padding:5px 8px; gap:4px; font-size:12.5px }
}

/* 페이지가 자기 상태 표시를 꽂는 자리. 요소에 data-nav-slot 만 달면 shell.js 가 옮긴다. */
#nav-slot{ flex:0 0 auto; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--tx2) }

/* ══ 정보 바 ═════════════════════════════════════════════════════════════
   야간선물 화면의 규칙을 사이트 전체 규칙으로 승격한 것.
   🔴 상자를 쓰지 않는다. 모서리 둥글기·그라데이션·점선테두리 금지.
      구분은 전부 아래 실선 하나로 한다. 상자를 되살리면 두 화면이 다시 갈라진다.

     .bar     = 큰 정보 바   : 24h 배너      / futures 시세 헤더
     .bar-sub = 보조 정보 줄 : 24h 환율·VIX  / futures 미선물·SOX
══════════════════════════════════════════════════════════════════════════ */
.bar{
  background:var(--card);
  border-bottom:1px solid var(--line);
  padding:12px 0 11px;
}

.bar-sub{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:5px 0;
  font-size:12px; color:var(--tx2);
}
/* 줄바꿈 대신 가로 스크롤 — 항목이 늘어도 높이가 안 늘어난다 */
.bar-sub > .wrap{
  display:flex; gap:12px; align-items:center;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.bar-sub > .wrap::-webkit-scrollbar{ display:none }

/* ══ 연결 상태 점 ════════════════════════════════════════════════════════ */
/* 꼬리말 — 🔴 전 페이지 공통 (2026-08-03 이관). /24h/ 에만 인라인으로 있던 것. */
footer{ margin-top:20px; text-align:center; font-size:11px; color:var(--tx3);
        line-height:1.8; max-width:var(--wrap-max); margin-left:auto; margin-right:auto;
        padding:0 var(--wrap-pad) }
footer .by{ display:block; margin-top:7px; padding-top:7px;
            border-top:1px solid var(--line); color:var(--tx3); opacity:.8;
            letter-spacing:.3px }

/*── 💡 이게 뭔가요 (설명 아코디언) — 🔴 전 페이지 공통 (2026-08-03 이관) ──────
   원래 /24h/ 에만 인라인으로 있었다. /24h/futures/ 에 같은 설명을 붙이면서
   **두 화면이 같은 모양이어야** 하므로 여기로 올렸다.
   ⚠️ 페이지에서 details/summary/.exp 를 다시 선언하지 말 것 — 인라인이 이겨서 갈라진다.
   ⚠️ 이 details 는 **접힘이 기본**이다. 성적표(.sc)와 헷갈리지 말 것 —
      성적표는 항상 펼침(진석님 지시), 설명은 필요할 때 펼쳐 본다. */
details{ margin:20px 0 8px; background:var(--card); border:1px solid var(--line);
         border-radius:12px }
summary{ padding:14px 16px; cursor:pointer; font-size:13.5px; font-weight:600;
         list-style:none; display:flex; gap:8px }
summary::-webkit-details-marker{ display:none }
summary::after{ content:'▾'; margin-left:auto; color:var(--tx3) }
details[open] summary::after{ content:'▴' }
.exp{ padding:0 16px 16px; font-size:13px; color:var(--tx2); line-height:1.75 }
.exp h4{ color:var(--tx); font-size:13px; margin:14px 0 5px }
.exp h4:first-child{ margin-top:0 }
/* 설명 안의 표 — 가로로 넓어져도 페이지 본문을 밀지 않는다 */
.exp table{ width:100%; border-collapse:collapse; font-size:12.5px; margin:7px 0 }
.exp th{ color:var(--tx3); font-weight:500; text-align:right; padding:3px 0;
         border-bottom:1px solid var(--line) }
.exp th:first-child{ text-align:left }
.exp td{ text-align:right; padding:3px 0; border-top:1px solid var(--line) }
.exp td:first-child{ text-align:left; color:var(--tx) }
.exp b{ color:var(--tx) }
/* 표 위 라벨 — 🔴 "무엇을 맞히는 숫자인지 + 표본" 을 반드시 붙인다.
   같은 화면에 적중률이 여러 개 나오는데(대상이 달라 값이 다르다) 라벨이 없으면
   "뭐가 맞는 거야" 가 된다 (2026-08-03 진석님 지적). */
.exp .cap{ display:block; color:var(--tx3); font-size:11.5px; margin:10px 0 1px }
.exp ul{ margin:8px 0 0; padding:0; list-style:none }
.exp li{ position:relative; padding-left:13px; margin:7px 0 }
.exp li::before{ content:''; position:absolute; left:2px; top:.62em; width:4px; height:4px;
                 border-radius:50%; background:var(--tx3) }
.exp .tl{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
          line-height:1.7; color:var(--tx3); background:var(--bg);
          border:1px solid var(--line); border-radius:8px; padding:10px 12px;
          margin:8px 0; overflow-x:auto; white-space:pre }
.note{ margin-top:14px; padding:11px 13px; border-radius:9px;
       background:rgba(63,185,80,.08); border:1px solid rgba(63,185,80,.28);
       color:#7ee787; font-size:12.5px; line-height:1.65 }
.warn{ margin-top:14px; padding:11px 13px; border-radius:9px;
       background:rgba(240,97,109,.08); border:1px solid rgba(240,97,109,.28);
       color:#ffb3b8; font-size:12.5px; line-height:1.65 }

/* 조회실패·경고 표시 — 🔴 전 페이지 공통 (2026-08-03).
   원래 `#signal-bar .sig-warn` 로 /24h/futures/ 에만 있었다. 그래서 같은 "조회실패"인데
   야간선물에서만 색이 붙고 /24h/ 에서는 맨 글자로 나왔다.
   ⚠️ 페이지에서 .sig-warn 을 다시 선언하지 말 것 — 그러면 두 화면이 또 갈라진다.
   색 #d29922 는 --anchor 와 값이 같지만 뜻이 다르다(앵커=기준선, 이건 경고) — 토큰을 따로 쓴다. */
.sig-warn{ color:#d29922; font-weight:600 }

.live{ display:flex; align-items:center; gap:6px; white-space:nowrap }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--tx3); flex:0 0 auto }
.dot.on{ background:#2ea043; animation:pulse 2s infinite }
.dot.err{ background:var(--err) }
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(46,160,67,.55) }
  70% { box-shadow:0 0 0 7px rgba(46,160,67,0) }
  100%{ box-shadow:0 0 0 0 rgba(46,160,67,0) }
}