bottle-note · hyejj19 · Jul 31, 2026 · Jul 31, 2026
diff --git a/src/app/(primary)/inquire/[id]/page.tsx b/src/app/(primary)/inquire/[id]/page.tsx
@@ -86,7 +86,7 @@ export default function Inquire() {
 
   return (
     <>
-      <section className="pb-8 relative">
+      <section className="min-h-safe-screen bg-bg-layer-default pb-8 relative text-fg-neutral">
         <SubHeader>
           <SubHeader.Left
             onClick={() => {
@@ -105,21 +105,21 @@ export default function Inquire() {
         {inquireDetails !== null && (
           <>
             <article className="mt-4 mx-5 flex justify-between items-center">
-              <p className="text-13 font-bold text-subCoral">
+              <p className="text-13 font-bold text-fg-brand">
                 {inquireDetails.typeName} 문의
               </p>
-              <p className="text-12 text-mainGray">
+              <p className="text-12 text-fg-neutral-muted">
                 {formatDate(inquireDetails.createAt) as string}
               </p>
             </article>
 
             <article className="mx-5 mt-2 space-y-[18px]">
-              <h3 className="text-16 font-bold text-black">
+              <h3 className="text-16 font-bold text-fg-neutral">
                 {inquireDetails.title}
               </h3>
               <div>
                 <p
-                  className="text-12 text-black whitespace-pre-line"
+                  className="text-12 text-fg-neutral whitespace-pre-line"
                   dangerouslySetInnerHTML={{
                     __html: inquireDetails.content?.replace(/\n/g, '<br />'),
                   }}
@@ -160,19 +160,19 @@ export default function Inquire() {
               )}
             </article>
 
-            <article className="border-t border-b border-bgGray mx-5 my-[26px] py-[26px]">
+            <article className="border-t border-b border-stroke-neutral-subtle mx-5 my-[26px] py-[26px]">
               <div className="flex items-center justify-between">
-                <p className="text-13 text-subCoral font-bold">
+                <p className="text-13 text-fg-brand font-bold">
                   {getStatusText(inquireDetails.status as Status)}
                 </p>
                 {inquireDetails.adminId && inquireDetails.lastModifyAt && (
-                  <p className="text-mainGray text-12">
+                  <p className="text-fg-neutral-muted text-12">
                     {formatDate(inquireDetails.lastModifyAt) as string}
                   </p>
                 )}
               </div>
               {inquireDetails.adminId && (
-                <div className="pt-5 text-12 break-words text-mainDarkGray">
+                <div className="pt-5 text-12 break-words text-fg-neutral">
                   {inquireDetails.responseContent}
                 </div>
               )}

diff --git a/src/app/(primary)/inquire/_components/InquireTable.tsx b/src/app/(primary)/inquire/_components/InquireTable.tsx
@@ -11,15 +11,15 @@ interface InquireTableProps {
 const getStatusColor = (status: string) => {
   switch (status) {
     case 'WAITING':
-      return 'text-brightGray';
+      return 'text-fg-neutral-muted';
     case 'SUCCESS':
-      return 'text-subCoral';
+      return 'text-fg-brand';
     case 'REJECT':
-      return 'text-brightGray';
+      return 'text-fg-neutral-muted';
     case 'DELETED':
-      return 'text-brightGray';
+      return 'text-fg-neutral-muted';
     default:
-      return 'text-brightGray';
+      return 'text-fg-neutral-muted';
   }
 };
 
@@ -28,10 +28,10 @@ export default function InquireTable({
   onItemClick,
 }: InquireTableProps) {
   return (
-    <div className="w-full overflow-x-auto border-b border-brightGray">
+    <div className="w-full overflow-x-auto border-b border-stroke-neutral-subtle">
       <table className="w-full border-collapse">
         <thead>
-          <tr className="font-bold text-13 text-mainBlack">
+          <tr className="font-bold text-13 text-fg-neutral">
             <th className="text-left py-[17px] px-4 ">문의 제목</th>
             <th className="text-left py-[17px] px-4">등록일</th>
             <th className="text-left py-[17px] px-4">답변</th>
@@ -42,14 +42,14 @@ export default function InquireTable({
             <tr
               key={item.id}
               onClick={() => onItemClick(item.id)}
-              className="border-t border-bgGray hover:bg-gray-50 cursor-pointer transition-colors"
+              className="border-t border-stroke-neutral-subtle hover:bg-bg-layer-default-pressed cursor-pointer transition-colors"
             >
-              <td className="py-[15px] px-4 text-13 text-mainBlack">
-                <div className="text-gray-900 line-clamp-2 break-words">
+              <td className="py-[15px] px-4 text-13 text-fg-neutral">
+                <div className="text-fg-neutral line-clamp-2 break-words">
                   {item.title && truncStr(item.title, 20)}
                 </div>
               </td>
-              <td className="py-[15px] px-4 text-13 text-mainBlack whitespace-nowrap">
+              <td className="py-[15px] px-4 text-13 text-fg-neutral whitespace-nowrap">
                 {format(new Date(item.createAt), 'yyyy.MM.dd')}
               </td>
               <td className="py-[15px] px-4">

diff --git a/src/app/(primary)/inquire/page.tsx b/src/app/(primary)/inquire/page.tsx
@@ -51,7 +51,7 @@ export default function Inquire() {
   };
 
   return (
-    <div>
+    <div className="min-h-safe-screen bg-bg-layer-default text-fg-neutral">
       <SubHeader>
         <SubHeader.Left
           onClick={() => {

diff --git a/src/app/(primary)/inquire/register/_components/InquireForm.tsx b/src/app/(primary)/inquire/register/_components/InquireForm.tsx
@@ -10,7 +10,7 @@ export default function InquireForm() {
     <>
       <article className="space-y-[10px]">
         <label
-          className="block font-bold text-mainGray text-13 mb-1"
+          className="block font-bold text-fg-neutral-muted text-13 mb-1"
           htmlFor="title"
         >
           문의 제목
@@ -19,14 +19,14 @@ export default function InquireForm() {
           id="title"
           type="text"
           placeholder=""
-          className="w-full h-9 bg-sectionWhite rounded-none px-3 text-14 outline-none focus:border focus:border-subCoral"
+          className="w-full h-9 bg-bg-layer-floating rounded-none px-3 text-14 text-fg-neutral outline-none focus:border focus:border-stroke-brand-solid"
           {...register('title')}
         />
       </article>
 
       <article className="space-y-[10px]">
         <label
-          className="block font-bold text-mainGray text-13 mb-1"
+          className="block font-bold text-fg-neutral-muted text-13 mb-1"
           htmlFor="contact"
         >
           <span className="font-bold">연락처 </span>
@@ -36,26 +36,29 @@ export default function InquireForm() {
           id="contact"
           type="text"
           placeholder=""
-          className="w-full h-9 bg-sectionWhite rounded-none px-3 text-14 outline-none focus:border focus:border-subCoral"
+          className="w-full h-9 bg-bg-layer-floating rounded-none px-3 text-14 text-fg-neutral outline-none focus:border focus:border-stroke-brand-solid"
           {...register('contact')}
         />
       </article>
 
       <article className="space-y-[10px]">
-        <label className="block text-13 mb-1 text-mainGray" htmlFor="content">
+        <label
+          className="block text-13 mb-1 text-fg-neutral-muted"
+          htmlFor="content"
+        >
           <span className="font-bold">문의 내용 </span>
           <span className="font-light">(자세한 내용을 적어주세요)</span>
         </label>
         <div className="relative">
           <textarea
             id="content"
             placeholder="문의 내용을 작성해주세요. (최소 10자)"
-            className="w-full h-56 bg-sectionWhite rounded-none px-3 py-3 pb-8 text-14 outline-none focus:border focus:border-subCoral resize-none"
+            className="w-full h-56 bg-bg-layer-floating rounded-none px-3 py-3 pb-8 text-14 text-fg-neutral outline-none focus:border focus:border-stroke-brand-solid resize-none"
             minLength={10}
             maxLength={1000}
             {...register('content')}
           />
-          <div className="absolute bottom-[10px] right-[14px] text-mainGray text-10">
+          <div className="absolute bottom-[10px] right-[14px] text-fg-neutral-muted text-10">
             ({watch('content')?.length} / 1000)
           </div>
         </div>

diff --git a/src/app/(primary)/inquire/register/_components/InquireTypeSelector.tsx b/src/app/(primary)/inquire/register/_components/InquireTypeSelector.tsx
@@ -14,14 +14,15 @@ export default function InquireTypeSelector({
 }: InquireTypeSelectorProps) {
   const { setValue, watch } = useFormContext<FormValues>();
 
-  const labelBaseStyle = 'border border-subCoral rounded-md text-15 px-3 py-2';
+  const labelBaseStyle =
+    'border border-stroke-brand-solid rounded-md text-15 px-3 py-2';
   const typeList =
     paramsType === 'business' ? BUSINESS_TYPE_LIST : SERVICE_TYPE_LIST;
 
   return (
     <article className="space-y-[10px]">
       <label
-        className="block font-bold text-mainGray text-13 mb-1"
+        className="block font-bold text-fg-neutral-muted text-13 mb-1"
         htmlFor="type"
       >
         문의 유형
@@ -44,8 +45,12 @@ export default function InquireTypeSelector({
                   setValue('type', item.type as string);
                 }
               }}
-              selectedStyle={labelBaseStyle + ' bg-subCoral text-white'}
-              unselectedStyle={labelBaseStyle + ' bg-white text-subCoral'}
+              selectedStyle={
+                labelBaseStyle + ' bg-bg-brand-solid text-fg-brand-contrast'
+              }
+              unselectedStyle={
+                labelBaseStyle + ' bg-bg-layer-default text-fg-brand'
+              }
             />
           );
         })}

diff --git a/src/app/(primary)/inquire/register/page.tsx b/src/app/(primary)/inquire/register/page.tsx
@@ -141,7 +141,7 @@ export default function InquireRegister() {
   return (
     <>
       <FormProvider {...formMethods}>
-        <section className="pb-8 relative">
+        <section className="min-h-safe-screen bg-bg-layer-default pb-8 relative text-fg-neutral">
           <SubHeader>
             <SubHeader.Left
               onClick={() => {
@@ -173,7 +173,7 @@ export default function InquireRegister() {
             <InquireTypeSelector paramsType={paramsType} />
 
             <article className="space-y-[10px]">
-              <label className="block text-12 mb-1 text-mainGray">
+              <label className="block text-12 mb-1 text-fg-neutral-muted">
                 <span className="font-bold">이미지 첨부 </span>
                 <span className="font-light">(선택·최대 5장)</span>
               </label>

diff --git a/src/app/(primary)/privacy-policy/page.tsx b/src/app/(primary)/privacy-policy/page.tsx
@@ -14,7 +14,7 @@ export default async function PrivacyPolicyPage() {
   const document = await getLegalDocument('privacy-policy');
 
   return (
-    <div className="content-container min-h-safe-screen bg-white">
+    <div className="content-container min-h-safe-screen bg-bg-layer-default text-fg-neutral">
       <LegalPageHeader title="개인정보 처리방침" />
       <LegalDocumentRenderer document={document} />
     </div>

diff --git a/src/app/(primary)/settings/_components/BlockManagement.tsx b/src/app/(primary)/settings/_components/BlockManagement.tsx
@@ -67,7 +67,7 @@ export default function BlockManagement() {
 
   return (
     <>
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-bg-layer-default text-fg-neutral">
         <div className="px-6 pt-6">
           <List
             emptyViewText="차단된 사용자가 없습니다."
@@ -90,13 +90,13 @@ export default function BlockManagement() {
                     className="py-[14px]"
                   >
                     {index > 0 && (
-                      <div className="border-t border-brightGray -mt-[14px] mb-[14px]" />
+                      <div className="border-t border-stroke-neutral-subtle -mt-[14px] mb-[14px]" />
                     )}
 
                     <div className="flex items-center justify-between">
                       <div className="flex items-center space-x-[10px]">
                         <ProfileImage size={36} />
-                        <span className="text-13 font-bold text-mainDarkGray">
+                        <span className="text-13 font-bold text-fg-neutral">
                           {user?.userName}
                         </span>
                       </div>
@@ -109,16 +109,16 @@ export default function BlockManagement() {
                         }
                         className={`px-[10px] py-1 border border-subCoral rounded text-12 font-medium transition-colors flex-shrink-0 ${
                           isUnblocking
-                            ? 'bg-subCoral text-white'
-                            : 'text-subCoral'
+                            ? 'bg-bg-brand-solid text-fg-brand-contrast'
+                            : 'text-fg-brand'
                         }`}
                       >
                         {isUnblocking ? '차단하기' : '차단해제'}
                       </button>
                     </div>
 
                     {isLast && (
-                      <div className="border-t border-brightGray mt-[14px] -mb-[14px]" />
+                      <div className="border-t border-stroke-neutral-subtle mt-[14px] -mb-[14px]" />
                     )}
                   </motion.div>
                 );

diff --git a/src/app/(primary)/terms/page.tsx b/src/app/(primary)/terms/page.tsx
@@ -14,7 +14,7 @@ export default async function TermsPage() {
   const document = await getLegalDocument('terms');
 
   return (
-    <div className="content-container min-h-safe-screen bg-white">
+    <div className="content-container min-h-safe-screen bg-bg-layer-default text-fg-neutral">
       <LegalPageHeader title="이용약관" />
       <LegalDocumentRenderer document={document} />
     </div>

diff --git a/src/app/(primary)/user/[id]/edit/_components/EditForm.tsx b/src/app/(primary)/user/[id]/edit/_components/EditForm.tsx
@@ -94,10 +94,10 @@ function EditForm({ userId }: Props) {
       <div className="flex flex-col gap-8">
         <div>
           <article className="flex flex-col relative">
-            <label className="text-13 text-mainDarkGray">닉네임</label>
+            <label className="text-13 text-fg-neutral">닉네임</label>
             <input
               placeholder="닉네임 입력"
-              className="border-b border-mainGray py-2 text-15 placeholder:text-[#BFBFBF] bg-transparent outline-none appearance-none rounded-none"
+              className="border-b border-stroke-neutral-subtle py-2 text-15 placeholder:text-fg-placeholder bg-transparent outline-none appearance-none rounded-none"
               value={nickName}
               onChange={(e) => setNickName(e.target.value)}
               type="text"
@@ -123,7 +123,7 @@ function EditForm({ userId }: Props) {
               </button>
             </div>
           </article>
-          <div className="text-right clear-start text-mainGray text-10 mt-1">{`${nickName.length}/20`}</div>
+          <div className="text-right clear-start text-fg-neutral-muted text-10 mt-1">{`${nickName.length}/20`}</div>
         </div>
       </div>
     </>

diff --git a/src/app/(primary)/user/[id]/edit/page.tsx b/src/app/(primary)/user/[id]/edit/page.tsx
@@ -92,7 +92,7 @@ export default function UserEditPage({
   };
 
   return (
-    <main>
+    <main className="min-h-safe-screen bg-bg-layer-default text-fg-neutral">
       <SubHeader>
         <SubHeader.Left
           onClick={() => {
@@ -134,7 +134,7 @@ export default function UserEditPage({
           className="absolute top-[20%] z-20"
           onClick={() => setIsOptionShow(true)}
         />
-        <div className="bg-white bg-opacity-60 rounded-full z-10 absolute top-[20%]">
+        <div className="bg-bg-layer-floating rounded-full z-10 absolute top-[20%]">
           <ProfileImage
             profileImgSrc={profileImg}
             size={104}

diff --git a/src/components/feature/legal/LegalDocumentRenderer.tsx b/src/components/feature/legal/LegalDocumentRenderer.tsx
@@ -7,34 +7,34 @@ interface LegalDocumentRendererProps {
 }
 
 const markdownStyles = [
-  'break-words text-14 leading-7 text-mainDarkGray',
+  'break-words text-14 leading-7 text-fg-neutral',
   '[&_*]:select-text',
   '[&_h1]:mb-5 [&_h1]:text-24 [&_h1]:font-extrabold [&_h1]:leading-9',
-  '[&_h2]:mb-3 [&_h2]:mt-10 [&_h2]:border-b [&_h2]:border-brightGray/40',
+  '[&_h2]:mb-3 [&_h2]:mt-10 [&_h2]:border-b [&_h2]:border-stroke-neutral-subtle',
   '[&_h2]:pb-2 [&_h2]:text-20 [&_h2]:font-bold [&_h2]:leading-7',
   '[&_h3]:mb-2 [&_h3]:mt-7 [&_h3]:text-16 [&_h3]:font-bold',
   '[&_p]:my-3',
   '[&_a]:font-medium [&_a]:text-subCoral [&_a]:underline',
-  '[&_strong]:font-bold [&_strong]:text-mainBlack',
+  '[&_strong]:font-bold [&_strong]:text-fg-neutral',
   '[&_blockquote]:my-5 [&_blockquote]:rounded-md [&_blockquote]:border-l-4',
-  '[&_blockquote]:border-subCoral [&_blockquote]:bg-sectionWhite',
-  '[&_blockquote]:px-4 [&_blockquote]:py-3 [&_blockquote]:text-mainGray',
+  '[&_blockquote]:border-stroke-brand-solid [&_blockquote]:bg-bg-neutral-weak',
+  '[&_blockquote]:px-4 [&_blockquote]:py-3 [&_blockquote]:text-fg-neutral-muted',
   '[&_blockquote_p]:my-1',
   '[&_ul]:my-3 [&_ul]:list-disc [&_ul]:space-y-1 [&_ul]:pl-5',
   '[&_ol]:my-3 [&_ol]:list-decimal [&_ol]:space-y-1 [&_ol]:pl-5',
   '[&_li]:pl-1',
-  '[&_hr]:my-8 [&_hr]:border-brightGray/50',
+  '[&_hr]:my-8 [&_hr]:border-stroke-neutral-subtle',
   '[&_table]:my-5 [&_table]:block [&_table]:w-max [&_table]:max-w-full',
   '[&_table]:overflow-x-auto [&_table]:rounded-md [&_table]:border',
-  '[&_table]:border-brightGray/60 [&_table]:text-12',
-  '[&_thead]:bg-sectionWhite',
+  '[&_table]:border-stroke-neutral-subtle [&_table]:text-12',
+  '[&_thead]:bg-bg-neutral-weak',
   '[&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-r',
-  '[&_th]:border-brightGray/60 [&_th]:px-3 [&_th]:py-2 [&_th]:text-left',
+  '[&_th]:border-stroke-neutral-subtle [&_th]:px-3 [&_th]:py-2 [&_th]:text-left',
   '[&_th]:font-bold [&_th:last-child]:border-r-0',
   '[&_td]:min-w-28 [&_td]:border-b [&_td]:border-r',
-  '[&_td]:border-brightGray/40 [&_td]:px-3 [&_td]:py-2 [&_td]:align-top',
+  '[&_td]:border-stroke-neutral-subtle [&_td]:px-3 [&_td]:py-2 [&_td]:align-top',
   '[&_td:last-child]:border-r-0 [&_tr:last-child_td]:border-b-0',
-  '[&_code]:rounded [&_code]:bg-sectionWhite [&_code]:px-1 [&_code]:py-0.5',
+  '[&_code]:rounded [&_code]:bg-bg-neutral-weak [&_code]:px-1 [&_code]:py-0.5',
 ].join(' ');
 
 export function LegalDocumentRenderer({
@@ -50,7 +50,7 @@ export function LegalDocumentRenderer({
         </ReactMarkdown>
       </div>
 
-      <footer className="mt-12 border-t border-brightGray/50 pt-4 text-11 leading-5 text-mainGray">
+      <footer className="mt-12 border-t border-stroke-neutral-subtle pt-4 text-11 leading-5 text-fg-neutral-muted">
         <p>문서 버전: {metadata.version}</p>
         <p>최종 수정일: {metadata.updatedAt}</p>
         <p>

diff --git a/src/components/feature/legal/LegalPageHeader.tsx b/src/components/feature/legal/LegalPageHeader.tsx
@@ -12,7 +12,7 @@ export function LegalPageHeader({ title }: LegalPageHeaderProps) {
   const router = useRouter();
 
   return (
-    <header className="sticky top-0 z-10 border-b border-brightGray/40 bg-white">
+    <header className="sticky top-0 z-10 border-b border-stroke-neutral-subtle bg-bg-layer-default">
       <SubHeader>
         <SubHeader.Left onClick={() => router.back()}>
           <Image