/**
 * DarkFina - 신호 카드형 리포트 (U2 A안, includes/insights/signals.php · includes/components/ticker_shell.php)
 * 리포트(/insights/{T}, /insights/{T}/{D}) · 공매도 탭 · 다크풀 탭 · 기관 탭 공용
 * 가독성 기준(2026-11-02): 본문 16px, 보조 14px, 회색 글자 #a8b0ba 이상, 대비 4.5:1, 터치 영역 44px
 * 장식 없음: 그라데이션 배경·왼쪽 굵은 테두리·이모지 쓰지 않음
 */

/* ---------- 종목 셸: 헤더 ---------- */
.tk-shell {
    margin: 0 0 20px;
}

.tk-head {
    padding: 18px 20px;
    border: 1px solid var(--df-border);
    border-radius: 16px;
    background: var(--df-bg-secondary);
}

.tk-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--df-text-primary);
    overflow-wrap: anywhere;
}

.tk-title .tk-sym {
    margin-left: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--df-text-secondary);
}

.tk-sub {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--df-text-secondary);
}

.tk-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 10px 0 0;
    font-size: 16px;
}

.tk-close {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 한국식 색: 상승 빨강, 하락 파랑 (카드 배경에서 4.5:1 이상) */
.tk-chg { font-weight: 600; font-variant-numeric: tabular-nums; }
.tk-chg.up { color: #ff6b6b; }
.tk-chg.down { color: #7DB4FF; }
.tk-chg.flat { color: var(--df-text-secondary); }

.tk-basis {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--df-text-muted);
}

/* ---------- 종목 셸: 탭 (모바일 가로 스크롤) ---------- */
.tk-tabs {
    display: flex;
    gap: 6px;
    margin: 12px 0 0;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid var(--df-border);
    border-radius: 16px;
    background: var(--df-bg-secondary);
}

.tk-tabs::-webkit-scrollbar { display: none; }

.tk-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--df-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.tk-tab:hover {
    color: var(--df-text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.tk-tab.active {
    color: var(--df-text-primary);
    background: rgba(0, 212, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.45);
}

/* ---------- a. 한 줄 요약 ---------- */
.sig-summary {
    margin: 0 0 20px;
    padding: 20px 22px;
    border: 1px solid var(--df-border);
    border-radius: 16px;
    background: var(--df-bg-card);
}

.sig-summary-label {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--df-text-muted);
}

.sig-summary-text {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--df-text-primary);
}

.sig-summary-note {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--df-text-muted);
}

/* 수준 구절 강조 (칩과 같은 색, 배경 없이) */
mark.lv-text {
    background: none;
    color: inherit;
    font-weight: 700;
}
mark.lv-text.lv-high { color: #F2B84B; }
mark.lv-text.lv-very_high { color: #FF9A62; }

/* ---------- 섹션 공통 ---------- */
.sig-section,
.sig-flow,
.sig-trend,
.sig-unknown {
    margin: 0 0 24px;
}

.sig-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--df-text-primary);
}

.sig-sub {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--df-text-muted);
}

/* ---------- b. 신호 카드 ---------- */
.sig-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sig-card {
    border: 1px solid var(--df-border);
    border-radius: 16px;
    background: var(--df-bg-card);
    overflow: hidden;
}

.sig-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name chip" "value value";
    align-items: center;
    gap: 6px 10px;
    padding: 16px 18px 4px;
    list-style: none;
    cursor: default;
}

.sig-head::-webkit-details-marker { display: none; }

.sig-name {
    grid-area: name;
    font-size: 16px;
    font-weight: 600;
    color: var(--df-text-secondary);
}

.sig-head .lv-chip { grid-area: chip; justify-self: end; }

.sig-value {
    grid-area: value;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--df-text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.sig-body {
    padding: 0 18px 16px;
}

.sig-usual {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--df-text-muted);
}

.sig-convert {
    margin: 0 0 10px;
    font-size: 16px;
    color: var(--df-text-primary);
}

.sig-meaning {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--df-text-primary);
}

/* 평소 범위 막대 (0~100%) */
.sig-bar-track {
    position: relative;
    height: 8px;
    margin: 8px 0 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.sig-bar-dot {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--df-cyan);
    border: 2px solid var(--df-bg-card);
    transform: translate(-50%, -50%);
}

.sig-bar-avg {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 16px;
    background: var(--df-text-secondary);
    transform: translateX(-50%);
}

.sig-bar-scale {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    color: var(--df-text-muted);
}

/* 용어 펼치기 */
.sig-term {
    margin: 12px 0 0;
    border-top: 1px solid var(--df-border);
}

.sig-term summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: var(--df-cyan);
    cursor: pointer;
}

.sig-term p {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--df-text-primary);
}

.sig-term a { color: var(--df-cyan); }

/* ---------- c. 대차 수수료 정규장 흐름 ---------- */
.sig-flow,
.sig-trend {
    padding: 18px 20px;
    border: 1px solid var(--df-border);
    border-radius: 16px;
    background: var(--df-bg-card);
}

.sig-flow .ctb-sess-chart { max-width: 640px; margin: 10px 0 4px; }

.sig-flow-line,
.sig-flow-flat {
    margin: 8px 0 0;
    font-size: 16px;
    color: var(--df-text-primary);
    font-variant-numeric: tabular-nums;
}

.sig-flow-note {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--df-text-muted);
}

/* 정규장 CTB 미니 차트 (includes/ctb_session.php — 공매도 탭 카드와 공용) */
.ctb-sess-chart { display: block; width: 100%; height: auto; }
.ctb-sess-line { fill: none; stroke: var(--df-cyan, #00D4FF); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ctb-sess-dot { fill: var(--df-cyan, #00D4FF); }
.ctb-sess-axis { fill: var(--df-text-muted, #a8b0ba); font-size: 15px; }

/* ---------- d. 최근 20거래일 흐름 ---------- */
.sig-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 8px 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--df-text-secondary);
}

.sig-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sig-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.sig-key-dark { background: var(--df-cyan); }
.sig-key-short { background: #F2B84B; }
.sig-key-50 { background: none; border-top: 2px dashed var(--df-text-muted); height: 0 !important; }

.sig-trend-chart {
    position: relative;
    padding-left: 44px;
}

.sig-trend-svg {
    display: block;
    width: 100%;
    height: 180px;
    border-left: 1px solid var(--df-border);
    border-bottom: 1px solid var(--df-border);
}

.sig-axis-hi,
.sig-axis-lo {
    position: absolute;
    left: 0;
    font-size: 14px;
    color: var(--df-text-muted);
}

.sig-axis-hi { top: 0; }
.sig-axis-lo { bottom: 0; }

.sig-line-dark,
.sig-line-short {
    fill: none;
    stroke-width: 2.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.sig-line-dark { stroke: var(--df-cyan); }
.sig-line-short { stroke: #F2B84B; }
.sig-line-50 { stroke: var(--df-text-muted); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }

.sig-trend-dates {
    display: flex;
    justify-content: space-between;
    margin: 4px 0 0 44px;
    font-size: 14px;
    color: var(--df-text-muted);
}

.sig-table {
    margin: 14px 0 0;
}

.sig-table > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 16px;
    font-weight: 600;
    color: var(--df-cyan);
    cursor: pointer;
}

.sig-table .insight-table-wrap { margin-top: 8px; }

/* ---------- e. 알 수 없는 것 ---------- */
.sig-unknown {
    padding: 16px 20px;
    border: 1px dashed rgba(184, 188, 200, 0.45);
    border-radius: 16px;
}

.sig-unknown ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.sig-unknown li {
    margin: 4px 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--df-text-primary);
}

/* ---------- 사이드: 지난 리포트 ---------- */
.sig-side-dates {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sig-side-dates li + li { border-top: 1px solid var(--df-border); }

.sig-side-dates a,
.sig-side-dates .is-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    font-size: 16px;
    color: var(--df-text-primary);
    text-decoration: none;
}

.sig-side-dates .is-current { font-weight: 700; color: var(--df-cyan); }

.sig-side-note {
    margin: 0;
    font-size: 14px;
    color: var(--df-text-muted);
}

/* ---------- 빈 상태 (empty-state.js · 리포트 준비 중) ---------- */
.df-empty-state {
    padding: 16px 18px;
    border: 1px dashed rgba(184, 188, 200, 0.45);
    border-radius: 16px;
    font-size: 16px;
    color: var(--df-text-primary);
}

/* ---------- 모바일 ---------- */
@media (max-width: 768px) {
    .tk-head { padding: 16px; }
    .tk-title { font-size: 22px; }
    .sig-summary { padding: 16px; }
    .sig-summary-text { font-size: 18px; }
    .sig-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    /* 접이식 행: summary 를 누르면 펼침 (signals.js 가 처음에 접음) */
    .sig-head {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "name value chip";
        min-height: 56px;
        padding: 10px 14px;
        cursor: pointer;
    }
    .sig-value { font-size: 20px; text-align: right; }
    .sig-body { padding: 0 14px 14px; }
    .sig-flow, .sig-trend, .sig-unknown { padding: 14px 16px; }
    .sig-trend-svg { height: 150px; }
    .ctb-sess-axis { font-size: 26px; }
}

/* 최신 대차 수수료 한 줄 (includes/ctb_fresh.php) — 종목 헤더 안, 공매도 탭 본문 맨 위 */
.ctb-fresh-line {
    margin: 10px 0 0;
    font-size: 16px;
    color: var(--df-text-primary);
}
.ctb-fresh-line small {
    font-size: 14px;
    color: var(--df-text-secondary);
}
.short-content > .ctb-fresh-line {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--df-bg-secondary);
    border: 1px solid var(--df-border);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}