blacktrigram 0.7.11 → 0.7.13

package/lib/components/shared/ui/BaseHUDContainer.js

@@ -16,6 +16,46 @@ import { jsx } from "react/jsx-runtime";
 * - Pointer events handling
 * - Backdrop blur effects
 *
+* ## Z-Index Stacking Order (Combat HUD Layers)
+*
+* The combat screen renders multiple overlapping HUD panels. The stacking
+* order is managed by the Z_INDEX constants from LayoutTypes.ts:
+*
+* | Layer               | Z-Index | Description                        |
+* |---------------------|---------|------------------------------------|
+* | BACKGROUND          |    0    | 3D scene background                |
+* | ARENA               |   10    | Combat arena mesh                  |
+* | PLAYERS             |   20    | Character models                   |
+* | EFFECTS             |   30    | Particles and VFX                  |
+* | HUD_BACKGROUND      |   40    | HUD panel backgrounds              |
+* | HUD (default)       |   50    | Left/Right/Top/Bottom HUD panels   |
+* | TECHNIQUE_BAR       |   55    | Technique bar overlay              |
+* | HUD_OVERLAY         |   60    | PlayerStateOverlay and sub-HUDs    |
+* | MOBILE_CONTROLS     |  100    | Touch controls on mobile           |
+* | MODAL               |  200    | Modal dialogs                      |
+* | TOOLTIP             |  300    | Tooltips and hints                 |
+* | PAUSE_MENU          | 1000    | Pause menu overlay                 |
+* | LOADING             | 2000    | Loading screens                    |
+* | DEBUG               | 9000    | Performance debug overlay          |
+*
+* All BaseHUDContainer instances default to Z_INDEX.HUD (50). Parent
+* screens can override via the `zIndex` prop when a different layer
+* is needed (e.g., overlays at HUD_OVERLAY = 60).
+*
+* ## Viewport Breakpoints (Expected HUD Sizes)
+*
+* | Viewport            | Width    | Left/Right HUD | Top HUD | Bottom HUD |
+* |---------------------|----------|----------------|---------|------------|
+* | Small Phone (≤375)  | ≤375px   | ~120-150px     | ~50px   | ~90px      |
+* | Mobile (<768)       | <768px   | ~180-200px     | ~60px   | ~110px     |
+* | Tablet (768-1199)   | 768-1199 | ~220-260px     | ~65px   | ~120px     |
+* | Desktop (≥1200)     | ≥1200px  | ~260-300px     | ~70px   | ~130px     |
+* | 4K (≥1920)          | ≥1920px  | ~300-400px     | ~80px   | ~140px     |
+*
+* Width/height values are passed by the parent screen and scaled via
+* positionScale multipliers. This table documents the expected ranges
+* produced by CombatScreen3D and TrainingScreen3D layout calculations.
+*
 * @module components/shared/ui
 * @korean 기본HUD컨테이너 - 공통 패턴을 가진 재사용 가능한 HUD 컨테이너
 */

package/lib/components/shared/ui/BaseHUDContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseHUDContainer.js","names":[],"sources":["../../../../src/components/shared/ui/BaseHUDContainer.tsx"],"sourcesContent":["/**\n * BaseHUDContainer - Reusable HUD container with common patterns\n *\n * Provides consistent container styling and positioning for all HUD components.\n * Eliminates code duplication across Training and Combat HUDs.\n *\n * Features:\n * - Responsive positioning based on HUD position (left, right, top, bottom)\n * - Korean cyberpunk theming with gradients and borders\n * - Pointer events handling\n * - Backdrop blur effects\n *\n * @module components/shared/ui\n * @korean 기본HUD컨테이너 - 공통 패턴을 가진 재사용 가능한 HUD 컨테이너\n */\n\nimport React from \"react\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\n\n/**\n * HUD position type\n */\nexport type HUDPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\n/**\n * Props for BaseHUDContainer component\n */\nexport interface BaseHUDContainerProps {\n  /** Position of the HUD (left, right, top, bottom) */\n  readonly position: HUDPosition;\n  /** Width in pixels (used for left/right positions; top/bottom use 100% width) */\n  readonly width: number;\n  /** Height in pixels */\n  readonly height: number;\n  /** Top offset in pixels (for left/right HUDs) */\n  readonly topOffset?: number;\n  /** Internal padding in pixels */\n  readonly padding?: number;\n  /** Gap between sections in pixels */\n  readonly gap?: number;\n  /** Z-index for layering */\n  readonly zIndex?: number;\n  /** Additional CSS styles */\n  readonly style?: React.CSSProperties;\n  /** Child elements */\n  readonly children: React.ReactNode;\n  /** Test ID for testing */\n  readonly dataTestId?: string;\n}\n\n/**\n * BaseHUDContainer Component\n *\n * Reusable container for HUD elements with consistent styling and positioning.\n * Handles left, right, top, and bottom positions with appropriate borders,\n * gradients, and responsive behavior.\n *\n * @example\n * ```tsx\n * <BaseHUDContainer\n *   position=\"left\"\n *   width={268}\n *   height={940}\n *   topOffset={70}\n *   padding={12}\n *   gap={14}\n *   dataTestId=\"combat-left-hud\"\n * >\n *   <PlayerHUD player={player} />\n *   <SpeedIndicator speed={speed} />\n * </BaseHUDContainer>\n * ```\n */\nexport const BaseHUDContainer: React.FC<BaseHUDContainerProps> = ({\n  position,\n  width,\n  height,\n  topOffset = 0,\n  padding = 10,\n  gap = 12,\n  zIndex = Z_INDEX.HUD,\n  style = {},\n  children,\n  dataTestId,\n}) => {\n  // Calculate position-specific styles\n  // Using KOREAN_COLORS directly for stable memoization instead of useKoreanTheme\n  const containerStyle = React.useMemo<React.CSSProperties>(() => {\n    const baseStyle: React.CSSProperties = {\n      position: \"absolute\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n      pointerEvents: \"none\",\n      padding: `${padding}px`,\n      boxSizing: \"border-box\",\n      gap: `${gap}px`,\n      zIndex,\n      backdropFilter: \"blur(8px)\",\n    };\n\n    switch (position) {\n      case \"left\":\n        return {\n          ...baseStyle,\n          left: 0,\n          top: `${topOffset}px`,\n          width: `${width}px`,\n          height: `${height}px`,\n          justifyContent: \"flex-start\",\n          borderRight: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(90deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.4)} 100%)`,\n        };\n\n      case \"right\":\n        return {\n          ...baseStyle,\n          right: 0,\n          top: `${topOffset}px`,\n          width: `${width}px`,\n          height: `${height}px`,\n          justifyContent: \"flex-start\",\n          borderLeft: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(270deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.4)} 100%)`,\n        };\n\n      case \"top\":\n        return {\n          ...baseStyle,\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: `${height}px`,\n          flexDirection: \"row\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          borderBottom: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(180deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.7)} 100%)`,\n        };\n\n      case \"bottom\":\n        return {\n          ...baseStyle,\n          bottom: 0,\n          left: 0,\n          width: \"100%\",\n          height: `${height}px`,\n          flexDirection: \"row\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          borderTop: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(0deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.7)} 100%)`,\n        };\n    }\n  }, [position, width, height, topOffset, padding, gap, zIndex]);\n\n  return (\n    <div style={{ ...containerStyle, ...style }} data-testid={dataTestId}>\n      {children}\n    </div>\n  );\n};\n\nexport default BaseHUDContainer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,IAAa,oBAAqD,EAChE,UACA,OACA,QACA,YAAY,GACZ,UAAU,IACV,MAAM,IACN,SAAS,QAAQ,KACjB,QAAQ,EAAE,EACV,UACA,iBACI;AAwEJ,QACE,oBAAC,OAAD;EAAK,OAAO;GAAE,GAtEO,MAAM,cAAmC;IAC9D,MAAM,YAAiC;KACrC,UAAU;KACV,SAAS;KACT,eAAe;KACf,YAAY;KACZ,eAAe;KACf,SAAS,GAAG,QAAQ;KACpB,WAAW;KACX,KAAK,GAAG,IAAI;KACZ;KACA,gBAAgB;KACjB;AAED,YAAQ,UAAR;KACE,KAAK,OACH,QAAO;MACL,GAAG;MACH,MAAM;MACN,KAAK,GAAG,UAAU;MAClB,OAAO,GAAG,MAAM;MAChB,QAAQ,GAAG,OAAO;MAClB,gBAAgB;MAChB,aAAa,aAAa,gBAAgB,cAAc,cAAc,GAAI;MAC1E,YAAY,0BAA0B,gBAAgB,cAAc,oBAAoB,IAAK,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC7J;KAEH,KAAK,QACH,QAAO;MACL,GAAG;MACH,OAAO;MACP,KAAK,GAAG,UAAU;MAClB,OAAO,GAAG,MAAM;MAChB,QAAQ,GAAG,OAAO;MAClB,gBAAgB;MAChB,YAAY,aAAa,gBAAgB,cAAc,cAAc,GAAI;MACzE,YAAY,2BAA2B,gBAAgB,cAAc,oBAAoB,IAAK,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC9J;KAEH,KAAK,MACH,QAAO;MACL,GAAG;MACH,KAAK;MACL,MAAM;MACN,OAAO;MACP,QAAQ,GAAG,OAAO;MAClB,eAAe;MACf,gBAAgB;MAChB,YAAY;MACZ,cAAc,aAAa,gBAAgB,cAAc,cAAc,GAAI;MAC3E,YAAY,2BAA2B,gBAAgB,cAAc,oBAAoB,GAAI,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC7J;KAEH,KAAK,SACH,QAAO;MACL,GAAG;MACH,QAAQ;MACR,MAAM;MACN,OAAO;MACP,QAAQ,GAAG,OAAO;MAClB,eAAe;MACf,gBAAgB;MAChB,YAAY;MACZ,WAAW,aAAa,gBAAgB,cAAc,cAAc,GAAI;MACxE,YAAY,yBAAyB,gBAAgB,cAAc,oBAAoB,GAAI,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC3J;;MAEJ;IAAC;IAAU;IAAO;IAAQ;IAAW;IAAS;IAAK;IAAO,CAAC;GAG3B,GAAG;GAAO;EAAE,eAAa;EACvD;EACG,CAAA"}
+{"version":3,"file":"BaseHUDContainer.js","names":[],"sources":["../../../../src/components/shared/ui/BaseHUDContainer.tsx"],"sourcesContent":["/**\n * BaseHUDContainer - Reusable HUD container with common patterns\n *\n * Provides consistent container styling and positioning for all HUD components.\n * Eliminates code duplication across Training and Combat HUDs.\n *\n * Features:\n * - Responsive positioning based on HUD position (left, right, top, bottom)\n * - Korean cyberpunk theming with gradients and borders\n * - Pointer events handling\n * - Backdrop blur effects\n *\n * ## Z-Index Stacking Order (Combat HUD Layers)\n *\n * The combat screen renders multiple overlapping HUD panels. The stacking\n * order is managed by the Z_INDEX constants from LayoutTypes.ts:\n *\n * | Layer               | Z-Index | Description                        |\n * |---------------------|---------|------------------------------------|\n * | BACKGROUND          |    0    | 3D scene background                |\n * | ARENA               |   10    | Combat arena mesh                  |\n * | PLAYERS             |   20    | Character models                   |\n * | EFFECTS             |   30    | Particles and VFX                  |\n * | HUD_BACKGROUND      |   40    | HUD panel backgrounds              |\n * | HUD (default)       |   50    | Left/Right/Top/Bottom HUD panels   |\n * | TECHNIQUE_BAR       |   55    | Technique bar overlay              |\n * | HUD_OVERLAY         |   60    | PlayerStateOverlay and sub-HUDs    |\n * | MOBILE_CONTROLS     |  100    | Touch controls on mobile           |\n * | MODAL               |  200    | Modal dialogs                      |\n * | TOOLTIP             |  300    | Tooltips and hints                 |\n * | PAUSE_MENU          | 1000    | Pause menu overlay                 |\n * | LOADING             | 2000    | Loading screens                    |\n * | DEBUG               | 9000    | Performance debug overlay          |\n *\n * All BaseHUDContainer instances default to Z_INDEX.HUD (50). Parent\n * screens can override via the `zIndex` prop when a different layer\n * is needed (e.g., overlays at HUD_OVERLAY = 60).\n *\n * ## Viewport Breakpoints (Expected HUD Sizes)\n *\n * | Viewport            | Width    | Left/Right HUD | Top HUD | Bottom HUD |\n * |---------------------|----------|----------------|---------|------------|\n * | Small Phone (≤375)  | ≤375px   | ~120-150px     | ~50px   | ~90px      |\n * | Mobile (<768)       | <768px   | ~180-200px     | ~60px   | ~110px     |\n * | Tablet (768-1199)   | 768-1199 | ~220-260px     | ~65px   | ~120px     |\n * | Desktop (≥1200)     | ≥1200px  | ~260-300px     | ~70px   | ~130px     |\n * | 4K (≥1920)          | ≥1920px  | ~300-400px     | ~80px   | ~140px     |\n *\n * Width/height values are passed by the parent screen and scaled via\n * positionScale multipliers. This table documents the expected ranges\n * produced by CombatScreen3D and TrainingScreen3D layout calculations.\n *\n * @module components/shared/ui\n * @korean 기본HUD컨테이너 - 공통 패턴을 가진 재사용 가능한 HUD 컨테이너\n */\n\nimport React from \"react\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\n\n/**\n * HUD position type\n */\nexport type HUDPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\n/**\n * Props for BaseHUDContainer component\n */\nexport interface BaseHUDContainerProps {\n  /** Position of the HUD (left, right, top, bottom) */\n  readonly position: HUDPosition;\n  /** Width in pixels (used for left/right positions; top/bottom use 100% width) */\n  readonly width: number;\n  /** Height in pixels */\n  readonly height: number;\n  /** Top offset in pixels (for left/right HUDs) */\n  readonly topOffset?: number;\n  /** Internal padding in pixels */\n  readonly padding?: number;\n  /** Gap between sections in pixels */\n  readonly gap?: number;\n  /** Z-index for layering */\n  readonly zIndex?: number;\n  /** Additional CSS styles */\n  readonly style?: React.CSSProperties;\n  /** Child elements */\n  readonly children: React.ReactNode;\n  /** Test ID for testing */\n  readonly dataTestId?: string;\n}\n\n/**\n * BaseHUDContainer Component\n *\n * Reusable container for HUD elements with consistent styling and positioning.\n * Handles left, right, top, and bottom positions with appropriate borders,\n * gradients, and responsive behavior.\n *\n * @example\n * ```tsx\n * <BaseHUDContainer\n *   position=\"left\"\n *   width={268}\n *   height={940}\n *   topOffset={70}\n *   padding={12}\n *   gap={14}\n *   dataTestId=\"combat-left-hud\"\n * >\n *   <PlayerHUD player={player} />\n *   <SpeedIndicator speed={speed} />\n * </BaseHUDContainer>\n * ```\n */\nexport const BaseHUDContainer: React.FC<BaseHUDContainerProps> = ({\n  position,\n  width,\n  height,\n  topOffset = 0,\n  padding = 10,\n  gap = 12,\n  zIndex = Z_INDEX.HUD,\n  style = {},\n  children,\n  dataTestId,\n}) => {\n  // Calculate position-specific styles\n  // Using KOREAN_COLORS directly for stable memoization instead of useKoreanTheme\n  //\n  // Z-index stacking: defaults to Z_INDEX.HUD (50). Combat screen layers\n  // are ordered as: HUD_BACKGROUND (40) < HUD (50) < TECHNIQUE_BAR (55) < HUD_OVERLAY (60).\n  // Left/Right/Top/Bottom HUDs all share the same z-index (HUD = 50) and\n  // rely on DOM order for overlap resolution. The PlayerStateOverlay sits\n  // at HUD_OVERLAY (60) to appear above all HUD panels.\n  //\n  // Safe area note: left/right HUD panels are anchored to the viewport edge\n  // with left: 0 / right: 0. Reducing the width prop alone will not move a\n  // panel out of a landscape notch or horizontal safe-area cutout. If the\n  // parent needs to avoid env(safe-area-inset-left) /\n  // env(safe-area-inset-right), it should also provide a horizontal offset\n  // via the existing style prop (for example, left/right or horizontal\n  // padding) in addition to any width adjustments. Horizontal safe-area\n  // insets affect left/right panel widths and offsets, not topOffset (which\n  // is purely vertical). For portrait notch/status-bar avoidance, the parent\n  // should incorporate layout.safeArea.top into the topOffset calculation.\n  const containerStyle = React.useMemo<React.CSSProperties>(() => {\n    const baseStyle: React.CSSProperties = {\n      position: \"absolute\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n      pointerEvents: \"none\",\n      padding: `${padding}px`,\n      boxSizing: \"border-box\",\n      gap: `${gap}px`,\n      zIndex,\n      backdropFilter: \"blur(8px)\",\n    };\n\n    switch (position) {\n      case \"left\":\n        return {\n          ...baseStyle,\n          left: 0,\n          top: `${topOffset}px`,\n          width: `${width}px`,\n          height: `${height}px`,\n          justifyContent: \"flex-start\",\n          borderRight: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(90deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.4)} 100%)`,\n        };\n\n      case \"right\":\n        return {\n          ...baseStyle,\n          right: 0,\n          top: `${topOffset}px`,\n          width: `${width}px`,\n          height: `${height}px`,\n          justifyContent: \"flex-start\",\n          borderLeft: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(270deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.4)} 100%)`,\n        };\n\n      case \"top\":\n        return {\n          ...baseStyle,\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: `${height}px`,\n          flexDirection: \"row\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          borderBottom: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(180deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.7)} 100%)`,\n        };\n\n      case \"bottom\":\n        return {\n          ...baseStyle,\n          bottom: 0,\n          left: 0,\n          width: \"100%\",\n          height: `${height}px`,\n          flexDirection: \"row\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          borderTop: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(0deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.7)} 100%)`,\n        };\n    }\n  }, [position, width, height, topOffset, padding, gap, zIndex]);\n\n  return (\n    <div style={{ ...containerStyle, ...style }} data-testid={dataTestId}>\n      {children}\n    </div>\n  );\n};\n\nexport default BaseHUDContainer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,IAAa,oBAAqD,EAChE,UACA,OACA,QACA,YAAY,GACZ,UAAU,IACV,MAAM,IACN,SAAS,QAAQ,KACjB,QAAQ,EAAE,EACV,UACA,iBACI;AAyFJ,QACE,oBAAC,OAAD;EAAK,OAAO;GAAE,GAtEO,MAAM,cAAmC;IAC9D,MAAM,YAAiC;KACrC,UAAU;KACV,SAAS;KACT,eAAe;KACf,YAAY;KACZ,eAAe;KACf,SAAS,GAAG,QAAQ;KACpB,WAAW;KACX,KAAK,GAAG,IAAI;KACZ;KACA,gBAAgB;KACjB;AAED,YAAQ,UAAR;KACE,KAAK,OACH,QAAO;MACL,GAAG;MACH,MAAM;MACN,KAAK,GAAG,UAAU;MAClB,OAAO,GAAG,MAAM;MAChB,QAAQ,GAAG,OAAO;MAClB,gBAAgB;MAChB,aAAa,aAAa,gBAAgB,cAAc,cAAc,GAAI;MAC1E,YAAY,0BAA0B,gBAAgB,cAAc,oBAAoB,IAAK,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC7J;KAEH,KAAK,QACH,QAAO;MACL,GAAG;MACH,OAAO;MACP,KAAK,GAAG,UAAU;MAClB,OAAO,GAAG,MAAM;MAChB,QAAQ,GAAG,OAAO;MAClB,gBAAgB;MAChB,YAAY,aAAa,gBAAgB,cAAc,cAAc,GAAI;MACzE,YAAY,2BAA2B,gBAAgB,cAAc,oBAAoB,IAAK,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC9J;KAEH,KAAK,MACH,QAAO;MACL,GAAG;MACH,KAAK;MACL,MAAM;MACN,OAAO;MACP,QAAQ,GAAG,OAAO;MAClB,eAAe;MACf,gBAAgB;MAChB,YAAY;MACZ,cAAc,aAAa,gBAAgB,cAAc,cAAc,GAAI;MAC3E,YAAY,2BAA2B,gBAAgB,cAAc,oBAAoB,GAAI,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC7J;KAEH,KAAK,SACH,QAAO;MACL,GAAG;MACH,QAAQ;MACR,MAAM;MACN,OAAO;MACP,QAAQ,GAAG,OAAO;MAClB,eAAe;MACf,gBAAgB;MAChB,YAAY;MACZ,WAAW,aAAa,gBAAgB,cAAc,cAAc,GAAI;MACxE,YAAY,yBAAyB,gBAAgB,cAAc,oBAAoB,GAAI,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC3J;;MAEJ;IAAC;IAAU;IAAO;IAAQ;IAAW;IAAS;IAAK;IAAO,CAAC;GAG3B,GAAG;GAAO;EAAE,eAAa;EACvD;EACG,CAAA"}

package/lib/components/shared/ui/MobileHUDLayout.d.ts

@@ -52,6 +52,19 @@ export interface MobileHUDLayoutProps {
  * - Minimal screen real estate usage
  * - Safe area aware positioning
  *
+ * Landscape Safe Area Notes:
+ * - In landscape on notched devices (iPhone X+), the left and right health
+ *   bars are currently anchored using `layout.spacing.md` from their
+ *   respective edges.
+ * - The `useResponsiveLayout` hook provides safe-area values, and this
+ *   component uses `layout.safeArea.top` for vertical offset.
+ * - However, the current health bar positioning does not directly apply
+ *   `layout.safeArea.left` / `layout.safeArea.right` for horizontal notch or
+ *   cutout avoidance in landscape mode.
+ * - Consumers that require landscape horizontal safe-area protection should
+ *   add `env(safe-area-inset-left)` / `env(safe-area-inset-right)` via CSS
+ *   or ensure the parent container applies equivalent horizontal offsets.
+ *
  * @example
  * ```tsx
  * <MobileHUDLayout

package/lib/components/shared/ui/MobileHUDLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileHUDLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/MobileHUDLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,qBAAqB;IACrB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,gCAAgC;IAChC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,2BAA2B;IAC3B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,0BAA0B;IAC1B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAkMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkG1D,CAAC"}
+{"version":3,"file":"MobileHUDLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/MobileHUDLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,qBAAqB;IACrB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,gCAAgC;IAChC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,2BAA2B;IAC3B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,0BAA0B;IAC1B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAkMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkG1D,CAAC"}

package/lib/components/shared/ui/SplashScreen.js

@@ -1,6 +1,6 @@
 import { KOREAN_COLORS } from "../../../types/constants/colors.js";
 import { FONT_FAMILY } from "../../../types/constants/typography.js";
-import { toHex } from "../../../utils/colorUtils.js";
+import { hexColorToCSS, toHex } from "../../../utils/colorUtils.js";
 import { shouldUseMobileControls } from "../../../utils/deviceDetection.js";
 import { useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -39,8 +39,8 @@ var SplashScreen = ({ onStart, width, height }) => {
 			flexDirection: "column",
 			justifyContent: "center",
 			alignItems: "center",
-			background: "linear-gradient(180deg, #0a0f12 0%, #1a1a2e 100%)",
-			color: "#fff",
+			background: `linear-gradient(180deg, ${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK)} 0%, ${hexColorToCSS(KOREAN_COLORS.ARENA_BACKGROUND)} 100%)`,
+			color: hexColorToCSS(KOREAN_COLORS.TEXT_PRIMARY),
 			fontFamily: FONT_FAMILY.CYBER,
 			position: "relative",
 			overflow: "hidden"
@@ -115,7 +115,7 @@ var SplashScreen = ({ onStart, width, height }) => {
 					/* @__PURE__ */ jsx("p", {
 						style: {
 							fontSize: `${layoutCalculation.bodyFontSize}px`,
-							color: "#aaa",
+							color: hexColorToCSS(KOREAN_COLORS.TEXT_TERTIARY),
 							marginTop: "20px",
 							letterSpacing: "1px"
 						},
@@ -134,8 +134,8 @@ var SplashScreen = ({ onStart, width, height }) => {
 					fontSize: `${layoutCalculation.buttonFontSize}px`,
 					fontFamily: FONT_FAMILY.CYBER,
 					fontWeight: 700,
-					color: isLoading ? "#666" : "#000",
-					background: isLoading ? "#333" : `linear-gradient(135deg, #${HEX_COLORS.PRIMARY_CYAN} 0%, #${HEX_COLORS.ACCENT_GOLD} 100%)`,
+					color: isLoading ? hexColorToCSS(KOREAN_COLORS.UI_DISABLED_TEXT) : hexColorToCSS(KOREAN_COLORS.BLACK),
+					background: isLoading ? hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_LIGHT) : `linear-gradient(135deg, #${HEX_COLORS.PRIMARY_CYAN} 0%, #${HEX_COLORS.ACCENT_GOLD} 100%)`,
 					border: "none",
 					borderRadius: "8px",
 					cursor: isLoading ? "not-allowed" : "pointer",
@@ -167,7 +167,7 @@ var SplashScreen = ({ onStart, width, height }) => {
 				style: {
 					marginTop: "40px",
 					textAlign: "center",
-					color: "#888",
+					color: hexColorToCSS(KOREAN_COLORS.UI_GRAY),
 					fontSize: `${layoutCalculation.instructionsFontSize}px`,
 					maxWidth: "600px",
 					padding: "0 20px",
@@ -183,16 +183,16 @@ var SplashScreen = ({ onStart, width, height }) => {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				role: "contentinfo",
-				"aria-label": `Application version 0.7.11`,
+				"aria-label": `Application version 0.7.13`,
 				style: {
 					position: "absolute",
 					bottom: "20px",
 					right: "20px",
-					color: "#555",
+					color: hexColorToCSS(KOREAN_COLORS.UI_STEEL_GRAY),
 					fontSize: "10px",
 					zIndex: 1
 				},
-				children: ["v", "0.7.11"]
+				children: ["v", "0.7.13"]
 			})
 		]
 	});

package/lib/components/shared/ui/SplashScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplashScreen.js","names":[],"sources":["../../../../src/components/shared/ui/SplashScreen.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"@/types/constants\";\nimport { toHex } from \"../../../utils/colorUtils\";\nimport { shouldUseMobileControls } from \"../../../utils/deviceDetection\";\n\n// Declare global APP_VERSION constant (injected by build process)\ndeclare const APP_VERSION: string | undefined;\n\n// Constants\n// Small delay to show loading state for visual feedback.\n// 100ms is sufficient for users to perceive the state change\n// without feeling sluggish. This value can be tuned for UX.\nconst LOADING_DELAY_MS = 100;\n\n// Pre-compute hex colors from Korean color constants\nconst HEX_COLORS = {\n  PRIMARY_CYAN: toHex(KOREAN_COLORS.PRIMARY_CYAN),\n  ACCENT_GOLD: toHex(KOREAN_COLORS.ACCENT_GOLD),\n} as const;\n\nexport interface SplashScreenProps {\n  readonly onStart: () => void;\n  readonly width: number;\n  readonly height: number;\n}\n\n/**\n * Splash screen that requires user interaction before starting the game.\n * This is necessary to initialize AudioContext which requires a user gesture.\n */\nexport const SplashScreen: React.FC<SplashScreenProps> = ({\n  onStart,\n  width,\n  height,\n}) => {\n  const [isLoading, setIsLoading] = useState(false);\n\n  // Use proper device detection (user-agent priority for high-res phones)\n  // This ensures mobile layout is used even on 4K Android devices\n  // User-agent doesn't change during session, so no dependencies needed\n  const isMobile = useMemo(() => shouldUseMobileControls(), []);\n\n  // Memoize responsive layout values\n  const layoutCalculation = useMemo(\n    () => ({\n      titleFontSize: isMobile ? 36 : 64,\n      subtitleFontSize: isMobile ? 16 : 24,\n      bodyFontSize: isMobile ? 12 : 14,\n      instructionsFontSize: isMobile ? 11 : 12,\n      buttonPadding: isMobile ? \"16px 48px\" : \"20px 60px\",\n      buttonFontSize: isMobile ? 16 : 20,\n    }),\n    [isMobile],\n  );\n\n  const handleStart = useCallback(() => {\n    setIsLoading(true);\n    // Small delay to show loading state\n    setTimeout(() => {\n      onStart();\n    }, LOADING_DELAY_MS);\n  }, [onStart]);\n\n  return (\n    <div\n      style={{\n        width,\n        height,\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        background: \"linear-gradient(180deg, #0a0f12 0%, #1a1a2e 100%)\",\n        color: \"#fff\",\n        fontFamily: FONT_FAMILY.CYBER,\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n      data-testid=\"splash-screen\"\n    >\n      {/* Animated background grid - decorative only */}\n      <div\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background: `\n            repeating-linear-gradient(\n              0deg,\n              transparent,\n              transparent 50px,\n              #${HEX_COLORS.PRIMARY_CYAN}08 50px,\n              #${HEX_COLORS.PRIMARY_CYAN}08 51px\n            ),\n            repeating-linear-gradient(\n              90deg,\n              transparent,\n              transparent 50px,\n              #${HEX_COLORS.PRIMARY_CYAN}08 50px,\n              #${HEX_COLORS.PRIMARY_CYAN}08 51px\n            )\n          `,\n          opacity: 0.3,\n        }}\n      />\n\n      {/* Screen reader live region for loading state */}\n      <div\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        style={{\n          position: \"absolute\",\n          left: \"-10000px\",\n          width: \"1px\",\n          height: \"1px\",\n          overflow: \"hidden\",\n        }}\n      >\n        {isLoading ? \"Initializing audio and loading game\" : \"Ready to start\"}\n      </div>\n\n      {/* Logo/Title */}\n      <div\n        style={{\n          marginBottom: \"60px\",\n          textAlign: \"center\",\n          zIndex: 1,\n        }}\n      >\n        <h1\n          style={{\n            fontSize: `${layoutCalculation.titleFontSize}px`,\n            fontWeight: 900,\n            color: `#${HEX_COLORS.PRIMARY_CYAN}`,\n            textShadow: `0 0 20px #${HEX_COLORS.PRIMARY_CYAN}80`,\n            marginBottom: \"20px\",\n            letterSpacing: \"4px\",\n          }}\n        >\n          흑괘\n        </h1>\n        <h2\n          style={{\n            fontSize: `${layoutCalculation.subtitleFontSize}px`,\n            fontWeight: 400,\n            color: `#${HEX_COLORS.ACCENT_GOLD}`,\n            letterSpacing: \"2px\",\n            marginTop: 0,\n          }}\n        >\n          BLACK TRIGRAM\n        </h2>\n        <p\n          style={{\n            fontSize: `${layoutCalculation.bodyFontSize}px`,\n            color: \"#aaa\",\n            marginTop: \"20px\",\n            letterSpacing: \"1px\",\n          }}\n        >\n          Korean Martial Arts Dojang\n        </p>\n      </div>\n\n      {/* Start Button */}\n      <button\n        onClick={handleStart}\n        disabled={isLoading}\n        aria-label={\n          isLoading\n            ? \"Starting game and initializing audio\"\n            : \"Start game and initialize audio\"\n        }\n        aria-busy={isLoading}\n        aria-describedby=\"splash-instructions\"\n        style={{\n          padding: layoutCalculation.buttonPadding,\n          fontSize: `${layoutCalculation.buttonFontSize}px`,\n          fontFamily: FONT_FAMILY.CYBER,\n          fontWeight: 700,\n          color: isLoading ? \"#666\" : \"#000\",\n          background: isLoading\n            ? \"#333\"\n            : `linear-gradient(135deg, #${HEX_COLORS.PRIMARY_CYAN} 0%, #${HEX_COLORS.ACCENT_GOLD} 100%)`,\n          border: \"none\",\n          borderRadius: \"8px\",\n          cursor: isLoading ? \"not-allowed\" : \"pointer\",\n          textTransform: \"uppercase\",\n          letterSpacing: \"2px\",\n          transition: \"all 0.3s ease\",\n          boxShadow: isLoading\n            ? \"none\"\n            : `0 4px 20px #${HEX_COLORS.PRIMARY_CYAN}40`,\n          position: \"relative\",\n          zIndex: 1,\n          opacity: isLoading ? 0.6 : 1,\n        }}\n        onMouseEnter={(e) => {\n          if (!isLoading) {\n            e.currentTarget.style.transform = \"scale(1.05)\";\n            e.currentTarget.style.boxShadow = `0 6px 30px #${HEX_COLORS.PRIMARY_CYAN}60`;\n          }\n        }}\n        onMouseLeave={(e) => {\n          if (!isLoading) {\n            e.currentTarget.style.transform = \"scale(1)\";\n            e.currentTarget.style.boxShadow = `0 4px 20px #${HEX_COLORS.PRIMARY_CYAN}40`;\n          }\n        }}\n        data-testid=\"splash-start-button\"\n      >\n        {isLoading ? \"시작 중... Starting...\" : \"시작 | Start\"}\n      </button>\n\n      {/* Instructions */}\n      <div\n        id=\"splash-instructions\"\n        style={{\n          marginTop: \"40px\",\n          textAlign: \"center\",\n          color: \"#888\",\n          fontSize: `${layoutCalculation.instructionsFontSize}px`,\n          maxWidth: \"600px\",\n          padding: \"0 20px\",\n          zIndex: 1,\n        }}\n      >\n        <p style={{ margin: \"8px 0\" }}>\n          Audio initialization requires user interaction\n        </p>\n        <p style={{ margin: \"8px 0\" }}>\n          Click the button above to enable sound and start the game\n        </p>\n      </div>\n\n      {/* Version info */}\n      <div\n        role=\"contentinfo\"\n        aria-label={`Application version ${typeof APP_VERSION !== \"undefined\" ? APP_VERSION : \"0.5.3\"}`}\n        style={{\n          position: \"absolute\",\n          bottom: \"20px\",\n          right: \"20px\",\n          color: \"#555\",\n          fontSize: \"10px\",\n          zIndex: 1,\n        }}\n      >\n        v{typeof APP_VERSION !== \"undefined\" ? APP_VERSION : \"0.5.3\"}\n      </div>\n    </div>\n  );\n};\n\nexport default SplashScreen;\n"],"mappings":"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"}
+{"version":3,"file":"SplashScreen.js","names":[],"sources":["../../../../src/components/shared/ui/SplashScreen.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"@/types/constants\";\nimport { hexColorToCSS, toHex } from \"../../../utils/colorUtils\";\nimport { shouldUseMobileControls } from \"../../../utils/deviceDetection\";\n\n// Declare global APP_VERSION constant (injected by build process)\ndeclare const APP_VERSION: string | undefined;\n\n// Constants\n// Small delay to show loading state for visual feedback.\n// 100ms is sufficient for users to perceive the state change\n// without feeling sluggish. This value can be tuned for UX.\nconst LOADING_DELAY_MS = 100;\n\n// Pre-compute hex colors from Korean color constants\nconst HEX_COLORS = {\n  PRIMARY_CYAN: toHex(KOREAN_COLORS.PRIMARY_CYAN),\n  ACCENT_GOLD: toHex(KOREAN_COLORS.ACCENT_GOLD),\n} as const;\n\nexport interface SplashScreenProps {\n  readonly onStart: () => void;\n  readonly width: number;\n  readonly height: number;\n}\n\n/**\n * Splash screen that requires user interaction before starting the game.\n * This is necessary to initialize AudioContext which requires a user gesture.\n */\nexport const SplashScreen: React.FC<SplashScreenProps> = ({\n  onStart,\n  width,\n  height,\n}) => {\n  const [isLoading, setIsLoading] = useState(false);\n\n  // Use proper device detection (user-agent priority for high-res phones)\n  // This ensures mobile layout is used even on 4K Android devices\n  // User-agent doesn't change during session, so no dependencies needed\n  const isMobile = useMemo(() => shouldUseMobileControls(), []);\n\n  // Memoize responsive layout values\n  const layoutCalculation = useMemo(\n    () => ({\n      titleFontSize: isMobile ? 36 : 64,\n      subtitleFontSize: isMobile ? 16 : 24,\n      bodyFontSize: isMobile ? 12 : 14,\n      instructionsFontSize: isMobile ? 11 : 12,\n      buttonPadding: isMobile ? \"16px 48px\" : \"20px 60px\",\n      buttonFontSize: isMobile ? 16 : 20,\n    }),\n    [isMobile],\n  );\n\n  const handleStart = useCallback(() => {\n    setIsLoading(true);\n    // Small delay to show loading state\n    setTimeout(() => {\n      onStart();\n    }, LOADING_DELAY_MS);\n  }, [onStart]);\n\n  return (\n    <div\n      style={{\n        width,\n        height,\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        background: `linear-gradient(180deg, ${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK)} 0%, ${hexColorToCSS(KOREAN_COLORS.ARENA_BACKGROUND)} 100%)`,\n        color: hexColorToCSS(KOREAN_COLORS.TEXT_PRIMARY),\n        fontFamily: FONT_FAMILY.CYBER,\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n      data-testid=\"splash-screen\"\n    >\n      {/* Animated background grid - decorative only */}\n      <div\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background: `\n            repeating-linear-gradient(\n              0deg,\n              transparent,\n              transparent 50px,\n              #${HEX_COLORS.PRIMARY_CYAN}08 50px,\n              #${HEX_COLORS.PRIMARY_CYAN}08 51px\n            ),\n            repeating-linear-gradient(\n              90deg,\n              transparent,\n              transparent 50px,\n              #${HEX_COLORS.PRIMARY_CYAN}08 50px,\n              #${HEX_COLORS.PRIMARY_CYAN}08 51px\n            )\n          `,\n          opacity: 0.3,\n        }}\n      />\n\n      {/* Screen reader live region for loading state */}\n      <div\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        style={{\n          position: \"absolute\",\n          left: \"-10000px\",\n          width: \"1px\",\n          height: \"1px\",\n          overflow: \"hidden\",\n        }}\n      >\n        {isLoading ? \"Initializing audio and loading game\" : \"Ready to start\"}\n      </div>\n\n      {/* Logo/Title */}\n      <div\n        style={{\n          marginBottom: \"60px\",\n          textAlign: \"center\",\n          zIndex: 1,\n        }}\n      >\n        <h1\n          style={{\n            fontSize: `${layoutCalculation.titleFontSize}px`,\n            fontWeight: 900,\n            color: `#${HEX_COLORS.PRIMARY_CYAN}`,\n            textShadow: `0 0 20px #${HEX_COLORS.PRIMARY_CYAN}80`,\n            marginBottom: \"20px\",\n            letterSpacing: \"4px\",\n          }}\n        >\n          흑괘\n        </h1>\n        <h2\n          style={{\n            fontSize: `${layoutCalculation.subtitleFontSize}px`,\n            fontWeight: 400,\n            color: `#${HEX_COLORS.ACCENT_GOLD}`,\n            letterSpacing: \"2px\",\n            marginTop: 0,\n          }}\n        >\n          BLACK TRIGRAM\n        </h2>\n        <p\n          style={{\n            fontSize: `${layoutCalculation.bodyFontSize}px`,\n            color: hexColorToCSS(KOREAN_COLORS.TEXT_TERTIARY),\n            marginTop: \"20px\",\n            letterSpacing: \"1px\",\n          }}\n        >\n          Korean Martial Arts Dojang\n        </p>\n      </div>\n\n      {/* Start Button */}\n      <button\n        onClick={handleStart}\n        disabled={isLoading}\n        aria-label={\n          isLoading\n            ? \"Starting game and initializing audio\"\n            : \"Start game and initialize audio\"\n        }\n        aria-busy={isLoading}\n        aria-describedby=\"splash-instructions\"\n        style={{\n          padding: layoutCalculation.buttonPadding,\n          fontSize: `${layoutCalculation.buttonFontSize}px`,\n          fontFamily: FONT_FAMILY.CYBER,\n          fontWeight: 700,\n          color: isLoading ? hexColorToCSS(KOREAN_COLORS.UI_DISABLED_TEXT) : hexColorToCSS(KOREAN_COLORS.BLACK),\n          background: isLoading\n            ? hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_LIGHT)\n            : `linear-gradient(135deg, #${HEX_COLORS.PRIMARY_CYAN} 0%, #${HEX_COLORS.ACCENT_GOLD} 100%)`,\n          border: \"none\",\n          borderRadius: \"8px\",\n          cursor: isLoading ? \"not-allowed\" : \"pointer\",\n          textTransform: \"uppercase\",\n          letterSpacing: \"2px\",\n          transition: \"all 0.3s ease\",\n          boxShadow: isLoading\n            ? \"none\"\n            : `0 4px 20px #${HEX_COLORS.PRIMARY_CYAN}40`,\n          position: \"relative\",\n          zIndex: 1,\n          opacity: isLoading ? 0.6 : 1,\n        }}\n        onMouseEnter={(e) => {\n          if (!isLoading) {\n            e.currentTarget.style.transform = \"scale(1.05)\";\n            e.currentTarget.style.boxShadow = `0 6px 30px #${HEX_COLORS.PRIMARY_CYAN}60`;\n          }\n        }}\n        onMouseLeave={(e) => {\n          if (!isLoading) {\n            e.currentTarget.style.transform = \"scale(1)\";\n            e.currentTarget.style.boxShadow = `0 4px 20px #${HEX_COLORS.PRIMARY_CYAN}40`;\n          }\n        }}\n        data-testid=\"splash-start-button\"\n      >\n        {isLoading ? \"시작 중... Starting...\" : \"시작 | Start\"}\n      </button>\n\n      {/* Instructions */}\n      <div\n        id=\"splash-instructions\"\n        style={{\n          marginTop: \"40px\",\n          textAlign: \"center\",\n          color: hexColorToCSS(KOREAN_COLORS.UI_GRAY),\n          fontSize: `${layoutCalculation.instructionsFontSize}px`,\n          maxWidth: \"600px\",\n          padding: \"0 20px\",\n          zIndex: 1,\n        }}\n      >\n        <p style={{ margin: \"8px 0\" }}>\n          Audio initialization requires user interaction\n        </p>\n        <p style={{ margin: \"8px 0\" }}>\n          Click the button above to enable sound and start the game\n        </p>\n      </div>\n\n      {/* Version info */}\n      <div\n        role=\"contentinfo\"\n        aria-label={`Application version ${typeof APP_VERSION !== \"undefined\" ? APP_VERSION : \"0.5.3\"}`}\n        style={{\n          position: \"absolute\",\n          bottom: \"20px\",\n          right: \"20px\",\n          color: hexColorToCSS(KOREAN_COLORS.UI_STEEL_GRAY),\n          fontSize: \"10px\",\n          zIndex: 1,\n        }}\n      >\n        v{typeof APP_VERSION !== \"undefined\" ? APP_VERSION : \"0.5.3\"}\n      </div>\n    </div>\n  );\n};\n\nexport default SplashScreen;\n"],"mappings":"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"}

package/lib/components/shared/ui/VitalPointOverlayControlsPure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VitalPointOverlayControlsPure.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/VitalPointOverlayControlsPure.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAG3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,YAAY,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAE7E;;GAEG;AACH,MAAM,WAAW,kCAAkC;IACjD,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,CAAC,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,+BAA+B;IAC/B,QAAQ,CAAC,eAAe,EAAE,kBAAkB,EAAE,CAAC;IAC/C,4CAA4C;IAC5C,QAAQ,CAAC,uBAAuB,EAAE,CAAC,OAAO,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC1E,4BAA4B;IAC5B,QAAQ,CAAC,YAAY,EAAE,gBAAgB,CAAC;IACxC,0CAA0C;IAC1C,QAAQ,CAAC,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClE,2BAA2B;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,yCAAyC;IACzC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,+BAA+B;IAC/B,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,6CAA6C;IAC7C,QAAQ,CAAC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,qCAAqC;IACrC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,4CAA4C;IAC5C,QAAQ,CAAC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,8BAA8B;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,kCAAkC;IAClC,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE;QACxB,+DAA+D;QAC/D,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gEAAgE;QAChE,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,iEAAiE;QACjE,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,kEAAkE;QAClE,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AA6BD;;;GAGG;AACH,eAAO,MAAM,6BAA6B,EAAE,KAAK,CAAC,EAAE,CAClD,kCAAkC,CA6oBnC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}
+{"version":3,"file":"VitalPointOverlayControlsPure.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/VitalPointOverlayControlsPure.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAI3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,YAAY,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAE7E;;GAEG;AACH,MAAM,WAAW,kCAAkC;IACjD,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,CAAC,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,+BAA+B;IAC/B,QAAQ,CAAC,eAAe,EAAE,kBAAkB,EAAE,CAAC;IAC/C,4CAA4C;IAC5C,QAAQ,CAAC,uBAAuB,EAAE,CAAC,OAAO,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC1E,4BAA4B;IAC5B,QAAQ,CAAC,YAAY,EAAE,gBAAgB,CAAC;IACxC,0CAA0C;IAC1C,QAAQ,CAAC,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClE,2BAA2B;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,yCAAyC;IACzC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,+BAA+B;IAC/B,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,6CAA6C;IAC7C,QAAQ,CAAC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,qCAAqC;IACrC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,4CAA4C;IAC5C,QAAQ,CAAC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,8BAA8B;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,kCAAkC;IAClC,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE;QACxB,+DAA+D;QAC/D,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gEAAgE;QAChE,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,iEAAiE;QACjE,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,kEAAkE;QAClE,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAqBD;;;GAGG;AACH,eAAO,MAAM,6BAA6B,EAAE,KAAK,CAAC,EAAE,CAClD,kCAAkC,CA6oBnC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}

package/lib/components/shared/ui/VitalPointOverlayControlsPure.js

@@ -3,6 +3,7 @@ import { KOREAN_COLORS } from "../../../types/constants/colors.js";
 import { FONT_FAMILY } from "../../../types/constants/typography.js";
 import { Z_INDEX } from "../../../types/LayoutTypes.js";
 import KOREAN_VITAL_POINTS, { getVitalPointsStats } from "../../../systems/vitalpoint/KoreanVitalPoints.js";
+import { hexColorToCSS, hexToRgbaString } from "../../../utils/colorUtils.js";
 import { useCallback, useMemo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/shared/ui/VitalPointOverlayControlsPure.tsx
@@ -24,22 +25,16 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * @module components/shared/ui/VitalPointOverlayControlsPure
 */
 /**
-* Convert numeric color to CSS hex string
-*/
-var colorToHex = (color) => {
-	return `#${color.toString(16).padStart(6, "0")}`;
-};
-/**
 * Get color for severity level
 */
 var getSeverityColor = (severity) => {
 	switch (severity) {
-		case VitalPointSeverity.LETHAL: return "#ff0000";
-		case VitalPointSeverity.CRITICAL: return "#ff6600";
-		case VitalPointSeverity.MAJOR: return "#ffaa00";
-		case VitalPointSeverity.MODERATE: return "#ffd700";
-		case VitalPointSeverity.MINOR: return "#00ff88";
-		default: return "#00ffff";
+		case VitalPointSeverity.LETHAL: return hexColorToCSS(KOREAN_COLORS.NEGATIVE_RED);
+		case VitalPointSeverity.CRITICAL: return hexColorToCSS(KOREAN_COLORS.HEALTH_LOW);
+		case VitalPointSeverity.MAJOR: return hexColorToCSS(KOREAN_COLORS.ACCENT_GOLD);
+		case VitalPointSeverity.MODERATE: return hexColorToCSS(KOREAN_COLORS.TRIGRAM_GEON_PRIMARY);
+		case VitalPointSeverity.MINOR: return hexColorToCSS(KOREAN_COLORS.POSITIVE_GREEN);
+		default: return hexColorToCSS(KOREAN_COLORS.NEON_CYAN);
 	}
 };
 /**
@@ -125,13 +120,13 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 			right: finalPosition.right,
 			bottom: finalPosition.bottom,
 			width: panelWidth,
-			background: `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)}f0`,
-			border: `2px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}`,
+			background: `${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK)}f0`,
+			border: `2px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,
 			borderRadius: "12px",
 			padding: isMobile ? "12px" : "16px",
 			fontFamily: FONT_FAMILY.KOREAN,
-			color: "#ffffff",
-			boxShadow: `0 0 30px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}40, inset 0 0 20px ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)}80`,
+			color: hexColorToCSS(KOREAN_COLORS.TEXT_PRIMARY),
+			boxShadow: `0 0 30px ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}40, inset 0 0 20px ${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK)}80`,
 			transition: "all 0.3s ease",
 			pointerEvents: "all",
 			zIndex: Z_INDEX.MODAL
@@ -145,8 +140,8 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 					alignItems: "center",
 					marginBottom: "12px",
 					paddingBottom: "12px",
-					borderBottom: `1px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}40`,
-					background: `linear-gradient(90deg, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)}00 0%, ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}10 50%, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)}00 100%)`
+					borderBottom: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}40`,
+					background: `linear-gradient(90deg, ${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK)}00 0%, ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}10 50%, ${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK)}00 100%)`
 				},
 				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
 					style: {
@@ -157,7 +152,7 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 				}), /* @__PURE__ */ jsxs("div", {
 					style: {
 						fontSize: smallFontSize,
-						color: colorToHex(KOREAN_COLORS.TEXT_SECONDARY),
+						color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY),
 						marginTop: "2px"
 					},
 					children: [
@@ -169,23 +164,23 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 				})] }), /* @__PURE__ */ jsx("button", {
 					onClick: () => setExpanded(!expanded),
 					style: {
-						background: `linear-gradient(135deg, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)} 0%, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)} 100%)`,
-						border: `2px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}`,
+						background: `linear-gradient(135deg, ${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)} 0%, ${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK)} 100%)`,
+						border: `2px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,
 						borderRadius: "6px",
 						padding: "8px 14px",
-						color: "#ffffff",
+						color: hexColorToCSS(KOREAN_COLORS.TEXT_PRIMARY),
 						fontSize,
 						cursor: "pointer",
 						transition: "all 0.2s ease",
-						boxShadow: `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}30`
+						boxShadow: `0 2px 8px ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}30`
 					},
 					onMouseEnter: (e) => {
 						e.currentTarget.style.transform = "scale(1.05)";
-						e.currentTarget.style.boxShadow = `0 4px 12px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}50`;
+						e.currentTarget.style.boxShadow = `0 4px 12px ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}50`;
 					},
 					onMouseLeave: (e) => {
 						e.currentTarget.style.transform = "scale(1)";
-						e.currentTarget.style.boxShadow = `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}30`;
+						e.currentTarget.style.boxShadow = `0 2px 8px ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}30`;
 					},
 					"data-testid": "toggle-expand-button",
 					children: expanded ? "▼" : "▶"
@@ -198,25 +193,25 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 					style: {
 						width: "100%",
 						height: buttonHeight,
-						background: visible ? `linear-gradient(135deg, ${colorToHex(KOREAN_COLORS.ACCENT_GOLD)} 0%, ${colorToHex(KOREAN_COLORS.SECONDARY_YELLOW)} 100%)` : `linear-gradient(135deg, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)} 0%, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)} 100%)`,
-						border: `2px solid ${visible ? colorToHex(KOREAN_COLORS.ACCENT_GOLD) : colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}`,
+						background: visible ? `linear-gradient(135deg, ${hexColorToCSS(KOREAN_COLORS.ACCENT_GOLD)} 0%, ${hexColorToCSS(KOREAN_COLORS.SECONDARY_YELLOW)} 100%)` : `linear-gradient(135deg, ${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)} 0%, ${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK)} 100%)`,
+						border: `2px solid ${visible ? hexColorToCSS(KOREAN_COLORS.ACCENT_GOLD) : hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,
 						borderRadius: "8px",
-						color: visible ? "#1a1a1a" : "#ffffff",
+						color: visible ? hexColorToCSS(KOREAN_COLORS.KOREAN_BLACK) : hexColorToCSS(KOREAN_COLORS.TEXT_PRIMARY),
 						fontSize: isMobile ? 13 : 15,
 						fontWeight: "bold",
 						cursor: "pointer",
 						transition: "all 0.3s ease",
-						boxShadow: visible ? `0 4px 16px ${colorToHex(KOREAN_COLORS.ACCENT_GOLD)}60, inset 0 2px 4px rgba(255,255,255,0.2)` : `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}30`,
+						boxShadow: visible ? `0 4px 16px ${hexColorToCSS(KOREAN_COLORS.ACCENT_GOLD)}60, inset 0 2px 4px ${hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY, .2)}` : `0 2px 8px ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}30`,
 						textTransform: "uppercase",
 						letterSpacing: "0.5px"
 					},
 					onMouseEnter: (e) => {
 						e.currentTarget.style.transform = "translateY(-2px)";
-						e.currentTarget.style.boxShadow = visible ? `0 6px 20px ${colorToHex(KOREAN_COLORS.ACCENT_GOLD)}80` : `0 4px 12px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}50`;
+						e.currentTarget.style.boxShadow = visible ? `0 6px 20px ${hexColorToCSS(KOREAN_COLORS.ACCENT_GOLD)}80` : `0 4px 12px ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}50`;
 					},
 					onMouseLeave: (e) => {
 						e.currentTarget.style.transform = "translateY(0)";
-						e.currentTarget.style.boxShadow = visible ? `0 4px 16px ${colorToHex(KOREAN_COLORS.ACCENT_GOLD)}60` : `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}30`;
+						e.currentTarget.style.boxShadow = visible ? `0 4px 16px ${hexColorToCSS(KOREAN_COLORS.ACCENT_GOLD)}60` : `0 2px 8px ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}30`;
 					},
 					"data-testid": "toggle-visibility-button",
 					children: visible ? "✓ 활성화 | Enabled" : "비활성화 | Disabled"
@@ -229,7 +224,7 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 						style: {
 							fontSize,
 							marginBottom: "8px",
-							color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),
+							color: hexColorToCSS(KOREAN_COLORS.ACCENT_CYAN),
 							fontWeight: "600",
 							textTransform: "uppercase",
 							letterSpacing: "1px"
@@ -247,11 +242,11 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 							return /* @__PURE__ */ jsx("button", {
 								onClick: () => toggleSeverityFilter(severity),
 								style: {
-									background: isActive ? `linear-gradient(135deg, ${severityColor} 0%, ${severityColor}cc 100%)` : `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,
+									background: isActive ? `linear-gradient(135deg, ${severityColor} 0%, ${severityColor}cc 100%)` : `${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,
 									border: `2px solid ${severityColor}`,
 									borderRadius: "6px",
 									padding: "6px 12px",
-									color: "#ffffff",
+									color: hexColorToCSS(KOREAN_COLORS.TEXT_PRIMARY),
 									fontSize: smallFontSize,
 									cursor: "pointer",
 									opacity: isActive ? 1 : .6,
@@ -279,7 +274,7 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 						style: {
 							fontSize,
 							marginBottom: "8px",
-							color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),
+							color: hexColorToCSS(KOREAN_COLORS.ACCENT_CYAN),
 							fontWeight: "600",
 							textTransform: "uppercase",
 							letterSpacing: "1px"
@@ -296,17 +291,17 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 							return /* @__PURE__ */ jsxs("button", {
 								onClick: () => onRegionFilterChange(option.value),
 								style: {
-									background: isActive ? `linear-gradient(135deg, ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)} 0%, ${colorToHex(KOREAN_COLORS.ACCENT_BLUE)} 100%)` : `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,
-									border: `2px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}`,
+									background: isActive ? `linear-gradient(135deg, ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)} 0%, ${hexColorToCSS(KOREAN_COLORS.ACCENT_BLUE)} 100%)` : `${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,
+									border: `2px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,
 									borderRadius: "6px",
 									padding: "6px 12px",
-									color: "#ffffff",
+									color: hexColorToCSS(KOREAN_COLORS.TEXT_PRIMARY),
 									fontSize: smallFontSize,
 									cursor: "pointer",
 									opacity: isActive ? 1 : .6,
 									transition: "all 0.2s ease",
 									fontWeight: isActive ? "bold" : "normal",
-									boxShadow: isActive ? `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}50` : "none"
+									boxShadow: isActive ? `0 2px 8px ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}50` : "none"
 								},
 								onMouseEnter: (e) => {
 									e.currentTarget.style.opacity = "1";
@@ -332,7 +327,7 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 						style: {
 							fontSize,
 							marginBottom: "8px",
-							color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),
+							color: hexColorToCSS(KOREAN_COLORS.ACCENT_CYAN),
 							fontWeight: "600",
 							textTransform: "uppercase",
 							letterSpacing: "1px"
@@ -348,22 +343,22 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 							style: {
 								width: "100%",
 								height: buttonHeight,
-								background: `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,
-								border: `2px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}40`,
+								background: `${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,
+								border: `2px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}40`,
 								borderRadius: "8px",
 								padding: "0 40px 0 14px",
-								color: "#ffffff",
+								color: hexColorToCSS(KOREAN_COLORS.TEXT_PRIMARY),
 								fontSize,
 								fontFamily: FONT_FAMILY.KOREAN,
 								transition: "all 0.2s ease",
 								outline: "none"
 							},
 							onFocus: (e) => {
-								e.currentTarget.style.borderColor = colorToHex(KOREAN_COLORS.PRIMARY_CYAN);
-								e.currentTarget.style.boxShadow = `0 0 12px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}40`;
+								e.currentTarget.style.borderColor = hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN);
+								e.currentTarget.style.boxShadow = `0 0 12px ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}40`;
 							},
 							onBlur: (e) => {
-								e.currentTarget.style.borderColor = `${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}40`;
+								e.currentTarget.style.borderColor = `${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}40`;
 								e.currentTarget.style.boxShadow = "none";
 							},
 							"data-testid": "search-input"
@@ -376,7 +371,7 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 								transform: "translateY(-50%)",
 								background: "transparent",
 								border: "none",
-								color: colorToHex(KOREAN_COLORS.TEXT_SECONDARY),
+								color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY),
 								cursor: "pointer",
 								fontSize: "16px",
 								padding: "4px",
@@ -387,11 +382,11 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 								transition: "all 0.2s ease"
 							},
 							onMouseEnter: (e) => {
-								e.currentTarget.style.color = colorToHex(KOREAN_COLORS.ACCENT_RED);
-								e.currentTarget.style.background = `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`;
+								e.currentTarget.style.color = hexColorToCSS(KOREAN_COLORS.ACCENT_RED);
+								e.currentTarget.style.background = `${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`;
 							},
 							onMouseLeave: (e) => {
-								e.currentTarget.style.color = colorToHex(KOREAN_COLORS.TEXT_SECONDARY);
+								e.currentTarget.style.color = hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY);
 								e.currentTarget.style.background = "transparent";
 							},
 							"data-testid": "search-clear-button",
@@ -406,7 +401,7 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 						style: {
 							fontSize,
 							marginBottom: "8px",
-							color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),
+							color: hexColorToCSS(KOREAN_COLORS.ACCENT_CYAN),
 							fontWeight: "600",
 							textTransform: "uppercase",
 							letterSpacing: "1px"
@@ -432,7 +427,7 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 								style: {
 									width: "16px",
 									height: "16px",
-									accentColor: colorToHex(KOREAN_COLORS.PRIMARY_CYAN)
+									accentColor: hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)
 								},
 								"data-testid": "show-labels-checkbox"
 							}), /* @__PURE__ */ jsx("span", {
@@ -453,7 +448,7 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 								style: {
 									width: "16px",
 									height: "16px",
-									accentColor: colorToHex(KOREAN_COLORS.PRIMARY_CYAN)
+									accentColor: hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)
 								},
 								"data-testid": "animated-checkbox"
 							}), /* @__PURE__ */ jsx("span", {
@@ -474,21 +469,21 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 						style: {
 							width: "100%",
 							height: buttonHeight - 4,
-							background: `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,
-							border: `2px solid ${colorToHex(KOREAN_COLORS.ACCENT_ORANGE)}`,
+							background: `${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,
+							border: `2px solid ${hexColorToCSS(KOREAN_COLORS.ACCENT_ORANGE)}`,
 							borderRadius: "6px",
-							color: colorToHex(KOREAN_COLORS.ACCENT_ORANGE),
+							color: hexColorToCSS(KOREAN_COLORS.ACCENT_ORANGE),
 							fontSize: smallFontSize,
 							cursor: "pointer",
 							transition: "all 0.2s ease",
 							fontWeight: "bold"
 						},
 						onMouseEnter: (e) => {
-							e.currentTarget.style.background = `${colorToHex(KOREAN_COLORS.ACCENT_ORANGE)}20`;
+							e.currentTarget.style.background = `${hexColorToCSS(KOREAN_COLORS.ACCENT_ORANGE)}20`;
 							e.currentTarget.style.transform = "translateY(-1px)";
 						},
 						onMouseLeave: (e) => {
-							e.currentTarget.style.background = `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`;
+							e.currentTarget.style.background = `${hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`;
 							e.currentTarget.style.transform = "translateY(0)";
 						},
 						"data-testid": "reset-filters-button",
@@ -499,7 +494,7 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 					style: {
 						fontSize,
 						marginBottom: "6px",
-						color: colorToHex(KOREAN_COLORS.ACCENT_CYAN)
+						color: hexColorToCSS(KOREAN_COLORS.ACCENT_CYAN)
 					},
 					children: [
 						"크기 | Scale: ",
@@ -515,7 +510,7 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 					onChange: (e) => onScaleChange(parseFloat(e.target.value)),
 					style: {
 						width: "100%",
-						accentColor: colorToHex(KOREAN_COLORS.PRIMARY_CYAN)
+						accentColor: hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)
 					},
 					"data-testid": "scale-slider"
 				})] }),
@@ -523,9 +518,9 @@ var VitalPointOverlayControlsPure = ({ visible, onVisibleChange, severityFilters
 					style: {
 						marginTop: "12px",
 						paddingTop: "12px",
-						borderTop: `1px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}40`,
+						borderTop: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}40`,
 						fontSize: smallFontSize,
-						color: colorToHex(KOREAN_COLORS.TEXT_SECONDARY)
+						color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY)
 					},
 					children: [/* @__PURE__ */ jsxs("div", { children: [
 						"머리: ",