/* 파일이름 : stock-detail.css
파일설명 : 국내·미국 종목 상세 공통 디자인
작성일자 : 2026-10-12 / 버전 : v11 / 작성자 : Codex
내용·수정사항 :
- 2026-10-12 v11 수익률과 관련 종목 사이 구분선 제거.
- 2026-10-12 v10 관련 종목의 코드를 종목명 오른쪽에 배치.
- 2026-10-12 v9 관련 종목 카드의 호버 테두리를 빨간색으로 변경.
- 2026-10-12 v8 관련 종목 카드에 구루 카드와 같은 2px 상승·그림자 효과 적용.
- 2026-10-12 v7 국내·미국 관련 종목 카드의 글자색을 유지하고 호버 시 테두리 강조.
- 2026-10-12 v6 국내 종목 로고가 있을 때만 48px 이미지와 종목 정보를 나란히 표시.
- 2026-10-12 v5 차트 툴팁을 미국 테마와 같은 어두운 배경에 맞춰 밝은 글자와 구분선으로 변경.
- 2026-10-12 v4 함께 살펴볼 종목의 상단 간격을 36px로 확대.
- 2026-10-12 v3 관련 종목 차트의 기간 문구를 작은 회색 글씨로 하단에 겹쳐 표시.
- 2026-10-12 v2 국내 52주 가격 범위·기간 수익률·관련 종목을 미국과 같은 형태로 표시.
*/
.sv2-kr-identity{display:flex;align-items:center;gap:8px}
.sv2-kr-identity-text{min-width:0;flex:1}
.sv2-kr-logo{width:48px;height:48px;flex:0 0 48px;object-fit:contain;border-radius:6px}
.sv2-kr-identity .sv2-name a{min-width:0;overflow-wrap:anywhere}
.sv2-kr-identity .sv2-fav{flex-shrink:0}
.sv2-price-range{border-top:1px solid #e9edf2;margin-top:16px;padding-top:16px}
.sv2-range-values{display:flex;justify-content:space-between;font-size:11px;color:#7b8490}
.sv2-range-values b{display:block;font-size:12px;color:#263343}
.sv2-price-track{position:relative;height:5px;margin:12px 6px;background:linear-gradient(90deg,#dce8f8,#f3d9db);border-radius:4px}
.sv2-price-track>span{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#65778a;border:2px solid white}
.sv2-range-missing{color:#949ca6;font-size:11px;line-height:1.6;margin:8px 0}
.sv2-insights{border-top:1px solid #e9edf2;margin-top:22px;padding-top:18px}
.sv2-insights + .sv2-insights{border-top:0;margin-top:36px}
.sv2-insight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sv2-return{display:flex;flex-direction:column;gap:4px;font-size:12px;min-width:0}
.sv2-return>b{font-size:18px}
.sv2-related-heading{display:flex;align-items:baseline;gap:6px;min-width:0}
.sv2-related-heading>strong{min-width:0;overflow-wrap:anywhere}
.sv2-related-heading>small{flex-shrink:0;white-space:nowrap}
.sv2-return small,.sv2-related-item small{font-size:10px;color:#949ca6}
.sv2-insight-spark{width:100%;height:44px;display:block}
.sv2-related-chart{position:relative;width:100%;height:44px}
.sv2-related-chart>small{position:absolute;left:0;bottom:2px;font-size:10px;line-height:1.2;color:#949ca6;pointer-events:none}
.sv2-insight-note{color:#949ca6;font-size:11px;line-height:1.6;margin:8px 0}
.sv2-related-item{display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px;border:1px solid #e9edf2;border-radius:6px;color:#263343;text-decoration:none;overflow-wrap:anywhere;font-size:12px}
/* 공통 링크 호버 색상보다 카드의 기본 글자색을 우선하며 등락률 고유색은 유지한다. */
.sv2 a:is(.sv2-related-item,.usv-related-item){color:#263343!important;text-decoration:none;transition:box-shadow .15s,border-color .15s,transform .15s}
.sv2 a:is(.sv2-related-item,.usv-related-item):is(:hover,:focus-visible){color:#263343!important;border-color:#e74c3c;text-decoration:none;box-shadow:0 4px 14px rgba(20,40,80,.08);transform:translateY(-2px)}
@media(max-width:600px){.sv2-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

	/* 2단 레이아웃 : 좌측 고정폭 340px + 우측 나머지, 사이에 얇은 세로 구분선 */
	.sv2 { display:grid; grid-template-columns:340px minmax(0,1fr); align-items:start;
	       gap:24px; width:100%; max-width:var(--jh-content-max); margin:0 auto; padding:4px 0 30px; }
	/* 좌측 패널 : 옅은 배경 카드. 세로 구분선 대신 배경으로 영역을 구분한다.
	   ★ height/max-height/overflow/position:sticky 는 넣지 않는다(내용이 길어도 통째로 펼쳐져야 한다) */
	.sv2-side { background:#f7f9fb; border:1px solid #e9edf2; border-radius:14px;
	            padding:22px 20px 20px; min-width:0; }
	.sv2-main { padding:4px 2px 10px; min-width:0; }
	.sv2-up { color:#e74c3c !important; }
	.sv2-down { color:#2f80ed !important; }
	.sv2-flat { color:#8a9099 !important; }

	/* 좌측 : 뒤로가기 / 뱃지 */

	/* 좌측 : 종목 헤더 (썸네일·뒤로가기·KRX·알림 없음) */
	.sv2-head { padding-top:2px; }
	.sv2-meta { font-size:12.5px; color:#949ca6; letter-spacing:-.2px; }
	.sv2-name { font-size:26px; font-weight:900; letter-spacing:-1px; color:#14202c; margin:1px 0 0; line-height:1.3;
	            display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
	.sv2-name a { color:inherit; text-decoration:none; }
	.sv2-name a:hover { color:#2f80ed; text-decoration:underline; text-underline-offset:3px; }
	/* 관심종목 별표 : 종목명 오른쪽 */
	.sv2-fav { appearance:none; border:0; background:none; cursor:pointer; color:#c8cfd6; font-size:18px;
	           padding:2px 3px; line-height:1; border-radius:6px; }
	.sv2-fav:hover { background:#f2f5f9; color:#8a9099; }
	/* 관심종목 2단계 : 사이트 공통 색을 그대로 쓴다(일반 #c00 / 중요 #c06024) */
	.sv2-fav.lv-normal, .sv2-fav.lv-normal:hover { color:#c00; background:none; }
	.sv2-fav.lv-top,    .sv2-fav.lv-top:hover    { color:#c06024; background:none; }
	.sv2-fav.lv-normal:hover, .sv2-fav.lv-top:hover { background:#f8f9fb; }
	.sv2-fav[data-busy="1"] { opacity:.5; cursor:default; }
	.sv2-themes { display:flex; flex-wrap:wrap; gap:4px; margin:9px 0 0; }
	.sv2-th { font-size:12px; color:#46648c; background:#eef3f9; border:1px solid #dde7f1; border-radius:10px;
	          padding:1px 8px; text-decoration:none; }
	.sv2-th:hover { background:#dce8f5; color:#2f5aa8; }
	.sv2-th-none { font-size:12px; color:#b6bec8; }
	.sv2-price { margin:14px 0 0; line-height:1; }
	.sv2-price-v { font-size:34px; font-weight:900; letter-spacing:-1.8px; }
	.sv2-price-u { font-size:16px; color:#8a9099; margin-left:3px; font-weight:600; }
	.sv2-chg { margin:7px 0 0; font-size:16.5px; font-weight:800; }
	.sv2-chg-r { font-weight:700; }
	.sv2-asof { margin:9px 0 0; font-size:12.5px; color:#9aa2ab; }

	/* 좌측 : 섹션 */
	.sv2-sec { margin:22px 0 0; }
	/* 제목 없는 섹션(투자정보) : 위에 구분선만 둔다 */
	.sv2-sec-nt { margin-top:18px; padding-top:4px; border-top:1px solid #dde4ec; }
	/* 위 영역과 구분선으로 나누는 섹션(다른 곳에서 보기)
	   — 위에 선이 있으므로 제목 아래 선은 없앤다(두 줄이 겹쳐 보였다) */
	.sv2-sec-line { margin-top:24px; padding-top:22px; border-top:1px solid #dde4ec; }
	.sv2-sec-line .sv2-sec-t { border-bottom:0; padding-bottom:0; margin-bottom:10px; }
	.sv2-sec-t { font-size:16.5px; font-weight:800; letter-spacing:-.4px; color:#14202c; margin:0 0 12px;
	             padding-bottom:9px; border-bottom:1px solid #dde4ec; }
	.sv2-sec-t i { font-size:11px; color:#b6bec8; margin-left:2px; }
	/* 52주 막대 */
	/* 2열 그리드 */
	.sv2-dl { display:grid; grid-template-columns:auto 1fr; row-gap:0; }
	.sv2-dt { font-size:14px; color:#7a848f; padding:10px 10px 10px 0; border-bottom:1px solid #e5eaf0; white-space:nowrap; }
	.sv2-dd { font-size:14px; font-weight:700; color:#2f3a46; padding:10px 0; border-bottom:1px solid #e5eaf0;
	          text-align:right; white-space:nowrap; }
	.sv2-i { font-size:12px; color:#c8cfd6; cursor:help; }
	.sv2-i:hover { color:#2f80ed; }
	.sv2-i-s { font-size:11.5px; color:#c8cfd6; }
	.sv2-note { margin:10px 0 0; font-size:12.5px; line-height:1.7; color:#a4adb7; }
	/* 회사소개 : 제목 없이 본문만. 위 기준일과 아래 투자정보 사이에 여백과 구분선으로 분리 */
	/* 회사소개 : 제목 없이 본문만. 볼드로 또렷하게 */
	.sv2-ci { font-size:14.5px; line-height:1.85; color:#2f3a46; font-weight:700; margin:20px 0 0;
	          padding-top:18px; border-top:1px solid #dde4ec; }
	.sv2-ci p { margin:0 0 9px; }
	.sv2-ci p:last-child { margin-bottom:0; }
	.sv2-ci b, .sv2-ci strong { color:#14202c; font-weight:700; }
	/* 다른 곳에서 보기 : 박스 없이 텍스트 목록 */
	.sv2-ext { list-style:none; margin:0; padding:0; }
	.sv2-ext li { padding:5px 0; }
	.sv2-ext a { font-size:14px; font-weight:700; color:#2f3a46; text-decoration:none; }
	.sv2-ext a:hover { color:#2f80ed; text-decoration:underline; text-underline-offset:3px; }
	.sv2-ext i { font-size:10px; color:#c8cfd6; margin-left:4px; vertical-align:1px; }
	.sv2-ext a:hover i { color:#2f80ed; }
	.sv2-ext em { font-style:normal; display:block; font-size:12px; color:#a4adb7; margin-top:2px; }

	/* 우측 : 탭 */

	/* 우측 : 차트 툴바 */
	.sv2-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:11px; }
	.sv2-tb-l { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
	.sv2-seg { display:inline-flex; border:1px solid #dde2e8; border-radius:6px; overflow:hidden; }
	.sv2-seg button { appearance:none; border:0; background:#fff; cursor:pointer; font-family:inherit;
	                  font-size:13.5px; font-weight:600; color:#7a848f; padding:5px 11px; }
	.sv2-seg button + button { border-left:1px solid #e8ebee; }
	.sv2-seg button.active { background:#2f3a46; color:#fff; font-weight:700; }
	/* 이동평균 범례 : 색 구분만. 값은 차트 툴팁에서 보면 되므로 숫자를 쓰지 않는다 */
	.sv2-ma-note { display:inline-flex; align-items:center; gap:9px; font-size:12.5px; color:#a4adb7; margin-left:4px; }
	.sv2-ma-note > span { display:inline-flex; align-items:center; gap:3px; color:#7a848f; font-weight:600; }
	.sv2-ma-note i { width:9px; height:2px; display:inline-block; border-radius:1px; }

	/* OHLC 요약 / 이동평균 범례 */

	/* 차트 : 고정 높이(내부 스크롤 아님). 거래량은 아래에 붙고 X축을 공유한다 */
	.sv2-chart { width:100%; height:330px; }
	.sv2-vol { width:100%; height:96px; margin-top:2px; }
	.sv2-chart-tooltip { font-variant-numeric:tabular-nums; }
	.sv2-chart-tooltip .sv2-tip-date { padding:7px 10px 3px; font-size:12px; font-weight:600; line-height:18px; color:#b8c2d1; }
	.sv2-chart-tooltip .sv2-tip-prices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:6px 10px 9px; }
	.sv2-chart-tooltip .sv2-tip-row { display:flex; justify-content:space-between; gap:7px; font-size:12px; line-height:18px; white-space:nowrap; }
	.sv2-chart-tooltip .sv2-tip-prices .sv2-tip-row { flex-direction:column; gap:1px; }
	.sv2-chart-tooltip .sv2-tip-prices .sv2-tip-value { text-align:left; }
	.sv2-chart-tooltip .sv2-tip-key { color:#d2dbe7; font-weight:400; }
	.sv2-chart-tooltip .sv2-tip-value { text-align:right; font-weight:600; color:#fff; }
	.sv2-chart-tooltip .sv2-tip-mas { display:grid; grid-template-columns:1fr 1fr; gap:5px 14px; border-top:1px solid #3a4658; padding:7px 10px; }
	.sv2-chart-tooltip .sv2-tip-dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; vertical-align:1px; }
	.sv2-chart-tooltip .sv2-tip-volume { display:flex; align-items:center; justify-content:space-between; }
	.sv2-chart-tooltip .sv2-tip-volume .sv2-tip-date { padding:8px 9px; font-size:11px; white-space:nowrap; }
	.sv2-chart-tooltip .sv2-tip-volume-value { padding:8px 9px; }
	.sv2-nochart { font-size:12.5px; color:#a4adb7; text-align:center; padding:60px 0; }

	/* 하단 컨트롤 */
	.sv2-ctrl { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
	            margin-top:12px; padding-top:12px; border-top:1px solid #f2f4f6; }
	.sv2-range { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
	.sv2-range-l { font-size:12.5px; color:#a4adb7; margin-right:4px; }
	.sv2-range button { appearance:none; border:1px solid #e8ebee; background:#fff; cursor:pointer;
	                    font-family:inherit; font-size:13px; font-weight:600; color:#7a848f;
	                    border-radius:6px; padding:4px 10px; }
	.sv2-range button:hover { border-color:#cfdeee; color:#2f80ed; }
	.sv2-range button.active { background:#2f3a46; border-color:#2f3a46; color:#fff; font-weight:700; }


	/* 하단 : 일별 시세 */
	.sv2-box { border:1px solid #e8ebee; border-radius:11px; padding:15px 17px 14px; background:#fff; }
	.sv2-box-t { font-size:16.5px; font-weight:800; letter-spacing:-.4px; color:#14202c; margin:0 0 10px;
	             display:flex; align-items:center; gap:8px; }
	.sv2-box-t .sv2-box-s { margin-left:auto; }
	/* 표 내부 스크롤을 쓰지 않는다 — 공통 페이징으로 20행씩 페이지를 나눈다 */
	.sv2-tbl-wrap { border:1px solid #f2f4f6; border-radius:7px; overflow:hidden; }
	.sv2-tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
	.sv2-tbl th { position:sticky; top:0; background:#f6f8fa; color:#7a848f; font-weight:700; font-size:12.5px;
	              padding:9px 10px; border-bottom:1px solid #e8ebee; text-align:right; z-index:1; }
	.sv2-tbl th:first-child { text-align:left; }
	.sv2-tbl td { padding:7px 10px; border-bottom:1px solid #f6f8fa; text-align:right; color:#44505d; }
	.sv2-t-at { text-align:left !important; color:#8a9099; }
	.sv2-t-px { font-weight:700; }
	.sv2-box-s { font-size:12.5px; font-weight:600; color:#a4adb7; }
	.sv2-daily { margin-top:20px; }

	.sv2-none { text-align:center !important; color:#a4adb7; padding:34px 0 !important; }
	/* 탭 : 원래의 밑줄형. 글씨를 키우고 선택 밑줄을 굵게 해 눈에 띄게만 손봤다 */
	.sv2-tabs { display:flex; justify-content:flex-start; gap:4px; flex-wrap:wrap; margin-bottom:18px;
	            border-bottom:2px solid #e8ebee; }
	.sv2-tab { appearance:none; border:0; background:none; cursor:pointer; font-family:inherit;
	           display:inline-flex; align-items:center; gap:6px;
	           font-size:17px; font-weight:700; letter-spacing:-.5px; color:#9aa2ab;
	           padding:10px 14px 13px; position:relative; transition:color .13s; }
	.sv2-tab:hover { color:#44505d; }
	.sv2-tab:hover::after { content:''; position:absolute; left:8px; right:8px; bottom:-2px; height:2px;
	                        background:#cfd6de; border-radius:2px; }
	.sv2-tab.active { color:#14202c; font-weight:800; }
	.sv2-tab.active::after { content:''; position:absolute; left:4px; right:4px; bottom:-2px; height:3px;
	                         background:#14202c; border-radius:2px; }
	.sv2-tab.active:hover::after { background:#14202c; }

	/* 주달AI 탭은 선택 전에도 한 번 눈에 걸리게 */
	.sv2-tab-ai { color:#4a7ab5; }
	.sv2-tab-ai:hover { color:#2457a0; }
	/* 관련뉴스 : 탭 모양이지만 외부 링크. 선택 상태가 없고 아이콘으로 '밖으로 나간다'를 알린다 */
	.sv2-tab-out { text-decoration:none; }
	.sv2-tab-out i { font-size:.62em; color:#b6bec8; margin-left:1px; vertical-align:2px; }
	.sv2-tab-out:hover i { color:#2f80ed; }
	.sv2-tab-out:hover::after { background:#cfd6de; }
	@media (max-width:600px){
		.sv2-tab { font-size:14.5px; padding:9px 9px 12px; }
	}
	/* 1200px 이하 : 패널을 조금 더 좁혀 본문 폭을 확보 */
	@media (max-width:1200px){
		.sv2 { grid-template-columns:304px minmax(0,1fr); gap:18px; }
		.sv2-side { padding:18px 16px 16px; }
		.sv2-price-v { font-size:31px; }
	}
	/* 1024px 미만 : 1단으로 쌓인다(좌측 패널이 위) */
	@media (max-width:1023px){
		.sv2 { grid-template-columns:minmax(0,1fr); }
		.sv2-side { padding:18px 16px 16px; }
		.sv2-main { padding:0 2px 10px; }
		.sv2-chart { height:310px; }
	}
	@media (max-width:600px){
		.sv2-price-v { font-size:31px; }
		.sv2-name { font-size:20px; }
		.sv2-chart { height:300px; }
		.sv2-vol { height:76px; }
	}