newtil-css 0.2.95 → 0.2.96

package/dist/style.css

@@ -12022,406 +12022,6 @@ Variables 커스터마이징:
 	}
 }
 /* ===== ACCESSIBILITY (접근성) ===== */
-/* ===== SCREEN READER UTILITIES ===== */
-/* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
-/* 스크린 리더 접근성: 시각적으로 숨기기, 스크린 리더 전용 텍스트 등 */
-/* ===== VISUALLY HIDDEN (시각적으로 숨기기) ===== */
-/* 스크린 리더에서는 읽히지만 시각적으로는 숨김 */
-.visually-hidden,
-.sr-only {
-	position: absolute !important;
-	width: 1px !important;
-	height: 1px !important;
-	padding: 0 !important;
-	margin: -1px !important;
-	overflow: hidden !important;
-	clip: rect(0, 0, 0, 0) !important;
-	white-space: nowrap !important;
-	border: 0 !important;
-}
-/* 포커스될 때만 보이는 숨김 요소 */
-.visually-hidden-focusable,
-.sr-only-focusable {
-	position: absolute !important;
-	width: 1px !important;
-	height: 1px !important;
-	padding: 0 !important;
-	margin: -1px !important;
-	overflow: hidden !important;
-	clip: rect(0, 0, 0, 0) !important;
-	white-space: nowrap !important;
-	border: 0 !important;
-}
-.visually-hidden-focusable:focus,
-.sr-only-focusable:focus {
-	position: static !important;
-	width: auto !important;
-	height: auto !important;
-	padding: var(--space-2) var(--space-4) !important;
-	margin: 0 !important;
-	overflow: visible !important;
-	clip: auto !important;
-	white-space: normal !important;
-	background-color: var(--color-main-1) !important;
-	color: var(--color-white) !important;
-	border-radius: var(--radius-sm) !important;
-	box-shadow: var(--shadow-lg) !important;
-	z-index: var(--z-index-tooltip) !important;
-}
-/* ===== SCREEN READER ONLY TEXT (스크린 리더 전용 텍스트) ===== */
-/* 아이콘에 대한 설명 텍스트 */
-.icon-description,
-.sr-description {
-	position: absolute !important;
-	width: 1px !important;
-	height: 1px !important;
-	padding: 0 !important;
-	margin: -1px !important;
-	overflow: hidden !important;
-	clip: rect(0, 0, 0, 0) !important;
-	white-space: nowrap !important;
-	border: 0 !important;
-}
-/* 링크에 대한 추가 설명 */
-.link-description,
-.sr-link-text {
-	position: absolute !important;
-	width: 1px !important;
-	height: 1px !important;
-	padding: 0 !important;
-	margin: -1px !important;
-	overflow: hidden !important;
-	clip: rect(0, 0, 0, 0) !important;
-	white-space: nowrap !important;
-	border: 0 !important;
-}
-/* ===== ARIA ATTRIBUTES SUPPORT (ARIA 속성 지원) ===== */
-/* aria-hidden="true" 요소 스타일링 */
-[aria-hidden="true"] {
-	display: none !important;
-}
-/* aria-expanded 상태 표시 */
-[aria-expanded="false"] .collapse-icon {
-	transform: rotate(0deg) !important;
-	transition: transform var(--duration-fast) var(--ease-out) !important;
-}
-[aria-expanded="true"] .collapse-icon {
-	transform: rotate(180deg) !important;
-	transition: transform var(--duration-fast) var(--ease-out) !important;
-}
-/* aria-disabled 상태 스타일링 */
-[aria-disabled="true"] {
-	opacity: var(--opacity-50) !important;
-	cursor: not-allowed !important;
-	pointer-events: none !important;
-}
-/* aria-selected 상태 스타일링 */
-[aria-selected="true"] {
-	background-color: var(--color-main-1) !important;
-	color: var(--color-white) !important;
-}
-[aria-selected="false"] {
-	background-color: transparent !important;
-	color: var(--color-base-7) !important;
-}
-/* aria-current 상태 스타일링 */
-[aria-current="page"],
-[aria-current="step"],
-[aria-current="location"] {
-	background-color: var(--color-accent-1) !important;
-	color: var(--color-white) !important;
-	font-weight: var(--font-weight-semibold) !important;
-}
-/* ===== SKIP LINKS (스킵 링크) ===== */
-/* 메인 컨텐츠로 건너뛰기 링크 */
-.skip-link {
-	position: absolute !important;
-	top: -40px !important;
-	left: var(--space-4) !important;
-	background: var(--color-base-9) !important;
-	color: var(--color-white) !important;
-	padding: var(--space-2) var(--space-4) !important;
-	text-decoration: none !important;
-	border-radius: var(--radius-sm) !important;
-	z-index: var(--z-index-tooltip) !important;
-	transition: top var(--duration-fast) var(--ease-out) !important;
-}
-.skip-link:focus {
-	top: var(--space-4) !important;
-}
-/* 네비게이션 스킵 링크들 */
-.skip-links {
-	position: absolute !important;
-	top: 0 !important;
-	left: 0 !important;
-	z-index: var(--z-index-modal) !important;
-}
-.skip-links a {
-	position: absolute !important;
-	top: -40px !important;
-	left: var(--space-4) !important;
-	background: var(--color-base-9) !important;
-	color: var(--color-white) !important;
-	padding: var(--space-2) var(--space-4) !important;
-	text-decoration: none !important;
-	border-radius: var(--radius-sm) !important;
-	transition: top var(--duration-fast) var(--ease-out) !important;
-	margin-right: var(--space-2) !important;
-}
-.skip-links a:focus {
-	top: var(--space-4) !important;
-}
-/* ===== LANDMARK REGIONS (랜드마크 영역) ===== */
-/* 메인 컨텐츠 영역 표시 */
-main[role="main"],
-[role="main"],
-.main-content {
-	scroll-margin-top: var(
-		--space-20
-	) !important; /* 고정 헤더를 위한 스크롤 마진 */
-}
-/* 네비게이션 영역 */
-nav[role="navigation"],
-[role="navigation"],
-.navigation {
-	position: relative !important;
-}
-/* 배너 영역 (헤더) */
-header[role="banner"],
-[role="banner"],
-.site-header {
-	position: relative !important;
-}
-/* 콘텐츠 정보 영역 (푸터) */
-footer[role="contentinfo"],
-[role="contentinfo"],
-.site-footer {
-	position: relative !important;
-}
-/* 보완 영역 (사이드바) */
-aside[role="complementary"],
-[role="complementary"],
-.sidebar {
-	position: relative !important;
-}
-/* ===== FORM ACCESSIBILITY (폼 접근성) ===== */
-/* 필수 입력 필드 표시 */
-[aria-required="true"],
-[required] {
-	position: relative !important;
-}
-[aria-required="true"]::after,
-[required]::after {
-	content: " *" !important;
-	color: var(--color-danger-1) !important;
-	font-weight: var(--font-weight-bold) !important;
-}
-/* 에러 상태 표시 */
-[aria-invalid="true"] {
-	border-color: var(--color-danger-1) !important;
-	box-shadow: 0 0 0 2px rgba(var(--rgb-danger-1), 0.2) !important;
-}
-/* 에러 메시지 스타일링 */
-.error-message,
-[role="alert"],
-.alert-error {
-	color: var(--color-danger-1) !important;
-	background-color: rgba(var(--rgb-danger-1), 0.1) !important;
-	border: 1px solid var(--color-danger-1) !important;
-	border-radius: var(--radius-sm) !important;
-	padding: var(--space-2) var(--space-3) !important;
-	margin-top: var(--space-1) !important;
-	font-size: var(--font-size-sm) !important;
-}
-/* 성공 메시지 스타일링 */
-.success-message,
-.alert-success {
-	color: var(--color-success-1) !important;
-	background-color: rgba(var(--rgb-success-1), 0.1) !important;
-	border: 1px solid var(--color-success-1) !important;
-	border-radius: var(--radius-sm) !important;
-	padding: var(--space-2) var(--space-3) !important;
-	margin-top: var(--space-1) !important;
-	font-size: var(--font-size-sm) !important;
-}
-/* 경고 메시지 스타일링 */
-.warning-message,
-.alert-warning {
-	color: var(--color-warning-1) !important;
-	background-color: rgba(var(--rgb-warning-1), 0.1) !important;
-	border: 1px solid var(--color-warning-1) !important;
-	border-radius: var(--radius-sm) !important;
-	padding: var(--space-2) var(--space-3) !important;
-	margin-top: var(--space-1) !important;
-	font-size: var(--font-size-sm) !important;
-}
-/* ===== KEYBOARD NAVIGATION (키보드 네비게이션) ===== */
-/* 키보드 포커스 표시자 */
-.keyboard-focusable {
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
-	transition: outline-color var(--duration-fast) var(--ease-out) !important;
-}
-.keyboard-focusable:focus-visible {
-	outline-color: var(--color-main-1) !important;
-}
-/* 탭 순서 건너뛰기 */
-.skip-tab-order {
-	position: absolute !important;
-	left: -10000px !important;
-	top: auto !important;
-	width: 1px !important;
-	height: 1px !important;
-	overflow: hidden !important;
-}
-/* ===== READING ORDER (읽기 순서) ===== */
-/* 스크린 리더 읽기 순서 조정 */
-.reading-order-1 {
-	order: 1 !important;
-}
-.reading-order-2 {
-	order: 2 !important;
-}
-.reading-order-3 {
-	order: 3 !important;
-}
-.reading-order-4 {
-	order: 4 !important;
-}
-.reading-order-5 {
-	order: 5 !important;
-}
-/* ===== SCREEN READER ANNOUNCEMENTS (스크린 리더 안내) ===== */
-/* 라이브 영역 설정 */
-.live-region-polite,
-[aria-live="polite"] {
-	position: relative !important;
-}
-.live-region-assertive,
-[aria-live="assertive"] {
-	position: relative !important;
-}
-.live-region-off,
-[aria-live="off"] {
-	position: relative !important;
-}
-/* 상태 안내 메시지 */
-.status-message {
-	position: absolute !important;
-	width: 1px !important;
-	height: 1px !important;
-	padding: 0 !important;
-	margin: -1px !important;
-	overflow: hidden !important;
-	clip: rect(0, 0, 0, 0) !important;
-	white-space: nowrap !important;
-	border: 0 !important;
-}
-/* ===== TABLE ACCESSIBILITY (테이블 접근성) ===== */
-/* 테이블 캡션 스타일링 */
-.table-caption,
-caption {
-	text-align: left !important;
-	padding: var(--space-2) var(--space-4) !important;
-	font-weight: var(--font-weight-semibold) !important;
-	background-color: var(--color-base-1) !important;
-	border-bottom: 1px solid var(--color-base-3) !important;
-}
-/* 테이블 헤더 강조 */
-.table-header,
-th {
-	background-color: var(--color-base-2) !important;
-	font-weight: var(--font-weight-semibold) !important;
-	text-align: left !important;
-	padding: var(--space-3) var(--space-4) !important;
-	border-bottom: 2px solid var(--color-base-4) !important;
-}
-/* 데이터 셀 스타일링 */
-.table-cell,
-td {
-	padding: var(--space-3) var(--space-4) !important;
-	border-bottom: 1px solid var(--color-base-3) !important;
-	vertical-align: top !important;
-}
-/* ===== RESPONSIVE ACCESSIBILITY ===== */
-/* 모바일에서 스크린 리더 최적화 */
-@media (max-width: 767px) {
-	.skip-link {
-		left: var(--space-2) !important;
-		padding: var(--space-3) var(--space-4) !important;
-		font-size: var(--font-size-base) !important;
-	}
-
-	.visually-hidden-focusable:focus {
-		padding: var(--space-3) var(--space-4) !important;
-		font-size: var(--font-size-base) !important;
-	}
-}
-/* 큰 화면에서 스킵 링크 위치 조정 */
-@media (min-width: 1024px) {
-	.skip-link {
-		left: var(--space-8) !important;
-	}
-
-	.skip-links a {
-		left: var(--space-8) !important;
-	}
-}
-/* ===== MOTION SENSITIVITY (모션 민감도) ===== */
-/* 모션 감소 선호도 존중 */
-@media (prefers-reduced-motion: reduce) {
-	.visually-hidden-focusable,
-	.skip-link,
-	.skip-links a,
-	[aria-expanded] .collapse-icon {
-		transition: none !important;
-		animation: none !important;
-	}
-}
-/* ===== UTILITY COMBINATIONS ===== */
-/* 접근 가능한 버튼 */
-.accessible-button {
-	position: relative !important;
-	display: inline-flex !important;
-	align-items: center !important;
-	justify-content: center !important;
-	padding: var(--space-2) var(--space-4) !important;
-	background-color: var(--color-main-1) !important;
-	color: var(--color-white) !important;
-	border: none !important;
-	border-radius: var(--radius-sm) !important;
-	cursor: pointer !important;
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
-}
-.accessible-button:focus-visible {
-	outline-color: var(--color-accent-1) !important;
-}
-.accessible-button:disabled {
-	opacity: var(--opacity-50) !important;
-	cursor: not-allowed !important;
-	pointer-events: none !important;
-}
-/* 접근 가능한 링크 */
-.accessible-link {
-	color: var(--color-main-1) !important;
-	text-decoration: underline !important;
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
-	border-radius: var(--radius-xs) !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
-}
-.accessible-link:hover {
-	color: var(--color-main-2) !important;
-	text-decoration-thickness: 2px !important;
-}
-.accessible-link:focus-visible {
-	outline-color: var(--color-main-1) !important;
-	background-color: rgba(var(--rgb-main-1), 0.1) !important;
-	padding: 2px 4px !important;
-	margin: -2px -4px !important;
-}
 /* ===== FOCUS UTILITIES ===== */
 /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
 /* 포커스 관리: outline, focus-visible, focus-within 등 */
@@ -12755,511 +12355,81 @@ td {
 		outline-width: 2px;
 	}
 	50% {
-		outline-color: var(--color-main-2);
-		outline-width: 3px;
-	}
-}
-/* ===== FOCUS MANAGEMENT (포커스 관리) ===== */
-/* 자동 포커스 */
-.auto-focus {
-	outline: 2px solid var(--color-main-1) !important;
-	outline-offset: 2px !important;
-}
-/* 포커스 방지 */
-.no-focus {
-	outline: none !important;
-	-webkit-tap-highlight-color: transparent !important;
-}
-.no-focus:focus,
-.no-focus:focus-visible {
-	outline: none !important;
-	box-shadow: none !important;
-}
-/* 키보드 전용 포커스 */
-.keyboard-only-focus {
-	outline: none !important;
-}
-.keyboard-only-focus:focus:not(:focus-visible) {
-	outline: none !important;
-	box-shadow: none !important;
-}
-.keyboard-only-focus:focus-visible {
-	outline: 2px solid var(--color-main-1) !important;
-	outline-offset: 2px !important;
-}
-/* ===== RESPONSIVE FOCUS ===== */
-/* 모바일 포커스 최적화 */
-@media (max-width: 767px) {
-	.focus-indicator,
-	.btn-focus,
-	.link-focus,
-	.input-focus {
-		outline-width: 3px !important;
-		outline-offset: 3px !important;
-	}
-}
-/* 터치 디바이스 포커스 */
-@media (hover: none) and (pointer: coarse) {
-	.focus-indicator:focus-visible,
-	.btn-focus:focus-visible,
-	.link-focus:focus-visible {
-		outline-width: 3px !important;
-		outline-offset: 3px !important;
-	}
-}
-/* ===== MOTION SENSITIVITY (모션 민감도) ===== */
-@media (prefers-reduced-motion: reduce) {
-	.focus-indicator,
-	.btn-focus,
-	.link-focus,
-	.input-focus,
-	.focus-glow,
-	.focus-pulse {
-		transition: none !important;
-		animation: none !important;
-	}
-}
-/* ===== HIGH CONTRAST MODE (고대비 모드) ===== */
-@media (prefers-contrast: high) {
-	.focus-indicator:focus-visible,
-	.btn-focus:focus-visible,
-	.link-focus:focus-visible,
-	.input-focus:focus {
-		outline-width: 3px !important;
-		outline-color: var(--color-base-10) !important;
-		background-color: var(--color-yellow) !important;
-		color: var(--color-base-10) !important;
-	}
-}
-/* ===== HIGH CONTRAST UTILITIES ===== */
-/* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
-/* 고대비 접근성: 시각 장애인, 저시력자를 위한 고대비 스타일 */
-/* ===== HIGH CONTRAST DETECTION (고대비 모드 감지) ===== */
-/* 고대비 모드가 활성화된 경우에만 적용되는 스타일 */
-@media (prefers-contrast: high) {
-	/* 기본 텍스트 대비 강화 */
-	.text-high-contrast,
-	.high-contrast-text {
-		color: var(--color-black) !important;
-		background-color: var(--color-white) !important;
-		border: 2px solid var(--color-black) !important;
-	}
-
-	/* 링크 대비 강화 */
-	.link-high-contrast,
-	.high-contrast-link {
-		color: var(--color-blue) !important;
-		text-decoration: underline !important;
-		text-decoration-thickness: 2px !important;
-		background-color: var(--color-white) !important;
-	}
-
-	.link-high-contrast:hover,
-	.high-contrast-link:hover {
-		color: var(--color-white) !important;
-		background-color: var(--color-blue) !important;
-		outline: 2px solid var(--color-black) !important;
-	}
-
-	/* 버튼 대비 강화 */
-	.btn-high-contrast,
-	.high-contrast-btn {
-		color: var(--color-white) !important;
-		background-color: var(--color-black) !important;
-		border: 3px solid var(--color-black) !important;
-	}
-
-	.btn-high-contrast:hover,
-	.high-contrast-btn:hover {
-		color: var(--color-black) !important;
-		background-color: var(--color-yellow) !important;
-		border-color: var(--color-black) !important;
-	}
-}
-/* ===== MANUAL HIGH CONTRAST CLASSES (수동 고대비 클래스) ===== */
-/* 고대비 모드와 관계없이 항상 적용되는 고대비 스타일 */
-/* 흑백 고대비 */
-.contrast-black-white {
-	color: var(--color-black) !important;
-	background-color: var(--color-white) !important;
-	border: 2px solid var(--color-black) !important;
-}
-.contrast-white-black {
-	color: var(--color-white) !important;
-	background-color: var(--color-black) !important;
-	border: 2px solid var(--color-white) !important;
-}
-/* 황색 강조 고대비 */
-.contrast-black-yellow {
-	color: var(--color-black) !important;
-	background-color: var(--color-yellow) !important;
-	border: 2px solid var(--color-black) !important;
-}
-.contrast-yellow-black {
-	color: var(--color-yellow) !important;
-	background-color: var(--color-black) !important;
-	border: 2px solid var(--color-yellow) !important;
-}
-/* 파란색 강조 고대비 */
-.contrast-white-blue {
-	color: var(--color-white) !important;
-	background-color: var(--color-blue) !important;
-	border: 2px solid var(--color-white) !important;
-}
-.contrast-blue-white {
-	color: var(--color-blue) !important;
-	background-color: var(--color-white) !important;
-	border: 2px solid var(--color-blue) !important;
-}
-/* ===== TEXT CONTRAST (텍스트 대비) ===== */
-/* 텍스트 크기 확대 + 고대비 */
-.text-large-contrast {
-	font-size: 1.25rem !important;
-	font-weight: var(--font-weight-bold) !important;
-	color: var(--color-black) !important;
-	background-color: var(--color-white) !important;
-	padding: var(--space-1) var(--space-2) !important;
-	border-radius: var(--radius-xs) !important;
-}
-/* 헤딩 고대비 */
-.heading-high-contrast {
-	color: var(--color-black) !important;
-	background-color: var(--color-yellow) !important;
-	padding: var(--space-2) var(--space-4) !important;
-	border: 3px solid var(--color-black) !important;
-	border-radius: var(--radius-sm) !important;
-	font-weight: var(--font-weight-black) !important;
-}
-/* 중요 텍스트 강조 */
-.text-emphasis-high {
-	color: var(--color-white) !important;
-	background-color: var(--color-red) !important;
-	padding: var(--space-1) var(--space-2) !important;
-	border: 2px solid var(--color-black) !important;
-	border-radius: var(--radius-xs) !important;
-	font-weight: var(--font-weight-bold) !important;
-}
-/* ===== BUTTON CONTRAST (버튼 대비) ===== */
-/* 주요 버튼 고대비 */
-.btn-primary-contrast {
-	color: var(--color-white) !important;
-	background-color: var(--color-black) !important;
-	border: 3px solid var(--color-black) !important;
-	padding: var(--space-3) var(--space-6) !important;
-	font-weight: var(--font-weight-bold) !important;
-	font-size: 1.125rem !important;
-	border-radius: var(--radius-sm) !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
-}
-.btn-primary-contrast:hover {
-	color: var(--color-black) !important;
-	background-color: var(--color-yellow) !important;
-	border-color: var(--color-black) !important;
-	transform: scale(1.05) !important;
-}
-.btn-primary-contrast:focus-visible {
-	outline: 4px solid var(--color-blue) !important;
-	outline-offset: 2px !important;
-}
-/* 보조 버튼 고대비 */
-.btn-secondary-contrast {
-	color: var(--color-black) !important;
-	background-color: var(--color-white) !important;
-	border: 3px solid var(--color-black) !important;
-	padding: var(--space-3) var(--space-6) !important;
-	font-weight: var(--font-weight-bold) !important;
-	font-size: 1.125rem !important;
-	border-radius: var(--radius-sm) !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
-}
-.btn-secondary-contrast:hover {
-	color: var(--color-white) !important;
-	background-color: var(--color-black) !important;
-	border-color: var(--color-black) !important;
-}
-.btn-secondary-contrast:focus-visible {
-	outline: 4px solid var(--color-blue) !important;
-	outline-offset: 2px !important;
-}
-/* 위험 버튼 고대비 */
-.btn-danger-contrast {
-	color: var(--color-white) !important;
-	background-color: var(--color-red) !important;
-	border: 3px solid var(--color-black) !important;
-	padding: var(--space-3) var(--space-6) !important;
-	font-weight: var(--font-weight-bold) !important;
-	font-size: 1.125rem !important;
-	border-radius: var(--radius-sm) !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
-}
-.btn-danger-contrast:hover {
-	color: var(--color-red) !important;
-	background-color: var(--color-white) !important;
-	border-color: var(--color-red) !important;
-}
-.btn-danger-contrast:focus-visible {
-	outline: 4px solid var(--color-yellow) !important;
-	outline-offset: 2px !important;
-}
-/* ===== LINK CONTRAST (링크 대비) ===== */
-/* 기본 링크 고대비 */
-.link-contrast {
-	color: var(--color-blue) !important;
-	text-decoration: underline !important;
-	text-decoration-thickness: 2px !important;
-	text-underline-offset: 4px !important;
-	font-weight: var(--font-weight-semibold) !important;
-	background-color: transparent !important;
-	border-radius: var(--radius-xs) !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
-}
-.link-contrast:hover {
-	color: var(--color-white) !important;
-	background-color: var(--color-blue) !important;
-	padding: 2px 4px !important;
-	margin: -2px -4px !important;
-	text-decoration: none !important;
-}
-.link-contrast:focus-visible {
-	outline: 3px solid var(--color-yellow) !important;
-	outline-offset: 2px !important;
-	background-color: var(--color-blue) !important;
-	color: var(--color-white) !important;
-}
-/* 방문한 링크 고대비 */
-.link-contrast:visited {
-	color: var(--color-purple) !important;
-}
-.link-contrast:visited:hover {
-	color: var(--color-white) !important;
-	background-color: var(--color-purple) !important;
-}
-/* ===== FORM CONTRAST (폼 대비) ===== */
-/* 입력 필드 고대비 */
-.input-contrast {
-	color: var(--color-black) !important;
-	background-color: var(--color-white) !important;
-	border: 3px solid var(--color-black) !important;
-	padding: var(--space-3) var(--space-4) !important;
-	font-size: 1.125rem !important;
-	font-weight: var(--font-weight-medium) !important;
-	border-radius: var(--radius-sm) !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
-}
-.input-contrast:focus {
-	outline: 3px solid var(--color-blue) !important;
-	outline-offset: 2px !important;
-	border-color: var(--color-blue) !important;
-	background-color: var(--color-yellow) !important;
-}
-.input-contrast::placeholder {
-	color: var(--color-base-6) !important;
-	font-weight: var(--font-weight-normal) !important;
-}
-/* 라벨 고대비 */
-.label-contrast {
-	color: var(--color-black) !important;
-	font-weight: var(--font-weight-bold) !important;
-	font-size: 1.125rem !important;
-	background-color: var(--color-yellow) !important;
-	padding: var(--space-1) var(--space-2) !important;
-	border-radius: var(--radius-xs) !important;
-	border: 2px solid var(--color-black) !important;
-}
-/* 체크박스/라디오 고대비 */
-.checkbox-contrast,
-.radio-contrast {
-	width: 1.5rem !important;
-	height: 1.5rem !important;
-	border: 3px solid var(--color-black) !important;
-	background-color: var(--color-white) !important;
-	cursor: pointer !important;
-}
-.checkbox-contrast:checked,
-.radio-contrast:checked {
-	background-color: var(--color-black) !important;
-	border-color: var(--color-black) !important;
-}
-.checkbox-contrast:focus-visible,
-.radio-contrast:focus-visible {
-	outline: 3px solid var(--color-blue) !important;
-	outline-offset: 2px !important;
-}
-/* ===== TABLE CONTRAST (테이블 대비) ===== */
-/* 테이블 헤더 고대비 */
-.table-header-contrast {
-	color: var(--color-white) !important;
-	background-color: var(--color-black) !important;
-	border: 2px solid var(--color-black) !important;
-	padding: var(--space-3) var(--space-4) !important;
-	font-weight: var(--font-weight-bold) !important;
-	font-size: 1.125rem !important;
-}
-/* 테이블 셀 고대비 */
-.table-cell-contrast {
-	color: var(--color-black) !important;
-	background-color: var(--color-white) !important;
-	border: 2px solid var(--color-black) !important;
-	padding: var(--space-3) var(--space-4) !important;
-	font-size: 1rem !important;
-}
-/* 교대로 나타나는 행 고대비 */
-.table-row-contrast:nth-child(even) {
-	background-color: var(--color-base-1) !important;
-}
-.table-row-contrast:nth-child(odd) {
-	background-color: var(--color-white) !important;
-}
-/* ===== NAVIGATION CONTRAST (네비게이션 대비) ===== */
-/* 네비게이션 메뉴 고대비 */
-.nav-contrast {
-	background-color: var(--color-black) !important;
-	border: 3px solid var(--color-white) !important;
-	padding: var(--space-4) !important;
-}
-.nav-contrast a {
-	color: var(--color-white) !important;
-	text-decoration: none !important;
-	font-weight: var(--font-weight-bold) !important;
-	font-size: 1.125rem !important;
-	padding: var(--space-2) var(--space-4) !important;
-	border-radius: var(--radius-sm) !important;
-	border: 2px solid transparent !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
-}
-.nav-contrast a:hover {
-	color: var(--color-black) !important;
-	background-color: var(--color-yellow) !important;
-	border-color: var(--color-black) !important;
-}
-.nav-contrast a:focus-visible {
-	outline: 3px solid var(--color-blue) !important;
-	outline-offset: 2px !important;
-}
-.nav-contrast a[aria-current="page"] {
-	color: var(--color-black) !important;
-	background-color: var(--color-white) !important;
-	border-color: var(--color-black) !important;
-}
-/* ===== CARD CONTRAST (카드 대비) ===== */
-/* 카드 고대비 */
-.card-contrast {
-	color: var(--color-black) !important;
-	background-color: var(--color-white) !important;
-	border: 4px solid var(--color-black) !important;
-	border-radius: var(--radius-md) !important;
-	padding: var(--space-6) !important;
-	box-shadow: 4px 4px 0 var(--color-black) !important;
+		outline-color: var(--color-main-2);
+		outline-width: 3px;
+	}
 }
-.card-contrast:hover {
-	transform: translate(-2px, -2px) !important;
-	box-shadow: 6px 6px 0 var(--color-black) !important;
+/* ===== FOCUS MANAGEMENT (포커스 관리) ===== */
+/* 자동 포커스 */
+.auto-focus {
+	outline: 2px solid var(--color-main-1) !important;
+	outline-offset: 2px !important;
 }
-/* 카드 헤더 고대비 */
-.card-header-contrast {
-	color: var(--color-white) !important;
-	background-color: var(--color-black) !important;
-	padding: var(--space-4) var(--space-6) !important;
-	margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6))
-		var(--space-4) calc(-1 * var(--space-6)) !important;
-	border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
-	font-weight: var(--font-weight-bold) !important;
-	font-size: 1.25rem !important;
+/* 포커스 방지 */
+.no-focus {
+	outline: none !important;
+	-webkit-tap-highlight-color: transparent !important;
 }
-/* ===== ALERT CONTRAST (알림 대비) ===== */
-/* 성공 알림 고대비 */
-.alert-success-contrast {
-	color: var(--color-black) !important;
-	background-color: var(--color-green) !important;
-	border: 3px solid var(--color-black) !important;
-	padding: var(--space-4) var(--space-6) !important;
-	border-radius: var(--radius-md) !important;
-	font-weight: var(--font-weight-bold) !important;
-	font-size: 1.125rem !important;
+.no-focus:focus,
+.no-focus:focus-visible {
+	outline: none !important;
+	box-shadow: none !important;
 }
-/* 경고 알림 고대비 */
-.alert-warning-contrast {
-	color: var(--color-black) !important;
-	background-color: var(--color-yellow) !important;
-	border: 3px solid var(--color-black) !important;
-	padding: var(--space-4) var(--space-6) !important;
-	border-radius: var(--radius-md) !important;
-	font-weight: var(--font-weight-bold) !important;
-	font-size: 1.125rem !important;
+/* 키보드 전용 포커스 */
+.keyboard-only-focus {
+	outline: none !important;
 }
-/* 오류 알림 고대비 */
-.alert-error-contrast {
-	color: var(--color-white) !important;
-	background-color: var(--color-red) !important;
-	border: 3px solid var(--color-black) !important;
-	padding: var(--space-4) var(--space-6) !important;
-	border-radius: var(--radius-md) !important;
-	font-weight: var(--font-weight-bold) !important;
-	font-size: 1.125rem !important;
+.keyboard-only-focus:focus:not(:focus-visible) {
+	outline: none !important;
+	box-shadow: none !important;
 }
-/* 정보 알림 고대비 */
-.alert-info-contrast {
-	color: var(--color-white) !important;
-	background-color: var(--color-blue) !important;
-	border: 3px solid var(--color-black) !important;
-	padding: var(--space-4) var(--space-6) !important;
-	border-radius: var(--radius-md) !important;
-	font-weight: var(--font-weight-bold) !important;
-	font-size: 1.125rem !important;
+.keyboard-only-focus:focus-visible {
+	outline: 2px solid var(--color-main-1) !important;
+	outline-offset: 2px !important;
 }
-/* ===== RESPONSIVE HIGH CONTRAST ===== */
-/* 모바일에서 고대비 최적화 */
+/* ===== RESPONSIVE FOCUS ===== */
+/* 모바일 포커스 최적화 */
 @media (max-width: 767px) {
-	.btn-primary-contrast,
-	.btn-secondary-contrast,
-	.btn-danger-contrast {
-		font-size: 1.25rem !important;
-		padding: var(--space-4) var(--space-8) !important;
-		border-width: 4px !important;
-	}
-
-	.input-contrast {
-		font-size: 1.25rem !important;
-		padding: var(--space-4) var(--space-5) !important;
-		border-width: 4px !important;
-	}
-
-	.text-large-contrast {
-		font-size: 1.5rem !important;
+	.focus-indicator,
+	.btn-focus,
+	.link-focus,
+	.input-focus {
+		outline-width: 3px !important;
+		outline-offset: 3px !important;
 	}
 }
-/* 큰 화면에서 고대비 최적화 */
-@media (min-width: 1024px) {
-	.heading-high-contrast {
-		font-size: 2rem !important;
-		padding: var(--space-4) var(--space-8) !important;
-	}
-
-	.card-contrast {
-		padding: var(--space-8) !important;
-		border-width: 5px !important;
-		box-shadow: 6px 6px 0 var(--color-black) !important;
+/* 터치 디바이스 포커스 */
+@media (hover: none) and (pointer: coarse) {
+	.focus-indicator:focus-visible,
+	.btn-focus:focus-visible,
+	.link-focus:focus-visible {
+		outline-width: 3px !important;
+		outline-offset: 3px !important;
 	}
 }
-/* ===== UTILITY COMBINATIONS ===== */
-/* 완전한 고대비 페이지 래퍼 */
-.high-contrast-page {
-	color: var(--color-black) !important;
-	background-color: var(--color-white) !important;
-	font-weight: var(--font-weight-medium) !important;
-	line-height: 1.6 !important;
-}
-.high-contrast-page * {
-	border-color: var(--color-black) !important;
+/* ===== MOTION SENSITIVITY (모션 민감도) ===== */
+@media (prefers-reduced-motion: reduce) {
+	.focus-indicator,
+	.btn-focus,
+	.link-focus,
+	.input-focus,
+	.focus-glow,
+	.focus-pulse {
+		transition: none !important;
+		animation: none !important;
+	}
 }
-/* 고대비 컨테이너 */
-.high-contrast-container {
-	color: var(--color-black) !important;
-	background-color: var(--color-white) !important;
-	border: 3px solid var(--color-black) !important;
-	padding: var(--space-6) !important;
-	border-radius: var(--radius-lg) !important;
-	margin: var(--space-4) !important;
+/* ===== HIGH CONTRAST MODE (고대비 모드) ===== */
+@media (prefers-contrast: high) {
+	.focus-indicator:focus-visible,
+	.btn-focus:focus-visible,
+	.link-focus:focus-visible,
+	.input-focus:focus {
+		outline-width: 3px !important;
+		outline-color: var(--color-base-10) !important;
+		background-color: var(--color-yellow) !important;
+		color: var(--color-base-10) !important;
+	}
 }
 /* ===== PRINT SUPPORT (프린트 지원) ===== */
 /* ===== PRINT UTILITIES ===== */
@@ -13883,472 +13053,6 @@ td {
 		margin-bottom: 2pt !important;
 	}
 }
-/* ===== BROWSER COMPATIBILITY (브라우저 호환성) ===== */
-/* ===== BROWSER COMPATIBILITY UTILITIES ===== */
-/* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
-/* 브라우저 호환성: vendor prefixes, feature detection, fallbacks 등 */
-/* ===== VENDOR PREFIXES (벤더 프리픽스) ===== */
-/* Transform 호환성 */
-.transform-compat {
-	-webkit-transform: var(--transform, none) !important;
-	-moz-transform: var(--transform, none) !important;
-	-ms-transform: var(--transform, none) !important;
-	-o-transform: var(--transform, none) !important;
-	transform: var(--transform, none) !important;
-}
-/* Transition 호환성 */
-.transition-compat {
-	-webkit-transition: var(--transition, all 0.3s ease) !important;
-	-moz-transition: var(--transition, all 0.3s ease) !important;
-	-ms-transition: var(--transition, all 0.3s ease) !important;
-	-o-transition: var(--transition, all 0.3s ease) !important;
-	transition: var(--transition, all 0.3s ease) !important;
-}
-/* Animation 호환성 */
-.animation-compat {
-	-webkit-animation: var(--animation, none) !important;
-	-moz-animation: var(--animation, none) !important;
-	-ms-animation: var(--animation, none) !important;
-	-o-animation: var(--animation, none) !important;
-	animation: var(--animation, none) !important;
-}
-/* Box Shadow 호환성 */
-.box-shadow-compat {
-	-webkit-box-shadow: var(--shadow, none) !important;
-	-moz-box-shadow: var(--shadow, none) !important;
-	box-shadow: var(--shadow, none) !important;
-}
-/* Border Radius 호환성 */
-.border-radius-compat {
-	-webkit-border-radius: var(--radius, 0) !important;
-	-moz-border-radius: var(--radius, 0) !important;
-	border-radius: var(--radius, 0) !important;
-}
-/* Linear Gradient 호환성 */
-.linear-gradient-compat {
-	background: var(--gradient-fallback, #ffffff) !important; /* 폴백 색상 */
-	background: -webkit-linear-gradient(
-		var(--gradient-direction, top),
-		var(--gradient-stops)
-	) !important;
-	background: -moz-linear-gradient(
-		var(--gradient-direction, top),
-		var(--gradient-stops)
-	) !important;
-	background: -ms-linear-gradient(
-		var(--gradient-direction, top),
-		var(--gradient-stops)
-	) !important;
-	background: -o-linear-gradient(
-		var(--gradient-direction, top),
-		var(--gradient-stops)
-	) !important;
-	background: linear-gradient(
-		var(--gradient-direction, to bottom),
-		var(--gradient-stops)
-	) !important;
-}
-/* ===== FLEXBOX COMPATIBILITY (플렉스박스 호환성) ===== */
-/* 구 버전 Flexbox 지원 */
-.flex-compat {
-	display: -webkit-box !important; /* iOS 6-, Safari 3.1-6 */
-	display: -moz-box !important; /* Firefox 19- */
-	display: -ms-flexbox !important; /* IE 10 */
-	display: -webkit-flex !important; /* Chrome */
-	display: flex !important; /* 표준 */
-}
-.flex-direction-row-compat {
-	-webkit-box-orient: horizontal !important;
-	-webkit-box-direction: normal !important;
-	-webkit-flex-direction: row !important;
-	-ms-flex-direction: row !important;
-	flex-direction: row !important;
-}
-.flex-direction-column-compat {
-	-webkit-box-orient: vertical !important;
-	-webkit-box-direction: normal !important;
-	-webkit-flex-direction: column !important;
-	-ms-flex-direction: column !important;
-	flex-direction: column !important;
-}
-.justify-content-center-compat {
-	-webkit-box-pack: center !important;
-	-webkit-justify-content: center !important;
-	-ms-flex-pack: center !important;
-	justify-content: center !important;
-}
-.align-items-center-compat {
-	-webkit-box-align: center !important;
-	-webkit-align-items: center !important;
-	-ms-flex-align: center !important;
-	align-items: center !important;
-}
-.flex-1-compat {
-	-webkit-box-flex: 1 !important;
-	-webkit-flex: 1 !important;
-	-ms-flex: 1 !important;
-	flex: 1 !important;
-}
-/* ===== GRID COMPATIBILITY (그리드 호환성) ===== */
-/* CSS Grid 호환성 */
-.grid-compat {
-	display: -ms-grid !important; /* IE 10-11 */
-	display: grid !important; /* 표준 */
-}
-/* IE Grid 폴백 */
-@supports not (display: grid) {
-	.grid-compat {
-		display: flex !important;
-		flex-wrap: wrap !important;
-	}
-
-	.grid-compat > * {
-		flex: 1 !important;
-		min-width: 0 !important;
-	}
-}
-/* ===== USER SELECT COMPATIBILITY (사용자 선택 호환성) ===== */
-.user-select-none-compat {
-	-webkit-user-select: none !important;
-	-moz-user-select: none !important;
-	-ms-user-select: none !important;
-	user-select: none !important;
-}
-.user-select-all-compat {
-	-webkit-user-select: all !important;
-	-moz-user-select: all !important;
-	-ms-user-select: all !important;
-	user-select: all !important;
-}
-.user-select-text-compat {
-	-webkit-user-select: text !important;
-	-moz-user-select: text !important;
-	-ms-user-select: text !important;
-	user-select: text !important;
-}
-/* ===== APPEARANCE COMPATIBILITY (외형 호환성) ===== */
-.appearance-none-compat {
-	-webkit-appearance: none !important;
-	-moz-appearance: none !important;
-	-ms-appearance: none !important;
-	appearance: none !important;
-}
-/* ===== BACKDROP FILTER COMPATIBILITY (백드롭 필터 호환성) ===== */
-.backdrop-filter-compat {
-	-webkit-backdrop-filter: var(--backdrop-filter, none) !important;
-	backdrop-filter: var(--backdrop-filter, none) !important;
-}
-/* 백드롭 필터 미지원 시 폴백 */
-@supports not (backdrop-filter: blur(1px)) and not
-	(-webkit-backdrop-filter: blur(1px)) {
-	.backdrop-filter-fallback {
-		background-color: rgba(255, 255, 255, 0.8) !important;
-	}
-
-	.backdrop-filter-fallback.dark {
-		background-color: rgba(0, 0, 0, 0.8) !important;
-	}
-}
-/* ===== STICKY POSITION COMPATIBILITY (스티키 포지션 호환성) ===== */
-.sticky-compat {
-	position: -webkit-sticky !important;
-	position: sticky !important;
-}
-/* Sticky 미지원 시 폴백 */
-@supports not (position: sticky) {
-	.sticky-fallback {
-		position: fixed !important;
-		top: 0 !important;
-		z-index: var(--z-index-fixed, 1000) !important;
-	}
-}
-/* ===== OBJECT FIT COMPATIBILITY (오브젝트 핏 호환성) ===== */
-.object-fit-cover-compat {
-	object-fit: cover !important;
-	object-position: center !important;
-}
-/* Object-fit 미지원 시 폴백 */
-@supports not (object-fit: cover) {
-	.object-fit-cover-fallback {
-		position: relative !important;
-		overflow: hidden !important;
-	}
-
-	.object-fit-cover-fallback img {
-		position: absolute !important;
-		top: 50% !important;
-		left: 50% !important;
-		transform: translate(-50%, -50%) !important;
-		min-width: 100% !important;
-		min-height: 100% !important;
-		width: auto !important;
-		height: auto !important;
-	}
-}
-/* ===== ASPECT RATIO COMPATIBILITY (종횡비 호환성) ===== */
-/* Aspect Ratio 호환성 (padding-top hack) */
-@supports not (aspect-ratio: 1 / 1) {
-	.aspect-ratio-fallback {
-		position: relative !important;
-		overflow: hidden !important;
-	}
-
-	.aspect-ratio-fallback::before {
-		content: "" !important;
-		display: block !important;
-		padding-top: var(--aspect-ratio-percent, 100%) !important;
-	}
-
-	.aspect-ratio-fallback > * {
-		position: absolute !important;
-		top: 0 !important;
-		left: 0 !important;
-		width: 100% !important;
-		height: 100% !important;
-	}
-}
-/* ===== SCROLL BEHAVIOR COMPATIBILITY (스크롤 동작 호환성) ===== */
-.scroll-smooth-compat {
-	scroll-behavior: smooth !important;
-}
-/* Smooth scroll 미지원 시 폴백 */
-@supports not (scroll-behavior: smooth) {
-	.scroll-smooth-js {
-		/* JavaScript로 부드러운 스크롤 구현 필요 */
-		scroll-behavior: auto !important;
-	}
-}
-/* ===== CONTAINER QUERIES COMPATIBILITY (컨테이너 쿼리 호환성) ===== */
-/* Container Queries 미지원 시 폴백 */
-@supports not (container-type: inline-size) {
-	.container-fallback {
-		/* 미디어 쿼리로 대체 */
-		width: 100% !important;
-	}
-
-	@media (min-width: 400px) {
-		.container-fallback {
-			/* 컨테이너 쿼리 대신 미디어 쿼리 사용 */
-		}
-	}
-}
-/* ===== CLAMP FUNCTION COMPATIBILITY (clamp 함수 호환성) ===== */
-/* clamp() 미지원 시 폴백 */
-@supports not (font-size: clamp(1rem, 4vw, 2rem)) {
-	.clamp-fallback {
-		font-size: 1.25rem !important; /* 중간값으로 폴백 */
-	}
-
-	@media (min-width: 768px) {
-		.clamp-fallback {
-			font-size: 1.5rem !important;
-		}
-	}
-
-	@media (min-width: 1200px) {
-		.clamp-fallback {
-			font-size: 2rem !important;
-		}
-	}
-}
-/* ===== CUSTOM PROPERTIES COMPATIBILITY (CSS 변수 호환성) ===== */
-/* CSS Variables 미지원 시 폴백 */
-@supports not (color: var(--primary-color)) {
-	.css-variables-fallback {
-		/* 하드코딩된 값으로 폴백 */
-		color: #007bff !important;
-		background-color: #ffffff !important;
-		border-color: #dee2e6 !important;
-	}
-}
-/* ===== INTERNET EXPLORER SPECIFIC (Internet Explorer 전용) ===== */
-/* IE 조건부 클래스 */
-.ie-only {
-	display: none !important;
-}
-/* IE에서만 표시 */
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-	.ie-only {
-		display: block !important;
-	}
-
-	.ie-hide {
-		display: none !important;
-	}
-}
-/* IE 그리드 레이아웃 수정 */
-@supports (-ms-grid-columns: 1fr) {
-	.ie-grid-fix {
-		-ms-grid-columns: 1fr !important;
-		-ms-grid-rows: auto !important;
-	}
-}
-/* ===== SAFARI SPECIFIC (Safari 전용) ===== */
-/* Safari 버그 수정 */
-@supports (-webkit-touch-callout: none) {
-	.safari-fix {
-		-webkit-transform: translateZ(0) !important; /* 하드웨어 가속 */
-	}
-}
-/* iOS Safari 뷰포트 높이 수정 */
-@supports (-webkit-touch-callout: none) {
-	.ios-viewport-fix {
-		height: -webkit-fill-available !important;
-	}
-}
-/* ===== FIREFOX SPECIFIC (Firefox 전용) ===== */
-/* Firefox 스크롤바 스타일링 */
-@-moz-document url-prefix() {
-	.firefox-scrollbar {
-		scrollbar-width: thin !important;
-		scrollbar-color: var(--color-base-4) var(--color-base-1) !important;
-	}
-}
-/* ===== FEATURE DETECTION (기능 감지) ===== */
-/* Hover 지원 감지 */
-@media (hover: hover) {
-	.hover-supported:hover {
-		background-color: var(--color-base-2) !important;
-		transform: translateY(-2px) !important;
-	}
-}
-@media (hover: none) {
-	.hover-not-supported {
-		/* 터치 디바이스용 스타일 */
-		padding: var(--space-4) !important;
-		font-size: 1.125rem !important;
-	}
-}
-/* Pointer 정밀도 감지 */
-@media (pointer: fine) {
-	.fine-pointer {
-		/* 마우스/트랙패드용 */
-		cursor: pointer !important;
-	}
-}
-@media (pointer: coarse) {
-	.coarse-pointer {
-		/* 터치용 */
-		min-height: 44px !important; /* 터치 최소 크기 */
-		min-width: 44px !important;
-	}
-}
-/* ===== REDUCED MOTION COMPATIBILITY (모션 감소 호환성) ===== */
-/* 모션 감소 미지원 시 폴백 */
-.motion-safe {
-	animation: var(--animation, none) !important;
-	transition: var(--transition, all 0.3s ease) !important;
-}
-@media (prefers-reduced-motion: reduce) {
-	.motion-safe {
-		animation: none !important;
-		transition: none !important;
-	}
-}
-/* ===== HIGH CONTRAST MODE COMPATIBILITY (고대비 모드 호환성) ===== */
-/* Windows 고대비 모드 감지 */
-@media (-ms-high-contrast: active) {
-	.high-contrast-mode {
-		border: 1px solid !important;
-		background: ButtonFace !important;
-		color: ButtonText !important;
-	}
-}
-/* ===== COLOR SCHEME COMPATIBILITY (색상 스킴 호환성) ===== */
-/* 다크 모드 미지원 시 폴백 */
-@media (prefers-color-scheme: dark) {
-	.dark-mode-supported {
-		background-color: var(--color-base-9) !important;
-		color: var(--color-white) !important;
-	}
-}
-/* 다크 모드 감지 불가능한 경우 */
-@supports not (color-scheme: dark) {
-	.dark-mode-fallback {
-		/* JavaScript로 다크 모드 토글 구현 필요 */
-	}
-}
-/* ===== PRINT COMPATIBILITY (프린트 호환성) ===== */
-/* 프린트 시 웹폰트 폴백 */
-@media print {
-	.print-font-fallback {
-		font-family: "Times New Roman", serif !important;
-	}
-
-	.print-safe {
-		color: black !important;
-		background: white !important;
-		text-shadow: none !important;
-		box-shadow: none !important;
-	}
-}
-/* ===== BROWSER DETECTION UTILITIES (브라우저 감지 유틸리티) ===== */
-/* Chromium 기반 브라우저 감지 */
-@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
-	.chromium-only {
-		display: block !important;
-	}
-}
-/* WebKit 기반 브라우저 감지 */
-@supports (-webkit-appearance: none) {
-	.webkit-only {
-		display: block !important;
-	}
-}
-/* Gecko 기반 브라우저 감지 */
-@supports (-moz-appearance: none) {
-	.gecko-only {
-		display: block !important;
-	}
-}
-/* ===== PERFORMANCE OPTIMIZATION (성능 최적화) ===== */
-/* GPU 가속 활성화 */
-.gpu-accelerated {
-	-webkit-transform: translateZ(0) !important;
-	-moz-transform: translateZ(0) !important;
-	-ms-transform: translateZ(0) !important;
-	-o-transform: translateZ(0) !important;
-	transform: translateZ(0) !important;
-
-	/* will-change 최적화 */
-	will-change: var(--will-change, auto) !important;
-}
-/* 하드웨어 가속 비활성화 */
-.no-gpu-acceleration {
-	transform: none !important;
-	will-change: auto !important;
-}
-/* ===== POLYFILL HINTS (폴리필 힌트) ===== */
-/* JavaScript 폴리필이 필요한 기능들 */
-.needs-polyfill {
-	/* 
-	필요한 폴리필들:
-	- IntersectionObserver
-	- ResizeObserver
-	- CustomEvent
-	- Object.assign
-	- Array.from
-	- Promise
-	- fetch
-	*/
-}
-/* 폴리필 로드 완료 후 활성화되는 클래스 */
-.polyfill-loaded .feature-enhanced {
-	/* 폴리필 의존 기능들 */
-}
-/* ===== CRITICAL CSS OPTIMIZATION (중요 CSS 최적화) ===== */
-/* Above the fold 콘텐츠 */
-.critical-css {
-	/* 중요한 스타일만 포함 */
-	display: block !important;
-	position: relative !important;
-	margin: 0 !important;
-	padding: 0 !important;
-}
-/* 지연 로드 콘텐츠 */
-.non-critical {
-	/* 나중에 로드될 스타일들 */
-}
 /* ===== RESPONSIVE BREAKPOINTS ===== */
 /* 
 미디어쿼리 브레이크포인트: