/*!
 * OneUp Simple Portfolio — 프론트 스타일 (TRD §12)
 *
 * 규칙: 특이도 상한 (0,2,0) / !important 0건(.ousp-sr 예외) / 전역 요소 선택자 0건 /
 *       모든 값은 --ousp-* 토큰. 브랜드 적용은 .ousp 변수 재정의 한 줄로 끝난다.
 */

/* ── 토큰 ─────────────────────────────────────────────── */
.ousp {
	--ousp-accent: #1a5fb4;
	--ousp-title-color: #111827;
	--ousp-text-color: #4b5563;
	--ousp-label-color: #6b7280;
	--ousp-title-size: 1.125rem;
	--ousp-text-size: 0.9375rem;

	--ousp-cols: 3;
	--ousp-cols-tablet: 2;
	--ousp-cols-mobile: 1;
	--ousp-gap: 24px;

	--ousp-image-ratio: 4 / 3;
	--ousp-image-radius: 12px;
	--ousp-image-position: center top;
	--ousp-image-bg: #f3f4f6;
	--ousp-hover-scale: 1.04;

	--ousp-card-bg: transparent;
	--ousp-card-radius: 12px;
	--ousp-card-border: 0;
	--ousp-card-shadow: none;
	--ousp-card-padding: 0;

	--ousp-overlay-bg: rgba(17, 24, 39, 0.72);
	--ousp-overlay-color: #ffffff;

	--ousp-list-media: 40%;
	--ousp-list-padding: 28px;
	--ousp-list-title-size: calc(var(--ousp-title-size) * 1.15);
	--ousp-divider: #e5e7eb;
	--ousp-action-size: 56px;
	--ousp-action-bg: #f3f4f6;
	--ousp-action-color: var(--ousp-title-color);

	--ousp-btn-bg: var(--ousp-accent);
	--ousp-btn-color: #ffffff;
	--ousp-btn-bg-hover: var(--ousp-btn-bg);
	--ousp-btn-radius: 8px;
	--ousp-btn-padding: 0.625rem 1.25rem;
	--ousp-btn-border: 1px solid transparent;

	--ousp-page-color: var(--ousp-text-color);
	--ousp-page-active-bg: var(--ousp-accent);
	--ousp-page-active-color: #ffffff;
	--ousp-page-size: 2.75rem;

	--ousp-filter-color: var(--ousp-text-color);
	--ousp-filter-active: var(--ousp-accent);

	--ousp-modal-width: 720px;
	--ousp-modal-max-height: min(90vh, 900px);
	--ousp-modal-padding: 32px;
	--ousp-modal-bg: #ffffff;
	--ousp-modal-radius: 16px;
	--ousp-modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	--ousp-modal-backdrop: rgba(0, 0, 0, 0.6);
	--ousp-modal-close-size: 44px;
	--ousp-modal-close-color: #111827;
	--ousp-modal-image-ratio: 16 / 10;

	--ousp-space: 16px;
	--ousp-focus: 2px solid var(--ousp-accent);
	--ousp-duration: 250ms;
}

@supports (color: color-mix(in srgb, red 50%, black)) {
	.ousp {
		--ousp-btn-bg-hover: color-mix(in srgb, var(--ousp-btn-bg) 88%, #000);
	}
}

/* ── 기반 ─────────────────────────────────────────────── */
.ousp {
	color: var(--ousp-text-color);
	font-size: var(--ousp-text-size);
	scroll-margin-top: 2rem;
}

.ousp__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ousp-media,
.ousp-card__title,
.ousp-item__title,
.ousp-card__summary,
.ousp-card__meta,
.ousp-item__summary {
	margin: 0;
}

.ousp-meta,
.ousp-meta__row,
.ousp-meta__label,
.ousp-meta__value {
	margin: 0;
	padding: 0;
}

.ousp-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.ousp :focus-visible {
	outline: var(--ousp-focus);
	outline-offset: 2px;
}

/* ── 이미지 ───────────────────────────────────────────── */
.ousp-media {
	position: relative;
	display: block;
	aspect-ratio: var(--ousp-image-ratio);
	border-radius: var(--ousp-image-radius);
	overflow: hidden;
	background: var(--ousp-image-bg);
	text-decoration: none;
}

.ousp-media--button {
	width: 100%;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: var(--ousp-image-bg);
}

.ousp-media__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--ousp-image-position);
	transition: transform var(--ousp-duration) ease;
}

.ousp-media__img--placeholder {
	object-fit: cover;
	opacity: 0.6;
}

/* 이미지 비율 "원본" — 비율 박스를 쓰지 않고 너비에 맞춰 높이가 따라온다.
   <img> 에 width/height 속성이 있으므로 CSS 가 늦게 와도 레이아웃은 밀리지 않는다. */
.ousp--ratio-auto .ousp-media {
	aspect-ratio: auto;
}

.ousp--ratio-auto .ousp-media__img {
	height: auto;
	object-fit: initial;
}

/* ── Grid ─────────────────────────────────────────────── */
.ousp--grid .ousp__list {
	display: grid;
	grid-template-columns: repeat(var(--ousp-cols), minmax(0, 1fr));
	gap: var(--ousp-gap);
}

.ousp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ousp-space);
	background: var(--ousp-card-bg);
	border: var(--ousp-card-border);
	border-radius: var(--ousp-card-radius);
	box-shadow: var(--ousp-card-shadow);
	padding: var(--ousp-card-padding);
}

.ousp-card__title {
	color: var(--ousp-title-color);
	font-size: var(--ousp-title-size);
	line-height: 1.45;
	word-break: keep-all;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ousp-card--simple .ousp-card__title {
	text-align: center;
}

.ousp-card__link {
	color: inherit;
	text-decoration: none;
}

/* 카드 전체를 클릭 영역으로 확장 — Tab 정지는 1회 유지 */
.ousp-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ousp-card__link:focus-visible {
	outline: none;
}

.ousp-card:has(.ousp-card__link:focus-visible) {
	outline: var(--ousp-focus);
	outline-offset: 4px;
}

@supports not selector(:has(*)) {
	.ousp-card__link:focus-visible {
		outline: var(--ousp-focus);
		outline-offset: 2px;
	}
}

.ousp-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ousp-card__summary {
	color: var(--ousp-text-color);
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3.2em;
}

.ousp-card__meta {
	color: var(--ousp-label-color);
	font-size: 0.875em;
}

/* Grid Overlay */
.ousp-card--overlay {
	gap: 0;
}

.ousp-card--overlay .ousp-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 20px;
	color: var(--ousp-overlay-color);
	background: var(--ousp-overlay-bg);
	opacity: 0;
	transition: opacity var(--ousp-duration) ease;
}

.ousp-card--overlay .ousp-card__title,
.ousp-card--overlay .ousp-card__summary {
	color: var(--ousp-overlay-color);
}

.ousp-card--overlay .ousp-card__summary {
	min-height: 0;
}

.ousp-card--overlay:focus-within .ousp-card__overlay {
	opacity: 1;
}

/* ── List ─────────────────────────────────────────────── */
.ousp--list {
	container-type: inline-size;
	container-name: ousp-list;
}

.ousp--list .ousp__list {
	display: flex;
	flex-direction: column;
}

/*
 * 행 사이 리듬은 gap 이 아니라 "안쪽 여백 + 구분선" 으로 만든다.
 * 이미지 높이가 제각각이어도(원본 비율) 행 간격이 일정하게 유지된다.
 */
.ousp-item {
	display: grid;
	grid-template-columns: var(--ousp-list-media) minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(20px, 3cqi, 48px);
	padding-block: var(--ousp-list-padding);
	border-block-end: 1px solid var(--ousp-divider);
}

.ousp--list .ousp__list > .ousp-item:first-child {
	padding-block-start: 0;
}

.ousp--list .ousp__list > .ousp-item:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.ousp-item__media {
	min-width: 0;
}

.ousp-item__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.ousp-item__title {
	color: var(--ousp-title-color);
	font-size: var(--ousp-list-title-size);
	font-weight: 700;
	line-height: 1.35;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.ousp-item__title a {
	color: inherit;
	text-decoration: none;
}

.ousp-item__title a:hover {
	color: var(--ousp-accent);
}

.ousp-item__title-button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.ousp-item__summary,
.ousp-item__details {
	color: var(--ousp-text-color);
	line-height: 1.7;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.ousp-item__details p {
	margin: 0 0 0.75em;
}

/* 액션은 본문과 분리된 세 번째 칸 — 행 높이와 무관하게 세로 가운데에 선다. */
.ousp-item__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.ousp-item__panel .ousp-item__actions {
	justify-content: flex-start;
}

/* ── 정보 행 ──────────────────────────────────────────── */
.ousp-meta {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: var(--ousp-text-size);
}

.ousp-meta__row {
	display: grid;
	grid-template-columns: minmax(4.5rem, max-content) 1fr;
	gap: 0.75rem;
}

.ousp-meta__label {
	color: var(--ousp-label-color);
	font-weight: 500;
}

.ousp-meta__value {
	color: var(--ousp-text-color);
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/*
 * 리스트에서는 라벨을 값 위에 올리고 항목을 가로로 늘어놓는다 — 마크업은 그대로 두고
 * 배치만 바꾸므로 토글·모달과 정보 행 마크업 SSOT 가 유지된다.
 */
.ousp--list .ousp-meta {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px 0;
}

.ousp--list .ousp-meta__row {
	display: block;
	padding-inline: clamp(14px, 2cqi, 26px);
	border-inline-start: 1px solid var(--ousp-divider);
}

.ousp--list .ousp-meta__row:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.ousp--list .ousp-meta__label {
	display: block;
	margin-block-end: 6px;
	color: var(--ousp-label-color);
	font-size: 0.875em;
	font-weight: 400;
	line-height: 1.4;
}

.ousp--list .ousp-meta__value {
	display: block;
	color: var(--ousp-title-color);
	font-weight: 500;
	line-height: 1.4;
}

/* 펼침 패널 안에서는 다시 세로로 — 좁은 영역이라 가로 배치가 접힌다. */
.ousp--list .ousp-item__panel .ousp-meta {
	flex-direction: column;
	gap: 0.25rem;
}

.ousp--list .ousp-item__panel .ousp-meta__row {
	display: grid;
	grid-template-columns: minmax(4.5rem, max-content) 1fr;
	gap: 0.75rem;
	padding-inline: 0;
	border-inline-start: 0;
}

.ousp--list .ousp-item__panel .ousp-meta__label {
	margin-block-end: 0;
	font-size: 1em;
	font-weight: 500;
}

.ousp--list .ousp-item__panel .ousp-meta__value {
	color: var(--ousp-text-color);
	font-weight: 400;
}

/* ── 버튼 ─────────────────────────────────────────────── */
.ousp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: var(--ousp-btn-padding);
	border: var(--ousp-btn-border);
	border-radius: var(--ousp-btn-radius);
	background: var(--ousp-btn-bg);
	color: var(--ousp-btn-color);
	font-size: var(--ousp-text-size);
	font-family: inherit;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ousp-duration) ease;
}

.ousp-btn:hover {
	background: var(--ousp-btn-bg-hover);
	color: var(--ousp-btn-color);
}

.ousp-btn--loadmore {
	background: transparent;
	color: var(--ousp-accent);
	border-color: currentColor;
}

.ousp-btn--loadmore:hover {
	background: var(--ousp-accent);
	color: var(--ousp-btn-color);
}

.ousp-btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* 원형 아이콘 버튼 — 문구는 .ousp-sr 로 남으므로 스크린리더에서는 그대로 읽힌다. */
.ousp-btn--icon {
	width: var(--ousp-action-size);
	height: var(--ousp-action-size);
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ousp-action-bg);
	color: var(--ousp-action-color);
	flex: 0 0 auto;
	transition: background-color var(--ousp-duration) ease, color var(--ousp-duration) ease;
}

.ousp-btn--icon:hover {
	background: var(--ousp-btn-bg);
	color: var(--ousp-btn-color);
}

/*
 * 본문 안 상세보기 — 사이트 보기(원형 화살표)가 주 동작이므로 여기는 버튼 꼴을 벗기고
 * 텍스트로 둔다.
 */
.ousp-item__trigger {
	margin: 0;
}

.ousp-item__trigger .ousp-btn {
	min-height: 0;
	gap: 6px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ousp-accent);
	font-weight: 500;
}

.ousp-item__trigger .ousp-btn:hover {
	background: none;
	color: var(--ousp-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ── 아이콘 ───────────────────────────────────────────── */
.ousp-icon {
	position: relative;
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	flex: 0 0 auto;
}

.ousp-icon--arrow {
	width: 1.05em;
	height: 1.05em;
}

.ousp-icon--arrow::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 6%;
	width: 76%;
	height: 1.5px;
	background: currentColor;
	transform: translateY(-50%);
}

.ousp-icon--arrow::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 8%;
	width: 0.42em;
	height: 0.42em;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

.ousp-icon--close::before,
.ousp-icon--close::after {
	content: "";
	position: absolute;
	inset-inline: 10%;
	top: 50%;
	height: 2px;
	background: currentColor;
}

.ousp-icon--close::before {
	transform: rotate(45deg);
}

.ousp-icon--close::after {
	transform: rotate(-45deg);
}

/* ── 페이징 ───────────────────────────────────────────── */
.ousp__pagination:empty {
	display: none;
}

.ousp-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: calc(var(--ousp-gap) * 1.25);
}

.ousp-pagination--prevnext {
	justify-content: space-between;
	gap: 1rem;
}

.ousp-pagination--number ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ousp-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ousp-page-size);
	min-height: var(--ousp-page-size);
	padding-inline: 0.5rem;
	border-radius: var(--ousp-btn-radius);
	color: var(--ousp-page-color);
	text-decoration: none;
	transition: background-color var(--ousp-duration) ease;
}

.ousp-page:hover {
	background: var(--ousp-image-bg);
	color: var(--ousp-page-color);
}

.ousp-page.is-current {
	background: var(--ousp-page-active-bg);
	color: var(--ousp-page-active-color);
	font-weight: 600;
}

.ousp-page.is-disabled {
	opacity: 0.4;
	cursor: default;
}

.ousp-page--gap:hover {
	background: none;
}

.ousp-page__status {
	color: var(--ousp-label-color);
	font-size: 0.875em;
}

/* ── 필터 탭 ──────────────────────────────────────────── */
.ousp-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin-bottom: var(--ousp-gap);
}

.ousp-filter__tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 0.25rem;
	border: 0;
	background: none;
	color: var(--ousp-filter-color);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.ousp-filter__tab.is-active {
	color: var(--ousp-filter-active);
	font-weight: 600;
}

.ousp-filter__tab.is-active::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 6px;
	height: 2px;
	background: currentColor;
}

/* ── 상태 ─────────────────────────────────────────────── */
.ousp-empty:empty {
	display: none;
}

.ousp-empty {
	padding: 2rem 0;
	color: var(--ousp-label-color);
	text-align: center;
}

.ousp-empty__text {
	margin: 0;
}

.ousp-adminhint {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-inline-start: 3px solid #d63638;
	border-radius: 4px;
	background: #fcf0f1;
	color: #1d2327;
	font-size: 0.8125rem;
	line-height: 1.6;
}

.ousp--loading .ousp__list {
	opacity: 0.55;
	transition: opacity 150ms ease;
}

/* ── 모달 ─────────────────────────────────────────────── */
.ousp-modal {
	padding: 0;
	border: 0;
	background: transparent;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	overflow: visible;
}

.ousp-modal::backdrop {
	background: var(--ousp-modal-backdrop);
	opacity: 0;
	transition: opacity 200ms ease;
}

.ousp-modal.is-open::backdrop {
	opacity: 1;
}

.ousp-modal__frame {
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(var(--ousp-modal-width), calc(100% - 24px));
	max-height: var(--ousp-modal-max-height);
	height: fit-content;
	display: grid;
	grid-template-rows: 1fr;
	background: var(--ousp-modal-bg);
	border-radius: var(--ousp-modal-radius);
	box-shadow: var(--ousp-modal-shadow);
	overflow: hidden;
}

.ousp-modal__close {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 8px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ousp-modal-close-size);
	height: var(--ousp-modal-close-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ousp-modal-bg);
	color: var(--ousp-modal-close-color);
	cursor: pointer;
}

.ousp-modal__close .ousp-icon {
	width: 1rem;
	height: 1rem;
}

.ousp-modal__content {
	display: flex;
	flex-direction: column;
	gap: var(--ousp-space);
	padding: var(--ousp-modal-padding);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ousp-modal__media {
	margin: 0;
	aspect-ratio: var(--ousp-modal-image-ratio);
	border-radius: var(--ousp-image-radius);
	overflow: hidden;
	background: var(--ousp-image-bg);
	flex: 0 0 auto;
}

.ousp-modal__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ousp-modal__title {
	margin: 0;
	color: var(--ousp-title-color);
	font-size: calc(var(--ousp-title-size) * 1.25);
	line-height: 1.4;
	word-break: keep-all;
}

.ousp-modal__title:focus-visible {
	outline: var(--ousp-focus);
	outline-offset: 4px;
}

.ousp-modal__terms {
	margin: 0;
	color: var(--ousp-label-color);
	font-size: 0.875em;
}

/*
 * 모달 정보 행 — 리스트와 같은 결(라벨 위, 값 아래)로 맞춘다. 좁은 폭이라 가로 한 줄
 * 대신 자동 줄바꿈 그리드를 쓴다. 리스트 규칙(.ousp--list .ousp-meta)과 특이도가 같으므로
 * 이 블록이 뒤에 와야 이긴다 — 순서를 바꾸지 말 것.
 */
.ousp-modal__content .ousp-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 14px 20px;
	padding-block: 16px;
	border-block: 1px solid var(--ousp-divider);
}

.ousp-modal__content .ousp-meta__row {
	display: block;
	padding-inline: 0;
	border-inline-start: 0;
}

.ousp-modal__content .ousp-meta__label {
	display: block;
	margin-block-end: 4px;
	color: var(--ousp-label-color);
	font-size: 0.875em;
	font-weight: 400;
}

.ousp-modal__content .ousp-meta__value {
	display: block;
	color: var(--ousp-title-color);
	font-weight: 500;
}

.ousp-modal__summary,
.ousp-modal__details {
	margin: 0;
	color: var(--ousp-text-color);
	line-height: 1.7;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.ousp-modal__details p {
	margin: 0 0 0.75em;
}

.ousp-modal__footer {
	display: flex;
	justify-content: flex-end;
	flex: 0 0 auto;
}

/* 애니메이션 3종 — CSS transition 만 사용한다 (라이브러리 0) */
.ousp-modal--anim-fade .ousp-modal__frame {
	opacity: 0;
	transition: opacity var(--ousp-duration) ease;
}

.ousp-modal--anim-scale .ousp-modal__frame {
	opacity: 0;
	transform: scale(0.96);
	transition: opacity var(--ousp-duration) ease, transform var(--ousp-duration) ease;
}

.ousp-modal--anim-slide .ousp-modal__frame {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--ousp-duration) ease, transform var(--ousp-duration) ease;
}

.ousp-modal.is-open .ousp-modal__frame {
	opacity: 1;
	transform: none;
}

/* 폴백: <dialog> 미지원 브라우저는 트리거가 토글로 강등된다 (TRD §D-18) */
.ousp-fallback-panel {
	margin-top: var(--ousp-space);
	padding: var(--ousp-space);
	border: 1px solid var(--ousp-image-bg);
	border-radius: var(--ousp-card-radius);
}

body.ousp-scroll-locked {
	position: fixed;
	inset-inline: 0;
	top: var(--ousp-lock-top, 0);
	padding-right: var(--ousp-sbw, 0);
	overflow: hidden;
	width: 100%;
}

/* ── 반응형 (모든 @media 를 마지막에 모은다) ───────────── */

/* 마우스 기기에서만 hover 연출 — 터치 기기는 오버레이 상시 표시 (R-07) */
@media (hover: hover) and (pointer: fine) {
	.ousp-card.has-link:hover .ousp-media__img {
		transform: scale(var(--ousp-hover-scale));
	}

	.ousp-card--simple.has-link:hover .ousp-card__title,
	.ousp-card--text.has-link:hover .ousp-card__title {
		color: var(--ousp-accent);
	}

	.ousp-card--overlay:hover .ousp-card__overlay {
		opacity: 1;
	}

	.ousp-item.has-link:hover .ousp-media__img {
		transform: scale(var(--ousp-hover-scale));
	}
}

@media (hover: none), (pointer: coarse) {
	.ousp-card--overlay .ousp-card__overlay {
		opacity: 1;
		background: linear-gradient(to top, var(--ousp-overlay-bg) 0%, transparent 60%);
	}

	.ousp-card--overlay .ousp-card__summary {
		display: none;
	}
}

/* List 세로 전환 — 목록이 놓인 영역의 폭 기준 (사이드바·2단 컬럼 대응) */
@container ousp-list (max-width: 680px) {
	.ousp-item {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 18px;
	}

	.ousp-item__actions {
		justify-content: flex-start;
	}

	.ousp--list .ousp-meta__row {
		padding-inline-start: 0;
		border-inline-start: 0;
		padding-inline-end: clamp(16px, 4cqi, 32px);
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 680px) {
		.ousp-item {
			grid-template-columns: 1fr;
			align-items: start;
			gap: 18px;
		}

		.ousp-item__actions {
			justify-content: flex-start;
		}
	}
}

/* Tablet
 *
 * 구간별 열 수는 변수를 재할당하지 않고 **속성을 직접 바꾼다.**
 * 인스턴스 설정은 루트의 인라인 style 로 들어오는데(--ousp-cols 등), 인라인은 미디어쿼리를
 * 포함한 모든 스타일시트 규칙을 이기기 때문에 `.ousp { --ousp-cols: … }` 로 덮어쓸 수 없다.
 * 인라인은 "값"만 공급하고, 어느 값을 쓸지는 여기서 정한다. */
@media (max-width: 1024px) {
	.ousp--grid .ousp__list {
		grid-template-columns: repeat(var(--ousp-cols-tablet), minmax(0, 1fr));
	}

	.ousp-modal__frame {
		width: min(var(--ousp-modal-width), 90%);
	}
}

/* Mobile */
@media (max-width: 639px) {
	.ousp {
		--ousp-modal-padding: 20px;
	}

	.ousp--grid .ousp__list {
		grid-template-columns: repeat(var(--ousp-cols-mobile), minmax(0, 1fr));
		/* 변수 자기 참조(--ousp-gap: min(…, var(--ousp-gap)))는 CSS 에서 무효값이 된다.
		   속성에서 직접 계산한다. */
		gap: min(16px, var(--ousp-gap));
	}

	.ousp-meta__row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* 헤더·푸터 고정 + 본문만 스크롤 (D-20) */
	.ousp-modal__frame {
		width: calc(100% - 24px);
		max-height: calc(100dvh - 24px);
		height: auto;
	}

	/* 본문만 스크롤하고 사이트 보기 버튼은 하단에 붙어 있게 한다 (PRD 13.3).
	   sticky 는 스크롤 컨테이너 기준이라 dvh 계산 없이 동작한다. */
	.ousp-modal__footer {
		position: sticky;
		bottom: calc(var(--ousp-modal-padding) * -1);
		margin: 0 calc(var(--ousp-modal-padding) * -1) calc(var(--ousp-modal-padding) * -1);
		padding: 12px 20px;
		border-top: 1px solid var(--ousp-image-bg);
		background: var(--ousp-modal-bg);
	}

	.ousp-modal__footer .ousp-btn {
		width: 100%;
	}

	/* 닫기 버튼이 첫 줄 텍스트를 가리지 않도록 여백을 준다. */
	.ousp-modal__content {
		padding-top: calc(var(--ousp-modal-close-size) * 0.75);
	}

	/* 모바일에서는 Slide Up 이 자연스럽다 */
	.ousp-modal .ousp-modal__frame {
		transform: translateY(24px);
	}

	.ousp-modal.is-open .ousp-modal__frame {
		transform: none;
	}

	.ousp-pagination--prevnext {
		gap: 0.5rem;
	}
}

@supports not (height: 100dvh) {
	@media (max-width: 639px) {
		.ousp-modal__frame {
			max-height: calc(100vh - 24px);
		}
	}
}

/* 모션 감소 */
@media (prefers-reduced-motion: reduce) {
	.ousp {
		--ousp-duration: 0ms;
		--ousp-hover-scale: 1;
	}

	.ousp-modal::backdrop {
		transition: none;
	}

	.ousp-item__panel {
		transition: none;
	}

	.ousp-modal__frame {
		transition: none;
	}
}