#tab-memo {
    padding: 10px;
}

/* 메모 타이틀 & 검색 */
.memo-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.search-button {
    background-color: transparent;
    border: none;
    filter: grayscale(100%);
}

.stock-search {
    width: 200px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
}

/* 종목 정보 요약 */
.stock-summary {
    display: flex;
    justify-content: space-between;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.issue-header {
    justify-content: space-between;
    display: flex;
}

.stock-summary .left .code {
    font-size: 0.8rem;
    color: var(--bottom-line-color);
}

.stock-summary .left .name {
    font-size: 1.4rem;
    font-weight: bold;
}

.stock-summary .headline {
    font-size: 14px;
    margin-top: 8px;
}

.stock-summary .right {
    text-align: right;
}

.stock-summary .price {
    font-size: 1.2rem;
    font-weight: bold;
}

.stock-summary .change {
    font-size: 1rem;
}

/* 필터 버튼 공통 */
.filter-buttons {
    display: flex;
    gap: 10px;
    margin: 12px 0;
}

.filter-buttons button {
    padding: 6px 14px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

/* === 종목 메모 (단일 문자열 표시) === */
.stock-memo-container {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* 테마 메모용 테이블 스타일 */
.issue-table,
.theme-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.issue-table th,
.issue-table td,
.theme-table th,
.theme-table td {
    border: 1px solid #ccc;
    padding: 12px 16px;
    text-align: left;
}

/* 테마 이슈 스크롤 컨테이너 */
.theme-issue-list {
    height: 500px;
    overflow-y: auto;
}

/* 텍스트 관련 */
.issue-table .date,
.theme-table .date {
    font-size: 13px;
    white-space: nowrap;
    min-width: 70px;
}

.issue-table .content,
.theme-table .content {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.issue-table .rate,
.theme-table .rate {
    font-size: 13px;
    font-weight: bold;
    min-width: 60px;
    text-align: right;
}

/* 테마별 이슈 타이틀 */
.theme-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* 테마명 (테마 테이블 내) */
.theme-table .theme {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 6px;
}

/* 하단 탭 메뉴 */
.sub-tab-menu {
    display: flex;
    margin-bottom: 10px;
    gap: 10px;
}

.sub-tab-button {
    padding: 8px 16px;
    border: none;
    cursor: pointer;
}

.sub-tab-content {
    display: none;
}

.sub-tab-content.active {
    display: block;
}

/* 기존 CSS는 그대로 두고, 종목 메모 전용 스타일 추가 */
.stock-memo {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    line-height: 1.5;
    margin-bottom: 10px;
    white-space: pre-line; /* 줄바꿈 문자(\n)를 반영 */
}

.issue-body {
    overflow-y: auto;
    max-height: 500px;
}

.theme-issue-list tbody tr td:nth-child(1) {
    width: 30%;
}

.theme-issue-list tbody tr td:nth-child(2) {
    width: 60%;
}

.theme-issue-list tbody tr td:nth-child(3) {
    width: 10%;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: #666;
}

.modal-close:hover {
    color: #000;
}

/* ───────────────────────────────────────────────────────────────────────────
   Favorite Modal (MEMO ONLY) — 전체 CSS (클린본)
   - 모달 떠있을 때 배경 스크롤 차단 (:has 지원 + body.modal-open 백업)
   - 패널만 스크롤, 내부는 스크롤 제거
   - 닫기 버튼이 카드와 겹치지 않게 패널 상단 패딩
   - Summary: 1행(이름+코드) / 2행(가격·등락률 바), 가격은 항상 중립색(검정)
   - 종목 메모 줄바꿈 유지, 테마 이슈는 카드 리스트
   ─────────────────────────────────────────────────────────────────────────── */

/* 색상 변수 (사이트 공통 변수 기반) */
:root {
    --fm3-bg: var(--info-bg, #fff);
    --fm3-text: var(--font-color, #333);
    --fm3-muted: var(--bottom-line-color, #8c8c8c);
    --fm3-border: #DADFE6;
    --fm3-soft: #F4F6FA;
    --fm3-shadow: 0 22px 60px rgba(0, 0, 0, .18), 0 2px 10px rgba(0, 0, 0, .06);
    --fm3-accent: var(--bg-period-button-active, #007bff);
    --fm3-up: #d64545; /* 상승 */
    --fm3-down: #2f75d6; /* 하락 */
}

/* 모달 숨김 상태 유지 */
#favorite-modal.modal.hidden {
    display: none !important;
}

/* 모달 표시중 배경 스크롤 차단 */
html:has(#favorite-modal.modal:not(.hidden)),
body.modal-open {
    overflow: hidden !important;
    height: 100%;
    overscroll-behavior: contain;
}

/* 오버레이 */
#favorite-modal.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 24, 33, .45);
    backdrop-filter: blur(3px);
    z-index: 10000;
    overflow: auto; /* 패널이 뷰포트보다 크면 전체로 스크롤 */
    -webkit-overflow-scrolling: touch;
}

/* 패널(모달 본체) — 유일한 스크롤 컨테이너 */
#favorite-modal .fm3-panel {
    position: relative;
    /*width: min(1100px, calc(100vw - 48px));*/
    max-height: calc(100vh - 48px);
    background: var(--fm3-bg);
    color: var(--fm3-text);
    border: 1px solid var(--fm3-border);
    border-radius: 18px;
    box-shadow: var(--fm3-shadow);
    overflow: auto; /* 패널 스크롤 */
    overflow-x: hidden; /* 가로 넘침 방지 */
    box-sizing: border-box;
    isolation: isolate;
    contain: layout paint;
    padding-top: 56px; /* 닫기 버튼과 첫 카드 겹침 방지 */
}

/* 닫기 버튼 */
#favorite-modal .modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--fm3-soft);
    border: 1px solid var(--fm3-border);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    transition: transform .08s ease, border-color .12s ease, background-color .12s ease;
}

#favorite-modal .modal-close::before {
    content: "✕";
    font-size: 15px;
    line-height: 1;
}

#favorite-modal .modal-close:hover {
    transform: translateY(-1px);
    border-color: #BCC6CF;
}

/* 패널 내부 넘침/폭 안전망 */
#favorite-modal .fm3-panel * {
    max-width: 100%;
    box-sizing: border-box;
}

#favorite-modal .fm3-panel :is(p,div,span,td,th) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 공통 카드 */
#favorite-modal .fm3-card {
    background: #fff;
    border: 1px solid var(--fm3-border);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    padding: 14px 16px;
    margin: 12px 16px;
}

/* =================== SUMMARY 카드 (요약) =================== */
/* 1행(이름+코드) / 2행(가격·등락률 바) */
#favorite-modal .fm3-card.stock-summary {
    display: grid;
    grid-template-columns: 1fr auto; /* 1행 배치용 */
    row-gap: 10px;
    align-items: center;
}

/* 1행: 이름 + 코드(밀착) */
#favorite-modal .fm3-card.stock-summary .left {
    grid-column: 1 / 2;
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 4px; /* 거의 붙임 */
}

#favorite-modal .fm3-card.stock-summary .left .name {
    font-weight: 900;
    font-size: 1.04rem;
    white-space: normal;
    word-break: keep-all;
    min-width: 0;
}

#favorite-modal .fm3-card.stock-summary .left .code {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--fm3-soft);
    border: 1px solid var(--fm3-border);
    color: #667085;
    font-size: .82rem;
    line-height: 1;
    white-space: nowrap;
}

/* 2행: 가격·등락률 바 (카드 전체 너비) */
#favorite-modal .fm3-card.stock-summary .right {
    grid-column: 1 / -1; /* 두 칼럼 모두 차지 */
    display: flex;
    justify-content: space-between; /* 가격=왼쪽 / 등락률=오른쪽 */
    align-items: baseline;
    gap: 12px;
    padding: 10px 12px;
    background: var(--fm3-soft);
    border: 1px solid var(--fm3-border);
    border-radius: 10px;
    white-space: nowrap;
}

/* 가격 = 항상 중립색(검정) */
#favorite-modal .fm3-card.stock-summary .right .price {
    color: var(--fm3-text) !important; /* 색 고정 */
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: .90rem;
}

/* price에 up/down/stock-rate가 붙어도 무효화 */
#favorite-modal .fm3-card.stock-summary .right .price.up,
#favorite-modal .fm3-card.stock-summary .right .price.down,
#favorite-modal .fm3-card.stock-summary .right .price.stock-rate {
    color: var(--fm3-text) !important;
}

/* 등락률 = 오른쪽, 색상만 적용 */
#favorite-modal .fm3-card.stock-summary .right .stock-rate {
    margin-left: auto;
    background: transparent !important;
    border: none !important;
    padding: 0;
    margin: 0;
    font-weight: 900;
    font-size: .92rem;
}

#favorite-modal .fm3-card.stock-summary .right .stock-rate.up {
    color: var(--fm3-up);
}

#favorite-modal .fm3-card.stock-summary .right .stock-rate.down {
    color: var(--fm3-down);
}

/* =================== 서브 탭 (종목이슈/테마이슈) =================== */
#favorite-modal .issue-header {
    margin: 0 16px 4px;
}

#favorite-modal .sub-tab-menu {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background: #EEF2F6;
    border: 1px solid var(--fm3-border);
    border-radius: 999px;
}

#favorite-modal .sub-tab-button {
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 999px;
    background: transparent;
    color: #687385;
    font-weight: 700;
    transition: background-color .12s ease, color .12s ease, transform .06s ease;
}

#favorite-modal .sub-tab-button:hover {
    transform: translateY(-1px);
}

#favorite-modal .sub-tab-button.active {
    background: var(--fm3-accent);
    color: #fff;
}

/* 탭 표시/숨김 */
#favorite-modal .sub-tab-content {
    display: none;
}

#favorite-modal .sub-tab-content.active {
    display: block;
}

/* 내부 이슈 영역은 자체 스크롤 제거 (패널만 스크롤) */
#favorite-modal .issue-body {
    padding: 8px 4px 4px;
    max-height: none !important;
    overflow: visible !important;
}

/* =================== 종목 메모(텍스트) =================== */
#favorite-modal .stock-memo {
    white-space: pre-wrap !important; /* 줄바꿈 유지 */
    line-height: 1.6;
    color: var(--fm3-text);
    padding: 0 2px;
    font-size: .94rem;
}

/* =================== 테마 이슈(카드 리스트) =================== */
#favorite-modal .theme-issue-list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0;
    table-layout: auto;
    display: block;
    padding: 0 2px;
}

#favorite-modal .theme-issue-list tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#favorite-modal .theme-issue-list tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    background: #fff;
    border: 1px solid var(--fm3-border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    padding: 10px 12px;
}

#favorite-modal .theme-issue-list td {
    border: none !important;
    padding: 0;
    color: var(--fm3-text);
    white-space: normal;
    word-break: keep-all;
}

#favorite-modal .theme-issue-list td:nth-child(3) {
    text-align: right;
    white-space: nowrap;
    align-self: center;
}

#favorite-modal .theme-issue-list .top-line {
    font-size: .95rem;
    font-weight: 800;
    margin-bottom: 6px;
}

#favorite-modal .theme-issue-list .bottom-line {
    font-size: .82rem;
    color: #667085;
}

#favorite-modal .theme-issue-list .stock-rate.up {
    color: var(--fm3-up);
    font-weight: 900;
}

#favorite-modal .theme-issue-list .stock-rate.down {
    color: var(--fm3-down);
    font-weight: 900;
}

/* 모바일 대응 */
@media (max-width: 700px) {
    #favorite-modal .fm3-panel {
        width: calc(100vw - 28px);
        max-height: calc(100vh - 28px);
    }

    #favorite-modal .fm3-card.stock-summary {
        grid-template-columns: 1fr;
    }

    #favorite-modal .fm3-card.stock-summary .right {
        width: 100%;
    }

    #favorite-modal .theme-issue-list tr {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }
}

/* 시각 숨김 유틸 */
#favorite-modal .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* PC 전용 (예: 701px 이상일 때) */
@media (min-width: 701px) {
    #favorite-modal .theme-issue-list tr {
        grid-template-columns: 1fr 4fr 1fr auto; /* 1:4:자동(세번째 컬럼) */
    }

    #favorite-modal .theme-issue-list tr td {
        width: 100%;
    }

    #favorite-modal .fm3-panel{
        width: min(700px, calc(50vw - 48px)) !important;
    }
}