blacktrigram 0.7.2

package/lib/utils/koreanThemeHelpers.d.ts

@@ -0,0 +1,328 @@
+/**
+ * Korean Theme Helper Utilities for HTML Overlays
+ *
+ * Provides consistent Korean martial arts cyberpunk theming across all HTML overlay components.
+ * These utilities ensure color consistency, bilingual text formatting, and responsive spacing.
+ *
+ * @module utils/koreanThemeHelpers
+ * @category UI Utilities
+ * @korean 한국테마도우미
+ */
+import { type GlowIntensity, type HoverAnimationType } from "./visualEffects";
+/**
+ * Bilingual text format options
+ * @korean 이중언어형식
+ */
+export type BilingualFormat = "pipe" | "parentheses" | "bracket" | "slash";
+/**
+ * Button variant types for Korean theme
+ * @korean 버튼변형
+ */
+export type KoreanButtonVariant = "primary" | "secondary" | "danger" | "success" | "warning";
+/**
+ * Responsive spacing size
+ * @korean 반응형간격크기
+ */
+export type SpacingSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+/**
+ * Enhanced overlay styles configuration
+ * @korean 향상된오버레이스타일설정
+ */
+export interface EnhancedOverlayConfig {
+    readonly opacity?: number;
+    readonly glowIntensity?: GlowIntensity;
+    readonly includeGradient?: boolean;
+    readonly includeBackdropBlur?: boolean;
+    readonly depthLayers?: number;
+}
+/**
+ * Base styles for all Korean-themed overlays
+ *
+ * Provides consistent dark background with cyan/gold accents
+ *
+ * @param opacity - Background opacity (0-1), default 0.9
+ * @returns React.CSSProperties object with Korean theme
+ *
+ * @example
+ * ```tsx
+ * <div style={getKoreanOverlayBaseStyles(0.95)}>
+ *   Content
+ * </div>
+ * ```
+ *
+ * @korean 한국오버레이기본스타일얻기
+ */
+export declare function getKoreanOverlayBaseStyles(opacity?: number): React.CSSProperties;
+/**
+ * Enhanced Korean overlay styles with visual effects
+ *
+ * Provides advanced cyberpunk styling with neon glow, depth effects,
+ * gradients, and backdrop blur for Korean-themed overlays.
+ *
+ * @param config - Enhanced overlay configuration
+ * @returns React.CSSProperties with advanced visual effects
+ *
+ * @example
+ * ```tsx
+ * const styles = getEnhancedKoreanOverlayStyles({
+ *   opacity: 0.95,
+ *   glowIntensity: 'medium',
+ *   includeGradient: true,
+ *   includeBackdropBlur: true,
+ *   depthLayers: 3,
+ * });
+ * <div style={styles}>Enhanced Content</div>
+ * ```
+ *
+ * @korean 향상된한국오버레이스타일얻기
+ */
+export declare function getEnhancedKoreanOverlayStyles(config?: EnhancedOverlayConfig): React.CSSProperties;
+/**
+ * Format bilingual text with Korean and English
+ *
+ * Supports multiple formatting styles:
+ * - pipe: "한글 | English"
+ * - parentheses: "한글 (English)"
+ * - bracket: "한글 [English]"
+ * - slash: "한글 / English"
+ *
+ * @param korean - Korean text
+ * @param english - English text
+ * @param format - Format style, default "pipe"
+ * @returns Formatted bilingual string
+ *
+ * @example
+ * ```tsx
+ * formatBilingualText('공격', 'Attack', 'pipe') // "공격 | Attack"
+ * formatBilingualText('방어', 'Defense', 'parentheses') // "방어 (Defense)"
+ * ```
+ *
+ * @korean 이중언어텍스트형식화
+ */
+export declare function formatBilingualText(korean: string, english: string, format?: BilingualFormat): string;
+/**
+ * Get Korean button styles with variant support
+ *
+ * Returns consistent button styling based on variant:
+ * - primary: Cyan border, gold text
+ * - secondary: Gold border, white text
+ * - danger: Red border, red text
+ * - success: Green border, green text
+ * - warning: Orange border, orange text
+ *
+ * @param variant - Button variant type
+ * @param isHovered - Whether button is hovered
+ * @param isPressed - Whether button is pressed
+ * @returns React.CSSProperties for button
+ *
+ * @example
+ * ```tsx
+ * <button style={getKoreanButtonStyles('primary', isHovered, isPressed)}>
+ *   {formatBilingualText('확인', 'Confirm')}
+ * </button>
+ * ```
+ *
+ * @korean 한국버튼스타일얻기
+ */
+export declare function getKoreanButtonStyles(variant?: KoreanButtonVariant, isHovered?: boolean, isPressed?: boolean): React.CSSProperties;
+/**
+ * Enhanced Korean button configuration
+ * @korean 향상된한국버튼설정
+ */
+export interface EnhancedButtonConfig {
+    readonly variant?: KoreanButtonVariant;
+    readonly isHovered?: boolean;
+    readonly isPressed?: boolean;
+    readonly isFocused?: boolean;
+    readonly glowIntensity?: GlowIntensity;
+    readonly hoverAnimation?: HoverAnimationType;
+}
+/**
+ * Get enhanced Korean button styles with neon glow
+ *
+ * Provides advanced button styling with cyberpunk neon effects,
+ * smooth transitions, and Korean font optimization.
+ *
+ * @param config - Enhanced button configuration
+ * @returns React.CSSProperties with neon glow effects
+ *
+ * @example
+ * ```tsx
+ * const buttonStyle = getKoreanButtonWithGlow({
+ *   variant: 'primary',
+ *   isHovered: true,
+ *   glowIntensity: 'strong',
+ *   hoverAnimation: 'combined',
+ * });
+ * <button style={buttonStyle}>
+ *   {formatBilingualText('공격', 'Attack')}
+ * </button>
+ * ```
+ *
+ * @korean 네온글로우한국버튼스타일얻기
+ */
+export declare function getKoreanButtonWithGlow(config?: EnhancedButtonConfig): React.CSSProperties;
+/**
+ * Get button visual effects only (no color/background/border)
+ *
+ * Extracts only visual effects (boxShadow, transition, transform, textShadow) from
+ * getKoreanButtonWithGlow without color-related properties. This is useful for cases
+ * where buttons need custom colors (e.g., menu selection states) but want to preserve
+ * the visual effects system.
+ *
+ * This function provides an explicit contract for visual effects extraction, preventing
+ * fragile coupling that could occur with destructuring patterns. If getKoreanButtonWithGlow
+ * adds new visual effect properties in the future, they should be explicitly added here.
+ *
+ * **Intentionally Excluded Properties:**
+ * - Layout: fontSize, fontFamily, fontWeight, padding, width, height, cursor
+ * - Typography: letterSpacing, lineHeight, textRendering, WebkitFontSmoothing, MozOsxFontSmoothing
+ * - Colors: color, background, backgroundColor, border, borderColor
+ *
+ * **Included Visual Effects:**
+ * - boxShadow: Neon glow effects
+ * - transition: Smooth state changes (0.2s ease)
+ * - transform: Hover/press animations (scale)
+ * - textShadow: Text glow effects
+ *
+ * **Note:** If getKoreanButtonWithGlow adds new visual effect properties (e.g., 'filter',
+ * 'opacity', 'willChange', 'backdropFilter'), they must be explicitly added to this function's
+ * return type and extraction logic to maintain the explicit contract.
+ *
+ * @param config - Same configuration as getKoreanButtonWithGlow
+ * @returns React.CSSProperties with only visual effects (boxShadow, transition, transform, textShadow)
+ *
+ * @example
+ * ```tsx
+ * const visualEffects = getButtonVisualEffectsOnly({
+ *   variant: 'primary',
+ *   glowIntensity: 'strong',
+ *   hoverAnimation: 'combined'
+ * });
+ *
+ * <button style={{
+ *   ...visualEffects,
+ *   color: customColor,        // Apply custom colors
+ *   background: customBg,
+ *   border: customBorder
+ * }}>
+ *   Custom Button
+ * </button>
+ * ```
+ *
+ * @korean 버튼시각효과만얻기
+ */
+export declare function getButtonVisualEffectsOnly(config: Parameters<typeof getKoreanButtonWithGlow>[0]): Pick<React.CSSProperties, "boxShadow" | "transition" | "transform" | "textShadow">;
+/**
+ * Get responsive spacing value
+ *
+ * Returns SPACING constant value for consistent spacing across components.
+ * Optionally scales for mobile devices.
+ *
+ * **IMPORTANT**: This function accepts lowercase size parameters ('xs', 'sm', 'md', etc.)
+ * to provide a more intuitive API, then internally converts to uppercase to match
+ * SPACING constant keys ('XS', 'SM', 'MD', etc.). This design choice prioritizes
+ * developer experience while maintaining compatibility with the SPACING constants.
+ *
+ * @param size - Spacing size constant ('xs', 'sm', 'md', 'lg', 'xl', 'xxl')
+ * @param isMobile - Whether to apply mobile scaling (87.5% for mobile devices)
+ * @returns Spacing value in pixels
+ *
+ * @example
+ * ```tsx
+ * const padding = getResponsiveSpacing('md', isMobile); // 16px desktop, 14px mobile
+ * <div style={{ padding: `${padding}px` }}>Content</div>
+ * ```
+ *
+ * @korean 반응형간격얻기
+ */
+export declare function getResponsiveSpacing(size: SpacingSize, isMobile?: boolean): number;
+/**
+ * Get trigram symbol by name
+ *
+ * Returns Unicode trigram symbol for visual embellishment
+ *
+ * @param name - Trigram name in Korean
+ * @returns Unicode trigram symbol
+ *
+ * @example
+ * ```tsx
+ * <div>{getTrigramSymbol('건')} 건 (Heaven)</div>
+ * ```
+ *
+ * @korean 팔괘기호얻기
+ */
+export declare function getTrigramSymbol(name: "건" | "태" | "리" | "진" | "손" | "감" | "간" | "곤"): string;
+/**
+ * Get trigram symbol styles with glow effect
+ *
+ * Enhances trigram symbols (☰☱☲☳☴☵☶☷) with cyberpunk neon glow
+ * based on stance-specific colors and active state.
+ *
+ * @param config - Configuration object
+ * @param config.stance - Trigram stance identifier ("geon", "tae", etc.)
+ * @param config.isActive - Whether the trigram stance is currently active
+ * @param config.size - Font size in pixels (optional, defaults based on active state)
+ * @returns React.CSSProperties with trigram-specific glow
+ *
+ * @example
+ * ```tsx
+ * const trigramStyle = getTrigramSymbolWithGlow({ stance: 'geon', isActive: true });
+ * <div style={trigramStyle}>
+ *   ☰ 건 | Geon
+ * </div>
+ * ```
+ *
+ * @korean 팔괘기호네온글로우스타일얻기
+ */
+export declare function getTrigramSymbolWithGlow(config: {
+    readonly stance: "geon" | "tae" | "li" | "jin" | "son" | "gam" | "gan" | "gon";
+    readonly isActive?: boolean;
+    readonly size?: number;
+}): React.CSSProperties & {
+    WebkitUserSelect?: string;
+};
+/**
+ * Get Korean color name for documentation
+ *
+ * Maps hex color to Korean color name for better documentation
+ *
+ * @param hexColor - Hex color value from KOREAN_COLORS
+ * @returns Korean name and English translation
+ *
+ * @internal Used primarily for JSDoc documentation
+ * @korean 한국색상이름얻기
+ */
+export declare function getKoreanColorName(hexColor: number): {
+    korean: string;
+    english: string;
+};
+/**
+ * Format stat row with bilingual labels
+ *
+ * Creates consistent stat row styling for training/combat statistics
+ *
+ * @param korean - Korean label
+ * @param english - English label
+ * @param value - Stat value
+ * @param valueColor - Hex color for value text
+ * @param isMobile - Mobile responsive mode
+ * @returns Stat row configuration object for React rendering
+ *
+ * @example
+ * ```tsx
+ * const statConfig = formatStatRow('점수', 'Score', 1500, KOREAN_COLORS.ACCENT_GOLD, false);
+ * ```
+ *
+ * @korean 통계행형식화
+ */
+export declare function formatStatRow(korean: string, english: string, value: string | number, valueColor: number, isMobile: boolean): {
+    korean: string;
+    english: string;
+    value: string | number;
+    valueColor: number;
+    labelSize: string;
+    subLabelSize: string;
+    valueSize: string;
+};
+//# sourceMappingURL=koreanThemeHelpers.d.ts.map

package/lib/utils/koreanThemeHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"koreanThemeHelpers.d.ts","sourceRoot":"","sources":["../../src/utils/koreanThemeHelpers.ts"],"names":[],"mappings":"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"}

package/lib/utils/koreanThemeHelpers.js

@@ -0,0 +1,348 @@
+import { KOREAN_COLORS } from "../types/constants/colors.js";
+import { FONT_FAMILY } from "../types/constants/typography.js";
+import { BORDER_RADIUS, SPACING } from "../types/constants/ui.js";
+import "../types/constants/index.js";
+import { hexToRgbaString } from "./colorUtils.js";
+import { combineShadowEffects, getBackdropBlurEffect, getCyberpunkGradient, getFocusStateStyles, getHoverStateStyles, getKoreanFontOptimization, getLayeredDepthEffect, getNeonGlowEffect, getNeonTextShadow, getSmoothTransition } from "./visualEffects.js";
+//#region src/utils/koreanThemeHelpers.ts
+/**
+* Korean Theme Helper Utilities for HTML Overlays
+*
+* Provides consistent Korean martial arts cyberpunk theming across all HTML overlay components.
+* These utilities ensure color consistency, bilingual text formatting, and responsive spacing.
+*
+* @module utils/koreanThemeHelpers
+* @category UI Utilities
+* @korean 한국테마도우미
+*/
+/**
+* Base styles for all Korean-themed overlays
+*
+* Provides consistent dark background with cyan/gold accents
+*
+* @param opacity - Background opacity (0-1), default 0.9
+* @returns React.CSSProperties object with Korean theme
+*
+* @example
+* ```tsx
+* <div style={getKoreanOverlayBaseStyles(0.95)}>
+*   Content
+* </div>
+* ```
+*
+* @korean 한국오버레이기본스타일얻기
+*/
+function getKoreanOverlayBaseStyles(opacity = .9) {
+	return {
+		backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, opacity),
+		border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .8)}`,
+		borderRadius: `${BORDER_RADIUS.MD}px`,
+		fontFamily: FONT_FAMILY.KOREAN,
+		color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),
+		boxShadow: `0 4px 20px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .5)}`
+	};
+}
+/**
+* Enhanced Korean overlay styles with visual effects
+*
+* Provides advanced cyberpunk styling with neon glow, depth effects,
+* gradients, and backdrop blur for Korean-themed overlays.
+*
+* @param config - Enhanced overlay configuration
+* @returns React.CSSProperties with advanced visual effects
+*
+* @example
+* ```tsx
+* const styles = getEnhancedKoreanOverlayStyles({
+*   opacity: 0.95,
+*   glowIntensity: 'medium',
+*   includeGradient: true,
+*   includeBackdropBlur: true,
+*   depthLayers: 3,
+* });
+* <div style={styles}>Enhanced Content</div>
+* ```
+*
+* @korean 향상된한국오버레이스타일얻기
+*/
+function getEnhancedKoreanOverlayStyles(config = {}) {
+	const { opacity = .9, glowIntensity = "medium", includeGradient = false, includeBackdropBlur = false, depthLayers = 2 } = config;
+	const baseStyles = getKoreanOverlayBaseStyles(opacity);
+	const boxShadow = combineShadowEffects([getNeonGlowEffect(KOREAN_COLORS.PRIMARY_CYAN, glowIntensity, true), getLayeredDepthEffect({
+		layers: depthLayers,
+		baseOffset: 2,
+		baseBlur: 4,
+		color: KOREAN_COLORS.BLACK_SOLID,
+		opacity: .5
+	})]);
+	let background = baseStyles.backgroundColor;
+	if (includeGradient) background = `${getCyberpunkGradient(KOREAN_COLORS.PRIMARY_CYAN, KOREAN_COLORS.UI_BACKGROUND_DARK, 135)}, ${background}`;
+	const backdropStyles = includeBackdropBlur ? getBackdropBlurEffect(10, 1.5) : {};
+	return {
+		...baseStyles,
+		...backdropStyles,
+		background,
+		boxShadow,
+		transition: getSmoothTransition("all", "normal"),
+		...getKoreanFontOptimization(16, "normal")
+	};
+}
+/**
+* Format bilingual text with Korean and English
+*
+* Supports multiple formatting styles:
+* - pipe: "한글 | English"
+* - parentheses: "한글 (English)"
+* - bracket: "한글 [English]"
+* - slash: "한글 / English"
+*
+* @param korean - Korean text
+* @param english - English text
+* @param format - Format style, default "pipe"
+* @returns Formatted bilingual string
+*
+* @example
+* ```tsx
+* formatBilingualText('공격', 'Attack', 'pipe') // "공격 | Attack"
+* formatBilingualText('방어', 'Defense', 'parentheses') // "방어 (Defense)"
+* ```
+*
+* @korean 이중언어텍스트형식화
+*/
+function formatBilingualText(korean, english, format = "pipe") {
+	switch (format) {
+		case "pipe": return `${korean} | ${english}`;
+		case "parentheses": return `${korean} (${english})`;
+		case "bracket": return `${korean} [${english}]`;
+		case "slash": return `${korean} / ${english}`;
+		default: return `${korean} | ${english}`;
+	}
+}
+/**
+* Get Korean button styles with variant support
+*
+* Returns consistent button styling based on variant:
+* - primary: Cyan border, gold text
+* - secondary: Gold border, white text
+* - danger: Red border, red text
+* - success: Green border, green text
+* - warning: Orange border, orange text
+*
+* @param variant - Button variant type
+* @param isHovered - Whether button is hovered
+* @param isPressed - Whether button is pressed
+* @returns React.CSSProperties for button
+*
+* @example
+* ```tsx
+* <button style={getKoreanButtonStyles('primary', isHovered, isPressed)}>
+*   {formatBilingualText('확인', 'Confirm')}
+* </button>
+* ```
+*
+* @korean 한국버튼스타일얻기
+*/
+function getKoreanButtonStyles(variant = "primary", isHovered = false, isPressed = false) {
+	const colors = {
+		primary: {
+			border: KOREAN_COLORS.PRIMARY_CYAN,
+			text: KOREAN_COLORS.ACCENT_GOLD,
+			hoverBg: KOREAN_COLORS.PRIMARY_CYAN
+		},
+		secondary: {
+			border: KOREAN_COLORS.ACCENT_GOLD,
+			text: KOREAN_COLORS.TEXT_PRIMARY,
+			hoverBg: KOREAN_COLORS.ACCENT_GOLD
+		},
+		danger: {
+			border: KOREAN_COLORS.ACCENT_RED,
+			text: KOREAN_COLORS.ACCENT_RED,
+			hoverBg: KOREAN_COLORS.ACCENT_RED
+		},
+		success: {
+			border: KOREAN_COLORS.ACCENT_GREEN,
+			text: KOREAN_COLORS.ACCENT_GREEN,
+			hoverBg: KOREAN_COLORS.ACCENT_GREEN
+		},
+		warning: {
+			border: KOREAN_COLORS.WARNING_ORANGE,
+			text: KOREAN_COLORS.WARNING_ORANGE,
+			hoverBg: KOREAN_COLORS.WARNING_ORANGE
+		}
+	}[variant];
+	let backgroundColor = hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .9);
+	let borderColor = hexToRgbaString(colors.border, .8);
+	const textColor = hexToRgbaString(colors.text);
+	let boxShadow = "none";
+	let transform = "scale(1)";
+	if (isPressed) {
+		backgroundColor = hexToRgbaString(colors.hoverBg, .2);
+		transform = "scale(0.98)";
+	} else if (isHovered) {
+		backgroundColor = hexToRgbaString(colors.hoverBg, .1);
+		borderColor = hexToRgbaString(colors.border, 1);
+		boxShadow = `0 0 10px ${hexToRgbaString(colors.border, .5)}`;
+	}
+	return {
+		backgroundColor,
+		border: `2px solid ${borderColor}`,
+		borderRadius: `${BORDER_RADIUS.SM}px`,
+		color: textColor,
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontWeight: "bold",
+		padding: `${SPACING.SM}px ${SPACING.MD}px`,
+		cursor: "pointer",
+		transition: "all 0.2s ease",
+		userSelect: "none",
+		WebkitUserSelect: "none",
+		boxShadow,
+		transform,
+		textShadow: `0 2px 4px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .5)}`
+	};
+}
+/**
+* Get enhanced Korean button styles with neon glow
+*
+* Provides advanced button styling with cyberpunk neon effects,
+* smooth transitions, and Korean font optimization.
+*
+* @param config - Enhanced button configuration
+* @returns React.CSSProperties with neon glow effects
+*
+* @example
+* ```tsx
+* const buttonStyle = getKoreanButtonWithGlow({
+*   variant: 'primary',
+*   isHovered: true,
+*   glowIntensity: 'strong',
+*   hoverAnimation: 'combined',
+* });
+* <button style={buttonStyle}>
+*   {formatBilingualText('공격', 'Attack')}
+* </button>
+* ```
+*
+* @korean 네온글로우한국버튼스타일얻기
+*/
+function getKoreanButtonWithGlow(config = {}) {
+	const { variant = "primary", isHovered = false, isPressed = false, isFocused = false, glowIntensity = "medium", hoverAnimation = "combined" } = config;
+	const baseStyles = getKoreanButtonStyles(variant, false, isPressed);
+	const glowColor = {
+		primary: KOREAN_COLORS.PRIMARY_CYAN,
+		secondary: KOREAN_COLORS.ACCENT_GOLD,
+		danger: KOREAN_COLORS.ACCENT_RED,
+		success: KOREAN_COLORS.ACCENT_GREEN,
+		warning: KOREAN_COLORS.WARNING_ORANGE
+	}[variant];
+	let hoverStyles = {};
+	if (isHovered) hoverStyles = getHoverStateStyles(glowColor, hoverAnimation, glowIntensity);
+	let focusStyles = {};
+	if (isFocused) focusStyles = getFocusStateStyles(glowColor, true);
+	const baseFontSize = typeof baseStyles.fontSize === "number" ? baseStyles.fontSize : parseInt(String(baseStyles.fontSize), 10) || 14;
+	const textGlow = getNeonTextShadow(glowColor, isHovered ? "medium" : "subtle");
+	const fontOptimization = getKoreanFontOptimization(baseFontSize, "bold");
+	return {
+		...baseStyles,
+		...fontOptimization,
+		...hoverStyles,
+		...focusStyles,
+		textShadow: textGlow,
+		transition: getSmoothTransition("all", "normal")
+	};
+}
+/**
+* Get button visual effects only (no color/background/border)
+*
+* Extracts only visual effects (boxShadow, transition, transform, textShadow) from
+* getKoreanButtonWithGlow without color-related properties. This is useful for cases
+* where buttons need custom colors (e.g., menu selection states) but want to preserve
+* the visual effects system.
+*
+* This function provides an explicit contract for visual effects extraction, preventing
+* fragile coupling that could occur with destructuring patterns. If getKoreanButtonWithGlow
+* adds new visual effect properties in the future, they should be explicitly added here.
+*
+* **Intentionally Excluded Properties:**
+* - Layout: fontSize, fontFamily, fontWeight, padding, width, height, cursor
+* - Typography: letterSpacing, lineHeight, textRendering, WebkitFontSmoothing, MozOsxFontSmoothing
+* - Colors: color, background, backgroundColor, border, borderColor
+*
+* **Included Visual Effects:**
+* - boxShadow: Neon glow effects
+* - transition: Smooth state changes (0.2s ease)
+* - transform: Hover/press animations (scale)
+* - textShadow: Text glow effects
+*
+* **Note:** If getKoreanButtonWithGlow adds new visual effect properties (e.g., 'filter',
+* 'opacity', 'willChange', 'backdropFilter'), they must be explicitly added to this function's
+* return type and extraction logic to maintain the explicit contract.
+*
+* @param config - Same configuration as getKoreanButtonWithGlow
+* @returns React.CSSProperties with only visual effects (boxShadow, transition, transform, textShadow)
+*
+* @example
+* ```tsx
+* const visualEffects = getButtonVisualEffectsOnly({
+*   variant: 'primary',
+*   glowIntensity: 'strong',
+*   hoverAnimation: 'combined'
+* });
+*
+* <button style={{
+*   ...visualEffects,
+*   color: customColor,        // Apply custom colors
+*   background: customBg,
+*   border: customBorder
+* }}>
+*   Custom Button
+* </button>
+* ```
+*
+* @korean 버튼시각효과만얻기
+*/
+function getButtonVisualEffectsOnly(config) {
+	const fullStyles = getKoreanButtonWithGlow(config);
+	return {
+		boxShadow: fullStyles.boxShadow,
+		transition: fullStyles.transition,
+		transform: fullStyles.transform,
+		textShadow: fullStyles.textShadow
+	};
+}
+/**
+* Get responsive spacing value
+*
+* Returns SPACING constant value for consistent spacing across components.
+* Optionally scales for mobile devices.
+*
+* **IMPORTANT**: This function accepts lowercase size parameters ('xs', 'sm', 'md', etc.)
+* to provide a more intuitive API, then internally converts to uppercase to match
+* SPACING constant keys ('XS', 'SM', 'MD', etc.). This design choice prioritizes
+* developer experience while maintaining compatibility with the SPACING constants.
+*
+* @param size - Spacing size constant ('xs', 'sm', 'md', 'lg', 'xl', 'xxl')
+* @param isMobile - Whether to apply mobile scaling (87.5% for mobile devices)
+* @returns Spacing value in pixels
+*
+* @example
+* ```tsx
+* const padding = getResponsiveSpacing('md', isMobile); // 16px desktop, 14px mobile
+* <div style={{ padding: `${padding}px` }}>Content</div>
+* ```
+*
+* @korean 반응형간격얻기
+*/
+function getResponsiveSpacing(size, isMobile = false) {
+	const spacingValue = SPACING[size.toUpperCase()];
+	const mobileScale = .875;
+	if (spacingValue === void 0) {
+		const fallback = SPACING.MD;
+		console.warn(`[koreanThemeHelpers:getResponsiveSpacing] Invalid spacing size "${String(size)}" provided. Falling back to "MD".`);
+		return isMobile ? Math.round(fallback * mobileScale) : fallback;
+	}
+	return isMobile ? Math.round(spacingValue * mobileScale) : spacingValue;
+}
+//#endregion
+export { formatBilingualText, getButtonVisualEffectsOnly, getEnhancedKoreanOverlayStyles, getKoreanButtonWithGlow, getResponsiveSpacing };
+
+//# sourceMappingURL=koreanThemeHelpers.js.map