npm - newtil-css - Versions diffs - 0.2.95 → 0.2.98 - Mend

newtil-css 0.2.95 → 0.2.98

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/utils.css CHANGED Viewed

@@ -12690,2903 +12690,1285 @@ Variables 커스터마이징:
 /* ===== ACCESSIBILITY (접근성) ===== */
-/* ===== SCREEN READER UTILITIES ===== */
+/* ===== FOCUS UTILITIES ===== */
 /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
-/* 스크린 리더 접근성: 시각적으로 숨기기, 스크린 리더 전용 텍스트 등 */
+/* 포커스 관리: outline, focus-visible, focus-within 등 */
-/* ===== VISUALLY HIDDEN (시각적으로 숨기기) ===== */
+/* ===== OUTLINE STYLES (아웃라인 스타일) ===== */
-/* 스크린 리더에서는 읽히지만 시각적으로는 숨김 */
+/* outline: none */
-.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;
+.outline\:none {
+	outline: none !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;
-}
+/* outline: solid */
-.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;
+.outline\:solid {
+	outline: 2px solid var(--color-main-1) !important;
+	outline-offset: 2px !important;
 }
-/* ===== SCREEN READER ONLY TEXT (스크린 리더 전용 텍스트) ===== */
-/* 아이콘에 대한 설명 텍스트 */
+/* outline: dashed */
-.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;
+.outline\:dashed {
+	outline: 2px dashed var(--color-main-1) !important;
+	outline-offset: 2px !important;
 }
-/* 링크에 대한 추가 설명 */
+/* outline: dotted */
-.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;
+.outline\:dotted {
+	outline: 2px dotted var(--color-main-1) !important;
+	outline-offset: 2px !important;
 }
-/* ===== ARIA ATTRIBUTES SUPPORT (ARIA 속성 지원) ===== */
-/* aria-hidden="true" 요소 스타일링 */
+/* ===== OUTLINE WIDTH (아웃라인 두께) ===== */
-[aria-hidden="true"] {
-	display: none !important;
+.outline-width\:1,
+.outline\:1 {
+	outline-width: 1px !important;
 }
-/* aria-expanded 상태 표시 */
-[aria-expanded="false"] .collapse-icon {
-	transform: rotate(0deg) !important;
-	transition: transform var(--duration-fast) var(--ease-out) !important;
+.outline-width\:2,
+.outline\:2 {
+	outline-width: 2px !important;
 }
-[aria-expanded="true"] .collapse-icon {
-	transform: rotate(180deg) !important;
-	transition: transform var(--duration-fast) var(--ease-out) !important;
+.outline-width\:3,
+.outline\:3 {
+	outline-width: 3px !important;
 }
-/* aria-disabled 상태 스타일링 */
-[aria-disabled="true"] {
-	opacity: var(--opacity-50) !important;
-	cursor: not-allowed !important;
-	pointer-events: none !important;
+.outline-width\:4,
+.outline\:4 {
+	outline-width: 4px !important;
 }
-/* aria-selected 상태 스타일링 */
+/* ===== OUTLINE COLOR (아웃라인 색상) ===== */
-[aria-selected="true"] {
-	background-color: var(--color-main-1) !important;
-	color: var(--color-white) !important;
+.outline-color\:main-1,
+.outline\:main-1 {
+	outline-color: var(--color-main-1) !important;
 }
-[aria-selected="false"] {
-	background-color: transparent !important;
-	color: var(--color-base-7) !important;
+.outline-color\:sub-1,
+.outline\:sub-1 {
+	outline-color: var(--color-sub-1) !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;
+.outline-color\:accent-1,
+.outline\:accent-1 {
+	outline-color: var(--color-accent-1) !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;
+.outline-color\:base-1,
+.outline\:base-1 {
+	outline-color: var(--color-base-1) !important;
 }
-.skip-link:focus {
-	top: var(--space-4) !important;
+.outline-color\:base-10,
+.outline\:base-10 {
+	outline-color: var(--color-base-10) !important;
 }
-/* 네비게이션 스킵 링크들 */
-.skip-links {
-	position: absolute !important;
-	top: 0 !important;
-	left: 0 !important;
-	z-index: var(--z-index-modal) !important;
+.outline-color\:danger-1,
+.outline\:danger-1 {
+	outline-color: var(--color-danger-1) !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;
+.outline-color\:success-1,
+.outline\:success-1 {
+	outline-color: var(--color-success-1) !important;
 }
-.skip-links a:focus {
-	top: var(--space-4) !important;
+.outline-color\:warning-1,
+.outline\:warning-1 {
+	outline-color: var(--color-warning-1) !important;
 }
-/* ===== LANDMARK REGIONS (랜드마크 영역) ===== */
-/* 메인 컨텐츠 영역 표시 */
+/* ===== OUTLINE OFFSET (아웃라인 오프셋) ===== */
-main[role="main"],
-[role="main"],
-.main-content {
-	scroll-margin-top: var(
-		--space-20
-	) !important; /* 고정 헤더를 위한 스크롤 마진 */
+.outline-offset\:0 {
+	outline-offset: 0 !important;
 }
-/* 네비게이션 영역 */
-nav[role="navigation"],
-[role="navigation"],
-.navigation {
-	position: relative !important;
+.outline-offset\:1 {
+	outline-offset: 1px !important;
 }
-/* 배너 영역 (헤더) */
-header[role="banner"],
-[role="banner"],
-.site-header {
-	position: relative !important;
+.outline-offset\:2 {
+	outline-offset: 2px !important;
 }
-/* 콘텐츠 정보 영역 (푸터) */
-footer[role="contentinfo"],
-[role="contentinfo"],
-.site-footer {
-	position: relative !important;
+.outline-offset\:4 {
+	outline-offset: 4px !important;
 }
-/* 보완 영역 (사이드바) */
-aside[role="complementary"],
-[role="complementary"],
-.sidebar {
-	position: relative !important;
+.outline-offset\:8 {
+	outline-offset: 8px !important;
 }
-/* ===== FORM ACCESSIBILITY (폼 접근성) ===== */
+/* ===== FOCUS VISIBLE (포커스 가시성) ===== */
-/* 필수 입력 필드 표시 */
+/* 키보드 포커스만 표시 */
-[aria-required="true"],
-[required] {
-	position: relative !important;
+.focus-visible\:outline-main:focus-visible {
+	outline: 2px solid var(--color-main-1) !important;
+	outline-offset: 2px !important;
 }
-[aria-required="true"]::after,
-[required]::after {
-	content: " *" !important;
-	color: var(--color-danger-1) !important;
-	font-weight: var(--font-weight-bold) !important;
+.focus-visible\:outline-accent:focus-visible {
+	outline: 2px solid var(--color-accent-1) !important;
+	outline-offset: 2px !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;
+.focus-visible\:outline-base-1:focus-visible {
+	outline: 2px solid var(--color-base-1) !important;
+	outline-offset: 2px !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;
+.focus-visible\:outline-base-10:focus-visible {
+	outline: 2px solid var(--color-base-10) !important;
+	outline-offset: 2px !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;
+.focus-visible\:bg-main-1:focus-visible {
+	background-color: var(--color-main-1) !important;
+	color: var(--color-base-1) !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;
+.focus-visible\:bg-accent-1:focus-visible {
+	background-color: var(--color-accent-1) !important;
+	color: var(--color-base-1) !important;
 }
-/* ===== KEYBOARD NAVIGATION (키보드 네비게이션) ===== */
+.focus-visible\:bg-base-2:focus-visible {
+	background-color: var(--color-base-2) !important;
+}
-/* 키보드 포커스 표시자 */
+/* 포커스 시 그림자 효과 */
-.keyboard-focusable {
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
-	transition: outline-color var(--duration-fast) var(--ease-out) !important;
+.focus-visible\:shadow-main:focus-visible {
+	box-shadow: 0 0 0 3px rgba(var(--rgb-main-1), 0.3) !important;
 }
-.keyboard-focusable:focus-visible {
-	outline-color: var(--color-main-1) !important;
+.focus-visible\:shadow-accent:focus-visible {
+	box-shadow: 0 0 0 3px rgba(var(--rgb-accent-1), 0.3) !important;
 }
-/* 탭 순서 건너뛰기 */
-.skip-tab-order {
-	position: absolute !important;
-	left: -10000px !important;
-	top: auto !important;
-	width: 1px !important;
-	height: 1px !important;
-	overflow: hidden !important;
+.focus-visible\:shadow-danger:focus-visible {
+	box-shadow: 0 0 0 3px rgba(var(--rgb-danger-1), 0.3) !important;
 }
-/* ===== READING ORDER (읽기 순서) ===== */
-/* 스크린 리더 읽기 순서 조정 */
+/* ===== FOCUS WITHIN (포커스 내부) ===== */
-.reading-order-1 {
-	order: 1 !important;
-}
+/* 자식 요소가 포커스될 때 부모 스타일 변경 */
-.reading-order-2 {
-	order: 2 !important;
+.focus-within\:outline-main:focus-within {
+	outline: 2px solid var(--color-main-1) !important;
+	outline-offset: 2px !important;
 }
-.reading-order-3 {
-	order: 3 !important;
+.focus-within\:bg-base-1:focus-within {
+	background-color: var(--color-base-1) !important;
 }
-.reading-order-4 {
-	order: 4 !important;
+.focus-within\:border-main-1:focus-within {
+	border-color: var(--color-main-1) !important;
 }
-.reading-order-5 {
-	order: 5 !important;
+.focus-within\:shadow-main:focus-within {
+	box-shadow: 0 0 0 3px rgba(var(--rgb-main-1), 0.2) !important;
 }
-/* ===== SCREEN READER ANNOUNCEMENTS (스크린 리더 안내) ===== */
-/* 라이브 영역 설정 */
-.live-region-polite,
-[aria-live="polite"] {
-	position: relative !important;
-}
+/* ===== FOCUS TRAP (포커스 트랩) ===== */
-.live-region-assertive,
-[aria-live="assertive"] {
-	position: relative !important;
-}
+/* 모달/다이얼로그용 포커스 트랩 */
-.live-region-off,
-[aria-live="off"] {
+.focus-trap {
 	position: relative !important;
 }
-/* 상태 안내 메시지 */
-.status-message {
+.focus-trap::before,
+.focus-trap::after {
+	content: "" !important;
 	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;
+	clip: rect(1px, 1px, 1px, 1px) !important;
 }
-/* ===== TABLE ACCESSIBILITY (테이블 접근성) ===== */
-/* 테이블 캡션 스타일링 */
+.focus-trap::before {
+	top: 0 !important;
+	left: 0 !important;
+}
-.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;
+.focus-trap::after {
+	bottom: 0 !important;
+	right: 0 !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;
+.focus-first {
+	position: relative !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;
+.focus-last {
+	position: relative !important;
 }
-/* ===== RESPONSIVE ACCESSIBILITY ===== */
+/* ===== FOCUS INDICATOR STYLES (포커스 표시자 스타일) ===== */
-/* 모바일에서 스크린 리더 최적화 */
-@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;
-	}
+.focus-indicator {
+	outline: 2px solid transparent !important;
+	outline-offset: 2px !important;
+	border-radius: var(--radius-sm) !important;
+	transition: outline-color var(--duration-fast) var(--ease-out) !important;
 }
-/* 큰 화면에서 스킵 링크 위치 조정 */
+.focus-indicator:focus-visible {
+	outline-color: var(--color-main-1) !important;
+}
-@media (min-width: 1024px) {
-	.skip-link {
-		left: var(--space-8) !important;
-	}
+/* 고대비 포커스 표시자 */
-	.skip-links a {
-		left: var(--space-8) !important;
-	}
+.focus-indicator-high-contrast {
+	outline: 3px solid transparent !important;
+	outline-offset: 3px !important;
+	transition: outline-color var(--duration-fast) var(--ease-out) !important;
 }
-/* ===== MOTION SENSITIVITY (모션 민감도) ===== */
+.focus-indicator-high-contrast:focus-visible {
+	outline-color: var(--color-base-10) !important;
+	background-color: var(--color-yellow) !important;
+	color: var(--color-base-10) !important;
+}
-/* 모션 감소 선호도 존중 */
+/* 내부 포커스 표시자 (outline 대신 box-shadow 사용) */
-@media (prefers-reduced-motion: reduce) {
-	.visually-hidden-focusable,
-	.skip-link,
-	.skip-links a,
-	[aria-expanded] .collapse-icon {
-		transition: none !important;
-		animation: none !important;
-	}
+.focus-indicator-inner {
+	box-shadow: inset 0 0 0 0 var(--color-main-1) !important;
+	transition: box-shadow var(--duration-fast) var(--ease-out) !important;
 }
-/* ===== UTILITY COMBINATIONS ===== */
+.focus-indicator-inner:focus-visible {
+	box-shadow: inset 0 0 0 3px var(--color-main-1) !important;
+}
-/* 접근 가능한 버튼 */
+/* 둥근 포커스 표시자 */
-.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;
+.focus-indicator-rounded {
 	outline: 2px solid transparent !important;
 	outline-offset: 2px !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
+	border-radius: var(--radius-full) !important;
+	transition: outline-color var(--duration-fast) var(--ease-out) !important;
 }
-.accessible-button:focus-visible {
-	outline-color: var(--color-accent-1) !important;
+.focus-indicator-rounded:focus-visible {
+	outline-color: var(--color-main-1) !important;
 }
-.accessible-button:disabled {
-	opacity: var(--opacity-50) !important;
-	cursor: not-allowed !important;
-	pointer-events: none !important;
-}
+/* ===== BUTTON FOCUS STYLES (버튼 포커스 스타일) ===== */
-/* 접근 가능한 링크 */
+/* 기본 버튼 포커스 */
-.accessible-link {
-	color: var(--color-main-1) !important;
-	text-decoration: underline !important;
+.btn-focus {
+	position: relative !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;
+.btn-focus:focus-visible {
+	outline-color: var(--color-accent-1) !important;
+	transform: translateY(-1px) !important;
+	box-shadow: var(--shadow-md) !important;
 }
-/* ===== FOCUS UTILITIES ===== */
+/* 주요 버튼 포커스 */
-/* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
+.btn-focus-primary {
+	outline: 2px solid transparent !important;
+	outline-offset: 2px !important;
+	transition: all var(--duration-fast) var(--ease-out) !important;
+}
-/* 포커스 관리: outline, focus-visible, focus-within 등 */
+.btn-focus-primary:focus-visible {
+	outline-color: var(--color-base-1) !important;
+	box-shadow: 0 0 0 3px rgba(var(--rgb-main-1), 0.5) !important;
+}
-/* ===== OUTLINE STYLES (아웃라인 스타일) ===== */
+/* 보조 버튼 포커스 */
-/* outline: none */
+.btn-focus-secondary {
+	outline: 2px solid transparent !important;
+	outline-offset: 2px !important;
+	transition: all var(--duration-fast) var(--ease-out) !important;
+}
-.outline\:none {
-	outline: none !important;
+.btn-focus-secondary:focus-visible {
+	outline-color: var(--color-main-1) !important;
+	background-color: var(--color-base-1) !important;
 }
-/* outline: solid */
+/* ===== LINK FOCUS STYLES (링크 포커스 스타일) ===== */
-.outline\:solid {
-	outline: 2px solid var(--color-main-1) !important;
+/* 기본 링크 포커스 */
+.link-focus {
+	position: relative !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;
 }
-/* outline: dashed */
-.outline\:dashed {
-	outline: 2px dashed var(--color-main-1) !important;
-	outline-offset: 2px !important;
+.link-focus: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;
 }
-/* outline: dotted */
+/* 네비게이션 링크 포커스 */
-.outline\:dotted {
-	outline: 2px dotted var(--color-main-1) !important;
+.nav-link-focus {
+	outline: 2px solid transparent !important;
 	outline-offset: 2px !important;
+	border-radius: var(--radius-sm) !important;
+	transition: all var(--duration-fast) var(--ease-out) !important;
 }
-/* ===== OUTLINE WIDTH (아웃라인 두께) ===== */
-.outline-width\:1,
-.outline\:1 {
-	outline-width: 1px !important;
+.nav-link-focus:focus-visible {
+	outline-color: var(--color-accent-1) !important;
+	background-color: var(--color-base-1) !important;
 }
-.outline-width\:2,
-.outline\:2 {
-	outline-width: 2px !important;
-}
+/* ===== FORM FOCUS STYLES (폼 포커스 스타일) ===== */
-.outline-width\:3,
-.outline\:3 {
-	outline-width: 3px !important;
-}
+/* 입력 필드 포커스 */
-.outline-width\:4,
-.outline\:4 {
-	outline-width: 4px !important;
+.input-focus {
+	outline: 2px solid transparent !important;
+	border: 1px solid var(--color-base-4) !important;
+	transition: all var(--duration-fast) var(--ease-out) !important;
 }
-/* ===== OUTLINE COLOR (아웃라인 색상) ===== */
-.outline-color\:main-1,
-.outline\:main-1 {
+.input-focus:focus {
 	outline-color: var(--color-main-1) !important;
+	border-color: var(--color-main-1) !important;
+	box-shadow: 0 0 0 1px var(--color-main-1) !important;
 }
-.outline-color\:sub-1,
-.outline\:sub-1 {
-	outline-color: var(--color-sub-1) !important;
-}
+/* 체크박스/라디오 포커스 */
-.outline-color\:accent-1,
-.outline\:accent-1 {
-	outline-color: var(--color-accent-1) !important;
+.checkbox-focus,
+.radio-focus {
+	outline: 2px solid transparent !important;
+	outline-offset: 2px !important;
 }
-.outline-color\:base-1,
-.outline\:base-1 {
-	outline-color: var(--color-base-1) !important;
+.checkbox-focus:focus-visible,
+.radio-focus:focus-visible {
+	outline-color: var(--color-main-1) !important;
 }
-.outline-color\:base-10,
-.outline\:base-10 {
-	outline-color: var(--color-base-10) !important;
-}
+/* 셀렉트 박스 포커스 */
-.outline-color\:danger-1,
-.outline\:danger-1 {
-	outline-color: var(--color-danger-1) !important;
+.select-focus {
+	outline: 2px solid transparent !important;
+	border: 1px solid var(--color-base-4) !important;
+	transition: all var(--duration-fast) var(--ease-out) !important;
 }
-.outline-color\:success-1,
-.outline\:success-1 {
-	outline-color: var(--color-success-1) !important;
+.select-focus:focus {
+	outline-color: var(--color-main-1) !important;
+	border-color: var(--color-main-1) !important;
+	box-shadow: 0 0 0 1px var(--color-main-1) !important;
 }
-.outline-color\:warning-1,
-.outline\:warning-1 {
-	outline-color: var(--color-warning-1) !important;
-}
+/* ===== CUSTOM FOCUS STYLES (커스텀 포커스 스타일) ===== */
-/* ===== OUTLINE OFFSET (아웃라인 오프셋) ===== */
+/* 글로우 포커스 효과 */
-.outline-offset\:0 {
-	outline-offset: 0 !important;
+.focus-glow {
+	outline: none !important;
+	box-shadow: 0 0 0 0 rgba(var(--rgb-main-1), 0) !important;
+	transition: box-shadow var(--duration-fast) var(--ease-out) !important;
 }
-.outline-offset\:1 {
-	outline-offset: 1px !important;
+.focus-glow:focus-visible {
+	box-shadow: 0 0 0 4px rgba(var(--rgb-main-1), 0.3),
+		0 0 20px rgba(var(--rgb-main-1), 0.2) !important;
 }
-.outline-offset\:2 {
+/* 펄스 포커스 효과 */
+.focus-pulse {
+	outline: 2px solid transparent !important;
 	outline-offset: 2px !important;
+	transition: outline-color var(--duration-fast) var(--ease-out) !important;
 }
-.outline-offset\:4 {
-	outline-offset: 4px !important;
+.focus-pulse:focus-visible {
+	outline-color: var(--color-main-1) !important;
+	animation: focus-pulse-animation 1s ease-in-out infinite !important;
 }
-.outline-offset\:8 {
-	outline-offset: 8px !important;
+@keyframes focus-pulse-animation {
+	0%,
+	100% {
+		outline-color: var(--color-main-1);
+		outline-width: 2px;
+	}
+	50% {
+		outline-color: var(--color-main-2);
+		outline-width: 3px;
+	}
 }
-/* ===== FOCUS VISIBLE (포커스 가시성) ===== */
+/* ===== FOCUS MANAGEMENT (포커스 관리) ===== */
-/* 키보드 포커스만 표시 */
+/* 자동 포커스 */
-.focus-visible\:outline-main:focus-visible {
+.auto-focus {
 	outline: 2px solid var(--color-main-1) !important;
 	outline-offset: 2px !important;
 }
-.focus-visible\:outline-accent:focus-visible {
-	outline: 2px solid var(--color-accent-1) !important;
-	outline-offset: 2px !important;
-}
+/* 포커스 방지 */
-.focus-visible\:outline-base-1:focus-visible {
-	outline: 2px solid var(--color-base-1) !important;
-	outline-offset: 2px !important;
+.no-focus {
+	outline: none !important;
+	-webkit-tap-highlight-color: transparent !important;
 }
-.focus-visible\:outline-base-10:focus-visible {
-	outline: 2px solid var(--color-base-10) !important;
-	outline-offset: 2px !important;
+.no-focus:focus,
+.no-focus:focus-visible {
+	outline: none !important;
+	box-shadow: none !important;
 }
-/* 포커스 시 배경색 변경 */
+/* 키보드 전용 포커스 */
-.focus-visible\:bg-main-1:focus-visible {
-	background-color: var(--color-main-1) !important;
-	color: var(--color-base-1) !important;
+.keyboard-only-focus {
+	outline: none !important;
 }
-.focus-visible\:bg-accent-1:focus-visible {
-	background-color: var(--color-accent-1) !important;
-	color: var(--color-base-1) !important;
+.keyboard-only-focus:focus:not(:focus-visible) {
+	outline: none !important;
+	box-shadow: none !important;
 }
-.focus-visible\:bg-base-2:focus-visible {
-	background-color: var(--color-base-2) !important;
+.keyboard-only-focus:focus-visible {
+	outline: 2px solid var(--color-main-1) !important;
+	outline-offset: 2px !important;
 }
-/* 포커스 시 그림자 효과 */
+/* ===== RESPONSIVE FOCUS ===== */
-.focus-visible\:shadow-main:focus-visible {
-	box-shadow: 0 0 0 3px rgba(var(--rgb-main-1), 0.3) !important;
-}
+/* 모바일 포커스 최적화 */
-.focus-visible\:shadow-accent:focus-visible {
-	box-shadow: 0 0 0 3px rgba(var(--rgb-accent-1), 0.3) !important;
+@media (max-width: 767px) {
+	.focus-indicator,
+	.btn-focus,
+	.link-focus,
+	.input-focus {
+		outline-width: 3px !important;
+		outline-offset: 3px !important;
+	}
 }
-.focus-visible\:shadow-danger:focus-visible {
-	box-shadow: 0 0 0 3px rgba(var(--rgb-danger-1), 0.3) !important;
-}
+/* 터치 디바이스 포커스 */
-/* ===== FOCUS WITHIN (포커스 내부) ===== */
+@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 (모션 민감도) ===== */
-.focus-within\:outline-main:focus-within {
-	outline: 2px solid var(--color-main-1) !important;
-	outline-offset: 2px !important;
+@media (prefers-reduced-motion: reduce) {
+	.focus-indicator,
+	.btn-focus,
+	.link-focus,
+	.input-focus,
+	.focus-glow,
+	.focus-pulse {
+		transition: none !important;
+		animation: none !important;
+	}
 }
-.focus-within\:bg-base-1:focus-within {
-	background-color: var(--color-base-1) !important;
-}
+/* ===== HIGH CONTRAST MODE (고대비 모드) ===== */
-.focus-within\:border-main-1:focus-within {
-	border-color: var(--color-main-1) !important;
+@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;
+	}
 }
-.focus-within\:shadow-main:focus-within {
-	box-shadow: 0 0 0 3px rgba(var(--rgb-main-1), 0.2) !important;
-}
+/* ===== PRINT SUPPORT (프린트 지원) ===== */
-/* ===== FOCUS TRAP (포커스 트랩) ===== */
+/* ===== PRINT UTILITIES ===== */
-/* 모달/다이얼로그용 포커스 트랩 */
+/* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
-.focus-trap {
-	position: relative !important;
-}
+/* 프린트 최적화: @media print, page-break, ink saving 등 */
-.focus-trap::before,
-.focus-trap::after {
-	content: "" !important;
-	position: absolute !important;
-	width: 1px !important;
-	height: 1px !important;
-	overflow: hidden !important;
-	clip: rect(1px, 1px, 1px, 1px) !important;
-}
+/* ===== PRINT DISPLAY (프린트 표시/숨김) ===== */
-.focus-trap::before {
-	top: 0 !important;
-	left: 0 !important;
-}
+/* 프린트 시에만 표시 */
-.focus-trap::after {
-	bottom: 0 !important;
-	right: 0 !important;
+.print\:block {
+	display: none !important;
 }
-/* 포커스 가능한 첫 번째/마지막 요소 */
+@media print {
+	.print\:block {
+		display: block !important;
+	}
+}
-.focus-first {
-	position: relative !important;
+.print\:inline {
+	display: none !important;
 }
-.focus-last {
-	position: relative !important;
+@media print {
+	.print\:inline {
+		display: inline !important;
+	}
 }
-/* ===== FOCUS INDICATOR STYLES (포커스 표시자 스타일) ===== */
+.print\:inline-block {
+	display: none !important;
+}
-/* 기본 포커스 표시자 */
+@media print {
+	.print\:inline-block {
+		display: inline-block !important;
+	}
+}
-.focus-indicator {
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
-	border-radius: var(--radius-sm) !important;
-	transition: outline-color var(--duration-fast) var(--ease-out) !important;
+.print\:flex {
+	display: none !important;
 }
-.focus-indicator:focus-visible {
-	outline-color: var(--color-main-1) !important;
+@media print {
+	.print\:flex {
+		display: flex !important;
+	}
 }
-/* 고대비 포커스 표시자 */
+/* 프린트 시 숨김 */
-.focus-indicator-high-contrast {
-	outline: 3px solid transparent !important;
-	outline-offset: 3px !important;
-	transition: outline-color var(--duration-fast) var(--ease-out) !important;
+.print\:hidden {
+	display: block !important;
 }
-.focus-indicator-high-contrast:focus-visible {
-	outline-color: var(--color-base-10) !important;
-	background-color: var(--color-yellow) !important;
-	color: var(--color-base-10) !important;
+@media print {
+	.print\:hidden {
+		display: none !important;
+	}
 }
-/* 내부 포커스 표시자 (outline 대신 box-shadow 사용) */
+/* 화면에서만 표시 (프린트 시 숨김) */
-.focus-indicator-inner {
-	box-shadow: inset 0 0 0 0 var(--color-main-1) !important;
-	transition: box-shadow var(--duration-fast) var(--ease-out) !important;
+.screen-only {
+	display: block !important;
 }
-.focus-indicator-inner:focus-visible {
-	box-shadow: inset 0 0 0 3px var(--color-main-1) !important;
+@media print {
+	.screen-only {
+		display: none !important;
+	}
 }
-/* 둥근 포커스 표시자 */
+/* 프린트에서만 표시 (화면에서 숨김) */
-.focus-indicator-rounded {
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
-	border-radius: var(--radius-full) !important;
-	transition: outline-color var(--duration-fast) var(--ease-out) !important;
+.print-only {
+	display: none !important;
 }
-.focus-indicator-rounded:focus-visible {
-	outline-color: var(--color-main-1) !important;
+@media print {
+	.print-only {
+		display: block !important;
+	}
 }
-/* ===== BUTTON FOCUS STYLES (버튼 포커스 스타일) ===== */
+/* ===== PAGE BREAKS (페이지 나누기) ===== */
-/* 기본 버튼 포커스 */
+/* page-break-before */
-.btn-focus {
-	position: relative !important;
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
+.page-break-before\:auto {
+	page-break-before: auto !important;
 }
-.btn-focus:focus-visible {
-	outline-color: var(--color-accent-1) !important;
-	transform: translateY(-1px) !important;
-	box-shadow: var(--shadow-md) !important;
+.page-break-before\:always,
+.break-before\:page {
+	page-break-before: always !important;
 }
-/* 주요 버튼 포커스 */
+.page-break-before\:avoid,
+.break-before\:avoid {
+	page-break-before: avoid !important;
+}
-.btn-focus-primary {
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
+.page-break-before\:left,
+.break-before\:left {
+	page-break-before: left !important;
 }
-.btn-focus-primary:focus-visible {
-	outline-color: var(--color-base-1) !important;
-	box-shadow: 0 0 0 3px rgba(var(--rgb-main-1), 0.5) !important;
+.page-break-before\:right,
+.break-before\:right {
+	page-break-before: right !important;
 }
-/* 보조 버튼 포커스 */
+/* page-break-after */
-.btn-focus-secondary {
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
+.page-break-after\:auto {
+	page-break-after: auto !important;
 }
-.btn-focus-secondary:focus-visible {
-	outline-color: var(--color-main-1) !important;
-	background-color: var(--color-base-1) !important;
+.page-break-after\:always,
+.break-after\:page {
+	page-break-after: always !important;
 }
-/* ===== LINK FOCUS STYLES (링크 포커스 스타일) ===== */
-/* 기본 링크 포커스 */
-.link-focus {
-	position: relative !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;
-}
-.link-focus: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;
-}
-/* 네비게이션 링크 포커스 */
-.nav-link-focus {
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
-	border-radius: var(--radius-sm) !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
-}
-.nav-link-focus:focus-visible {
-	outline-color: var(--color-accent-1) !important;
-	background-color: var(--color-base-1) !important;
-}
-/* ===== FORM FOCUS STYLES (폼 포커스 스타일) ===== */
-/* 입력 필드 포커스 */
-.input-focus {
-	outline: 2px solid transparent !important;
-	border: 1px solid var(--color-base-4) !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
-}
-.input-focus:focus {
-	outline-color: var(--color-main-1) !important;
-	border-color: var(--color-main-1) !important;
-	box-shadow: 0 0 0 1px var(--color-main-1) !important;
-}
-/* 체크박스/라디오 포커스 */
-.checkbox-focus,
-.radio-focus {
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
-}
-.checkbox-focus:focus-visible,
-.radio-focus:focus-visible {
-	outline-color: var(--color-main-1) !important;
-}
-/* 셀렉트 박스 포커스 */
-.select-focus {
-	outline: 2px solid transparent !important;
-	border: 1px solid var(--color-base-4) !important;
-	transition: all var(--duration-fast) var(--ease-out) !important;
-}
-.select-focus:focus {
-	outline-color: var(--color-main-1) !important;
-	border-color: var(--color-main-1) !important;
-	box-shadow: 0 0 0 1px var(--color-main-1) !important;
-}
-/* ===== CUSTOM FOCUS STYLES (커스텀 포커스 스타일) ===== */
-/* 글로우 포커스 효과 */
-.focus-glow {
-	outline: none !important;
-	box-shadow: 0 0 0 0 rgba(var(--rgb-main-1), 0) !important;
-	transition: box-shadow var(--duration-fast) var(--ease-out) !important;
-}
-.focus-glow:focus-visible {
-	box-shadow: 0 0 0 4px rgba(var(--rgb-main-1), 0.3),
-		0 0 20px rgba(var(--rgb-main-1), 0.2) !important;
-}
-/* 펄스 포커스 효과 */
-.focus-pulse {
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
-	transition: outline-color var(--duration-fast) var(--ease-out) !important;
-}
-.focus-pulse:focus-visible {
-	outline-color: var(--color-main-1) !important;
-	animation: focus-pulse-animation 1s ease-in-out infinite !important;
-}
-@keyframes focus-pulse-animation {
-	0%,
-	100% {
-		outline-color: var(--color-main-1);
-		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;
-}
-.card-contrast:hover {
-	transform: translate(-2px, -2px) !important;
-	box-shadow: 6px 6px 0 var(--color-black) !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;
-}
-/* ===== 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;
-}
-/* 경고 알림 고대비 */
-.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;
-}
-/* 오류 알림 고대비 */
-.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;
-}
-/* 정보 알림 고대비 */
-.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;
-}
-/* ===== RESPONSIVE HIGH CONTRAST ===== */
-/* 모바일에서 고대비 최적화 */
-@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;
-	}
-}
-/* 큰 화면에서 고대비 최적화 */
-@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;
-	}
-}
-/* ===== 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;
-}
-/* 고대비 컨테이너 */
-.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;
-}
-/* ===== PRINT SUPPORT (프린트 지원) ===== */
-/* ===== PRINT UTILITIES ===== */
-/* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
-/* 프린트 최적화: @media print, page-break, ink saving 등 */
-/* ===== PRINT DISPLAY (프린트 표시/숨김) ===== */
-/* 프린트 시에만 표시 */
-.print\:block {
-	display: none !important;
-}
-@media print {
-	.print\:block {
-		display: block !important;
-	}
-}
-.print\:inline {
-	display: none !important;
-}
-@media print {
-	.print\:inline {
-		display: inline !important;
-	}
-}
-.print\:inline-block {
-	display: none !important;
-}
-@media print {
-	.print\:inline-block {
-		display: inline-block !important;
-	}
-}
-.print\:flex {
-	display: none !important;
-}
-@media print {
-	.print\:flex {
-		display: flex !important;
-	}
-}
-/* 프린트 시 숨김 */
-.print\:hidden {
-	display: block !important;
-}
-@media print {
-	.print\:hidden {
-		display: none !important;
-	}
-}
-/* 화면에서만 표시 (프린트 시 숨김) */
-.screen-only {
-	display: block !important;
-}
-@media print {
-	.screen-only {
-		display: none !important;
-	}
-}
-/* 프린트에서만 표시 (화면에서 숨김) */
-.print-only {
-	display: none !important;
-}
-@media print {
-	.print-only {
-		display: block !important;
-	}
-}
-/* ===== PAGE BREAKS (페이지 나누기) ===== */
-/* page-break-before */
-.page-break-before\:auto {
-	page-break-before: auto !important;
-}
-.page-break-before\:always,
-.break-before\:page {
-	page-break-before: always !important;
-}
-.page-break-before\:avoid,
-.break-before\:avoid {
-	page-break-before: avoid !important;
-}
-.page-break-before\:left,
-.break-before\:left {
-	page-break-before: left !important;
-}
-.page-break-before\:right,
-.break-before\:right {
-	page-break-before: right !important;
-}
-/* page-break-after */
-.page-break-after\:auto {
-	page-break-after: auto !important;
-}
-.page-break-after\:always,
-.break-after\:page {
-	page-break-after: always !important;
-}
-.page-break-after\:avoid,
-.break-after\:avoid {
-	page-break-after: avoid !important;
-}
-.page-break-after\:left,
-.break-after\:left {
-	page-break-after: left !important;
-}
-.page-break-after\:right,
-.break-after\:right {
-	page-break-after: right !important;
-}
-/* page-break-inside */
-.page-break-inside\:auto {
-	page-break-inside: auto !important;
-}
-.page-break-inside\:avoid,
-.break-inside\:avoid {
-	page-break-inside: avoid !important;
-}
-/* ===== MODERN BREAK PROPERTIES (현대적 나누기 속성) ===== */
-/* break-before */
-.break-before\:auto {
-	break-before: auto !important;
-}
-.break-before\:avoid {
-	break-before: avoid !important;
-}
-.break-before\:page {
-	break-before: page !important;
-}
-.break-before\:left {
-	break-before: left !important;
-}
-.break-before\:right {
-	break-before: right !important;
-}
-.break-before\:column {
-	break-before: column !important;
-}
-/* break-after */
-.break-after\:auto {
-	break-after: auto !important;
-}
-.break-after\:avoid {
-	break-after: avoid !important;
-}
-.break-after\:page {
-	break-after: page !important;
-}
-.break-after\:left {
-	break-after: left !important;
-}
-.break-after\:right {
-	break-after: right !important;
-}
-.break-after\:column {
-	break-after: column !important;
-}
-/* break-inside */
-.break-inside\:auto {
-	break-inside: auto !important;
-}
-.break-inside\:avoid {
-	break-inside: avoid !important;
-}
-.break-inside\:avoid-page {
-	break-inside: avoid-page !important;
-}
-.break-inside\:avoid-column {
-	break-inside: avoid-column !important;
-}
-/* ===== PRINT COLORS (프린트 색상) ===== */
-/* 프린트 시 색상 조정 */
-@media print {
-	.print\:text-black {
-		color: black !important;
-	}
-	.print\:bg-white {
-		background-color: white !important;
-	}
-	.print\:bg-transparent {
-		background-color: transparent !important;
-	}
-	.print\:border-black {
-		border-color: black !important;
-	}
-	.print\:border-gray {
-		border-color: #666 !important;
-	}
-}
-/* 잉크 절약 모드 */
-.ink-saving {
-	background: white !important;
-	color: black !important;
-	border-color: black !important;
-}
-@media print {
-	.ink-saving {
-		background: transparent !important;
-		box-shadow: none !important;
-		text-shadow: none !important;
-	}
-	.ink-saving img {
-		opacity: 0.8 !important;
-		filter: grayscale(100%) !important;
-	}
-}
-/* 프린트 시 그래디언트 제거 */
-@media print {
-	.print\:no-gradient {
-		background-image: none !important;
-		background: white !important;
-	}
-}
-/* ===== PRINT TYPOGRAPHY (프린트 타이포그래피) ===== */
-/* 프린트 시 글꼴 크기 조정 */
-@media print {
-	.print\:text-xs {
-		font-size: 10pt !important;
-	}
-	.print\:text-sm {
-		font-size: 11pt !important;
-	}
-	.print\:text-base {
-		font-size: 12pt !important;
-	}
-	.print\:text-lg {
-		font-size: 14pt !important;
-	}
-	.print\:text-xl {
-		font-size: 16pt !important;
-	}
-	.print\:text-2xl {
-		font-size: 18pt !important;
-	}
-	.print\:text-3xl {
-		font-size: 24pt !important;
-	}
-}
-/* 프린트 시 폰트 최적화 */
-@media print {
-	.print-optimized {
-		font-family: "Times New Roman", serif !important;
-		line-height: 1.4 !important;
-		color: black !important;
-	}
-	.print-optimized h1,
-	.print-optimized h2,
-	.print-optimized h3,
-	.print-optimized h4,
-	.print-optimized h5,
-	.print-optimized h6 {
-		color: black !important;
-		page-break-after: avoid !important;
-	}
-	.print-optimized p {
-		orphans: 3 !important;
-		widows: 3 !important;
-	}
-}
-/* ===== PRINT LAYOUT (프린트 레이아웃) ===== */
-/* 프린트 시 마진/패딩 조정 */
-@media print {
-	.print\:m-0 {
-		margin: 0 !important;
-	}
-	.print\:p-0 {
-		padding: 0 !important;
-	}
-	.print\:m-2 {
-		margin: 0.5cm !important;
-	}
-	.print\:p-2 {
-		padding: 0.5cm !important;
-	}
-	.print\:m-4 {
-		margin: 1cm !important;
-	}
-	.print\:p-4 {
-		padding: 1cm !important;
-	}
-}
-/* 프린트 시 폭 조정 */
-@media print {
-	.print\:w-full {
-		width: 100% !important;
-	}
-	.print\:w-1\/2 {
-		width: 50% !important;
-	}
-	.print\:w-1\/3 {
-		width: 33.333333% !important;
-	}
-	.print\:w-2\/3 {
-		width: 66.666667% !important;
-	}
-	.print\:w-1\/4 {
-		width: 25% !important;
-	}
-	.print\:w-3\/4 {
-		width: 75% !important;
-	}
-}
-/* ===== PRINT TABLES (프린트 테이블) ===== */
-/* 테이블 프린트 최적화 */
-.print-table {
-	width: 100% !important;
-	border-collapse: collapse !important;
-}
-@media print {
-	.print-table {
-		page-break-inside: auto !important;
-	}
-	.print-table thead {
-		display: table-header-group !important;
-	}
-	.print-table tbody {
-		display: table-row-group !important;
-	}
-	.print-table tr {
-		page-break-inside: avoid !important;
-	}
-	.print-table th,
-	.print-table td {
-		border: 1pt solid black !important;
-		padding: 0.25cm !important;
-		font-size: 10pt !important;
-	}
-	.print-table th {
-		background-color: #f0f0f0 !important;
-		font-weight: bold !important;
-	}
-}
-/* ===== PRINT LINKS (프린트 링크) ===== */
-/* 링크 URL 표시 */
-@media print {
-	.print-urls a:after {
-		content: " (" attr(href) ")" !important;
-		font-size: smaller !important;
-		color: #666 !important;
-	}
-	.print-urls a[href^="mailto:"]:after {
-		content: " (" attr(href) ")" !important;
-	}
-	.print-urls a[href^="tel:"]:after {
-		content: " (" attr(href) ")" !important;
-	}
-	/* 내부 링크는 URL 표시하지 않음 */
-	.print-urls a[href^="#"]:after,
-	.print-urls a[href^="/"]:after {
-		content: "" !important;
-	}
-}
-/* 링크 스타일 제거 */
-@media print {
-	.print-no-links a {
-		color: black !important;
-		text-decoration: none !important;
-	}
-}
-/* ===== PRINT IMAGES (프린트 이미지) ===== */
-/* 이미지 프린트 최적화 */
-@media print {
-	.print-img-optimize img {
-		max-width: 100% !important;
-		height: auto !important;
-		page-break-inside: avoid !important;
-		filter: grayscale(100%) !important; /* 잉크 절약 */
-	}
-	.print-img-full img {
-		max-width: 100% !important;
-		height: auto !important;
-		page-break-inside: avoid !important;
-	}
-	.print-img-small img {
-		max-width: 50% !important;
-		height: auto !important;
-	}
-	.print-img-hide img {
-		display: none !important;
-	}
-}
-/* ===== PRINT HEADERS & FOOTERS (프린트 헤더/푸터) ===== */
-/* 페이지 헤더/푸터 스타일 */
-@media print {
-	.print-header {
-		position: fixed !important;
-		top: 0 !important;
-		left: 0 !important;
-		right: 0 !important;
-		height: 1cm !important;
-		background: white !important;
-		border-bottom: 1pt solid black !important;
-		padding: 0.25cm !important;
-		font-size: 10pt !important;
-		text-align: center !important;
-	}
-	.print-footer {
-		position: fixed !important;
-		bottom: 0 !important;
-		left: 0 !important;
-		right: 0 !important;
-		height: 1cm !important;
-		background: white !important;
-		border-top: 1pt solid black !important;
-		padding: 0.25cm !important;
-		font-size: 10pt !important;
-		text-align: center !important;
-	}
-	.print-content {
-		margin-top: 1.5cm !important;
-		margin-bottom: 1.5cm !important;
-	}
-}
-/* ===== PRINT SECTIONS (프린트 섹션) ===== */
-/* 섹션별 페이지 나누기 */
-.print-section {
-	page-break-before: auto !important;
-	page-break-after: avoid !important;
-	page-break-inside: avoid !important;
-}
-@media print {
-	.print-section-new-page {
-		page-break-before: always !important;
-	}
-	.print-section-avoid-break {
-		page-break-inside: avoid !important;
-	}
-	.print-section-keep-together {
-		page-break-before: avoid !important;
-		page-break-after: avoid !important;
-		page-break-inside: avoid !important;
-	}
-}
-/* ===== PRINT FORMS (프린트 폼) ===== */
-/* 폼 요소 프린트 최적화 */
-@media print {
-	.print-form input,
-	.print-form select,
-	.print-form textarea {
-		border: 1pt solid black !important;
-		background: white !important;
-		color: black !important;
-		padding: 0.1cm !important;
-		font-size: 10pt !important;
-	}
-	.print-form input[type="checkbox"],
-	.print-form input[type="radio"] {
-		width: 0.4cm !important;
-		height: 0.4cm !important;
-	}
-	.print-form label {
-		font-weight: bold !important;
-		color: black !important;
-	}
-	/* 빈 입력 필드에 밑줄 표시 */
-	.print-form input:not([value]),
-	.print-form input[value=""] {
-		border-bottom: 1pt solid black !important;
-		border-top: none !important;
-		border-left: none !important;
-		border-right: none !important;
-		background: transparent !important;
-		min-width: 3cm !important;
-	}
-}
-/* ===== PRINT UTILITIES (프린트 유틸리티) ===== */
-/* 프린트 최적화 기본 설정 */
-.print-optimized-page {
-	font-size: 12pt !important;
-	line-height: 1.4 !important;
-	color: black !important;
-	background: white !important;
-}
-@media print {
-	.print-optimized-page {
-		margin: 2cm !important;
-		font-family: "Times New Roman", serif !important;
-	}
-	.print-optimized-page * {
-		color: black !important;
-		background: transparent !important;
-		box-shadow: none !important;
-		text-shadow: none !important;
-	}
-	.print-optimized-page img {
-		max-width: 100% !important;
-		height: auto !important;
-		page-break-inside: avoid !important;
-	}
-	.print-optimized-page h1,
-	.print-optimized-page h2,
-	.print-optimized-page h3,
-	.print-optimized-page h4,
-	.print-optimized-page h5,
-	.print-optimized-page h6 {
-		page-break-after: avoid !important;
-		margin-top: 1em !important;
-		margin-bottom: 0.5em !important;
-	}
-	.print-optimized-page p,
-	.print-optimized-page li {
-		orphans: 3 !important;
-		widows: 3 !important;
-	}
-	.print-optimized-page blockquote,
-	.print-optimized-page pre {
-		page-break-inside: avoid !important;
-		border-left: 2pt solid black !important;
-		padding-left: 0.5cm !important;
-		margin: 1em 0 !important;
-	}
-}
-/* QR 코드/바코드용 */
-@media print {
-	.print-qr,
-	.print-barcode {
-		page-break-inside: avoid !important;
-		filter: none !important; /* 그레이스케일 제거 */
-	}
-}
-/* 프린트 프리뷰 시 시뮬레이션 */
-.print-preview {
-	background: white !important;
-	color: black !important;
-	font-family: "Times New Roman", serif !important;
-	font-size: 12pt !important;
-	line-height: 1.4 !important;
-	max-width: 21cm !important; /* A4 폭 */
-	margin: 0 auto !important;
-	padding: 2cm !important;
-	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
-}
-/* ===== PAGE ORIENTATION (페이지 방향) ===== */
-/* 가로 방향 페이지 */
-@page landscape {
-	size: landscape;
-}
-.print-landscape {
-	page: landscape !important;
-}
-/* 세로 방향 페이지 */
-@page portrait {
-	size: portrait;
-}
-.print-portrait {
-	page: portrait !important;
-}
-/* ===== PAGE SIZE (페이지 크기) ===== */
-@page {
-	margin: 2cm;
-	size: A4;
-}
-@page A4 {
-	size: A4;
-	margin: 2cm;
-}
-@page letter {
-	size: letter;
-	margin: 1in;
-}
-/* ===== PRINT DEBUGGING (프린트 디버깅) ===== */
-/* 개발 시 프린트 스타일 확인용 */
-.print-debug {
-	outline: 1px solid red !important;
-}
-@media print {
-	.print-debug {
-		outline: 1pt solid black !important;
-	}
-	.print-debug::before {
-		content: "PRINT DEBUG" !important;
-		display: block !important;
-		background: yellow !important;
-		color: black !important;
-		font-size: 8pt !important;
-		padding: 2pt !important;
-		margin-bottom: 2pt !important;
-	}
+.page-break-after\:avoid,
+.break-after\:avoid {
+	page-break-after: avoid !important;
+}
+.page-break-after\:left,
+.break-after\:left {
+	page-break-after: left !important;
 }
-/* ===== BROWSER COMPATIBILITY (브라우저 호환성) ===== */
+.page-break-after\:right,
+.break-after\:right {
+	page-break-after: right !important;
+}
-/* ===== BROWSER COMPATIBILITY UTILITIES ===== */
+/* page-break-inside */
-/* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
+.page-break-inside\:auto {
+	page-break-inside: auto !important;
+}
-/* 브라우저 호환성: vendor prefixes, feature detection, fallbacks 등 */
+.page-break-inside\:avoid,
+.break-inside\:avoid {
+	page-break-inside: avoid !important;
+}
-/* ===== VENDOR PREFIXES (벤더 프리픽스) ===== */
+/* ===== MODERN BREAK PROPERTIES (현대적 나누기 속성) ===== */
-/* Transform 호환성 */
+/* break-before */
-.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;
+.break-before\:auto {
+	break-before: auto !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;
+.break-before\:avoid {
+	break-before: avoid !important;
 }
-/* Animation 호환성 */
+.break-before\:page {
+	break-before: page !important;
+}
-.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;
+.break-before\:left {
+	break-before: left !important;
 }
-/* Box Shadow 호환성 */
+.break-before\:right {
+	break-before: right !important;
+}
-.box-shadow-compat {
-	-webkit-box-shadow: var(--shadow, none) !important;
-	-moz-box-shadow: var(--shadow, none) !important;
-	box-shadow: var(--shadow, none) !important;
+.break-before\:column {
+	break-before: column !important;
 }
-/* Border Radius 호환성 */
+/* break-after */
-.border-radius-compat {
-	-webkit-border-radius: var(--radius, 0) !important;
-	-moz-border-radius: var(--radius, 0) !important;
-	border-radius: var(--radius, 0) !important;
+.break-after\:auto {
+	break-after: auto !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;
+.break-after\:avoid {
+	break-after: avoid !important;
 }
-/* ===== FLEXBOX COMPATIBILITY (플렉스박스 호환성) ===== */
+.break-after\:page {
+	break-after: page !important;
+}
-/* 구 버전 Flexbox 지원 */
+.break-after\:left {
+	break-after: left !important;
+}
-.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; /* 표준 */
+.break-after\:right {
+	break-after: right !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;
+.break-after\:column {
+	break-after: column !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;
+/* break-inside */
+.break-inside\:auto {
+	break-inside: auto !important;
 }
-.justify-content-center-compat {
-	-webkit-box-pack: center !important;
-	-webkit-justify-content: center !important;
-	-ms-flex-pack: center !important;
-	justify-content: center !important;
+.break-inside\:avoid {
+	break-inside: avoid !important;
 }
-.align-items-center-compat {
-	-webkit-box-align: center !important;
-	-webkit-align-items: center !important;
-	-ms-flex-align: center !important;
-	align-items: center !important;
+.break-inside\:avoid-page {
+	break-inside: avoid-page !important;
 }
-.flex-1-compat {
-	-webkit-box-flex: 1 !important;
-	-webkit-flex: 1 !important;
-	-ms-flex: 1 !important;
-	flex: 1 !important;
+.break-inside\:avoid-column {
+	break-inside: avoid-column !important;
 }
-/* ===== GRID COMPATIBILITY (그리드 호환성) ===== */
+/* ===== PRINT COLORS (프린트 색상) ===== */
+/* 프린트 시 색상 조정 */
-/* CSS Grid 호환성 */
+@media print {
+	.print\:text-black {
+		color: black !important;
+	}
-.grid-compat {
-	display: -ms-grid !important; /* IE 10-11 */
-	display: grid !important; /* 표준 */
-}
+	.print\:bg-white {
+		background-color: white !important;
+	}
-/* IE Grid 폴백 */
+	.print\:bg-transparent {
+		background-color: transparent !important;
+	}
-@supports not (display: grid) {
-	.grid-compat {
-		display: flex !important;
-		flex-wrap: wrap !important;
+	.print\:border-black {
+		border-color: black !important;
 	}
-	.grid-compat > * {
-		flex: 1 !important;
-		min-width: 0 !important;
+	.print\:border-gray {
+		border-color: #666 !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;
+.ink-saving {
+	background: white !important;
+	color: black !important;
+	border-color: black !important;
 }
-.user-select-all-compat {
-	-webkit-user-select: all !important;
-	-moz-user-select: all !important;
-	-ms-user-select: all !important;
-	user-select: all !important;
-}
+@media print {
+	.ink-saving {
+		background: transparent !important;
+		box-shadow: none !important;
+		text-shadow: none !important;
+	}
-.user-select-text-compat {
-	-webkit-user-select: text !important;
-	-moz-user-select: text !important;
-	-ms-user-select: text !important;
-	user-select: text !important;
+	.ink-saving img {
+		opacity: 0.8 !important;
+		filter: grayscale(100%) !important;
+	}
 }
-/* ===== APPEARANCE COMPATIBILITY (외형 호환성) ===== */
+/* 프린트 시 그래디언트 제거 */
-.appearance-none-compat {
-	-webkit-appearance: none !important;
-	-moz-appearance: none !important;
-	-ms-appearance: none !important;
-	appearance: none !important;
+@media print {
+	.print\:no-gradient {
+		background-image: none !important;
+		background: white !important;
+	}
 }
-/* ===== BACKDROP FILTER COMPATIBILITY (백드롭 필터 호환성) ===== */
+/* ===== PRINT TYPOGRAPHY (프린트 타이포그래피) ===== */
-.backdrop-filter-compat {
-	-webkit-backdrop-filter: var(--backdrop-filter, none) !important;
-	backdrop-filter: var(--backdrop-filter, none) !important;
-}
+/* 프린트 시 글꼴 크기 조정 */
+@media print {
+	.print\:text-xs {
+		font-size: 10pt !important;
+	}
-/* 백드롭 필터 미지원 시 폴백 */
+	.print\:text-sm {
+		font-size: 11pt !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;
+	.print\:text-base {
+		font-size: 12pt !important;
 	}
-	.backdrop-filter-fallback.dark {
-		background-color: rgba(0, 0, 0, 0.8) !important;
+	.print\:text-lg {
+		font-size: 14pt !important;
 	}
-}
-/* ===== STICKY POSITION COMPATIBILITY (스티키 포지션 호환성) ===== */
+	.print\:text-xl {
+		font-size: 16pt !important;
+	}
-.sticky-compat {
-	position: -webkit-sticky !important;
-	position: sticky !important;
+	.print\:text-2xl {
+		font-size: 18pt !important;
+	}
+	.print\:text-3xl {
+		font-size: 24pt !important;
+	}
 }
-/* Sticky 미지원 시 폴백 */
+/* 프린트 시 폰트 최적화 */
-@supports not (position: sticky) {
-	.sticky-fallback {
-		position: fixed !important;
-		top: 0 !important;
-		z-index: var(--z-index-fixed, 1000) !important;
+@media print {
+	.print-optimized {
+		font-family: "Times New Roman", serif !important;
+		line-height: 1.4 !important;
+		color: black !important;
 	}
-}
-/* ===== OBJECT FIT COMPATIBILITY (오브젝트 핏 호환성) ===== */
+	.print-optimized h1,
+	.print-optimized h2,
+	.print-optimized h3,
+	.print-optimized h4,
+	.print-optimized h5,
+	.print-optimized h6 {
+		color: black !important;
+		page-break-after: avoid !important;
+	}
-.object-fit-cover-compat {
-	object-fit: cover !important;
-	object-position: center !important;
+	.print-optimized p {
+		orphans: 3 !important;
+		widows: 3 !important;
+	}
 }
-/* Object-fit 미지원 시 폴백 */
+/* ===== PRINT LAYOUT (프린트 레이아웃) ===== */
-@supports not (object-fit: cover) {
-	.object-fit-cover-fallback {
-		position: relative !important;
-		overflow: hidden !important;
+/* 프린트 시 마진/패딩 조정 */
+@media print {
+	.print\:m-0 {
+		margin: 0 !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;
+	.print\:p-0 {
+		padding: 0 !important;
 	}
-}
-/* ===== ASPECT RATIO COMPATIBILITY (종횡비 호환성) ===== */
+	.print\:m-2 {
+		margin: 0.5cm !important;
+	}
-/* Aspect Ratio 호환성 (padding-top hack) */
+	.print\:p-2 {
+		padding: 0.5cm !important;
+	}
-@supports not (aspect-ratio: 1 / 1) {
-	.aspect-ratio-fallback {
-		position: relative !important;
-		overflow: hidden !important;
+	.print\:m-4 {
+		margin: 1cm !important;
 	}
-	.aspect-ratio-fallback::before {
-		content: "" !important;
-		display: block !important;
-		padding-top: var(--aspect-ratio-percent, 100%) !important;
+	.print\:p-4 {
+		padding: 1cm !important;
 	}
+}
-	.aspect-ratio-fallback > * {
-		position: absolute !important;
-		top: 0 !important;
-		left: 0 !important;
+/* 프린트 시 폭 조정 */
+@media print {
+	.print\:w-full {
 		width: 100% !important;
-		height: 100% !important;
+	}
+	.print\:w-1\/2 {
+		width: 50% !important;
+	}
+	.print\:w-1\/3 {
+		width: 33.333333% !important;
+	}
+	.print\:w-2\/3 {
+		width: 66.666667% !important;
+	}
+	.print\:w-1\/4 {
+		width: 25% !important;
+	}
+	.print\:w-3\/4 {
+		width: 75% !important;
 	}
 }
-/* ===== SCROLL BEHAVIOR COMPATIBILITY (스크롤 동작 호환성) ===== */
+/* ===== PRINT TABLES (프린트 테이블) ===== */
-.scroll-smooth-compat {
-	scroll-behavior: smooth !important;
+/* 테이블 프린트 최적화 */
+.print-table {
+	width: 100% !important;
+	border-collapse: collapse !important;
 }
-/* Smooth scroll 미지원 시 폴백 */
+@media print {
+	.print-table {
+		page-break-inside: auto !important;
+	}
-@supports not (scroll-behavior: smooth) {
-	.scroll-smooth-js {
-		/* JavaScript로 부드러운 스크롤 구현 필요 */
-		scroll-behavior: auto !important;
+	.print-table thead {
+		display: table-header-group !important;
 	}
-}
-/* ===== CONTAINER QUERIES COMPATIBILITY (컨테이너 쿼리 호환성) ===== */
+	.print-table tbody {
+		display: table-row-group !important;
+	}
-/* Container Queries 미지원 시 폴백 */
+	.print-table tr {
+		page-break-inside: avoid !important;
+	}
-@supports not (container-type: inline-size) {
-	.container-fallback {
-		/* 미디어 쿼리로 대체 */
-		width: 100% !important;
+	.print-table th,
+	.print-table td {
+		border: 1pt solid black !important;
+		padding: 0.25cm !important;
+		font-size: 10pt !important;
 	}
-	@media (min-width: 400px) {
-		.container-fallback {
-			/* 컨테이너 쿼리 대신 미디어 쿼리 사용 */
-		}
+	.print-table th {
+		background-color: #f0f0f0 !important;
+		font-weight: bold !important;
 	}
 }
-/* ===== CLAMP FUNCTION COMPATIBILITY (clamp 함수 호환성) ===== */
+/* ===== PRINT LINKS (프린트 링크) ===== */
+/* 링크 URL 표시 */
-/* clamp() 미지원 시 폴백 */
+@media print {
+	.print-urls a:after {
+		content: " (" attr(href) ")" !important;
+		font-size: smaller !important;
+		color: #666 !important;
+	}
-@supports not (font-size: clamp(1rem, 4vw, 2rem)) {
-	.clamp-fallback {
-		font-size: 1.25rem !important; /* 중간값으로 폴백 */
+	.print-urls a[href^="mailto:"]:after {
+		content: " (" attr(href) ")" !important;
 	}
-	@media (min-width: 768px) {
-		.clamp-fallback {
-			font-size: 1.5rem !important;
-		}
+	.print-urls a[href^="tel:"]:after {
+		content: " (" attr(href) ")" !important;
 	}
-	@media (min-width: 1200px) {
-		.clamp-fallback {
-			font-size: 2rem !important;
-		}
+	/* 내부 링크는 URL 표시하지 않음 */
+	.print-urls a[href^="#"]:after,
+	.print-urls a[href^="/"]:after {
+		content: "" !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;
+@media print {
+	.print-no-links a {
+		color: black !important;
+		text-decoration: none !important;
 	}
 }
-/* ===== INTERNET EXPLORER SPECIFIC (Internet Explorer 전용) ===== */
-/* IE 조건부 클래스 */
-.ie-only {
-	display: none !important;
-}
+/* ===== PRINT IMAGES (프린트 이미지) ===== */
-/* IE에서만 표시 */
+/* 이미지 프린트 최적화 */
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-	.ie-only {
-		display: block !important;
+@media print {
+	.print-img-optimize img {
+		max-width: 100% !important;
+		height: auto !important;
+		page-break-inside: avoid !important;
+		filter: grayscale(100%) !important; /* 잉크 절약 */
 	}
-	.ie-hide {
-		display: none !important;
+	.print-img-full img {
+		max-width: 100% !important;
+		height: auto !important;
+		page-break-inside: avoid !important;
 	}
-}
-/* IE 그리드 레이아웃 수정 */
+	.print-img-small img {
+		max-width: 50% !important;
+		height: auto !important;
+	}
-@supports (-ms-grid-columns: 1fr) {
-	.ie-grid-fix {
-		-ms-grid-columns: 1fr !important;
-		-ms-grid-rows: auto !important;
+	.print-img-hide img {
+		display: none !important;
 	}
 }
-/* ===== SAFARI SPECIFIC (Safari 전용) ===== */
+/* ===== PRINT HEADERS & FOOTERS (프린트 헤더/푸터) ===== */
-/* Safari 버그 수정 */
+/* 페이지 헤더/푸터 스타일 */
-@supports (-webkit-touch-callout: none) {
-	.safari-fix {
-		-webkit-transform: translateZ(0) !important; /* 하드웨어 가속 */
+@media print {
+	.print-header {
+		position: fixed !important;
+		top: 0 !important;
+		left: 0 !important;
+		right: 0 !important;
+		height: 1cm !important;
+		background: white !important;
+		border-bottom: 1pt solid black !important;
+		padding: 0.25cm !important;
+		font-size: 10pt !important;
+		text-align: center !important;
 	}
-}
-/* iOS Safari 뷰포트 높이 수정 */
-@supports (-webkit-touch-callout: none) {
-	.ios-viewport-fix {
-		height: -webkit-fill-available !important;
+	.print-footer {
+		position: fixed !important;
+		bottom: 0 !important;
+		left: 0 !important;
+		right: 0 !important;
+		height: 1cm !important;
+		background: white !important;
+		border-top: 1pt solid black !important;
+		padding: 0.25cm !important;
+		font-size: 10pt !important;
+		text-align: center !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;
+	.print-content {
+		margin-top: 1.5cm !important;
+		margin-bottom: 1.5cm !important;
 	}
 }
-/* ===== FEATURE DETECTION (기능 감지) ===== */
+/* ===== PRINT SECTIONS (프린트 섹션) ===== */
-/* Hover 지원 감지 */
+/* 섹션별 페이지 나누기 */
-@media (hover: hover) {
-	.hover-supported:hover {
-		background-color: var(--color-base-2) !important;
-		transform: translateY(-2px) !important;
-	}
+.print-section {
+	page-break-before: auto !important;
+	page-break-after: avoid !important;
+	page-break-inside: avoid !important;
 }
-@media (hover: none) {
-	.hover-not-supported {
-		/* 터치 디바이스용 스타일 */
-		padding: var(--space-4) !important;
-		font-size: 1.125rem !important;
+@media print {
+	.print-section-new-page {
+		page-break-before: always !important;
 	}
-}
-/* Pointer 정밀도 감지 */
-@media (pointer: fine) {
-	.fine-pointer {
-		/* 마우스/트랙패드용 */
-		cursor: pointer !important;
+	.print-section-avoid-break {
+		page-break-inside: avoid !important;
 	}
-}
-@media (pointer: coarse) {
-	.coarse-pointer {
-		/* 터치용 */
-		min-height: 44px !important; /* 터치 최소 크기 */
-		min-width: 44px !important;
+	.print-section-keep-together {
+		page-break-before: avoid !important;
+		page-break-after: avoid !important;
+		page-break-inside: avoid !important;
 	}
 }
-/* ===== REDUCED MOTION COMPATIBILITY (모션 감소 호환성) ===== */
-/* 모션 감소 미지원 시 폴백 */
+/* ===== PRINT FORMS (프린트 폼) ===== */
-.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;
+@media print {
+	.print-form input,
+	.print-form select,
+	.print-form textarea {
+		border: 1pt solid black !important;
+		background: white !important;
+		color: black !important;
+		padding: 0.1cm !important;
+		font-size: 10pt !important;
 	}
-}
-/* ===== HIGH CONTRAST MODE COMPATIBILITY (고대비 모드 호환성) ===== */
-/* Windows 고대비 모드 감지 */
-@media (-ms-high-contrast: active) {
-	.high-contrast-mode {
-		border: 1px solid !important;
-		background: ButtonFace !important;
-		color: ButtonText !important;
+	.print-form input[type="checkbox"],
+	.print-form input[type="radio"] {
+		width: 0.4cm !important;
+		height: 0.4cm !important;
 	}
-}
-/* ===== COLOR SCHEME COMPATIBILITY (색상 스킴 호환성) ===== */
-/* 다크 모드 미지원 시 폴백 */
-@media (prefers-color-scheme: dark) {
-	.dark-mode-supported {
-		background-color: var(--color-base-9) !important;
-		color: var(--color-white) !important;
+	.print-form label {
+		font-weight: bold !important;
+		color: black !important;
 	}
-}
-/* 다크 모드 감지 불가능한 경우 */
-@supports not (color-scheme: dark) {
-	.dark-mode-fallback {
-		/* JavaScript로 다크 모드 토글 구현 필요 */
+	/* 빈 입력 필드에 밑줄 표시 */
+	.print-form input:not([value]),
+	.print-form input[value=""] {
+		border-bottom: 1pt solid black !important;
+		border-top: none !important;
+		border-left: none !important;
+		border-right: none !important;
+		background: transparent !important;
+		min-width: 3cm !important;
 	}
 }
-/* ===== PRINT COMPATIBILITY (프린트 호환성) ===== */
+/* ===== PRINT UTILITIES (프린트 유틸리티) ===== */
+/* 프린트 최적화 기본 설정 */
-/* 프린트 시 웹폰트 폴백 */
+.print-optimized-page {
+	font-size: 12pt !important;
+	line-height: 1.4 !important;
+	color: black !important;
+	background: white !important;
+}
 @media print {
-	.print-font-fallback {
+	.print-optimized-page {
+		margin: 2cm !important;
 		font-family: "Times New Roman", serif !important;
 	}
-	.print-safe {
+	.print-optimized-page * {
 		color: black !important;
-		background: white !important;
-		text-shadow: none !important;
+		background: transparent !important;
 		box-shadow: none !important;
+		text-shadow: none !important;
+	}
+	.print-optimized-page img {
+		max-width: 100% !important;
+		height: auto !important;
+		page-break-inside: avoid !important;
 	}
-}
-/* ===== BROWSER DETECTION UTILITIES (브라우저 감지 유틸리티) ===== */
+	.print-optimized-page h1,
+	.print-optimized-page h2,
+	.print-optimized-page h3,
+	.print-optimized-page h4,
+	.print-optimized-page h5,
+	.print-optimized-page h6 {
+		page-break-after: avoid !important;
+		margin-top: 1em !important;
+		margin-bottom: 0.5em !important;
+	}
-/* Chromium 기반 브라우저 감지 */
+	.print-optimized-page p,
+	.print-optimized-page li {
+		orphans: 3 !important;
+		widows: 3 !important;
+	}
-@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
-	.chromium-only {
-		display: block !important;
+	.print-optimized-page blockquote,
+	.print-optimized-page pre {
+		page-break-inside: avoid !important;
+		border-left: 2pt solid black !important;
+		padding-left: 0.5cm !important;
+		margin: 1em 0 !important;
 	}
 }
-/* WebKit 기반 브라우저 감지 */
+/* QR 코드/바코드용 */
-@supports (-webkit-appearance: none) {
-	.webkit-only {
-		display: block !important;
+@media print {
+	.print-qr,
+	.print-barcode {
+		page-break-inside: avoid !important;
+		filter: none !important; /* 그레이스케일 제거 */
 	}
 }
-/* Gecko 기반 브라우저 감지 */
+/* 프린트 프리뷰 시 시뮬레이션 */
-@supports (-moz-appearance: none) {
-	.gecko-only {
-		display: block !important;
-	}
+.print-preview {
+	background: white !important;
+	color: black !important;
+	font-family: "Times New Roman", serif !important;
+	font-size: 12pt !important;
+	line-height: 1.4 !important;
+	max-width: 21cm !important; /* A4 폭 */
+	margin: 0 auto !important;
+	padding: 2cm !important;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
 }
-/* ===== PERFORMANCE OPTIMIZATION (성능 최적화) ===== */
+/* ===== PAGE ORIENTATION (페이지 방향) ===== */
-/* 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;
+@page landscape {
+	size: landscape;
+}
-	/* will-change 최적화 */
-	will-change: var(--will-change, auto) !important;
+.print-landscape {
+	page: landscape !important;
 }
-/* 하드웨어 가속 비활성화 */
+/* 세로 방향 페이지 */
-.no-gpu-acceleration {
-	transform: none !important;
-	will-change: auto !important;
+@page portrait {
+	size: portrait;
 }
-/* ===== POLYFILL HINTS (폴리필 힌트) ===== */
+.print-portrait {
+	page: portrait !important;
+}
-/* JavaScript 폴리필이 필요한 기능들 */
+/* ===== PAGE SIZE (페이지 크기) ===== */
-.needs-polyfill {
-	/*
-	필요한 폴리필들:
-	- IntersectionObserver
-	- ResizeObserver
-	- CustomEvent
-	- Object.assign
-	- Array.from
-	- Promise
-	- fetch
-	*/
+@page {
+	margin: 2cm;
+	size: A4;
 }
-/* 폴리필 로드 완료 후 활성화되는 클래스 */
+@page A4 {
+	size: A4;
+	margin: 2cm;
+}
-.polyfill-loaded .feature-enhanced {
-	/* 폴리필 의존 기능들 */
+@page letter {
+	size: letter;
+	margin: 1in;
 }
-/* ===== CRITICAL CSS OPTIMIZATION (중요 CSS 최적화) ===== */
+/* ===== PRINT DEBUGGING (프린트 디버깅) ===== */
-/* Above the fold 콘텐츠 */
+/* 개발 시 프린트 스타일 확인용 */
-.critical-css {
-	/* 중요한 스타일만 포함 */
-	display: block !important;
-	position: relative !important;
-	margin: 0 !important;
-	padding: 0 !important;
+.print-debug {
+	outline: 1px solid red !important;
 }
-/* 지연 로드 콘텐츠 */
+@media print {
+	.print-debug {
+		outline: 1pt solid black !important;
+	}
-.non-critical {
-	/* 나중에 로드될 스타일들 */
+	.print-debug::before {
+		content: "PRINT DEBUG" !important;
+		display: block !important;
+		background: yellow !important;
+		color: black !important;
+		font-size: 8pt !important;
+		padding: 2pt !important;
+		margin-bottom: 2pt !important;
+	}
 }
 /* ===== RESPONSIVE BREAKPOINTS ===== */