// 종목 목록 (/stock) — 고밀도 선/테이블 클래식 (d6 §5.1, 카드 금지·얇은 선만)
#stock {
	padding: var(--sp-6) var(--sp-7);

	@media (max-width: 767.98px) {
		padding: var(--sp-5) var(--sp-4);
	}

	.stock__head {
		display: flex;
		align-items: baseline;
		gap: var(--sp-4);
		margin-bottom: var(--sp-5);

		h1 {
			font-size: var(--fs-2xl);
			font-weight: 700;
			color: var(--text-primary);
		}
	}

	.stock__basis {
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	// 시장 탭 + 검색 컨트롤 행 — mobile 1열 스택
	.stock__controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-4);
		margin-bottom: var(--sp-4);
		border-bottom: 1px solid var(--border-default);

		@media (max-width: 767.98px) {
			flex-direction: column;
			align-items: stretch;
		}
	}

	.stock__tabs {
		display: flex;
		gap: var(--sp-1);

		a {
			display: inline-block;
			padding: var(--sp-3) var(--sp-5);
			font-size: var(--fs-base);
			color: var(--text-secondary);
			border-bottom: 2px solid transparent;

			&:hover {
				color: var(--text-primary);
			}

			&[aria-current='page'] {
				color: var(--text-primary);
				font-weight: 600;
				border-bottom-color: var(--az-accent);
			}
		}
	}

	.stock__search {
		display: flex;
		gap: var(--sp-3);
		padding-bottom: var(--sp-3);

		input {
			width: 220px;
			height: 32px;
			padding: 0 var(--sp-4);
			font-size: var(--fs-sm);
			color: var(--text-primary);
			background: var(--bg-input);
			border: 1px solid var(--border-strong);
			border-radius: 6px;

			&::placeholder {
				color: var(--text-muted);
			}

			@media (max-width: 767.98px) {
				flex: 1 1 auto;
				width: auto;
			}
		}

		button {
			height: 32px;
			padding: 0 var(--sp-5);
			font-size: var(--fs-sm);
			color: var(--btn-primary-text);
			background: var(--btn-primary);
			border-radius: 6px;

			&:hover {
				background: var(--btn-primary-hover);
			}
		}
	}

	// 고밀도 테이블 — 행 구분 하단 1px 선만 (세로선·zebra 없음), 밀도 변수 소비
	.stock__table {
		width: 100%;
		border-collapse: collapse;

		caption {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip: rect(0 0 0 0);
			white-space: nowrap;
		}

		thead th {
			position: sticky;
			top: 0;
			height: var(--row-h);
			padding: 0 var(--cell-px);
			font-size: var(--cell-fs);
			font-weight: 600;
			color: var(--text-muted);
			text-align: right;
			background: var(--bg-elevated);
			border-bottom: 1px solid var(--border-strong);

			&:first-child {
				text-align: left;
			}

			&.stock__col--market {
				text-align: center;
			}

			small {
				font-weight: 400;
				color: var(--text-muted);
			}
		}

		tbody td {
			height: var(--row-h);
			padding: 0 var(--cell-px);
			font-size: var(--cell-fs);
			color: var(--text-primary);
			text-align: right;
			border-bottom: 1px solid var(--border-light);
			font-variant-numeric: tabular-nums;
			white-space: nowrap;

			&:first-child {
				text-align: left;
			}

			&.stock__col--market {
				text-align: center;
			}
		}

		tbody tr:hover {
			background: var(--bg-subtle-hover);
		}

		// 우선순위 낮은 열 — mobile drop (d6 §5.1)
		@media (max-width: 767.98px) {
			.stock__col--cap {
				display: none;
			}
		}
	}

	.stock__name {
		max-width: 0;
		width: 40%;

		a {
			display: flex;
			align-items: center;
			gap: var(--sp-3);
			min-height: var(--row-h);
			color: var(--text-primary);

			&:hover .stock__name-text {
				text-decoration: underline;
			}
		}
	}

	.stock__name-text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.stock__code {
		flex: 0 0 auto;
		font-size: var(--fs-xs);
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;
	}

	.stock__total {
		margin: var(--sp-3) 0;
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	// 빈 목록 / 에러
	.stock__empty,
	.stock__error {
		padding: var(--sp-7) var(--sp-5);
		font-size: var(--fs-base);
		color: var(--text-muted);
		text-align: center;
		border-bottom: 1px solid var(--border-light);
	}

	.stock__error strong {
		display: block;
		margin-bottom: var(--sp-3);
		color: var(--text-secondary);
	}
}