/* =============================================================
   My Stocks (관심종목) — 칩 그리드 개편 스타일
   ─────────────────────────────────────────────
   이슈 클러스터(jjirasi)의 종목 칩 디자인을 벤치마킹하여
   "종목명 + 등락율" 칩을 테마별로 모아보는 단순·직관 레이아웃.
   기존 style.css 의 .wl-* 규칙과 공존 (칩 전용 클래스만 정의).
   ============================================================= */

/* ── 📊 요약 스트립 ───────────────────────────────────────── */
.wl-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 16px;
    margin-bottom: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.wl-sum-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-secondary);
}
.wl-sum-item i { font-size: 12px; }
.wl-sum-num { font-weight: 800; font-size: 15px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wl-sum-lbl { font-size: 12px; color: var(--text-muted); }
.wl-sum-sep { width: 1px; height: 18px; background: var(--border); }
.wl-sum-total i  { color: var(--accent); }
.wl-sum-up   i, .wl-sum-up   .wl-sum-num { color: #ef4444; }
.wl-sum-down i, .wl-sum-down .wl-sum-num { color: #3b82f6; }
.wl-sum-flat i, .wl-sum-flat .wl-sum-num { color: #94a3b8; }
.wl-sum-avg  { margin-left: auto; }
.wl-sum-avg .wl-sum-num.up   { color: #ef4444; }
.wl-sum-avg .wl-sum-num.down { color: #3b82f6; }
.wl-sum-avg .wl-sum-num.flat { color: #94a3b8; }

/* ── ★ vSORT4: 툴바 병합형 요약 스트립 (컴팩트) ─────────── */
.wl-summary--inline {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 5px 12px;
    margin-bottom: 0;
    background: rgba(148,163,184,0.06);
    border: 1px solid var(--border);
    border-radius: 10px;
    flex-shrink: 0;
}
.wl-summary--inline .wl-sum-num { font-size: 13.5px; }
.wl-summary--inline .wl-sum-lbl { font-size: 11px; }
.wl-summary--inline .wl-sum-avg { margin-left: 0; }

/* ── 🛠 툴바 좌측 (정렬) ──────────────────────────────────── */
.wl-toolbar-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.wl-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}
.wl-toolbar-right { margin-left: auto; }

/* ── ★ vSORT2: 가로 펼침 정렬 버튼 바 ────────────────────── */
.wl-sort-bar {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    background: rgba(148,163,184,0.08);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.wl-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
    user-select: none;
}
.wl-sort-btn:hover {
    color: var(--text-primary);
    background: rgba(148,163,184,0.12);
}
.wl-sort-btn.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 2px 10px var(--accent-glow);
    font-weight: 700;
}

/* ── 🏷️ 테마 필터 칩 바 ──────────────────────────────────── */
.wl-theme-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}
.wl-theme-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 99px;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
}
.wl-theme-chip:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.wl-theme-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 3px 12px var(--accent-glow);
}
.wl-theme-chip .wl-theme-cnt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 9px;
    background: rgba(148,163,184,0.18);
    color: var(--text-muted);
}
.wl-theme-chip.active .wl-theme-cnt {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* ── 칩 리스트 영역 (스크롤) ──────────────────────────────── */
.wl-chip-list {
    display: block;          /* 기존 flex-column 덮어쓰기 */
    gap: 0;
}

/* 테마 그룹 헤더 (이슈 클러스터 그룹 헤드 감성) */
.wl-group {
    margin-bottom: 18px;
    animation: wlGroupIn .35s ease both;
}
@keyframes wlGroupIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.wl-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.wl-group-head .wl-group-icon { font-size: 15px; }
.wl-group-head .wl-group-name { color: var(--text-primary); }
.wl-group-head .wl-group-sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}
.wl-group-head .wl-group-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; height: 18px; padding: 0 6px;
    font-size: 11px; font-weight: 800;
    border-radius: 9px;
    background: var(--accent-glow);
    color: var(--accent);
}

/* 칩들이 배치되는 컨테이너 (FLIP 애니메이션 대상) */
.wl-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── 종목 칩 (핵심: 종목명 + 등락율) ──────────────────────── */
.wl-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: transform .35s cubic-bezier(.22,.61,.36,1),
                border-color .18s ease,
                background .18s ease,
                box-shadow .18s ease;
    will-change: transform;
}
.wl-chip:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
    box-shadow: 0 4px 16px rgba(0,0,0,0.28);
    transform: translateY(-2px);
}
/* 좌측 컬러 바 (상승/하락) */
.wl-chip::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 0;
    border-radius: 0 3px 3px 0;
    transition: height .2s ease;
}
.wl-chip.up::before   { background: #ef4444; }
.wl-chip.down::before { background: #3b82f6; }
.wl-chip:hover::before { height: 60%; }

.wl-chip-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
/* 현재가 (시장 배지 자리 — 종목명과 등락율 사이) */
.wl-chip-price {
    font-size: 12px;
    font-weight: 700;
    font-family: monospace;
    color: var(--text-secondary, #cbd5e1);
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}

/* 등락율 (이슈클러스터 cl-up/down/flat 컬러 통일) */
.wl-chip-cr {
    font-size: 12px;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}
.wl-chip-cr.up   { color: #ef4444; }
.wl-chip-cr.down { color: #3b82f6; }
.wl-chip-cr.flat { color: #94a3b8; }
.wl-chip-cr.na   { color: #64748b; opacity: .6; font-style: italic; }

/* ── 시그널 뱃지 — 키움 자동매매 운영 중 종목 표식 ── */
.wl-chip-signal {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
    letter-spacing: 0;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}

/* ── ★ v97: 정렬 컨텍스트 메트릭 — 배지 → 일반 텍스트 (등락률과 동일 스타일) ──
   기존 알약 배지(배경+테두리)가 작고 묻혀 보인다는 피드백 →
   현재가/등락률처럼 배경 없는 텍스트로 통일. 색상만 의미 구분.
   ★ v98(css v13): 종목+현재가+등락률 | 지표 — 세로 구분선으로 영역 분리 (가독성) */
.wl-chip-metric {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #94a3b8;
    /* 구분선: 앞 영역(이름·가격·등락률)과 시각 분리 */
    border-left: 1px solid rgba(148, 163, 184, 0.4);
    padding-left: 8px;
    margin-left: 3px;
}
.wl-chip-metric.up   { color: #f87171; }
.wl-chip-metric.down { color: #60a5fa; }
.wl-chip-metric.flat { color: #94a3b8; }
.wl-chip-metric.hot  { color: #fbbf24; }
.wl-chip-metric.old  { color: #a78bfa; }
.wl-chip-metric.ctx  { color: #cbd5e1; }
.wl-chip-metric.na   { color: #64748b; opacity: .55; font-style: italic; }

/* 삭제 버튼 (hover 시 노출) */
.wl-chip-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    margin-left: 1px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.wl-chip:hover .wl-chip-del { opacity: .7; }
.wl-chip-del:hover {
    opacity: 1 !important;
    background: var(--red-light);
    color: var(--red);
}

/* ── ★ vSORT5: 담은가 리셋 버튼 (수익률 정렬 시, 삭제 버튼 좌측) ── */
.wl-chip-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    margin-left: 1px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease, color .15s ease, transform .2s ease;
}
.wl-chip:hover .wl-chip-reset { opacity: .7; }
.wl-chip-reset:hover {
    opacity: 1 !important;
    background: rgba(16,185,129,0.15);
    color: #10b981;
    transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════
   ★ vSORT6: 담은가 리셋 확인 모달 (디자인 버전)
═══════════════════════════════════════════════════════════ */
.wl-reset-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2,6,23,0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .18s ease;
}
.wl-reset-overlay.show { opacity: 1; }

.wl-reset-modal {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card, #0f172a);
    border: 1px solid var(--border, rgba(148,163,184,0.2));
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    overflow: hidden;
    transform: translateY(14px) scale(.97);
    transition: transform .2s cubic-bezier(.22,1.2,.36,1);
}
.wl-reset-overlay.show .wl-reset-modal { transform: translateY(0) scale(1); }

/* ── 헤더 ── */
.wl-reset-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border, rgba(148,163,184,0.15));
}
.wl-reset-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 11px;
    background: rgba(16,185,129,0.14);
    color: #10b981;
    font-size: 16px;
    flex-shrink: 0;
}
.wl-reset-titles { flex: 1; min-width: 0; }
.wl-reset-titles h3 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary, #f1f5f9);
}
.wl-reset-stock {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary, #cbd5e1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wl-reset-code { color: var(--text-muted, #64748b); font-weight: 500; }
.wl-reset-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}
.wl-reset-x:hover { background: rgba(148,163,184,0.12); color: var(--text-primary, #f1f5f9); }

/* ── 본문: 기존가 → 새가 플로우 ── */
.wl-reset-body { padding: 18px; }
.wl-reset-flow {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.wl-reset-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 13px 10px;
    background: rgba(148,163,184,0.06);
    border: 1px solid var(--border, rgba(148,163,184,0.15));
    border-radius: 12px;
    text-align: center;
}
.wl-reset-box--new {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.35);
}
.wl-reset-lbl {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    letter-spacing: .02em;
}
.wl-reset-box--new .wl-reset-lbl { color: #10b981; }
.wl-reset-val {
    font-size: 18px;
    font-weight: 800;
    font-family: monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    color: var(--text-primary, #f1f5f9);
}
.wl-reset-sub {
    font-size: 11px;
    font-weight: 700;
    font-family: monospace;
    font-variant-numeric: tabular-nums;
}
.wl-reset-sub.up   { color: #ef4444; }
.wl-reset-sub.down { color: #3b82f6; }
.wl-reset-sub.flat { color: #94a3b8; }
.wl-reset-arrow {
    display: flex;
    align-items: center;
    color: #10b981;
    font-size: 16px;
    flex-shrink: 0;
}

/* ── 안내 문구 ── */
.wl-reset-note {
    margin: 14px 0 0;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-secondary, #cbd5e1);
    background: rgba(148,163,184,0.06);
    border-radius: 10px;
}
.wl-reset-note i { color: #fbbf24; margin-right: 4px; }
.wl-reset-note b { color: var(--text-primary, #f1f5f9); }

/* ── 액션 버튼 ── */
.wl-reset-actions {
    display: flex;
    gap: 9px;
    padding: 0 18px 18px;
}
.wl-reset-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 0;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 11px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
    user-select: none;
}
.wl-reset-btn:active { transform: scale(.97); }
.wl-reset-btn--cancel {
    background: rgba(148,163,184,0.10);
    border: 1px solid var(--border, rgba(148,163,184,0.2));
    color: var(--text-secondary, #cbd5e1);
}
.wl-reset-btn--cancel:hover { background: rgba(148,163,184,0.18); color: var(--text-primary, #f1f5f9); }
.wl-reset-btn--ok {
    background: linear-gradient(135deg, #10b981, #059669);
    border: 1px solid transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(16,185,129,0.35);
}
.wl-reset-btn--ok:hover {
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 6px 22px rgba(16,185,129,0.45);
}

/* 모바일 */
@media (max-width: 480px) {
    .wl-reset-modal { max-width: 100%; }
    .wl-reset-val { font-size: 16px; }
}

/* 거래량 급증 배지 */
.wl-chip-surge {
    font-size: 10px;
    line-height: 1;
}
.wl-chip.surging {
    border-color: rgba(245,158,11,0.5);
    background: rgba(245,158,11,0.10);
}
.wl-chip.surging::before { background: #f59e0b; }

/* 데이터 대기(가격 미수신) 칩 */
.wl-chip.pending .wl-chip-cr { color: var(--text-muted); opacity: .5; }

/* ═══════════════════════════════════════════════════════════
   ★ vSORT4: 테마별 그룹 섹션 (마스터-디테일 제거)
   가로 테마바(#wl-theme-bar)가 필터 · 그룹 헤더에 평균등락 표시
═══════════════════════════════════════════════════════════ */
.wl-tm-avg {
    font-size: 11px;
    font-weight: 800;
    font-family: monospace;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.wl-tm-avg.up   { color: #ef4444; }
.wl-tm-avg.down { color: #3b82f6; }
.wl-tm-avg.flat { color: #94a3b8; }
.wl-tm-section { animation: wlGroupIn .3s ease both; }
.wl-tm-section .wl-group-head .wl-group-sub .wl-tm-avg { font-size: 12px; }

/* (★ v95: v94의 .wl-tm-head/.wl-tm-hint/.wl-tm-clear 제거 — 세로 섹션 삭제됨) */

/* ── 반응형 ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    .wl-summary--inline { gap: 6px 10px; }
    .wl-sum-avg { margin-left: 0; }
    .wl-toolbar-left { width: 100%; }
    .wl-toolbar-right { width: 100%; }
    .wl-add-body { flex: 1; }
    .wl-chip { padding: 8px 10px; }
    .wl-sort-bar { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .wl-sort-btn { flex-shrink: 0; }
}