/* ================================================================
   Finance 조회 페이지 스타일 - 흰색 바탕, slate 색상 테마
   ================================================================

   목차:
   1.  전체 레이아웃 / 오버플로우 방지
   2.  검색 섹션
   3.  검색 드롭다운
   4.  버튼
   5.  지표 옵션 (체크박스)
   6.  심볼 정보
   7.  Stock 메트릭스
   8.  차트 섹션 (컨테이너, 날짜 범위)
   9.  차트 캔버스 / SVG
   10. 차트 스크롤바 슬라이더
   11. 차트 축 / 호버 / 인터랙션
   12. 차트 레전드
   13. 차트 정보 패널 (인라인)
   14. 차트 정보 팝업 (오버레이)
   15. 팝업/인라인 토글 버튼
   16. 차트 툴팁
   17. 테이블 섹션
   18. 데이터 테이블
   19. 시그널 스코어 / 색상
   20. 최근 조회 종목 섹션
   21. 로딩 / 에러
   22. 반응형 - 모바일 (768px 이하)
   23. 반응형 - 초소형 모바일 (480px 이하)
   ================================================================ */


/* ============================================================
   1. 전체 레이아웃 / 오버플로우 방지
   ============================================================ */

/* 다른 페이지 (news / knowledge / chat) 와 동일한 800px 중앙 정렬 컨테이너.
   .main-content (1200px) 안에서 800px 로 좁혀 일관된 reading width.
   padding-top: fixed 3rem 헤더 아래로 충분히 떨어지게 (.main-content 가 주는
   2.5rem 에 0.75rem 더해 ~3.25rem clearance — 카드 상단이 헤더에 안 덮임). */
.stock-page-root {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-x: clip;
    padding-top: 0.75rem;
}

/* ── 확대 모드 — body.stock-expanded (stock.js 가 토글) ────────────────────
   브라우저 전체화면 API 가 아니라 인앱 확대: 좌측 패널 + 상단 헤더까지 모두
   숨기고 본문이 viewport 전체를 차지하게 한다. 좌측만 없애면 .main-content 의
   1200px max-width 때문에 폭이 안 늘어나므로 max-width 와 헤더 상단 오프셋도 해제.
   확대 토글 버튼은 헤더가 아니라 차트 툴바 안에 있어 헤더를 숨겨도 해제 가능. */
body.stock-expanded .left-panel {
    display: none;
}

body.stock-expanded .main-header {
    display: none;
}

body.stock-expanded .main-content {
    max-width: none;
    padding-top: 1.5rem;
}

body.stock-expanded .stock-page-root {
    max-width: none;
}

@media (min-width: 768px) {
    body.stock-expanded .main-panel {
        margin-left: 0;
    }
}


/* ============================================================
   2. 검색 섹션
   ============================================================ */

/* 카드 없이 — 지식의 .projects-search-bar 와 동일하게 입력창만 풀폭으로. */
.search-section {
    margin-bottom: 1rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/* 로딩 중 비활성화 상태 */
.search-section.loading {
    pointer-events: none;
    opacity: 0.7;
}

.search-section.loading .btn-primary {
    background: var(--slate-400);
    cursor: not-allowed;
}

.search-section.loading input {
    background: var(--color-bg-tertiary);
    cursor: not-allowed;
}

.search-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    width: 100%;
}

.search-input-wrapper input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.875rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.search-input-wrapper input::placeholder {
    color: var(--slate-400);
}

.search-input-wrapper input:disabled {
    background: var(--color-bg-tertiary);
    cursor: not-allowed;
}


/* ============================================================
   3. 검색 드롭다운
   ============================================================ */

.search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 400px;
    overflow-y: auto;
}

.search-dropdown-content {
    padding: 0.25rem 0;
}

.search-result-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-bg-tertiary);
    transition: background-color 0.15s;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.selected {
    background: var(--color-bg-tertiary);
}

.search-result-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.search-result-symbol {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.875rem;
}

.search-result-name {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.search-result-en-name {
    color: var(--slate-400);
    font-size: 0.75rem;
}

.search-result-metrics {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    padding-left: 0.25rem;
}

/* 검색 결과에서 source 배지 숨김 */
.search-result-source {
    display: none;
}

/* 검색 결과의 market 표시 */
.search-result-market {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    padding: 0.125rem 0.375rem;
    background: var(--color-bg-tertiary);
    border-radius: 3px;
    margin-left: auto;
}

/* 검색 드롭다운 힌트 */
.search-dropdown-hint {
    padding: 0.5rem 0.875rem;
    font-size: 0.6875rem;
    color: var(--slate-400);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
}

.search-dropdown-hint kbd {
    padding: 0.125rem 0.375rem;
    background: var(--color-border);
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.625rem;
}


/* ============================================================
   4. 버튼
   ============================================================ */

.btn-primary {
    padding: 0.625rem 1.25rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.btn-primary:disabled {
    background: var(--color-text-muted);
    cursor: not-allowed;
}


/* ============================================================
   5. 지표 옵션 (체크박스)
   ============================================================ */

.indicator-options {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.options-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}


/* ============================================================
   6. 심볼 정보
   ============================================================ */

.symbol-info {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.symbol-info-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.symbol-info h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.symbol-name {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* symbol-source 숨김 */
.symbol-source {
    display: none;
}

/* 심볼 정보 영역 마켓 배지 */
.symbol-market {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    vertical-align: middle;
}

.symbol-market.market-nys {
    background: #dbeafe;
    color: #1e40af;
}

.symbol-market.market-nas {
    background: #dcfce7;
    color: #166534;
}

.symbol-market.market-kospi {
    background: #fef3c7;
    color: #92400e;
}

.symbol-market.market-kosdaq {
    background: #fce7f3;
    color: #9d174d;
}


/* ============================================================
   7. Stock 메트릭스
   ============================================================ */

.stock-metrics {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.metric-label {
    font-size: 0.6875rem;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.metric-value {
    font-size: 0.875rem;
    color: var(--color-text);
    font-weight: 600;
}


/* ============================================================
   8. 차트 섹션 (컨테이너, 날짜 범위)
   ============================================================ */

.chart-section {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    /* 오버플로우 차단 — 차트 SVG 가 카드 밖으로 새지 않게 */
    overflow: hidden;
    max-width: 100%;
    width: 100%;
}

/* 차트 컨트롤 — 기간 / 표시 / 지표 3개 라벨 행을 세로로 쌓음.
   하단 구분선으로 차트와 분리. */
.chart-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.control-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.control-label {
    flex-shrink: 0;
    width: 2.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* 확대 버튼은 지표 행 우측 끝으로 */
.control-row .stock-fullscreen-btn {
    margin-left: auto;
}

.date-range-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* 표시 옵션 세그먼트 토글 — 두 상태(예: 캔들|라인)를 모두 노출, 활성만 강조 */
.seg-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-bg-secondary);
}

.seg-toggle button {
    padding: 0.3rem 0.7rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.seg-toggle button + button {
    border-left: 1px solid var(--color-border-strong);
}

.seg-toggle button:hover:not(.active) {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.seg-toggle button.active {
    background: var(--color-primary);
    color: #fff;
}

/* 전체화면 토글 버튼 — AGI-a 의 아이콘 버튼 톤 */
.stock-fullscreen-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.stock-fullscreen-btn:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border-color: var(--color-primary);
}
/* 확대 중일 때 버튼 강조 */
body.stock-expanded .stock-fullscreen-btn {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.data-range-button {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.data-range-button:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.data-range-button.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* 지표 옵션 — '지표' 컨트롤 행 안에서 남는 가로폭을 차지 (확대 버튼이
   margin-left:auto 로 우측 끝까지 밀려나도록). */
.control-row .indicator-options {
    flex: 1 1 auto;
    gap: 0.5rem 1rem;
}

.chart-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    position: relative !important;
}


/* ============================================================
   9. 차트 캔버스 / SVG
   ============================================================ */

#price-chart,
#indicator-chart {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    background: var(--color-bg);
    border-radius: 4px;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* SVG 반응형 강제 */
#price-chart svg,
#indicator-chart svg {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 텍스트 선택 방지 */
#price-chart {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#price-chart * {
    user-select: none;
    -webkit-user-select: none;
}


/* ============================================================
   10. 차트 스크롤바 슬라이더
   ============================================================ */

.chart-scrollbar-container {
    width: 100%;
    padding: 8px 0 4px 0;
    margin-top: 0;
}

.chart-scrollbar {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    transition: height 0.15s ease;
    scroll-margin: 0;
    scroll-snap-margin: 0;
}

.chart-scrollbar:hover {
    height: 6px;
}

.chart-scrollbar:active {
    height: 8px;
}

/* Webkit (Chrome, Safari, Edge) 트랙 */
.chart-scrollbar::-webkit-slider-runnable-track {
    width: 100%;
    height: 100%;
    background: var(--color-border);
    border-radius: 2px;
}

/* Webkit 썸 (드래그 핸들) */
.chart-scrollbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 60px;
    height: 100%;
    background: var(--slate-400);
    border-radius: 2px;
    cursor: grab;
    transition: background 0.15s ease, width 0.15s ease;
}

.chart-scrollbar::-webkit-slider-thumb:hover {
    background: var(--color-text-muted);
    width: 70px;
}

.chart-scrollbar::-webkit-slider-thumb:active {
    background: var(--color-text-secondary);
    cursor: grabbing;
}

/* Firefox 트랙 */
.chart-scrollbar::-moz-range-track {
    width: 100%;
    height: 100%;
    background: var(--color-border);
    border-radius: 2px;
    border: none;
}

/* Firefox 썸 */
.chart-scrollbar::-moz-range-thumb {
    width: 60px;
    height: 100%;
    background: var(--slate-400);
    border-radius: 2px;
    border: none;
    cursor: grab;
    transition: background 0.15s ease;
}

.chart-scrollbar::-moz-range-thumb:hover {
    background: var(--color-text-muted);
}

.chart-scrollbar::-moz-range-thumb:active {
    background: var(--color-text-secondary);
    cursor: grabbing;
}

/* 스크롤바 비활성화 시 */
.chart-scrollbar:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.chart-scrollbar:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
    background: var(--color-border-strong);
}

.chart-scrollbar:disabled::-moz-range-thumb {
    cursor: not-allowed;
    background: var(--color-border-strong);
}


/* ============================================================
   11. 차트 축 / 호버 / 인터랙션
   ============================================================ */

.axis text {
    fill: var(--color-text-muted);
    font-size: 0.6875rem;
}

.axis line,
.axis path {
    stroke: var(--color-border-strong);
}

/* 호버 수직선 */
.hover-line {
    stroke: var(--color-text-muted);
    stroke-width: 1;
    stroke-dasharray: 3, 3;
}

/* 호버 수평선 */
.hover-line-h {
    stroke: var(--color-text-muted);
    stroke-width: 1;
    stroke-dasharray: 3, 3;
}

.mouse-line-h {
    stroke: var(--slate-400);
    stroke-width: 1px;
}

/* 호버 포인트 */
.hover-point {
    fill: var(--color-text-secondary);
    stroke: var(--color-bg);
    stroke-width: 2;
}


/* ============================================================
   12. 차트 레전드
   ============================================================ */

.legend-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-bg-tertiary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.legend-color {
    width: 12px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}


/* ============================================================
   13. 차트 정보 패널 (인라인)
   ============================================================ */

.chart-info-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    min-height: 32px;
}

.chart-info-panel.hidden {
    display: none !important;
}

.chart-info-panel .info-date {
    font-weight: 600;
    color: var(--color-text);
    padding-right: 0.75rem;
    border-right: 1px solid var(--color-border);
}

.chart-info-panel .info-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.chart-info-panel .info-label {
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.chart-info-panel .info-value {
    font-weight: 500;
    color: var(--color-primary);
}

/* 인라인 패널 시그널 색상 */
.chart-info-panel .info-signal-item {
    padding-left: 0.5rem;
    border-left: 1px solid var(--color-border);
}

.chart-info-panel .info-value.signal-strong-buy  { color: #166534; font-weight: 600; }
.chart-info-panel .info-value.signal-buy          { color: #059669; font-weight: 600; }
.chart-info-panel .info-value.signal-buy-consider  { color: #0369a1; }
.chart-info-panel .info-value.signal-neutral       { color: var(--color-text-muted); }
.chart-info-panel .info-value.signal-sell-consider  { color: #d97706; }
.chart-info-panel .info-value.signal-sell          { color: #ea580c; font-weight: 600; }
.chart-info-panel .info-value.signal-strong-sell   { color: #dc2626; font-weight: 600; }


/* ============================================================
   14. 차트 정보 팝업 (오버레이)
   ============================================================ */

.chart-info-popup {
    position: absolute;
    top: 6px;
    left: var(--popup-left, 6px);
    z-index: 20;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 6px;
    padding: 0.5rem 0.625rem;
    font-size: 0.7rem;
    color: var(--color-border);
    pointer-events: none;
    max-width: 320px;
    min-width: 140px;
    line-height: 1.5;
    opacity: 0;
    transition: opacity 0.15s ease, left 0.2s ease, right 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.chart-info-popup.visible {
    opacity: 1;
}

.chart-info-popup.position-right {
    left: auto;
    right: var(--popup-right, 6px);
}

.chart-info-popup .popup-date {
    display: block;
    font-weight: 600;
    color: var(--color-bg-tertiary);
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
    font-size: 0.7rem;
}

.chart-info-popup .popup-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 1px 0;
}

.chart-info-popup .popup-label {
    color: var(--slate-400);
    font-size: 0.65rem;
    flex-shrink: 0;
}

.chart-info-popup .popup-value {
    font-weight: 500;
    color: var(--color-bg-secondary);
    font-size: 0.7rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 팝업 내 가격 변동률 색상 */
.chart-info-popup .popup-value.up   { color: #fca5a5; }
.chart-info-popup .popup-value.down { color: #93c5fd; }

/* 팝업 내 시그널 색상 */
.chart-info-popup .popup-signal-strong-buy  { color: #86efac; }
.chart-info-popup .popup-signal-buy          { color: #6ee7b7; }
.chart-info-popup .popup-signal-buy-consider  { color: #7dd3fc; }
.chart-info-popup .popup-signal-neutral       { color: var(--color-border-strong); }
.chart-info-popup .popup-signal-sell-consider  { color: #fde68a; }
.chart-info-popup .popup-signal-sell          { color: #fdba74; }
.chart-info-popup .popup-signal-strong-sell   { color: #fca5a5; }

/* 팝업 OHLC 2열 레이아웃 */
.chart-info-popup .popup-row-ohlc {
    display: flex;
    gap: 0.75rem;
    padding: 1px 0;
}

.chart-info-popup .popup-ohlc-pair {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.chart-info-popup .popup-ohlc-label {
    color: var(--slate-400);
    font-size: 0.65rem;
    font-weight: 600;
    flex-shrink: 0;
}

.chart-info-popup .popup-ohlc-value {
    font-weight: 500;
    color: var(--color-bg-secondary);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.chart-info-popup .popup-ohlc-value.up   { color: #fca5a5; }
.chart-info-popup .popup-ohlc-value.down { color: #93c5fd; }

.chart-info-popup .popup-signal-row {
    padding: 1px 0;
    font-size: 0.7rem;
    font-weight: 500;
}

/* ============================================================
   16. 차트 툴팁
   ============================================================ */

.chart-tooltip {
    position: absolute;
    background: var(--color-text);
    color: var(--color-bg-secondary);
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    max-width: 200px;
}

.chart-tooltip.visible {
    opacity: 1;
}

.tooltip-date {
    font-weight: 600;
    margin-bottom: 0.375rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--color-primary);
    color: var(--color-border);
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.25rem;
}

.tooltip-label {
    color: var(--slate-400);
}

.tooltip-value {
    font-weight: 500;
    color: var(--color-bg-secondary);
}

.tooltip-value.up   { color: #fca5a5; }
.tooltip-value.down { color: #93c5fd; }


/* ============================================================
   17. 테이블 섹션
   ============================================================ */

.table-section {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    overflow: visible;
    width: 100%;
    max-width: 100%;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.table-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table-header h3 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

/* 페이지네이션 */
.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-nav {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-nav:hover:not(:disabled) {
    background: var(--color-bg-tertiary);
    color: var(--color-primary);
}

.btn-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#page-info {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* 테이블 래퍼 (가로 스크롤) */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) var(--color-bg-tertiary);
}

.table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: var(--color-bg-tertiary);
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--slate-400);
}


/* ============================================================
   18. 데이터 테이블
   ============================================================ */

.data-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.data-table th,
.data-table td {
    padding: 0.625rem 0.75rem;
    text-align: right;
    white-space: nowrap;
}

.data-table th {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-weight: 600;
    border-bottom: 2px solid var(--color-border);
}

.data-table td {
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-bg-tertiary);
}

.data-table tr:hover td {
    background: var(--color-bg-secondary);
}

.data-table th:first-child,
.data-table td:first-child {
    text-align: left;
}

/* 첫 번째 고정 컬럼 (날짜) */
.data-table th:nth-child(1),
.data-table td:nth-child(1) {
    position: sticky;
    left: 0;
    background: var(--color-bg);
    z-index: 3;
    min-width: 90px;
    max-width: 90px;
    width: 90px;
}

/* 헤더 고정 컬럼 배경 */
.data-table th:nth-child(1) {
    background: var(--color-bg-secondary);
}

/* 호버 시 배경색 유지 */
.data-table tr:hover td:nth-child(1) {
    background: var(--color-bg-secondary);
}

/* 클릭 가능 행 */
.data-table tbody tr[data-row-date-raw] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* 차트 하이라이트 연동 행 강조 */
.data-table tbody tr.chart-highlighted td {
    background: var(--color-bg-tertiary) !important;
    border-bottom-color: var(--color-border-strong);
}

.data-table tbody tr.chart-highlighted td:nth-child(1) {
    background: var(--color-bg-tertiary) !important;
}

/* 좌측 인디케이터 바 */
.data-table tbody tr.chart-highlighted td:first-child {
    box-shadow: inset 3px 0 0 var(--color-text-muted);
}

/* 변동률 색상 */
.change-up   { color: #dc2626 !important; }
.change-down { color: #2563eb !important; }
.change-zero { color: var(--color-text-muted) !important; }

/* 기존 fixed-column 클래스 (호환성, 미사용 - nth-child로 대체) */
.fixed-column { }


/* ============================================================
   19. 시그널 스코어 / 색상
   ============================================================ */

.signal-score {
    font-family: monospace;
    font-weight: 600;
    text-align: center;
    cursor: help;
    min-width: 50px;
}

.signal-strong-buy    { background: #dcfce7 !important; color: #166534 !important; }
.signal-buy           { background: #d1fae5 !important; color: #059669 !important; }
.signal-buy-consider  { background: #e0f2fe !important; color: #0369a1 !important; }
.signal-neutral       { background: var(--color-bg-tertiary) !important; color: var(--color-text-muted) !important; }
.signal-sell-consider { background: #fef3c7 !important; color: #d97706 !important; }
.signal-sell          { background: #fed7aa !important; color: #ea580c !important; }
.signal-strong-sell   { background: #fecaca !important; color: #dc2626 !important; }


/* ============================================================
   20. 최근 조회 종목 섹션
   ============================================================

   카드/그리드는 지식 리스트와 동일하게 common.css 의 .resource-grid /
   .resource-card 표준 재사용 (심볼=resource-card-title, 종목명=
   resource-card-desc, 배지+시간=resource-card-meta). 아래 hook 만 페이지 전용:

     .recent-symbols-section   → 섹션 컨테이너 (카드 없음)
     .recent-symbols-header    → 헤더 (h3 + 아이콘)
     .recent-symbols-loading   → 로딩 상태
     .recent-symbols-empty     → 빈 상태
     .recent-symbols-grid      → 그리드 (.resource-grid 와 함께 사용)
     .recent-card-delete       → 삭제 버튼 (resource-card-actions 안)
     .recent-card-badge        → 소스 배지 (.badge-stock/-investing/-tv/마켓별)
     .recent-card-time         → 조회 시간
   ============================================================ */

/* --- 섹션 컨테이너 — 카드 없이, 지식 리스트처럼 헤더 + 그리드만 --- */
.recent-symbols-section {
    margin-bottom: 1rem;
}

/* --- 헤더 --- */
.recent-symbols-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.recent-symbols-header h3 {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.recent-symbols-header h3 svg {
    color: var(--color-text-muted);
}

/* --- 로딩 상태 --- */
.recent-symbols-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* 작은 로딩 스피너 */
.loading-spinner.small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

/* --- 빈 상태 --- */
.recent-symbols-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
}

.recent-symbols-empty svg {
    color: var(--slate-400);
    margin-bottom: 0.25rem;
}

.recent-symbols-empty p {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.recent-symbols-empty span {
    font-size: 0.75rem;
    color: var(--slate-400);
}

/* --- 익명 사용자용 sign-in CTA --- empty 와 동일 레이아웃에 버튼 1개 추가 */
.recent-symbols-signin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
    text-align: center;
}
.recent-symbols-signin svg {
    color: var(--slate-400);
    margin-bottom: 0.25rem;
}
.recent-symbols-signin p {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.recent-symbols-signin .btn-primary {
    margin-top: 0.25rem;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    text-decoration: none;
    border-radius: 6px;
}

/* 그리드·카드 레이아웃은 common.css 의 .resource-grid / .resource-card 표준을
   재사용 (3열 기본, ≤3개 list-mode 1열, 반응형). 아래는 최근 종목 전용 hook
   (삭제 버튼 · 마켓 배지 · 조회 시간) 만 둔다. */

/* --- 삭제 버튼 (resource-card-actions 안에 위치) --- */
.recent-card-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--slate-400);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    opacity: 0;
}

.resource-card:hover .recent-card-delete {
    opacity: 1;
}

.recent-card-delete:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* --- 소스 배지 --- */
.recent-card-badge {
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 0.125rem 0.3rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.recent-card-badge.badge-investing {
    background: #dbeafe;
    color: #2563eb;
}

.recent-card-badge.badge-tv {
    background: #dcfce7;
    color: #16a34a;
}

/* 마켓별 배지 - RSI 상관관계 테이블과 동일한 색상 체계 */
.recent-card-badge.badge-nys {
    background: #dbeafe;
    color: #1e40af;
}

.recent-card-badge.badge-nas {
    background: #dcfce7;
    color: #166534;
}

.recent-card-badge.badge-kospi {
    background: #fef3c7;
    color: #92400e;
}

.recent-card-badge.badge-kosdaq {
    background: #fce7f3;
    color: #9d174d;
}

/* stock 소스인데 마켓 정보가 없는 경우 기본 배지 */
.recent-card-badge.badge-stock {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

/* --- 조회 시간 --- */
.recent-card-time {
    font-size: 0.625rem;
    color: var(--slate-400);
}


/* ============================================================
   21. 로딩 / 에러
   ============================================================ */

/* 로딩 오버레이 - 전체 화면 고정 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text-secondary);
    z-index: 1000;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-text-secondary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 에러 메시지 */
.error-message {
    padding: 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}


/* ============================================================
   22. 반응형 - 모바일 (768px 이하)
   ============================================================ */

@media (max-width: 768px) {

    /* --- 레이아웃 --- */
    .main-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    .app-container,
    .main-panel {
        overflow-x: hidden !important;
    }

    .main-content {
        overflow-x: clip !important;
    }

    /* --- 검색 섹션 --- */
    .search-form {
        gap: 0.75rem;
    }

    .search-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .btn-primary {
        width: 100%;
        padding: 0.75rem 1rem;
    }

    /* --- 지표 옵션 --- */
    .indicator-options {
        gap: 0.5rem 0.75rem;
    }

    .options-label {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    .checkbox-label {
        font-size: 0.75rem;
    }

    /* --- 심볼 정보 --- */
    .symbol-info {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .symbol-info h2 {
        font-size: 1.25rem;
    }

    .stock-metrics {
        gap: 1rem;
    }

    /* --- 차트 섹션 --- */
    .chart-section {
        padding: 0.75rem;
        margin-bottom: 1rem;
        border-radius: 6px;
    }

    .date-range-buttons {
        gap: 0.375rem;
    }

    .data-range-button {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }

    /* --- 차트 스크롤바 --- */
    .chart-scrollbar {
        height: 6px;
    }

    .chart-scrollbar:active {
        height: 10px;
    }

    .chart-scrollbar::-webkit-slider-thumb {
        width: 80px;
    }

    /* --- 차트 정보 패널 --- */
    .chart-info-panel {
        font-size: 0.7rem;
        gap: 0.25rem 0.5rem;
        padding: 0.375rem 0.5rem;
    }

    /* --- 차트 팝업 --- */
    .chart-info-popup {
        font-size: 0.625rem;
        padding: 0.375rem 0.5rem;
        max-width: 240px;
        min-width: 120px;
    }

    .chart-info-popup .popup-date  { font-size: 0.625rem; }
    .chart-info-popup .popup-label { font-size: 0.575rem; }
    .chart-info-popup .popup-value { font-size: 0.625rem; }

    /* --- 차트 컨트롤 (모바일: 라벨 폭 축소) --- */
    .control-label {
        width: auto;
    }

    .seg-toggle button {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }

    /* --- 테이블 섹션 --- */
    .table-section {
        padding: 0.75rem;
        border-radius: 6px;
    }

    .table-header h3 {
        font-size: 0.875rem;
    }

    .data-table {
        font-size: 0.75rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.5rem 0.625rem;
    }

    /* --- 최근 조회 종목 — 그리드/카드는 resource-* 반응형이 담당 --- */
    .recent-symbols-section {
        margin-bottom: 0.75rem;
    }

    .recent-card-delete {
        opacity: 1;
    }

    /* --- 로딩 --- */
    .loading-overlay {
        padding: 2rem;
    }

    .loading-spinner {
        width: 28px;
        height: 28px;
    }
}

/* ============================================================
   23. 반응형 - 초소형 모바일 (480px 이하)
   ============================================================ */

@media (max-width: 480px) {

    /* --- 지표 --- */
    .indicator-options {
        gap: 0.375rem 0.5rem;
    }

    .checkbox-label {
        font-size: 0.6875rem;
    }

    /* --- 차트 --- */
    .chart-section {
        padding: 0.5rem;
    }

    .date-range-buttons {
        gap: 0.25rem;
    }

    .data-range-button {
        padding: 0.1875rem 0.375rem;
        font-size: 0.625rem;
    }

    .chart-scrollbar::-webkit-slider-thumb {
        width: 100px;
    }

    /* --- 차트 팝업 --- */
    .chart-info-popup {
        font-size: 0.575rem;
        padding: 0.25rem 0.375rem;
        max-width: 200px;
    }

}