diff --git a/.changeset/radio-new-spec.md b/.changeset/radio-new-spec.md
new file mode 100644
index 000000000..04a05cc29
--- /dev/null
+++ b/.changeset/radio-new-spec.md
@@ -0,0 +1,53 @@
+---
+"@jects/jds": minor
+---
+
+**Radio**
+
+신규 디자인 스펙을 반영하면서 `Radio` 컴포넌트의 prop 이름·값과 서브 컴포넌트가 변경되고, `radioAlign` prop은 제거되었습니다.
+
+| AS-IS                                                | TO-BE                              |
+| ---------------------------------------------------- | ---------------------------------- |
+| `radioSize` / `radioStyle`                           | `size` / `variant`                 |
+| `variant` (구 `radioStyle`) = `"empty" \| "outline"` | `variant = "hollow" \| "outlined"` |
+| `radioAlign`                                         | 제거                               |
+| `Radio.SubLabel`                                     | `Radio.Helper`                     |
+
+`Radio.Item`은 `<label>` 요소로 렌더되도록 변경되었습니다. 이에 따라 인디케이터뿐 아니라 라벨 및 헬퍼 텍스트를 클릭해도 해당 라디오를 선택할 수 있습니다.
+
+아울러 disabled 상태의 색상, 커서 등 시각적 표현이 신규 디자인 스펙에 맞게 업데이트되었습니다.
+
+**AS-IS**
+
+```tsx
+import { Radio } from "@jects/jds";
+
+<Radio.Root
+  radioSize='md'
+  radioStyle='empty'
+  radioAlign='left'
+  value={selected}
+  onChange={setSelected}
+  name='group'
+>
+  <Radio.Item>
+    <Radio.Basic value='1' />
+    <Radio.Label>옵션 1</Radio.Label>
+    <Radio.SubLabel>헬퍼 텍스트</Radio.SubLabel>
+  </Radio.Item>
+</Radio.Root>;
+```
+
+**TO-BE**
+
+```tsx
+import { Radio } from "@jects/jds";
+
+<Radio.Root size='md' variant='hollow' value={selected} onChange={setSelected} name='group'>
+  <Radio.Item>
+    <Radio.Basic value='1' />
+    <Radio.Label>옵션 1</Radio.Label>
+    <Radio.Helper>헬퍼 텍스트</Radio.Helper>
+  </Radio.Item>
+</Radio.Root>;
+```
diff --git a/packages/jds/src/components/Radio/Radio.stories.tsx b/packages/jds/src/components/Radio/Radio.stories.tsx
index 22d126348..c02de2dea 100644
--- a/packages/jds/src/components/Radio/Radio.stories.tsx
+++ b/packages/jds/src/components/Radio/Radio.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { FlexColumn, FlexRow } from "@storybook-utils/layout";
+import { useState } from "react";
 
 import { Radio } from "./Radio";
 
@@ -15,168 +16,188 @@ export default meta;
 
 type Story = StoryObj<typeof Radio.Item>;
 
-export const RadioBasicChecked: Story = {
+export const RadioBasicSizes: Story = {
   render: () => (
     <FlexRow>
-      <Radio.Basic name='basicItem' value='1' />
-      <Radio.Basic name='basicItem' value='2' checked />
+      <Radio.Basic value='lg' size='lg' />
+      <Radio.Basic value='md' size='md' />
+      <Radio.Basic value='sm' size='sm' />
+      <Radio.Basic value='xs' size='xs' />
     </FlexRow>
   ),
 };
 
-export const RadioBasicDisabled: Story = {
+export const RadioBasicStates: Story = {
   render: () => (
     <FlexColumn>
-      <span>RadioBasic을 비활성화합니다.</span>
       <FlexRow>
-        <Radio.Basic name='disabledItem' value='1' disabled />
-        <Radio.Basic name='disabledItem' value='2' checked disabled />
+        <Radio.Basic value='unchecked' checked={false} onChange={() => {}} />
+        <Radio.Basic value='checked' checked={true} onChange={() => {}} />
       </FlexRow>
-      <span>Radio.Root를 통해 그룹 전체를 비활성화합니다.</span>
       <FlexRow>
-        <Radio.Root disabled defaultValue='2' name='rootControl'>
-          <Radio.Item>
-            <Radio.Basic value='1' />
-            <Radio.Label>레이블</Radio.Label>
-          </Radio.Item>
-          <Radio.Item>
-            <Radio.Basic value='2' />
-            <Radio.Label>레이블</Radio.Label>
-          </Radio.Item>
-        </Radio.Root>
+        <Radio.Basic value='unchecked' checked={false} disabled onChange={() => {}} />
+        <Radio.Basic value='checked' checked={true} disabled onChange={() => {}} />
       </FlexRow>
-      <span>Radio.Item을 통해 아이템을 개별적으로 비활성화합니다.</span>
-      <FlexRow>
-        <Radio.Root name='itemControl'>
-          <Radio.Item disabled>
-            <Radio.Basic value='1' />
+    </FlexColumn>
+  ),
+};
+
+export const RadioItemVariant: Story = {
+  render: () => (
+    <FlexColumn>
+      <FlexColumn>
+        {(["lg", "md", "sm", "xs"] as const).map(size => (
+          <Radio.Item key={size} size={size} variant='hollow'>
+            <Radio.Basic value='item' />
             <Radio.Label>레이블</Radio.Label>
           </Radio.Item>
-          <Radio.Item disabled>
-            <Radio.Basic value='2' />
+        ))}
+      </FlexColumn>
+      <FlexColumn>
+        {(["lg", "md", "sm", "xs"] as const).map(size => (
+          <Radio.Item key={size} size={size} variant='outlined'>
+            <Radio.Basic value='item' />
             <Radio.Label>레이블</Radio.Label>
+            <Radio.Helper>헬퍼 텍스트</Radio.Helper>
           </Radio.Item>
-          <Radio.Item>
-            <Radio.Basic value='3' />
-            <Radio.Label>비활성화X</Radio.Label>
-          </Radio.Item>
-        </Radio.Root>
-      </FlexRow>
+        ))}
+      </FlexColumn>
     </FlexColumn>
   ),
 };
 
-export const RadioBasicSizes: Story = {
-  render: () => {
-    return (
-      <FlexRow>
-        <Radio.Basic name='size' value='1' radioSize='lg' />
-        <Radio.Basic name='size' value='2' radioSize='md' />
-        <Radio.Basic name='size' value='3' radioSize='sm' />
-        <Radio.Basic name='size' value='4' radioSize='xs' />
-      </FlexRow>
-    );
-  },
+export const RadioItemDisabled: Story = {
+  render: () => (
+    <FlexColumn>
+      <Radio.Item variant='hollow' disabled>
+        <Radio.Basic value='item' />
+        <Radio.Label>레이블</Radio.Label>
+      </Radio.Item>
+      <Radio.Item variant='outlined' disabled>
+        <Radio.Basic value='item' />
+        <Radio.Label>레이블</Radio.Label>
+        <Radio.Helper>헬퍼 텍스트</Radio.Helper>
+      </Radio.Item>
+    </FlexColumn>
+  ),
 };
 
-export const RadioStyle: Story = {
+export const RadioGroupUncontrolled: Story = {
   render: () => (
     <FlexColumn>
-      <FlexRow style={{ alignItems: "flex-start" }}>
-        <Radio.Root radioStyle='empty' radioSize='lg' radioAlign='left' name='emptyStyle'>
-          <Radio.Item>
-            <Radio.Basic value='1' />
-            <Radio.Label>레이블</Radio.Label>
-          </Radio.Item>
-          <Radio.Item>
-            <Radio.Basic value='2' />
-            <Radio.Label>레이블</Radio.Label>
-          </Radio.Item>
-          <Radio.Item>
-            <Radio.Basic value='3' />
-            <Radio.Label>레이블</Radio.Label>
-            <Radio.SubLabel>서브레이블</Radio.SubLabel>
-          </Radio.Item>
-          <Radio.Item>
-            <Radio.Basic value='4' />
-            <Radio.Label>레이블</Radio.Label>
-            <Radio.SubLabel>서브레이블</Radio.SubLabel>
-          </Radio.Item>
-        </Radio.Root>
-      </FlexRow>
-      <FlexRow style={{ alignItems: "flex-start" }}>
-        <Radio.Root radioStyle='outline' radioSize='lg' radioAlign='left' name='outlineStyle'>
-          <Radio.Item>
-            <Radio.Basic value='1' />
-            <Radio.Label>레이블</Radio.Label>
-          </Radio.Item>
-          <Radio.Item>
-            <Radio.Basic value='2' />
-            <Radio.Label>레이블</Radio.Label>
-          </Radio.Item>
-          <Radio.Item>
-            <Radio.Basic value='3' />
-            <Radio.Label>레이블</Radio.Label>
-            <Radio.SubLabel>서브레이블</Radio.SubLabel>
-          </Radio.Item>
-          <Radio.Item>
-            <Radio.Basic value='4' />
-            <Radio.Label>레이블</Radio.Label>
-            <Radio.SubLabel>서브레이블</Radio.SubLabel>
-          </Radio.Item>
-        </Radio.Root>
-      </FlexRow>
+      <Radio.Root defaultValue='2' name='groupUncontrolled'>
+        <Radio.Item>
+          <Radio.Basic value='1' />
+          <Radio.Label>레이블</Radio.Label>
+        </Radio.Item>
+        <Radio.Item>
+          <Radio.Basic value='2' />
+          <Radio.Label>레이블 (기본 선택)</Radio.Label>
+        </Radio.Item>
+        <Radio.Item>
+          <Radio.Basic value='3' />
+          <Radio.Label>레이블</Radio.Label>
+        </Radio.Item>
+      </Radio.Root>
     </FlexColumn>
   ),
 };
 
-export const RadioAlign: Story = {
+export const RadioGroupControlled: Story = {
+  render: () => {
+    const ControlledGroup = () => {
+      const [selected, setSelected] = useState("1");
+
+      return (
+        <FlexColumn>
+          <span>선택: {selected}</span>
+          <Radio.Root value={selected} onChange={setSelected} name='groupControlled'>
+            <Radio.Item>
+              <Radio.Basic value='1' />
+              <Radio.Label>레이블</Radio.Label>
+            </Radio.Item>
+            <Radio.Item>
+              <Radio.Basic value='2' />
+              <Radio.Label>레이블</Radio.Label>
+            </Radio.Item>
+            <Radio.Item>
+              <Radio.Basic value='3' />
+              <Radio.Label>레이블</Radio.Label>
+            </Radio.Item>
+          </Radio.Root>
+        </FlexColumn>
+      );
+    };
+
+    return <ControlledGroup />;
+  },
+};
+
+export const RadioGroupDisabled: Story = {
+  render: () => (
+    <FlexRow>
+      <Radio.Root disabled defaultValue='2' name='groupDisabled'>
+        <Radio.Item>
+          <Radio.Basic value='1' />
+          <Radio.Label>레이블</Radio.Label>
+        </Radio.Item>
+        <Radio.Item>
+          <Radio.Basic value='2' />
+          <Radio.Label>레이블</Radio.Label>
+        </Radio.Item>
+      </Radio.Root>
+    </FlexRow>
+  ),
+};
+
+export const RadioComprehensiveMatrix: Story = {
   render: () => (
     <FlexColumn>
-      <FlexRow style={{ alignItems: "flex-start" }}>
-        <Radio.Root radioStyle='empty' radioSize='lg' radioAlign='right' name='emptyRight'>
-          <Radio.Item>
-            <Radio.Label>레이블</Radio.Label>
-            <Radio.Basic value='1' />
-          </Radio.Item>
-          <Radio.Item>
-            <Radio.Label>레이블</Radio.Label>
-            <Radio.Basic value='2' />
-          </Radio.Item>
-          <Radio.Item>
-            <Radio.Label>레이블</Radio.Label>
-            <Radio.Basic value='3' />
-            <Radio.SubLabel>서브레이블</Radio.SubLabel>
-          </Radio.Item>
-          <Radio.Item>
-            <Radio.Label>레이블</Radio.Label>
-            <Radio.Basic value='4' />
-            <Radio.SubLabel>서브레이블</Radio.SubLabel>
-          </Radio.Item>
-        </Radio.Root>
-      </FlexRow>
-      <FlexRow style={{ alignItems: "flex-start" }}>
-        <Radio.Root radioStyle='outline' radioSize='lg' radioAlign='right' name='outlineRight'>
-          <Radio.Item>
-            <Radio.Label>레이블</Radio.Label>
-            <Radio.Basic value='1' />
-          </Radio.Item>
-          <Radio.Item>
-            <Radio.Label>레이블</Radio.Label>
-            <Radio.Basic value='2' />
-          </Radio.Item>
-          <Radio.Item>
-            <Radio.Label>레이블</Radio.Label>
-            <Radio.Basic value='3' />
-            <Radio.SubLabel>서브레이블</Radio.SubLabel>
-          </Radio.Item>
-          <Radio.Item>
-            <Radio.Label>레이블</Radio.Label>
-            <Radio.Basic value='4' />
-            <Radio.SubLabel>서브레이블</Radio.SubLabel>
-          </Radio.Item>
-        </Radio.Root>
-      </FlexRow>
+      <FlexColumn>
+        {(["lg", "md", "sm", "xs"] as const).map(size => (
+          <FlexRow key={size}>
+            <Radio.Basic value='unchecked' size={size} checked={false} onChange={() => {}} />
+            <Radio.Basic value='checked' size={size} checked={true} onChange={() => {}} />
+            <Radio.Basic
+              value='unchecked'
+              size={size}
+              checked={false}
+              disabled
+              onChange={() => {}}
+            />
+            <Radio.Basic
+              value='checked'
+              size={size}
+              checked={true}
+              disabled
+              onChange={() => {}}
+            />
+          </FlexRow>
+        ))}
+      </FlexColumn>
+      <FlexColumn>
+        {(["hollow", "outlined"] as const).map(variant => (
+          <FlexColumn key={variant}>
+            <Radio.Item variant={variant}>
+              <Radio.Basic value='item' defaultChecked />
+              <Radio.Label>레이블</Radio.Label>
+              <Radio.Helper>헬퍼 텍스트</Radio.Helper>
+            </Radio.Item>
+            <Radio.Item variant={variant} disabled>
+              <Radio.Basic value='item' />
+              <Radio.Label>레이블</Radio.Label>
+              <Radio.Helper>헬퍼 텍스트</Radio.Helper>
+            </Radio.Item>
+          </FlexColumn>
+        ))}
+      </FlexColumn>
     </FlexColumn>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: "모든 size와 상태 조합을 한눈에 확인할 수 있습니다.",
+      },
+    },
+  },
 };
diff --git a/packages/jds/src/components/Radio/Radio.tsx b/packages/jds/src/components/Radio/Radio.tsx
index ceaeb0c6f..9cb534227 100644
--- a/packages/jds/src/components/Radio/Radio.tsx
+++ b/packages/jds/src/components/Radio/Radio.tsx
@@ -1,36 +1,47 @@
 import { useRadio, useRadioGroup } from "@react-aria/radio";
 import { mergeProps, useObjectRef } from "@react-aria/utils";
 import { clsx } from "clsx";
-import type { ChangeEventHandler, ForwardedRef, InputHTMLAttributes } from "react";
-import { forwardRef } from "react";
+import type { ChangeEventHandler, ForwardedRef, InputHTMLAttributes, Ref } from "react";
+import { forwardRef, useId, useLayoutEffect, useState } from "react";
 import { useRadioGroupState } from "react-stately";
 import type { RadioGroupState } from "react-stately";
+import { focusRing, getLabelClassName } from "utils";
+import type { LabelSize } from "utils";
 
 import {
+  radioControlRoot,
+  radioControlSlot,
   radioGroupWrapper,
+  radioHelper,
+  radioHelperSlot,
   radioInput,
   radioItem,
-  radioRootLabel,
-  radioSubLabel,
-  radioTextLabel,
+  radioLabel,
+  radioLabelSlot,
   radioVisual,
 } from "./radio.css";
 import type {
   RadioSize,
   RadioBasicProps,
+  RadioHelperProps,
   RadioItemProps,
   RadioLabelProps,
   RadioRootProps,
-  RadioSubLabelProps,
 } from "./radio.types";
-import { RadioProvider, useRadioContext } from "./RadioContext";
+import { RadioItemProvider, RadioConfigProvider, useRadioConfig, useRadioItem } from "./RadioContext";
 
 import { useContainerPressable } from "@/hooks";
 
+const radioTextSizeMap = {
+  lg: { label: "lg", helper: "sm" },
+  md: { label: "md", helper: "sm" },
+  sm: { label: "sm", helper: "xs" },
+  xs: { label: "xs", helper: "xs" },
+} satisfies Record<RadioSize, { label: LabelSize; helper: LabelSize }>;
+
 const RadioRoot = ({
-  radioSize = "md",
-  radioStyle = "empty",
-  radioAlign = "left",
+  size = "md",
+  variant = "hollow",
   disabled = false,
   value,
   defaultValue,
@@ -42,54 +53,101 @@ const RadioRoot = ({
   const { radioGroupProps } = useRadioGroup({ isDisabled: disabled }, state);
 
   return (
-    <RadioProvider
-      value={{ size: radioSize, style: radioStyle, align: radioAlign, disabled, state }}
-    >
+    <RadioConfigProvider value={{ size, variant, disabled, state }}>
       <div {...radioGroupProps} className={radioGroupWrapper}>
         {children}
       </div>
-    </RadioProvider>
+    </RadioConfigProvider>
   );
 };
 
 RadioRoot.displayName = "Radio.Root";
 
-const RadioItem = forwardRef<HTMLDivElement, RadioItemProps>(
+const RadioItem = forwardRef<HTMLLabelElement, RadioItemProps>(
   (
-    { radioSize, radioStyle, radioAlign, disabled = false, children, className, ...restProps },
+    { size: sizeProp, variant: variantProp, disabled = false, children, className, ...restProps },
     ref,
   ) => {
-    const parentContext = useRadioContext();
+    const parentContext = useRadioConfig();
+    const labelId = useId();
+    const helperId = useId();
 
-    const size = radioSize ?? parentContext?.size ?? "md";
+    const size = sizeProp ?? parentContext?.size ?? "md";
     const isDisabled = disabled || (parentContext?.disabled ?? false);
-    const style = radioStyle ?? parentContext?.style ?? "empty";
-    const align = radioAlign ?? parentContext?.align ?? "left";
+    const variant = variantProp ?? parentContext?.variant ?? "hollow";
+
+    const [hasHelper, setHasHelper] = useState(false);
 
     const { containerPressableProps } = useContainerPressable({ disabled: isDisabled });
 
     return (
-      <RadioProvider value={{ ...parentContext, size, style, align, disabled: isDisabled }}>
-        <div
-          ref={ref}
-          {...mergeProps(containerPressableProps, restProps)}
-          className={clsx(radioItem({ size, styleOutline: style, alignRight: align }), className)}
+      <RadioConfigProvider value={{ ...parentContext, size, variant, disabled: isDisabled }}>
+        <RadioItemProvider
+          value={{ labelId, helperId, hasHelper, onHelperMountChange: setHasHelper }}
         >
-          {children}
-        </div>
-      </RadioProvider>
+          <label
+            ref={ref}
+            {...mergeProps(containerPressableProps, restProps)}
+            className={clsx(radioItem({ size, styleOutlined: variant }), focusRing(), className)}
+          >
+            {children}
+          </label>
+        </RadioItemProvider>
+      </RadioConfigProvider>
     );
   },
 );
 
 RadioItem.displayName = "Radio.Item";
 
-// Radio.Root 컨텍스트 안에서 useRadio를 호출하는 내부 컴포넌트.
-// hooks 규칙상 조건부 호출이 불가하므로 컴포넌트를 분리한다.
+interface RadioControlProps {
+  isWithinItem: boolean;
+  labelId?: string;
+  describedById?: string;
+  size: RadioSize;
+  interaction: "on" | "off";
+  inputRef: Ref<HTMLInputElement>;
+  inputProps: InputHTMLAttributes<HTMLInputElement>;
+}
+
+const RadioControl = ({
+  isWithinItem,
+  labelId,
+  describedById,
+  size,
+  interaction,
+  inputRef,
+  inputProps,
+}: RadioControlProps) => {
+  const className = clsx(radioControlRoot, radioControlSlot);
+  const content = (
+    <>
+      <input
+        {...inputProps}
+        ref={inputRef}
+        aria-labelledby={isWithinItem ? labelId : undefined}
+        aria-describedby={describedById}
+        className={radioInput}
+      />
+      <span className={radioVisual({ size, interaction })} aria-hidden='true' />
+    </>
+  );
+
+  return isWithinItem ? (
+    <span className={className}>{content}</span>
+  ) : (
+    <label className={className}>{content}</label>
+  );
+};
+
 interface RadioBasicGroupedProps {
   size: RadioSize;
   value: string;
   isDisabled: boolean;
+  isWithinItem: boolean;
+  labelId?: string;
+  describedById?: string;
+  interaction: "on" | "off";
   state: RadioGroupState;
   forwardedRef: ForwardedRef<HTMLInputElement>;
   restProps: InputHTMLAttributes<HTMLInputElement>;
@@ -100,27 +158,42 @@ const RadioBasicGrouped = ({
   size,
   value,
   isDisabled,
+  isWithinItem,
+  labelId,
+  describedById,
+  interaction,
   state,
   forwardedRef,
   restProps,
   onChange,
 }: RadioBasicGroupedProps) => {
   const ref = useObjectRef(forwardedRef);
-  const { labelProps, inputProps } = useRadio({ value, isDisabled }, state, ref);
+  const { inputProps } = useRadio({ value, isDisabled }, state, ref);
 
   return (
-    <label {...labelProps} className={radioRootLabel}>
-      <input {...mergeProps(inputProps, restProps, { onChange })} className={radioInput} />
-      <span className={clsx(radioVisual({ size }), "visual")} aria-hidden='true' />
-    </label>
+    <RadioControl
+      isWithinItem={isWithinItem}
+      labelId={labelId}
+      describedById={describedById}
+      size={size}
+      interaction={interaction}
+      inputRef={ref}
+      inputProps={mergeProps(inputProps, restProps, { onChange })}
+    />
   );
 };
 
 const RadioBasic = forwardRef<HTMLInputElement, RadioBasicProps>(
-  ({ radioSize, value, checked, disabled, onChange, name, ...restProps }, forwardedRef) => {
-    const context = useRadioContext();
-    const size = context?.size ?? radioSize ?? "md";
+  ({ size: sizeProp, value, checked, disabled, onChange, name, ...restProps }, forwardedRef) => {
+    const context = useRadioConfig();
+    const itemContext = useRadioItem();
+
+    const size = context?.size ?? sizeProp ?? "md";
     const isDisabled = disabled || (context?.disabled ?? false);
+    const isWithinItem = itemContext != null;
+    const interaction = isWithinItem ? "off" : "on";
+    const labelId = itemContext?.labelId;
+    const describedById = itemContext?.hasHelper ? itemContext?.helperId : undefined;
 
     if (context?.state) {
       return (
@@ -128,6 +201,10 @@ const RadioBasic = forwardRef<HTMLInputElement, RadioBasicProps>(
           size={size}
           value={value}
           isDisabled={isDisabled}
+          isWithinItem={isWithinItem}
+          labelId={labelId}
+          describedById={describedById}
+          interaction={interaction}
           state={context.state}
           forwardedRef={forwardedRef}
           restProps={restProps}
@@ -137,52 +214,80 @@ const RadioBasic = forwardRef<HTMLInputElement, RadioBasicProps>(
     }
 
     return (
-      <label className={radioRootLabel}>
-        <input
-          ref={forwardedRef}
-          type='radio'
-          value={value}
-          checked={checked}
-          disabled={isDisabled}
-          onChange={onChange}
-          name={name}
-          className={radioInput}
-          {...restProps}
-        />
-        <span className={clsx(radioVisual({ size }), "visual")} aria-hidden='true' />
-      </label>
+      <RadioControl
+        isWithinItem={isWithinItem}
+        labelId={labelId}
+        describedById={describedById}
+        size={size}
+        interaction={interaction}
+        inputRef={forwardedRef}
+        inputProps={{
+          type: "radio",
+          value,
+          checked,
+          disabled: isDisabled,
+          onChange,
+          name,
+          ...restProps,
+        }}
+      />
     );
   },
 );
 
 RadioBasic.displayName = "Radio.Basic";
 
-const RadioLabel = forwardRef<HTMLDivElement, RadioLabelProps>(({ children }, ref) => {
-  const context = useRadioContext();
+const RadioLabel = forwardRef<HTMLSpanElement, RadioLabelProps>(({ children }, ref) => {
+  const size = useRadioConfig()?.size ?? "md";
+  const labelId = useRadioItem()?.labelId;
   return (
-    <div ref={ref} className={radioTextLabel({ size: context?.size ?? "md" })}>
+    <span
+      ref={ref}
+      id={labelId}
+      className={clsx(
+        getLabelClassName({ size: radioTextSizeMap[size].label }),
+        radioLabel,
+        radioLabelSlot,
+      )}
+    >
       {children}
-    </div>
+    </span>
   );
 });
 
 RadioLabel.displayName = "Radio.Label";
 
-const RadioSubLabel = forwardRef<HTMLDivElement, RadioSubLabelProps>(({ children }, ref) => {
-  const context = useRadioContext();
+const RadioHelper = forwardRef<HTMLSpanElement, RadioHelperProps>(({ children }, ref) => {
+  const size = useRadioConfig()?.size ?? "md";
+  const item = useRadioItem();
+  const onHelperMountChange = item?.onHelperMountChange;
+
+  useLayoutEffect(() => {
+    onHelperMountChange?.(true);
+    return () => onHelperMountChange?.(false);
+  }, [onHelperMountChange]);
+
   return (
-    <div ref={ref} className={radioSubLabel({ size: context?.size ?? "md" })}>
+    <span
+      ref={ref}
+      id={item?.helperId}
+      className={clsx(
+        getLabelClassName({ size: radioTextSizeMap[size].helper, weight: "subtle" }),
+        radioHelper,
+        radioHelperSlot,
+      )}
+    >
       {children}
-    </div>
+    </span>
   );
 });
 
-RadioSubLabel.displayName = "Radio.SubLabel";
+RadioHelper.displayName = "Radio.Helper";
 
 export const Radio = {
   Root: RadioRoot,
   Item: RadioItem,
   Basic: RadioBasic,
   Label: RadioLabel,
-  SubLabel: RadioSubLabel,
+  Helper: RadioHelper,
 };
diff --git a/packages/jds/src/components/Radio/RadioContext.tsx b/packages/jds/src/components/Radio/RadioContext.tsx
index 09bf69024..0038d6b0c 100644
--- a/packages/jds/src/components/Radio/RadioContext.tsx
+++ b/packages/jds/src/components/Radio/RadioContext.tsx
@@ -1,18 +1,30 @@
 import { createContext, useContext } from "react";
 import type { RadioGroupState } from "react-stately";
 
-import type { RadioAlign, RadioSize, RadioStyle } from "./radio.types";
+import type { RadioSize, RadioVariant } from "./radio.types";
 
-export interface RadioContextValue {
+export interface RadioConfigContextValue {
   size: RadioSize;
-  style: RadioStyle;
-  align: RadioAlign;
+  variant: RadioVariant;
   disabled: boolean;
   state?: RadioGroupState;
 }
 
-const RadioContext = createContext<RadioContextValue | null>(null);
+const RadioConfigContext = createContext<RadioConfigContextValue | null>(null);
 
-export const RadioProvider = RadioContext.Provider;
+export const RadioConfigProvider = RadioConfigContext.Provider;
 
-export const useRadioContext = () => useContext(RadioContext);
+export const useRadioConfig = () => useContext(RadioConfigContext);
+
+export interface RadioItemContextValue {
+  labelId: string;
+  helperId: string;
+  hasHelper: boolean;
+  onHelperMountChange: (mounted: boolean) => void;
+}
+
+const RadioItemContext = createContext<RadioItemContextValue | null>(null);
+
+export const RadioItemProvider = RadioItemContext.Provider;
+
+export const useRadioItem = () => useContext(RadioItemContext);
diff --git a/packages/jds/src/components/Radio/index.ts b/packages/jds/src/components/Radio/index.ts
index a969baed2..802c43006 100644
--- a/packages/jds/src/components/Radio/index.ts
+++ b/packages/jds/src/components/Radio/index.ts
@@ -1,11 +1,10 @@
 export { Radio } from "./Radio";
 export type {
-  RadioAlign,
   RadioBasicProps,
   RadioItemProps,
   RadioLabelProps,
   RadioRootProps,
   RadioSize,
-  RadioStyle,
-  RadioSubLabelProps,
+  RadioVariant,
+  RadioHelperProps,
 } from "./radio.types";
diff --git a/packages/jds/src/components/Radio/preset/RadioContent.stories.tsx b/packages/jds/src/components/Radio/preset/RadioContent.stories.tsx
deleted file mode 100644
index adac855b8..000000000
--- a/packages/jds/src/components/Radio/preset/RadioContent.stories.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { FlexColumn, FlexRow } from "@storybook-utils/layout";
-import type { FormEvent } from "react";
-import { useState } from "react";
-
-import { Radio } from "../Radio";
-import { RadioContent } from "./RadioContent";
-
-const meta: Meta<typeof RadioContent.Left> = {
-  title: "Components/RadioContent",
-  component: RadioContent.Left,
-  parameters: {
-    layout: "centered",
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof RadioContent.Left>;
-
-export const RadioContentLeftStyles: Story = {
-  render: () => (
-    <FlexColumn>
-      <FlexRow>
-        <RadioContent.Left radioSize='lg' radioStyle='empty' value='lg-empty'>
-          레이블
-        </RadioContent.Left>
-        <RadioContent.Left radioSize='md' radioStyle='empty' value='md-empty'>
-          레이블
-        </RadioContent.Left>
-        <RadioContent.Left radioSize='sm' radioStyle='empty' value='sm-empty'>
-          레이블
-        </RadioContent.Left>
-        <RadioContent.Left radioSize='xs' radioStyle='empty' value='xs-empty'>
-          레이블
-        </RadioContent.Left>
-      </FlexRow>
-      <FlexRow>
-        <RadioContent.Left radioSize='lg' radioStyle='outline' value='lg-outline'>
-          레이블
-        </RadioContent.Left>
-        <RadioContent.Left radioSize='md' radioStyle='outline' value='md-outline'>
-          레이블
-        </RadioContent.Left>
-        <RadioContent.Left radioSize='sm' radioStyle='outline' value='sm-outline'>
-          레이블
-        </RadioContent.Left>
-        <RadioContent.Left radioSize='xs' radioStyle='outline' value='xs-outline'>
-          레이블
-        </RadioContent.Left>
-      </FlexRow>
-    </FlexColumn>
-  ),
-};
-
-export const RadioContentLeftSubLabel: Story = {
-  render: () => (
-    <FlexRow>
-      <RadioContent.Left
-        radioSize='lg'
-        radioStyle='empty'
-        subLabel='레이블'
-        subLabelVisible
-        value='empty'
-      >
-        레이블
-      </RadioContent.Left>
-      <RadioContent.Left
-        radioSize='lg'
-        radioStyle='outline'
-        subLabel='레이블'
-        subLabelVisible
-        value='outline'
-      >
-        레이블
-      </RadioContent.Left>
-    </FlexRow>
-  ),
-};
-
-export const RadioContentRightStyles: Story = {
-  render: () => (
-    <FlexColumn>
-      <FlexRow>
-        <RadioContent.Right radioSize='lg' radioStyle='empty' value='lg-empty'>
-          레이블
-        </RadioContent.Right>
-        <RadioContent.Right radioSize='md' radioStyle='empty' value='md-empty'>
-          레이블
-        </RadioContent.Right>
-        <RadioContent.Right radioSize='sm' radioStyle='empty' value='sm-empty'>
-          레이블
-        </RadioContent.Right>
-        <RadioContent.Right radioSize='xs' radioStyle='empty' value='xs-empty'>
-          레이블
-        </RadioContent.Right>
-      </FlexRow>
-      <FlexRow>
-        <RadioContent.Right radioSize='lg' radioStyle='outline' value='lg-outline'>
-          레이블
-        </RadioContent.Right>
-        <RadioContent.Right radioSize='md' radioStyle='outline' value='md-outline'>
-          레이블
-        </RadioContent.Right>
-        <RadioContent.Right radioSize='sm' radioStyle='outline' value='sm-outline'>
-          레이블
-        </RadioContent.Right>
-        <RadioContent.Right radioSize='xs' radioStyle='outline' value='xs-outline'>
-          레이블
-        </RadioContent.Right>
-      </FlexRow>
-    </FlexColumn>
-  ),
-};
-
-export const RadioContentRightSubLabel: Story = {
-  render: () => (
-    <FlexRow>
-      <RadioContent.Right
-        radioSize='lg'
-        radioStyle='empty'
-        subLabel='레이블'
-        subLabelVisible
-        value='empty'
-      >
-        레이블
-      </RadioContent.Right>
-      <RadioContent.Right
-        radioSize='lg'
-        radioStyle='outline'
-        subLabel='레이블'
-        subLabelVisible
-        value='outline'
-      >
-        레이블
-      </RadioContent.Right>
-    </FlexRow>
-  ),
-};
-
-export const SubLabelWithHyperlink: Story = {
-  render: () => (
-    <RadioContent.Left
-      radioSize='md'
-      radioStyle='outline'
-      subLabelVisible={true}
-      value='hyperlink'
-      subLabel={
-        <>
-          하이퍼링크&nbsp;
-          <a href='https://www.naver.com/' style={{ textDecoration: "underline" }}>
-            (네이버 바로가기)
-          </a>
-        </>
-      }
-    >
-      레이블
-    </RadioContent.Left>
-  ),
-};
-
-export const ControlledRadio: Story = {
-  render: () => {
-    const [selected, setSelected] = useState("korea");
-
-    const items = ["korea", "japan", "us", "uk"];
-
-    return (
-      <FlexRow>
-        <Radio.Root value={selected} onChange={setSelected} name='country'>
-          {items.map(item => (
-            <RadioContent.Left key={item} radioSize='md' value={item}>
-              {item}
-            </RadioContent.Left>
-          ))}
-        </Radio.Root>
-        <span>결과: {selected}</span>
-      </FlexRow>
-    );
-  },
-};
-
-export const UncontrolledRadio: Story = {
-  render: () => (
-    <div>
-      <form
-        style={{ display: "flex", gap: 20 }}
-        onSubmit={(e: FormEvent<HTMLFormElement>) => {
-          e.preventDefault();
-          const form = e.currentTarget;
-          const formData = new FormData(form);
-          const value = formData.get("groupName") as string;
-          alert(`${value} 확인!`);
-        }}
-      >
-        <RadioContent.Left radioSize='md' name='groupName' value='apple' defaultChecked>
-          apple
-        </RadioContent.Left>
-        <RadioContent.Left radioSize='md' name='groupName' value='banana'>
-          banana
-        </RadioContent.Left>
-        <RadioContent.Left radioSize='md' name='groupName' value='orange' disabled>
-          orange
-        </RadioContent.Left>
-        <button type='submit'>제출 버튼</button>
-      </form>
-    </div>
-  ),
-};
diff --git a/packages/jds/src/components/Radio/preset/RadioContent.tsx b/packages/jds/src/components/Radio/preset/RadioContent.tsx
deleted file mode 100644
index dd0bb459b..000000000
--- a/packages/jds/src/components/Radio/preset/RadioContent.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { forwardRef } from "react";
-
-import { Radio } from "../Radio";
-import type { RadioContentProps } from "./radioContent.types";
-
-const RadioContentLeft = forwardRef<HTMLInputElement, RadioContentProps>(
-  (
-    {
-      radioSize = "md",
-      radioStyle = "empty",
-      disabled = false,
-      subLabelVisible = false,
-      subLabel = "",
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <Radio.Item
-        radioSize={radioSize}
-        disabled={disabled}
-        radioAlign='left'
-        radioStyle={radioStyle}
-      >
-        <Radio.Basic ref={ref} {...props} />
-        <Radio.Label>{children}</Radio.Label>
-        {subLabelVisible && <Radio.SubLabel>{subLabel}</Radio.SubLabel>}
-      </Radio.Item>
-    );
-  },
-);
-
-RadioContentLeft.displayName = "RadioContent.Left";
-
-const RadioContentRight = forwardRef<HTMLInputElement, RadioContentProps>(
-  (
-    {
-      radioSize = "md",
-      radioStyle = "empty",
-      disabled = false,
-      subLabelVisible = false,
-      subLabel = "",
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <Radio.Item
-        radioSize={radioSize}
-        disabled={disabled}
-        radioAlign='right'
-        radioStyle={radioStyle}
-      >
-        <Radio.Label>{children}</Radio.Label>
-        <Radio.Basic ref={ref} {...props} />
-        {subLabelVisible && <Radio.SubLabel>{subLabel}</Radio.SubLabel>}
-      </Radio.Item>
-    );
-  },
-);
-
-RadioContentRight.displayName = "RadioContent.Right";
-
-export const RadioContent = {
-  Left: RadioContentLeft,
-  Right: RadioContentRight,
-};
diff --git a/packages/jds/src/components/Radio/preset/radioContent.types.ts b/packages/jds/src/components/Radio/preset/radioContent.types.ts
deleted file mode 100644
index 71691161a..000000000
--- a/packages/jds/src/components/Radio/preset/radioContent.types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from "react";
-
-import type { RadioSize } from "../radio.types";
-
-export interface RadioContentProps extends Omit<
-  ComponentPropsWithoutRef<"input">,
-  "size" | "value"
-> {
-  radioSize?: RadioSize;
-  value: string;
-  radioStyle?: "empty" | "outline";
-  disabled?: boolean;
-  subLabelVisible?: boolean;
-  subLabel?: ReactNode;
-  children: ReactNode;
-  checked?: boolean;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  defaultChecked?: boolean;
-}
diff --git a/packages/jds/src/components/Radio/radio.css.ts b/packages/jds/src/components/Radio/radio.css.ts
index 72bf4ceb0..4a6b75a29 100644
--- a/packages/jds/src/components/Radio/radio.css.ts
+++ b/packages/jds/src/components/Radio/radio.css.ts
@@ -1,17 +1,15 @@
-import { globalStyle, style } from "@vanilla-extract/css";
+import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { vars } from "tokens";
-import { pxToRem, focusRing, overlay, overlayColor } from "utils";
+import { pxToRem, overlay, overlayColorMap, overlayOpacityMap } from "utils";
 
 import { RADIO_SIZE_OPTIONS } from "./radio.types";
 import type { RadioSize } from "./radio.types";
 
-// Token key types
+import { labelColorVar } from "@/utils/typography.css";
+
 type StrokeWeightKey = keyof typeof vars.scheme.semantic.strokeWeight;
 
-// Size maps
-// sizeRem: 원형 indicator CSS 크기
-// borderKey: checked 상태 border 굵기, strokeWeight 토큰 키에 대응
 const radioSizeMap: Record<RadioSize, { sizeRem: string; borderKey: StrokeWeightKey }> = {
   lg: { sizeRem: pxToRem(20), borderKey: "6" },
   md: { sizeRem: pxToRem(18), borderKey: "5" },
@@ -19,42 +17,8 @@ const radioSizeMap: Record<RadioSize, { sizeRem: string; borderKey: StrokeWeight
   xs: { sizeRem: pxToRem(14), borderKey: "4" },
 };
 
-// Typography per size
-const typographyBySize = {
-  lg: {
-    fontSize: vars.typo.primitive.fontSize.label.lg,
-    lineHeight: vars.typo.primitive.font.lineHeight.label.lg,
-    fontFamily: vars.typo.primitive.typeface.label,
-    fontWeight: vars.typo.primitive.fontWeight.label.subtle,
-    letterSpacing: vars.typo.primitive.font.letterSpacing.label.lg,
-  },
-  md: {
-    fontSize: vars.typo.primitive.fontSize.label.md,
-    lineHeight: vars.typo.primitive.font.lineHeight.label.md,
-    fontFamily: vars.typo.primitive.typeface.label,
-    fontWeight: vars.typo.primitive.fontWeight.label.subtle,
-    letterSpacing: vars.typo.primitive.font.letterSpacing.label.md,
-  },
-  sm: {
-    fontSize: vars.typo.primitive.fontSize.label.sm,
-    lineHeight: vars.typo.primitive.font.lineHeight.label.sm,
-    fontFamily: vars.typo.primitive.typeface.label,
-    fontWeight: vars.typo.primitive.fontWeight.label.subtle,
-    letterSpacing: vars.typo.primitive.font.letterSpacing.label.sm,
-  },
-  xs: {
-    fontSize: vars.typo.primitive.fontSize.label.xs,
-    lineHeight: vars.typo.primitive.font.lineHeight.label.xs,
-    fontFamily: vars.typo.primitive.typeface.label,
-    fontWeight: vars.typo.primitive.fontWeight.label.subtle,
-    letterSpacing: vars.typo.primitive.font.letterSpacing.label.xs,
-  },
-} satisfies Record<RadioSize, object>;
-
 export const radioGroupWrapper = style({ display: "contents" });
 
-// Radio.Basic
-
 export const radioInput = style({
   position: "absolute",
   width: 1,
@@ -67,26 +31,14 @@ export const radioInput = style({
   whiteSpace: "nowrap",
 });
 
-// VE selectors는 자신만 타겟할 수 있으므로, 기존 radioRootLabel의 입력 상태 선택자를
-// radioVisual로 이동했다. radioRootLabel은 레이아웃 전용 style()로 단순화한다.
-export const radioRootLabel = style({
+export const radioControlRoot = style({
   display: "inline-flex",
   position: "relative",
 });
 
-/**
- * `Radio.Basic`의 시각적 원형 indicator용 recipe.
- *
- * @remarks
- * 호출자는 className에 `"visual"` 리터럴을 반드시 함께 부여해야 한다.
- * `radioItem`의 globalStyle이 이 클래스명에 의존한다.
- *
- * input 상태(checked / disabled / focus-visible)에 따른 스타일은
- * `input[type="radio"]:state + &` 패턴으로 이 recipe에서 직접 처리한다.
- * VE selectors 규칙상 부모에서 형제를 타겟할 수 없기 때문이다.
- */
 export const radioVisual = recipe({
   base: {
+    flexShrink: 0,
     borderRadius: vars.scheme.semantic.radius.max,
     border: `${vars.scheme.semantic.strokeWeight["1"]} solid ${vars.color.semantic.stroke.alpha.assistive}`,
     backgroundColor: vars.color.semantic.surface.shallow,
@@ -94,40 +46,21 @@ export const radioVisual = recipe({
     position: "relative",
     outline: "none",
     selectors: {
-      // input 상태에 따른 visual 스타일
       'input[type="radio"]:not(:disabled):checked + &': {
         backgroundColor: vars.color.semantic.surface.static.standard,
       },
       'input[type="radio"]:not(:checked):disabled + &': {
         backgroundColor: vars.color.semantic.surface.standard,
-        borderColor: vars.color.semantic.stroke.alpha.subtler,
-        cursor: "default",
+        borderColor: vars.color.semantic.stroke.alpha.subtle,
+        cursor: "not-allowed",
       },
       'input[type="radio"]:checked:disabled + &': {
-        backgroundColor: vars.color.semantic.fill.subtle,
-        cursor: "default",
+        backgroundColor: vars.color.semantic.fill.subtlest,
+        cursor: "not-allowed",
       },
-      'input[type="radio"]:focus-visible + &': {
-        boxShadow: `0 0 0 3px ${vars.color.semantic.accent.alpha.alternative}`,
-      },
-      // hover / active overlay
-      "&::after": {
-        content: '""',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        borderRadius: "inherit",
-        opacity: 0,
-        pointerEvents: "none",
-      },
-      "&:hover::after": { opacity: 0.08 },
-      "&:active::after": { opacity: 0.12 },
     },
   },
   variants: {
-    // size: checked / disabled-checked 상태의 border 굵기를 결정
     size: {
       lg: {
         width: radioSizeMap.lg.sizeRem,
@@ -137,7 +70,7 @@ export const radioVisual = recipe({
             border: `${vars.scheme.semantic.strokeWeight[radioSizeMap.lg.borderKey]} solid ${vars.color.semantic.accent.neutral}`,
           },
           'input[type="radio"]:checked:disabled + &': {
-            border: `${vars.scheme.semantic.strokeWeight[radioSizeMap.lg.borderKey]} solid ${vars.color.semantic.stroke.subtler}`,
+            border: `${vars.scheme.semantic.strokeWeight[radioSizeMap.lg.borderKey]} solid ${vars.color.semantic.stroke.alpha.subtle}`,
           },
         },
       },
@@ -149,7 +82,7 @@ export const radioVisual = recipe({
             border: `${vars.scheme.semantic.strokeWeight[radioSizeMap.md.borderKey]} solid ${vars.color.semantic.accent.neutral}`,
           },
           'input[type="radio"]:checked:disabled + &': {
-            border: `${vars.scheme.semantic.strokeWeight[radioSizeMap.md.borderKey]} solid ${vars.color.semantic.stroke.subtler}`,
+            border: `${vars.scheme.semantic.strokeWeight[radioSizeMap.md.borderKey]} solid ${vars.color.semantic.stroke.alpha.subtle}`,
           },
         },
       },
@@ -161,7 +94,7 @@ export const radioVisual = recipe({
             border: `${vars.scheme.semantic.strokeWeight[radioSizeMap.sm.borderKey]} solid ${vars.color.semantic.accent.neutral}`,
           },
           'input[type="radio"]:checked:disabled + &': {
-            border: `${vars.scheme.semantic.strokeWeight[radioSizeMap.sm.borderKey]} solid ${vars.color.semantic.stroke.subtler}`,
+            border: `${vars.scheme.semantic.strokeWeight[radioSizeMap.sm.borderKey]} solid ${vars.color.semantic.stroke.alpha.subtle}`,
           },
         },
       },
@@ -173,17 +106,42 @@ export const radioVisual = recipe({
             border: `${vars.scheme.semantic.strokeWeight[radioSizeMap.xs.borderKey]} solid ${vars.color.semantic.accent.neutral}`,
           },
           'input[type="radio"]:checked:disabled + &': {
-            border: `${vars.scheme.semantic.strokeWeight[radioSizeMap.xs.borderKey]} solid ${vars.color.semantic.stroke.subtler}`,
+            border: `${vars.scheme.semantic.strokeWeight[radioSizeMap.xs.borderKey]} solid ${vars.color.semantic.stroke.alpha.subtle}`,
           },
         },
       },
     } satisfies Record<RadioSize, unknown>,
+    interaction: {
+      on: {
+        selectors: {
+          'input[type="radio"]:not(:disabled) + &::after': {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            backgroundColor: overlayColorMap.primary,
+            borderRadius: "inherit",
+            opacity: 0,
+            pointerEvents: "none",
+          },
+          'input[type="radio"]:not(:disabled) + &:hover::after': {
+            opacity: overlayOpacityMap.normal.hover,
+          },
+          'input[type="radio"]:not(:disabled) + &:active::after': {
+            opacity: overlayOpacityMap.normal.pressed,
+          },
+          'input[type="radio"]:focus-visible + &': {
+            boxShadow: `0 0 0 ${vars.scheme.semantic.strokeWeight["2"]} ${vars.color.semantic.accent.alpha.alternative}`,
+          },
+        },
+      },
+      off: {},
+    },
   },
 });
 
-// Radio.Item
-
-// Size variants
 const itemSizeVariants = {
   lg: {
     gap: `${vars.scheme.semantic.spacing["6"]} ${vars.scheme.semantic.spacing["12"]}`,
@@ -203,171 +161,91 @@ const itemSizeVariants = {
   },
 } satisfies Record<RadioSize, object>;
 
-// empty 모드에서 ::after / ::before를 element 경계 밖으로 확장하는 크기
 const itemInsetBySize: Record<RadioSize, string> = {
-  lg: `${pxToRem(-4)} ${pxToRem(-6)}`,
-  md: `${pxToRem(-4)} ${pxToRem(-6)}`,
-  sm: `${pxToRem(-3)} ${pxToRem(-5)}`,
-  xs: `${pxToRem(-3)} ${pxToRem(-4)}`,
+  lg: `${pxToRem(-4)} ${pxToRem(-8)}`,
+  md: `${pxToRem(-4)} ${pxToRem(-8)}`,
+  sm: `${pxToRem(-4)} ${pxToRem(-6)}`,
+  xs: `${pxToRem(-3)} ${pxToRem(-6)}`,
 };
 
-// outline 모드 size별 padding
-const itemOutlinePaddingBySize = {
-  lg: vars.scheme.semantic.spacing["12"],
-  md: vars.scheme.semantic.spacing["10"],
-  sm: vars.scheme.semantic.spacing["8"],
-  xs: vars.scheme.semantic.spacing["6"],
-} satisfies Record<RadioSize, string>;
+const itemOutlinedPaddingBySize: Record<RadioSize, string> = {
+  lg: `${vars.scheme.semantic.spacing["10"]} ${vars.scheme.semantic.spacing["12"]}`,
+  md: `${vars.scheme.semantic.spacing["8"]} ${vars.scheme.semantic.spacing["10"]}`,
+  sm: `${vars.scheme.semantic.spacing["6"]} ${vars.scheme.semantic.spacing["8"]}`,
+  xs: `${vars.scheme.semantic.spacing["4"]} ${vars.scheme.semantic.spacing["6"]}`,
+};
 
-// Compound variants
 const expansionCompoundVariants = RADIO_SIZE_OPTIONS.map(size => ({
-  variants: { size, styleOutline: "empty" as const },
+  variants: { size, styleOutlined: "hollow" as const },
   style: {
     selectors: {
-      "&::after": { inset: itemInsetBySize[size] },
-      "&::before": { inset: itemInsetBySize[size] },
+      "&::before, &::after": { inset: itemInsetBySize[size] },
     },
   },
 }));
 
-const outlinePaddingCompoundVariants = RADIO_SIZE_OPTIONS.map(size => ({
-  variants: { size, styleOutline: "outline" as const },
-  style: { padding: itemOutlinePaddingBySize[size] },
+const outlinedPaddingCompoundVariants = RADIO_SIZE_OPTIONS.map(size => ({
+  variants: { size, styleOutlined: "outlined" as const },
+  style: { padding: itemOutlinedPaddingBySize[size] },
 }));
 
-// VE selectors는 & 자신만 타겟할 수 있어 자식 요소 배치에 globalStyle을 사용한다.
-// radioItemGrid를 기준 클래스로 삼아 grid 자식의 위치를 정의한다.
 const radioItemGrid = style({
   display: "inline-grid",
   gridTemplateColumns: "auto 1fr",
   alignItems: "center",
 });
 
-globalStyle(`${radioItemGrid} > :nth-child(1)`, {
-  gridColumn: "1",
-  gridRow: "1",
-  display: "flex",
-  alignItems: "center",
-});
-globalStyle(`${radioItemGrid} > :nth-child(2)`, {
+export const radioControlSlot = style({ gridColumn: "1", gridRow: "1", alignItems: "center" });
+export const radioLabelSlot = style({
   gridColumn: "2",
   gridRow: "1",
   display: "flex",
   alignItems: "center",
 });
+export const radioHelperSlot = style({ gridColumn: "2", gridRow: "2" });
 
-// Radio.Item 컨테이너가 ::before로 focus ring을 직접 담당하므로 visual span의 것은 숨긴다.
-globalStyle(`${radioItemGrid} input[type="radio"]:focus-visible + .visual`, {
-  boxShadow: "none !important",
-});
-
-// alignRight 변형별 SubLabel(:nth-child(3)) 배치
-// recipe 내부 selectors에서 자식을 타겟할 수 없어 별도 style + globalStyle로 분리한다.
-const radioItemAlignLeft = style({});
-globalStyle(`${radioItemAlignLeft} > :nth-child(3)`, { gridColumn: "2", gridRow: "2" });
-
-const radioItemAlignRight = style({});
-globalStyle(`${radioItemAlignRight} > :nth-child(3)`, { gridColumn: "1 / span 2", gridRow: "2" });
-
-const itemBaseStyles = style([
-  radioItemGrid,
-  overlay(),
-  focusRing(),
-  {
-    position: "relative",
-    vars: { [overlayColor]: vars.color.semantic.fill.bold },
-    selectors: {
-      // checked 상태에서 overlay 색상을 accent으로 전환
-      '&:has(input[type="radio"]:checked)': {
-        vars: { [overlayColor]: vars.color.semantic.accent.alternative },
+export const radioItem = recipe({
+  base: [
+    radioItemGrid,
+    overlay(),
+    {
+      position: "relative",
+      selectors: {
+        "&::before, &::after": { inset: 0, borderRadius: "inherit" },
       },
-      // overlay shape: element 경계와 동일. empty 모드에서는 compoundVariants로 확장
-      "&::after": { inset: 0, borderRadius: "inherit" },
-      // focus ring shape: element 경계와 동일. empty 모드에서는 compoundVariants로 확장
-      "&::before": { inset: 0, borderRadius: "inherit" },
     },
-  },
-]);
-
-/**
- * `Radio.Item` 컨테이너용 VE recipe.
- *
- * @remarks
- * 인터랙션 상태는 `useContainerPressable`이 부여하는 data attribute를 소비한다.
- * - `data-hovered`       → `::after` overlay opacity 0.08
- * - `data-pressed`       → `::after` overlay opacity 0.12
- * - `data-focus-visible` → `::before` focus ring
- * - `data-disabled`      → hover/pressed 억제 + outline border 색상 변경
- *
- * `usePressable` 대신 `useContainerPressable`을 사용하는 이유:
- * `usePressable` 내부의 `useButton`이 `role="button"`을 추가해 자식 `input[type="radio"]`와
- * 시맨틱 충돌을 일으킨다. `useContainerPressable`은 `useButton` 없이 `usePress` + `useFocusRing({ within: true })`
- * 조합으로 role 변경 없이 pressed/focus 상태를 제공한다.
- *
- * 그리드 자식 배치는 VE selectors 제약으로 인해 module-level globalStyle로 처리된다.
- */
-export const radioItem = recipe({
-  base: itemBaseStyles,
+  ],
   variants: {
-    // size: gap, borderRadius만 결정. overlay 확장은 compoundVariants에서 styleOutline과 교차
     size: itemSizeVariants satisfies Record<RadioSize, unknown>,
-    styleOutline: {
-      outline: {
+    styleOutlined: {
+      outlined: {
         border: `${vars.scheme.semantic.strokeWeight["1"]} solid ${vars.color.semantic.stroke.alpha.subtle}`,
         selectors: {
           "&[data-disabled]": { borderColor: vars.color.semantic.stroke.alpha.subtler },
-          // overlay가 outline border 위에 그려질 때 border를 유지
           "&::after": { border: "inherit" },
         },
       },
-      empty: { border: "none", padding: 0 },
-    },
-    alignRight: {
-      left: [radioItemAlignLeft],
-      right: [radioItemAlignRight],
+      hollow: { border: "none", padding: 0 },
     },
   },
-  compoundVariants: [...expansionCompoundVariants, ...outlinePaddingCompoundVariants],
+  compoundVariants: [...expansionCompoundVariants, ...outlinedPaddingCompoundVariants],
 });
 
-// Radio.Label / Radio.SubLabel
-// disabled 색상은 조상의 [data-disabled] attribute로 제어한다.
-// subLabel은 subLabelSizeMap에 따라 size보다 한 단계 작은 typography를 사용한다.
-
-export const radioTextLabel = recipe({
-  base: {
-    whiteSpace: "nowrap",
-    color: vars.color.semantic.object.bold,
-    selectors: {
-      "[data-disabled] &": { color: vars.color.semantic.object.subtle },
-    },
-  },
-  variants: {
-    size: {
-      lg: typographyBySize.lg,
-      md: typographyBySize.md,
-      sm: typographyBySize.sm,
-      xs: typographyBySize.xs,
-    } satisfies Record<RadioSize, unknown>,
+export const radioLabel = style({
+  whiteSpace: "nowrap",
+  zIndex: 10,
+  vars: { [labelColorVar]: vars.color.semantic.object.bolder },
+  selectors: {
+    "[data-disabled] &": { vars: { [labelColorVar]: vars.color.semantic.object.subtle } },
   },
 });
 
-export const radioSubLabel = recipe({
-  base: {
-    whiteSpace: "nowrap",
-    color: vars.color.semantic.object.assistive,
-    position: "relative",
-    zIndex: 10,
-    selectors: {
-      "[data-disabled] &": { color: vars.color.semantic.object.subtle },
-    },
-  },
-  variants: {
-    size: {
-      lg: typographyBySize.md,
-      md: typographyBySize.sm,
-      sm: typographyBySize.xs,
-      xs: typographyBySize.xs,
-    } satisfies Record<RadioSize, unknown>,
+export const radioHelper = style({
+  whiteSpace: "nowrap",
+  vars: { [labelColorVar]: vars.color.semantic.object.alternative },
+  position: "relative",
+  zIndex: 10,
+  selectors: {
+    "[data-disabled] &": { vars: { [labelColorVar]: vars.color.semantic.object.subtle } },
   },
 });
diff --git a/packages/jds/src/components/Radio/radio.types.ts b/packages/jds/src/components/Radio/radio.types.ts
index 96bf4c95c..b45a88ddc 100644
--- a/packages/jds/src/components/Radio/radio.types.ts
+++ b/packages/jds/src/components/Radio/radio.types.ts
@@ -1,12 +1,10 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
-export const RADIO_SIZE_OPTIONS = ["lg", "md", "sm", "xs"] as const;
-export const RADIO_STYLE_OPTIONS = ["empty", "outline"] as const;
-export const RADIO_ALIGN_OPTIONS = ["left", "right"] as const;
+export const RADIO_SIZE_OPTIONS = ["xs", "sm", "md", "lg"] as const;
+export const RADIO_VARIANT_OPTIONS = ["hollow", "outlined"] as const;
 
 export type RadioSize = (typeof RADIO_SIZE_OPTIONS)[number];
-export type RadioStyle = (typeof RADIO_STYLE_OPTIONS)[number];
-export type RadioAlign = (typeof RADIO_ALIGN_OPTIONS)[number];
+export type RadioVariant = (typeof RADIO_VARIANT_OPTIONS)[number];
 
 type RadioRootControlledProps = {
   value: string;
@@ -21,9 +19,8 @@ type RadioRootUncontrolledProps = {
 };
 
 type RadioRootBaseProps = {
-  radioSize?: RadioSize;
-  radioStyle?: RadioStyle;
-  radioAlign?: RadioAlign;
+  size?: RadioSize;
+  variant?: RadioVariant;
   disabled?: boolean;
   name?: string;
   children: ReactNode;
@@ -32,15 +29,15 @@ type RadioRootBaseProps = {
 export type RadioRootProps = RadioRootBaseProps &
   (RadioRootControlledProps | RadioRootUncontrolledProps);
 
-export interface RadioBasicProps extends Omit<ComponentPropsWithoutRef<"input">, "value"> {
-  radioSize?: RadioSize;
+export interface RadioBasicProps
+  extends Omit<ComponentPropsWithoutRef<"input">, "value" | "size"> {
+  size?: RadioSize;
   value: string;
 }
 
-export interface RadioItemProps extends ComponentPropsWithoutRef<"div"> {
-  radioSize?: RadioSize;
-  radioStyle?: RadioStyle;
-  radioAlign?: RadioAlign;
+export interface RadioItemProps extends ComponentPropsWithoutRef<"label"> {
+  size?: RadioSize;
+  variant?: RadioVariant;
   disabled?: boolean;
   children: ReactNode;
 }
@@ -49,6 +46,6 @@ export interface RadioLabelProps {
   children: ReactNode;
 }
 
-export interface RadioSubLabelProps {
+export interface RadioHelperProps {
   children: ReactNode;
 }
diff --git a/packages/jds/src/components/Select/SelectRadio.tsx b/packages/jds/src/components/Select/SelectRadio.tsx
index ff0bc4e01..d0dc1a1ed 100644
--- a/packages/jds/src/components/Select/SelectRadio.tsx
+++ b/packages/jds/src/components/Select/SelectRadio.tsx
@@ -41,7 +41,7 @@ export const SelectRadio = forwardRef<HTMLDivElement, SelectRadioProps>(
       >
         <StyledSelectItemInputWrapper>
           <Radio.Basic
-            radioSize={size}
+            size={size}
             value={value}
             checked={isItemSelected}
             disabled={isDisabled}