/* ==========================================================================
   Stock VOD 글로벌 스타일 — DESIGN.md §3 디자인 토큰 적용 (TASK-0202)
   핀테크 다크 테마: Deep Charcoal 배경 + 한국 시장 상승/하락 컬러
   ========================================================================== */

:root {
	/* 색상 토큰 (DESIGN.md §3.1) */
	--sv-background: #0B0E14;
	--sv-surface: #151C28;
	--sv-surface-active: #1E293B;
	--sv-border: #252D3D;
	--sv-text-primary: #F8FAFC;
	--sv-text-secondary: #94A3B8;
	--sv-text-muted: #64748B;
	--sv-primary: #2563EB;
	--sv-primary-hover: #3B82F6;
	--sv-rise: #F04452;
	--sv-fall: #3182F6;
	--sv-promotion: #F59E0B;

	/* 라운드·간격 (§3.3) */
	--sv-radius-card: 12px;
	--sv-radius-btn: 8px;
	--sv-radius-modal: 16px;

	/* 레이아웃 (§4) */
	--sv-content-max: 1280px;
	--sv-ticker-height: 44px;
}

/* --- 기본 레이아웃·타이포 --- */
body {
	background-color: var(--sv-background);
	color: var(--sv-text-primary);
	font-family: Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 숫자(가격·지수·정산)는 고정폭 숫자 사용 */
.sv-num, .price, .sv-price {
	font-variant-numeric: tabular-nums;
}

/* 중앙 콘텐츠 최대 1280px + 좌우 여백 PC32/Tablet24/Mobile16 (DESIGN.md §4) */
.ast-container,
.site-content .ast-container {
	max-width: var(--sv-content-max);
	padding-left: 32px;
	padding-right: 32px;
}
@media (max-width: 1199px) {   /* Tablet 768–1199px */
	.ast-container,
	.site-content .ast-container { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 767px) {    /* Mobile 767px 이하 */
	.ast-container,
	.site-content .ast-container { padding-left: 16px; padding-right: 16px; }
}

a { color: var(--sv-primary-hover); }
a:hover { color: var(--sv-primary); }

/* --- 증시 전광판 (TASK-0301): 최상단 44px 자체 티커, 한국식 상승 적/하락 청 --- */
.sv-ticker {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--sv-ticker-height);   /* 44px */
	background: var(--sv-background);
	border-bottom: 1px solid var(--sv-border);
	overflow: hidden;
}
.sv-ticker__track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	animation: sv-tick-scroll 40s linear infinite;
	will-change: transform;
}
.sv-tick { margin-right: 32px; }   /* gap 대신 아이템 margin — 반복 경계 정합성 */
@keyframes sv-tick-scroll {
	to { transform: translateX(-50%); }   /* 동일 세트 짝수 반복 전제 (JS가 폭 정규화) */
}
.sv-ticker:hover .sv-ticker__track,
.sv-ticker--paused .sv-ticker__track {
	animation-play-state: paused;         /* DESIGN.md §7 일시정지 */
}
@media (prefers-reduced-motion: reduce) {
	.sv-ticker__track { animation: none; }
}

.sv-tick { font-size: 13px; color: var(--sv-text-secondary); }
.sv-tick__name { font-weight: 500; }
.sv-tick__price { color: var(--sv-text-primary); font-weight: 600; }
.sv-tick--rise .sv-tick__chg { color: var(--sv-rise); }    /* 상승 빨강 */
.sv-tick--fall .sv-tick__chg { color: var(--sv-fall); }    /* 하락 파랑 */
.sv-tick--flat .sv-tick__chg { color: var(--sv-text-muted); }
.sv-tick--flash-up   { animation: sv-tick-flash 600ms ease; }
.sv-tick--flash-down { animation: sv-tick-flash 600ms ease; }
@keyframes sv-tick-flash {
	0% { background: var(--sv-surface-active); }
	100% { background: transparent; }
}

.sv-ticker__pause {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	min-width: 44px;   /* 최소 터치 영역 44px (§3.3) */
	border: none;
	border-left: 1px solid var(--sv-border);
	background: var(--sv-background);
	color: var(--sv-text-secondary);
	font-size: 12px;
	cursor: pointer;
}

/* 실패 안내 (DESIGN.md §5·§8) — 데이터 없거나 fetch 실패 시 표시 */
.sv-ticker__fallback {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: var(--sv-ticker-height);
	font-size: 14px;
	color: var(--sv-text-secondary);
}
.sv-ticker__retry {
	color: var(--sv-primary-hover);
	background: none;
	border: none;
	cursor: pointer;
	font-size: inherit;
	text-decoration: underline;
}
.sv-ticker--failed .sv-ticker__fallback { display: flex; }
.sv-ticker--failed .sv-ticker__track,
.sv-ticker--failed .sv-ticker__pause { display: none; }

/* --- TASK-0302: 금융 2단 섹션 (차트 60% + 속보 40%) --- */
.sv-market {
	display: grid;
	grid-template-columns: 6fr 4fr;   /* PC 차트 60% · 뉴스 40% (DESIGN.md §4) */
	gap: 24px;
	margin: 24px 0;
}
@media (max-width: 1199px) {          /* Tablet·Mobile: 수직 적층 */
	.sv-market { grid-template-columns: 1fr; }
}

/* 외부 위젯 래퍼 + 실패 폴백 */
.sv-widget {
	position: relative;
	min-height: 400px;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-card);
	overflow: hidden;
}
.sv-widget .tradingview-widget-container,
.sv-widget .tradingview-widget-container__widget,
.sv-widget iframe {
	position: absolute;
	inset: 0;
	height: 100% !important;
	width: 100% !important;
}
.sv-widget__fallback {
	display: none;
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 14px;
	color: var(--sv-text-secondary);
}
.sv-widget--failed .sv-widget__fallback { display: flex; }
.sv-widget--failed .tradingview-widget-container { display: none; }

/* ==========================================================================
   공통 컴포넌트 (§5) — 테마 템플릿화용 유틸리티 클래스
   ========================================================================== */

/* 버튼 */
.sv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;            /* 주요 버튼 높이 48px 이상 */
	padding: 0 24px;
	border-radius: var(--sv-radius-btn);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease;
	border: 1px solid transparent;
	text-decoration: none;
}
.sv-btn--primary {
	background: var(--sv-primary);
	color: var(--sv-text-primary);
}
.sv-btn--primary:hover { background: var(--sv-primary-hover); color: var(--sv-text-primary); }
.sv-btn--secondary {
	background: transparent;
	border-color: var(--sv-border);
	color: var(--sv-text-primary);
}
.sv-btn--secondary:hover { background: var(--sv-surface-active); }
.sv-btn:disabled, .sv-btn[aria-disabled="true"] {
	background: var(--sv-surface);
	color: var(--sv-text-muted);
	cursor: not-allowed;
}

/* 배지 */
.sv-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--sv-radius-btn);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	background: var(--sv-surface-active);
	color: var(--sv-text-secondary);
}
.sv-badge--free  { background: rgba(37, 99, 235, .18); color: var(--sv-primary-hover); }
.sv-badge--promo { background: rgba(245, 158, 11, .15); color: var(--sv-promotion); }
.sv-badge--rise  { color: var(--sv-rise); }
.sv-badge--fall  { color: var(--sv-fall); }

/* 콘텐츠 카드 (강의·전자책 공통) */
.sv-card {
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-card);
	padding: 24px;
	transition: background-color 200ms ease;
}
.sv-card:hover { background: var(--sv-surface-active); }
.sv-card__thumb {
	aspect-ratio: 16 / 9;
	border-radius: var(--sv-radius-btn);
	background: var(--sv-surface-active);
	object-fit: cover;
	width: 100%;
}
.sv-card__title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;      /* 카드 제목 최대 2줄 */
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sv-card__meta { font-size: 14px; color: var(--sv-text-secondary); }

/* 카드 그리드 — Desktop 4열 / Tablet 2열 / Mobile 1열 (§4)
   가로 스크롤은 추천 강의용 변형 .sv-card-grid--carousel 에만 적용 */
.sv-card-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1199px) {   /* Tablet 768–1199px */
	.sv-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {    /* Mobile 767px 이하 */
	.sv-card { padding: 16px; }
	.sv-card-grid {
		grid-template-columns: 1fr;   /* 전체 목록은 세로 1열 */
		gap: 16px;
	}
	.sv-card-grid--carousel {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
	.sv-card-grid--carousel > * {
		flex: 0 0 82%;              /* 다음 카드 일부 노출 */
		scroll-snap-align: start;
	}
}

/* 고정 하단 바(구매바·탭바) — safe-area 반영.
   사용 시 body.sv-has-bottom-bar를 추가해 마지막 콘텐츠 가림 방지 (§4) */
.sv-bottom-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: var(--sv-surface);
	border-top: 1px solid var(--sv-border);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 40;
}
body.sv-has-bottom-bar {
	padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* 라이트박스·모달 */
.sv-modal {
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-modal);
}
.sv-overlay { background: rgba(11, 14, 20, .8); }

/* --- TASK-0304: 리드마그넷 히어로 --- */
.sv-hero {
	margin: 48px auto;
	padding: 64px 32px;
	max-width: 960px;
	text-align: center;
	background:
		radial-gradient(ellipse 60% 50% at 50% 0%, color-mix(in srgb, var(--sv-primary) 18%, transparent), transparent),
		var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-card);
}
.sv-hero__eyebrow {
	font-size: 14px;
	font-weight: 600;
	color: var(--sv-primary-hover);
	letter-spacing: .02em;
}
.sv-hero__title {
	margin: 16px 0;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--sv-text-primary);
}
.sv-hero__desc {
	margin: 0 auto 32px;
	max-width: 480px;
	font-size: 16px;
	color: var(--sv-text-secondary);
}
.sv-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	align-items: center;
}
.sv-hero__note {
	flex-basis: 100%;
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--sv-text-muted);
}
@media (max-width: 767px) {
	.sv-hero { padding: 40px 20px; margin: 24px 0; }
	.sv-hero__title { font-size: 24px; }
}

/* --- TASK-0303: 무료 특강 라이트박스 --- */
.sv-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.sv-lightbox[hidden] { display: none; }
.sv-lightbox .sv-overlay {
	position: absolute;
	inset: 0;
}
.sv-lightbox__dialog {
	position: relative;
	width: min(960px, 100%);
	max-height: calc(100dvh - 32px);   /* 낮은 화면·가로 모드에서도 닫기 접근 가능 */
	overflow-y: auto;
	padding: 16px;
}
.sv-lightbox__frame {
	aspect-ratio: 16 / 9;
	background: var(--sv-background);
	border-radius: var(--sv-radius-btn);
	overflow: hidden;
}
.sv-lightbox__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}
.sv-lightbox__title {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--sv-text-secondary);
}
.sv-lightbox__close {
	position: absolute;
	top: 8px;                    /* 다이얼로그 안쪽 배치 — 화면 밖으로 밀리지 않음 */
	right: 8px;
	width: 44px;                 /* 최소 터치 영역 */
	height: 44px;
	border: 1px solid var(--sv-border);
	border-radius: 50%;
	background: var(--sv-surface-active);
	color: var(--sv-text-primary);
	font-size: 16px;
	cursor: pointer;
	z-index: 1;
}
/* 카드 내부 뱃지·메타 배치 */
.sv-card--course {
	text-align: left;
	cursor: pointer;
	display: block;
	width: 100%;
	border: 1px solid var(--sv-border);
}
.sv-card--course .sv-card__badges {
	display: flex;
	gap: 8px;
	margin: 12px 0 8px;
}
.sv-card__thumb--empty {
	display: block;
	background: linear-gradient(135deg, var(--sv-surface-active), var(--sv-surface));
}

/* --- TASK-0404: 커리큘럼 아코디언 --- */
.sv-curriculum { margin: 32px 0; }
.sv-curriculum__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
}
.sv-acc {
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-card);
	margin-bottom: 8px;
	overflow: hidden;
}
.sv-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.sv-acc__head::-webkit-details-marker { display: none; }
.sv-acc__head::after {
	content: '⌄';
	transition: transform 200ms ease;
	color: var(--sv-text-muted);
}
.sv-acc[open] > .sv-acc__head::after { transform: rotate(180deg); }
.sv-acc__count { font-size: 13px; color: var(--sv-text-muted); }
.sv-acc__body {
	list-style: none;
	margin: 0;
	padding: 0 20px 12px;
}
.sv-lesson {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	border: none;
	border-radius: var(--sv-radius-btn);
	background: transparent;
	color: var(--sv-text-primary);
	font-size: 14px;
	text-align: left;
	cursor: default;
}
.sv-lesson--play { cursor: pointer; }
.sv-lesson--play:hover { background: var(--sv-surface-active); }
.sv-lesson__num {
	width: 20px;
	flex-shrink: 0;
	font-size: 13px;
	color: var(--sv-text-muted);
}
.sv-lesson__title { flex: 1; }
.sv-lesson__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--sv-text-muted);
}
.sv-lesson__hint { font-size: 12px; }
.sv-lesson--locked .sv-lesson__title { color: var(--sv-text-secondary); }
.sv-lesson--done .sv-lesson__title { color: var(--sv-text-muted); text-decoration: line-through; }

/* 진도율 바 (TASK-0405) */
.sv-progress {
	position: relative;
	height: 24px;
	margin: 0 0 16px;
	background: var(--sv-surface-active);
	border-radius: var(--sv-radius-btn);
	overflow: hidden;
}
.sv-progress__bar {
	height: 100%;
	background: var(--sv-primary);
	border-radius: var(--sv-radius-btn);
	transition: width 300ms ease;
}
.sv-progress__pct {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--sv-text-primary);
}
/* 라이트박스 안내·액션 */
.sv-lightbox__notice {
	padding: 24px 16px;
	font-size: 15px;
	color: var(--sv-text-primary);
	text-align: center;
}
.sv-lightbox__actions { margin-top: 12px; text-align: right; }

/* --- TASK-0503: DRM 고지 · 보관함 목록 --- */
.sv-notice {
	padding: 16px 20px;
	background: var(--sv-surface-active);
	border: 1px solid var(--sv-border);
	border-left: 3px solid var(--sv-promotion);
	border-radius: var(--sv-radius-btn);
	font-size: 14px;
	color: var(--sv-text-secondary);
}
.sv-notice strong { color: var(--sv-text-primary); display: block; margin-bottom: 4px; }
.sv-notice p { margin: 0; }
.sv-library__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.sv-library__item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sv-library__item .sv-card__title { flex: 1 1 100%; }
.sv-library__item .sv-card__meta { margin-right: auto; }

/* 입력 폼 */
.sv-input {
	min-height: 48px;
	padding: 0 16px;
	border-radius: var(--sv-radius-btn);
	border: 1px solid var(--sv-border);
	background: var(--sv-surface);
	color: var(--sv-text-primary);
	font-size: 16px;
}
.sv-input:focus { border-color: var(--sv-primary); outline: none; }
.sv-label { display: block; font-size: 14px; color: var(--sv-text-secondary); margin-bottom: 8px; }
.sv-error { font-size: 14px; color: var(--sv-rise); margin-top: 8px; }