/* ============================================================
   onchain_detail.css - CryptoQuant/TradingView 스타일 차트
   ============================================================
   검정 배경, 흰색 가격선, 초록/빨강 오실레이터.
   생성일: 2026-03-06
   ============================================================ */

/* 기본 리셋 */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0e17;color:#e0e6ed;font-family:'Segoe UI',system-ui,sans-serif;font-size:14px}

/* 헤더: 네비게이션 */
.hdr{background:#111827;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1e293b;flex-wrap:wrap;gap:6px}
.hdr h1{font-size:16px;color:#f8fafc;display:flex;align-items:center;gap:6px}
.hdr .badge{background:#eab308;color:#000;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:700}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{color:#94a3b8;font-size:11px;padding:4px 10px;border-radius:5px;text-decoration:none;transition:all .2s}
.nav a:hover{background:#1e293b;color:#f8fafc}
.nav a.on{background:#3b82f6;color:#fff}

/* 토큰 선택 툴바 */
.tbar{background:#111827;padding:6px 20px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #1e293b;flex-wrap:wrap}
.b{padding:4px 10px;border:1px solid #334155;border-radius:5px;background:transparent;color:#94a3b8;cursor:pointer;font-size:11px;transition:all .2s}
.b.on{background:#3b82f6;color:#fff;border-color:#3b82f6}
.b:hover{background:#1e293b;color:#f8fafc}
.sep{color:#334155;margin:0 2px}
.st{margin-left:auto;font-size:10px;color:#64748b}
.st.ok{color:#22c55e}
.st.er{color:#ef4444}

/* 기간 선택 바 */
.pbar{background:#0f1729;padding:5px 20px;display:flex;align-items:center;gap:4px;border-bottom:1px solid #1e293b;flex-wrap:wrap}
.pbar .lb{font-size:10px;color:#64748b;margin-right:2px}
.pb{padding:3px 8px;border:1px solid #1e293b;border-radius:4px;background:transparent;color:#64748b;cursor:pointer;font-size:10px;transition:all .15s}
.pb.on{background:#6366f1;color:#fff;border-color:#6366f1}
.pb:hover{background:#1e293b;color:#e0e6ed}

/* 알림 */
.alert{margin:6px 20px;padding:8px 12px;border-radius:6px;font-size:11px;display:none}
.alert.dng{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#ef4444;display:block}

/* 요약 카드 */
.summ{padding:8px 20px}
.summ-t{font-size:13px;font-weight:700;color:#94a3b8;margin-bottom:6px}
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:5px}
.sc{background:#111827;border:1px solid #1e293b;border-radius:6px;padding:6px;text-align:center;transition:border-color .2s}
.sc:hover{border-color:#3b82f6}
.sc .lb{font-size:9px;color:#64748b;margin-bottom:1px}
.sc .vl{font-size:14px;font-weight:700;color:#f8fafc}
.sc.up .vl{color:#22c55e}
.sc.dn .vl{color:#ef4444}
.sc.wr .vl{color:#eab308}

/* AI 분석 */
.ai{background:#111827;border:1px solid #1e293b;border-radius:10px;padding:12px 16px;margin:8px 20px}
.ai h3{font-size:13px;color:#f8fafc;margin-bottom:6px}
.ai .row{display:flex;gap:12px;flex-wrap:wrap}
.ab{flex:1;min-width:240px;background:#0f1729;border:1px solid #1e293b;border-radius:8px;padding:10px}
.ab .tl{font-size:11px;font-weight:700;margin-bottom:3px}
.ab .vb{display:inline-block;padding:3px 10px;border-radius:16px;font-size:12px;font-weight:700;margin-bottom:4px}
.ab .vb.buy{background:rgba(34,197,94,0.15);color:#22c55e;border:1px solid rgba(34,197,94,0.3)}
.ab .vb.sell{background:rgba(239,68,68,0.15);color:#ef4444;border:1px solid rgba(239,68,68,0.3)}
.ab .vb.hold{background:rgba(234,179,8,0.15);color:#eab308;border:1px solid rgba(234,179,8,0.3)}
.ab .rs{font-size:10px;color:#cbd5e1;line-height:1.5;padding-left:14px}
.ab .rs li{margin-bottom:2px}

/* 지표 그룹 컨테이너 (접기/펼치기) */
.ind-group{margin:6px 20px;border:1px solid #1e293b;border-radius:8px;overflow:hidden;transition:all .3s ease}
.ind-group-hdr{background:#111827;padding:8px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;transition:background .2s}
.ind-group-hdr:hover{background:#1a2332}
.ind-group-hdr h2{font-size:13px;color:#f8fafc;display:flex;align-items:center;gap:8px}
.ind-group-hdr .tag{font-size:9px;padding:2px 6px;border-radius:3px;font-weight:700}
.ind-group-hdr .tag.v1{background:rgba(168,85,247,0.2);color:#a855f7}
.ind-group-hdr .tag.v2{background:rgba(59,130,246,0.2);color:#3b82f6}
.ind-group-hdr .arrow{font-size:16px;color:#64748b;transition:transform .3s ease}
.ind-group-hdr .arrow.open{transform:rotate(180deg)}
.ind-group-body{max-height:0;overflow:hidden;transition:max-height .5s ease}
.ind-group.expanded .ind-group-body{max-height:10000px}
/* 호버 시 자동 펼침 */
.ind-group:hover .ind-group-body{max-height:10000px}
.ind-group:hover .arrow{transform:rotate(180deg)}

/* 차트 블록 */
.chart-block{padding:4px 20px;margin-bottom:2px}
.chart-hd{font-size:12px;font-weight:700;color:#94a3b8;padding:4px 0;display:flex;align-items:center;gap:6px}
.chart-hd .inf{font-size:9px;color:#64748b;font-weight:400;font-style:italic}
.cwrap{position:relative;height:220px;background:#0f1729;border:1px solid #1e293b;border-radius:6px;padding:4px}
.cguide{background:rgba(59,130,246,0.05);border:1px solid rgba(59,130,246,0.12);border-radius:6px;padding:6px 10px;margin-bottom:4px;font-size:10px;color:#94a3b8;line-height:1.5}
.cguide .gt{font-weight:700;color:#3b82f6;margin-bottom:2px;font-size:11px}
.z{display:inline-block;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:700;margin:0 1px}
.zg{background:rgba(34,197,94,0.15);color:#22c55e}
.zr{background:rgba(239,68,68,0.15);color:#ef4444}
.zy{background:rgba(234,179,8,0.15);color:#eab308}
.zb{background:rgba(59,130,246,0.15);color:#3b82f6}
.zp{background:rgba(168,85,247,0.15);color:#a855f7}

/* 크로스헤어 동기화 */
.crosshair-info{position:absolute;top:4px;right:8px;font-size:10px;color:#94a3b8;z-index:10;pointer-events:none;background:rgba(15,23,41,0.85);padding:2px 6px;border-radius:4px}
.sync-date-bar{background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.3);border-radius:6px;padding:6px 14px;margin:4px 20px;font-size:11px;color:#a5b4fc;display:none;align-items:center;gap:8px}
.sync-date-bar .date{font-weight:700;color:#f8fafc;font-size:13px}

/* 정합성 검증 */
.intg{background:#111827;margin:8px 20px;border:1px solid #1e293b;border-radius:6px;padding:8px}
.intg h3{font-size:12px;color:#94a3b8;margin-bottom:4px}
.ig{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:3px}
.ii{font-size:10px;padding:2px 5px;color:#cbd5e1;border-radius:3px;background:#0f1729}
.ii.p{color:#22c55e;border-left:2px solid #22c55e}
.ii.f{color:#ef4444;border-left:2px solid #ef4444}

/* 출처/푸터 */
.src{background:#111827;padding:5px 20px;border-top:1px solid #1e293b;font-size:9px;color:#475569;display:flex;gap:10px;flex-wrap:wrap}
.src a{color:#64748b;text-decoration:none}
.ftr{background:#111827;padding:5px 20px;border-top:1px solid #1e293b;font-size:9px;color:#64748b;text-align:center}

/* 로딩 오버레이 */
.lov{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,14,23,0.85);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999}
.lov .sp{width:32px;height:32px;border:3px solid #1e293b;border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite}
.lov .tx{color:#94a3b8;margin-top:8px;font-size:12px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ★ 보조지표 설명 툴팁 (❗ 아이콘 호버/터치 시 표시)
   PC: 마우스 올리면 오른쪽에 팝업
   모바일(아이폰13프로 390px): 화면 하단 중앙 고정 팝업 + 닫기 버튼
   터치 기기는 hover 불가 → JS click 토글 사용 */
.od-help-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:rgba(234,179,8,0.30);color:#eab308;font-size:10px;font-weight:900;
  cursor:help;margin-left:5px;position:relative;vertical-align:middle;flex-shrink:0;user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* PC 전용: 마우스 hover 시 표시 */
@media(hover:hover) and (pointer:fine){.od-help-icon:hover .od-tooltip{display:block}}
/* 터치(모바일) 전용: JS가 .active 클래스 토글 */
.od-help-icon.active .od-tooltip{display:block}

/* ── PC 툴팁 (절대 위치) ── */
.od-tooltip{display:none;position:absolute;left:24px;top:-8px;z-index:9999;
  width:340px;max-width:90vw;padding:14px 16px;
  background:rgba(15,23,42,0.97);border:1px solid #334155;border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);font-size:12px;line-height:1.7;color:#cbd5e1;
  pointer-events:auto}
.od-tooltip .tt-title{font-size:13px;font-weight:700;color:#f8fafc;margin-bottom:6px;border-bottom:1px solid #334155;padding-bottom:4px}
.od-tooltip .tt-desc{margin-bottom:6px}
.od-tooltip .tt-formula{background:#1e293b;border-radius:6px;padding:6px 10px;margin:6px 0;font-family:monospace;font-size:11px;color:#38bdf8;word-break:break-all}
.od-tooltip .tt-section{margin-top:8px}
.od-tooltip .tt-label{font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.5px}
.od-tooltip .tt-buy{color:#22c55e;font-weight:600}
.od-tooltip .tt-sell{color:#ef4444;font-weight:600}
.od-tooltip .tt-hold{color:#eab308;font-weight:600}
.od-tooltip .tt-reason{font-size:11px;color:#94a3b8;margin-top:2px}
/* 닫기 버튼 (모바일에서만 보임) */
.od-tt-close{display:none;position:absolute;top:8px;right:10px;width:28px;height:28px;border:none;border-radius:50%;
  background:rgba(239,68,68,0.25);color:#ef4444;font-size:18px;font-weight:900;cursor:pointer;
  line-height:28px;text-align:center;-webkit-tap-highlight-color:transparent}
.od-tt-close:active{background:rgba(239,68,68,0.5)}
/* 반투명 배경 오버레이 (모바일에서만 보임) */
.od-tooltip-backdrop{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6);z-index:9998;
  -webkit-tap-highlight-color:transparent}

/* ── 모바일 최적화: 아이폰13프로(390px) 기준 ── */
@media(max-width:640px){
  .od-tooltip{position:fixed!important;left:5vw!important;right:5vw!important;top:auto!important;bottom:20px!important;
    width:90vw!important;max-width:90vw!important;max-height:70vh;overflow-y:auto;
    border-radius:14px;padding:16px 14px 14px;font-size:13px;line-height:1.8;
    -webkit-overflow-scrolling:touch;box-shadow:0 -4px 40px rgba(0,0,0,0.7)}
  .od-tooltip .tt-title{font-size:14px;padding-right:36px}
  .od-tooltip .tt-formula{font-size:12px;padding:8px 10px;word-break:break-all}
  .od-tooltip .tt-buy,.od-tooltip .tt-sell,.od-tooltip .tt-hold{font-size:13px}
  .od-tooltip .tt-reason{font-size:12px}
  .od-tooltip .tt-section{margin-top:10px}
  .od-tt-close{display:block}
}

/* 모바일 반응형 */
@media(max-width:600px){
  .hdr{padding:6px 10px}
  .hdr h1{font-size:13px}
  .nav a{font-size:9px;padding:3px 5px}
  .tbar,.pbar{padding:4px 10px}
  .sg{grid-template-columns:repeat(3,1fr)}
  .sc .vl{font-size:12px}
  .chart-block{padding:2px 10px}
  .cwrap{height:170px!important}
  .ai{margin:4px 10px;padding:8px}
  .ai .row{flex-direction:column}
  .cguide{font-size:9px;padding:4px 6px}
  .ind-group{margin:4px 10px}
}