/* ============================================================
   hasri-ai.css — HASRI AI 종목 분석 페이지 v3.1
   ★ 전문 보고서형 레이아웃
      Row1: [레이더240 | 캔들+거래량 flex]
      Row2: [수급바+워터폴 | 4분할 차트grid]

/* ★ v3.98b: 딥링크 zero-flash 부트 — 텔레그램 → HASRI AI 즉시 전환 시
   메인 페이지(검색화면)가 깜빡이지 않도록 hasri-ai 전체 콘텐츠를 숨김.
   startWithStock() → _showStep('chat') 호출 시 이 클래스가 제거되며 콘텐츠 표시. */
body.deeplink-boot #page-hasri-ai .hai-search-wrap,
body.deeplink-boot #page-hasri-ai .hai-chat-wrap,
body.deeplink-boot #page-hasri-ai .hai-dashboard,
body.deeplink-boot #page-hasri-ai #hai-search-wrap,
body.deeplink-boot #page-hasri-ai #hai-chat-wrap,
body.deeplink-boot #page-hasri-ai #hai-dashboard {
    display: none !important;
}
/* 딥링크 부트 중 페이지 배경색은 유지 (검정 — 빈 화면이 자연스럽게 보임) */
body.deeplink-boot #page-hasri-ai { background: #070d1a; }

/* ────────────────────────────────────────────────────────────
   HASRI 커스텀 툴팁 — JS 팝업 방식 (overflow 잘림 없음)
   .hai-tip 요소: cursor:help + ? 뱃지 자동 주입 (JS로 처리)
   실제 팝업: #hai-tooltip-popup (body에 고정, fixed)
──────────────────────────────────────────────────────────── */
.hai-tip {
    position: relative;
    cursor: help;
}

/* ? 뱃지 — JS가 .hai-tip 안에 자동 삽입 */
.hai-tip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px; height: 14px;
    background: rgba(99,102,241,.18);
    border: 1px solid rgba(99,102,241,.35);
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    color: #818cf8;
    cursor: help;
    flex-shrink: 0;
    margin-left: 4px;
    line-height: 1;
    transition: background .15s, color .15s;
    vertical-align: middle;
}
.hai-tip:hover .hai-tip-badge,
.hai-tip-badge:hover {
    background: rgba(99,102,241,.35);
    color: #c7d2fe;
}

/* JS 팝업 레이어 (body 직속, fixed) */
#hai-tooltip-popup {
    position: fixed;
    z-index: 99999;
    max-width: 280px;
    background: #0f1e38;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.65;
    padding: 10px 13px;
    border-radius: 8px;
    border: 1px solid #2d4a6a;
    box-shadow: 0 8px 28px rgba(0,0,0,.65);
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
#hai-tooltip-popup.visible {
    opacity: 1;
}
/* 말풍선 꼬리 */
#hai-tooltip-popup::before {
    content: '';
    position: absolute;
    left: var(--tail-left, 50%);
    transform: translateX(-50%);
    border: 5px solid transparent;
}
#hai-tooltip-popup.dir-up::before {
    bottom: -10px;
    border-top-color: #2d4a6a;
}
#hai-tooltip-popup.dir-down::before {
    top: -10px;
    border-bottom-color: #2d4a6a;
}

/* 패널 타이틀 hover 색상 강조 */
.hai-panel-title.hai-tip:hover,
.hai-waterfall-sub-title.hai-tip:hover,
.hai-supply-card-title.hai-tip:hover { color: #94a3b8; }


      Row3: [AI 텍스트 분석 – 전폭]
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   0. 페이지 루트 & 단계 컨테이너
──────────────────────────────────────────────────────────── */
/* page-content가 hasri-ai일 때 height:100% 확보 */
.page-content:has(#page-hasri-ai.active) {
    display: flex;
    flex-direction: column;
    padding: 0;
}

#page-hasri-ai {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - var(--header-h, 56px) - 48px); /* page-content padding 보정 */
    background: #070d1a;
    color: #e2e8f0;
    font-family: 'Noto Sans KR', sans-serif;
    overflow: hidden;
}
#page-hasri-ai.active { display: flex; }

/* ════════════════════════════════════════════════════════════
   ★ My Stocks 접근 안내 페이지 (#page-watchlist-guard)
   — HASRI AI 채팅 확인 화면과 100% 동일 구조/배경/디자인
   ════════════════════════════════════════════════════════════ */
.page-content:has(#page-watchlist-guard.active),
.page-content:has(#page-hxp-guard.active) {
    display: flex;
    flex-direction: column;
    padding: 0;
}
/* ★ v50: #page-hxp-guard(HASRI AI Explorer 안내)도 동일 디자인 */
#page-hxp-guard,
#page-watchlist-guard {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - var(--header-h, 56px) - 48px);
    background: #070d1a;             /* page-hasri-ai 와 동일 배경 */
    color: #e2e8f0;
    font-family: 'Noto Sans KR', sans-serif;
    overflow: hidden;
}
#page-watchlist-guard.active,
#page-hxp-guard.active { display: flex; }
/* 가드 페이지에서는 채팅 래퍼를 항상 표시 (display:none 기본값 해제) */
#page-watchlist-guard .wlg-chat-wrap,
#page-hxp-guard .wlg-chat-wrap {
    display: flex;
    overflow-y: auto;
}
/* 링크 버튼 3개 + 돌아가기 — 세로 스택 (모바일 가독성) */
#page-watchlist-guard .wlg-chat-actions,
#page-hxp-guard .wlg-chat-actions {
    flex-direction: column;
    gap: 10px;
}

/* ════════════════════════════════════════════════════════════
   ★ AI Signal Chart 진입 게이트 (#page-aisignalchart)
   — HASRI AI 채팅 확인 화면과 100% 동일 구조/배경/디자인
   ════════════════════════════════════════════════════════════ */
.page-content:has(#page-aisignalchart.active) {
    display: flex;
    flex-direction: column;
    padding: 0;
}
#page-aisignalchart {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - var(--header-h, 56px) - 48px);
    background: #070d1a;             /* page-hasri-ai 와 동일 배경 */
    color: #e2e8f0;
    font-family: 'Noto Sans KR', sans-serif;
    overflow: hidden;
}
#page-aisignalchart.active { display: flex; }
#page-aisignalchart .acg-stage-wrap {
    display: flex;
    overflow-y: auto;
}
/* 종목 검색창 — 타이핑 완료 후 페이드인 */
.acg-search-section {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    animation: hai-msg-in .4s ease;
}
.acg-search-box { max-width: 480px; width: 100%; }
/* 한도 안내 링크 버튼 — 세로 스택 */
#page-aisignalchart .acg-limit-actions {
    flex-direction: column;
    gap: 10px;
}

/* ════════════════════════════════════════════════════════════
   ★ v171: AI Signal Chart 현재 탭 로딩 오버레이
   종목 선택 즉시 전체 화면을 덮고, 새 탭이 열리면 자동 해제
   ════════════════════════════════════════════════════════════ */
.acg-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #070d1a 0%, #0f1729 50%, #0a1020 100%);
    animation: acgLoadFadeIn 0.2s ease-out;
}
@keyframes acgLoadFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.acg-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.acg-loading-spinner {
    width: 52px; height: 52px;
    border: 3px solid rgba(79, 209, 197, 0.25);
    border-top-color: #4fd1c5;
    border-radius: 50%;
    animation: acgLoadSpin 0.9s linear infinite;
}
@keyframes acgLoadSpin { to { transform: rotate(360deg); } }
.acg-loading-title {
    color: #4fd1c5;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.acg-loading-stock {
    color: #e2e8f0;
    font-size: 15px;
    font-weight: 500;
    margin-top: -8px;
}
.acg-loading-progress {
    width: 220px; height: 3px;
    background: rgba(79, 209, 197, 0.12);
    border-radius: 2px;
    overflow: hidden;
}
.acg-loading-bar {
    width: 0%; height: 100%;
    background: linear-gradient(90deg, #4fd1c5, #38b2ac);
    border-radius: 2px;
    transition: width 0.4s ease-out;
}
.acg-loading-step {
    color: rgba(148, 163, 184, 0.8);
    font-size: 13px;
    font-weight: 400;
    animation: acgLoadStepFade 1.5s ease-in-out infinite;
}
@keyframes acgLoadStepFade {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* ════════════════════════════════════════════════════════════
   ★ H.555 Performance 소개 페이지 (#page-ha555)
   — HASRI AI 채팅 확인 화면과 100% 동일 구조/배경/디자인
   ════════════════════════════════════════════════════════════ */
.page-content:has(#page-ha555.active) {
    display: flex;
    flex-direction: column;
    padding: 0;
}
#page-ha555 {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - var(--header-h, 56px) - 48px);
    background: #070d1a;             /* page-hasri-ai 와 동일 배경 */
    color: #e2e8f0;
    font-family: 'Noto Sans KR', sans-serif;
    overflow: hidden;
}
#page-ha555.active { display: flex; }
/* 소개 페이지에서는 채팅 래퍼를 항상 표시 (display:none 기본값 해제) */
#page-ha555 .h5g-chat-wrap {
    display: flex;
    overflow-y: auto;
}

/* 검색·채팅 단계 */
.hai-search-wrap {
    display: none;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    overflow: hidden;
    position: relative;   /* 자식 absolute 요소 기준 컨테이너 (황소 펫 재구성 대비 유지) */
}
.hai-chat-wrap {
    display: none;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 24px;
    overflow: visible;
}

/* 대시보드 단계 */
.hai-dashboard {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.hai-dashboard::-webkit-scrollbar { width: 6px; }
.hai-dashboard::-webkit-scrollbar-thumb { background: #1e2d4a; border-radius: 3px; }

/* ────────────────────────────────────────────────────────────
   1. 검색 UI
──────────────────────────────────────────────────────────── */
.hai-search-inner {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; max-width: 900px; width: 100%;
    gap: 16px;
    overflow: visible;
    margin: 0 auto;
    padding: 40px 20px 20px;
    justify-content: flex-start;
}
.hai-search-brand { display: flex; align-items: center; gap: 10px; }
.hai-brand-icon  { font-size: 36px; line-height: 1; transition: transform .2s; }
.hai-brand-title { font-size: 28px; font-weight: 800; color: #e2e8f0; letter-spacing: -0.5px; display: inline-flex; align-items: baseline; gap: 8px; }
.hai-brand-555   { font-weight: 900; }
.hai-brand-sub   { font-size: 14px; color: #64748b; }

/* ════════════════════════════════════════════════════════════════
   ★ HASRI AI 555 — 랜덤 브랜드 테마 (새로고침마다 .bt-1~.bt-20 중 1개)
   .hai-search-brand 에 테마 클래스가 붙고, 주로 .hai-brand-555(="555")에
   색감/애니메이션을 적용. 서로 충분히 구분되도록 색·모션·폰트 분위기 차별화.
   ════════════════════════════════════════════════════════════════ */

/* 공통: 그라데이션 텍스트 헬퍼 */
.hai-search-brand[class*="bt-"] .hai-brand-555 {
    background-clip: text; -webkit-background-clip: text;
}

/* ── bt-1 : Neon Cyber (청록 네온 + 깜빡임) ── */
.hai-search-brand.bt-1 .hai-brand-555 {
    color: #22d3ee;
    text-shadow: 0 0 6px #22d3ee, 0 0 14px #06b6d4, 0 0 28px #0891b2;
    animation: bt1-flicker 2.4s infinite;
}
@keyframes bt1-flicker { 0%,100%{opacity:1;} 7%{opacity:.4;} 9%{opacity:1;} 53%{opacity:1;} 55%{opacity:.55;} 57%{opacity:1;} }

/* ── bt-2 : Gold Luxury (골드 + 샤인 스윕) ── */
.hai-search-brand.bt-2 .hai-brand-555 {
    color: transparent;
    background-image: linear-gradient(110deg,#a16207 0%,#fde68a 35%,#fff 50%,#fde68a 65%,#a16207 100%);
    background-size: 220% 100%;
    -webkit-text-fill-color: transparent;
    animation: bt2-shine 3.2s linear infinite;
    filter: drop-shadow(0 1px 2px rgba(161,98,7,.4));
}
@keyframes bt2-shine { 0%{background-position:220% 0;} 100%{background-position:-120% 0;} }

/* ── bt-3 : Holographic (무지개 홀로그램 흐름) ── */
.hai-search-brand.bt-3 .hai-brand-555 {
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg,#ff6ec4,#7873f5,#4ade80,#facc15,#ff6ec4);
    background-size: 300% 100%;
    animation: bt3-holo 4s linear infinite;
}
@keyframes bt3-holo { 0%{background-position:0 0;} 100%{background-position:300% 0;} }

/* ── bt-4 : Glitch (RGB 분리 글리치) ── */
.hai-search-brand.bt-4 .hai-brand-555 {
    color: #f1f5f9; position: relative;
    text-shadow: 2px 0 #ff003c, -2px 0 #00e5ff;
    animation: bt4-glitch 1.6s steps(2,end) infinite;
}
@keyframes bt4-glitch {
    0%,100%{text-shadow:2px 0 #ff003c,-2px 0 #00e5ff; transform:translate(0,0);}
    20%{text-shadow:-2px 0 #ff003c,2px 0 #00e5ff; transform:translate(1px,-1px);}
    40%{text-shadow:2px 1px #ff003c,-1px -2px #00e5ff; transform:translate(-1px,1px);}
    60%{text-shadow:-1px 0 #ff003c,1px 1px #00e5ff; transform:translate(0,0);}
}

/* ── bt-5 : Fire (불꽃 그라데이션 + 흔들림) ── */
.hai-search-brand.bt-5 .hai-brand-555 {
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(0deg,#7f1d1d,#ef4444,#f59e0b,#fde047);
    background-size: 100% 200%;
    animation: bt5-fire 1.6s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 8px rgba(239,68,68,.5));
}
@keyframes bt5-fire { 0%{background-position:0 0; transform:scale(1) rotate(-1deg);} 100%{background-position:0 100%; transform:scale(1.04) rotate(1deg);} }

/* ── bt-6 : Ice / Frost (차가운 블루 반짝임) ── */
.hai-search-brand.bt-6 .hai-brand-555 {
    color: #bae6fd;
    text-shadow: 0 0 5px #7dd3fc, 0 0 12px #38bdf8, 0 2px 0 #0c4a6e;
    animation: bt6-frost 3s ease-in-out infinite;
}
@keyframes bt6-frost { 0%,100%{filter:brightness(1);} 50%{filter:brightness(1.5) drop-shadow(0 0 6px #e0f2fe);} }

/* ── bt-7 : Retro Wave (80s 핑크/퍼플 선셋) ── */
.hai-search-brand.bt-7 .hai-brand-555 {
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(180deg,#f0abfc,#d946ef,#7c3aed);
    text-shadow: 0 0 18px rgba(217,70,239,.6);
    font-style: italic;
}

/* ── bt-8 : Matrix (그린 디지털 + 타이핑 깜빡 커서) ── */
.hai-search-brand.bt-8 .hai-brand-title { font-family: "Courier New", monospace; }
.hai-search-brand.bt-8 .hai-brand-555 {
    color: #22c55e; text-shadow: 0 0 6px #16a34a, 0 0 12px #15803d;
    border-right: 2px solid #22c55e; padding-right: 2px;
    animation: bt8-caret .9s steps(1) infinite;
}
@keyframes bt8-caret { 0%,100%{border-color:#22c55e;} 50%{border-color:transparent;} }

/* ── bt-9 : Aurora (오로라 흐름) ── */
.hai-search-brand.bt-9 .hai-brand-555 {
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(120deg,#34d399,#22d3ee,#a78bfa,#34d399);
    background-size: 280% 100%;
    animation: bt9-aurora 5s ease infinite;
    filter: drop-shadow(0 0 10px rgba(52,211,153,.4));
}
@keyframes bt9-aurora { 0%{background-position:0 0;} 50%{background-position:140% 0;} 100%{background-position:0 0;} }

/* ── bt-10 : Gradient Pulse (보라-핑크 맥동) ── */
.hai-search-brand.bt-10 .hai-brand-555 {
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg,#a855f7,#ec4899);
    animation: bt10-pulse 1.4s ease-in-out infinite;
}
@keyframes bt10-pulse { 0%,100%{transform:scale(1); filter:drop-shadow(0 0 4px rgba(236,72,153,.4));} 50%{transform:scale(1.12); filter:drop-shadow(0 0 14px rgba(236,72,153,.8));} }

/* ── bt-11 : Chrome 3D (메탈릭 입체) ── */
.hai-search-brand.bt-11 .hai-brand-555 {
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(180deg,#fff 0%,#cbd5e1 45%,#64748b 55%,#f1f5f9 100%);
    text-shadow: 0 1px 0 #94a3b8, 0 2px 1px rgba(0,0,0,.4);
}

/* ── bt-12 : Rainbow Flow (무지개 순환) ── */
.hai-search-brand.bt-12 .hai-brand-555 {
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg,#ef4444,#f59e0b,#eab308,#22c55e,#3b82f6,#a855f7,#ef4444);
    background-size: 400% 100%;
    animation: bt12-rainbow 3s linear infinite;
}
@keyframes bt12-rainbow { 0%{background-position:0 0;} 100%{background-position:400% 0;} }

/* ── bt-13 : Galaxy (우주 + 별 반짝임) ── */
.hai-search-brand.bt-13 .hai-brand-555 {
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: radial-gradient(circle at 30% 30%,#fff,#a5b4fc 30%,#6366f1 60%,#312e81 100%);
    text-shadow: 0 0 14px rgba(99,102,241,.7);
    animation: bt13-twinkle 2.6s ease-in-out infinite;
}
@keyframes bt13-twinkle { 0%,100%{filter:brightness(1);} 30%{filter:brightness(1.6);} 60%{filter:brightness(.9);} }

/* ── bt-14 : Minimal Mono (흑백 + 언더라인 슬라이드) ── */
.hai-search-brand.bt-14 .hai-brand-555 {
    color: #f8fafc; position: relative; padding-bottom: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.hai-search-brand.bt-14 .hai-brand-555::after {
    content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
    background:#f8fafc; transform-origin:left;
    animation: bt14-underline 2.2s ease-in-out infinite;
}
@keyframes bt14-underline { 0%,100%{transform:scaleX(0);} 50%{transform:scaleX(1);} }

/* ── bt-15 : Candy (파스텔 캔디) ── */
.hai-search-brand.bt-15 .hai-brand-555 {
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg,#fbcfe8,#bfdbfe,#bbf7d0,#fde68a);
    background-size: 240% 100%;
    animation: bt15-candy 4s ease infinite;
}
@keyframes bt15-candy { 0%,100%{background-position:0 0;} 50%{background-position:140% 0;} }

/* ── bt-16 : Electric (전기 스파크 + 진동) ── */
.hai-search-brand.bt-16 .hai-brand-555 {
    color: #fef08a; text-shadow: 0 0 4px #fde047, 0 0 10px #facc15, 0 0 20px #eab308;
    animation: bt16-shake .18s linear infinite;
}
@keyframes bt16-shake { 0%,100%{transform:translate(0,0);} 25%{transform:translate(.8px,-.6px);} 50%{transform:translate(-.6px,.8px);} 75%{transform:translate(.6px,.6px);} }

/* ── bt-17 : Sunset (오렌지-핑크 일몰) ── */
.hai-search-brand.bt-17 .hai-brand-555 {
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg,#fb923c,#f472b6,#c084fc);
    text-shadow: 0 0 12px rgba(244,114,182,.5);
}

/* ── bt-18 : Emerald (에메랄드 럭셔리) ── */
.hai-search-brand.bt-18 .hai-brand-555 {
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(110deg,#065f46,#10b981,#a7f3d0,#10b981,#065f46);
    background-size: 220% 100%;
    animation: bt18-emerald 3.4s linear infinite;
    filter: drop-shadow(0 1px 2px rgba(6,95,70,.5));
}
@keyframes bt18-emerald { 0%{background-position:220% 0;} 100%{background-position:-120% 0;} }

/* ── bt-19 : Bubble Float (둥둥 떠다님) ── */
.hai-search-brand.bt-19 .hai-brand-555 {
    color: #93c5fd; text-shadow: 0 0 8px rgba(147,197,253,.6);
    display: inline-block;
    animation: bt19-float 2.2s ease-in-out infinite;
}
@keyframes bt19-float { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-6px) rotate(2deg);} }

/* ── bt-20 : Count Up (550→555 카운트업 느낌의 점멸) ── */
.hai-search-brand.bt-20 .hai-brand-555 {
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg,#f87171,#fb923c);
    animation: bt20-count 1.1s steps(1) infinite;
}
@keyframes bt20-count { 0%{opacity:.35;} 40%{opacity:1;} 100%{opacity:1;} }
/* bt-20 아이콘도 살짝 통통 튀게 */
.hai-search-brand.bt-20 .hai-brand-icon { animation: bt20-bob 1.1s ease-in-out infinite; }
@keyframes bt20-bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }

/* 일부 테마는 🤖 아이콘에도 미세 모션 부여(과하지 않게) */
.hai-search-brand.bt-1 .hai-brand-icon,
.hai-search-brand.bt-16 .hai-brand-icon { animation: bt-icon-pulse 2s ease-in-out infinite; }
@keyframes bt-icon-pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }

/* 접근성: 모션 최소화 설정 시 애니메이션 정지 */
@media (prefers-reduced-motion: reduce) {
    .hai-search-brand[class*="bt-"] .hai-brand-555,
    .hai-search-brand[class*="bt-"] .hai-brand-icon,
    .hai-search-brand[class*="bt-"] .hai-brand-555::after { animation: none !important; }
}
.hai-search-desc { font-size: 14px; color: #64748b; }
/* 무료 잔여 횟수 + 안내 문구 — 테두리 없이 통일된 텍스트 톤 */
.hai-search-descrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 6px 0 2px;
}

.hai-search-box { position: relative; width: 100%; max-width: 480px; }
.hai-search-box input {
    width: 100%; background: #111827; border: 1.5px solid #1e3a5f;
    border-radius: 12px; padding: 14px 44px;
    color: #e2e8f0; font-size: 15px; outline: none;
    transition: border-color .2s, box-shadow .2s; box-sizing: border-box;
}
.hai-search-box input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.hai-search-box input::placeholder { color: #4a5568; }
.hai-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #3b82f6; font-size: 15px; pointer-events: none;
}
.hai-search-clear {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #64748b; cursor: pointer; font-size: 14px; padding: 4px;
}
/* 드롭다운 */
.hai-search-list {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    z-index: 500; max-height: 320px; overflow-y: auto;
    background: #0f172a; border: 1px solid rgba(99,179,237,.25);
    border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.7);
    padding: 4px 0; margin: 0;
}
.hai-search-list::-webkit-scrollbar { width: 4px; }
.hai-search-list::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 2px; }
.hai-search-list .ssi-item { padding: 9px 16px; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; }
.hai-search-list .ssi-item:hover,
.hai-search-list .ssi-item.active { background: rgba(99,179,237,.12); }
.hai-search-list .ssi-item:last-child { border-bottom: none; }
.hai-search-list .ssi-code  { font-size: 10px; color: #475569; min-width: 52px; font-family: monospace; }
.hai-search-list .ssi-name  { font-size: 14px; font-weight: 600; color: #e2e8f0; }
.hai-search-list .ssi-name mark.ssi-hl { background: rgba(251,191,36,.25); color: #fde68a; border-radius: 2px; }
.hai-search-list .ssi-market.kospi  { background: rgba(99,102,241,.2);  color: #a5b4fc; }
.hai-search-list .ssi-market.kosdaq { background: rgba(52,211,153,.18); color: #6ee7b7; }
.hai-search-list .ssi-market.etf    { background: rgba(251,191,36,.18);  color: #fbbf24; } /* ★ ETF 배지 (워커 v3.91 market='ETF') */
.hai-search-list .ssi-loading,
.hai-search-list .ssi-empty { padding: 14px 16px; font-size: 12px; color: #475569; display: flex; align-items: center; gap: 8px; }

/* ────────────────────────────────────────────────────────────
   최근 검색 히스토리 — 텍스트 전용, 테두리 없음
──────────────────────────────────────────────────────────── */
.hai-recent-wrap {
    width: 100%; max-width: 100%;
    margin-top: 4px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

/* 헤더 행 */
.hai-recent-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 2px 2px;
    border-bottom: none;
}
.hai-recent-title {
    font-size: 11px; font-weight: 500; color: #475569; letter-spacing: .3px;
    display: flex; align-items: center; gap: 4px;
}
.hai-recent-title i { color: #3b82f6; font-size: 10px; }

/* 전체삭제 버튼 */
.hai-recent-clear-all {
    background: none; border: none; cursor: pointer;
    font-size: 10px; color: #334155; padding: 1px 4px;
    border-radius: 3px; transition: color .15s;
}
.hai-recent-clear-all:hover { color: #f87171; background: none; }

/* ── 구 카드형 CSS 비활성화 (텍스트 나열형으로 대체) ── */
.hai-recent-list,
.hai-recent-item,
.hai-recent-pick,
.hai-recent-market,
.hai-recent-name,
.hai-recent-code,
.hai-recent-time,
.hai-recent-del { display: none; }

/* ────────────────────────────────────────────────────────────
   텍스트 나열형 최근검색
──────────────────────────────────────────────────────────── */

/* 태그 래퍼 컨테이너 — flex-wrap, 가운데 정렬 */
.hai-recent-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 4px 0 6px;
    overflow: hidden;
    max-height: 96px; /* 줄 높이 ~30px × 3줄 */
}

/* 개별 태그 래퍼 — 너비 auto, 종목명 잘림 없음, 줄바꿈으로 자연 배치 */
.hai-recent-tag {
    display: flex;
    align-items: center;
    width: auto;
    box-sizing: border-box;
    line-height: 1.5;
    padding-right: 8px;  /* 태그 간 간격 */
}

/* 그리드 방식 — ::before 구분점 제거 */
.hai-recent-tag + .hai-recent-tag::before {
    display: none;
}

/* 종목명 클릭 버튼 — 전체 표시, 잘림 없음 */
.hai-recent-tag-name {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #64748b;
    padding: 3px 2px 3px 0;
    white-space: nowrap;
    line-height: 1.5;
    transition: color .12s;
    letter-spacing: -.01em;
    text-align: center;
}
.hai-recent-tag:hover .hai-recent-tag-name {
    color: #cbd5e1;
}

/* ✕ 삭제 버튼 — 항상 표시 */
.hai-recent-tag-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 9px;
    color: #475569;
    padding: 2px 4px 2px 1px;
    line-height: 1;
    opacity: 1;
    width: 16px;
    overflow: hidden;
    transition: color .15s;
    flex-shrink: 0;
    align-self: center;
}
.hai-recent-tag-del:hover {
    color: #f87171;
}

/* ────────────────────────────────────────────────────────────
   인기 종목 섹션
──────────────────────────────────────────────────────────── */
/* 인기 종목 섹션 — 페이지 맨 아래, 좌측 정렬 */
/* ★ 인기 종목 + 속보 하단 그룹 — space-between 여백이 둘 사이에 끼지 않도록 묶음 */
.hai-bottom-group {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;             /* 두 섹션 사이 간격 0 — 밀착 */
}

.hai-popular-section {
    width: 100%;
    flex-shrink: 0;     /* 높이 고정, 압축 안 됨 */
    padding: 12px 24px 0;   /* ★ 하단 여백 제거 — 속보 티커와 위아래로 붙임 */
    background: transparent;
    border: none;
    box-sizing: border-box;
}
.hai-popular-header {
    display: flex; align-items: center; gap: 8px;
    padding: 0 0 6px;
    margin-bottom: 4px;
    justify-content: flex-start; /* 좌측 정렬 */
}
.hai-popular-title {
    font-size: 11px; font-weight: 600; color: #64748b; letter-spacing: .3px;
    display: flex; align-items: center; gap: 5px;
}
.hai-popular-title i { color: #f97316; font-size: 11px; }
.hai-popular-sub {
    font-size: 10px; color: #334155; margin-left: 2px;
}

/* 칩 카드 컨테이너 */
.hai-popular-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;  /* 좌측 정렬 */
    gap: 6px;                     /* 카드 간 여백 — 종목 경계 구분 */
    padding: 4px 0 0;             /* ★ 하단 여백 제거 — 속보 티커와 밀착 */
}

/* ── 속보 티커 섹션 (Issue Scanner 와 동일 데이터) ── */
.hai-ticker-section {
    width: 100%;
    flex-shrink: 0;
    padding: 0 24px 18px;     /* 인기 종목 섹션과 동일한 좌우 패딩 */
    box-sizing: border-box;
}
.hai-ticker-section .hai-ticker-wrap {
    margin-bottom: 0;         /* 섹션 자체 패딩으로 여백 제어 */
}
/* ★ 좌측 "속보" 라벨 숨김 — 흘러가는 뉴스바만 표시 */
.hai-ticker-section .jj-ticker-label {
    display: none;
}
/* 라벨이 없어진 만큼 좌측 여백 보정 (뉴스가 끝에 붙지 않도록) */
.hai-ticker-section .jj-ticker-track {
    padding-left: 4px;
}

/* 인기 종목 — 칩 카드(태그 박스) */
.hai-pop-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;                     /* 종목명·배지·등락률 사이 간격 */
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;         /* 알약 모양 */
    white-space: nowrap;
    line-height: 1.4;
    transition: background .12s, border-color .12s, transform .08s;
}
.hai-pop-tag:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.18);
    transform: translateY(-1px);
}

/* 검색 횟수 — 동근 배지 */
.hai-pop-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    background: rgba(148,163,184,.18);
    color: #cbd5e1;
    vertical-align: middle;
}

/* tier 색상 — 순위 강조는 '테두리 + 순위배지'에만 적용.
   ※ 종목명 색상은 .hai-pop-name에서 별도 지정(아래)하여, tier4(21위~)의
     회색이 종목명을 회색으로 만들지 않도록 함. (상승 종목이 회색으로 보이던 문제 해결) */
.hai-pop-tag.tier1 { border-color: rgba(248,113,113,.40); }   /* 상위 30% */
.hai-pop-tag.tier1 .hai-pop-count { background: rgba(248,113,113,.22); color: #fca5a5; }
.hai-pop-tag.tier2 { border-color: rgba(251,146,60,.35); }
.hai-pop-tag.tier2 .hai-pop-count { background: rgba(251,146,60,.20); color: #fdba74; }
.hai-pop-tag.tier3 { border-color: rgba(234,179,8,.30); }
.hai-pop-tag.tier3 .hai-pop-count { background: rgba(234,179,8,.18); color: #fde68a; }
.hai-pop-tag.tier4 { border-color: rgba(148,163,184,.20); }
.hai-pop-tag.tier4 .hai-pop-count { background: rgba(148,163,184,.15); color: #cbd5e1; }

/* 종목명 — 기본은 밝은 톤(가독성). 하락(is-down)/보합(is-flat)에서만 별도 색상으로 덮어씀 */
.hai-pop-name { color: #e2e8f0; }

/* ── ★ 거래량 급증 순위 섹션 (ka10023) — '지금 인기 종목' 위 ── */
.hai-volsurge-section {
    width: 100%;
    flex-shrink: 0;
    padding: 12px 24px 0;
    background: transparent;
    border: none;
    box-sizing: border-box;
}
/* 제목 아이콘만 차별화 (번개 = 노랑) */
.hai-volsurge-section .hai-popular-title i { color: #facc15; }

/* 거래량 급증률 배지 — 칩 우측, 번개 아이콘 + +N% */
.hai-vs-surge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.2px;
    padding: 1px 6px;
    border-radius: 4px;
    color: #fde047;
    background: rgba(250,204,21,.16);
    border: 1px solid rgba(250,204,21,.22);
}
.hai-vs-surge i { font-size: 9px; }
/* 급증 칩은 살짝 노란 테두리 느낌으로 인기종목과 구분 */
.hai-vs-tag { border-color: rgba(250,204,21,.14); }
.hai-vs-tag:hover { border-color: rgba(250,204,21,.30); }

/* ════════════════════════════════════════════════════════════
   ★ 등락 방향별 카드 상태 (인기종목 + 거래량급증 공통)
   - 상승(up)  : 기존 tier 컬러 그대로
   - 하락(down): 카드 전체를 완전 무채색 회색 (배경·테두리·모든 텍스트·배지)
   - 보합(flat): 약한 앰버(중립) 톤
   실시간 갱신 시 클래스가 바뀌며 회색 ⇄ 컬러가 자동 전환됨
   ════════════════════════════════════════════════════════════ */

/* ── 하락(down) : 완전 무채색 회색 카드 ── */
.hai-pop-tag.is-down,
.hai-vs-tag.is-down {
    background: rgba(120,120,120,.08) !important;
    border-color: rgba(120,120,120,.22) !important;
    color: #8a8f98 !important;               /* 종목명 등 기본 텍스트 */
    filter: grayscale(1);                    /* 잔여 컬러까지 무채색화 */
}
.hai-pop-tag.is-down:hover,
.hai-vs-tag.is-down:hover {
    background: rgba(120,120,120,.14) !important;
    border-color: rgba(120,120,120,.34) !important;
}
/* 하락 카드 내부 요소 전부 회색 — tier 색상/가격/등락률/배지 무력화 */
.hai-pop-tag.is-down .hai-pop-count,
.hai-vs-tag.is-down .hai-pop-count {
    background: rgba(120,120,120,.20) !important;
    color: #9aa0a8 !important;
}
.hai-pop-tag.is-down .hai-pop-name,
.hai-vs-tag.is-down .hai-pop-name,
.hai-pop-tag.is-down .hai-pop-price,
.hai-vs-tag.is-down .hai-pop-price { color: #8a8f98 !important; }
.hai-pop-tag.is-down .hai-pop-rate,
.hai-vs-tag.is-down .hai-pop-rate {
    color: #8a8f98 !important;
    background: rgba(120,120,120,.14) !important;
}
.hai-vs-tag.is-down .hai-vs-surge {
    color: #9aa0a8 !important;
    background: rgba(120,120,120,.14) !important;
    border-color: rgba(120,120,120,.22) !important;
}

/* ── 보합(flat) : 약한 앰버(중립) 톤 ── */
.hai-pop-tag.is-flat,
.hai-vs-tag.is-flat {
    background: rgba(212,160,23,.08) !important;
    border-color: rgba(212,160,23,.30) !important;
    color: #d4a017 !important;
}
.hai-pop-tag.is-flat:hover,
.hai-vs-tag.is-flat:hover {
    background: rgba(212,160,23,.14) !important;
    border-color: rgba(212,160,23,.45) !important;
}
.hai-pop-tag.is-flat .hai-pop-count,
.hai-vs-tag.is-flat .hai-pop-count {
    background: rgba(212,160,23,.20) !important;
    color: #e3b948 !important;
}
.hai-pop-tag.is-flat .hai-pop-name,
.hai-vs-tag.is-flat .hai-pop-name { color: #d4a017 !important; }
.hai-pop-tag.is-flat .hai-pop-price,
.hai-vs-tag.is-flat .hai-pop-price { color: #c79a2e !important; }

/* 등락률 표시 (▲ 상승 / ▼ 하락 / 보합) — 종목명·검색횟수 우측 */
.hai-pop-rate {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.2px;
    padding: 1px 5px;
    border-radius: 4px;
    transition: opacity .15s;
}
.hai-pop-rate:empty { display: none; }
.hai-pop-rate.up    { color: #fb7185; background: rgba(244,63,94,.14); }   /* 상승 — 빨강 */
.hai-pop-rate.down  { color: #60a5fa; background: rgba(59,130,246,.14); }  /* 하락 — 파랑 */
.hai-pop-rate.flat  { color: #94a3b8; background: rgba(148,163,184,.12); } /* 보합 — 회색 */

.hai-pop-loading { font-size: 11px; color: #334155; padding: 8px; }
.hai-pop-empty   { font-size: 11px; color: #334155; padding: 8px; }

/* ── ★ v2.5: 조회순위(ka00198) 칩 — 순위 + 종목명 + 현재가 + 등락률 ── */
/* 순위 배지 ("N위") — 기존 .hai-pop-count 재사용, '위' 글자 수용 위해 폭 확장 */
.hai-pop-tag .hai-pop-count {
    min-width: 30px;
    padding: 0 6px;
    font-size: 10px;
    letter-spacing: -0.2px;
}
/* 현재가 — 종목명 우측, 옅은 색 */
.hai-pop-price {
    font-size: 11px;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: -0.2px;
}
/* 직전 스냅샷(장 시작 전/일시 미수신) 안내 배지 */
.hai-pop-stale {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    color: #94a3b8;
    background: rgba(148,163,184,.12);
    border: 1px solid rgba(148,163,184,.18);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.hai-pop-stale i { font-size: 9px; color: #f59e0b; }

/* ────────────────────────────────────────────────────────────
   게스트 무료 분석 잔여 횟수 배지
──────────────────────────────────────────────────────────── */
.hai-quota-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    background: none;
    border: none;
    border-radius: 0;
}
.hai-quota-badge i { font-size: 12px; color: #60a5fa; }
.hai-quota-badge strong { color: #93c5fd; font-weight: 700; }
.hai-quota-badge.hai-quota-low { color: #64748b; }
.hai-quota-badge.hai-quota-low i { color: #f87171; }
.hai-quota-badge.hai-quota-low strong { color: #fca5a5; }

/* ────────────────────────────────────────────────────────────
   무료 한도 초과 모달
──────────────────────────────────────────────────────────── */
.hai-quota-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.hai-quota-modal.show { display: flex; animation: hai-quota-fade .2s ease; }
@keyframes hai-quota-fade { from { opacity: 0; } to { opacity: 1; } }

.hai-quota-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, .72);
    backdrop-filter: blur(3px);
}
.hai-quota-dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #0f1b33;
    border: 1px solid #1e3a5f;
    border-radius: 18px;
    padding: 30px 28px 26px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    animation: hai-quota-pop .25s cubic-bezier(.34,1.56,.64,1);
}

/* 헤더 : 원형칩 엠블럼 + 브랜드명 (모바일 안내페이지 톤 통일) */
.hai-quota-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-bottom: 18px;
}
.hai-quota-brand-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    font-size: 21px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(59,130,246,.18));
    border: 1px solid #1e3a5f;
}
.hai-quota-brand-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .3px;
    background: linear-gradient(90deg, #a78bfa, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hai-quota-divider {
    height: 1px;
    border: 0;
    margin: 0 0 22px;
    background: linear-gradient(90deg, transparent, #1e3a5f, transparent);
}
@keyframes hai-quota-pop {
    from { transform: translateY(16px) scale(.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.hai-quota-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 30px; height: 30px;
    border: none; border-radius: 8px;
    background: transparent; color: #64748b;
    font-size: 15px; cursor: pointer;
    transition: all .15s ease;
}
.hai-quota-close:hover { background: rgba(148,163,184,.12); color: #e2e8f0; }
.hai-quota-icon {
    width: 72px; height: 72px;
    margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 34px;
    color: var(--accent, #3b82f6);
    background: var(--accent-glow, rgba(59,130,246,.18));
    box-shadow: 0 0 0 1px rgba(59,130,246,.22), 0 6px 20px rgba(59,130,246,.18);
}
.hai-quota-title {
    font-size: 18px; font-weight: 800; color: #f1f5f9;
    text-align: center;        /* 제목 중앙 */
    margin: 0 0 18px; line-height: 1.45;
}
.hai-quota-desc {
    font-size: 14px; color: #cbd5e1; line-height: 1.8;
    text-align: left;          /* 본문 왼쪽 정렬 */
    margin: 0 0 18px;
}
.hai-quota-desc strong { color: #e2e8f0; }
.hai-quota-hl { color: #34d399 !important; font-weight: 800; }

/* 내일 초기화 안내 — 풀너비 강조 박스 (모바일 IP 박스 톤) */
.hai-quota-reset {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 9px;
    padding: 12px 15px;
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    color: #cbd5e1;
    background: rgba(59,130,246,.10);
    border: 1px solid rgba(59,130,246,.30);
    border-radius: 11px;
}
.hai-quota-reset i { color: #60a5fa; font-size: 15px; flex: 0 0 auto; }
.hai-quota-reset strong { color: #93c5fd; font-weight: 700; }

.hai-quota-actions {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 0;
}
.hai-quota-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%;
    height: 52px;
    font-size: 14.5px; font-weight: 700;
    border-radius: 11px;
    border: none; cursor: pointer;
    transition: all .15s ease;
}
.hai-quota-btn-cafe {
    background: #03c75a;   /* 네이버 그린 */
    color: #fff;
}
.hai-quota-btn-cafe:hover { background: #02b350; transform: translateY(-1px); }
.hai-quota-btn-login {
    background: rgba(59,130,246,.14);
    color: #93c5fd;
    border: 1px solid rgba(59,130,246,.35);
}
.hai-quota-btn-login:hover { background: rgba(59,130,246,.24); color: #bfdbfe; }
.hai-quota-foot {
    font-size: 11.5px; color: #64748b; margin: 0;
}

/* ────────────────────────────────────────────────────────────
   2. 채팅 UI
──────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════
   ★ 아날로그 터미널 대화창 (말풍선 제거 · 커서+텍스트만)
   ──────────────────────────────────────────────────────────── */
.hai-chat-inner { max-width: 560px; width: 100%; display: flex; flex-direction: column; gap: 12px; }

/* 콘솔(터미널) 컨테이너 — 테두리/배경 없는 깔끔한 텍스트 흐름 */
.hai-chat-messages {
    display: flex; flex-direction: column; gap: 2px;
    background: none;
    border: none;
    border-radius: 0;
    padding: 6px 2px;
    min-height: 200px;
    font-family: 'D2Coding', 'SF Mono', 'Consolas', 'Menlo', monospace;
    font-size: 14px; line-height: 1.9;
    box-shadow: none;
    position: relative;
}

/* 한 줄(= 한 메시지). 말풍선 없음, 텍스트만 흐른다 */
.hai-chat-msg {
    display: block; position: relative; z-index: 1;
    white-space: pre-wrap; word-break: break-word;
}
/* 말풍선 래퍼 제거 — 그냥 텍스트 흐름 */
.hai-chat-bubble {
    display: inline; background: none !important; border: none !important;
    padding: 0 !important; margin: 0; border-radius: 0 !important; max-width: 100%;
}

/* AI 출력 라인 — 앞에 흐릿한 프롬프트 기호 */
.hai-chat-msg-ai { color: #cfe3ff; margin-top: 6px; }
.hai-chat-msg-ai .hai-chat-bubble::before {
    content: 'HASRI:'; color: #3b6ea5; font-weight: 700; margin-right: 8px;
    letter-spacing: .5px;
}
.hai-chat-msg-ai strong { color: #7dd3fc; font-weight: 700; }

/* 사용자(영어 사용자) 입력 라인 — USER 프롬프트 */
.hai-chat-msg-user { color: #86efac; margin-top: 6px; }
.hai-chat-msg-user .hai-chat-bubble::before {
    content: 'USER:'; color: #22c55e; font-weight: 700; margin-right: 8px;
    letter-spacing: .5px;
}

/* ════════════════════════════════════════════════════════════
   ★ v53: 채팅앱 방식 라벨 — H.555 · My Stocks · HASRI AI 공통
   · 라벨('HASRI AI :' / 'USER :')을 flex 좌측 칼럼으로 분리 →
     본문이 줄바꿈돼도 항상 라벨 우측에 정렬 (라벨 아래로 안 내려감)
   · 라벨-본문 간격은 8px (한 칸 수준, min-width 고정폭 제거)
   · 같은 화자 연속 단락(.hai-msg-cont)은 라벨 visibility:hidden —
     같은 화자끼리는 라벨 폭이 동일하므로 본문 시작점 정렬 유지
   · v53: #page-hasri-ai 추가 (대본 개편 — USER↔AI 교대 대화)
   ════════════════════════════════════════════════════════════ */
/* 기본 bubble::before 라벨(HASRI:/USER:)은 이 페이지들에서 제거 */
#page-ha555 .hai-chat-msg .hai-chat-bubble::before,
#page-watchlist-guard .hai-chat-msg .hai-chat-bubble::before,
#page-hasri-ai .hai-chat-msg .hai-chat-bubble::before { content: none; }

#page-ha555 .hai-chat-msg,
#page-watchlist-guard .hai-chat-msg,
#page-hasri-ai .hai-chat-msg {
    display: flex;
    align-items: baseline;
}
#page-ha555 .hai-chat-msg::before,
#page-watchlist-guard .hai-chat-msg::before,
#page-hasri-ai .hai-chat-msg::before {
    flex: 0 0 auto;
    margin-right: 8px;
    font-weight: 700;
    letter-spacing: .5px;
    white-space: nowrap;
}
#page-ha555 .hai-chat-msg-ai::before,
#page-watchlist-guard .hai-chat-msg-ai::before,
#page-hasri-ai .hai-chat-msg-ai::before  { content: 'HASRI AI :'; color: #3b6ea5; }
#page-ha555 .hai-chat-msg-user::before,
#page-watchlist-guard .hai-chat-msg-user::before,
#page-hasri-ai .hai-chat-msg-user::before { content: 'USER :';     color: #22c55e; }
/* 본문은 라벨 우측 칼럼을 블록으로 차지 (줄바꿈 시에도 같은 칼럼 유지) */
#page-ha555 .hai-chat-msg .hai-chat-bubble,
#page-watchlist-guard .hai-chat-msg .hai-chat-bubble,
#page-hasri-ai .hai-chat-msg .hai-chat-bubble {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}
/* 연속 단락: 라벨 숨김(폭은 유지 → 본문 정렬 유지) */
#page-ha555 .hai-msg-cont::before,
#page-watchlist-guard .hai-msg-cont::before,
#page-hasri-ai .hai-msg-cont::before { visibility: hidden; }
/* 말차례가 바뀌는 라인은 위 여백을 넉넉히, 연속 단락은 촘촘히 */
#page-ha555 .hai-chat-msg,
#page-watchlist-guard .hai-chat-msg,
#page-hasri-ai .hai-chat-msg { margin-top: 18px; }
#page-ha555 .hai-msg-cont,
#page-watchlist-guard .hai-msg-cont,
#page-hasri-ai .hai-msg-cont { margin-top: 10px; }

/* ── ② 타이핑 인디케이터 (커서 점멸 형태로 — 터미널 느낌) ── */
.hai-chat-typing { color: #3b6ea5; }
.hai-chat-typing .hai-chat-bubble::before {
    content: 'HASRI:'; color: #3b6ea5; font-weight: 700; margin-right: 8px;
}
.hai-typing-dot {
    display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    background: #60a5fa; opacity: .45; margin-right: 3px;
    animation: hai-typing-bounce 1.2s infinite ease-in-out;
}
.hai-typing-dot:nth-child(2) { animation-delay: .18s; }
.hai-typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes hai-typing-bounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: .35; }
    30%           { transform: translateY(-4px); opacity: 1;   }
}

/* ── ③ 깜빡이는 블록 커서 (터미널 ▋) ── */
.hai-type-caret {
    display: inline-block;
    width: 9px; height: 1.05em;
    margin-left: 2px;
    vertical-align: -2px;
    background: #7dd3fc;
    box-shadow: 0 0 6px rgba(125,211,252,.7);
    animation: hai-caret-blink 1s step-end infinite;
}
@keyframes hai-caret-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ── 접근성: 모션 최소화 설정 시 애니메이션 끔 ── */
@media (prefers-reduced-motion: reduce) {
    .hai-typing-dot { animation: none; opacity: .6; }
    .hai-type-caret { animation: none; }
}

/* 하단 안내 문구 */
.hai-chat-guide {
    margin: 14px 2px 2px; padding: 0;
    font-size: 13px; line-height: 1.6; color: #94a3b8;
    text-align: center;
    animation: hai-msg-in .4s ease;
}
.hai-chat-guide strong { color: #cbd5e1; font-weight: 700; }
@keyframes hai-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 터미널 톤 액션 버튼 (아웃라인 + 글로우) ── */
.hai-chat-actions { display: flex; gap: 12px; margin-top: 16px; }
/* ★ v120: 한도 초과 타이핑 안내 버튼 — 세로 스택 */
.hai-quota-typing-actions { flex-direction: column; gap: 10px; }
.hai-chat-btn {
    flex: 1; padding: 13px 0; border-radius: 8px;
    font-family: 'D2Coding', 'SF Mono', 'Consolas', 'Menlo', monospace;
    font-size: 13.5px; font-weight: 700; letter-spacing: .3px;
    cursor: pointer; background: transparent;
    transition: all .2s ease;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    position: relative;
}
.hai-chat-btn i { font-size: 12px; opacity: .85; }

/* 주 동작: 분석 시작 — 하늘색 글로우 외곽선 */
.hai-chat-btn-confirm {
    color: #7dd3fc;
    border: 1px solid rgba(125,211,252,.45);
    box-shadow: 0 0 0 0 rgba(125,211,252,0), inset 0 0 18px rgba(125,211,252,.06);
}
.hai-chat-btn-confirm::before {
    content: '▸'; color: #22d3ee; font-weight: 700; margin-right: -3px;
}
.hai-chat-btn-confirm:hover {
    color: #e0f7ff;
    border-color: rgba(125,211,252,.9);
    box-shadow: 0 0 16px rgba(56,189,248,.35), inset 0 0 22px rgba(125,211,252,.12);
    transform: translateY(-1px);
}
.hai-chat-btn-confirm:active { transform: translateY(0); }
.hai-chat-btn-confirm:disabled {
    opacity: .55; cursor: default; transform: none;
    box-shadow: none; border-color: rgba(125,211,252,.25);
}

/* 보조 동작: 다시 검색 — 회색 외곽선 */
.hai-chat-btn-cancel {
    color: #8aa0b8;
    border: 1px solid #2d4a6a;
}
.hai-chat-btn-cancel:hover {
    color: #cbd5e1;
    border-color: #44617f;
    background: rgba(148,163,184,.06);
    transform: translateY(-1px);
}
.hai-chat-btn-cancel:active { transform: translateY(0); }

/* ────────────────────────────────────────────────────────────
   3. 대시보드 헤더 (sticky)
──────────────────────────────────────────────────────────── */
.hai-dash-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px;
    background: #0b1220; border-bottom: 1px solid #1e2d4a;
    flex-shrink: 0; gap: 12px;
    position: sticky; top: 0; z-index: 100;
}
.hai-dash-hd-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.hai-dash-hd-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hai-chart-btn {
    background: #1e2d4a; border: 1px solid #3b82f6; color: #60a5fa;
    border-radius: 7px; padding: 5px 12px; cursor: pointer; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 5px; flex-shrink: 0; transition: background .15s, color .15s;
}
.hai-chart-btn:hover { background: rgba(59,130,246,.2); color: #93c5fd; }
.hai-telegram-btn {
    background: #0d2137; border: 1px solid #229ed9; color: #54c6f5;
    border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 5px; flex-shrink: 0;
    text-decoration: none; transition: background .15s, color .15s;
}
.hai-telegram-btn:hover { background: rgba(34,158,217,.2); color: #93ddfb; }
.hai-telegram-btn i { font-size: 13px; }
.hai-news-btn {
    background: #1e3a2a; border: 1px solid #22c55e; color: #4ade80;
    border-radius: 7px; padding: 5px 12px; cursor: pointer; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 5px; flex-shrink: 0; transition: background .15s, color .15s;
}
.hai-news-btn:hover { background: rgba(34,197,94,.2); color: #86efac; }

/* ⭐ 관심 종목 추가 (My Stocks) — Chart 와 분석 리포트 저장 사이 */
.hai-watch-btn {
    background: #3a2f10; border: 1px solid #eab308; color: #fcd34d;
    border-radius: 7px; padding: 5px 12px; cursor: pointer; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 5px; flex-shrink: 0; transition: background .15s, color .15s, border-color .15s;
}
.hai-watch-btn:hover { background: rgba(234,179,8,.22); color: #fde68a; }
.hai-watch-btn:disabled { cursor: default; opacity: .85; }
/* 이미 관심종목에 등록된 상태 */
.hai-watch-btn.added {
    background: rgba(234,179,8,.2); color: #fde68a; border-color: #facc15;
}
.hai-watch-btn.added i { color: #facc15; }
/* 추가 직후 살짝 강조 애니메이션 */
@keyframes haiWatchPop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
.hai-watch-btn.just-added { animation: haiWatchPop .35s ease; }

/* 🔄 DB Check — 수급 데이터만 재조회 (News 좌측) */
.hai-dbcheck-btn {
    background: #3a2c14; border: 1px solid #f59e0b; color: #fbbf24;
    border-radius: 7px; padding: 5px 12px; cursor: pointer; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 5px; flex-shrink: 0; transition: background .15s, color .15s, border-color .15s;
}
.hai-dbcheck-btn:hover { background: rgba(245,158,11,.2); color: #fcd34d; }
.hai-dbcheck-btn:disabled { cursor: default; }
.hai-dbcheck-btn.loading { background: #3a2c14; color: #fbbf24; border-color: #f59e0b; opacity: .9; }
.hai-dbcheck-btn.done    { background: rgba(34,197,94,.18); color: #4ade80; border-color: #22c55e; }
.hai-dbcheck-btn.fail    { background: rgba(239,68,68,.18); color: #f87171; border-color: #ef4444; }

.hai-close-btn {
    background: #1e2d4a; border: 1px solid #2d4a6a; color: #94a3b8;
    border-radius: 7px; padding: 5px 12px; cursor: pointer; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 5px; flex-shrink: 0; transition: background .15s, color .15s;
}
.hai-close-btn:hover { background: #253550; color: #e2e8f0; border-color: #94a3b8; }

/* 📸 분석 리포트 저장 버튼 (Chart와 닫기 사이) */
.hai-save-btn {
    background: #2a1e3a; border: 1px solid #a855f7; color: #c084fc;
    border-radius: 7px; padding: 5px 12px; cursor: pointer; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 5px; flex-shrink: 0; transition: background .15s, color .15s;
}
.hai-save-btn:hover { background: rgba(168,85,247,.22); color: #d8b4fe; }
.hai-save-btn:disabled { opacity: .55; cursor: progress; }

/* 저장 중 토스트(간이) */
.hai-save-toast {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    z-index: 99999; background: #0f1626; border: 1px solid #a855f7;
    color: #e9d5ff; padding: 16px 24px; border-radius: 12px; font-size: 14px; font-weight: 600;
    box-shadow: 0 12px 40px rgba(0,0,0,.6); display: flex; align-items: center; gap: 10px;
}
.hai-save-toast i { color: #c084fc; }

/* 🔬 분석 리포트 상단 워터마크 띠 (캡처 시에만 임시 삽입) */
.hai-report-watermark {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 22px;
    background: linear-gradient(135deg, #12193a 0%, #1a1330 100%);
    border-bottom: 2px solid #a855f7;
}
.hai-report-watermark .hai-rwm-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hai-report-watermark .hai-rwm-title {
    font-size: 18px; font-weight: 800; color: #f1f5f9; letter-spacing: .3px;
    display: flex; align-items: center; gap: 8px;
}
.hai-report-watermark .hai-rwm-logo { font-size: 19px; }
.hai-report-watermark .hai-rwm-sub { font-size: 12px; color: #c084fc; font-weight: 600; }
.hai-report-watermark .hai-rwm-right { display: flex; flex-direction: column; gap: 3px; text-align: right; flex-shrink: 0; }
.hai-report-watermark .hai-rwm-url {
    font-size: 13px; font-weight: 700; color: #93c5fd;
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
}
.hai-report-watermark .hai-rwm-url i { font-size: 11px; color: #60a5fa; }
.hai-report-watermark .hai-rwm-gen { font-size: 11px; color: #94a3b8; font-weight: 500; }

/* 🩻 배경 대각선 워터마크 (캡처 시에만 임시 삽입, 차트/표 뒤에 깔림)
   "HASRI AI" + "https://kiwoom.my" 2줄을 45도 대각선으로, 흰색 약 12% 투명도, 대형 */
.hai-bg-watermark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9000;             /* 콘텐츠(차트/표) 위에 반투명으로 덮음 → 항상 보임 */
    pointer-events: none;      /* 클릭/조작 통과 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   /* 화면 중앙에 1개만 */
}
.hai-bg-watermark .hai-bgwm-inner {
    transform: rotate(-45deg);
    transform-origin: center center;
    text-align: center;
    white-space: nowrap;
    user-select: none;
    line-height: 1.05;
    /* 흰색 약 6% 투명도 (더 연하게) */
    color: rgba(255, 255, 255, 0.06);
}
.hai-bg-watermark .hai-bgwm-line1 {
    font-size: 240px;
    font-weight: 900;
    letter-spacing: 14px;
}
.hai-bg-watermark .hai-bgwm-line2 {
    font-size: 72px;
    font-weight: 700;
    letter-spacing: 7px;
    margin-top: 14px;
}

.hai-dash-stock-info { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hai-dash-stock-name { font-size: 16px; font-weight: 800; color: #f1f5f9; }
.hai-dash-stock-code { font-size: 11px; color: #64748b; font-family: monospace; }
.hai-dash-market-badge {
    background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.3);
    color: #93c5fd; border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700;
}
.hai-dash-price-wrap { display: flex; align-items: baseline; gap: 7px; }
.hai-dash-price      { font-size: 18px; font-weight: 800; color: #f1f5f9; }
.hai-dash-change     { font-size: 12px; font-weight: 600; }
.hai-dash-change.up  { color: #f87171; }
.hai-dash-change.down{ color: #34d399; }
.hai-dash-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #64748b; }
.hai-meta-item { display: flex; align-items: center; gap: 3px; }
.hai-meta-item i { color: #3b82f6; font-size: 9px; }
.hai-meta-sep  { color: #334155; }
.hai-refresh-btn {
    background: #1e2d4a; border: 1px solid #2d4a6a; color: #64748b;
    border-radius: 7px; padding: 5px 9px; cursor: pointer; font-size: 12px;
}
.hai-refresh-btn:hover { color: #3b82f6; border-color: #3b82f6; }

/* ────────────────────────────────────────────────────────────
   4. 대시보드 본문 — 보고서 그리드
   ┌───────────────────────────────────────────────────┐
   │ Row1: [레이더패널 280px] [캔들+거래량 나머지]     │  ← hai-row1
   │ Row2: [수급+워터폴 1fr ] [4분할차트      1fr]     │  ← hai-row2
   │ Row3: [AI 텍스트 분석   전폭]                     │  ← hai-zone-e
   └───────────────────────────────────────────────────┘
──────────────────────────────────────────────────────────── */
.hai-dash-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 공통 행 컨테이너 */
.hai-row1,
.hai-row2 {
    display: grid;
    gap: 0;
    border-bottom: 1px solid #1a2540;
}
.hai-row1 { grid-template-columns: 1fr 2fr; }   /* 레이더 1/3 : 캔들 2/3 */
.hai-row2 { grid-template-columns: 1fr 1fr; }

/* 공통 패널 */
.hai-panel {
    background: #070d1a;
    min-width: 0;   /* grid overflow 방지 */
    overflow: hidden;
}
.hai-panel + .hai-panel {
    border-left: 1px solid #1a2540;
}

/* 패널 타이틀 */
.hai-panel-title {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: #475569;
    display: flex; align-items: center; gap: 5px;
    padding: 8px 14px 0;
    margin-bottom: 8px;
    flex-shrink: 0;
}
/* 툴팁 달린 타이틀 — 커서는 .hai-tip 공통 처리 */
.hai-panel-title .hai-zone-badge {
    margin-left: auto; border-radius: 4px;
    padding: 1px 6px; font-size: 10px; font-weight: 700; border: 1px solid;
}

/* ────────────────────────────────────────────────────────────
   5. Row1-Left: 레이더 패널
──────────────────────────────────────────────────────────── */
.hai-panel-radar {
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
}

/* 레이더 캔버스 */
.hai-radar-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: 4px 12px; flex-shrink: 0;
}
.hai-radar-canvas {
    width: 100% !important;
    max-width: 240px;
    height: 260px !important;   /* 200px → 260px */
    display: block;
}

/* 52주 게이지 */
.hai-gauge-wrap { padding: 0 12px; margin-bottom: 10px; flex-shrink: 0; }
.hai-gauge-label {
    display: flex; justify-content: space-between;
    font-size: 9px; color: #475569; margin-bottom: 3px;
}
.hai-gauge-title { color: #64748b; font-size: 9px; font-weight: 600; }
.hai-gauge-bar-outer {
    height: 8px; background: #1e2d4a; border-radius: 4px;
    position: relative; overflow: visible;
}
.hai-gauge-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,#10b981,#f59e0b,#ef4444);
    border-radius: 4px; transition: width .8s ease;
}
.hai-gauge-needle {
    position: absolute; top: -3px;
    width: 2px; height: 14px;
    background: #fff; border-radius: 1px;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(255,255,255,.6);
    transition: left .8s ease;
}
.hai-gauge-values {
    display: flex; justify-content: space-between;
    font-size: 9px; color: #475569; margin-top: 3px;
}
.hai-gauge-values span:nth-child(2) { color: #93c5fd; font-weight: 600; }

/* ─────────────────────────────────────────────────────────
   당일 가격 위치 히트맵 (52주 게이지 아래)
───────────────────────────────────────────────────────── */
.hai-day-heatmap-wrap {
    padding: 0 12px 12px;
    flex-shrink: 0;
    border-top: 1px solid rgba(30,45,74,0.6);
    margin-top: 2px;
    padding-top: 8px;
}
.hai-dhm-nodata {
    font-size: 10px; color: #475569; text-align: center; padding: 6px 0;
}
/* 레이블 행: 좌(저/하한) · 중앙타이틀 · 우(고/상한) */
.hai-dhm-labels {
    display: flex; justify-content: space-between; align-items: flex-end;
    font-size: 9px; color: #475569; margin-bottom: 5px;
    line-height: 1.3;
}
.hai-dhm-title  { color: #64748b; font-size: 9px; font-weight: 600; text-align: center; }
.hai-dhm-lbl-l  { text-align: left; }
.hai-dhm-lbl-r  { text-align: right; }

/* 바 트랙 */
.hai-dhm-bar-outer {
    height: 10px;
    background: #1e2d4a;
    border-radius: 5px;
    position: relative;
    overflow: visible;
}
/* 시가→현재가 채색 구간 */
.hai-dhm-fill {
    position: absolute; top: 0; height: 100%; border-radius: 3px; opacity: 0.55;
    transition: left .6s ease, width .6s ease;
}
/* ★ 한국식 통일: 상승=빨강(#ef4444), 하락=파랑(#3b82f6) — AI Signal Chart와 동일 */
.hai-dhm-fill-up { background: #ef4444; }
.hai-dhm-fill-dn { background: #3b82f6; }

/* 공통 마커 */
.hai-dhm-mark {
    position: absolute; top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    transition: left .6s ease;
}
/* 현재가 — 흰 원형 핀 */
.hai-dhm-mark-cur {
    width: 10px; height: 10px;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 0 6px rgba(255,255,255,.5);
    z-index: 4;
}
/* 시가 — 노란 마름모 */
.hai-dhm-mark-open {
    width: 8px; height: 8px;
    background: #fbbf24;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 3;
}
/* 고가 — 초록 위쪽 삼각 */
.hai-dhm-mark-high {
    width: 0; height: 0;
    background: transparent;
    border-radius: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid #10b981;
    top: 1px;
    z-index: 2;
}
/* 저가 — 빨간 아래쪽 삼각 */
.hai-dhm-mark-low {
    width: 0; height: 0;
    background: transparent;
    border-radius: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 7px solid #ef4444;
    top: calc(100% - 1px);
    z-index: 2;
}

/* 저·시·현·고 수치 행 */
.hai-dhm-vals {
    display: flex; gap: 10px; justify-content: center;
    font-size: 9px; margin-top: 6px; flex-wrap: wrap;
}
.hai-dhm-kv { display: flex; align-items: center; gap: 3px; }
.hai-dhm-kv i { color: #475569; font-style: normal; font-size: 8px; }
.hai-dhm-kv b { font-weight: 700; color: #94a3b8; }
.hai-dhm-kv-cur b { color: #e2e8f0; font-size: 10px; }
/* ★ 한국식 통일: 상승=빨강(#ef4444), 하락=파랑(#3b82f6) */
.hai-dhm-up   { color: #ef4444 !important; }
.hai-dhm-dn   { color: #3b82f6 !important; }
.hai-dhm-open { color: #fbbf24 !important; }

/* 시가대비 · 전일대비 통계 행 */
.hai-dhm-stat {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; font-size: 9px; color: #475569;
    margin-top: 4px; flex-wrap: wrap;
}
.hai-dhm-sep { color: #334155; }

/* 타이머 */
.hai-timer-row { display: flex; align-items: center; gap: 10px; padding: 0 12px; flex-shrink: 0; }
.hai-timer-circle { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.hai-timer-svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.hai-timer-track { fill: none; stroke: #1e2d4a; stroke-width: 4; }
.hai-timer-prog  {
    fill: none; stroke: #3b82f6; stroke-width: 4; stroke-linecap: round;
    stroke-dasharray: 138; stroke-dashoffset: 138; transition: stroke-dashoffset 1s linear;
}
.hai-timer-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #94a3b8; font-family: monospace;
}
.hai-timer-labels { flex: 1; min-width: 0; }
.hai-timer-label-main { font-size: 10px; color: #64748b; }
.hai-timer-label-sub  { font-size: 9px; color: #475569; margin-top: 2px; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ────────────────────────────────────────────────────────────
   6. Row1-Right: 캔들 + 거래량 패널
──────────────────────────────────────────────────────────── */
.hai-panel-candle {
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
}

/* 캔들 차트 영역 — flex:1 로 나머지 공간 채움 */
.hai-candle-wrap {
    position: relative;
    flex: 1;
    min-height: 300px;   /* 200px → 300px */
    margin: 0 12px;
}
.hai-candle-wrap canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* BOW 레전드 오버레이 */
.hai-bow-legend {
    position: absolute; top: 5px; right: 6px;
    display: flex; align-items: center; gap: 7px;
    font-size: 10px; color: #64748b;
    background: rgba(7,13,26,.8); backdrop-filter: blur(4px);
    padding: 2px 7px; border-radius: 5px;
    border: 1px solid rgba(30,45,74,.6);
    pointer-events: none; z-index: 10;
}
.hai-bow-buy  { color: #ef4444; font-weight: 700; }   /* 매수 = 빨강 */
.hai-bow-sell { color: #3b82f6; font-weight: 700; }   /* 매도 = 파랑 */
.hai-bow-stats { color: #94a3b8; }

/* 거래량 히스토그램 */
.hai-vol-title { font-size: 9px; color: #475569; padding: 4px 14px 2px; flex-shrink: 0; }
.hai-vol-wrap  { position: relative; height: 60px; margin: 0 12px; flex-shrink: 0; }
.hai-vol-wrap canvas {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
}

/* ────────────────────────────────────────────────────────────
   7. Row2-Left: 수급 + 워터폴 패널
──────────────────────────────────────────────────────────── */
.hai-panel-supply {
    display: flex;
    flex-direction: column;
    padding: 0 0 12px;
}

/* 수급 바 */
.hai-supply-wrap { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; }
.hai-supply-row  { display: flex; align-items: center; gap: 7px; }
.hai-supply-row.hai-tip  { cursor: help; }
.hai-supply-label {
    font-size: 10px; color: #64748b;
    width: 36px; flex-shrink: 0;
    display: flex; align-items: center; gap: 3px;
}
.hai-supply-bar-outer {
    flex: 1; height: 6px; background: #1e2d4a; border-radius: 3px; overflow: hidden;
}
.hai-supply-bar-fill { height: 100%; border-radius: 3px; transition: width .8s ease; }
.hai-supply-bar-fill.inst { background: #3b82f6; }
.hai-supply-bar-fill.for  { background: #10b981; }
.hai-supply-bar-fill.ret  { background: #f59e0b; }
.hai-supply-val { font-size: 10px; color: #94a3b8; width: 90px; text-align: right; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hai-supply-cont-row {
    display: flex; gap: 10px; margin-top: 4px;
    font-size: 10px; color: #64748b; flex-wrap: wrap;
}
.hai-supply-cont-row.hai-tip { cursor: help; }
.hai-supply-cont-item strong { color: #94a3b8; }
.hai-supply-circ { margin-left: auto; }

/* ── 거래가능 물량(유통비율) — 게이지 바 + 자동 시사점 문구 ── */
.hai-circ-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, .12);
}
.hai-circ-block.hai-tip { cursor: help; }
.hai-circ-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 5px;
}
.hai-circ-title { font-size: 11px; color: #cbd5e1; font-weight: 600; }
.hai-circ-sub   { font-size: 9px;  color: #64748b; font-weight: 400; }
.hai-circ-head strong { font-size: 13px; color: #e2e8f0; font-weight: 700; }
/* 게이지 트랙 */
.hai-circ-gauge {
    position: relative;
    height: 8px; border-radius: 5px;
    background: rgba(148, 163, 184, .14);
    overflow: hidden;
}
.hai-circ-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0%; border-radius: 5px;
    transition: width .8s ease, background .3s ease;
    background: #94a3b8;  /* 기본(데이터 없음) */
}
/* 등급별 색상: 낮음(빨강)/보통(노랑)/높음(초록) */
.hai-circ-fill.lvl-low  { background: linear-gradient(90deg, #f87171, #ef4444); }
.hai-circ-fill.lvl-mid  { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.hai-circ-fill.lvl-high { background: linear-gradient(90deg, #34d399, #10b981); }
/* 자동 시사점 문구 */
.hai-circ-note {
    margin-top: 5px;
    font-size: 10px; line-height: 1.4; color: #94a3b8;
}
.hai-circ-note .lvl-badge { font-weight: 700; margin-right: 4px; }
.hai-circ-note.lvl-low  .lvl-badge { color: #f87171; }
.hai-circ-note.lvl-mid  .lvl-badge { color: #fbbf24; }
.hai-circ-note.lvl-high .lvl-badge { color: #34d399; }

/* ── 다이버징(양방향) 수급 바 — 0선 중심, 우=순매수(빨강)/좌=순매도(파랑) ── */
.hai-supply-diverge { gap: 9px; }
/* 헤더: 막대 트랙 위에 정확히 정렬
   (좌 라벨 36px + gap 7px 만큼 들여쓰고, 우 값 84px + gap 7px 만큼 비움)
   → 좌끝=순매도 / 중앙(0선)=기준일 / 우끝=순매수 */
.hai-diverge-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 9px; color: #475569; margin-bottom: 2px;
    margin-left: 43px;   /* 라벨 36px + gap 7px */
    margin-right: 91px;  /* 값 84px + gap 7px */
}
.hai-diverge-axis-lbl { font-weight: 700; letter-spacing: .3px; flex-shrink: 0; }
.hai-diverge-axis-lbl.sell { color: #3b82f6; }   /* 매도 = 파랑 */
.hai-diverge-axis-lbl.buy  { color: #ef4444; }   /* 매수 = 빨강 */
.hai-diverge-asof {
    color: #64748b; font-size: 9px; text-align: center;
    flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hai-diverge-row {
    display: flex; align-items: center; gap: 7px;
}
.hai-diverge-row.hai-tip { cursor: help; }
.hai-diverge-label {
    font-size: 10px; color: #64748b;
    width: 36px; flex-shrink: 0;
    display: flex; align-items: center; gap: 3px;
}
.hai-diverge-track {
    position: relative; flex: 1; height: 14px;
    background: #131f36; border-radius: 4px; overflow: hidden;
}
/* 중앙 0선 */
.hai-diverge-zero {
    position: absolute; left: 50%; top: 0; bottom: 0;
    width: 1px; background: rgba(148,163,184,.45);
    transform: translateX(-0.5px); z-index: 2;
}
/* 막대: JS가 left/width 와 buy/sell 클래스를 세팅 */
.hai-diverge-bar {
    position: absolute; top: 2px; bottom: 2px; left: 50%; width: 0;
    border-radius: 2px; transition: width .7s ease, left .7s ease;
    z-index: 1;
}
.hai-diverge-bar.buy  { background: linear-gradient(90deg, rgba(239,68,68,.55), rgba(239,68,68,.9)); }  /* 우측 매수 = 빨강 */
.hai-diverge-bar.sell { background: linear-gradient(90deg, rgba(59,130,246,.9), rgba(59,130,246,.55)); } /* 좌측 매도 = 파랑 */
.hai-diverge-bar.zero { background: rgba(100,116,139,.4); }
.hai-diverge-val {
    font-size: 10px; width: 84px; text-align: right; flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums; color: #94a3b8;
}
.hai-diverge-val.buy  { color: #f87171; }
.hai-diverge-val.sell { color: #60a5fa; }
.hai-diverge-insight {
    font-size: 10px; color: #94a3b8; line-height: 1.4;
    background: rgba(30,41,59,.4); border-radius: 5px;
    padding: 5px 8px; margin-top: 2px;
    border-left: 2px solid rgba(148,163,184,.4);
}
.hai-diverge-insight:empty { display: none; }
.hai-diverge-insight b { color: #cbd5e1; }
.hai-diverge-insight .up   { color: #f87171; }
.hai-diverge-insight .down { color: #60a5fa; }

/* 워터폴 */
.hai-waterfall-sub-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    color: #475569; display: flex; align-items: center; gap: 5px;
    padding: 8px 14px 0; margin-bottom: 4px;
}
/* .hai-waterfall-sub-title 툴팁 — 공통 처리 */
.hai-waterfall-wrap {
    position: relative; flex: 1; min-height: 100px; margin: 0 12px;
}
.hai-waterfall-wrap canvas {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
}

/* ────────────────────────────────────────────────────────────
   8. Row2-Right: 4분할 차트 패널
──────────────────────────────────────────────────────────── */
.hai-panel-quad {
    display: flex;
    flex-direction: column;
    padding: 0 0 12px;
}
.hai-supply-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    padding: 0 12px;
    flex: 1;
    min-height: 0;
}
.hai-supply-card {
    background: #0a1220; border: 1px solid #1e2d4a; border-radius: 7px; padding: 8px;
    display: flex; flex-direction: column; min-height: 0;
}
.hai-supply-card-title {
    font-size: 9px; color: #64748b; font-weight: 600;
    margin-bottom: 5px; display: flex; align-items: center; gap: 4px;
    flex-shrink: 0;
}
.hai-supply-card-title.hai-tip { cursor: help; }
.hai-supply-card-title.hai-tip:hover { color: #94a3b8; }
.hai-supply-card-chart {
    position: relative; flex: 1; min-height: 100px;
}
.hai-supply-card-chart canvas {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
}

/* ────────────────────────────────────────────────────────────
   9. Row3: Zone E — AI 텍스트 분석 (전폭 2컬럼 레이아웃)
──────────────────────────────────────────────────────────── */
.hai-zone-e {
    border-bottom: 1px solid #1a2540;
    background: #070d1a;
    padding: 0 16px 24px;
}
/* E 내부 2컬럼 */
.hai-zone-e-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
}
.hai-zone-e-col { display: flex; flex-direction: column; gap: 10px; }

.hai-section-title {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .7px;
    color: #475569;
    display: flex; align-items: center; gap: 5px;
    margin: 12px 0 6px;
}
.hai-section-title.hai-tip:hover { color: #94a3b8; }

/* 판정 배너 */
.hai-verdict-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 9px; border: 1px solid;
    margin-bottom: 10px; margin-top: 12px;
    grid-column: 1 / -1;   /* 판정 배너는 전폭 */
}
.hai-verdict-banner.buy     { background: rgba(16,185,129,.06);  border-color: rgba(16,185,129,.25); }
.hai-verdict-banner.neutral { background: rgba(245,158,11,.06);  border-color: rgba(245,158,11,.25); }
.hai-verdict-banner.sell    { background: rgba(239,68,68,.06);   border-color: rgba(239,68,68,.25); }
.hai-verdict-icon  { font-size: 22px; flex-shrink: 0; }
.hai-verdict-body  { flex: 1; min-width: 0; }
.hai-verdict-title { font-size: 14px; font-weight: 700; color: #f1f5f9; }
.hai-verdict-sub   { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.hai-verdict-score { font-size: 20px; font-weight: 800; color: #f59e0b; flex-shrink: 0; }

/* 근거 목록 */
.hai-evidence-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
}
/* .hai-evidence-item 는 섹션 13에서 정의 */
.hai-evidence-item.pos  { border-color: rgba(16,185,129,.2); }
.hai-evidence-item.pos  .hai-evidence-main i { color: #10b981; }
.hai-evidence-item.neg  { border-color: rgba(239,68,68,.2); }
.hai-evidence-item.neg  .hai-evidence-main i { color: #ef4444; }
.hai-evidence-item.info { border-color: rgba(99,179,237,.2); }
.hai-evidence-item.info .hai-evidence-main i { color: #63b3ed; }
.hai-evidence-loading { color: #475569; font-size: 11px; }

/* 체크리스트 */
.hai-checklist-wrap { }
.hai-check-score {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; color: #64748b; margin-bottom: 6px;
}
.hai-check-score-bar { flex: 1; height: 3px; background: #1e2d4a; border-radius: 2px; overflow: hidden; }
.hai-check-score-bar > div { height: 100%; border-radius: 2px; transition: width .6s ease; }
.hai-checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
    gap: 5px;
}
.hai-check-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 10px; padding: 5px 7px; border-radius: 5px;
    background: #0a1220; border: 1px solid;
}
.hai-check-item.pass { border-color: rgba(16,185,129,.25); color: #6ee7b7; }
.hai-check-item.pass i { color: #10b981; }
.hai-check-item.fail { border-color: rgba(100,116,139,.2); color: #64748b; }
.hai-check-item.fail i { color: #ef4444; }

/* 전략 카드 */
.hai-action-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
}
.hai-action-card {
    background: #0a1220; border: 1px solid #1e2d4a; border-radius: 7px; padding: 10px;
}
.hai-action-card.buy     { border-color: rgba(16,185,129,.25); }
.hai-action-card.neutral { border-color: rgba(59,130,246,.25); }
.hai-action-card.sell    { border-color: rgba(239,68,68,.2); }
.hai-action-card-title { font-size: 11px; font-weight: 700; color: #94a3b8; margin-bottom: 7px; }
.hai-action-table { width: 100%; border-collapse: collapse; }
.hai-action-table td { padding: 2px 0; font-size: 10px; vertical-align: middle; }
.hai-action-table td:first-child { color: #64748b; width: 55%; }
.hai-action-table td:last-child  { color: #e2e8f0; font-weight: 600; text-align: right; }

/* 상세 토글 */
.hai-detail-section { margin-top: 10px; grid-column: 1 / -1; }
.hai-detail-toggle {
    width: 100%; background: #0a1220; border: 1px solid #1e2d4a;
    color: #64748b; border-radius: 7px; padding: 8px 12px;
    font-size: 11px; cursor: pointer; text-align: left;
    transition: all .15s;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.hai-detail-toggle:hover { background: #0d1829; color: #94a3b8; }
.hai-detail-body {
    background: #0a1220; border: 1px solid #1e2d4a; border-radius: 5px;
    padding: 10px 12px; line-height: 1.8; margin-bottom: 10px;
}
.hai-detail-table { width: 100%; border-collapse: collapse; }
.hai-detail-table tr:nth-child(even) { background: rgba(30,41,59,.3); }
.hai-dt-key { font-size: 10px; color: #64748b; padding: 3px 7px; width: 40%; }
.hai-dt-val { font-size: 10px; color: #94a3b8; font-family: monospace; font-weight: 600; padding: 3px 7px; }

/* ────────────────────────────────────────────────────────────
   11. 하위 호환 — 구 클래스명 alias
──────────────────────────────────────────────────────────── */
.hai-zone { border-bottom: 1px solid #1a2540; background: #070d1a; }
.hai-zone-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
    color: #475569; display: flex; align-items: center; gap: 5px;
    padding: 8px 14px 0; margin-bottom: 8px;
}
.hai-zone-badge { margin-left: auto; border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700; border: 1px solid; }

/* ────────────────────────────────────────────────────────────
   13. 근거 항목 서브텍스트 (레이어 2 용어설명)
──────────────────────────────────────────────────────────── */
.hai-evidence-item {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 11px; padding: 7px 9px;
    border-radius: 5px; background: #0a1220; border: 1px solid #1a2540; line-height: 1.5;
}
.hai-evidence-main {
    display: flex; align-items: flex-start; gap: 7px;
}
.hai-evidence-main i { flex-shrink: 0; margin-top: 2px; }
.hai-evidence-sub {
    font-size: 10px; color: #475569; line-height: 1.5;
    padding-left: 20px;   /* 아이콘 너비 맞춤 들여쓰기 */
    font-style: italic;
}

/* ────────────────────────────────────────────────────────────
   14. 거래량 배율 레이블
──────────────────────────────────────────────────────────── */
.hai-vol-title {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 9px; color: #475569; padding: 4px 14px 2px; flex-shrink: 0;
}
.hai-vol-ratio {
    font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
    border: 1px solid transparent;
}
.hai-vol-ratio.surge  { color: #f97316; border-color: rgba(249,115,22,.35); background: rgba(249,115,22,.1); }
.hai-vol-ratio.high   { color: #a78bfa; border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.08); }
.hai-vol-ratio.normal { color: #475569; }

/* ────────────────────────────────────────────────────────────
   15. BOW 수익률 이력 테이블
──────────────────────────────────────────────────────────── */
.hai-bh-wrap {
    padding: 0 4px;
    display: flex; flex-direction: column; gap: 6px;
}
.hai-bh-stats {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 6px 8px;
    background: #0a1220; border: 1px solid #1e2d4a; border-radius: 7px;
    margin-bottom: 2px;
}
.hai-bh-stat {
    display: flex; align-items: center; gap: 4px;
    font-size: 10px; color: #64748b;
}
.hai-bh-stat i { color: #3b82f6; font-size: 9px; }
.hai-bh-stat strong { color: #94a3b8; }
.hai-bh-stat strong.pos { color: #10b981; }
.hai-bh-stat strong.neg { color: #ef4444; }

.hai-bh-list {
    display: flex; flex-direction: column; gap: 5px;
    max-height: 260px; overflow-y: auto;
}
.hai-bh-list::-webkit-scrollbar { width: 3px; }
.hai-bh-list::-webkit-scrollbar-thumb { background: #1e2d4a; border-radius: 2px; }

.hai-bh-row {
    background: #0a1220; border: 1px solid #1e2d4a; border-radius: 6px;
    padding: 6px 9px; display: flex; flex-direction: column; gap: 4px;
}
.hai-bh-meta {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; flex-wrap: nowrap; overflow: hidden;
}

/* 매수/매도 레이블 */
.hai-bh-side       { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; letter-spacing: .3px; }
.hai-bh-side.buy   { background: rgba(248,113,113,.15); color: #fca5a5; }
.hai-bh-side.sell  { background: rgba(96,165,250,.15);  color: #93c5fd; }
.hai-bh-side.open  { background: rgba(167,139,250,.15); color: #c4b5fd; font-style: italic; }

/* 날짜 — 괄호 포함, 흐린 색으로 부가정보 느낌 */
.hai-bh-date { font-size: 10px; color: #475569; letter-spacing: .1px; flex-shrink: 0; }

/* 가격 */
.hai-bh-price      { font-size: 11px; color: #cbd5e1; font-weight: 600; flex-shrink: 0; }
.hai-bh-price.open { color: #4b5563; }

.hai-bh-arrow { color: #334155; font-size: 11px; flex-shrink: 0; }
.hai-bh-pct   { margin-left: auto; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.hai-bh-pct.pos  { color: #10b981; }
.hai-bh-pct.neg  { color: #ef4444; }
.hai-bh-pct.open { color: #a78bfa; }
.hai-bh-hold  { font-size: 10px; color: #475569; flex-shrink: 0; }

/* 구 클래스 호환 */
.hai-bh-buy  { display: none; }
.hai-bh-sell { display: none; }
.hai-bh-body, .hai-bh-legs, .hai-bh-leg,
.hai-bh-connector, .hai-bh-result { display: contents; }

.hai-bh-bar-outer {
    height: 4px; background: #1e2d4a; border-radius: 2px; overflow: hidden;
}
.hai-bh-bar-fill {
    height: 100%; border-radius: 2px; transition: width .5s ease;
}
.hai-bh-bar-fill.pos  { background: linear-gradient(90deg, #10b981, #34d399); }
.hai-bh-bar-fill.neg  { background: linear-gradient(90deg, #ef4444, #f87171); }
.hai-bh-bar-fill.open { background: linear-gradient(90deg, #7c3aed, #a78bfa); }

.hai-bow-no-data {
    color: #475569; font-size: 11px; text-align: center; padding: 20px 0;
}

/* ════════════════════════════════════════════════════════════
   매물대 핵심 지표 — 종합 해석 + 3기간 오버레이 + 통합 매물대 패널 3개
                  + 저항/지지 사다리 + 용어 사전
═══════════════════════════════════════════════════════════════ */
.hai-vp-metrics {
    grid-column: 1 / -1;
    margin-top: 14px;
    padding: 14px 16px 12px;
    background: linear-gradient(135deg, rgba(56,189,248,.05), rgba(34,197,94,.03));
    border: 1px solid rgba(56,189,248,.18);
    border-radius: 12px;
}
.hai-vpm-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.hai-vpm-title {
    font-size: 14px; font-weight: 700; color: #e2e8f0;
    display: inline-flex; align-items: center; gap: 7px;
}
.hai-vpm-title i { color: #38bdf8; }
.hai-vpm-title small { font-size: 11px; font-weight: 500; color: #64748b; }

/* 용어 사전 토글 버튼 */
.hai-vpm-gloss-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: #94a3b8;
    background: rgba(7,13,26,.6); border: 1px solid rgba(30,45,74,.8);
    padding: 5px 11px; border-radius: 7px; cursor: pointer;
    transition: all .15s;
}
.hai-vpm-gloss-toggle:hover { color: #e2e8f0; border-color: rgba(56,189,248,.5); }
.hai-vpm-gt-caret { font-size: 10px; transition: transform .2s; }
.hai-vpm-gloss-toggle[aria-expanded="true"] .hai-vpm-gt-caret { transform: rotate(180deg); }

/* 🧭 종합 해석 카드 */
.hai-vpm-summary {
    background: rgba(7,13,26,.55);
    border: 1px solid rgba(56,189,248,.22);
    border-radius: 10px;
    padding: 13px 15px;
    margin-bottom: 14px;
}
.hai-vpm-sum-loading { font-size: 12px; color: #475569; text-align: center; padding: 10px 0; }
.hai-vpm-sum-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 9px;
    padding-bottom: 9px; border-bottom: 1px solid rgba(30,45,74,.7);
}
.hai-vpm-sum-title { font-size: 13px; font-weight: 700; color: #e2e8f0; display: inline-flex; align-items: center; gap: 6px; }
.hai-vpm-sum-light {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
}
.hai-vpm-sum-light.up    { color: #22c55e; background: rgba(34,197,94,.13);  border: 1px solid rgba(34,197,94,.4); }
.hai-vpm-sum-light.warn  { color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.4); }
.hai-vpm-sum-light.down  { color: #ef4444; background: rgba(239,68,68,.12);  border: 1px solid rgba(239,68,68,.4); }

/* 종합 카드 — 가로 3열 1줄: [A.기간별 점수] [B.가격 눈금자] [해석] */
.hai-vpm-sum-row {
    display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 16px;
    align-items: start;
}
.hai-vpm-sum-col { min-width: 0; }
.hai-vpm-sum-col.ruler,
.hai-vpm-sum-col.interp { padding-left: 16px; border-left: 1px solid rgba(30,45,74,.8); }

.hai-vpm-sg-title { font-size: 11px; font-weight: 700; color: #cbd5e1; margin-bottom: 9px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.hai-vpm-sg-title small { font-size: 9.5px; font-weight: 400; color: #64748b; }

/* A. 기간별 신호등 스트립 (6지표 점등판) */
.hai-vpm-strip { display: flex; flex-direction: column; gap: 7px; }
.hai-vpm-st-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 8px; }
.hai-vpm-st-name { font-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1.15; }
.hai-vpm-st-name small { display: block; font-size: 8.5px; font-weight: 600; color: #64748b; }
.hai-vpm-st-dots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.hai-vpm-st-dot { font-size: 12px; text-align: center; cursor: help; line-height: 1.4; border-radius: 4px; }
.hai-vpm-st-dot.up   { background: rgba(34,197,94,.10); }
.hai-vpm-st-dot.down { background: rgba(239,68,68,.10); }
/* 지표 약칭 범례 행 */
.hai-vpm-st-row.legend .hai-vpm-st-leg { font-size: 8px; color: #64748b; text-align: center; white-space: nowrap; display: block; }
.hai-vpm-st-row.legend { margin-bottom: 1px; }
/* 우호/주의/중립 카운트 (0의 의미 구분: 혼조 vs 밋밋) */
.hai-vpm-st-cnt { font-size: 9px; font-weight: 700; white-space: nowrap; text-align: right; }
.hai-vpm-st-cnt .up   { color: #4ade80; }
.hai-vpm-st-cnt .down { color: #f87171; }
.hai-vpm-st-cnt .mid, .hai-vpm-st-cnt .flat { color: #94a3b8; }

/* 한 줄 자연어 요약 */
.hai-vpm-sum-summary { font-size: 11px; color: #cbd5e1; line-height: 1.6; margin: 11px 0 0; padding-top: 10px; border-top: 1px dashed rgba(148,163,184,.25); }
.hai-vpm-sum-summary b { color: #e2e8f0; }
.hai-vpm-sum-summary b.up   { color: #4ade80; }
.hai-vpm-sum-summary b.warn { color: #fbbf24; }
.hai-vpm-sum-summary b.down { color: #f87171; }
.hai-vpm-st-sub { font-size: 10px; color: #94a3b8; }

/* B. 가격 눈금자 캔버스 (점=실제 위치 + 리더선 + 우측 라벨/거리%) */
.hai-vpm-ruler-cv { width: 100% !important; height: 148px !important; display: block; }

/* 해석 (현재가 위치 + 우호/부담) */
.hai-vpm-sum-lead { font-size: 12px; color: #cbd5e1; line-height: 1.55; margin-bottom: 9px; }
.hai-vpm-sum-lead b { color: #f8fafc; }
.hai-vpm-sum-box { font-size: 11px; line-height: 1.5; padding: 7px 10px; border-radius: 8px; margin-bottom: 7px; }
.hai-vpm-sum-box:last-child { margin-bottom: 0; }
.hai-vpm-sum-box.pros { background: rgba(34,197,94,.07);  border: 1px solid rgba(34,197,94,.22); color: #bbf7d0; }
.hai-vpm-sum-box.cons { background: rgba(239,68,68,.06);  border: 1px solid rgba(239,68,68,.22); color: #fecaca; }
.hai-vpm-sum-box b { display: block; margin-bottom: 3px; color: #e2e8f0; font-size: 10.5px; }

/* 🅰️ 기간별 통합 매물대 패널 3개 */
.hai-vpm-panels {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px;
}
.hai-vpm-panel {
    background: rgba(7,13,26,.55); border: 1px solid rgba(30,45,74,.8);
    border-radius: 10px; padding: 11px 12px 12px;
    display: flex; flex-direction: column;
}
.hai-vpm-panel.short { border-top: 2px solid #38bdf8; }
.hai-vpm-panel.mid   { border-top: 2px solid #fb923c; }
.hai-vpm-panel.long  { border-top: 2px solid #c084fc; }
.hai-vpm-panel.nodata { opacity: .7; align-items: center; justify-content: center; min-height: 200px; }

/* 패널 헤더 */
.hai-vpm-panel-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.hai-vpm-panel-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.hai-vpm-panel-name { font-size: 13px; font-weight: 700; color: #e2e8f0; }
.hai-vpm-panel-name b { font-weight: 800; }
.hai-vpm-panel-sub  { font-size: 10.5px; color: #64748b; margin-left: auto; }

/* 통합 매물대 캔버스 */
.hai-vpm-merged-cv { width: 100% !important; height: 200px !important; display: block; }
.hai-vpm-merged-legend {
    display: flex; flex-wrap: wrap; gap: 9px; margin: 5px 0 8px;
    font-size: 9.5px; color: #94a3b8;
}
.hai-vpm-merged-legend span { display: inline-flex; align-items: center; gap: 4px; }
.hai-vpm-merged-legend i { width: 11px; height: 7px; border-radius: 2px; display: inline-block; }
.hai-vpm-merged-legend .lg-buy  { background: rgba(34,197,94,.7); }
.hai-vpm-merged-legend .lg-sell { background: rgba(239,68,68,.7); }
.hai-vpm-merged-legend .lg-poc  { background: transparent; border: 1.5px solid #fbbf24; }
.hai-vpm-merged-legend .lg-cur  { background: transparent; border-top: 2px dashed #f8fafc; height: 0; }

/* 6지표 요약줄 */
.hai-vpm-srows { display: flex; flex-direction: column; gap: 1px; }
.hai-vpm-srow {
    display: grid;
    grid-template-columns: 18px 78px auto;
    grid-template-rows: auto auto;
    column-gap: 6px;
    align-items: center;
    padding: 6px 5px; border-radius: 6px;
}
.hai-vpm-srow:nth-child(odd) { background: rgba(11,18,32,.4); }
.hai-vpm-srow-light { grid-row: 1 / 3; font-size: 11px; text-align: center; }
.hai-vpm-srow-label { font-size: 11px; font-weight: 700; color: #cbd5e1; white-space: nowrap; }
.hai-vpm-srow-val   { font-size: 11.5px; font-weight: 700; color: #f1f5f9; text-align: right; word-break: keep-all; }
.hai-vpm-srow-note  { grid-column: 2 / 4; font-size: 10px; color: #64748b; line-height: 1.4; margin-top: 2px; }
.hai-vpm-srow.up   .hai-vpm-srow-val { color: #4ade80; }
.hai-vpm-srow.down .hai-vpm-srow-val { color: #f87171; }
.hai-vpm-srow.warn .hai-vpm-srow-val { color: #fcd34d; }

.hai-vpm-nodata-msg { font-size: 11.5px; color: #64748b; text-align: center; line-height: 1.6; }
.hai-vpm-nodata-msg small { font-size: 10px; }

/* 용어 사전 */
.hai-vpm-glossary {
    margin-top: 12px; padding: 13px 16px;
    background: rgba(11,18,32,.55); border: 1px solid rgba(30,45,74,.7);
    border-radius: 10px;
}
.hai-vpm-glossary[hidden] { display: none; }
.hai-vpm-glossary dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px; }
.hai-vpm-glossary dt { font-size: 12px; font-weight: 700; color: #7dd3fc; margin-bottom: 2px; }
.hai-vpm-glossary dd { font-size: 11.5px; color: #94a3b8; line-height: 1.55; margin: 0 0 6px; }
.hai-vpm-glossary dd strong { color: #cbd5e1; }

.hai-vpm-note {
    margin: 11px 2px 0;
    font-size: 10.5px; color: #475569; line-height: 1.5;
}

@media (max-width: 1100px) {
    .hai-row1 { grid-template-columns: 1fr 2fr; }  /* 비율 유지 */
    .hai-radar-canvas { max-width: 240px; height: 260px !important; }
}
@media (max-width: 800px) {
    .hai-row1, .hai-row2 { grid-template-columns: 1fr; }
    .hai-panel + .hai-panel { border-left: none; border-top: 1px solid #1a2540; }
    .hai-zone-e-grid  { grid-template-columns: 1fr; }
    .hai-action-grid  { grid-template-columns: 1fr; }
    .hai-checklist-grid { grid-template-columns: 1fr 1fr; }
    .hai-radar-canvas { max-width: 200px; height: 200px !important; }
    .hai-candle-wrap  { min-height: 240px; }
    .hai-supply-card-chart { min-height: 80px; }
    /* 매물대: 종합카드 3열 → 1열(점수→눈금자→해석 세로 스택) + 통합 패널 1열 */
    .hai-vpm-sum-row { grid-template-columns: 1fr; gap: 14px; }
    .hai-vpm-sum-col.ruler,
    .hai-vpm-sum-col.interp {
        padding-left: 0; padding-top: 13px;
        border-left: none; border-top: 1px solid rgba(30,45,74,.8);
    }
    .hai-vpm-glossary dl { grid-template-columns: 1fr; }
    .hai-vpm-panels { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
    /* 태블릿: 통합 패널 2열 (장기 패널은 2번째 줄로) */
    .hai-vpm-panels { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .hai-action-grid    { grid-template-columns: 1fr; }
    .hai-checklist-grid { grid-template-columns: 1fr; }
    .hai-supply-grid    { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   AI와 함께 종목 톺아보기 — GPT/Gemini 프롬프트 복사 섹션
═══════════════════════════════════════════════════════════════ */
.hai-aiprompt-section {
    grid-column: 1 / -1;
    margin-top: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(99,102,241,.07), rgba(139,92,246,.04));
    border: 1px solid rgba(99,102,241,.22);
    border-radius: 12px;
}
.hai-aiprompt-head { margin-bottom: 12px; }
.hai-aiprompt-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 800; color: #c7d2fe;
}
.hai-aiprompt-title i { color: #818cf8; }
.hai-aiprompt-desc {
    margin: 7px 0 0; font-size: 11.5px; line-height: 1.65; color: #94a3b8;
}
.hai-aiprompt-desc strong { color: #a5b4fc; font-weight: 700; }

.hai-aiprompt-preview-wrap {
    position: relative;
    background: #070d18;
    border: 1px solid #1e2d4a;
    border-radius: 8px;
    overflow: hidden;
}
.hai-aiprompt-preview {
    margin: 0; padding: 12px 14px;
    max-height: 240px; overflow-y: auto;
    font-family: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 10.5px; line-height: 1.7; color: #b6c2d6;
    white-space: pre-wrap; word-break: break-word;
}
.hai-aiprompt-preview::-webkit-scrollbar { width: 5px; }
.hai-aiprompt-preview::-webkit-scrollbar-thumb { background: #2a3a5c; border-radius: 3px; }
.hai-aiprompt-preview::-webkit-scrollbar-track { background: transparent; }

/* 복사 버튼 — 전폭 강조 */
.hai-aiprompt-btn-copy {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 12px;
    padding: 12px 16px; border-radius: 10px; cursor: pointer;
    font-size: 13.5px; font-weight: 800; border: none;
    background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
    box-shadow: 0 4px 14px rgba(99,102,241,.32);
    transition: transform .12s ease, filter .12s ease;
}
.hai-aiprompt-btn-copy:hover { transform: translateY(-1px); filter: brightness(1.08); }
.hai-aiprompt-btn-copy:active { transform: translateY(0); }

.hai-aiprompt-open-label {
    margin: 13px 0 7px; font-size: 10.5px; color: #64748b; text-align: center;
}

/* AI 바로가기 칩 */
.hai-aiprompt-actions {
    display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
}
.hai-aiprompt-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 7px 13px; border-radius: 20px; cursor: pointer;
    font-size: 11.5px; font-weight: 700;
    background: #0a1220; color: #cbd5e1; border: 1px solid #2a3a5c;
    transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.hai-aiprompt-btn:hover { transform: translateY(-1px); filter: brightness(1.15); }
.hai-aiprompt-btn:active { transform: translateY(0); }

.hai-aiprompt-btn-gpt        { color: #34d399; border-color: rgba(16,163,127,.45); }
.hai-aiprompt-btn-gemini     { color: #82a9f9; border-color: rgba(66,133,244,.45); }
.hai-aiprompt-btn-claude     { color: #e0a06a; border-color: rgba(217,119,57,.45); }
.hai-aiprompt-btn-perplexity { color: #4fd1d9; border-color: rgba(32,180,191,.45); }
.hai-aiprompt-btn-grok       { color: #cbd5e1; border-color: rgba(148,163,184,.45); }
.hai-aiprompt-btn-copilot    { color: #6fb1e4; border-color: rgba(48,138,210,.45); }
.hai-aiprompt-btn-clova      { color: #5fe07a; border-color: rgba(46,200,87,.45); }

.hai-aiprompt-disclaimer {
    display: flex; align-items: flex-start; gap: 7px;
    margin: 12px 0 0; padding: 9px 11px;
    background: rgba(245,158,11,.07);
    border: 1px solid rgba(245,158,11,.2);
    border-radius: 7px;
    font-size: 10.5px; line-height: 1.6; color: #b08948;
}
.hai-aiprompt-disclaimer i { color: #f59e0b; margin-top: 2px; flex-shrink: 0; }
.hai-aiprompt-disclaimer strong { color: #d4a052; }

@media (max-width: 480px) {
    .hai-aiprompt-btn { font-size: 11px; padding: 7px 11px; }
}

/* ── HASRI AI 토스트 ── */
.hai-ai-toast {
    position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
    z-index: 99999;
    max-width: 90vw;
    padding: 12px 20px; border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
    font-size: 12.5px; font-weight: 600; line-height: 1.5;
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.hai-ai-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.hai-ai-toast.err  { background: linear-gradient(135deg, #ef4444, #b91c1c); }


/* ════════════════════════════════════════════════════════════
   AI 분석 오버레이 — 전체화면 연산 애니메이션
   다크 네이비 + 블루 액센트 / 부드러운 페이드 + AI 코어 펄스
═══════════════════════════════════════════════════════════════ */
.hai-ao {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ★ FIX(깜빡임): 배경을 완전 불투명(alpha 1)으로 — 뒤의 대시보드가 비치지 않도록 */
    background: radial-gradient(ellipse at 50% 40%, rgba(20,27,45,1), rgba(10,14,26,1));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* ★ FIX(깜빡임): show 시에는 페이드인을 쓰지 않고 즉시 표시(아래 .show 참고).
       닫힐 때(.closing)만 부드러운 페이드아웃을 적용하기 위해 기본 transition 제거 */
    transition: none;
}
/* ★ FIX(깜빡임): show 는 트랜지션 없이 '즉시' 불투명 표시 → 대시보드가 잠깐 비치는 현상 제거 */
.hai-ao.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
}
/* 닫힐 때 — 살짝 확대되며 부드럽게 사라짐 (페이드아웃은 닫힘에만 적용) */
.hai-ao.closing {
    transition: opacity .5s ease, visibility .5s ease;
    opacity: 0;
}
.hai-ao.closing .hai-ao-inner { transform: scale(1.04); }

/* ── 배경 그리드 + 스캔라인 ── */
.hai-ao-bg { position: absolute; inset: 0; overflow: hidden; }
.hai-ao-grid {
    position: absolute; inset: -50%;
    background-image:
        linear-gradient(rgba(59,130,246,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
    animation: haiAoGridDrift 22s linear infinite;
}
@keyframes haiAoGridDrift {
    from { transform: translate(0, 0); }
    to   { transform: translate(44px, 44px); }
}
.hai-ao-scan {
    position: absolute; left: 0; right: 0; height: 180px;
    background: linear-gradient(180deg, transparent, rgba(59,130,246,.10), transparent);
    animation: haiAoScan 3.6s ease-in-out infinite;
}
@keyframes haiAoScan {
    0%   { top: -20%; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ── 내부 컨텐츠 컨테이너 ── */
.hai-ao-inner {
    position: relative;
    z-index: 2;
    width: min(440px, 90vw);
    text-align: center;
    transform: scale(1);
    transition: transform .5s cubic-bezier(0.4,0,0.2,1);
}

/* ── 중앙 AI 코어 (회전 동심원 + 글로우) ── */
.hai-ao-core {
    position: relative;
    width: 132px; height: 132px;
    margin: 0 auto 26px;
    display: flex; align-items: center; justify-content: center;
}
.hai-ao-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
}
.hai-ao-ring-1 {
    inset: 0;
    border-top-color: var(--accent, #3b82f6);
    border-right-color: var(--accent, #3b82f6);
    animation: haiAoSpin 1.6s linear infinite;
}
.hai-ao-ring-2 {
    inset: 16px;
    border-bottom-color: var(--purple, #8b5cf6);
    border-left-color: var(--purple, #8b5cf6);
    animation: haiAoSpin 2.4s linear infinite reverse;
}
.hai-ao-ring-3 {
    inset: 32px;
    border-top-color: rgba(16,185,129,.7);
    border-left-color: rgba(16,185,129,.7);
    animation: haiAoSpin 3.2s linear infinite;
}
@keyframes haiAoSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* 궤도를 도는 작은 점 */
.hai-ao-orbit {
    position: absolute;
    inset: 0;
    animation: haiAoSpin 2s linear infinite;
}
.hai-ao-orbit i {
    position: absolute;
    top: -3px; left: 50%;
    width: 8px; height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: var(--accent, #3b82f6);
    box-shadow: 0 0 12px 2px var(--accent-glow, rgba(59,130,246,.6));
}
.hai-ao-core-glow {
    position: absolute;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,.45), transparent 70%);
    animation: haiAoPulse 1.8s ease-in-out infinite;
}
@keyframes haiAoPulse {
    0%, 100% { transform: scale(1);   opacity: .7; }
    50%      { transform: scale(1.3); opacity: 1; }
}
.hai-ao-core-icon {
    position: relative;
    z-index: 2;
    font-size: 38px;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(59,130,246,.5));
    animation: haiAoFloat 2.6s ease-in-out infinite;
}
@keyframes haiAoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* ── 타이틀 / 서브 ── */
.hai-ao-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary, #e2e8f0);
    letter-spacing: -0.3px;
}
.hai-ao-sub {
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
}
.hai-ao-sub strong { color: var(--accent, #3b82f6); font-weight: 700; }
.hai-ao-sub span   { color: var(--text-muted, #4a5568); }

/* ── 진행 단계 리스트 ── */
.hai-ao-steps {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    text-align: left;
}
.hai-ao-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    margin-bottom: 7px;
    border-radius: 10px;
    background: rgba(20,27,45,.55);
    border: 1px solid var(--border, #1e2d4a);
    opacity: .4;
    transform: translateX(-6px);
    transition: all .4s cubic-bezier(0.4,0,0.2,1);
}
.hai-ao-step-ico {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(59,130,246,.1);
    color: var(--text-muted, #4a5568);
    font-size: 13px;
    transition: all .4s ease;
}
.hai-ao-step-label {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    transition: color .4s ease;
}
.hai-ao-step-state {
    flex-shrink: 0;
    width: 18px; height: 18px;
    position: relative;
}
/* 진행 중 — 스피너 */
.hai-ao-step.active {
    opacity: 1;
    transform: translateX(0);
    border-color: rgba(59,130,246,.5);
    background: rgba(59,130,246,.08);
    box-shadow: 0 2px 14px rgba(59,130,246,.14);
}
.hai-ao-step.active .hai-ao-step-ico {
    background: var(--accent, #3b82f6);
    color: #fff;
    box-shadow: 0 0 12px rgba(59,130,246,.5);
}
.hai-ao-step.active .hai-ao-step-label { color: var(--text-primary, #e2e8f0); }
.hai-ao-step.active .hai-ao-step-state::before {
    content: "";
    position: absolute; inset: 0;
    border: 2px solid rgba(59,130,246,.25);
    border-top-color: var(--accent, #3b82f6);
    border-radius: 50%;
    animation: haiAoSpin .7s linear infinite;
}
/* 완료 — 체크 */
.hai-ao-step.done {
    opacity: 1;
    transform: translateX(0);
}
.hai-ao-step.done .hai-ao-step-ico {
    background: rgba(16,185,129,.16);
    color: var(--green, #10b981);
}
.hai-ao-step.done .hai-ao-step-label { color: var(--text-secondary, #94a3b8); }
.hai-ao-step.done .hai-ao-step-state::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    color: var(--green, #10b981);
    animation: haiAoCheckPop .3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes haiAoCheckPop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ── 진행 바 ── */
.hai-ao-progress {
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: var(--border, #1e2d4a);
    overflow: hidden;
}
.hai-ao-progress-bar {
    width: 0%;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent, #3b82f6), var(--purple, #8b5cf6));
    box-shadow: 0 0 10px rgba(59,130,246,.5);
    transition: width .5s cubic-bezier(0.4,0,0.2,1);
}
.hai-ao-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 11.5px;
}
.hai-ao-pct {
    font-weight: 700;
    color: var(--accent, #3b82f6);
    font-variant-numeric: tabular-nums;
}
.hai-ao-hint {
    color: var(--text-muted, #4a5568);
    animation: haiAoBlink 1.6s ease-in-out infinite;
}
@keyframes haiAoBlink {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
}

/* 모바일 대응 (참고 — 게스트는 모바일 차단되지만 회원 대비) */
@media (max-width: 480px) {
    .hai-ao-inner   { width: 92vw; }
    .hai-ao-core    { width: 110px; height: 110px; }
    .hai-ao-title   { font-size: 18px; }
    .hai-ao-step    { padding: 8px 11px; }
}

/* 모션 최소화 선호 사용자 — 애니메이션 단순화 */
@media (prefers-reduced-motion: reduce) {
    .hai-ao-grid, .hai-ao-scan, .hai-ao-orbit,
    .hai-ao-core-glow, .hai-ao-core-icon { animation: none; }
}


/* ════════════════════════════════════════════════════════════
   게스트 쿨다운 상태의 "분석 시작" 버튼
   ⏱ mm:ss 카운트다운 + 비활성화 외형
═══════════════════════════════════════════════════════════════ */
.hai-chat-btn.hai-chat-btn-cooldown,
.hai-chat-btn-cooldown {
    background: var(--bg-card-hover, #1a2340) !important;
    color: var(--text-muted, #6b7a99) !important;
    border: 1px solid var(--border-light, #243352) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: .85;
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
    transition: background .25s ease, color .25s ease;
}
.hai-chat-btn-cooldown:hover {
    transform: none !important;
    background: var(--bg-card-hover, #1a2340) !important;
}
.hai-chat-btn-cooldown i {
    color: var(--accent, #3b82f6) !important;
    animation: haiCooldownPulse 1.5s ease-in-out infinite;
}
@keyframes haiCooldownPulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}


/* ════════════════════════════════════════════════════════════
   검색 결과 0건 안내 카드 — 일반 질문 → 외부 AI 서비스 유도
   다크 네이비 + 블루 액센트 테마 일치
═══════════════════════════════════════════════════════════════ */
.hai-noresult-card {
    margin-top: 14px;
    padding: 22px 22px 18px;
    border-radius: var(--radius, 12px);
    background: linear-gradient(155deg, rgba(20,27,45,.95), rgba(15,20,35,.95));
    border: 1px solid var(--border-light, #243352);
    box-shadow: 0 8px 32px rgba(0,0,0,.32);
    text-align: center;
    animation: haiNrIn .35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes haiNrIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hai-nr-icon {
    width: 46px; height: 46px;
    margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    color: var(--accent, #3b82f6);
    background: var(--accent-glow, rgba(59,130,246,.18));
    box-shadow: 0 0 0 1px rgba(59,130,246,.2);
}
.hai-nr-title {
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    line-height: 1.5;
}
.hai-nr-title b { color: var(--accent, #3b82f6); font-weight: 800; }
.hai-nr-desc {
    margin: 0 0 16px;
    font-size: 12.5px;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
}
.hai-nr-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.hai-nr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-sm, 8px);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-primary, #e2e8f0);
    background: var(--bg-card-hover, #1a2340);
    border: 1px solid var(--border-light, #243352);
    transition: transform .18s ease, box-shadow .18s ease,
                border-color .18s ease, background .18s ease;
}
.hai-nr-btn:hover {
    transform: translateY(-2px);
    background: #1f2945;
}
.hai-nr-btn-ic {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    color: #fff;
}
/* 브랜드 컬러 — ChatGPT(틸/그린), Gemini(블루~퍼플), Copilot(블루) */
.hai-nr-chatgpt .hai-nr-btn-ic { background: linear-gradient(135deg, #10a37f, #0d8a6c); }
.hai-nr-chatgpt:hover { border-color: rgba(16,163,127,.55); box-shadow: 0 6px 18px rgba(16,163,127,.22); }
.hai-nr-gemini  .hai-nr-btn-ic { background: linear-gradient(135deg, #4285f4, #9b72f0); }
.hai-nr-gemini:hover  { border-color: rgba(102,133,244,.55); box-shadow: 0 6px 18px rgba(102,133,244,.22); }
.hai-nr-copilot .hai-nr-btn-ic { background: linear-gradient(135deg, #2563eb, #0ea5e9); }
.hai-nr-copilot:hover { border-color: rgba(37,99,235,.55); box-shadow: 0 6px 18px rgba(37,99,235,.22); }
.hai-nr-hint {
    margin: 16px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--border, #1e2d4a);
    font-size: 11.5px;
    color: var(--text-muted, #6b7a99);
    line-height: 1.5;
}
.hai-nr-hint i { color: #f59e0b; margin-right: 4px; }
.hai-nr-hint b { color: var(--text-secondary, #94a3b8); font-weight: 700; }

@media (max-width: 480px) {
    .hai-noresult-card { padding: 18px 16px 15px; }
    .hai-nr-btns { gap: 8px; }
    .hai-nr-btn { padding: 9px 13px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   ★ PC 종목 액션 모달 (Stock Action Modal)
   — 공시/클러스터/모멘텀 종목 클릭 시 4버튼 선택 모달
   ════════════════════════════════════════════════════════════════ */
.stock-action-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    animation: samFadeIn 0.2s ease-out;
}
.stock-action-modal-overlay.active {
    display: flex;
}
@keyframes samFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.stock-action-modal {
    background: linear-gradient(145deg, #111827 0%, #1a2332 100%);
    border: 1px solid #2d3f5a;
    border-radius: 20px;
    padding: 0;
    min-width: 340px;
    max-width: 440px;
    width: 92vw;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(79, 209, 197, 0.08);
    animation: samSlideUp 0.25s ease-out;
    overflow: hidden;
}
@keyframes samSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.sam-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid #1e2d4a;
    transition: background .3s;
}
/* Gaebee ON 시 헤더 배경 틴트 */
.stock-action-modal.gaebee-on .sam-header {
    background: rgba(245, 158, 11, 0.07);
    border-bottom-color: rgba(245, 158, 11, 0.2);
}
.sam-stock-name {
    font-size: 18px;
    font-weight: 700;
    color: #e2e8f0;
    flex: 1;
    line-height: 1.2;
}
.sam-stock-code {
    font-size: 12px;
    color: #64748b;
    font-family: 'D2Coding', 'SF Mono', monospace;
    display: block;
    margin-top: 2px;
}
.sam-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: rgba(148, 163, 184, 0.08);
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.sam-close:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}
.sam-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 18px 22px 22px;
}
/* 6개 버튼 2열 × 3행 — 모든 버튼 동일 2열 */
.sam-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 14px;
    border-radius: 14px;
    border: 1px solid #243352;
    background: rgba(15, 23, 42, 0.6);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.3;
}
.sam-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: #f1f5f9;
}
.sam-ico {
    font-size: 28px;
    line-height: 1;
}
/* 개별 버튼 컬러 */
.sam-btn-ai:hover {
    border-color: rgba(79, 209, 197, 0.5);
    background: rgba(79, 209, 197, 0.08);
    color: #4fd1c5;
}
.sam-btn-chart:hover {
    border-color: rgba(129, 140, 248, 0.5);
    background: rgba(129, 140, 248, 0.08);
    color: #818cf8;
}
.sam-btn-news:hover {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.08);
    color: #fbbf24;
}
.sam-btn-dart:hover {
    border-color: rgba(52, 211, 153, 0.5);
    background: rgba(52, 211, 153, 0.08);
    color: #34d399;
}