전체적인 리팩토링

components/ui/animated-brand-tone.tsx

@@ -34,6 +34,12 @@ export function AnimatedBrandTone() {
     return () => clearInterval(timer);
   }, []);
 
+  const answerText = TONE_PHRASES[index].a;
+  const answerChars = answerText.split("");
+  const answerLength = answerChars.length;
+  const answerFontSize = resolveAnswerFontSize(answerLength);
+  const answerTracking = resolveAnswerTracking(answerLength);
+
   return (
     <div className="flex min-h-[300px] flex-col items-center justify-center py-10 text-center md:min-h-[400px]">
       <AnimatePresence mode="wait">
@@ -43,7 +49,7 @@ export function AnimatedBrandTone() {
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: -10 }}
           transition={{ duration: 0.5, ease: "easeOut" }}
-          className="flex flex-col items-center w-full"
+          className="flex w-full flex-col items-center"
         >
           {/* 질문 (Q) */}
           <motion.p
@@ -56,21 +62,26 @@ export function AnimatedBrandTone() {
           </motion.p>
 
           {/* 답변 (A) - 타이핑 효과 */}
-          <div className="mt-8 flex flex-col items-center gap-2">
-            <h2 className="text-4xl font-extrabold tracking-wide text-white drop-shadow-lg md:text-6xl lg:text-7xl">
-              <div className="inline-block break-keep whitespace-pre-wrap leading-tight">
-                {TONE_PHRASES[index].a.split("").map((char, i) => (
+          <div className="mt-8 flex w-full flex-col items-center gap-2 px-2 sm:px-4">
+            <h2
+              className="w-full font-bold text-white drop-shadow-[0_12px_30px_rgba(0,0,0,0.38)]"
+              style={{ fontSize: answerFontSize }}
+            >
+              <div
+                className="inline-flex max-w-full items-center whitespace-nowrap leading-[1.12]"
+                style={{ letterSpacing: answerTracking }}
+              >
+                {answerChars.map((char, i) => (
                   <motion.span
                     key={i}
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     transition={{
                       duration: 0,
-                      delay: 0.5 + i * 0.1, // 글자당 0.1초 딜레이로 타이핑 효과
+                      delay: 0.45 + i * 0.055,
                     }}
                     className={cn(
-                      "inline-block",
-                      // 앞부분 강조 색상 로직은 단순화하거나 유지 (여기서는 전체 텍스트 톤 유지)
+                      "inline-block align-baseline",
                       i < 5 ? "text-brand-300" : "text-white",
                     )}
                   >
@@ -86,7 +97,7 @@ export function AnimatedBrandTone() {
                     repeat: Infinity,
                     ease: "linear",
                   }}
-                  className="ml-1 inline-block h-[0.8em] w-1.5 bg-brand-400 align-middle shadow-[0_0_10px_rgba(45,212,191,0.5)]"
+                  className="ml-2 inline-block h-[0.78em] w-1.5 rounded-xs bg-brand-300 align-middle shadow-[0_0_14px_rgba(167,139,250,0.55)]"
                 />
               </div>
             </h2>
@@ -113,3 +124,29 @@ export function AnimatedBrandTone() {
     </div>
   );
 }
+
+function resolveAnswerFontSize(answerLength: number) {
+  if (answerLength >= 30) {
+    return "clamp(1rem,2.4vw,2.2rem)";
+  }
+  if (answerLength >= 25) {
+    return "clamp(1.15rem,2.9vw,2.9rem)";
+  }
+  if (answerLength >= 20) {
+    return "clamp(1.3rem,3.4vw,3.8rem)";
+  }
+  return "clamp(1.45rem,4vw,4.8rem)";
+}
+
+function resolveAnswerTracking(answerLength: number) {
+  if (answerLength >= 30) {
+    return "-0.008em";
+  }
+  if (answerLength >= 25) {
+    return "-0.012em";
+  }
+  if (answerLength >= 20) {
+    return "-0.016em";
+  }
+  return "-0.018em";
+}