/*
 * 옛 글 → 도구 안내 상자 「설치 없이 웹에서 바로」 (modules/seo/seo.php oppadu_tools_crosslink_html)
 *
 * 자료실 상단(회색 띠 위)·강의 노트·쇼츠 노트 본문에 같은 상자가 들어간다 — 세 곳 모두 앞단이라
 * tokens.css 가 실린다. 폴백은 정본과 같은 값이다.
 * v3: 카드 8px · 테두리만(그림자 없음) · 좌측 컬러바 없음 · 마우스 올림은 바탕만.
 * 아이콘 타일은 정사각의 25%(36/9px) — 도구 아이콘 곡률 규칙.
 * 본문 링크 규칙(밑줄·색)이 새지 않게 상자 안 글자는 전부 여기서 다시 정한다.
 */

.otx {
	margin: 16px 0;
}

.otx .otx-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--surface-white, #ffffff);
	border: 1px solid var(--gray-200, #e7e7e7);
	border-radius: 8px;
	color: var(--text-primary, #343434);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.otx .otx-link:hover {
	background: var(--gray-50, #f7f7f7);
	color: var(--text-primary, #343434);
	text-decoration: none;
}

.otx .otx-link:focus-visible {
	outline: 2px solid var(--primary, #037450);
	outline-offset: 2px;
}

.otx .otx-ico {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	overflow: hidden;
	background: var(--primary-50, #E4EFEA);
	color: var(--primary-700, #036546);
}

/* 업로드 아이콘은 자기 바탕을 가진다 — 타일 바탕을 비운다(셸·자료실과 같은 규칙) */
.otx .otx-ico[data-otl-ico="img"] {
	background: none;
}

.otx .otx-ico img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}

.otx .otx-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.otx .otx-eyebrow {
	font-size: 12px;
	line-height: 1.4;
	color: var(--text-muted, #727272);
}

.otx .otx-name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--text-primary, #343434);
}

.otx .otx-desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-secondary, #545454);
}

.otx .otx-cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary, #037450);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.otx .otx-link {
		transition: none;
	}
}