/* 박스 크기에 내부 여백 포함 */
* {box-sizing: border-box;}



/* 페이지 전체 스타일 */
body {
    margin: 0;
    font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
                Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR",
                "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}



/* - - - - - - - - - - - - - - - - - - - - */

/* 상단 헤더 영역 */
.site-header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 70px;
    padding: 0 5%;
    background-color: #113355;
}

/* 제목 */
.site-header h1 {
    margin: 0;
    font-size: 35px;
}

/* 제목 */
.site-header a {
    color: #DDEEFF;
    text-decoration: none;
}

/* 우측 메뉴 */
.header-menu {
    display: flex;
    margin-left: auto; /* 메뉴를 헤더 우측으로 이동 */
    gap: 30px;
    font-size: 18px;
    font-weight: 700;
    color: #DDEEFF;
}



/* - - - 메인 영역 스타일 설정 - - - */

/* 메인 */
.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    min-height: calc(100vh - 70px); /* 화면 전체 높이에서 헤더 높이를 제외한 공간을 메인 영역으로 설정 */
    padding-bottom: 10px;
    gap: 10px;
    background-color: #EEEEEE;
}



/* - - - 박스 영역 스타일 설정 - - - */

/* 박스 바깥 영역 공통 */
.box1, .box2.layout-tab-menu, .box3, .box4, .box5 {
    display: grid;
    padding: 10px;
    gap: 10px;
    background-color: #FFFFFF;
    border: 2px solid #CCCCCC;
    border-radius: 12px;
}

/* 항상 표시되는 박스와 탭 메뉴 너비 */
.box1, .box2.layout-tab-menu, .layout-panel-stack {
    width: 90%;
}

/* 박스1은 동일한 크기의 3칸으로 구성 */
.box1 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 700px;
    margin-top: 10px;
}

/* 차트가 3칸 중 2칸 차지 */
.box1 > .box1-1 {
    grid-column: span 2;
}

/* m단테트레이딩이 3칸 중 1칸 차지 */
.box1 > .box1-2 {
    grid-column: span 1;
}

/* 박스2를 동일한 크기의 3개 메뉴로 구성 */
.box2.layout-tab-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 70px;
    padding: 8px;
}

/* 탭에 따라 변경되는 화면의 공통 너비 */
.layout-panel-stack > .box3,
.layout-panel-stack > .box4,
.layout-panel-stack > .box5 {
    display: none;
    width: 100%;
}

/* 박스3은 동일한 크기의 4칸으로 구성 */
.box3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 600px;
}

/* 박스4는 동일한 크기의 3칸으로 구성 */
.box4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 600px;
}

/* 박스5는 전체 영역을 하나의 칸으로 사용 */
.box5 {
    grid-template-columns: minmax(0, 1fr);
    height: 600px;
}

/* 작은 박스 공통 */
.box1-1,
.box1-2,
.box1-3,
.box2-1,
.box2-2,
.box2-3,
.box2-4,
.box2-5,
.box3-1,
.box3-2,
.box3-3,
.box3-4,
.box4-1,
.box4-2,
.box4-3,
.box4-4,
.box5-1 {
    display: flex;
    overflow: hidden;
    min-width: 0;
    padding: 10px;
    flex-direction: column;
    background-color: #FAFAFA;
    border: 2px solid #DDDDDD;
    border-radius: 6px;
}

/* 기존 LS 실시간 기능이 box1-2를 첫 번째 box2로 인식하도록 설정 */
.condition-stream-host {
    width: auto;
    height: auto;
    gap: 0;
}

/* 화면 전환용 라디오 버튼 숨김 */
.layout-tab-input {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: 0px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 박스2의 개별 메뉴 */
.layout-tab-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 50px;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 700;
    color: #557799;
    background-color: #FAFAFA;
    border: 2px solid #DDDDDD;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

/* 메뉴 hover 효과 */
.layout-tab-label:hover {
    background-color: #EEF4F8;
}

/* 현재 선택된 메뉴 */
#layout-tab-1:checked ~ .layout-tab-menu label[for="layout-tab-1"],
#layout-tab-2:checked ~ .layout-tab-menu label[for="layout-tab-2"],
#layout-tab-3:checked ~ .layout-tab-menu label[for="layout-tab-3"] {
    color: #FFFFFF;
    background-color: #557799;
    border-color: #557799;
}

/* 키보드로 메뉴를 선택할 때 표시할 테두리 */
#layout-tab-1:focus-visible ~ .layout-tab-menu label[for="layout-tab-1"],
#layout-tab-2:focus-visible ~ .layout-tab-menu label[for="layout-tab-2"],
#layout-tab-3:focus-visible ~ .layout-tab-menu label[for="layout-tab-3"] {
    outline: 2px solid #113355;
    outline-offset: 2px;
}

/* 항목1을 선택하면 박스3 표시 */
#layout-tab-1:checked ~ .layout-panel-stack > .box3 {
    display: grid;
}

/* 항목2를 선택하면 박스4 표시 */
#layout-tab-2:checked ~ .layout-panel-stack > .box4 {
    display: grid;
}

/* 항목3을 선택하면 박스5 표시 */
#layout-tab-3:checked ~ .layout-panel-stack > .box5 {
    display: grid;
}

/* 박스 헤더 1 (조건 검색 이름) */
.box-title {
    margin: 0 0 10px 10px;
    font-size: 16px;
    font-weight: 700;
    color: #557799;
}

/* 박스 헤더 2 (조건 검색 개수) */
.result-header {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    padding: 0 10px;
}

.result-header .box-title {margin: 0;}

.result-header .result-count {
    margin-left: auto;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    text-align: right;
    white-space: nowrap;
}



/* - - - 조건 설정 드랍박스 영역 스타일 설정 - - - */

/* 드랍박스가 포함된 박스 1-1 제목 재설정 */
.condition-header .box-title {margin: 0 0 0 10px;}

/* 드랍박스 헤더 */
.condition-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 제목은 왼쪽, 검색 버튼은 오른쪽에 배치 */
    height: 19px;
    margin-bottom: 10px;
}

/* 조건 설정 버튼 묶음 */
.condition-actions {
    display: flex;
    align-items: center;
    margin-right: 5px;
    gap: 6px;
}

/* 검색 버튼 및 초기화 버튼 */
.search-btn, .reset-btn {
    flex-shrink: 0;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: #333333;
    background-color: #D5E5F5;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    cursor: pointer;
}

/* 검색 버튼 및 초기화 버튼 hover 효과 */
.search-btn:hover, .reset-btn:hover {background-color: #A5B5C5;}

/* 드랍박스 전체 뼈대 */
.select-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    padding-top: 16px;
    gap: 16px;
    border-top: 2px solid #557799;
}

/* 드랍박스 본문 */
.select-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 드랍박스 각 제목 */
.select-item label {
    padding-left: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
}

/* 드랍박스 속 항목 */
.select-item select {
    padding: 6px 8px;
    font-size: 13px;
    font-family: inherit;
    color: #000000;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    cursor: pointer;
    outline: none; /* 드랍박스 클릭 시 나타나는 기본 테두리 선 제거 */
}

/* 드랍박스 항목 클릭 시 테두리 효과 */
.select-item select:focus {border-color: #557799;}



/* - - - 조건 검색 결과 표 영역 스타일 설정 - - - */

/* 조건 검색 결과 표 */
.table-container {
    position: relative; /* 0종목 검색 문구 기준점 생성 */
    flex: 1;
    overflow-y: auto;
    width: 100%;
    border-top: 2px solid #557799;
}

/* 표 전체 뼈대 */
.stock-table {
    width: 100%;
    font-size: 13px;
    color: #000000;
    background-color: #FFFFFF;
    border-collapse: collapse; /* 표의 두 줄 테두리를 한 줄로 합침 */
    table-layout: fixed; /* 표 내부 칸 너비 고정 */
}

/* 표 머리글 */
.stock-table th {
    padding: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    background-color: #D5E5F5;
    border: 1px solid #CCCCCC;
    text-align: center;
    position: sticky; /* 스크롤 내려도 최상단 고정 */
    top: 0;
    z-index: 10; /* 다른 데이터 보다 항상 위 고정 */
}

/* 각 칸 너비 */
.stock-table th:nth-child(1) {width: 40%;}
.stock-table th:nth-child(2) {width: 20%;}
.stock-table th:nth-child(3) {width: 20%;}
.stock-table th:nth-child(4) {width: 20%;}

/* 표 본문 */
.stock-table td {
    overflow: hidden;
    padding: 6px 8px;
    border: 1px solid #CCCCCC;
    text-align: center;
    white-space: nowrap;
}

/* 각 칸 좌측 또는 우측 정렬 */
.stock-table td:nth-child(1) {text-align: left;}
.stock-table td:nth-child(2) {text-align: right;}
.stock-table td:nth-child(3) {text-align: right;}
.stock-table td:nth-child(4) {text-align: right;}

/* 조건 검색 결과 표 hover 효과 */
.stock-table tbody tr:hover {
    background-color: #F1F5F9;
    cursor: pointer;
}

/* 상승 및 하락 등락률을 빨간색 또는 파란색으로 표시 */
.rate-up {color: #FF0000;}
.rate-down {color: #0000FF;}

/* 종목 추가 또는 가격 변동 시 시각 효과 */
.stock-row-added {animation: stock-row-fade-in 0.5s linear;}
.stock-value-changed {animation: stock-result-blink 0.5s ease-in-out;}

/* 종목 추가 시 서서히 나타남 */
@keyframes stock-row-fade-in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/* 가격 변동 시 깜빡임 */
@keyframes stock-result-blink {
    0%, 100% {opacity: 1;}
    50% {opacity: 0.3;}
}

/* 검색 종목이 없을 때 표시 문구 */
.condition-empty-message {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    text-align: center;
    pointer-events: none; /* 클릭 시 종목 클릭으로 처리되지 않게 설정 */
}



/* - - - Trading View 차트 영역 스타일 설정 - - - */

/* 차트 제목 및 갱신 상태 */
.stock-chart-header {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    padding: 0 10px;
    gap: 12px;
}

.stock-chart-header .box-title {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-chart-status {
    flex-shrink: 0;
    overflow: hidden;
    max-width: 50%;
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: #555555;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;   
}

.stock-chart-status[data-state="loading"] {color: #557799;}
.stock-chart-status[data-state="error"] {color: #B42318;}
.stock-chart-status[data-state="empty"] {color: #777777;}

/* 새 데이터 반영 시 시각 효과 */
.stock-chart-status.is-updated {animation: stock-chart-status-update 0.5s ease-in-out;}

/* 날짜, 시가, 고가, 저가, 종가, 거래량 영역 */
.stock-chart-toolbar {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 8px 4px;
    gap: 10px;
    border-top: 2px solid #557799;
}

.stock-chart-ohlcv {
    display: flex;
    align-items: flex-start;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    gap: 4px;
    font-size: 12px;
    color: #555555;
    font-variant-numeric: tabular-nums;
}

.stock-chart-ohlcv strong {
    font-weight: 700;
    color: #111111;
}

.stock-chart-date {
    font-weight: 600;
    color: #557799;
}

.stock-chart-price-row, .stock-chart-ema-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    white-space: nowrap;
}

.stock-chart-date {
    flex: 0 0 73px;
}

.stock-chart-ema-row::before {
    content: "";
    flex: 0 0 75px;
}

.stock-chart-open-label {
    font-size: 13px;
    color: #333333;
}

.stock-chart-open-value {
    font-size: 13px;
    color: #111111;
}

/* 설정 버튼 및 초기화 버튼 */
.stock-chart-latest-button, .stock-chart-settings-button {
    flex-shrink: 0;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: #333333;
    background-color: #D5E5F5;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    cursor: pointer;
}

/* 설정 버튼 및 초기화 버튼 hover 효과 */
.stock-chart-latest-button:hover, .stock-chart-settings-button:hover {background-color: #A5B5C5;}

.stock-chart-latest-button:focus-visible,
.stock-chart-settings-button:focus-visible,
.stock-chart-settings-close:focus-visible,
.stock-chart-settings-reset:focus-visible {
    outline: 2px solid #557799;
    outline-offset: 2px;
}

/* 설정 버튼 */
.stock-chart-settings-button[aria-expanded="true"] {
    color: #FFFFFF;
    background-color : #557799;
    border-color: #557799;
}

/* 캔들 및 거래량 차트 */
.stock-chart-body {
    position: relative;
    flex: 1;
    overflow: hidden;
    width: 100%;
    min-height: 0;
    background-color: #FAFAFA;
}

.stock-chart-canvas {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 이평선 설정 창 */

/* ㅡ ㅡ ㅡ ㅡ ㅡ 아래 차트 설정 부분 수정 필 ㅡ ㅡ ㅡ ㅡ ㅡ */

.stock-chart-settings-panel {
    position: absolute;
    z-index: 30;
    top: 8px;
    right: 8px;
    overflow: auto;
    width: min(420px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    color: #333333;
    background-color: #FFFFFF;
    border: 1px solid #A5B5C5;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(17, 51, 119, 0.18);
}

.stock-chart-settings-panel[hidden] {
    display: none;
}

.stock-chart-body:has(.stock-chart-settings-panel:not([hidden])) .stock-chart-canvas {pointer-events: none;}

.stock-chart-settings-header {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 8px 6px 12px;
    border-bottom: 1px solid #D5E5F5;
}

.stock-chart-settings-header strong {
    font-size: 14px;
    color: #557799;
}

.stock-chart-settings-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    padding: 0;
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    color: #555555;
    background-color: transparent;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

.stock-chart-settings-close:hover {
    background-color: #EEEEEE;
}

.ema-settings-columns,
.ema-setting-row {
    display: grid;
    grid-template-columns: minmax(84px, 1fr) 38px 64px 78px;
    align-items: center;
    gap: 6px;
}

.ema-settings-columns {
    padding: 7px 10px 4px;
    font-size: 11px;
    color: #777777;
    text-align: center;
}

.ema-settings-columns span:first-child {
    text-align: left;
}

.ema-settings-list {
    padding: 0 10px;
}

.ema-setting-row {
    min-height: 38px;
    border-bottom: 1px solid #EEEEEE;
}

.ema-setting-row:last-child {
    border-bottom: 0;
}

.ema-setting-toggle {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ema-setting-toggle input {
    margin: 0;
    accent-color: #557799;
}

.ema-setting-color {
    width: 34px;
    height: 28px;
    padding: 2px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    cursor: pointer;
}

.ema-setting-select {
    min-width: 0;
    height: 28px;
    padding: 0 4px;
    font-family: inherit;
    font-size: 12px;
    color: #333333;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
}

.ema-setting-color:focus-visible,
.ema-setting-select:focus-visible {
    outline: 2px solid #557799;
    outline-offset: 1px;
}

.ichimoku-cloud-setting-row { /* 일목균형표 구름대 표시 및 농도 설정 행. */
    display: grid;
    grid-template-columns: minmax(84px, 1fr) 50px minmax(90px, 1fr) 42px;
    align-items: center;
    min-height: 42px;
    gap: 6px;
    border-top: 1px solid #D5E5F5;
}

.ichimoku-cloud-opacity-label {
    font-size: 12px;
    color: #555555;
    text-align: right;
}

.ichimoku-cloud-opacity {
    width: 100%;
    margin: 0;
    accent-color: #557799;
    cursor: pointer;
}

.ichimoku-cloud-opacity-output {
    font-size: 12px;
    color: #555555;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ichimoku-cloud-opacity:focus-visible {
    outline: 2px solid #557799;
    outline-offset: 1px;
}

.stock-chart-settings-footer {
    display: flex;
    justify-content: flex-end;
    padding: 8px 10px;
    border-top: 1px solid #D5E5F5;
}

.stock-chart-settings-reset {
    padding: 5px 9px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #557799;
    background-color: #FFFFFF;
    border: 1px solid #A5B5C5;
    border-radius: 3px;
    cursor: pointer;
}

.stock-chart-settings-reset:hover {
    background-color: #F1F5F9;
}

/* ㅡ ㅡ ㅡ ㅡ ㅡ 위 차트 설정 부분 수정 필 ㅡ ㅡ ㅡ ㅡ ㅡ */

/* 차트 로딩, 오류, 빈 데이터 안내 */
.stock-chart-message {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 20px;
    font-size: 13px;
    color: #555555;
    background-color: rgba(250,250,250,0.92);
    text-align: center;
    pointer-events: none;
}

.stock-chart-message[hidden] {display: none;}

/* 현재 차트와 DART에 연결된 종목 행 */
.stock-table tbody tr.stock-row-selected {
    background-color: #E1EDF7;
    box-shadow: inset 3px 0 0 #557799;
}

/* 새 차트 데이터 반영 안내 효과 */
@keyframes stock-chart-status-update {
    0%, 100% {opacity: 1;}
    50% {opacity: 0.25;}
}

/* 홈페이지 하단 차트 라이브러리 출처 */
.site-attribution {
    width: 90%;
    padding: 0 4px;
    font-size: 10px;
    color: #777777;
    text-align: right;
    line-height: 1.3;
}

.site-attribution a {
    color: inherit;
    text-decoration: none;
}

.site-attribution a:hover {text-decoration: underline;}



/* - - - 재무 영역 스타일 설정 - - - */

/* ㅡ ㅡ ㅡ ㅡ ㅡ 아래 재무 설정 부분 수정 필 ㅡ ㅡ ㅡ ㅡ ㅡ */

.finance-content {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-top: 2px solid #557799;
}

/* 재무 보고 기준 */
.finance-meta {
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.5;
    color: #667788;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
}

.finance-meta p {margin: 0;}

.finance-meta-basis {
    font-weight: 500;
    color: #445566;
}

.finance-meta .finance-meta-details {margin-top: 2px;}

/* 저장 데이터 및 백그라운드 갱신 상태 */
.finance-status {
    margin: 0;
    padding: 6px 10px;
    font-size: 11px;
    line-height: 1.4;
    color: #667788;
    background-color: #F1F5F9;
    border-bottom: 1px solid #DDDDDD;
}

/* 재무 항목 목록 */
.finance-list {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
}

.finance-row {
    display: grid;
    grid-template-columns: minmax(68px, 1fr) auto;
    align-items: center;
    min-height: 42px;
    padding: 10px;
    gap: 12px;
    font-size: 14px;
    border-bottom: 1px solid #DDDDDD;
}

.finance-row:last-child {border-bottom: none;}

.finance-row dt {
    overflow: hidden;
    min-width: 0;
    font-weight: 500;
    color: #333333;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finance-row dd.finance-values {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    margin: 0;
    gap: 6px;
    font-weight: 700;
    color: #111111;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.finance-value {color: #111111;}

.finance-change {
    font-size: 12px;
    font-weight: 700;
}

.finance-change-up {color: #FF0000;}
.finance-change-down {color: #0000FF;}
.finance-change-flat {color: #666666;}

/* 재무 데이터 로딩 및 오류 안내 */
.finance-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    margin: 0;
    padding: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #667788;
    text-align: center;
}

.finance-message-error {color: #A33A3A;}

/* 기간별 재무 막대그래프 */
.finance-history-charts {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    border-top: 2px solid #557799;
}

.finance-history-section {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    background-color: #FFFFFF;
}

.finance-history-section + .finance-history-section {
    border-top: 1px solid #CCCCCC;
}

.finance-history-header {
    display: flex;
    align-items: center;
    flex: none;
    min-height: 34px;
    padding: 6px 8px;
    gap: 8px;
}

.finance-history-subtitle {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: #445566;
}

.finance-history-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-left: auto;
    gap: 4px 8px;
    font-size: 10px;
    color: #667788;
}

.finance-history-legend span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.finance-history-legend i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 1px;
}

.finance-legend-revenue,
.finance-legend-assets {
    background-color: #557799;
}

.finance-legend-operating,
.finance-legend-liabilities {
    background-color: #D9843B;
}

.finance-legend-net,
.finance-legend-equity {
    background-color: #5D9C76;
}

.finance-history-plot {
    position: relative;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.finance-history-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.finance-history-zero-line {
    stroke: #AAB4BE;
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

.finance-history-period-label {
    font-family: inherit;
    font-size: 11px;
    fill: #667788;
    text-anchor: middle;
}

.finance-history-bar {
    cursor: pointer;
    transition: opacity 0.12s ease;
}

.finance-history-bar:hover {
    opacity: 0.78;
}

.finance-history-bar:focus-visible {
    stroke: #111111;
    stroke-width: 2;
    outline: none;
    vector-effect: non-scaling-stroke;
}

.finance-history-tooltip {
    position: absolute;
    z-index: 3;
    max-width: calc(100% - 8px);
    padding: 5px 7px;
    font-size: 11px;
    line-height: 1.35;
    color: #FFFFFF;
    background-color: rgba(30, 40, 50, 0.92);
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.finance-history-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #667788;
    background-color: #FFFFFF;
    text-align: center;
}

.finance-history-message-error {
    color: #A33A3A;
}

.finance-history-tooltip[hidden],
.finance-history-message[hidden] {
    display: none;
}

@media (max-width: 1100px) {
    .finance-history-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .finance-history-legend {
        justify-content: flex-start;
        margin-left: 0;
    }

    .finance-history-period-label {
        font-size: 10px;
    }
}

/* ㅡ ㅡ ㅡ ㅡ ㅡ 위 재무 설정 부분 수정 필 ㅡ ㅡ ㅡ ㅡ ㅡ */



/* - - - Open DART 공시 목록 영역 스타일 설정 - - - */

/* Open DART 공시 목록 */
.dart-list {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 2px solid #557799;
    list-style: none; /* 각 공시 앞에 기본 목록 점이 표시되지 않도록 설정 */
}

/* 목록의 각 행 */
.dart-item {
    position: relative; /* 투명 링크 기준점 생성 */
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 20px 10px;
    gap: 10px;
    font-size: 14px;
    border-bottom: 1px dashed #CCCCCC;
}

/* 공시 hover 효과 */
.dart-item:hover {
    background-color: #F1F5F9;
    cursor: pointer;
}

/* 공시 제목 */
.dart-title {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    color: #333333;
    text-align: left;
    text-decoration: none;
    text-overflow: ellipsis;
    cursor: pointer;
    white-space: nowrap;
}

/* 공시 제목 투명 링크 확장 */
.dart-title::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* 공시 날짜 */
.dart-date {
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

/* 공시 오류 */
.dart-message {
    margin: 0;
    padding: 10px;
    font-size: 13px;
}



/* - - - 테마 및 종목 영역 스타일 설정 - - - */

/* ㅡ ㅡ ㅡ ㅡ ㅡ 아래 전체 수정 필 ㅡ ㅡ ㅡ ㅡ ㅡ */

/* - - - 선택 종목 테마 및 선택 테마 종목 영역 스타일 설정 - - - */

/* 긴 종목명 또는 테마명이 개수 영역을 밀어내지 않도록 헤더 말줄임 적용 */
.box3-3 .result-header .box-title, .box3-4 .result-header .box-title {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.box3-3 .result-header .result-count, .box3-4 .result-header .result-count {
    flex: none;
    padding-left: 8px;
}

/* 선택 종목이 포함된 테마 목록 */
.stock-theme-list {
    position: relative;
    flex: 1;
    overflow-y: auto;
    width: 100%;
    min-height: 0;
    border-top: 2px solid #557799;
    background-color: #FFFFFF;
}

/* 선택 종목의 각 테마 버튼 */
.stock-theme-item {
    display: block;
    width: 100%;
    min-height: 39px;
    padding: 10px;
    font-family: inherit;
    font-size: 13px;
    color: #333333;
    background-color: #FFFFFF;
    border: 0;
    border-bottom: 1px dashed #CCCCCC;
    text-align: left;
    cursor: pointer;
}

/* 테마 버튼 hover 및 선택 효과 */
.stock-theme-item:hover {background-color: #F1F5F9;}

.stock-theme-item-selected {
    background-color: #E1EDF7;
    box-shadow: inset 3px 0 0 #557799;
}

/* 키보드로 테마를 선택할 때 표시할 테두리 */
.stock-theme-item:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid #335577;
    outline-offset: -2px;
}

/* 테마 또는 종목의 준비·빈 결과·오류 안내 */
.stock-theme-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-size: 13px;
    color: #667788;
    text-align: center;
    pointer-events: none;
}

/* 키보드로 박스3-4 종목을 선택할 때 표시할 테두리 */
.theme-stock-table tbody tr:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid #335577;
    outline-offset: -2px;
}

/* ㅡ ㅡ ㅡ ㅡ ㅡ 위 전체 수정 필 ㅡ ㅡ ㅡ ㅡ ㅡ */



/* - - - 테마맵 영역 스타일 설정 - - - */

/* ㅡ ㅡ ㅡ ㅡ ㅡ 아래 전체 수정 필 ㅡ ㅡ ㅡ ㅡ ㅡ */

.theme-map-header {
    display: flex;
    align-items: center;
    min-height: 19px;
    margin-bottom: 10px;
    padding: 0 10px;
}

.theme-map-header .box-title {
    overflow: hidden;
    min-width: 0;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-map-updated {
    margin-left: auto;
    padding-left: 12px;
    font-size: 12px;
    color: #667788;
    white-space: nowrap;
}

.theme-map-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    border-top: 2px solid #557799;
}

.theme-map-toolbar {
    display: flex;
    align-items: center;
    min-height: 35px;
    padding: 5px 4px;
    gap: 8px;
}

.theme-map-back {
    flex: none;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 12px;
    color: #334455;
    background-color: #FFFFFF;
    border: 1px solid #AAB7C4;
    border-radius: 4px;
    cursor: pointer;
}

.theme-map-back:hover {background-color: #EDF3F8;}

.theme-map-back:focus-visible {
    outline: 2px solid #335577;
    outline-offset: 1px;
}

.theme-map-basis {
    overflow: hidden;
    min-width: 0;
    font-size: 11px;
    color: #667788;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-map-legend {
    display: flex;
    flex: none;
    margin-left: auto;
    gap: 2px;
    font-size: 10px;
    color: #FFFFFF;
}

.theme-map-legend span {
    padding: 2px 5px;
    border-radius: 2px;
}

.theme-map-legend-down {background-color: #426BC2;}
.theme-map-legend-flat {background-color: #97A0AA;}
.theme-map-legend-up {background-color: #D53F3F;}

.theme-map-surface {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background-color: #E3E8ED;
}

.theme-map-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-size: 13px;
    color: #667788;
    text-align: center;
}

.theme-map-message-error {color: #A33A3A;}

.theme-map-tile {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    padding: 5px;
    gap: 2px;
    font-family: inherit;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 2px;
    cursor: pointer;
    contain: layout paint;
    transition: filter 0.12s ease, transform 0.12s ease;
}

.theme-map-tile:hover {
    z-index: 2;
    filter: brightness(1.08);
    transform: scale(1.01);
}

.theme-map-tile:focus-visible {
    z-index: 3;
    outline: 2px solid #112B45;
    outline-offset: -3px;
}

.theme-map-tile-name {
    overflow: hidden;
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-map-tile-rate {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.theme-map-tile-meta {
    overflow: hidden;
    width: 100%;
    font-size: 10px;
    line-height: 1.2;
    opacity: 0.9;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-map-tile-compact {
    padding: 3px;
    gap: 1px;
}

.theme-map-tile-compact .theme-map-tile-name,
.theme-map-tile-compact .theme-map-tile-rate {font-size: 10px;}

.theme-map-tile-tiny {padding: 1px;}
.theme-map-tile-tiny .theme-map-tile-name {font-size: 9px;}
.theme-map-tile-tiny .theme-map-tile-rate,
.theme-map-tile-tiny .theme-map-tile-meta {display: none;}

@media (max-width: 1100px) {
    .theme-map-basis {display: none;}
    .theme-map-toolbar {gap: 4px;}
}