blacktrigram 0.7.11 → 0.7.12

package/lib/assets/index.css

@@ -13,10 +13,10 @@ body {
   font-family: var(--font-korean);
   background: linear-gradient(
     135deg,
-    var(--korean-bg-dark) 0%,
-    var(--korean-bg-medium) 100%
+    var(--color-bg-dark) 0%,
+    var(--color-bg-medium) 100%
   );
-  color: var(--korean-text-primary);
+  color: var(--color-text-primary);
   overflow: hidden;
   user-select: none;
 }
@@ -28,15 +28,15 @@ body {
   align-items: center;
   background: radial-gradient(
     ellipse at center,
-    var(--korean-bg-medium) 0%,
-    var(--korean-bg-dark) 100%
+    var(--color-bg-medium) 0%,
+    var(--color-bg-dark) 100%
   );
 }
 /* Korean Text Enhancement */
 .korean-text {
   font-family: var(--font-korean);
   font-weight: 400;
-  text-shadow: 0 0 8px var(--korean-glow);
+  text-shadow: 0 0 8px var(--color-korean-east);
   letter-spacing: 0.02em;
 }
 .korean-title {
@@ -45,42 +45,42 @@ body {
   font-size: 3rem;
   background: linear-gradient(
     45deg,
-    var(--korean-primary),
-    var(--korean-accent)
+    var(--color-accent-cyan),
+    var(--color-warning)
   );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  text-shadow: 0 0 20px var(--korean-primary);
+  text-shadow: 0 0 20px var(--color-accent-cyan);
 }
 .cyber-text {
   font-family: var(--font-cyber);
-  color: var(--korean-primary);
+  color: var(--color-accent-cyan);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   text-shadow: 0 0 10px currentColor;
 }
 /* Cyberpunk UI Elements */
 .cyberpunk-border {
-  border: 2px solid var(--korean-primary);
+  border: 2px solid var(--color-accent-cyan);
   border-image: linear-gradient(
       45deg,
-      var(--korean-primary),
-      var(--korean-accent),
-      var(--korean-primary)
+      var(--color-accent-cyan),
+      var(--color-warning),
+      var(--color-accent-cyan)
     )
     1;
-  box-shadow: 0 0 10px var(--korean-primary),
-    inset 0 0 10px rgba(0, 212, 255, 0.1);
+  box-shadow: 0 0 10px var(--color-accent-cyan),
+    inset 0 0 10px color-mix(in srgb, var(--color-accent-cyan) 10%, transparent);
 }
 .cyberpunk-button {
   background: linear-gradient(
     135deg,
-    rgba(0, 212, 255, 0.1),
-    rgba(255, 183, 0, 0.1)
+    color-mix(in srgb, var(--color-accent-cyan) 10%, transparent),
+    color-mix(in srgb, var(--color-warning) 10%, transparent)
   );
-  border: 1px solid var(--korean-primary);
-  color: var(--korean-text-primary);
+  border: 1px solid var(--color-accent-cyan);
+  color: var(--color-text-primary);
   padding: 0.8rem 1.5rem;
   cursor: pointer;
   transition: all 0.3s ease;
@@ -92,10 +92,10 @@ body {
 .cyberpunk-button:hover {
   background: linear-gradient(
     135deg,
-    rgba(0, 212, 255, 0.2),
-    rgba(255, 183, 0, 0.2)
+    color-mix(in srgb, var(--color-accent-cyan) 20%, transparent),
+    color-mix(in srgb, var(--color-warning) 20%, transparent)
   );
-  box-shadow: 0 0 20px var(--korean-primary);
+  box-shadow: 0 0 20px var(--color-accent-cyan);
   transform: translateY(-2px);
 }
 .cyberpunk-button:before {
@@ -108,7 +108,7 @@ body {
   background: linear-gradient(
     90deg,
     transparent,
-    rgba(255, 255, 255, 0.2),
+    color-mix(in srgb, var(--color-text-primary) 20%, transparent),
     transparent
   );
   transition: left 0.5s;
@@ -124,15 +124,15 @@ body {
   right: 0;
   background: linear-gradient(
     180deg,
-    rgba(10, 10, 15, 0.9) 0%,
+    color-mix(in srgb, var(--color-bg-dark) 90%, transparent) 0%,
     transparent 100%
   );
   padding: 1rem;
-  border-bottom: 1px solid var(--korean-primary);
+  border-bottom: 1px solid var(--color-accent-cyan);
 }
 .health-bar {
-  background: var(--korean-bg-dark);
-  border: 1px solid var(--korean-primary);
+  background: var(--color-bg-dark);
+  border: 1px solid var(--color-accent-cyan);
   height: 8px;
   border-radius: 4px;
   overflow: hidden;
@@ -141,9 +141,9 @@ body {
 .health-bar-fill {
   background: linear-gradient(
     90deg,
-    var(--korean-danger) 0%,
-    var(--korean-accent) 50%,
-    var(--korean-glow) 100%
+    var(--color-danger) 0%,
+    var(--color-warning) 50%,
+    var(--color-korean-east) 100%
   );
   height: 100%;
   transition: width 0.3s ease;
@@ -153,10 +153,10 @@ body {
 @keyframes korean-glow {
   0%,
   100% {
-    text-shadow: 0 0 5px var(--korean-glow);
+    text-shadow: 0 0 5px var(--color-korean-east);
   }
   50% {
-    text-shadow: 0 0 20px var(--korean-glow);
+    text-shadow: 0 0 20px var(--color-korean-east);
   }
 }
 .animate-glow {
@@ -164,13 +164,13 @@ body {
 }
 @keyframes combat-flash {
   0% {
-    background-color: rgba(255, 51, 102, 0.1);
+    background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
   }
   50% {
-    background-color: rgba(255, 51, 102, 0.3);
+    background-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
   }
   100% {
-    background-color: rgba(255, 51, 102, 0.1);
+    background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
   }
 }
 .combat-flash {
@@ -232,8 +232,8 @@ body {
 }
 /* Loading and Error States */
 .loading-spinner {
-  border: 2px solid var(--korean-bg-medium);
-  border-top: 2px solid var(--korean-primary);
+  border: 2px solid var(--color-bg-medium);
+  border-top: 2px solid var(--color-accent-cyan);
   border-radius: 50%;
   width: 40px;
   height: 40px;
@@ -249,9 +249,9 @@ body {
   }
 }
 .error-message {
-  color: var(--korean-danger);
-  background: rgba(255, 51, 102, 0.1);
-  border: 1px solid var(--korean-danger);
+  color: var(--color-danger);
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+  border: 1px solid var(--color-danger);
   padding: 1rem;
   border-radius: 4px;
   margin: 1rem 0;
@@ -368,8 +368,8 @@ body {
   bottom: 0;
   background: radial-gradient(
     circle at center,
-    rgba(139, 0, 0, 0.1) 0%,
-    rgba(0, 0, 0, 1) 70%
+    color-mix(in srgb, var(--color-korean-south) 10%, transparent) 0%,
+    var(--color-primary-black) 70%
   );
   pointer-events: none;
   z-index: -1;
@@ -444,12 +444,12 @@ body {
 }
 .app-header {
   padding: 1rem 2rem;
-  background: rgba(0, 10, 18, 0.9);
-  border-bottom: 2px solid #ffd700;
+  background: color-mix(in srgb, var(--color-bg-dark) 90%, transparent);
+  border-bottom: 2px solid var(--color-primary-gold);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
+  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary-gold) 30%, transparent);
 }
 .app-title {
   margin: 0;
@@ -460,14 +460,14 @@ body {
 .korean-title {
   font-size: 1.8rem;
   font-weight: bold;
-  color: #ffd700;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+  color: var(--color-primary-gold);
+  text-shadow: 2px 2px 4px color-mix(in srgb, var(--color-primary-black) 80%, transparent);
 }
 .english-title {
   font-size: 1rem;
-  color: #87ceeb;
+  color: var(--color-info);
   font-style: italic;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
+  text-shadow: 1px 1px 2px color-mix(in srgb, var(--color-primary-black) 60%, transparent);
 }
 .app-status {
   display: flex;
@@ -483,14 +483,14 @@ body {
   font-weight: bold;
 }
 .phase-indicator {
-  background: rgba(255, 215, 0, 0.2);
-  color: #ffd700;
-  border: 1px solid #ffd700;
+  background: color-mix(in srgb, var(--color-primary-gold) 20%, transparent);
+  color: var(--color-primary-gold);
+  border: 1px solid var(--color-primary-gold);
 }
 .time-indicator {
-  background: rgba(135, 206, 235, 0.2);
-  color: #87ceeb;
-  border: 1px solid #87ceeb;
+  background: color-mix(in srgb, var(--color-info) 20%, transparent);
+  color: var(--color-info);
+  border: 1px solid var(--color-info);
 }
 .app-main {
   flex: 1;
@@ -500,7 +500,7 @@ body {
   overflow: hidden;
 }
 .app-debug {
-  background: rgba(0, 0, 0, 0.8);
+  background: color-mix(in srgb, var(--color-primary-black) 80%, transparent);
   color: #00ff00;
   font-family: "Courier New", monospace;
   font-size: 0.8rem;
@@ -510,7 +510,7 @@ body {
 .app-debug summary {
   padding: 0.5rem;
   cursor: pointer;
-  background: rgba(0, 255, 0, 0.1);
+  background: color-mix(in srgb, var(--color-success) 10%, transparent);
   border-bottom: 1px solid #00ff00;
 }
 .app-debug pre {
@@ -550,12 +550,12 @@ body {
   bottom: 0;
   background-image: radial-gradient(
       circle at 20% 20%,
-      rgba(255, 215, 0, 0.05) 0%,
+      color-mix(in srgb, var(--color-primary-gold) 5%, transparent) 0%,
       transparent 50%
     ),
     radial-gradient(
       circle at 80% 80%,
-      rgba(135, 206, 235, 0.05) 0%,
+      color-mix(in srgb, var(--color-info) 5%, transparent) 0%,
       transparent 50%
     );
   pointer-events: none;
@@ -580,7 +580,7 @@ body {
   font-weight: 700;
   color: #ffd700;
   margin-bottom: 1rem;
-  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+  text-shadow: 0 0 20px color-mix(in srgb, var(--color-primary-gold) 50%, transparent);
 }
 .english-subtitle {
   font-size: 1.2rem;
@@ -644,7 +644,7 @@ body {
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
-  color: var(--primary-cyan);
+  color: var(--color-primary-cyan);
 }
 .error-screen {
   position: absolute;
@@ -655,7 +655,7 @@ body {
   color: #ff4136;
   padding: 2rem;
   border: 1px solid #ff4136;
-  background: rgba(255, 65, 54, 0.1);
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
 }
 /* Fix UI overlay positioning to not interfere with canvas visibility */
 .test-overlay {
@@ -823,14 +823,14 @@ body {
 /* Timer Flash - Final seconds warning */
 @keyframes timerFlash {
   0%, 100% {
-    color: #ff4444;
-    text-shadow: 0 0 10px rgba(255, 68, 68, 0.8),
-                 0 0 20px rgba(255, 68, 68, 0.5);
+    color: var(--color-korean-south);
+    text-shadow: 0 0 10px color-mix(in srgb, var(--color-korean-south) 80%, transparent),
+                 0 0 20px color-mix(in srgb, var(--color-korean-south) 50%, transparent);
   }
   50% {
-    color: #ffaa00;
-    text-shadow: 0 0 15px rgba(255, 170, 0, 1),
-                 0 0 30px rgba(255, 170, 0, 0.7);
+    color: var(--color-korean-center);
+    text-shadow: 0 0 15px var(--color-korean-center),
+                 0 0 30px color-mix(in srgb, var(--color-korean-center) 70%, transparent);
   }
 }
 
@@ -1006,9 +1006,9 @@ body {
 .training-button {
   width: 100%;
   height: 40px;
-  border: 2px solid rgba(255, 255, 255, 0.8);
+  border: 2px solid color-mix(in srgb, var(--color-text-primary) 80%, transparent);
   border-radius: 8px;
-  color: #ffffff;
+  color: var(--color-text-primary);
   font-weight: bold;
   cursor: pointer;
   display: flex;
@@ -1019,11 +1019,11 @@ body {
 }
 
 .training-button-start {
-  background: #00ff88;
+  background: var(--color-success);
 }
 
 .training-button-stop {
-  background: #ff4444;
+  background: var(--color-korean-south);
 }
 
 .training-button:hover {
@@ -1033,52 +1033,52 @@ body {
 
 /* Training Mode Selector */
 .mode-button {
-  background: rgba(45, 45, 45, 0.5);
-  border: 2px solid rgba(0, 255, 255, 0.4);
+  background: color-mix(in srgb, var(--color-bg-light) 50%, transparent);
+  border: 2px solid color-mix(in srgb, var(--color-primary-cyan) 40%, transparent);
   border-radius: 8px;
   padding: 10px;
   cursor: pointer;
   text-align: left;
-  color: #ffffff;
+  color: var(--color-text-primary);
   transition: all 0.2s ease;
 }
 
 .mode-button.selected {
-  background: rgba(0, 255, 255, 0.25);
-  border-color: #00ffff;
-  box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
+  background: color-mix(in srgb, var(--color-primary-cyan) 25%, transparent);
+  border-color: var(--color-primary-cyan);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary-cyan) 50%, transparent);
 }
 
 .mode-button:not(.selected):hover {
-  background: rgba(64, 64, 64, 0.7);
-  border-color: #00ffff;
+  background: color-mix(in srgb, var(--color-gray-300) 70%, transparent);
+  border-color: var(--color-primary-cyan);
   transform: scale(1.02);
 }
 
 .mode-button:focus-visible {
-  outline: 2px solid #00ffff;
+  outline: 2px solid var(--color-primary-cyan);
   outline-offset: 2px;
-  box-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary-cyan) 80%, transparent);
 }
 
 /* Vital Point Button */
 .vital-point-button {
-  background: rgba(45, 45, 45, 0.5);
-  border: 2px solid rgba(255, 170, 0, 0.5);
+  background: color-mix(in srgb, var(--color-bg-light) 50%, transparent);
+  border: 2px solid color-mix(in srgb, var(--color-korean-center) 50%, transparent);
   border-radius: 8px;
   padding: 8px;
   cursor: pointer;
   text-align: left;
-  color: #ffffff;
+  color: var(--color-text-primary);
   transition: all 0.2s ease;
 }
 
 .vital-point-button.selected {
-  background: rgba(255, 170, 0, 0.3);
+  background: color-mix(in srgb, var(--color-korean-center) 30%, transparent);
 }
 
 .vital-point-button:not(.selected):hover {
-  background: rgba(64, 64, 64, 0.7);
+  background: color-mix(in srgb, var(--color-gray-300) 70%, transparent);
 }
 
 /* Training Feedback Animation - Fast and snappy */
@@ -1097,12 +1097,12 @@ body {
 }
 
 .training-feedback {
-  background: rgba(0, 0, 0, 0.9);
-  border: 3px solid #ffd700;
+  background: color-mix(in srgb, var(--color-primary-black) 90%, transparent);
+  border: 3px solid var(--color-primary-gold);
   border-radius: 16px;
-  color: #ffd700;
+  color: var(--color-primary-gold);
   text-align: center;
-  box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
+  box-shadow: 0 0 30px color-mix(in srgb, var(--color-primary-gold) 50%, transparent);
   animation: feedbackPulse 0.4s ease-out;
   min-width: 200px;
 }
@@ -1133,7 +1133,7 @@ body {
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: #00ff88;
+  background: var(--color-success);
 }
 
 .status-indicator.active {
@@ -1141,6 +1141,6 @@ body {
 }
 
 .status-indicator.inactive {
-  background: #888888;
+  background: var(--color-gray-500);
 }
 /*$vite$:1*/

package/lib/components/screens/intro/IntroScreen3D.js

@@ -21,7 +21,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Canvas } from "@react-three/fiber";
 //#region src/components/screens/intro/IntroScreen3D.tsx
-var APP_VERSION = "0.7.11";
+var APP_VERSION = "0.7.12";
 var MENU_ITEMS = [
 	{
 		mode: GameMode.VERSUS,

package/lib/components/shared/three/ui/BodyPartHealthDisplay.js

@@ -63,11 +63,11 @@ var BODY_PART_NAMES = {
 * Get health bar color based on health percentage
 */
 var getHealthColor = (health) => {
-	if (health >= 80) return 65280;
-	if (health >= 60) return 16766720;
-	if (health >= 40) return 16753920;
-	if (health >= 20) return 16739179;
-	return 9109504;
+	if (health >= 80) return KOREAN_COLORS.HEALTH_FULL;
+	if (health >= 60) return KOREAN_COLORS.ACCENT_GOLD;
+	if (health >= 40) return KOREAN_COLORS.WARNING_ORANGE;
+	if (health >= 20) return KOREAN_COLORS.PAIN_INDICATOR;
+	return KOREAN_COLORS.NEGATIVE_RED_DARK;
 };
 /**
 * BodyPartHealthDisplay - Shows health bars for all 8 body parts

package/lib/components/shared/three/ui/BodyPartHealthDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"BodyPartHealthDisplay.js","names":[],"sources":["../../../../../src/components/shared/three/ui/BodyPartHealthDisplay.tsx"],"sourcesContent":["/**\n * BodyPartHealthDisplay Component - Individual body part health visualization\n *\n * Displays health bars for all 8 body parts:\n * - Head (두부)\n * - Neck (경부)\n * - Torso Upper (상부 몸통)\n * - Torso Lower (하부 몸통)\n * - Left Arm (좌팔)\n * - Right Arm (우팔)\n * - Left Leg (좌다리)\n * - Right Leg (우다리)\n *\n * @module components/shared/three/ui/BodyPartHealthDisplay\n * @category Shared UI\n * @korean 신체부위체력표시\n */\n\nimport React, { useMemo } from \"react\";\nimport { BodyPart, BodyPartHealth } from \"../../../../systems/bodypart/types\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\n\nexport interface BodyPartHealthDisplayProps {\n  /** Body part health data */\n  readonly bodyPartHealth: BodyPartHealth;\n  /** Player identifier for test IDs */\n  readonly playerId: string;\n  /** Position: 'left' for player 1, 'right' for player 2 */\n  readonly position: \"left\" | \"right\";\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile: boolean;\n}\n\n/**\n * Body part names in Korean and English\n */\nconst BODY_PART_NAMES: Record<BodyPart, { korean: string; english: string }> = {\n  [BodyPart.HEAD]: { korean: \"두부\", english: \"Head\" },\n  [BodyPart.NECK]: { korean: \"경부\", english: \"Neck\" },\n  [BodyPart.TORSO_UPPER]: { korean: \"상부\", english: \"Upper\" },\n  [BodyPart.TORSO_LOWER]: { korean: \"하부\", english: \"Lower\" },\n  [BodyPart.ARM_LEFT]: { korean: \"좌팔\", english: \"L.Arm\" },\n  [BodyPart.ARM_RIGHT]: { korean: \"우팔\", english: \"R.Arm\" },\n  [BodyPart.LEG_LEFT]: { korean: \"좌다리\", english: \"L.Leg\" },\n  [BodyPart.LEG_RIGHT]: { korean: \"우다리\", english: \"R.Leg\" },\n};\n\n/**\n * Get health bar color based on health percentage\n */\nconst getHealthColor = (health: number): number => {\n  if (health >= 80) return 0x00ff00; // Green\n  if (health >= 60) return 0xffd700; // Yellow\n  if (health >= 40) return 0xffa500; // Orange\n  if (health >= 20) return 0xff6b6b; // Red\n  return 0x8b0000; // Dark red\n};\n\n/**\n * BodyPartHealthDisplay - Shows health bars for all 8 body parts\n *\n * @example\n * ```tsx\n * <BodyPartHealthDisplay\n *   bodyPartHealth={player.bodyPartHealth}\n *   playerId=\"player-1\"\n *   position=\"left\"\n *   isMobile={false}\n * />\n * ```\n */\nexport const BodyPartHealthDisplay: React.FC<BodyPartHealthDisplayProps> = ({\n  bodyPartHealth,\n  playerId,\n  position,\n  isMobile,\n}) => {\n  const isLeft = position === \"left\";\n\n  // Responsive sizing\n  const barWidth = isMobile ? 100 : 140;\n  const barHeight = isMobile ? 8 : 10;\n  const fontSize = isMobile ? 9 : 10;\n  const gap = isMobile ? \"4px\" : \"5px\";\n\n  // Group body parts for display\n  const bodyPartGroups = useMemo(\n    () => [\n      {\n        label: \"상체 | Upper\",\n        parts: [\n          BodyPart.HEAD,\n          BodyPart.NECK,\n          BodyPart.TORSO_UPPER,\n          BodyPart.TORSO_LOWER,\n        ],\n      },\n      { label: \"팔 | Arms\", parts: [BodyPart.ARM_LEFT, BodyPart.ARM_RIGHT] },\n      { label: \"다리 | Legs\", parts: [BodyPart.LEG_LEFT, BodyPart.LEG_RIGHT] },\n    ],\n    [],\n  );\n\n  return (\n    <div\n      data-testid={`body-part-health-${playerId}`}\n      style={{\n        position: \"relative\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap,\n        backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9),\n        borderRadius: \"8px\",\n        padding: isMobile ? \"6px\" : \"8px\",\n        border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.7)}`,\n        boxShadow: `0 0 12px ${hexToRgbaString(\n          KOREAN_COLORS.PRIMARY_CYAN,\n          0.3,\n        )}`,\n        pointerEvents: \"none\",\n        width: \"100%\",\n        boxSizing: \"border-box\" as const,\n        fontSize: isMobile ? \"9px\" : \"10px\",\n      }}\n    >\n      {/* Title */}\n      <div\n        style={{\n          fontSize: isMobile ? \"10px\" : \"11px\",\n          fontWeight: \"bold\",\n          fontFamily: FONT_FAMILY.KOREAN,\n          color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),\n          textAlign: isLeft ? \"left\" : \"right\",\n          marginBottom: \"2px\",\n        }}\n      >\n        신체 | Body Parts\n      </div>\n\n      {/* Body part groups */}\n      {bodyPartGroups.map((group) => (\n        <div\n          key={group.label}\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"3px\",\n          }}\n        >\n          {/* Group label - optional, can be hidden for compact display */}\n          <div\n            style={{\n              fontSize: `${fontSize - 1}px`,\n              fontFamily: FONT_FAMILY.KOREAN,\n              color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY, 0.8),\n              textAlign: isLeft ? \"left\" : \"right\",\n              marginTop: group.label === bodyPartGroups[0].label ? \"0\" : \"4px\",\n            }}\n          >\n            {group.label}\n          </div>\n\n          {/* Body parts in group */}\n          {group.parts.map((part) => {\n            const health = bodyPartHealth[part];\n            const names = BODY_PART_NAMES[part];\n            const healthColor = getHealthColor(health);\n            const shouldPulse = health < 20;\n\n            return (\n              <div\n                key={part}\n                data-testid={`body-part-${playerId}-${part}`}\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"2px\",\n                }}\n              >\n                {/* Body part name and value */}\n                <div\n                  style={{\n                    display: \"flex\",\n                    justifyContent: \"space-between\",\n                    alignItems: \"center\",\n                    fontSize: `${fontSize}px`,\n                    fontFamily: FONT_FAMILY.KOREAN,\n                    color: hexToRgbaString(healthColor, 1),\n                  }}\n                >\n                  <span style={{ fontWeight: health < 40 ? \"bold\" : \"normal\" }}>\n                    {isMobile\n                      ? names.korean\n                      : `${names.korean} | ${names.english}`}\n                  </span>\n                  <span style={{ fontSize: `${fontSize - 1}px` }}>\n                    {Math.round(health)}%\n                  </span>\n                </div>\n\n                {/* Health bar */}\n                <div\n                  style={{\n                    width: `${barWidth}px`,\n                    height: `${barHeight}px`,\n                    backgroundColor: hexToRgbaString(\n                      KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n                      1,\n                    ),\n                    borderRadius: \"2px\",\n                    overflow: \"hidden\",\n                    animation: shouldPulse\n                      ? \"healthPulse 0.8s infinite\"\n                      : \"none\",\n                  }}\n                >\n                  <div\n                    style={{\n                      width: `${health}%`,\n                      height: \"100%\",\n                      backgroundColor: hexToRgbaString(healthColor, 1),\n                      transition:\n                        \"width 0.3s ease-in-out, background-color 0.3s ease-in-out\",\n                      boxShadow: `0 0 8px ${hexToRgbaString(healthColor, 0.4)}`,\n                    }}\n                  />\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default BodyPartHealthDisplay;\n"],"mappings":"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"}
+{"version":3,"file":"BodyPartHealthDisplay.js","names":[],"sources":["../../../../../src/components/shared/three/ui/BodyPartHealthDisplay.tsx"],"sourcesContent":["/**\n * BodyPartHealthDisplay Component - Individual body part health visualization\n *\n * Displays health bars for all 8 body parts:\n * - Head (두부)\n * - Neck (경부)\n * - Torso Upper (상부 몸통)\n * - Torso Lower (하부 몸통)\n * - Left Arm (좌팔)\n * - Right Arm (우팔)\n * - Left Leg (좌다리)\n * - Right Leg (우다리)\n *\n * @module components/shared/three/ui/BodyPartHealthDisplay\n * @category Shared UI\n * @korean 신체부위체력표시\n */\n\nimport React, { useMemo } from \"react\";\nimport { BodyPart, BodyPartHealth } from \"../../../../systems/bodypart/types\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\n\nexport interface BodyPartHealthDisplayProps {\n  /** Body part health data */\n  readonly bodyPartHealth: BodyPartHealth;\n  /** Player identifier for test IDs */\n  readonly playerId: string;\n  /** Position: 'left' for player 1, 'right' for player 2 */\n  readonly position: \"left\" | \"right\";\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile: boolean;\n}\n\n/**\n * Body part names in Korean and English\n */\nconst BODY_PART_NAMES: Record<BodyPart, { korean: string; english: string }> = {\n  [BodyPart.HEAD]: { korean: \"두부\", english: \"Head\" },\n  [BodyPart.NECK]: { korean: \"경부\", english: \"Neck\" },\n  [BodyPart.TORSO_UPPER]: { korean: \"상부\", english: \"Upper\" },\n  [BodyPart.TORSO_LOWER]: { korean: \"하부\", english: \"Lower\" },\n  [BodyPart.ARM_LEFT]: { korean: \"좌팔\", english: \"L.Arm\" },\n  [BodyPart.ARM_RIGHT]: { korean: \"우팔\", english: \"R.Arm\" },\n  [BodyPart.LEG_LEFT]: { korean: \"좌다리\", english: \"L.Leg\" },\n  [BodyPart.LEG_RIGHT]: { korean: \"우다리\", english: \"R.Leg\" },\n};\n\n/**\n * Get health bar color based on health percentage\n */\nconst getHealthColor = (health: number): number => {\n  if (health >= 80) return KOREAN_COLORS.HEALTH_FULL;\n  if (health >= 60) return KOREAN_COLORS.ACCENT_GOLD;\n  if (health >= 40) return KOREAN_COLORS.WARNING_ORANGE;\n  if (health >= 20) return KOREAN_COLORS.PAIN_INDICATOR;\n  return KOREAN_COLORS.NEGATIVE_RED_DARK;\n};\n\n/**\n * BodyPartHealthDisplay - Shows health bars for all 8 body parts\n *\n * @example\n * ```tsx\n * <BodyPartHealthDisplay\n *   bodyPartHealth={player.bodyPartHealth}\n *   playerId=\"player-1\"\n *   position=\"left\"\n *   isMobile={false}\n * />\n * ```\n */\nexport const BodyPartHealthDisplay: React.FC<BodyPartHealthDisplayProps> = ({\n  bodyPartHealth,\n  playerId,\n  position,\n  isMobile,\n}) => {\n  const isLeft = position === \"left\";\n\n  // Responsive sizing\n  const barWidth = isMobile ? 100 : 140;\n  const barHeight = isMobile ? 8 : 10;\n  const fontSize = isMobile ? 9 : 10;\n  const gap = isMobile ? \"4px\" : \"5px\";\n\n  // Group body parts for display\n  const bodyPartGroups = useMemo(\n    () => [\n      {\n        label: \"상체 | Upper\",\n        parts: [\n          BodyPart.HEAD,\n          BodyPart.NECK,\n          BodyPart.TORSO_UPPER,\n          BodyPart.TORSO_LOWER,\n        ],\n      },\n      { label: \"팔 | Arms\", parts: [BodyPart.ARM_LEFT, BodyPart.ARM_RIGHT] },\n      { label: \"다리 | Legs\", parts: [BodyPart.LEG_LEFT, BodyPart.LEG_RIGHT] },\n    ],\n    [],\n  );\n\n  return (\n    <div\n      data-testid={`body-part-health-${playerId}`}\n      style={{\n        position: \"relative\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap,\n        backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9),\n        borderRadius: \"8px\",\n        padding: isMobile ? \"6px\" : \"8px\",\n        border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.7)}`,\n        boxShadow: `0 0 12px ${hexToRgbaString(\n          KOREAN_COLORS.PRIMARY_CYAN,\n          0.3,\n        )}`,\n        pointerEvents: \"none\",\n        width: \"100%\",\n        boxSizing: \"border-box\" as const,\n        fontSize: isMobile ? \"9px\" : \"10px\",\n      }}\n    >\n      {/* Title */}\n      <div\n        style={{\n          fontSize: isMobile ? \"10px\" : \"11px\",\n          fontWeight: \"bold\",\n          fontFamily: FONT_FAMILY.KOREAN,\n          color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),\n          textAlign: isLeft ? \"left\" : \"right\",\n          marginBottom: \"2px\",\n        }}\n      >\n        신체 | Body Parts\n      </div>\n\n      {/* Body part groups */}\n      {bodyPartGroups.map((group) => (\n        <div\n          key={group.label}\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"3px\",\n          }}\n        >\n          {/* Group label - optional, can be hidden for compact display */}\n          <div\n            style={{\n              fontSize: `${fontSize - 1}px`,\n              fontFamily: FONT_FAMILY.KOREAN,\n              color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY, 0.8),\n              textAlign: isLeft ? \"left\" : \"right\",\n              marginTop: group.label === bodyPartGroups[0].label ? \"0\" : \"4px\",\n            }}\n          >\n            {group.label}\n          </div>\n\n          {/* Body parts in group */}\n          {group.parts.map((part) => {\n            const health = bodyPartHealth[part];\n            const names = BODY_PART_NAMES[part];\n            const healthColor = getHealthColor(health);\n            const shouldPulse = health < 20;\n\n            return (\n              <div\n                key={part}\n                data-testid={`body-part-${playerId}-${part}`}\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"2px\",\n                }}\n              >\n                {/* Body part name and value */}\n                <div\n                  style={{\n                    display: \"flex\",\n                    justifyContent: \"space-between\",\n                    alignItems: \"center\",\n                    fontSize: `${fontSize}px`,\n                    fontFamily: FONT_FAMILY.KOREAN,\n                    color: hexToRgbaString(healthColor, 1),\n                  }}\n                >\n                  <span style={{ fontWeight: health < 40 ? \"bold\" : \"normal\" }}>\n                    {isMobile\n                      ? names.korean\n                      : `${names.korean} | ${names.english}`}\n                  </span>\n                  <span style={{ fontSize: `${fontSize - 1}px` }}>\n                    {Math.round(health)}%\n                  </span>\n                </div>\n\n                {/* Health bar */}\n                <div\n                  style={{\n                    width: `${barWidth}px`,\n                    height: `${barHeight}px`,\n                    backgroundColor: hexToRgbaString(\n                      KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n                      1,\n                    ),\n                    borderRadius: \"2px\",\n                    overflow: \"hidden\",\n                    animation: shouldPulse\n                      ? \"healthPulse 0.8s infinite\"\n                      : \"none\",\n                  }}\n                >\n                  <div\n                    style={{\n                      width: `${health}%`,\n                      height: \"100%\",\n                      backgroundColor: hexToRgbaString(healthColor, 1),\n                      transition:\n                        \"width 0.3s ease-in-out, background-color 0.3s ease-in-out\",\n                      boxShadow: `0 0 8px ${hexToRgbaString(healthColor, 0.4)}`,\n                    }}\n                  />\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default BodyPartHealthDisplay;\n"],"mappings":"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"}

package/lib/components/shared/three/ui/BreathingIndicator2.js

@@ -1,3 +1,4 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
 import { FONT_FAMILY } from "../../../../types/constants/typography.js";
 import { BreathingDisruptionSystem } from "../../../../systems/breathing/BreathingDisruptionSystem.js";
 import { createBreathingIndicator } from "../../../../systems/breathing/feedback.js";
@@ -45,7 +46,7 @@ var BreathingIndicator = ({ player, isMobile = false }) => {
 			alignItems: "center",
 			gap: isMobile ? "6px" : "8px",
 			padding,
-			backgroundColor: "rgba(0, 0, 0, 0.7)",
+			backgroundColor: hexToRgbaString(KOREAN_COLORS.BLACK, .7),
 			borderRadius: "8px",
 			border: `2px solid ${hexToRgbaString(breathingState.color, breathingState.opacity)}`,
 			boxShadow: `0 0 10px ${hexToRgbaString(breathingState.color, .5)}`,
@@ -87,7 +88,7 @@ var BreathingIndicator = ({ player, isMobile = false }) => {
 				style: {
 					fontSize: `${fontSize - 2}px`,
 					fontFamily: FONT_FAMILY.KOREAN,
-					color: breathingState.isRecovering ? hexToRgbaString(65280, .8) : hexToRgbaString(16777215, .6),
+					color: breathingState.isRecovering ? hexToRgbaString(KOREAN_COLORS.POSITIVE_GREEN, .8) : hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY, .6),
 					whiteSpace: "nowrap"
 				},
 				children: breathingState.isRecovering ? "회복중 | Recovering" : `${secondsRemaining}s`

package/lib/components/shared/three/ui/BreathingIndicator2.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreathingIndicator2.js","names":[],"sources":["../../../../../src/components/shared/three/ui/BreathingIndicator.tsx"],"sourcesContent":["/**\n * BreathingIndicator Component - Visual feedback for breathing disruption status\n * \n * **Korean**: 호흡곤란 표시기\n * \n * Displays breathing difficulty with:\n * - Color-coded lungs icon (🫁)\n * - Bilingual label (Korean | English)\n * - Time remaining until recovery\n * - Pulsing animation based on severity\n */\n\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport {\n  BreathingDisruptionSystem,\n  createBreathingIndicator,\n} from \"../../../../systems/breathing\";\nimport { PlayerState } from \"../../../../systems/player\";\nimport { FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport \"./BreathingIndicator.css\";\n\nexport interface BreathingIndicatorProps {\n  /** Player state to check for breathing disruption */\n  readonly player: PlayerState;\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile?: boolean;\n}\n\n/**\n * BreathingIndicator - Shows breathing disruption status with Korean-English labels\n */\nexport const BreathingIndicator: React.FC<BreathingIndicatorProps> = ({\n  player,\n  isMobile = false,\n}) => {\n  // Use state to trigger re-renders for timer updates\n  const [currentTime, setCurrentTime] = useState(() => Date.now());\n\n  // Update current time every 100ms to keep the timer accurate\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setCurrentTime(Date.now());\n    }, 100);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  // Get current breathing disruption state\n  const breathingState = useMemo(() => {\n    const level = BreathingDisruptionSystem.getCurrentLevel(player);\n    const activeEffect = BreathingDisruptionSystem.getActiveEffect(player);\n    const timeRemaining = activeEffect\n      ? Math.max(0, activeEffect.endTime - currentTime)\n      : 0;\n    const isRecovering = BreathingDisruptionSystem.canRecover(player);\n\n    return createBreathingIndicator(level, timeRemaining, isRecovering);\n  }, [player, currentTime]);\n\n  // Don't render if no breathing disruption\n  if (!breathingState.visible) {\n    return null;\n  }\n\n  // Responsive sizing\n  const iconSize = isMobile ? 24 : 32;\n  const fontSize = isMobile ? 10 : 12;\n  const padding = isMobile ? \"4px 8px\" : \"6px 12px\";\n\n  // Format time remaining\n  const secondsRemaining = Math.ceil(breathingState.timeRemaining / 1000);\n\n  return (\n    <div\n      data-testid=\"breathing-indicator\"\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: isMobile ? \"6px\" : \"8px\",\n        padding,\n        backgroundColor: \"rgba(0, 0, 0, 0.7)\",\n        borderRadius: \"8px\",\n        border: `2px solid ${hexToRgbaString(breathingState.color, breathingState.opacity)}`,\n        boxShadow: `0 0 10px ${hexToRgbaString(breathingState.color, 0.5)}`,\n        animation: \"breathing-pulse 1s ease-in-out infinite\",\n        pointerEvents: \"none\",\n      }}\n    >\n        {/* Lungs icon */}\n        <div\n          data-testid=\"breathing-icon\"\n          style={{\n            fontSize: `${iconSize}px`,\n            lineHeight: 1,\n            transform: `scale(${breathingState.scale})`,\n            filter: `drop-shadow(0 0 6px ${hexToRgbaString(breathingState.color, 0.6)})`,\n          }}\n        >\n          {breathingState.icon}\n        </div>\n\n        {/* Label and time */}\n        <div\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"2px\",\n          }}\n        >\n          {/* Bilingual label */}\n          <div\n            data-testid=\"breathing-label\"\n            style={{\n              fontSize: `${fontSize}px`,\n              fontFamily: FONT_FAMILY.KOREAN,\n              fontWeight: \"bold\",\n              color: hexToRgbaString(breathingState.color, 1),\n              textShadow: `0 0 4px ${hexToRgbaString(breathingState.color, 0.8)}`,\n              whiteSpace: \"nowrap\",\n            }}\n          >\n            {breathingState.label.korean} | {breathingState.label.english}\n          </div>\n\n          {/* Time remaining */}\n          <div\n            data-testid=\"breathing-timer\"\n            style={{\n              fontSize: `${fontSize - 2}px`,\n              fontFamily: FONT_FAMILY.KOREAN,\n              color: breathingState.isRecovering\n                ? hexToRgbaString(0x00ff00, 0.8)\n                : hexToRgbaString(0xffffff, 0.6),\n              whiteSpace: \"nowrap\",\n            }}\n          >\n            {breathingState.isRecovering ? \"회복중 | Recovering\" : `${secondsRemaining}s`}\n          </div>\n        </div>\n      </div>\n  );\n};\n\nBreathingIndicator.displayName = \"BreathingIndicator\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,sBAAyD,EACpE,QACA,WAAW,YACP;CAEJ,MAAM,CAAC,aAAa,kBAAkB,eAAe,KAAK,KAAK,CAAC;AAGhE,iBAAgB;EACd,MAAM,WAAW,kBAAkB;AACjC,kBAAe,KAAK,KAAK,CAAC;KACzB,IAAI;AAEP,eAAa,cAAc,SAAS;IACnC,EAAE,CAAC;CAGN,MAAM,iBAAiB,cAAc;EACnC,MAAM,QAAQ,0BAA0B,gBAAgB,OAAO;EAC/D,MAAM,eAAe,0BAA0B,gBAAgB,OAAO;AAMtE,SAAO,yBAAyB,OALV,eAClB,KAAK,IAAI,GAAG,aAAa,UAAU,YAAY,GAC/C,GACiB,0BAA0B,WAAW,OAAO,CAEE;IAClE,CAAC,QAAQ,YAAY,CAAC;AAGzB,KAAI,CAAC,eAAe,QAClB,QAAO;CAIT,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,UAAU,WAAW,YAAY;CAGvC,MAAM,mBAAmB,KAAK,KAAK,eAAe,gBAAgB,IAAK;AAEvE,QACE,qBAAC,OAAD;EACE,eAAY;EACZ,OAAO;GACL,SAAS;GACT,YAAY;GACZ,KAAK,WAAW,QAAQ;GACxB;GACA,iBAAiB;GACjB,cAAc;GACd,QAAQ,aAAa,gBAAgB,eAAe,OAAO,eAAe,QAAQ;GAClF,WAAW,YAAY,gBAAgB,eAAe,OAAO,GAAI;GACjE,WAAW;GACX,eAAe;GAChB;YAbH,CAgBI,oBAAC,OAAD;GACE,eAAY;GACZ,OAAO;IACL,UAAU,GAAG,SAAS;IACtB,YAAY;IACZ,WAAW,SAAS,eAAe,MAAM;IACzC,QAAQ,uBAAuB,gBAAgB,eAAe,OAAO,GAAI,CAAC;IAC3E;aAEA,eAAe;GACZ,CAAA,EAGN,qBAAC,OAAD;GACE,OAAO;IACL,SAAS;IACT,eAAe;IACf,KAAK;IACN;aALH,CAQE,qBAAC,OAAD;IACE,eAAY;IACZ,OAAO;KACL,UAAU,GAAG,SAAS;KACtB,YAAY,YAAY;KACxB,YAAY;KACZ,OAAO,gBAAgB,eAAe,OAAO,EAAE;KAC/C,YAAY,WAAW,gBAAgB,eAAe,OAAO,GAAI;KACjE,YAAY;KACb;cATH;KAWG,eAAe,MAAM;KAAO;KAAI,eAAe,MAAM;KAClD;OAGN,oBAAC,OAAD;IACE,eAAY;IACZ,OAAO;KACL,UAAU,GAAG,WAAW,EAAE;KAC1B,YAAY,YAAY;KACxB,OAAO,eAAe,eAClB,gBAAgB,OAAU,GAAI,GAC9B,gBAAgB,UAAU,GAAI;KAClC,YAAY;KACb;cAEA,eAAe,eAAe,qBAAqB,GAAG,iBAAiB;IACpE,CAAA,CACF;KACF;;;AAIZ,mBAAmB,cAAc"}
+{"version":3,"file":"BreathingIndicator2.js","names":[],"sources":["../../../../../src/components/shared/three/ui/BreathingIndicator.tsx"],"sourcesContent":["/**\n * BreathingIndicator Component - Visual feedback for breathing disruption status\n * \n * **Korean**: 호흡곤란 표시기\n * \n * Displays breathing difficulty with:\n * - Color-coded lungs icon (🫁)\n * - Bilingual label (Korean | English)\n * - Time remaining until recovery\n * - Pulsing animation based on severity\n */\n\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport {\n  BreathingDisruptionSystem,\n  createBreathingIndicator,\n} from \"../../../../systems/breathing\";\nimport { PlayerState } from \"../../../../systems/player\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport \"./BreathingIndicator.css\";\n\nexport interface BreathingIndicatorProps {\n  /** Player state to check for breathing disruption */\n  readonly player: PlayerState;\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile?: boolean;\n}\n\n/**\n * BreathingIndicator - Shows breathing disruption status with Korean-English labels\n */\nexport const BreathingIndicator: React.FC<BreathingIndicatorProps> = ({\n  player,\n  isMobile = false,\n}) => {\n  // Use state to trigger re-renders for timer updates\n  const [currentTime, setCurrentTime] = useState(() => Date.now());\n\n  // Update current time every 100ms to keep the timer accurate\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setCurrentTime(Date.now());\n    }, 100);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  // Get current breathing disruption state\n  const breathingState = useMemo(() => {\n    const level = BreathingDisruptionSystem.getCurrentLevel(player);\n    const activeEffect = BreathingDisruptionSystem.getActiveEffect(player);\n    const timeRemaining = activeEffect\n      ? Math.max(0, activeEffect.endTime - currentTime)\n      : 0;\n    const isRecovering = BreathingDisruptionSystem.canRecover(player);\n\n    return createBreathingIndicator(level, timeRemaining, isRecovering);\n  }, [player, currentTime]);\n\n  // Don't render if no breathing disruption\n  if (!breathingState.visible) {\n    return null;\n  }\n\n  // Responsive sizing\n  const iconSize = isMobile ? 24 : 32;\n  const fontSize = isMobile ? 10 : 12;\n  const padding = isMobile ? \"4px 8px\" : \"6px 12px\";\n\n  // Format time remaining\n  const secondsRemaining = Math.ceil(breathingState.timeRemaining / 1000);\n\n  return (\n    <div\n      data-testid=\"breathing-indicator\"\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: isMobile ? \"6px\" : \"8px\",\n        padding,\n        backgroundColor: hexToRgbaString(KOREAN_COLORS.BLACK, 0.7),\n        borderRadius: \"8px\",\n        border: `2px solid ${hexToRgbaString(breathingState.color, breathingState.opacity)}`,\n        boxShadow: `0 0 10px ${hexToRgbaString(breathingState.color, 0.5)}`,\n        animation: \"breathing-pulse 1s ease-in-out infinite\",\n        pointerEvents: \"none\",\n      }}\n    >\n        {/* Lungs icon */}\n        <div\n          data-testid=\"breathing-icon\"\n          style={{\n            fontSize: `${iconSize}px`,\n            lineHeight: 1,\n            transform: `scale(${breathingState.scale})`,\n            filter: `drop-shadow(0 0 6px ${hexToRgbaString(breathingState.color, 0.6)})`,\n          }}\n        >\n          {breathingState.icon}\n        </div>\n\n        {/* Label and time */}\n        <div\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"2px\",\n          }}\n        >\n          {/* Bilingual label */}\n          <div\n            data-testid=\"breathing-label\"\n            style={{\n              fontSize: `${fontSize}px`,\n              fontFamily: FONT_FAMILY.KOREAN,\n              fontWeight: \"bold\",\n              color: hexToRgbaString(breathingState.color, 1),\n              textShadow: `0 0 4px ${hexToRgbaString(breathingState.color, 0.8)}`,\n              whiteSpace: \"nowrap\",\n            }}\n          >\n            {breathingState.label.korean} | {breathingState.label.english}\n          </div>\n\n          {/* Time remaining */}\n          <div\n            data-testid=\"breathing-timer\"\n            style={{\n              fontSize: `${fontSize - 2}px`,\n              fontFamily: FONT_FAMILY.KOREAN,\n              color: breathingState.isRecovering\n                ? hexToRgbaString(KOREAN_COLORS.POSITIVE_GREEN, 0.8)\n                : hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY, 0.6),\n              whiteSpace: \"nowrap\",\n            }}\n          >\n            {breathingState.isRecovering ? \"회복중 | Recovering\" : `${secondsRemaining}s`}\n          </div>\n        </div>\n      </div>\n  );\n};\n\nBreathingIndicator.displayName = \"BreathingIndicator\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,sBAAyD,EACpE,QACA,WAAW,YACP;CAEJ,MAAM,CAAC,aAAa,kBAAkB,eAAe,KAAK,KAAK,CAAC;AAGhE,iBAAgB;EACd,MAAM,WAAW,kBAAkB;AACjC,kBAAe,KAAK,KAAK,CAAC;KACzB,IAAI;AAEP,eAAa,cAAc,SAAS;IACnC,EAAE,CAAC;CAGN,MAAM,iBAAiB,cAAc;EACnC,MAAM,QAAQ,0BAA0B,gBAAgB,OAAO;EAC/D,MAAM,eAAe,0BAA0B,gBAAgB,OAAO;AAMtE,SAAO,yBAAyB,OALV,eAClB,KAAK,IAAI,GAAG,aAAa,UAAU,YAAY,GAC/C,GACiB,0BAA0B,WAAW,OAAO,CAEE;IAClE,CAAC,QAAQ,YAAY,CAAC;AAGzB,KAAI,CAAC,eAAe,QAClB,QAAO;CAIT,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,UAAU,WAAW,YAAY;CAGvC,MAAM,mBAAmB,KAAK,KAAK,eAAe,gBAAgB,IAAK;AAEvE,QACE,qBAAC,OAAD;EACE,eAAY;EACZ,OAAO;GACL,SAAS;GACT,YAAY;GACZ,KAAK,WAAW,QAAQ;GACxB;GACA,iBAAiB,gBAAgB,cAAc,OAAO,GAAI;GAC1D,cAAc;GACd,QAAQ,aAAa,gBAAgB,eAAe,OAAO,eAAe,QAAQ;GAClF,WAAW,YAAY,gBAAgB,eAAe,OAAO,GAAI;GACjE,WAAW;GACX,eAAe;GAChB;YAbH,CAgBI,oBAAC,OAAD;GACE,eAAY;GACZ,OAAO;IACL,UAAU,GAAG,SAAS;IACtB,YAAY;IACZ,WAAW,SAAS,eAAe,MAAM;IACzC,QAAQ,uBAAuB,gBAAgB,eAAe,OAAO,GAAI,CAAC;IAC3E;aAEA,eAAe;GACZ,CAAA,EAGN,qBAAC,OAAD;GACE,OAAO;IACL,SAAS;IACT,eAAe;IACf,KAAK;IACN;aALH,CAQE,qBAAC,OAAD;IACE,eAAY;IACZ,OAAO;KACL,UAAU,GAAG,SAAS;KACtB,YAAY,YAAY;KACxB,YAAY;KACZ,OAAO,gBAAgB,eAAe,OAAO,EAAE;KAC/C,YAAY,WAAW,gBAAgB,eAAe,OAAO,GAAI;KACjE,YAAY;KACb;cATH;KAWG,eAAe,MAAM;KAAO;KAAI,eAAe,MAAM;KAClD;OAGN,oBAAC,OAAD;IACE,eAAY;IACZ,OAAO;KACL,UAAU,GAAG,WAAW,EAAE;KAC1B,YAAY,YAAY;KACxB,OAAO,eAAe,eAClB,gBAAgB,cAAc,gBAAgB,GAAI,GAClD,gBAAgB,cAAc,cAAc,GAAI;KACpD,YAAY;KACb;cAEA,eAAe,eAAe,qBAAqB,GAAG,iBAAiB;IACpE,CAAA,CACF;KACF;;;AAIZ,mBAAmB,cAAc"}

package/lib/components/shared/three/ui/TechniqueCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TechniqueCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/TechniqueCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAG9C,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAI1E,OAAO,qBAAqB,CAAC;AAE7B;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,2BAA2B;IAC3B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAE9B,8CAA8C;IAC9C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,4EAA4E;IAC5E,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAE9B,sCAAsC;IACtC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAE7B,iCAAiC;IACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IAExB,yCAAyC;IACzC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAEpC,4BAA4B;IAC5B,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAElC,oBAAoB;IACpB,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAE7B,oBAAoB;IACpB,QAAQ,CAAC,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAExD,0CAA0C;IAC1C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAE3B,wDAAwD;IACxD,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC;IAE3C,qDAAqD;IACrD,QAAQ,CAAC,YAAY,CAAC,EAAE,aAAa,CAAC;IAEtC,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuWtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TechniqueCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/TechniqueCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAI9C,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAI1E,OAAO,qBAAqB,CAAC;AAE7B;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,2BAA2B;IAC3B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAE9B,8CAA8C;IAC9C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,4EAA4E;IAC5E,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAE9B,sCAAsC;IACtC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAE7B,iCAAiC;IACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IAExB,yCAAyC;IACzC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAEpC,4BAA4B;IAC5B,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAElC,oBAAoB;IACpB,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAE7B,oBAAoB;IACpB,QAAQ,CAAC,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAExD,0CAA0C;IAC1C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAE3B,wDAAwD;IACxD,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC;IAE3C,qDAAqD;IACrD,QAAQ,CAAC,YAAY,CAAC,EAAE,aAAa,CAAC;IAEtC,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+VtD,CAAC;AAEF,eAAe,aAAa,CAAC"}