/*!
 * Portions derived from Google Material Design (https://material.io).
 * Copyright (c) Google LLC. Licensed under Apache License 2.0.
 * See /NOTICE.md for full license text.
 * "Material Design", "Material", "Google", and "Roboto" are trademarks of Google LLC.
 * This project is not affiliated with or endorsed by Google.
 */
/* ============================================================================
   va-material-extend.css
   Material Design 3 확장 스타일
   va.css + va-material.css 이후에 로드
   ============================================================================ */


/* ============================================================================
   0. Material Design 추가 토큰
   ============================================================================ */

* {
	/* Motion - Material 3 Easing */
	--md-easing-standard: cubic-bezier(0.2, 0, 0, 1);
	--md-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
	--md-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
	--md-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
	--md-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
	--md-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

	/* Duration */
	--md-duration-short1: 50ms;
	--md-duration-short2: 100ms;
	--md-duration-short3: 150ms;
	--md-duration-short4: 200ms;
	--md-duration-medium1: 250ms;
	--md-duration-medium2: 300ms;
	--md-duration-medium3: 350ms;
	--md-duration-medium4: 400ms;
	--md-duration-long1: 450ms;
	--md-duration-long2: 500ms;

	/* Elevation (Material 3 레벨) */
	--md-elevation-0: none;
	--md-elevation-1: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
	--md-elevation-2: 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
	--md-elevation-3: 0 1px 3px 0 rgba(0,0,0,0.3), 0 4px 8px 3px rgba(0,0,0,0.15);
	--md-elevation-4: 0 2px 3px 0 rgba(0,0,0,0.3), 0 6px 10px 4px rgba(0,0,0,0.15);
	--md-elevation-5: 0 4px 4px 0 rgba(0,0,0,0.3), 0 8px 12px 6px rgba(0,0,0,0.15);

	/* State Layer Opacity */
	--md-state-hover-opacity: 0.08;
	--md-state-focus-opacity: 0.12;
	--md-state-pressed-opacity: 0.12;
	--md-state-dragged-opacity: 0.16;

	/* Shape - Material 3 컴포넌트별 shape */
	--md-shape-none: 0;
	--md-shape-extra-small: 4px;
	--md-shape-small: 8px;
	--md-shape-medium: 12px;
	--md-shape-large: 16px;
	--md-shape-extra-large: 28px;
	--md-shape-full: 1000px;

	/* Ripple */
	--md-ripple-color: currentColor;
}


/* ============================================================================
   1. Transition - 모든 인터랙티브 요소에 부드러운 전환 추가
   ============================================================================ */

/* 버튼 */
.va-button {
	transition:
		background-color var(--md-duration-short4) var(--md-easing-standard),
		border-color var(--md-duration-short4) var(--md-easing-standard),
		color var(--md-duration-short4) var(--md-easing-standard),
		box-shadow var(--md-duration-short4) var(--md-easing-standard);
}

/* 스플릿 버튼 */
.va-split-button .va-button {
	transition:
		background-color var(--md-duration-short4) var(--md-easing-standard),
		border-color var(--md-duration-short4) var(--md-easing-standard),
		color var(--md-duration-short4) var(--md-easing-standard),
		box-shadow var(--md-duration-short4) var(--md-easing-standard);
}

/* 입력 필드 wrapper */
.va-input .field-wrapper,
.va-select .field-wrapper,
.va-combobox .field-wrapper,
.va-datepicker .field-wrapper,
.va-textarea .field-wrapper,
.va-file .field-wrapper {
	transition:
		border-color var(--md-duration-short4) var(--md-easing-standard),
		box-shadow var(--md-duration-short3) var(--md-easing-standard);
}

/* 체크박스/라디오 */
.va-checkbox .field-wrapper,
.va-radio .field-wrapper {
	transition:
		background-color var(--md-duration-short3) var(--md-easing-standard),
		border-color var(--md-duration-short3) var(--md-easing-standard),
		transform var(--md-duration-short3) var(--md-easing-standard);
}

/* 스위치 (기존 200ms 유지하면서 easing 개선) */
.va-switch .thumb {
	transition-duration: var(--md-duration-short4);
	transition-timing-function: var(--md-easing-standard);
}

.va-switch .switch-div {
	transition: background-color var(--md-duration-short4) var(--md-easing-standard);
}

/* 메뉴 아이템 */
.va-menu-item {
	transition: background-color var(--md-duration-short3) var(--md-easing-standard);
}

/* 리스트 아이템 */
.va-list-item {
	transition: background-color var(--md-duration-short3) var(--md-easing-standard);
}

/* 카드 */
.va-card {
	transition:
		background-color var(--md-duration-short4) var(--md-easing-standard),
		box-shadow var(--md-duration-medium1) var(--md-easing-standard);
}

/* 탭 버튼 */
.va-tab-button,
.va-simple-tab-button {
	transition:
		background-color var(--md-duration-short4) var(--md-easing-standard),
		color var(--md-duration-short4) var(--md-easing-standard);
}

/* 아바타 */
.va-avatar .content {
	transition:
		transform var(--md-duration-short4) var(--md-easing-standard),
		box-shadow var(--md-duration-short4) var(--md-easing-standard);
}

/* 배지 */
.va-badge {
	transition: transform var(--md-duration-short3) var(--md-easing-standard);
}

/* 브레드크럼 링크 */
.va-breadcrumb .ul .item a {
	transition:
		background-color var(--md-duration-short3) var(--md-easing-standard),
		color var(--md-duration-short3) var(--md-easing-standard);
}

/* 프로그레스바 */
.va-progressbar .bar {
	transition: width var(--md-duration-long2) var(--md-easing-emphasized-decelerate);
}

/* 슬라이더 thumb */
.va-slider .thumb,
.va-double-slider .thumb {
	transition:
		transform var(--md-duration-short3) var(--md-easing-standard),
		box-shadow var(--md-duration-short3) var(--md-easing-standard);
}

/* 네비게이션바 아이템 */
.va-navigation-bar .navigation-item {
	transition:
		background-color var(--md-duration-short4) var(--md-easing-standard),
		color var(--md-duration-short4) var(--md-easing-standard);
}

/* 아코디언 */
.va-accordion .va-button {
	transition: background-color var(--md-duration-short4) var(--md-easing-standard);
}

/* expandButton 확장 콘텐츠 - M3 Surface Container */
.va-expand-button .va-menu-expand {
	border-color: var(--colorNeutralStroke);
	background-color: var(--colorNeutral);
	margin-bottom: var(--sizeSpacingXS);
	animation: md-expand-content var(--md-duration-medium4) var(--md-easing-emphasized-decelerate);
}
.va-expand-button .va-menu-expand.primary {
	background-color: var(--colorPrimary);
	border-color: var(--colorPrimary);
	color: var(--colorPrimaryForeground);
}
.va-expand-button .va-menu-expand.secondary {
	background-color: var(--colorSecondary);
	border-color: var(--colorSecondary);
	color: var(--colorSecondaryForeground);
}
.va-expand-button .va-menu-expand.subtle {
	background-color: var(--colorSubtle);
	border-color: var(--colorSubtle);
	color: var(--colorSubtleForeground);
}
.va-expand-button .va-menu-expand.transparent {
	background-color: transparent;
	border-color: transparent;
	color: var(--colorForeground);
}

@keyframes md-expand-content {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.va-expand-button .va-menu-expand.collapsing {
	animation: md-collapse-content var(--md-duration-medium4) var(--md-easing-emphasized-decelerate) forwards;
}

@keyframes md-collapse-content {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-8px);
	}
}

/* 툴팁 */
.va-tooltip {
	transition: opacity var(--md-duration-short4) var(--md-easing-standard-decelerate);
}

/* 토스트 */
.va-toast {
	transition: opacity var(--md-duration-medium2) var(--md-easing-standard-decelerate);
}

/* 다이얼로그 */
.va-dialog {
	transition:
		opacity var(--md-duration-medium2) var(--md-easing-emphasized-decelerate),
		transform var(--md-duration-medium2) var(--md-easing-emphasized-decelerate);
}

/* 팝 */
.va-pop,
.va-popover {
	transition: opacity var(--md-duration-short4) var(--md-easing-standard-decelerate);
}

/* 메뉴 팝 */
.va-menu-pop {
	transition: opacity var(--md-duration-short4) var(--md-easing-standard-decelerate);
	animation: md-expand-content var(--md-duration-medium4) var(--md-easing-emphasized-decelerate);
}

/* 드로어 */
.va-drawer {
	transition: transform var(--md-duration-medium3) var(--md-easing-emphasized);
}

/* 사이드바 */
.va-sidebar {
	transition: width var(--md-duration-medium3) var(--md-easing-emphasized);
}

/* 디바이더 (리사이즈) */
.va-divider .thumb {
	transition:
		background-color var(--md-duration-short3) var(--md-easing-standard),
		opacity var(--md-duration-short3) var(--md-easing-standard);
}

/* 트리 아이템 */
.va-tree-item .tree-content {
	transition: background-color var(--md-duration-short3) var(--md-easing-standard);
}

/* 페이지네이션 버튼 */
.va-pagination .va-button {
	transition:
		background-color var(--md-duration-short3) var(--md-easing-standard),
		color var(--md-duration-short3) var(--md-easing-standard);
}


/* ============================================================================
   2. Elevation - 컴포넌트별 Material 3 elevation 적용
   ============================================================================ */

/* 버튼 - Filled: elevation 0 → hover 1, Tonal: 0 → 1 */
.va-button.primary,
.va-button.secondary,
.va-button.accent {
	box-shadow: var(--md-elevation-0);
}

.va-button.primary:hover,
.va-button.secondary:hover,
.va-button.accent:hover {
	box-shadow: var(--md-elevation-1);
}

.va-button.primary:active,
.va-button.secondary:active,
.va-button.accent:active {
	box-shadow: var(--md-elevation-0);
}

/* 카드 - elevation 1 → hover 2 */
.va-card {
	position: relative;
	box-shadow: var(--md-elevation-1);
	border-radius: var(--md-shape-medium);
}

.va-card:hover {
	box-shadow: var(--md-elevation-2);
}

.va-card:active {
	box-shadow: var(--md-elevation-1);
}

/* 다이얼로그 - elevation 3 */
.va-dialog {
	box-shadow: var(--md-elevation-3);
}

/* 메뉴팝 - elevation 2 */
.va-menu-pop {
	box-shadow: var(--md-elevation-2);
}

/* 드로어 overlay - elevation 3 → 기존보다 약간 강화 */
.va-drawer.overlay {
	box-shadow: var(--md-elevation-3);
}
.va-drawer.overlay.left,
.va-drawer.overlay.right {
	transition: width var(--md-duration-medium3) var(--md-easing-emphasized);
	position: absolute !important;
}
.va-drawer.overlay.top,
.va-drawer.overlay.bottom {
	transition: height var(--md-duration-medium3) var(--md-easing-emphasized);
	position: absolute !important;
}

/* 팝/팝오버 - elevation 2 */
.va-pop,
.va-popover {
	box-shadow: var(--md-elevation-2);
}

/* 토스트 - elevation 3 */
.va-toast {
	box-shadow: var(--md-elevation-3);
}

/* 툴팁 - elevation 1 */
.va-tooltip {
	box-shadow: var(--md-elevation-1);
}

/* 메시지박스 - elevation 3 */
.va-messagebox {
	box-shadow: var(--md-elevation-3);
}

/* 네비게이션바 - elevation 2 */
.va-navigation-bar {
	box-shadow: var(--md-elevation-2);
}

/* 탭 바 - elevation 0 (밑줄 스타일) */
.va-tab .tab-header {
	box-shadow: inset 0 -1px 0 0 var(--colorNeutralStroke);
}


/* ============================================================================
   3. Ripple Effect - CSS-only 리플 효과
   overflow: hidden 없이 inset:0 bounded flash 방식
   (자식 요소가 밖으로 나올 수 있도록 overflow 건드리지 않음)
   ============================================================================ */

@keyframes md-ripple-flash {
	0% { opacity: var(--md-state-pressed-opacity); }
	100% { opacity: 0; }
}

/* 버튼 리플 - ::after on .button-inner */
.va-button .button-inner {
	position: relative;
}

.va-button .button-inner::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
}

.va-button:active .button-inner::after {
	animation: md-ripple-flash var(--md-duration-medium2) var(--md-easing-standard) forwards;
}

.va-button.disabled .button-inner::after {
	animation: none;
}

/* 메뉴 아이템 리플 */
.va-menu-item::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
}

.va-menu-item:active::after {
	animation: md-ripple-flash var(--md-duration-medium2) var(--md-easing-standard) forwards;
}

/* 리스트 아이템 리플 */
.va-list-item::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
}

.va-list-item:active::after {
	animation: md-ripple-flash var(--md-duration-medium2) var(--md-easing-standard) forwards;
}

/* 탭 버튼 리플 */
.va-simple-tab-button::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
}

.va-simple-tab-button:active::after {
	animation: md-ripple-flash var(--md-duration-medium2) var(--md-easing-standard) forwards;
}

/* 카드 리플 */
.va-card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
}

.va-card:active::after {
	animation: md-ripple-flash var(--md-duration-medium2) var(--md-easing-standard) forwards;
}

/* 체크박스/라디오 리플 */
.va-checkbox .field-wrapper::before,
.va-radio .field-wrapper::before {
	content: '';
	position: absolute;
	inset: -50%;
	border-radius: 50%;
	background: var(--colorActive);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--md-duration-short3) var(--md-easing-standard);
}

.va-checkbox:hover .field-wrapper::before,
.va-radio:hover .field-wrapper::before {
	opacity: var(--md-state-hover-opacity);
}

.va-checkbox:active .field-wrapper::before,
.va-radio:active .field-wrapper::before {
	opacity: var(--md-state-pressed-opacity);
}

/* 네비게이션바 아이템 리플 */
.va-navigation-bar .navigation-item {
	position: relative;
}

.va-navigation-bar .navigation-item::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
}

.va-navigation-bar .navigation-item:active::after {
	animation: md-ripple-flash var(--md-duration-medium2) var(--md-easing-standard) forwards;
}

/* 브레드크럼 링크 리플 */
.va-breadcrumb .ul .item a {
	position: relative;
}

.va-breadcrumb .ul .item a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
}

.va-breadcrumb .ul .item a:active::after {
	animation: md-ripple-flash var(--md-duration-medium2) var(--md-easing-standard) forwards;
}


/* ============================================================================
   4. State Layer - hover/pressed 시 opacity 기반 오버레이
   ============================================================================ */

/* 버튼 State Layer - .button-inner에 적용 (badge overflow 보장) */
.va-button .button-inner::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--md-duration-short3) var(--md-easing-standard);
}

.va-button:hover .button-inner::before {
	opacity: var(--md-state-hover-opacity);
}

.va-button:focus-visible .button-inner::before {
	opacity: var(--md-state-focus-opacity);
}

.va-button.disabled .button-inner::before {
	opacity: 0;
}

/* 메뉴 아이템 State Layer */
.va-menu-item::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--md-duration-short3) var(--md-easing-standard);
}

.va-menu-item:hover::before {
	opacity: var(--md-state-hover-opacity);
}

/* 리스트 아이템 State Layer */
.va-list-item::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--md-duration-short3) var(--md-easing-standard);
}

.va-list-item:hover::before {
	opacity: var(--md-state-hover-opacity);
}

/* 탭 버튼 State Layer */
.va-simple-tab-button::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--md-duration-short3) var(--md-easing-standard);
}

.va-simple-tab-button:hover::before {
	opacity: var(--md-state-hover-opacity);
}

/* 카드 State Layer */
.va-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--md-duration-short3) var(--md-easing-standard);
	z-index: 0;
}

.va-card:hover::before {
	opacity: var(--md-state-hover-opacity);
}


/* ============================================================================
   5. Shape - Material 3 컴포넌트별 border-radius 적용
   ============================================================================ */

/* 버튼 - Full shape (Material 3 Filled Button) */
.va-button {
	border-radius: var(--md-shape-full);
}

.va-button .button-inner {
	border-radius: var(--md-shape-full);
}

/* 버튼 shape 오버라이드 */
.va-button.rounded {
	border-radius: var(--md-shape-small) !important;
}

.va-button.square {
	border-radius: var(--md-shape-none) !important;
}

.va-button.circular {
	border-radius: var(--md-shape-full) !important;
}

.va-button.rounded .button-inner {
	border-radius: var(--md-shape-small) !important;
}

.va-button.square .button-inner {
	border-radius: var(--md-shape-none) !important;
}

.va-button.circular .button-inner {
	border-radius: var(--md-shape-full) !important;
}

/* 스플릿 버튼 - va-button 오른쪽 모서리 제거 */
.va-split-button .va-button,
.va-split-button .va-button.rounded,
.va-split-button .va-button.circular {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.va-split-button .va-button .button-inner,
.va-split-button .va-button.rounded .button-inner,
.va-split-button .va-button.circular .button-inner {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* 스플릿 버튼 - menu-button 오른쪽 모서리 (기본: circular) */
.va-split-button .menu-button {
	border-top-right-radius: var(--sizeFieldBorderRadiusCircular);
	border-bottom-right-radius: var(--sizeFieldBorderRadiusCircular);
}

/* 카드 - Medium shape */
.va-card {
	border-radius: var(--md-shape-medium);
}

/* 다이얼로그 - Extra Large shape */
.va-dialog {
	border-radius: var(--md-shape-extra-large);
}

/* 메뉴팝 - Extra Small shape */
.va-menu-pop {
	border-radius: var(--md-shape-extra-small);
}

/* 필드 - Extra Small shape (위만 둥글게) */
.va-input .field-wrapper,
.va-select .field-wrapper,
.va-combobox .field-wrapper,
.va-datepicker .field-wrapper,
.va-file .field-wrapper {
	border-radius: var(--md-shape-extra-small) var(--md-shape-extra-small) 0 0;
}

/* 텍스트에어리어 - 위만 둥글게 (다른 필드와 동일) */
.va-textarea .field-wrapper {
	border-radius: var(--md-shape-extra-small) var(--md-shape-extra-small) 0 0;
}

/* 토스트 - Small shape */
.va-toast {
	border-radius: var(--md-shape-small);
}

/* 툴팁 - Extra Small shape */
.va-tooltip {
	border-radius: var(--md-shape-extra-small);
}

/* 리스트 아이템 */
.va-list-item {
	border-radius: 0;
}

/* 팝/팝오버 - Extra Small shape */
.va-pop,
.va-popover {
	border-radius: var(--md-shape-medium);
}

/* 아코디언 */
.va-accordion .va-button {
	border-radius: 0;
}

/* expandButton 확장 콘텐츠 - M3 Extra Small shape */
.va-expand-button .va-menu-expand {
	border-radius: var(--md-shape-extra-small);
}

/* 메시지바 - Small shape */
.va-message-bar {
	border-radius: var(--md-shape-small);
}


/* ============================================================================
   6. Focus Indicator - Material 3 포커스 스타일
   M3는 outline 대신 state layer 변화로 포커스를 표현한다.
   va.css의 모든 outline 포커스를 제거한다.
   ============================================================================ */

/* --- 버튼 계열 --- */
.va-button.focused,
.va-button.text.pressed,
.va-button.underline:focus,
.va-split-button.focused,
.va-menu-button.focus {
	outline: none;
}

/* --- 필드 계열 (input, select, combobox, datepicker, textarea, file, image-file) --- */
.va-input.selected .field-wrapper,
.va-input.focused .field-wrapper,
.va-select.selected .field-wrapper,
.va-select.focused .field-wrapper,
.va-combobox.selected .field-wrapper,
.va-combobox.focused .field-wrapper,
.va-datepicker.selected .field-wrapper,
.va-datepicker.focused .field-wrapper,
.va-textarea.selected .field-wrapper,
.va-textarea.focused .field-wrapper,
.va-file.selected .field-wrapper,
.va-file.focused .field-wrapper,
.va-image-file.selected .field-wrapper,
.va-image-file.focused .field-wrapper,
.va-input-popup.selected .field-wrapper {
	outline: none;
}

/* 필드 포커스 - 하단 강조선 (Material Filled TextField 패턴) */
.va-input.focused .field-wrapper,
.va-select.focused .field-wrapper,
.va-combobox.focused .field-wrapper,
.va-datepicker.focused .field-wrapper,
.va-textarea.focused .field-wrapper,
.va-file.focused .field-wrapper {
	border-bottom-width: 2px;
	border-bottom-color: var(--colorPrimary);
}

/* --- 체크박스/라디오 --- */
.va-checkbox.focused .field-wrapper,
.va-radio.focused .field-wrapper {
	outline: none;
}

/* --- 스위치 --- */
.va-switch.focused .switch-div {
	outline: none;
}

/* --- 아바타 --- */
.va-avatar.focused {
	outline: none;
}

/* --- 메뉴 아이템 --- */
.va-menu-item.focused,
.va-menu-item.text.pressed,
.va-menu-item.underline:focus {
	outline: none;
}

/* --- 리스트 아이템 --- */
.va-list-item.focused {
	outline: none;
}

/* --- 카드 --- */
.va-card.selected {
	outline: none;
}

/* --- 링크 --- */
a.va-link.selected {
	outline: none;
}

/* --- 디테일 --- */
.va-detail.focused .header {
	outline: none;
}

/* --- 그리드 셀 (편집 포커스는 유지) --- */
.va-grid .grid-body-col.focused,
.va-grid .grid-body-col-summary.focused,
.va-grid .grid-body-col.fixed.focused {
	outline: none;
}


/* ============================================================================
   7. Typography Scale - Material 3 타입 스케일 강화
   ============================================================================ */

/* Display */
.va-h1 {
	font-size: 5.7rem;
	line-height: 6.4rem;
	font-weight: 400;
	letter-spacing: -0.025rem;
}

/* Headline */
.va-h2 {
	font-size: 2.8rem;
	line-height: 3.6rem;
	font-weight: 400;
	letter-spacing: 0;
}

.va-h3 {
	font-size: 2.4rem;
	line-height: 3.2rem;
	font-weight: 400;
	letter-spacing: 0;
}

/* Title */
.va-h4 {
	font-size: 2.2rem;
	line-height: 2.8rem;
	font-weight: 500;
	letter-spacing: 0;
}

.va-h5 {
	font-size: 1.6rem;
	line-height: 2.4rem;
	font-weight: 500;
	letter-spacing: 0.015rem;
}

/* Body/Label */
.va-h6 {
	font-size: 1.4rem;
	line-height: 2.0rem;
	font-weight: 500;
	letter-spacing: 0.01rem;
}


/* ============================================================================
   8. 컴포넌트별 Material 스타일 보강
   ============================================================================ */

/* --- 필드: Material Filled 스타일 (하단 라인 강조) --- */
.va-input .field-wrapper,
.va-select .field-wrapper,
.va-combobox .field-wrapper,
.va-datepicker .field-wrapper,
.va-textarea .field-wrapper,
.va-file .field-wrapper {
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	background-color: var(--colorNeutral3);
}

.va-input:hover .field-wrapper,
.va-select:hover .field-wrapper,
.va-combobox:hover .field-wrapper,
.va-datepicker:hover .field-wrapper,
.va-textarea:hover .field-wrapper,
.va-file:hover .field-wrapper {
	background-color: var(--colorNeutral4);
}

/* --- 필드: disabled/readonly 시 border 숨김 --- */
.va-input.disabled .field-wrapper,
.va-input.readonly .field-wrapper,
.va-select.disabled .field-wrapper,
.va-select.readonly .field-wrapper,
.va-combobox.disabled .field-wrapper,
.va-combobox.readonly .field-wrapper,
.va-datepicker.disabled .field-wrapper,
.va-datepicker.readonly .field-wrapper,
.va-textarea.disabled .field-wrapper,
.va-textarea.readonly .field-wrapper,
.va-file.disabled .field-wrapper,
.va-file.readonly .field-wrapper {
	border-color: transparent;
	background-color: var(--colorDisabled);
}

/* --- 버튼: Outline 변형 강화 --- */
.va-button.outline {
	border-width: 1px;
	border-style: solid;
}

/* --- 스위치: Material 3 스타일 --- */
.va-switch .switch-div {
	border-width: 2px;
}

.va-switch.checked .switch-div {
	border-color: var(--colorActive);
}

/* --- 슬라이더: hover 시 thumb 확대 --- */
.va-slider .thumb:hover,
.va-double-slider .thumb:hover {
	transform: scale(1.2);
}

.va-slider .thumb:active,
.va-double-slider .thumb:active {
	transform: scale(1.4);
	box-shadow: var(--md-elevation-1);
}

/* --- 체크박스: 체크 시 약간의 스케일 효과 --- */
.va-checkbox.checked .field-wrapper {
	transform: scale(1);
	animation: md-check-bounce var(--md-duration-short4) var(--md-easing-emphasized);
}

@keyframes md-check-bounce {
	0% { transform: scale(0.8); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}

/* --- 배지: 등장 애니메이션 --- */
@keyframes md-badge-appear {
	0% { transform: scale(0); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

.va-badge {
	animation: md-badge-appear var(--md-duration-medium1) var(--md-easing-emphasized-decelerate);
}

/* --- 프로그레스바: Material 스타일 --- */
.va-progressbar {
	border-radius: var(--md-shape-full);
	overflow: hidden;
}

.va-progressbar .bar {
	border-radius: var(--md-shape-full);
}

/* --- FAB 스타일 (icon-only 버튼에 적용) --- */
.va-button.icon-only.primary,
.va-button.icon-only.secondary,
.va-button.icon-only.accent {
	box-shadow: var(--md-elevation-3);
	border-radius: var(--md-shape-large);
}

.va-button.icon-only.primary:hover,
.va-button.icon-only.secondary:hover,
.va-button.icon-only.accent:hover {
	box-shadow: var(--md-elevation-4);
}

.va-button.icon-only.primary:active,
.va-button.icon-only.secondary:active,
.va-button.icon-only.accent:active {
	box-shadow: var(--md-elevation-3);
}

/* --- 다이얼로그: 닫힘/열림 효과 보강 --- */
.va-dialog-cover {
	transition: opacity var(--md-duration-medium2) var(--md-easing-standard);
}

/* --- 메시지박스: Material 스타일 --- */
.va-messagebox {
	border-radius: var(--md-shape-extra-large);
}

/* --- 그리드: 헤더 강조 --- */
.va-grid .grid-header {
	font-weight: 500;
	letter-spacing: 0.01rem;
}

/* --- 디바이더: Material 스타일 --- */
.va-divider.horizontal {
	border-color: var(--colorDivStroke);
}

.va-divider.vertical {
	border-color: var(--colorDivStroke);
}


/* ============================================================================
   9. Page / Panel / SearchPanel - Material 3 Surface 스타일
   ============================================================================ */

/* Page - Surface Container Lowest */
.va-page {
	background-color: var(--colorNeutral2);
	border: none;
	border-radius: var(--md-shape-large);
}

/* Panel - Outlined Card 스타일 */
.va-panel {
	background-color: var(--colorCard);
	border: 1px solid var(--colorDivStroke);
	border-radius: var(--md-shape-medium);
	box-shadow: var(--md-elevation-0);
	transition:
		box-shadow var(--md-duration-short4) var(--md-easing-standard),
		border-color var(--md-duration-short4) var(--md-easing-standard);
}

.va-panel:hover {
	box-shadow: var(--md-elevation-1);
	border-color: var(--colorNeutralStroke);
}

/* SearchPanel - Surface Container High + 강조 상단 바 */
.va-search-panel {
	background-color: var(--colorNeutral3);
	border: 1px solid var(--colorDivStroke);
	border-top: 3px solid var(--colorPrimary);
	border-radius: var(--md-shape-small);
	transition:
		box-shadow var(--md-duration-short4) var(--md-easing-standard),
		border-color var(--md-duration-short4) var(--md-easing-standard);
}

.va-search-panel:hover {
	box-shadow: var(--md-elevation-1);
}


/* ============================================================================
   10. 반응형 모션 축소 (접근성)
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}