@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   nocappov — NEON CYBER TRADING 테마 (2026-08-25)

   적용   /var/www/nocappov/nocappov_theme.css 로 업로드 후
          각 페이지 </head> 바로 위에 아래 한 줄 추가
             <link rel="stylesheet" href="/nocappov_theme.css">
   롤백   그 한 줄만 지우면 원상복구. 원본 HTML 은 손대지 않음.

   구조   블록마다 [B1]~[B9] 번호가 있다.
          특정 부분만 깨지면 그 블록만 통째로 주석 처리하면 된다.
   ═══════════════════════════════════════════════════════════════ */


/* ───────── [B1] 색 토큰 — 여기만 바꿔도 전체 색감이 따라온다 ───────── */

:root{
  /* 기존 토큰 덮어쓰기 */
  --void:#04060B;
  --ink:#0B1019;
  --ink-2:#101826;

  --cyan:#22D3EE;
  --amber:#F7B733;
  --pink:#F0399C;
  --violet:#A855F7;
  --crimson:#FF3F5F;
  --steel:#63748C;

  --text:#E8EFF9;
  --text-dim:#A3B2C7;
  --text-faint:#63748C;
  --border:rgba(34,211,238,0.14);

  /* 신규 토큰 */
  --edge:#1A2534;
  --edge-hot:#22384B;
  --panel:#0B1019;
  --panel-2:#101826;
  --up:#2BE38A;
  --down:#FF4D6A;
  --notch:12px;
  --f-display:"Chakra Petch","Space Grotesk",system-ui,sans-serif;
}


/* ───────── [B2] 바탕 — 격자 + 발광 ───────── */

body{
  background:
    linear-gradient(rgba(34,211,238,0.04) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg, rgba(34,211,238,0.04) 1px, transparent 1px) 0 0/56px 56px,
    radial-gradient(ellipse 820px 480px at 14% -6%, rgba(34,211,238,0.15), transparent 60%),
    radial-gradient(ellipse 680px 480px at 100% 8%, rgba(240,57,156,0.10), transparent 56%),
    radial-gradient(ellipse 900px 620px at 50% 106%, rgba(34,211,238,0.06), transparent 64%),
    var(--void);
  background-attachment:fixed;
  color:var(--text);
}


/* ───────── [B3] 타이포 — 각진 테크체를 제목/라벨에만 ───────── */

.logo,
.hero-title,
.news-title,
.promo-title,
.ad-title,
.chart-name,
.modal-title,
.feed-head,
.cat-tab,
.tab-item,
.view-btn,
.watch-btn,
.news-cat,
.news-tag,
.hero-tag,
.hot-badge{
  font-family:var(--f-display);
  letter-spacing:0.02em;
}

.cat-tab,
.tab-item,
.view-btn,
.watch-btn,
.news-cat,
.news-tag,
.hero-tag,
.hot-badge,
.feed-head{
  letter-spacing:0.11em;
  text-transform:uppercase;
}

.mono,
.tick,
.chart-price,
.chart-change,
.age,
.age-text,
.pt-chip{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}

.logo{ letter-spacing:0.07em; }


/* ───────── [B4] 노치 — 모서리를 사선으로 깎는다 ───────── */
/* 둥근 모서리를 쓰던 요소들을 각진 사이버 형태로 교체 */

.hero-card,
.promo-card,
.chart-card,
.modal-card,
.ad-inner{
  border-radius:0;
  clip-path:polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch)));
}

.cat-tab,
.view-btn,
.watch-btn,
.market-expand-btn{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.news-card-link,
.news-top,
.ad-bar,
.pt-chip{
  border-radius:0;
}


/* ───────── [B5] 히어로 / 프로모 — 네온 테두리 + 발광 ───────── */

.hero-card,
.promo-card{
  border:1px solid rgba(34,211,238,0.35);
  background:
    linear-gradient(180deg, rgba(34,211,238,0.10), transparent 42%),
    linear-gradient(168deg, var(--panel-2), var(--panel) 60%);
  filter:drop-shadow(0 0 18px rgba(34,211,238,0.16));
}

.hero-card:hover,
.promo-card:hover{
  border-color:rgba(34,211,238,0.60);
  filter:drop-shadow(0 0 24px rgba(34,211,238,0.26));
}

.hero-tag,
.news-cat,
.news-tag{
  border:1px solid rgba(34,211,238,0.32);
  background:rgba(34,211,238,0.07);
  color:var(--cyan);
  border-radius:0;
  font-size:9.5px;
  font-weight:700;
  padding:2px 7px;
}

.hot-badge{
  background:var(--pink);
  color:var(--void);
  border-radius:0;
  font-weight:700;
  box-shadow:0 0 12px rgba(240,57,156,0.55);
}

.hero-dot,
.live-dot{
  background:var(--up);
  box-shadow:0 0 9px var(--up);
}


/* ───────── [B6] 카테고리 탭 — 활성 시 시안으로 채워지고 발광 ───────── */

.cat-tab{
  border:1px solid transparent;
  background:transparent;
  color:var(--text-faint);
  font-weight:600;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.cat-tab:hover{
  color:var(--text-dim);
  border-color:var(--edge);
}
.cat-tab.cat-tab.active{
  background:var(--cyan);
  border-color:var(--cyan);
  color:var(--void);
  font-weight:700;
  box-shadow:0 0 20px rgba(34,211,238,0.42);
}
.cat-tab.cat-tab.active .cat-tab-icon,
.cat-tab.cat-tab.active .cat-icon{
  filter:brightness(0.15);
}

.view-toggle{ border-radius:0; border:1px solid var(--edge); }
.view-btn{ color:var(--text-faint); background:transparent; }
.view-btn.view-btn.active{
  background:var(--cyan);
  color:var(--void);
  box-shadow:0 0 16px rgba(34,211,238,0.4);
}


/* ───────── [B7] 뉴스 카드 — 호버 시 모서리 브래킷 ───────── */

.news-card-link,
.news-top{
  position:relative;
  border:1px solid var(--edge);
  background:linear-gradient(160deg, rgba(16,24,38,0.55), rgba(11,16,25,0.55));
  transition:border-color .18s ease, background .18s ease;
}

.news-card-link::before,
.news-card-link::after{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-color:var(--cyan);
  border-style:solid;
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}
.news-card-link::before{ top:-1px; left:-1px; border-width:1px 0 0 1px; }
.news-card-link::after{ bottom:-1px; right:-1px; border-width:0 1px 1px 0; }

.news-card-link:hover{
  border-color:var(--edge-hot);
  background:linear-gradient(160deg, rgba(20,30,46,0.72), rgba(13,19,30,0.72));
}
.news-card-link:hover::before,
.news-card-link:hover::after{ opacity:1; }

.news-title{ line-height:1.32; text-wrap:balance; }
.news-desc-real{ color:var(--text-faint); }
.news-foot,
.age,
.age-text{ color:var(--text-faint); }


/* ───────── [B8] 티커 / 시세 — 상승·하락 색을 액센트와 분리 ───────── */

.ticker-band{
  border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);
  background:rgba(7,11,19,0.72);
}
.tick{ font-size:11.5px; }
.tick .sym{ color:var(--text-dim); font-weight:500; letter-spacing:0.04em; }

.up,
.chart-change.up,
.tick .up{ color:var(--up); }

.down,
.chart-change.down,
.tick .down{ color:var(--down); }

.chart-card{
  border:1px solid var(--edge);
  background:linear-gradient(160deg, rgba(16,24,38,0.6), rgba(11,16,25,0.6));
}
.chart-card:hover{ border-color:var(--edge-hot); }
.chart-price{ font-weight:700; }

.dot.blue,
.dot-sm.blue,
.pt-chip.blue .dot{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }

.dot.red,
.dot-sm.red,
.pt-chip.red .dot{ background:var(--pink); box-shadow:0 0 8px var(--pink); }

.pt-chip{
  border:1px solid var(--edge-hot);
  background:rgba(16,24,38,0.7);
}


/* ───────── [B9] 하단바 / 광고바 / 모달 ───────── */

.bottom-tabbar{
  background:linear-gradient(180deg, rgba(4,6,11,0.86), var(--void) 60%);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--edge);
}

.tab-item{
  position:relative;
  color:var(--text-faint);
  font-size:10px;
  font-weight:600;
  transition:color .18s ease;
}
.tab-item:hover{ color:var(--text-dim); }
.tab-item.tab-item.active{ color:var(--cyan); }
.tab-item.tab-item.active::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:26px;
  height:2px;
  background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);
}

.ad-bar{
  border:1px solid rgba(34,211,238,0.28);
  background:linear-gradient(168deg, var(--panel-2), var(--panel) 60%);
  filter:drop-shadow(0 0 16px rgba(34,211,238,0.14));
}
.ad-icon,
.ad-player-logo{
  background:var(--cyan);
  color:var(--void);
  border-radius:0;
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
  box-shadow:0 0 16px rgba(34,211,238,0.5);
}
.ad-sub{ color:var(--cyan); }
.watch-btn{
  background:var(--text);
  color:var(--void);
  font-weight:700;
  border:0;
  transition:background .18s ease;
}
.watch-btn:hover{ background:var(--cyan); }

.modal-overlay{ background:rgba(2,4,8,0.82); backdrop-filter:blur(8px); }
.modal-card{
  border:1px solid rgba(34,211,238,0.35);
  background:linear-gradient(168deg, var(--panel-2), var(--panel) 60%);
  filter:drop-shadow(0 0 26px rgba(34,211,238,0.20));
}
.modal-source{ color:var(--cyan); }

.reward-toast{
  border:1px solid rgba(43,227,138,0.4);
  background:rgba(11,16,25,0.94);
  border-radius:0;
  backdrop-filter:blur(10px);
}

.bell-badge{ background:var(--pink); color:var(--void); box-shadow:0 0 10px rgba(240,57,156,0.6); }

.risk-disclaimer{ color:var(--text-faint); border-top:1px solid var(--edge); }


/* ───────── 접근성 ───────── */

:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .ticker-track,
  .ticker-track-fwd,
  .ticker-track-rev{ animation:none !important; }
}

/* ───────── [B10] 티커 방향 — 윗줄 좌→우, 아랫줄 우→좌 ───────── */

@keyframes ncpTickerRight{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@keyframes ncpTickerLeft { from{ transform:translateX(0); }    to{ transform:translateX(-50%); } }

#tickerTrack1{ animation:ncpTickerLeft 46s linear infinite !important; }
#tickerTrack2{ animation:ncpTickerRight 58s linear infinite !important; }

.ticker-band:hover #tickerTrack1,
.ticker-band:hover #tickerTrack2{ animation-play-state:paused !important; }

/* ───────── [B11] 광고바 — 배경을 내부 카드에만 ───────── */

.ad-bar{
  background:none !important;
  border:0 !important;
  filter:none !important;
  box-shadow:none !important;
  width:min(100%, var(--wrap-w, 640px));
  margin-left:auto;
  margin-right:auto;
  padding-left:16px;
  padding-right:16px;
}

.ad-inner{
  border:1px solid rgba(34,211,238,0.28);
  background:linear-gradient(168deg, var(--panel-2), var(--panel) 60%);
  filter:drop-shadow(0 0 16px rgba(34,211,238,0.14));
}

/* ───────── [B13] 메뉴 색 구분 — 항목마다 고유색 ───────── */
/* 문제: 하단바·카테고리탭이 전부 같은 회색이라 아이콘 모양으로만 구분됐다.
   해결: 항목마다 --tint 를 주고, 꺼져 있을 땐 흐리게 / 켜지면 그 색으로 채운다.
   끄고 싶으면 이 블록만 통째로 주석 처리. */

/* 카테고리 탭 */
.cat-tabs .cat-tab:nth-child(1){ --tint:#22D3EE; }  /* MARKET  시안 */
.cat-tabs .cat-tab:nth-child(2){ --tint:#7C9BFF; }  /* NASDAQ  블루 */
.cat-tabs .cat-tab:nth-child(3){ --tint:#FFB020; }  /* GOLD    골드 */
.cat-tabs .cat-tab:nth-child(4){ --tint:#2BE38A; }  /* OIL     그린 */
.cat-tabs .cat-tab:nth-child(5){ --tint:#F0399C; }  /* CRYPTO  마젠타 */
.cat-tabs .cat-tab:nth-child(6){ --tint:#FF4D6A; }  /* HOT     레드 */

.cat-tabs .cat-tab{
  color:var(--tint, #63748C);
  opacity:0.48;
  border-color:transparent;
  transition:opacity .18s ease, background .18s ease, color .18s ease;
}
.cat-tabs .cat-tab:hover{ opacity:0.85; border-color:currentColor; }

.cat-tabs .cat-tab.cat-tab.active{
  opacity:1;
  color:#04060B;
  background:var(--tint, #22D3EE);
  border-color:var(--tint, #22D3EE);
  box-shadow:0 0 18px var(--tint, #22D3EE);
}
.cat-tabs .cat-tab.cat-tab.active .cat-tab-icon,
.cat-tabs .cat-tab.cat-tab.active .cat-icon{ filter:brightness(0.15); }

/* 하단 탭바 */
.bottom-tabbar .tab-item:nth-child(1){ --tint:#22D3EE; }  /* HOME    시안 */
.bottom-tabbar .tab-item:nth-child(2){ --tint:#2BE38A; }  /* SIGNALS 그린 */
.bottom-tabbar .tab-item:nth-child(3){ --tint:#F0399C; }  /* BOT     마젠타 */
.bottom-tabbar .tab-item:nth-child(4){ --tint:#B57BFF; }  /* POINTS  퍼플 */
.bottom-tabbar .tab-item:nth-child(5){ --tint:#FFB020; }  /* MY      골드 */

.bottom-tabbar .tab-item{
  color:var(--tint, #63748C);
  opacity:0.40;
  transition:opacity .18s ease;
}
.bottom-tabbar .tab-item:hover{ opacity:0.75; }

.bottom-tabbar .tab-item.tab-item.active{ opacity:1; color:var(--tint, #22D3EE); }
.bottom-tabbar .tab-item.tab-item.active::before{
  background:var(--tint, #22D3EE);
  box-shadow:0 0 12px var(--tint, #22D3EE);
}

/* ───────── [B14] 발광 강화 — 색이 죽어 보이는 문제 ───────── */
/* 원인: opacity 로 흐리게 하니 검정 위에서 채도가 죽고, 1px 헤어라인이라
   빛나는 느낌이 없었다. 투명도를 올리고 glow 를 얹는 방향으로 교체한다. */

:root{ --border:rgba(34,211,238,0.22); }

/* 바탕을 조금 더 살린다 */
body{
  background:
    linear-gradient(rgba(34,211,238,0.05) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg, rgba(34,211,238,0.05) 1px, transparent 1px) 0 0/56px 56px,
    radial-gradient(ellipse 820px 480px at 14% -6%, rgba(34,211,238,0.22), transparent 60%),
    radial-gradient(ellipse 680px 480px at 100% 8%, rgba(240,57,156,0.16), transparent 56%),
    radial-gradient(ellipse 900px 620px at 50% 106%, rgba(124,92,250,0.10), transparent 64%),
    var(--void);
  background-attachment:fixed;
}

/* ── 하단 탭바: 흐림 대신 발광 ── */
.bottom-tabbar .tab-item{ opacity:0.78; }
.bottom-tabbar .tab-item svg,
.bottom-tabbar .tab-item .icon{ filter:drop-shadow(0 0 5px currentColor); }
.bottom-tabbar .tab-item:hover{ opacity:0.94; }

.bottom-tabbar .tab-item.tab-item.active{ opacity:1; }
.bottom-tabbar .tab-item.tab-item.active svg,
.bottom-tabbar .tab-item.tab-item.active .icon{
  filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 18px currentColor);
}
.bottom-tabbar .tab-item.tab-item.active::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 130% at 50% 0%, currentColor, transparent 68%);
  opacity:0.18;
}
.bottom-tabbar .tab-item.tab-item.active::before{
  height:3px;
  box-shadow:0 0 10px currentColor, 0 0 22px currentColor;
}

/* ── 카테고리 탭: 꺼져 있어도 자기 색 테두리 ── */
.cat-tabs .cat-tab{
  opacity:0.85;
  border:1px solid currentColor;
  background:rgba(255,255,255,0.025);
}
.cat-tabs .cat-tab .cat-tab-icon,
.cat-tabs .cat-tab .cat-icon,
.cat-tabs .cat-tab svg{ filter:drop-shadow(0 0 6px currentColor); }
.cat-tabs .cat-tab:hover{ opacity:1; background:rgba(255,255,255,0.06); }

.cat-tabs .cat-tab.cat-tab.active{
  opacity:1;
  box-shadow:0 0 12px var(--tint, #22D3EE), 0 0 30px var(--tint, #22D3EE);
}
.cat-tabs .cat-tab.cat-tab.active .cat-tab-icon,
.cat-tabs .cat-tab.cat-tab.active .cat-icon,
.cat-tabs .cat-tab.cat-tab.active svg{ filter:none; }

/* ── 카드: 면과 선을 둘 다 올린다 ── */
.news-card-link,
.news-top,
.chart-card{
  border-color:rgba(34,211,238,0.20);
  background:linear-gradient(160deg, rgba(23,34,52,0.78), rgba(12,18,28,0.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.055);
}
.news-card-link:hover,
.chart-card:hover{
  border-color:rgba(34,211,238,0.52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09), 0 0 22px rgba(34,211,238,0.14);
}

.hero-card,
.promo-card{
  border:1px solid rgba(34,211,238,0.55);
  filter:drop-shadow(0 0 24px rgba(34,211,238,0.30));
}
.hero-card:hover,
.promo-card:hover{
  border-color:rgba(34,211,238,0.85);
  filter:drop-shadow(0 0 34px rgba(34,211,238,0.44));
}

/* ── 태그 / 배지: 네온답게 ── */
.news-cat,
.news-tag,
.hero-tag{
  border:1px solid currentColor;
  background:rgba(34,211,238,0.10);
  box-shadow:0 0 12px rgba(34,211,238,0.28), inset 0 0 10px rgba(34,211,238,0.10);
  text-shadow:0 0 8px rgba(34,211,238,0.55);
}
.hot-badge{ box-shadow:0 0 10px rgba(240,57,156,0.7), 0 0 24px rgba(240,57,156,0.45); }

/* ── 제목과 수치를 앞으로 ── */
.news-title,
.hero-title,
.chart-price{ color:var(--text); }
.news-desc-real{ color:#8E9BB2; }

.tick .up,   .chart-change.up   { text-shadow:0 0 9px rgba(43,227,138,0.55); }
.tick .down, .chart-change.down { text-shadow:0 0 9px rgba(255,77,106,0.55); }

.pt-chip{
  border-color:rgba(34,211,238,0.35);
  box-shadow:0 0 12px rgba(34,211,238,0.16);
}
.pt-chip.red{ border-color:rgba(240,57,156,0.35); box-shadow:0 0 12px rgba(240,57,156,0.16); }

/* ── 광고 카드 ── */
.ad-inner{
  border-color:rgba(34,211,238,0.45);
  filter:drop-shadow(0 0 22px rgba(34,211,238,0.24));
}
.watch-btn{ box-shadow:0 0 18px rgba(255,255,255,0.22); }
.watch-btn:hover{ box-shadow:0 0 24px rgba(34,211,238,0.6); }

/* ───────── [B15] 정정 — 탭·태그 박스 깨짐 ───────── */
/* 잘못한 것 1: .news-top 은 카드가 아니라 태그가 놓이는 "줄"인데 테두리를 줘서
                제목 위에 빈 박스가 하나 더 생겼다.
   잘못한 것 2: .cat-tab 에 border 를 추가하니 박스 크기가 커져서 탭끼리 밀리고
                우측 보기전환 버튼과 겹쳤다.
   해결: 테두리 대신 배경 + 밑줄 + 발광으로 색을 구분한다. 크기는 안 건드린다. */

/* 태그 줄 — 박스 제거 */
.news-top{
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
}

/* NEW 배지 — 테두리 없이 발광만 */
.news-tag{
  border:0 !important;
  background:rgba(240,57,156,0.14) !important;
  color:#FF6FB6 !important;
  box-shadow:0 0 12px rgba(240,57,156,0.30) !important;
  text-shadow:0 0 8px rgba(240,57,156,0.55);
}

/* 카테고리 칩은 테두리 유지하되 얇고 단정하게 */
.news-cat{
  border:1px solid rgba(34,211,238,0.45) !important;
  background:rgba(34,211,238,0.08) !important;
  box-shadow:0 0 10px rgba(34,211,238,0.20) !important;
}

/* ── 카테고리 탭: 크기를 바꾸지 않는 방식으로 색 구분 ── */
.cat-tabs .cat-tab{
  border:1px solid transparent !important;
  opacity:1;
  background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  box-shadow:inset 0 -2px 0 currentColor;
}
.cat-tabs .cat-tab:hover{
  background:linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04));
  box-shadow:inset 0 -2px 0 currentColor, 0 0 14px -4px currentColor;
}
.cat-tabs .cat-tab .cat-tab-icon,
.cat-tabs .cat-tab .cat-icon,
.cat-tabs .cat-tab svg{ filter:drop-shadow(0 0 7px currentColor); }

.cat-tabs .cat-tab.cat-tab.active{
  background:var(--tint, #22D3EE);
  color:#04060B;
  box-shadow:0 0 14px var(--tint, #22D3EE), 0 0 32px -6px var(--tint, #22D3EE);
}
.cat-tabs .cat-tab.cat-tab.active .cat-tab-icon,
.cat-tabs .cat-tab.cat-tab.active .cat-icon,
.cat-tabs .cat-tab.cat-tab.active svg{ filter:brightness(0.15); }

/* 우측 보기전환 버튼이 탭을 덮지 않도록 여백 */
.cat-tabs{ padding-right:8px; }
.view-toggle{
  background:rgba(4,6,11,0.92);
  box-shadow:-14px 0 18px rgba(4,6,11,0.92);
}

/* ───────── [B16] 시그널 배너 제거 + 광고바 → 우하단 포인트 표지판 ───────── */
/* 1) 상단 "AI Crypto Signals" 배너는 하단 SIGNALS 메뉴와 중복이라 숨긴다.
      뉴스가 첫 화면부터 바로 보이게.
   2) 화면을 가로로 채우던 광고바를 우측 하단 작은 버튼으로 줄인다.
      뉴스 스크롤을 막지 않고, "광고 보기"가 아니라 "포인트 받기"로 읽히게. */

/* 1. 시그널 배너 숨김 */
.promo-card{ display:none !important; }

/* 2. 광고바 껍데기를 우하단 작은 버튼으로 */
.ad-bar{
  position:fixed !important;
  left:auto !important;
  right:12px !important;
  bottom:76px !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  z-index:150 !important;
}

.ad-bar .ad-inner{
  display:inline-flex !important;
  align-items:center !important;
  gap:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
  width:auto !important;
}

/* 아이콘과 안내문구는 버튼 하나로 합친다 */
.ad-bar .ad-icon,
.ad-bar .ad-mid,
.ad-bar .ad-title,
.ad-bar .ad-sub{ display:none !important; }

/* 표지판 본체 */
.ad-bar .watch-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:10px 14px !important;
  margin:0 !important;
  border:0 !important;
  font-size:0 !important;
  line-height:1 !important;
  color:#1A1206 !important;
  background:linear-gradient(150deg, #FFD24A, #FF9A00) !important;
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  box-shadow:0 0 16px rgba(255,176,32,0.55), 0 0 36px rgba(255,176,32,0.28) !important;
  animation:ncpCoin 2.8s ease-in-out infinite;
}
.ad-bar .watch-btn::before{
  content:"◆";
  font-size:13px;
  line-height:1;
}
.ad-bar .watch-btn::after{
  content:"GET POINTS";
  font-family:"Chakra Petch","Space Grotesk",system-ui,sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.11em;
  line-height:1;
}
.ad-bar .watch-btn:hover{
  background:linear-gradient(150deg, #FFE485, #FFB020) !important;
  box-shadow:0 0 22px rgba(255,176,32,0.8), 0 0 46px rgba(255,176,32,0.4) !important;
}

@keyframes ncpCoin{
  0%,100%{ box-shadow:0 0 14px rgba(255,176,32,0.45), 0 0 30px rgba(255,176,32,0.20); }
  50%    { box-shadow:0 0 22px rgba(255,176,32,0.75), 0 0 46px rgba(255,176,32,0.38); }
}

/* +10 안내 뱃지 */
.ad-bar::before{
  content:"+10";
  position:absolute;
  top:-9px;
  right:-4px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.04em;
  color:#04060B;
  background:#F0399C;
  padding:1px 6px;
  box-shadow:0 0 12px rgba(240,57,156,0.7);
  pointer-events:none;
}

/* 광고 재생이 시작되면 원래 폭으로 되돌린다 */
.ad-bar:has(.ad-player-content){
  left:0 !important;
  right:0 !important;
  bottom:64px !important;
  padding:12px 16px !important;
}
.ad-bar:has(.ad-player-content)::before{ display:none; }

@media (prefers-reduced-motion:reduce){
  .ad-bar .watch-btn{ animation:none; }
}

/* ───────── [B17] GET POINTS 버튼 — 천천히 좌우로 표류 ───────── */
/* 화면 우측에서 좌측 끝까지 아주 느리게 오간다(왕복 26초).
   손을 올리거나 누르면 멈춘다. 데스크톱에선 너무 멀리 가지 않도록 거리를 제한. */

.ad-bar{
  animation:ncpDrift 26s ease-in-out infinite;
  will-change:transform;
}
.ad-bar:hover,
.ad-bar:active,
.ad-bar:focus-within{ animation-play-state:paused; }

@keyframes ncpDrift{
  0%   { transform:translateX(0); }
  50%  { transform:translateX(max(-520px, calc(100% + 24px - 100vw))); }
  100% { transform:translateX(0); }
}

/* 표지판 자체는 살짝 더 크고 또렷하게 */
.ad-bar .watch-btn{ padding:11px 15px !important; }
.ad-bar .watch-btn::after{ font-size:12px !important; }

@media (prefers-reduced-motion:reduce){
  .ad-bar{ animation:none; }
}

/* ───────── [B19] GET POINTS 배지 — 블루·레드 둘 다 ───────── */
/* B16 에서 레드 하나만 달았는데 실제 보상은 블루 10 + 레드 10 이다. */

.ad-bar::before,
.ad-bar::after{
  position:absolute;
  top:-9px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.04em;
  line-height:1.5;
  color:#04060B;
  padding:1px 6px;
  pointer-events:none;
}

.ad-bar::before{
  content:"+10";
  right:32px;
  background:#22D3EE;
  box-shadow:0 0 12px rgba(34,211,238,0.7);
}

.ad-bar::after{
  content:"+10";
  right:-4px;
  background:#F0399C;
  box-shadow:0 0 12px rgba(240,57,156,0.7);
}

.ad-bar:has(.ad-player-content)::before,
.ad-bar:has(.ad-player-content)::after{ display:none; }

/* ───────── [B19] GET POINTS 배지 — 블루·레드 둘 다 ───────── */
/* B16 에서 레드 하나만 달았는데 실제 보상은 블루 10 + 레드 10 이다. */

.ad-bar::before,
.ad-bar::after{
  position:absolute;
  top:-9px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.04em;
  line-height:1.5;
  color:#04060B;
  padding:1px 6px;
  pointer-events:none;
}

.ad-bar::before{
  content:"+10";
  right:32px;
  background:#22D3EE;
  box-shadow:0 0 12px rgba(34,211,238,0.7);
}

.ad-bar::after{
  content:"+10";
  right:-4px;
  background:#F0399C;
  box-shadow:0 0 12px rgba(240,57,156,0.7);
}

.ad-bar:has(.ad-player-content)::before,
.ad-bar:has(.ad-player-content)::after{ display:none; }


/* ═══════════════════════════════════════════════════════════════
   [B20] 봇 페이지 시인성 (2026-08-28)
   스코프  <body data-page="bot">  — 홈·시그널에는 영향 없음
   원칙    구조·배치·기능은 건드리지 않는다. 표면·테두리·색만.
   롤백    이 블록 전체를 지우거나 body 의 data-page 속성을 지운다.
   ═══════════════════════════════════════════════════════════════ */
[data-page="bot"]{
  --b-status:#22D3EE;   /* 상태     */
  --b-sym:#A855F7;      /* 종목     */
  --b-bot:#F0399C;      /* 봇 선택  */
  --b-exch:#F7B733;     /* 거래소·설정 */
  --b-surf:#111A28;     /* 카드 표면 — 배경보다 확실히 밝게 */
  --b-surf2:#0C131F;
}

/* ── 카드를 배경에서 띄운다 ──
   border 를 새로 주면 크기가 변하므로, box-shadow 로 1px 링을 그린다.
   레이아웃은 1px 도 안 움직인다. */
[data-page="bot"] .status-card,
[data-page="bot"] .sym-card,
[data-page="bot"] .set-card,
[data-page="bot"] .exch-row,
[data-page="bot"] .other-bots{
  background:linear-gradient(168deg, var(--b-surf) 0%, var(--b-surf2) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.085),
    0 8px 24px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07);
}
[data-page="bot"] .status-card{ box-shadow:
    0 0 0 1px rgba(34,211,238,.28),
    0 8px 24px rgba(0,0,0,.55),
    0 0 22px rgba(34,211,238,.10),
    inset 0 1px 0 rgba(255,255,255,.08); }
[data-page="bot"] .sym-card{ box-shadow:
    0 0 0 1px rgba(168,85,247,.26),
    0 8px 24px rgba(0,0,0,.55),
    0 0 20px rgba(168,85,247,.09),
    inset 0 1px 0 rgba(255,255,255,.07); }
[data-page="bot"] .exch-row{ box-shadow:
    0 0 0 1px rgba(247,183,51,.24),
    0 8px 24px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07); }

/* ── 구역 제목을 읽히게 ── */
[data-page="bot"] .section-label{
  color:#A8B6CC;
  letter-spacing:.13em;
  font-weight:700;
  text-transform:uppercase;
}
[data-page="bot"] .head-title{ color:#F1F6FF; letter-spacing:-.01em; }
[data-page="bot"] .head-sub{ color:#8494AC; }

/* ── 종목 카드 안쪽 ── */
[data-page="bot"] .sym-name{ color:#EFF4FC; font-weight:700; }
[data-page="bot"] .sym-price{ color:#F5F8FF; }
[data-page="bot"] .sym-tag{
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
  font-weight:700; letter-spacing:.05em;
}
[data-page="bot"] .sym-card.btc .sym-icon{ box-shadow:0 0 12px rgba(247,183,51,.55); }
[data-page="bot"] .sym-card.eth .sym-icon{ box-shadow:0 0 12px rgba(139,157,255,.55); }

/* ── 선택 상태를 확실하게 ──
   지금은 눌렸는지 아닌지 배경만 살짝 달라 구분이 어렵다. */
[data-page="bot"] .chip{
  background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
  color:#96A4BA;
  transition:box-shadow .16s, color .16s, background .16s;
}
[data-page="bot"] .chip .chip-sub{ color:#6E7C92; }
[data-page="bot"] .chip.active{
  background:linear-gradient(150deg, rgba(34,211,238,.24), rgba(34,211,238,.06));
  box-shadow:
    0 0 0 1.5px rgba(34,211,238,.75),
    0 0 18px rgba(34,211,238,.35),
    inset 0 0 16px rgba(34,211,238,.12);
  color:#EAFDFF;
}
[data-page="bot"] .chip.active .chip-sub{ color:#9BE9F8; }

/* 상단 Live Signals / Auto-Trading 토글 */
[data-page="bot"] .toggle-2 .active{
  box-shadow:
    0 0 0 1.5px rgba(34,211,238,.7),
    0 0 16px rgba(34,211,238,.3);
  color:#EAFDFF;
}

/* ── 상태 배지 ── */
[data-page="bot"] .status-pill{
  box-shadow:0 0 0 1px rgba(43,227,138,.45), 0 0 14px rgba(43,227,138,.22);
  font-weight:700;
}
[data-page="bot"] .pulse{ filter:drop-shadow(0 0 6px currentColor); }

/* ── 저장 버튼 ── */
[data-page="bot"] .save-btn{
  background:linear-gradient(140deg,#38E0F5,#0EA5E9);
  color:#04121F;
  font-weight:800;
  letter-spacing:.04em;
  box-shadow:0 0 22px rgba(34,211,238,.42), inset 0 1px 0 rgba(255,255,255,.35);
}
[data-page="bot"] .save-btn:active{ transform:translateY(1px); }

/* ── 준비중 카드는 눈에 덜 띄게 ── */
[data-page="bot"] .other-bots{ opacity:.72; }

/* ── 거래소 연결 ── */
[data-page="bot"] .exch-name{ color:#EFF4FC; font-weight:700; }
[data-page="bot"] .exch-status{ font-weight:700; }

[data-page="bot"] .disclaimer{ color:#6B7789; }


/* ═══════════════════════════════════════════════════════════════
   [B21] 내정보 수정(myedit) — 폼 시인성 (2026-08-29)
   스코프  <body data-page="edit">
   원칙    구조·배치·기능은 건드리지 않는다. 표면·테두리·색만.
           테두리는 box-shadow 로 그려서 레이아웃이 1px 도 안 움직인다.
   ═══════════════════════════════════════════════════════════════ */
[data-page="edit"]{
  --e-surf:#111A28;
  --e-surf2:#0C131F;
  --e-line:rgba(255,255,255,.085);
}

/* ── 카드를 배경에서 띄운다 ── */
[data-page="edit"] .field-card,
[data-page="edit"] .status-card,
[data-page="edit"] .pw-panel,
[data-page="edit"] .code-row,
[data-page="edit"] .email-row,
[data-page="edit"] .avatar-grid{
  background:linear-gradient(168deg, var(--e-surf) 0%, var(--e-surf2) 100%);
  box-shadow:
    0 0 0 1px var(--e-line),
    0 8px 24px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* ── 입력창 — 폼 페이지에서 제일 중요하다 ──
   배경보다 밝게, 테두리를 또렷하게, 글자를 확실하게. */
[data-page="edit"] input[type="text"],
[data-page="edit"] input[type="email"],
[data-page="edit"] input[type="password"],
[data-page="edit"] input[type="number"],
[data-page="edit"] textarea,
[data-page="edit"] select,
[data-page="edit"] .field{
  background:#0A121D;
  color:#F0F5FD;
  box-shadow:0 0 0 1px rgba(255,255,255,.13), inset 0 2px 6px rgba(0,0,0,.45);
  caret-color:#22D3EE;
}
[data-page="edit"] input::placeholder,
[data-page="edit"] textarea::placeholder{ color:#5C6577; }

/* 포커스 — 지금 어디를 입력 중인지 한눈에 */
[data-page="edit"] input:focus,
[data-page="edit"] textarea:focus,
[data-page="edit"] select:focus,
[data-page="edit"] .field:focus-within{
  outline:none;
  background:#0C1826;
  box-shadow:
    0 0 0 1.5px rgba(34,211,238,.75),
    0 0 16px rgba(34,211,238,.30),
    inset 0 2px 6px rgba(0,0,0,.35);
}

/* ── 라벨 ── */
[data-page="edit"] .section-label{
  color:#A8B6CC; letter-spacing:.13em; font-weight:700; text-transform:uppercase;
}
[data-page="edit"] .head-title{ color:#F1F6FF; }
[data-page="edit"] .email-label,
[data-page="edit"] .pw-label{ color:#9DAAC0; font-weight:700; }
[data-page="edit"] .email-val{ color:#E6EDF8; }
[data-page="edit"] .pw-sub{ color:#7C8798; }

/* ── 버튼 ── */
[data-page="edit"] .save-btn,
[data-page="edit"] .send-btn{
  background:linear-gradient(140deg,#38E0F5,#0EA5E9);
  color:#04121F; font-weight:800; letter-spacing:.04em;
  box-shadow:0 0 22px rgba(34,211,238,.42), inset 0 1px 0 rgba(255,255,255,.35);
}
[data-page="edit"] .save-btn:active,
[data-page="edit"] .send-btn:active{ transform:translateY(1px); }
[data-page="edit"] .pw-btn{
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
  color:#CFDCEE;
}
[data-page="edit"] .pw-btn:hover{ box-shadow:0 0 0 1px rgba(34,211,238,.5); color:#EAFDFF; }
[data-page="edit"] .forgot-link{ color:#7DD3FC; }
[data-page="edit"] .sent-msg{ color:#5EE79B; font-weight:700; }

/* ── 아바타 선택 ── */
[data-page="edit"] .avatar-grid .preview,
[data-page="edit"] .preview-avatar{
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}
[data-page="edit"] .avatar-grid .active,
[data-page="edit"] .avatar-grid .check{
  box-shadow:0 0 0 2px rgba(34,211,238,.85), 0 0 18px rgba(34,211,238,.45);
}
[data-page="edit"] .preview-name{ color:#F1F6FF; font-weight:700; }

/* ── 등급 목록 — 등급마다 점 색을 다르게 ──
   마이페이지의 한 줄 사다리와 역할이 다르다(여긴 달성 이력).
   구조는 그대로 두고 색만 준다. */
[data-page="edit"] .tier-row{
  box-shadow:0 0 0 1px rgba(255,255,255,.07);
}
[data-page="edit"] .tier-name{ color:#DCE5F3; font-weight:700; }
[data-page="edit"] .tier-dates{ color:#6E7C92; }
[data-page="edit"] .tier-state{ font-weight:700; }
[data-page="edit"] .tier-row.active{
  box-shadow:0 0 0 1.5px rgba(168,85,247,.7), 0 0 18px rgba(168,85,247,.28);
}
[data-page="edit"] .tier-row.off{ opacity:.55; }
[data-page="edit"] .tier-dot{ filter:drop-shadow(0 0 6px currentColor); }

/* ── 저장 바 ── */
[data-page="edit"] .save-bar{
  background:rgba(5,7,14,.94);
  backdrop-filter:blur(14px);
  box-shadow:0 -1px 0 rgba(255,255,255,.07);
}


/* ═══════════════════════════════════════════════════════════════
   [B22] 하단 탭바 통일 (2026-08-29)
   좁은 화면  가로 꽉 채움 (앱 하단바)
   넓은 화면  가운데 떠 있는 알약 — 화면 끝까지 퍼지지 않는다
   새 마이페이지(.tabbar/.tab)와 보이는 결과를 맞춘 것.
   위치·크기에만 !important 를 쓴다. 페이지마다 .wrap .bottom-tabbar 처럼
   더 강한 선택자를 갖고 있어서 그렇지 않으면 적용되지 않는다.
   ═══════════════════════════════════════════════════════════════ */
.bottom-tabbar{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  transform:none !important;
  border-radius:0 !important;
  z-index:60;
  background:rgba(5,7,14,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.07);
  padding-bottom:env(safe-area-inset-bottom);
}

@media (min-width:860px){
  .bottom-tabbar{
    left:50% !important;
    right:auto !important;
    bottom:22px !important;
    transform:translateX(-50%) !important;
    width:auto !important;
    max-width:none !important;
    border-radius:20px !important;
    border:1px solid rgba(255,255,255,.10);
    border-top:1px solid rgba(255,255,255,.10);
    padding:6px 10px !important;
    padding-bottom:6px !important;
    background:rgba(7,10,18,.94);
    box-shadow:0 16px 44px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03);
  }
  /* 알약 안에서 각 항목이 너무 좁아지지 않게 */
  .bottom-tabbar .tab-item{
    min-width:92px;
  }
}

/* 탭바에 가려 마지막 내용이 안 보이는 것 방지 */
@media (min-width:860px){
  body{ padding-bottom:110px; }
}