diff --git a/src/components/DeviceFrame.tsx b/src/components/DeviceFrame.tsx
index b9798ff..445bfc9 100644
--- a/src/components/DeviceFrame.tsx
+++ b/src/components/DeviceFrame.tsx
@@ -5,20 +5,20 @@ type DeviceFrameProps = PropsWithChildren<{
   className?: string;
 }>;
 
-export function DeviceFrame({ children, className = "" }: DeviceFrameProps) {
+export function DeviceFrame({ children, className="" }: DeviceFrameProps) {
   return (
-    <section className={`device-frame ${className}`}>
+    <section className={`flex flex-col w-[390px] min-h-[844px] overflow-hidden rounded-[44px] bg-[var(--app-bg)] [box-shadow:0_40px_100px_rgba(43,_143,_219,_0.25),_0_8px_32px_rgba(0,_0,_0,_0.08)] max-[820px]:max-w-[calc(100vw_-_28px)] ${className}`}>
       <StatusBar />
-      <div className="device-content">{children}</div>
+      <div className="flex-1 overflow-hidden flex flex-col bg-[#f2f7ff]">{children}</div>
     </section>
   );
 }
 
 export function StatusBar() {
   return (
-    <div className="status-bar" aria-hidden="true">
+    <div className="flex items-center justify-between min-h-[33px] py-2 px-6 bg-white text-[11px] font-bold min-h-8 p-[9px_20px] bg-[var(--surface)] text-[9px]" aria-hidden="true">
       <strong>9:41</strong>
-      <span className="status-icons">
+      <span className="w-5 h-[3px] overflow-hidden rounded-full bg-[rgba(8,_37,_95,_0.4)] text-transparent text-[var(--muted-2)] inline-flex items-center gap-[7px]">
         <Signal size={14} strokeWidth={2.6} />
         <Wifi size={14} strokeWidth={2.6} />
         <BatteryMedium size={15} strokeWidth={2.6} />
@@ -36,12 +36,13 @@ type SubHeaderProps = {
 
 export function SubHeader({ title, action, backIcon, onBack }: SubHeaderProps) {
   return (
-    <header className="sub-header">
-      <button className="icon-circle" onClick={onBack} type="button" aria-label="뒤로 가기">
-        {backIcon ? <img src={backIcon} alt="" /> : <ChevronLeft size={18} strokeWidth={2.8} />}
+    <header className="flex items-center gap-3 h-[57px] py-3 px-4 [border-bottom:1px_solid_var(--sky-100)] bg-white">
+      <button className="grid place-items-center w-8 h-8 rounded-full bg-[var(--sky-100)] text-[var(--primary-soft)] text-[22px] leading-none" onClick={onBack} type="button" aria-label="뒤로 가기">
+        {backIcon ? <img className="w-[17px] h-[17px]" src={backIcon} alt="" /> : <ChevronLeft size={18} strokeWidth={2.8} />}
       </button>
-      <h1>{title}</h1>
-      {action ? <div className="sub-header-action">{action}</div> : null}
+      <h1 className="flex-1 m-0 text-sm font-black">{title}</h1>
+      {action ? <div className="flex items-center">{action}</div> : null}
     </header>
   );
 }
+
diff --git a/src/components/UI.tsx b/src/components/UI.tsx
index eaa5130..67c0bc4 100644
--- a/src/components/UI.tsx
+++ b/src/components/UI.tsx
@@ -11,20 +11,27 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   icon?: ReactNode;
 };
 
+const buttonVariantClasses = {
+  primary: "bg-[var(--primary)] text-white",
+  secondary: "border-[1px_solid_#dbe8f8] bg-[#f5faff] text-[var(--primary)]",
+  disabled: "bg-[#d2d3d4] text-white cursor-default",
+  ghost: "",
+} as const;
+
 export function Button({
   children,
-  className = "",
+  className="",
   icon,
   variant = "primary",
   ...props
 }: ButtonProps) {
   return (
     <button
-      className={`button button-${variant} ${className}`}
+      className={`inline-flex items-center justify-center w-full min-h-[34px] rounded-[10px] p-[0_14px] text-[13px] font-black whitespace-nowrap w-[auto] min-h-8 rounded-[14px] text-xs gap-2 min-h-13 rounded-2xl text-sm ${buttonVariantClasses[variant]} ${className}`}
       type="button"
       {...props}
     >
-      {icon ? <span className="button-icon">{icon}</span> : null}
+      {icon ? <span className="inline-flex items-center justify-center">{icon}</span> : null}
       <span>{children}</span>
     </button>
   );
@@ -36,18 +43,18 @@ type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
 
 export function TextField({ label, ...props }: TextFieldProps) {
   return (
-    <label className="field">
+    <label className="grid gap-[3px] w-full text-[var(--muted)] text-[8px] font-bold gap-[7px] text-[13px]">
       <span>{label}</span>
-      <input {...props} />
+      <input className="w-full min-h-8 border-[1px_solid_#dbe8f8] rounded-[10px] p-[0_13px] bg-[#f6faff] text-[var(--navy)] outline-none placeholder:text-[#c6d1e0] min-h-12 rounded-2xl text-sm" {...props} />
     </label>
   );
 }
 
 export function Panel({
   children,
-  className = "",
+  className="",
 }: PropsWithChildren<{ className?: string }>) {
-  return <section className={`panel ${className}`}>{children}</section>;
+  return <section className={`w-full border-[1px_solid_var(--sky-100)] rounded-2xl p-4 bg-white [box-shadow:0_1px_3px_rgba(0,_0,_0,_0.1)] ${className}`}>{children}</section>;
 }
 
 export function WireImage({
@@ -58,28 +65,29 @@ export function WireImage({
   tall?: boolean;
 }) {
   return (
-    <div className={`wire-image ${tall ? "wire-image-tall" : ""}`}>
-      <Landmark className="wire-image-icon" size={20} strokeWidth={2.4} />
-      <span>{label}</span>
-      <i />
+    <div className={`relative h-16 overflow-hidden rounded-[10px] bg-[#c5cedc] after:[content:''] after:absolute after:[inset:auto_0_0] after:h-[40%] after:bg-[#b8d8b8] h-[82px] rounded-2xl grid place-items-center text-[rgba(8,_37,_95,_0.5)] ${tall ? "" : ""}`}>
+      <Landmark className="relative z-10" size={20} strokeWidth={2.4} />
+      <span className="absolute z-10 top-[8px] left-[8px] text-[rgba(8,_37,_95,_0.6)] text-[8px] font-bold top-[auto] bottom-[8px] text-[rgba(8,_37,_95,_0.68)]">{label}</span>
+      <i className="absolute left-[10px] right-[10px] top-[50%] h-[5px] rounded-full bg-[rgba(255,_255,_255,_0.45)]" />
     </div>
   );
 }
 
 export function SearchInput({ placeholder }: { placeholder: string }) {
   return (
-    <label className="search-box">
+    <label className="flex items-center gap-2 h-8 p-[0_12px] border-[1px_solid_#dbe8f8] rounded-2xl bg-[var(--sky-50)] h-[46px] rounded-[18px] p-[0_14px] bg-white text-[var(--muted-2)] [box-shadow:0_1px_5px_rgba(8,_37,_95,_0.08)] min-h-11 mt-[-4px] border-[1px_solid_#dce8f5] rounded-[17px] p-[0_18px] text-[#9aa8bb] [box-shadow:0_3px_9px_rgba(8,_37,_95,_0.08)]">
       <Search size={16} strokeWidth={2.4} />
-      <input placeholder={placeholder} />
+      <input className="w-full border-0 bg-transparent text-[var(--navy)] text-[9px] outline-none text-[13px] text-[var(--ink)]" placeholder={placeholder} />
     </label>
   );
 }
 
 export function LocationBadge({ children }: PropsWithChildren) {
   return (
-    <span className="location-badge">
+    <span className="inline-flex items-center gap-1 w-fit rounded-full p-[5px_9px] bg-[rgba(255,_255,_255,_0.82)] text-[var(--primary)] text-[11px] font-black p-[3px_7px] text-[10px]">
       <MapPin size={13} strokeWidth={2.4} />
       {children}
     </span>
   );
 }
+
diff --git a/src/pages/Auth/LoginPage.tsx b/src/pages/Auth/LoginPage.tsx
index 50ee634..ec320ca 100644
--- a/src/pages/Auth/LoginPage.tsx
+++ b/src/pages/Auth/LoginPage.tsx
@@ -8,21 +8,21 @@ export default function LoginPage() {
   const navigate = useNavigate();
   return (
     <>
-      <section className="login-screen">
-        <header className="login-brand">
-          <span>
+      <section className="flex flex-col py-6 px-5 items-center text-center min-h-[100%] p-[24px_22px_30px]">
+        <header className="flex items-center gap-2.5 text-[var(--primary)]">
+          <span className="grid w-10 h-10 place-items-center rounded-2xl bg-[var(--sky-100)]">
             <MapPinned size={22} strokeWidth={2.6} />
           </span>
-          <strong>Quespot</strong>
+          <strong className="text-[22px] font-black">Quespot</strong>
         </header>
 
-        <div className="login-hero-card">
-          <img src={figmaAssets.mascot} alt="Quespot 캐릭터" />
-          <h1>미션으로 떠나는 여행</h1>
-          <p>숨은 장소를 발견하고, 인증 미션을 완료하며 보상을 모아보세요.</p>
+        <div className="flex flex-col items-center mt-[42px] rounded-[28px] p-[26px_22px_28px] bg-[linear-gradient(169deg,_#eaf5ff_0%,_#c8e8ff_100%)] text-center">
+          <img className="w-24 h-24 object-contain w-[148px] h-[148px] object-contain" src={figmaAssets.mascot} alt="Quespot 캐릭터" />
+          <h1 className="m-[28px_0_0] text-[var(--primary)] text-[22px] leading-[33px] m-[18px_0_10px] text-[var(--navy)] text-[25px] leading-[1.24]">미션으로 떠나는 여행</h1>
+          <p className="m-[0_0_18px] text-[var(--muted)] text-[9px] font-bold leading-normal max-w-[260px] m-0 text-[#5a6b84] text-sm leading-relaxed">숨은 장소를 발견하고, 인증 미션을 완료하며 보상을 모아보세요.</p>
         </div>
 
-        <div className="auth-actions">
+        <div className="grid gap-2 w-full gap-2.5 mt-[auto]">
           <Button
             icon={<Chrome size={18} strokeWidth={2.4} />}
             onClick={() => navigate(PATH.HOME)}
@@ -39,13 +39,14 @@ export default function LoginPage() {
         </div>
 
         <button
-          className="auth-text-button"
+          className="mt-[18px] bg-transparent text-[var(--muted)] text-[13px]"
           onClick={() => navigate(PATH.SIGNUP)}
           type="button"
         >
-          계정이 없으신가요? <b>회원가입</b>
+          계정이 없으신가요? <b className="text-[var(--primary)] text-[var(--primary)]">회원가입</b>
         </button>
       </section>
     </>
   );
 }
+
diff --git a/src/pages/Auth/SignupCheckPage.tsx b/src/pages/Auth/SignupCheckPage.tsx
index 83258b1..1d2142a 100644
--- a/src/pages/Auth/SignupCheckPage.tsx
+++ b/src/pages/Auth/SignupCheckPage.tsx
@@ -13,12 +13,12 @@ export default function SignupCheckPage() {
   const navigate = useNavigate();
   return (
     <>
-      <section className="terms-screen">
-        <h1>약관동의</h1>
-        <div className="terms-list">
+      <section className="flex flex-col py-6 px-5 gap-6 min-h-[100%] p-[36px_24px_30px] gap-7">
+        <h1 className="m-[16px_0_12px] text-[var(--navy)] text-sm leading-[21px] text-center m-[8px_0_18px] text-2xl leading-tight">약관동의</h1>
+        <div className="overflow-hidden border-[1px_solid_#dbe8f8] rounded-[14px] bg-white rounded-[20px]">
           {rows.map((row, index) => (
-            <label className="check-row" key={row}>
-              <span className={index === 0 ? "checked" : ""}>
+            <label className="flex items-center gap-2 min-h-[42px] p-[10px_0] [border-bottom:1px_solid_#dbe8f8] text-[10px] text-[var(--navy)] last:[border-bottom:0] min-h-[58px] py-3 px-1 text-sm" key={row}>
+              <span className={index === 0 ? "border-[var(--primary)] bg-[var(--primary)] after:[content:''] after:w-[5px] after:h-[5px] after:rounded-full after:bg-white text-white after:hidden" : ""}>
                 {index === 0 ? (
                   <ShieldCheck size={10} strokeWidth={2.8} />
                 ) : null}
@@ -37,3 +37,4 @@ export default function SignupCheckPage() {
     </>
   );
 }
+
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index da9056c..4c03ef8 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -27,6 +27,26 @@ import {
 import { useNavigate } from "react-router-dom";
 import { PATH } from "@/routes/paths";
 
+const categoryToneClasses = {
+  violet: "bg-[#eee1ff] text-[#8b5cf6]",
+  green: "bg-[#e1faef] text-green-600",
+  amber: "bg-[#fff1c9] text-amber-600",
+  blue: "bg-[#dcecff] text-[#2577ff]",
+  pink: "bg-[#ffe1f0] text-pink-500",
+  cyan: "bg-[#cff9fb] text-cyan-600",
+  rose: "bg-[#ffdede] text-red-500",
+  purple: "bg-[#f0e3ff] text-purple-600",
+} as const;
+
+const missionToneClasses = {
+  cream: "bg-[linear-gradient(145deg,_#fff6cc_0%,_#fffef6_100%)]",
+  lavender: "bg-[linear-gradient(145deg,_#f6f0ff_0%,_#fffaff_100%)] bg-[linear-gradient(145deg,_#f1e8ff_0%,_#fffaff_100%)]",
+  mint: "bg-[linear-gradient(145deg,_#ddfaee_0%,_#fafffd_100%)]",
+  peach: "bg-[linear-gradient(145deg,_#ffe6d7_0%,_#fff9f5_100%)]",
+  blue: "bg-[linear-gradient(145deg,#dff1ff_0%,#f7fcff_100%)]",
+} as const;
+
+
 const categoryIcons: Record<string, LucideIcon> = {
   history: Building2,
   nature: Leaf,
@@ -45,89 +65,89 @@ export default function HomePage() {
     : recommendedMissions.slice(0, 2);
   const navigate = useNavigate();
   return (
-    <section className="home-screen app-home-screen">
-      <header className="mobile-topbar home-main-header">
-        <div>
-          <img src={figmaAssets.mascot} alt="" />
-          <strong>Quespot</strong>
+    <section className="flex flex-col py-6 px-5 gap-3 p-[12px_16px_0] gap-4 min-h-[100%] [overflow-y:auto] p-[18px_16px_16px] flex-1 gap-[22px] min-h-0 p-[0_18px_22px] bg-[#f2f7ff]">
+      <header className="flex items-center justify-between min-h-[42px] min-h-14 m-[0_-18px] p-[0_22px] bg-white">
+        <div className="flex items-center gap-2">
+          <img className="w-[34px] h-[34px] object-contain" src={figmaAssets.mascot} alt="" />
+          <strong className="block text-[var(--primary)] text-[22px] font-black text-[var(--primary-soft)] text-2xl leading-none">Quespot</strong>
         </div>
-        <button className="notification-button" type="button" aria-label="알림">
+        <button className="relative grid w-9 h-9 place-items-center rounded-full bg-transparent text-[#b7c2d1]" type="button" aria-label="알림">
           <Bell size={19} strokeWidth={2.4} />
-          <span>3</span>
+          <span className="absolute right-0 top-[2px] grid w-[18px] h-[18px] place-items-center border-[2px_solid_#fff] rounded-full bg-red-500 text-white text-[10px] font-black">3</span>
         </button>
       </header>
 
-      <section className="home-hero-panel">
+      <section className="grid [grid-template-columns:minmax(0,_1fr)_152px] gap-2 items-center m-[0_-18px] p-[20px_22px_26px] bg-[linear-gradient(180deg,_#cdeeff_0%,_#e9f7ff_100%)] max-[380px]:[grid-template-columns:1fr_126px]">
         <div>
-          <span className="hello-pill">꿀법님 안녕하세요!</span>
-          <h1>
+          <span className="inline-flex items-center rounded-full p-[7px_14px] bg-[rgba(255,_255,_255,_0.86)] text-[var(--primary-soft)] text-xs font-black before:[content:''] before:w-[7px] before:h-[7px] before:mr-2 before:rounded-full before:bg-[var(--primary-soft)]">꿀법님 안녕하세요!</span>
+          <h1 className="m-0 text-[var(--navy)] text-[13px] leading-[1.38] m-[18px_0_10px] text-[var(--ink)] text-[26px] leading-[1.22] tracking-[0] bg-[linear-gradient(_180deg,_var(--ink)_0_48%,_var(--primary-soft)_48%_100%_)] [-webkit-background-clip:text] [background-clip:text] text-transparent">
             미션으로 떠나는
             <br />
             특별한 여행
           </h1>
-          <p>
+          <p className="m-[0_0_18px] text-[#718198] text-sm leading-[1.55]">
             Quespot과 함께 일상을
             <br />
             여행으로 바꿔보세요
           </p>
           <Button
-            className="hero-button"
+            className="w-fit min-h-10 rounded-[18px] p-[0_18px] bg-[var(--primary-soft)] text-[13px] [box-shadow:0_8px_16px_rgba(91,_181,_248,_0.28)]"
             icon={<ChevronRight size={16} strokeWidth={2.6} />}
             onClick={() => navigate(PATH.MISSION_PHOTO)}
           >
             미션 탐색
           </Button>
         </div>
-        <img src={figmaAssets.heroMascot} alt="Quespot 캐릭터" />
+        <img className="justify-self-[end] w-[158px] h-[158px] object-contain [filter:drop-shadow(0_18px_18px_rgba(43,_143,_219,_0.18))] max-[380px]:w-[126px] max-[380px]:h-[126px]" src={figmaAssets.heroMascot} alt="Quespot 캐릭터" />
       </section>
 
       <SearchInput placeholder="미션 · 장소 · 지역을 검색해보세요" />
 
-      <section className="home-stat-card" aria-label="활동 요약">
-        <article>
-          <strong>2개</strong>
-          <span>완료 미션</span>
+      <section className="grid [grid-template-columns:repeat(4,_minmax(0,_1fr))] overflow-hidden rounded-[18px] bg-white [box-shadow:0_2px_8px_rgba(8,_37,_95,_0.08)] px-1.5" aria-label="활동 요약">
+        <article className="grid gap-[5px] justify-items-center min-h-[70px] py-4 [border-right:1px_solid_#e8eff8] text-center last:[border-right:0]">
+          <strong className="text-[var(--primary-soft)] text-lg leading-none">2개</strong>
+          <span className="text-[#8b98aa] text-[10px] font-bold">완료 미션</span>
         </article>
-        <article>
-          <strong>350P</strong>
-          <span>누적 보상</span>
+        <article className="grid gap-[5px] justify-items-center min-h-[70px] py-4 [border-right:1px_solid_#e8eff8] text-center last:[border-right:0]">
+          <strong className="text-[var(--primary-soft)] text-lg leading-none">350P</strong>
+          <span className="text-[#8b98aa] text-[10px] font-bold">누적 보상</span>
         </article>
-        <article>
-          <strong>2개</strong>
-          <span>획득 배지</span>
+        <article className="grid gap-[5px] justify-items-center min-h-[70px] py-4 [border-right:1px_solid_#e8eff8] text-center last:[border-right:0]">
+          <strong className="text-[var(--primary-soft)] text-lg leading-none">2개</strong>
+          <span className="text-[#8b98aa] text-[10px] font-bold">획득 배지</span>
         </article>
-        <article>
-          <strong>2개</strong>
-          <span>스탬프</span>
+        <article className="grid gap-[5px] justify-items-center min-h-[70px] py-4 [border-right:1px_solid_#e8eff8] text-center last:[border-right:0]">
+          <strong className="text-[var(--primary-soft)] text-lg leading-none">2개</strong>
+          <span className="text-[#8b98aa] text-[10px] font-bold">스탬프</span>
         </article>
       </section>
 
-      <section className="home-section category-section">
-        <h2>카테고리</h2>
-        <div className="category-grid">
+      <section className="grid gap-3.5">
+        <h2 className="m-0 text-[var(--ink)] text-lg leading-tight tracking-[0]">카테고리</h2>
+        <div className="grid [grid-template-columns:repeat(4,_minmax(0,_1fr))] gap-2.5 max-[380px]:gap-2">
           {homeCategories.map((category) => {
             const Icon = categoryIcons[category.id] ?? Compass;
 
             return (
               <button
-                className={`category-card tone-${category.tone}`}
+                className="grid min-h-24 justify-items-center gap-2.5 rounded-[15px] border border-[#dce8f5] bg-white px-1.5 pb-3 pt-3.5 text-[var(--ink)] shadow-[0_2px_6px_rgba(8,37,95,0.11)]"
                 key={category.id}
                 type="button"
               >
-                <span>
+                <span className={`grid h-[50px] w-[50px] place-items-center rounded-[17px] ${categoryToneClasses[category.tone]}`}>
                   <Icon size={26} strokeWidth={2.3} />
                 </span>
-                <strong>{category.label}</strong>
+                <strong className="text-[#59677a] text-[11px] leading-tight text-center max-[380px]:text-[10px]">{category.label}</strong>
               </button>
             );
           })}
         </div>
       </section>
 
-      <section className="home-section recommended-section">
-        <div className="section-title-row">
-          <h2>추천 미션</h2>
-          <button
+      <section className="grid gap-3.5">
+        <div className="flex items-center justify-between">
+          <h2 className="m-0 text-[var(--ink)] text-lg leading-tight tracking-[0] m-0 text-[var(--navy)] text-lg inline-flex items-center gap-[5px]">추천 미션</h2>
+          <button className="bg-transparent text-[var(--primary)] text-xs font-black inline-flex items-center gap-[3px] text-[var(--primary-soft)] text-[13px]"
             onClick={() => setShowAllMissions((value) => !value)}
             type="button"
           >
@@ -136,28 +156,28 @@ export default function HomePage() {
           </button>
         </div>
         <div
-          className={`recommended-grid ${showAllMissions ? "is-expanded" : ""}`}
+          className={`grid [grid-template-columns:repeat(2,_minmax(0,_1fr))] gap-3 ${showAllMissions ? "" : ""}`}
         >
           {visibleMissions.map((mission) => (
             <article
-              className="mission-card"
+              className="overflow-hidden border-[1px_solid_#dce8f5] rounded-2xl bg-white [box-shadow:0_2px_8px_rgba(8,_37,_95,_0.09)] cursor-pointer"
               key={mission.id}
               onClick={() => navigate(PATH.MISSION_DETAIL)}
             >
-              <div className={`mission-visual tone-${mission.tone}`}>
-                <button
+              <div className={`relative grid min-h-[122px] place-items-center ${missionToneClasses[mission.tone]}`}>
+                <button className="absolute right-[10px] top-[10px] grid w-7 h-7 place-items-center rounded-full bg-[rgba(255,_255,_255,_0.85)] text-[#b8c3d2]"
                   onClick={(event) => event.stopPropagation()}
                   type="button"
                   aria-label={`${mission.title} 찜하기`}
                 >
                   <Heart size={15} strokeWidth={2.3} />
                 </button>
-                <span>{mission.visual}</span>
+                <span className="text-[44px] [filter:drop-shadow(0_10px_12px_rgba(8,_37,_95,_0.12))]">{mission.visual}</span>
               </div>
-              <div className="mission-card-body">
-                <span className="mission-chip">{mission.category}</span>
-                <strong>{mission.title}</strong>
-                <footer>
+              <div className="p-[12px_12px_14px]">
+                <span className="inline-flex rounded-full p-[5px_9px] bg-[#fff0c9] text-[#f59e0b] text-[11px] font-black">{mission.category}</span>
+                <strong className="block mt-[9px] text-[var(--ink)] text-sm leading-[1.35]">{mission.title}</strong>
+                <footer className="flex items-center justify-between mt-3 text-[#99a6b8] text-xs">
                   <span>
                     <MapPin size={12} strokeWidth={2.4} />
                     {mission.distance}
@@ -170,42 +190,42 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="home-section nearby-section">
-        <div className="section-title-row">
-          <h2>
+      <section className="grid gap-3.5">
+        <div className="flex items-center justify-between">
+          <h2 className="m-0 text-[var(--ink)] text-lg leading-tight tracking-[0] m-0 text-[var(--ink)] text-lg leading-tight tracking-[0] m-0 text-[var(--navy)] text-lg inline-flex items-center gap-[5px]">
             <MapPin size={15} fill="#ef4444" strokeWidth={2.2} />내 주변 스팟
           </h2>
-          <button onClick={() => navigate(PATH.MAP)} type="button">
+          <button className="bg-transparent text-[var(--primary)] text-xs font-black inline-flex items-center gap-[3px] text-[var(--primary-soft)] text-[13px]" onClick={() => navigate(PATH.MAP)} type="button">
             지도보기 <ChevronRight size={15} strokeWidth={2.6} />
           </button>
         </div>
-        <div className="spot-list">
+        <div className="grid gap-3">
           {nearbySpots.map((spot) => (
-            <article className={spot.done ? "is-done" : ""} key={spot.id}>
-              <span className="spot-icon">
+            <article className="grid grid-cols-[56px_minmax(0,1fr)_auto_34px] items-center gap-2.5 rounded-[18px] border border-[#dce8f5] bg-white px-3 py-2.5 shadow-[0_2px_8px_rgba(8,37,95,0.09)]" key={spot.id}>
+              <span className={`relative grid h-[50px] w-[50px] place-items-center rounded-[17px] ${spot.done ? "bg-[#e7fff4] text-[#14d98b]" : "bg-[#e9f5ff] text-[var(--primary-soft)]"}`}>
                 <MapPin size={22} strokeWidth={2.4} />
                 {spot.done ? (
                   <ClipboardCheck
-                    className="spot-check"
+                    className="absolute right-[-2px] top-[-7px] grid place-items-center border-[2px_solid_#fff] rounded-full bg-[#16d889] text-white"
                     size={15}
                     strokeWidth={2.5}
                   />
                 ) : null}
-                {spot.badge ? <b>{spot.badge}</b> : null}
+                {spot.badge ? <b className="absolute -right-0.5 -top-[7px] grid h-[22px] w-[22px] place-items-center rounded-full border-2 border-white bg-[var(--primary-soft)] text-[10px] font-black text-white">{spot.badge}</b> : null}
               </span>
-              <div className="spot-info">
-                <strong>{spot.name}</strong>
-                <p>
+              <div className="">
+                <strong className="block overflow-hidden text-[var(--ink)] text-base [text-overflow:ellipsis] whitespace-nowrap">{spot.name}</strong>
+                <p className="flex items-center gap-[9px] m-[7px_0_0] text-[#9aa6b8] text-xs">
                   {spot.distance}
-                  <i />
+                  <i className="w-[1px] h-2.5 bg-[#d9e2ee]" />
                   {spot.status === "완료" ? (
-                    <em>완료</em>
+                    <em className="text-[#16c77a] not-italic font-black">완료</em>
                   ) : (
                     `미션 ${spot.missionCount}개`
                   )}
                 </p>
               </div>
-              <span className="spot-rating">
+              <span className="inline-flex items-center gap-[3px] text-[#697789] text-xs font-extrabold">
                 <Star size={12} fill="#f5b01a" strokeWidth={0} />
                 {spot.rating}
               </span>
@@ -225,11 +245,11 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="bonus-banner">
-        <img src={figmaAssets.mascot} alt="" />
+      <section className="grid min-h-24 grid-cols-[82px_minmax(0,1fr)] items-center gap-3 overflow-hidden rounded-3xl bg-[radial-gradient(circle_at_right_40%,rgba(255,255,255,0.13)_0_62px,transparent_63px),linear-gradient(135deg,#55b8fb_0%,#63bded_100%)] px-5 py-[18px] text-white">
+        <img className="h-[72px] w-[72px] object-contain" src={figmaAssets.mascot} alt="" />
         <div>
-          <strong>소도시 미션에서 추가 보너스 포인트!</strong>
-          <p>인구감소지역 미션 완료 시 +20% 보너스</p>
+          <strong className="block text-base leading-snug">소도시 미션에서 추가 보너스 포인트!</strong>
+          <p className="mb-0 mt-1.5 text-[11px] text-white/80">인구감소지역 미션 완료 시 +20% 보너스</p>
         </div>
       </section>
     </section>
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 1315e43..2f6dd85 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -6,27 +6,27 @@ import { PATH } from "@/routes/paths";
 export default function LandingPage() {
   const navigate = useNavigate();
   return (
-    <main className="landing-page">
-      <header className="landing-header">
-        <strong>Quespot</strong>
-        <nav aria-label="주요 메뉴">
+    <main className="w-[min(100%,_980px)] overflow-hidden border-[1px_solid_var(--border)] rounded-2xl bg-[var(--surface)] [box-shadow:0_8px_32px_rgba(22,_115,_248,_0.12)]">
+      <header className="flex items-center justify-between min-h-[68px] p-[0_34px] [border-bottom:1px_solid_#dbe8f8] max-[820px]:gap-4 max-[820px]:p-[0_20px]">
+        <strong className="text-[var(--primary)] text-[22px] font-black">Quespot</strong>
+        <nav className="flex gap-[30px] text-[var(--navy)] text-sm font-bold max-[820px]:hidden" aria-label="주요 메뉴">
           <a>홈</a>
           <a>코스</a>
           <a>미션</a>
           <a>아카이브</a>
           <a>마이페이지</a>
         </nav>
-        <Button className="landing-start">시작하기</Button>
+        <Button className="w-[auto] min-w-[78px] h-[46px] p-[0_16px]">시작하기</Button>
       </header>
 
-      <section className="landing-hero">
+      <section className="flex items-center justify-between min-h-[280px] p-[40px_58px] bg-[var(--sky-200)] max-[820px]:py-7 px-6">
         <div>
-          <h1>
+          <h1 className="m-0 text-[var(--navy)] text-[44px] leading-[1.2] tracking-[0] max-[820px]:text-[32px]">
             미션으로 떠나는
             <br />
             특별한 여행
           </h1>
-          <p>
+          <p className="m-[20px_0_28px] text-[rgba(8,_37,_95,_0.72)] text-base leading-[1.65]">
             전국 방방곡곡의 숨은 명소를 발견하고
             <br />
             미션을 수행하며 보상을 받아보세요.
@@ -34,19 +34,19 @@ export default function LandingPage() {
           <Button onClick={() => navigate(PATH.LOGIN)}>지금 시작하기 →</Button>
         </div>
         <img
-          className="hero-mascot"
+          className="w-[200px] h-[200px] object-contain bg-white max-[820px]:w-[110px] max-[820px]:h-[110px]"
           src={figmaAssets.heroMascot}
           alt="Quespot 캐릭터"
         />
       </section>
 
-      <section className="course-section">
-        <h2>추천 미션 코스</h2>
-        <div className="course-grid">
+      <section className="p-[28px_44px_34px]">
+        <h2 className="m-[0_0_18px] text-[var(--navy)] text-xl">추천 미션 코스</h2>
+        <div className="grid [grid-template-columns:repeat(4,_minmax(0,_1fr))] gap-[18px] max-[820px]:[grid-template-columns:1fr]">
           {courseCards.map((course) => (
-            <article className="course-card" key={course}>
+            <article className="overflow-hidden min-h-[122px] border-[1px_solid_var(--border)] rounded-[14px] bg-white" key={course}>
               <WireImage label="" />
-              <strong>{course}</strong>
+              <strong className="block p-3 text-[var(--navy)] text-xs">{course}</strong>
             </article>
           ))}
         </div>
@@ -54,3 +54,4 @@ export default function LandingPage() {
     </main>
   );
 }
+
diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index e29f1f0..667d585 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -19,19 +19,19 @@ const mapSpots = [
     name: "인사동 전통찻집",
     area: "종로구 인사동",
     point: "240P",
-    className: "pin-a",
+    className: "left-[58px] top-[78px]",
   },
   {
     name: "북촌 골목 산책",
     area: "북촌 한옥마을",
     point: "180P",
-    className: "pin-b",
+    className: "right-[76px] top-[104px] bg-[#f5b01a] bg-[rgba(245,_176,_26,_0.16)] text-[#b77900]",
   },
   {
     name: "청계천 포토존",
     area: "청계광장",
     point: "160P",
-    className: "pin-c",
+    className: "left-[172px] bottom-[72px] bg-[#22c55e] bg-[rgba(34,_197,_94,_0.14)] text-[#138a3d]",
   },
 ];
 
@@ -43,56 +43,56 @@ export default function MapPage() {
         title="미션 지도"
         onBack={() => navigate(-1)}
         action={
-          <button className="hint-action" type="button">
+          <button className="inline-flex items-center gap-1 bg-transparent text-[var(--primary-soft)] text-xs font-bold" type="button">
             <LocateFixed size={14} strokeWidth={2.5} />
             현재 위치
           </button>
         }
       />
 
-      <section className="map-screen">
-        <header className="map-search-row">
-          <label>
+      <section className="flex flex-1 flex-col gap-3.5 [overflow-y:auto] p-4">
+        <header className="grid [grid-template-columns:1fr_42px] gap-2.5">
+          <label className="flex items-center min-h-[46px] border-[1px_solid_var(--sky-100)] rounded-[18px] bg-white text-[var(--muted-2)] [box-shadow:0_1px_5px_rgba(8,_37,_95,_0.08)] gap-2 p-[0_14px]">
             <Search size={16} strokeWidth={2.4} />
-            <input placeholder="지역, 명소, 미션 검색" />
+            <input className="w-full border-0 bg-transparent text-[var(--navy)] text-[13px] outline-none" placeholder="지역, 명소, 미션 검색" />
           </label>
-          <button type="button" aria-label="알림">
+          <button className="flex items-center min-h-[46px] border-[1px_solid_var(--sky-100)] rounded-[18px] bg-white text-[var(--muted-2)] [box-shadow:0_1px_5px_rgba(8,_37,_95,_0.08)] justify-center text-[var(--navy)]" type="button" aria-label="알림">
             <Bell size={18} strokeWidth={2.4} />
           </button>
         </header>
 
-        <section className="mission-map" aria-label="종로 주변 미션 지도">
-          <div className="map-grid-lines" />
-          <div className="map-route route-one" />
-          <div className="map-route route-two" />
-          <span className="map-pin pin-a">
+        <section className="relative min-h-[300px] overflow-hidden border-[1px_solid_#cce8ff] rounded-[26px] bg-[linear-gradient(_28deg,_rgba(184,_216,_184,_0.52)_0_22%,_transparent_22%_100%_),_linear-gradient(145deg,_#dff3ff_0%,_#f5fbff_55%,_#d2edff_100%)] [box-shadow:inset_0_0_0_1px_rgba(255,_255,_255,_0.62),_0_8px_26px_rgba(43,_143,_219,_0.14)]" aria-label="종로 주변 미션 지도">
+          <div className="absolute [inset:0] bg-[linear-gradient(90deg,_rgba(8,_37,_95,_0.06)_1px,_transparent_1px),_linear-gradient(0deg,_rgba(8,_37,_95,_0.06)_1px,_transparent_1px)] bg-size-[54px_54px] [mask-image:linear-gradient(_to_bottom,_rgba(0,_0,_0,_0.4),_rgba(0,_0,_0,_0.08)_)]" />
+          <div className="absolute h-[92px] border-[8px_solid_rgba(22,_115,_248,_0.2)] [border-right:0] [border-bottom:0] rounded-[36px_0_0_0] right-[34px] bottom-[82px] w-[230px] [transform:rotate(-12deg)]" />
+          <div className="absolute h-[92px] border-[8px_solid_rgba(22,_115,_248,_0.2)] [border-right:0] [border-bottom:0] rounded-[36px_0_0_0] left-[42px] top-[72px] w-[190px] border-[rgba(91,_181,_248,_0.34)] [transform:rotate(162deg)]" />
+          <span className="absolute grid place-items-center rounded-full [box-shadow:0_8px_18px_rgba(8,_37,_95,_0.16)] w-[42px] h-[42px] bg-[var(--primary)] text-white left-[58px] top-[78px]">
             <MapPin size={18} fill="currentColor" strokeWidth={2.2} />
           </span>
-          <span className="map-pin pin-b">
+          <span className="absolute grid place-items-center rounded-full [box-shadow:0_8px_18px_rgba(8,_37,_95,_0.16)] w-[42px] h-[42px] bg-[var(--primary)] text-white right-[76px] top-[104px] bg-[#f5b01a] bg-[rgba(245,_176,_26,_0.16)] text-[#b77900]">
             <Target size={17} strokeWidth={2.6} />
           </span>
-          <span className="map-pin pin-c">
+          <span className="absolute grid place-items-center rounded-full [box-shadow:0_8px_18px_rgba(8,_37,_95,_0.16)] w-[42px] h-[42px] bg-[var(--primary)] text-white left-[172px] bottom-[72px] bg-[#22c55e] bg-[rgba(34,_197,_94,_0.14)] text-[#138a3d]">
             <Star size={17} fill="currentColor" strokeWidth={2.2} />
           </span>
-          <div className="current-location">
+          <div className="absolute grid place-items-center rounded-full [box-shadow:0_8px_18px_rgba(8,_37,_95,_0.16)] right-[38px] bottom-[34px] w-12 h-12 border-[5px_solid_rgba(255,_255,_255,_0.86)] bg-[var(--sky-300)] text-[var(--primary)]">
             <Crosshair size={18} strokeWidth={2.5} />
           </div>
-          <article className="map-floating-card">
+          <article className="absolute left-[16px] right-[16px] bottom-[16px] border-[1px_solid_rgba(255,_255,_255,_0.76)] rounded-[20px] p-3.5 bg-[rgba(255,_255,_255,_0.9)] [backdrop-filter:blur(12px)] [box-shadow:0_8px_24px_rgba(8,_37,_95,_0.12)]">
             <LocationBadge>가까운 미션</LocationBadge>
-            <strong>인사동 전통찻집</strong>
-            <p>현재 위치에서 도보 8분</p>
+            <strong className="block mt-2 text-[var(--navy)] text-[17px]">인사동 전통찻집</strong>
+            <p className="m-[4px_0_0] text-[var(--muted)] text-xs font-bold">현재 위치에서 도보 8분</p>
           </article>
         </section>
 
-        <section className="nearby-panel">
-          <div className="section-title-row">
-            <h2>근처 미션</h2>
-            <span>3개 발견</span>
+        <section className="grid gap-3">
+          <div className="flex items-center justify-between">
+            <h2 className="m-0 text-[var(--navy)] text-lg inline-flex items-center gap-[5px]">근처 미션</h2>
+            <span className="text-[var(--primary)] text-xs font-black">3개 발견</span>
           </div>
-          <div className="nearby-list">
+          <div className="grid gap-2.5">
             {mapSpots.map((spot, index) => (
-              <article key={spot.name}>
-                <span className={`nearby-icon ${spot.className}`}>
+              <article className="grid [grid-template-columns:44px_minmax(0,_1fr)_auto] gap-3 items-center border-[1px_solid_var(--sky-100)] rounded-[18px] p-3 bg-white [box-shadow:0_1px_5px_rgba(8,_37,_95,_0.08)]" key={spot.name}>
+                <span className={`grid w-11 h-11 place-items-center rounded-2xl bg-[var(--sky-100)] text-[var(--primary)] ${spot.className}`}>
                   {index === 0 ? (
                     <MapPin size={18} strokeWidth={2.5} />
                   ) : index === 1 ? (
@@ -102,17 +102,17 @@ export default function MapPage() {
                   )}
                 </span>
                 <div>
-                  <strong>{spot.name}</strong>
-                  <small>{spot.area}</small>
+                  <strong className="block overflow-hidden text-[var(--navy)] text-sm [text-overflow:ellipsis] whitespace-nowrap">{spot.name}</strong>
+                  <small className="block mt-[3px] text-[var(--muted)] text-[11px]">{spot.area}</small>
                 </div>
-                <em>{spot.point}</em>
+                <em className="rounded-full p-[5px_8px] bg-[var(--sky-100)] text-[var(--primary)] text-[11px] not-italic font-black">{spot.point}</em>
               </article>
             ))}
           </div>
         </section>
 
         <Button
-          className="home-main-cta"
+          className="mt-0.5"
           icon={<Navigation size={18} strokeWidth={2.4} />}
           onClick={() => navigate(PATH.MISSION_PHOTO)}
         >
@@ -122,3 +122,4 @@ export default function MapPage() {
     </>
   );
 }
+
diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx
index 4d7b4b3..800f334 100644
--- a/src/pages/MyPage.tsx
+++ b/src/pages/MyPage.tsx
@@ -8,130 +8,125 @@ import {
   Star,
   Trophy,
 } from "lucide-react";
-import { DeviceFrame } from "../components/DeviceFrame";
 import { figmaAssets } from "../data/quespot";
 import { useNavigate } from "react-router-dom";
 import { PATH } from "@/routes/paths";
 
 const styleTags = ["🏯 역사·문화", "📸 사진 여행", "🍲 맛집 탐방", "🌿 자연"];
 
+const panelClass =
+  "rounded-[20px] border border-[#dce8f5] bg-white p-[18px] shadow-[0_2px_8px_rgba(8,37,95,0.08)]";
+const panelTitleClass =
+  "mb-[15px] flex items-center gap-1.5 text-base text-[var(--ink)]";
+
 export default function MyPage() {
   const navigate = useNavigate();
 
   return (
-    <>
-      {" "}
-      <section className="my-screen">
-        <header className="mobile-topbar my-main-header">
-          <div>
-            <img src={figmaAssets.mascot} alt="" />
-            <strong>Quespot</strong>
-          </div>
+    <section className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-[#f2f7ff]">
+      <header className="flex min-h-[66px] shrink-0 items-center justify-between bg-white px-[30px]">
+        <div className="flex items-center gap-2">
+          <img className="h-9 w-9 object-contain" src={figmaAssets.mascot} alt="" />
+          <strong className="text-2xl font-black text-[var(--primary-soft)]">Quespot</strong>
+        </div>
+        <button
+          className="relative grid h-9 w-9 place-items-center rounded-full bg-transparent text-[#b7c2d1]"
+          type="button"
+          aria-label="알림"
+        >
+          <Bell size={19} strokeWidth={2.4} />
+          <span className="absolute right-0 top-0.5 grid h-[18px] w-[18px] place-items-center rounded-full border-2 border-white bg-red-500 text-[10px] font-black text-white">
+            3
+          </span>
+        </button>
+      </header>
+
+      <section className="relative grid min-h-[350px] justify-items-center overflow-hidden bg-[linear-gradient(180deg,#cfefff_0%,#e7f6ff_100%)] px-6 pb-[30px] pt-11 text-center after:absolute after:right-[-64px] after:top-0 after:h-[190px] after:w-[190px] after:rounded-full after:bg-[rgba(8,37,95,0.08)] after:content-['']">
+        <div className="relative z-10 grid h-28 w-28 place-items-center rounded-full bg-white shadow-[0_8px_20px_rgba(8,37,95,0.14)]">
+          <img className="h-[86px] w-[86px] object-contain" src={figmaAssets.mascot} alt="퀘스티" />
           <button
-            className="notification-button"
+            className="absolute -right-1 bottom-2 grid h-[34px] w-[34px] place-items-center rounded-full bg-[var(--primary-soft)] text-white shadow-[0_6px_12px_rgba(91,181,248,0.28)]"
             type="button"
-            aria-label="알림"
+            aria-label="프로필 편집"
           >
-            <Bell size={19} strokeWidth={2.4} />
-            <span>3</span>
+            ✏️
           </button>
-        </header>
-
-        <section className="profile-hero">
-          <div className="profile-avatar">
-            <img src={figmaAssets.mascot} alt="퀘스티" />
-            <button type="button" aria-label="프로필 편집">
-              ✏️
-            </button>
-          </div>
-          <h1>Quespot 탐험가</h1>
-          <p>@quespotter_001</p>
-          <div className="profile-stats">
-            <article>
-              <strong>2</strong>
-              <span>완료 미션</span>
+        </div>
+        <h1 className="z-10 mb-1 mt-[22px] text-2xl font-bold leading-tight text-[var(--ink)]">
+          Quespot 탐험가
+        </h1>
+        <p className="z-10 m-0 text-[15px] text-[#9aa6b8]">@quespotter_001</p>
+        <div className="z-10 mt-[26px] grid w-[250px] grid-cols-3">
+          {[['2', '완료 미션'], ['1,240', '포인트'], ['2', '배지']].map(([value, label]) => (
+            <article className="grid gap-[7px]" key={label}>
+              <strong className="text-2xl leading-none text-[var(--primary-soft)]">{value}</strong>
+              <span className="text-xs font-extrabold text-[#9aa6b8]">{label}</span>
             </article>
-            <article>
-              <strong>1,240</strong>
-              <span>포인트</span>
-            </article>
-            <article>
-              <strong>2</strong>
-              <span>배지</span>
-            </article>
-          </div>
-        </section>
+          ))}
+        </div>
+      </section>
 
-        <section className="my-content-stack">
-          <button
-            className="questy-promo-card"
-            onClick={() => navigate(PATH.QUESTY_CUSTOMIZE)}
-            type="button"
-          >
-            <img src={figmaAssets.mascot} alt="퀘스티" />
-            <div>
-              <strong>마스코트 꾸미기</strong>
-              <p>포인트로 아이템을 구매하고 나만의 Quespot을 만들어요</p>
-              <span>
-                <b>3개 보유</b>
-                <em>전설 1개</em>
-              </span>
-            </div>
-            <ChevronRight size={20} strokeWidth={2.5} />
-          </button>
+      <section className="grid gap-4 px-[22px] pb-6 pt-7">
+        <button
+          className="grid min-h-32 grid-cols-[86px_minmax(0,1fr)_22px] items-center gap-3.5 rounded-[20px] border border-[#cde9ff] bg-white p-[18px] text-left text-[var(--ink)] shadow-[0_2px_8px_rgba(8,37,95,0.11)]"
+          onClick={() => navigate(PATH.QUESTY_CUSTOMIZE)}
+          type="button"
+        >
+          <img className="h-[76px] w-[76px] animate-[questyFloat_3.2s_ease-in-out_infinite] object-contain" src={figmaAssets.mascot} alt="퀘스티" />
+          <div>
+            <strong className="block text-lg leading-tight">마스코트 꾸미기</strong>
+            <p className="mb-2.5 mt-1.5 text-xs leading-snug text-[#9aa6b8]">
+              포인트로 아이템을 구매하고 나만의 Quespot을 만들어요
+            </p>
+            <span className="flex gap-[7px]">
+              <b className="rounded-full bg-[var(--primary-soft)] px-2.5 py-1.5 text-xs font-black text-white">3개 보유</b>
+              <em className="rounded-full bg-[#fff0c9] px-2.5 py-1.5 text-xs font-black not-italic text-[#ea8a00]">전설 1개</em>
+            </span>
+          </div>
+          <ChevronRight className="text-[#c8e8ff]" size={20} strokeWidth={2.5} />
+        </button>
 
-          <section className="my-quick-grid" aria-label="내 활동 바로가기">
-            <button type="button">
-              <Heart size={28} fill="#ef4444" strokeWidth={0} />
-              <strong>좋아요</strong>
+        <section className="grid grid-cols-3 gap-3" aria-label="내 활동 바로가기">
+          {[
+            { icon: <Heart size={28} fill="#ef4444" strokeWidth={0} />, label: "좋아요" },
+            { icon: <MapPin size={30} strokeWidth={2.4} />, label: "저장 장소" },
+            { icon: <Archive size={29} strokeWidth={2.3} />, label: "아카이브" },
+          ].map(({ icon, label }) => (
+            <button className="grid min-h-[116px] justify-items-center gap-2.5 rounded-[18px] border border-[#dce8f5] bg-white px-1.5 pb-[18px] pt-6 text-[#7d8794] shadow-[0_2px_8px_rgba(8,37,95,0.1)]" type="button" key={label}>
+              {icon}
+              <strong className="text-sm">{label}</strong>
             </button>
-            <button type="button">
-              <MapPin size={30} strokeWidth={2.4} />
-              <strong>저장 장소</strong>
-            </button>
-            <button type="button">
-              <Archive size={29} strokeWidth={2.3} />
-              <strong>아카이브</strong>
-            </button>
-          </section>
+          ))}
+        </section>
 
-          <section className="my-panel">
-            <h2>
-              <Plane size={17} strokeWidth={2.5} />내 여행 스타일
-            </h2>
-            <div className="style-tag-row">
-              {styleTags.map((tag) => (
-                <span key={tag}>{tag}</span>
-              ))}
-            </div>
-          </section>
+        <section className={panelClass}>
+          <h2 className={panelTitleClass}><Plane size={17} strokeWidth={2.5} />내 여행 스타일</h2>
+          <div className="flex flex-wrap gap-2.5">
+            {styleTags.map((tag) => (
+              <span className="rounded-full bg-[var(--primary-soft)] px-3.5 py-2.5 text-[13px] font-black text-white" key={tag}>{tag}</span>
+            ))}
+          </div>
+        </section>
 
-          <section className="my-panel progress-panel">
-            <h2>
-              <Trophy size={17} strokeWidth={2.5} />
-              달성 현황
-            </h2>
-            <div>
-              <span>미션 완료</span>
-              <strong>2 / 20</strong>
-            </div>
-            <progress max={20} value={2} />
-            <div>
-              <span>획득 배지</span>
-              <strong>2 / 12</strong>
-            </div>
-            <progress max={12} value={2} />
-          </section>
+        <section className={`${panelClass} grid gap-[11px]`}>
+          <h2 className={panelTitleClass}><Trophy size={17} strokeWidth={2.5} />달성 현황</h2>
+          <div className="flex items-center justify-between text-[13px] font-extrabold text-[#8a98aa]">
+            <span>미션 완료</span><strong className="text-base text-[var(--ink)]">2 / 20</strong>
+          </div>
+          <progress className="h-2.5 w-full overflow-hidden rounded-full border-0 bg-[var(--sky-100)] [&::-webkit-progress-bar]:bg-[var(--sky-100)] [&::-webkit-progress-value]:rounded-[inherit] [&::-webkit-progress-value]:bg-[var(--primary-soft)]" max={20} value={2} />
+          <div className="flex items-center justify-between text-[13px] font-extrabold text-[#8a98aa]">
+            <span>획득 배지</span><strong className="text-base text-[var(--ink)]">2 / 12</strong>
+          </div>
+          <progress className="h-2.5 w-full overflow-hidden rounded-full border-0 bg-[var(--sky-100)] [&::-webkit-progress-bar]:bg-[var(--sky-100)] [&::-webkit-progress-value]:rounded-[inherit] [&::-webkit-progress-value]:bg-[var(--primary-soft)]" max={12} value={2} />
+        </section>
 
-          <section className="my-panel review-panel">
-            <h2>
-              <Star size={17} fill="#f5b01a" strokeWidth={0} />
-              최근 기록
-            </h2>
-            <p>인사동 전통찻집에서 “따뜻함” 감상을 남겼어요.</p>
-          </section>
+        <section className={panelClass}>
+          <h2 className={panelTitleClass}><Star size={17} fill="#f5b01a" strokeWidth={0} />최근 기록</h2>
+          <p className="m-0 text-[13px] leading-relaxed text-[#65758b]">인사동 전통찻집에서 “따뜻함” 감상을 남겼어요.</p>
         </section>
       </section>
-    </>
+    </section>
   );
 }
+
+
diff --git a/src/pages/QuestyCustomizePage.tsx b/src/pages/QuestyCustomizePage.tsx
index 1f9203f..dd81a34 100644
--- a/src/pages/QuestyCustomizePage.tsx
+++ b/src/pages/QuestyCustomizePage.tsx
@@ -24,19 +24,19 @@ export default function QuestyCustomizePage() {
   const navigate = useNavigate();
   return (
     <>
-      <section className="questy-screen">
-        <header className="mobile-topbar questy-logo-header">
-          <div>
-            <img src={figmaAssets.mascot} alt="" />
-            <strong>Quespot</strong>
+      <section className="flex flex-1 flex-col min-h-0 [overflow-y:auto] bg-[#f2f7ff] bg-[#eef6ff]">
+        <header className="flex items-center justify-between min-h-[42px] shrink-0 min-h-[66px] p-[0_30px] bg-white min-h-16">
+          <div className="flex items-center gap-[9px]">
+            <img className="w-[35px] h-[35px] object-contain" src={figmaAssets.mascot} alt="" />
+            <strong className="block text-[var(--primary)] text-[22px] font-black text-[var(--primary-soft)] text-[25px]">Quespot</strong>
           </div>
           <button
-            className="notification-button"
+            className="relative grid w-9 h-9 place-items-center rounded-full bg-transparent text-[#b7c2d1]"
             type="button"
             aria-label="알림"
           >
             <Bell size={19} strokeWidth={2.4} />
-            <span>3</span>
+            <span className="absolute right-0 top-[2px] grid w-[18px] h-[18px] place-items-center border-[2px_solid_#fff] rounded-full bg-red-500 text-white text-[10px] font-black">3</span>
           </button>
         </header>
 
@@ -44,50 +44,50 @@ export default function QuestyCustomizePage() {
           title="마스코트 꾸미기"
           onBack={() => navigate(-1)}
           action={
-            <span className="point-pill">
+            <span className="inline-flex items-center gap-1.5 rounded-full p-[9px_14px] bg-[var(--sky-100)] text-[var(--primary-soft)] text-sm font-black">
               <Zap size={14} fill="currentColor" strokeWidth={0} />
               1,240P
             </span>
           }
         />
 
-        <section className="questy-preview">
-          <span className="sparkle sparkle-a">✦</span>
-          <span className="sparkle sparkle-b">✦</span>
-          <div className="questy-avatar">
+        <section className="relative grid justify-items-center min-h-[344px] p-[28px_20px_24px] bg-[linear-gradient(180deg,_#caedff_0%,_#e3f5ff_100%)]">
+          <span className="absolute text-[#fcd34d] text-xl [animation:sparkleBlink_1.8s_ease-in-out_infinite] left-[54px] top-[36px]">✦</span>
+          <span className="absolute text-[#fcd34d] text-xl [animation:sparkleBlink_1.8s_ease-in-out_infinite] right-[74px] top-[52px] [animation-delay:0.5s]">✦</span>
+          <div className="relative grid w-[204px] h-[204px] place-items-center bg-[rgba(255,_255,_255,_0.72)]">
             <img
-              className="questy-avatar-img"
+              className="w-[176px] h-[176px] object-contain [animation:questyDance_2.4s_ease-in-out_infinite] [filter:drop-shadow(0_14px_16px_rgba(8,_37,_95,_0.16))]"
               src={figmaAssets.mascot}
               alt="움직이는 퀘스티"
             />
-            <span className="questy-hat">🎩</span>
-            <span className="questy-glasses">
+            <span className="absolute z-20 pointer-events-none left-[55px] top-[5px] text-[40px] [transform:rotate(-8deg)] [animation:accessoryWiggle_2.4s_ease-in-out_infinite]">🎩</span>
+            <span className="absolute z-20 pointer-events-none left-[76px] top-[76px] text-[#111827] opacity-90">
               <Glasses size={34} strokeWidth={3} />
             </span>
-            <span className="questy-scarf">🧣</span>
-            <span className="questy-bag">🧳</span>
-            <b>꿀</b>
+            <span className="absolute z-20 pointer-events-none left-[50px] top-[98px] text-[35px] [transform:rotate(-28deg)]">🧣</span>
+            <span className="absolute z-20 pointer-events-none left-[24px] bottom-[18px] text-4xl [transform:rotate(-12deg)]">🧳</span>
+            <b className="absolute right-[-17px] top-[-16px] grid w-12 h-12 place-items-center border-[5px_solid_rgba(28,_28,_58,_0.42)] rounded-full bg-[#8e36ff] text-white text-lg [box-shadow:0_5px_10px_rgba(28,_28,_58,_0.32)]">꿀</b>
           </div>
-          <div className="equipped-row">
+          <div className="flex [flex-wrap:wrap] justify-center gap-[9px] mt-[18px] px-2.5">
             {equippedItems.map((item) => (
-              <span key={item}>{item}</span>
+              <span className="rounded-full py-2 bg-white text-[var(--primary-soft)] text-xs font-black" key={item}>{item}</span>
             ))}
           </div>
-          <p>아이템을 탭해서 장착/해제</p>
+          <p className="m-[14px_0_0] text-[#9aa6b8] text-[13px]">아이템을 탭해서 장착/해제</p>
         </section>
 
-        <section className="closet-panel">
-          <div className="closet-tabs">
-            <button className="is-selected" type="button">
+        <section className="grid gap-4 p-[22px]">
+          <div className="grid [grid-template-columns:1fr_1fr] rounded-[22px] p-1.5 bg-[#e6f4ff]">
+            <button className="bg-[var(--primary)] text-white bg-white text-[var(--primary-soft)] [box-shadow:0_2px_8px_rgba(8,_37,_95,_0.08)] bg-[var(--primary-soft)] min-h-11 rounded-[18px] bg-transparent text-[#9aa6b8] font-black" type="button">
               👕 내 옷장
             </button>
-            <button type="button">🛍️ 아이템 샵</button>
+            <button className="min-h-11 rounded-[18px] bg-transparent text-[#9aa6b8] font-black" type="button">🛍️ 아이템 샵</button>
           </div>
-          <div className="closet-filters">
+          <div className="flex gap-2 [overflow-x:auto]">
             {["모두", "모자", "액세서리", "의상", "아이템"].map(
               (filter, index) => (
                 <button
-                  className={index === 0 ? "is-selected" : ""}
+                  className={index === 0 ? "bg-[var(--primary)] text-white bg-white text-[var(--primary-soft)] [box-shadow:0_2px_8px_rgba(8,_37,_95,_0.08)] bg-[var(--primary-soft)]" : ""}
                   key={filter}
                   type="button"
                 >
@@ -96,23 +96,23 @@ export default function QuestyCustomizePage() {
               ),
             )}
           </div>
-          <p className="closet-count">
-            보유 중인 아이템 <b>4개</b>
+          <p className="m-0 text-[#8a98aa] text-[13px] font-bold">
+            보유 중인 아이템 <b className="text-[var(--ink)]">4개</b>
           </p>
-          <div className="closet-grid">
+          <div className="grid [grid-template-columns:repeat(4,_minmax(0,_1fr))] gap-3.5 max-[380px]:[grid-template-columns:repeat(2,_minmax(0,_1fr))]">
             {closetItems.map((item) => (
-              <article key={item.name}>
+              <article className="grid justify-items-center border-[2px_solid_var(--primary-soft)] rounded-[17px] p-[18px_8px_12px] bg-white text-center" key={item.name}>
                 <span>{item.icon}</span>
-                <strong>{item.name}</strong>
-                <small>{item.type}</small>
-                <button type="button">
+                <strong className="mt-3 text-[var(--ink)] text-xs leading-[1.3]">{item.name}</strong>
+                <small className="mt-2 text-[#9aa6b8] text-[11px] font-extrabold">{item.type}</small>
+                <button className="mt-[9px] rounded-full p-[7px_10px] bg-[var(--primary-soft)] text-white text-[11px] font-black" type="button">
                   {item.equipped ? "장착 중" : "장착"}
                 </button>
               </article>
             ))}
           </div>
-          <div className="locked-item-row">
-            <span>
+          <div className="flex items-center justify-between rounded-[18px] py-3.5 px-4 bg-white text-[#8a98aa] text-xs font-extrabold">
+            <span className="inline-flex items-center gap-[7px]">
               <Lock size={16} strokeWidth={2.5} />
               레어 아이템은 미션 배지로 해금돼요
             </span>
@@ -123,3 +123,4 @@ export default function QuestyCustomizePage() {
     </>
   );
 }
+
diff --git a/src/pages/mission/MissionDetailPage.tsx b/src/pages/mission/MissionDetailPage.tsx
index 08fd29d..19f5688 100644
--- a/src/pages/mission/MissionDetailPage.tsx
+++ b/src/pages/mission/MissionDetailPage.tsx
@@ -20,6 +20,15 @@ import { recommendedMissions } from "../../data/quespot";
 import { useNavigate } from "react-router-dom";
 import { PATH } from "@/routes/paths";
 
+const missionToneClasses = {
+  cream: "bg-[linear-gradient(145deg,_#fff6cc_0%,_#fffef6_100%)]",
+  lavender: "bg-[linear-gradient(145deg,_#f6f0ff_0%,_#fffaff_100%)] bg-[linear-gradient(145deg,_#f1e8ff_0%,_#fffaff_100%)]",
+  mint: "bg-[linear-gradient(145deg,_#ddfaee_0%,_#fafffd_100%)]",
+  peach: "bg-[linear-gradient(145deg,_#ffe6d7_0%,_#fff9f5_100%)]",
+  blue: "bg-[linear-gradient(145deg,#dff1ff_0%,#f7fcff_100%)]",
+} as const;
+
+
 export default function MissionDetailPage() {
   const navigate = useNavigate();
   const mission = recommendedMissions[1];
@@ -29,87 +38,87 @@ export default function MissionDetailPage() {
         title="미션 상세"
         onBack={() => navigate(-1)}
         action={
-          <div className="mission-detail-actions">
-            <button type="button" aria-label="공유하기">
+          <div className="inline-flex gap-2">
+            <button className="grid w-8 h-8 place-items-center rounded-full bg-[var(--sky-100)] text-[var(--primary-soft)]" type="button" aria-label="공유하기">
               <Share2 size={16} strokeWidth={2.4} />
             </button>
-            <button type="button" aria-label="찜하기">
+            <button className="grid w-8 h-8 place-items-center rounded-full bg-[var(--sky-100)] text-[var(--primary-soft)]" type="button" aria-label="찜하기">
               <Heart size={16} strokeWidth={2.4} />
             </button>
           </div>
         }
       />
 
-      <section className="mission-detail-screen">
-        <section className={`mission-detail-hero tone-${mission.tone}`}>
+      <section className="flex flex-1 flex-col gap-3.5 [overflow-y:auto] p-[16px_16px_22px] bg-[#f2f7ff]">
+        <section className={`grid [grid-template-columns:minmax(0,_1fr)_118px] items-center min-h-[190px] overflow-hidden rounded-[26px] p-[22px_18px] [box-shadow:0_12px_24px_rgba(8,_37,_95,_0.08)] ${missionToneClasses[mission.tone]}`}>
           <div>
             <LocationBadge>{mission.category}</LocationBadge>
-            <h1>{mission.title}</h1>
-            <p>{mission.place}</p>
+            <h1 className="m-[12px_0_8px] text-[var(--ink)] text-[25px] leading-[1.26] tracking-[0]">{mission.title}</h1>
+            <p className="m-0 text-[#64758d] text-[13px] font-bold">{mission.place}</p>
           </div>
-          <span>{mission.visual}</span>
+          <span className="justify-self-[center] text-[76px] [filter:drop-shadow(0_16px_18px_rgba(8,_37,_95,_0.12))]">{mission.visual}</span>
         </section>
 
-        <section className="detail-reward-card">
-          <div>
+        <section className="grid [grid-template-columns:repeat(3,_minmax(0,_1fr))] overflow-hidden rounded-[20px] bg-white [box-shadow:0_2px_8px_rgba(8,_37,_95,_0.08)] px-1.5">
+          <div className="grid gap-[5px] justify-items-center min-h-[88px] py-3.5 [border-right:1px_solid_#e8eff8] text-[var(--primary-soft)] text-center last:[border-right:0]">
             <Award size={22} strokeWidth={2.4} />
-            <span>완료 보상</span>
-            <strong>+{mission.points}P</strong>
+            <span className="text-[#8b98aa] text-[10px] font-extrabold">완료 보상</span>
+            <strong className="text-[var(--ink)] text-sm">+{mission.points}P</strong>
           </div>
-          <div>
+          <div className="grid gap-[5px] justify-items-center min-h-[88px] py-3.5 [border-right:1px_solid_#e8eff8] text-[var(--primary-soft)] text-center last:[border-right:0]">
             <Clock3 size={22} strokeWidth={2.4} />
-            <span>예상 시간</span>
-            <strong>{mission.duration}</strong>
+            <span className="text-[#8b98aa] text-[10px] font-extrabold">예상 시간</span>
+            <strong className="text-[var(--ink)] text-sm">{mission.duration}</strong>
           </div>
-          <div>
+          <div className="grid gap-[5px] justify-items-center min-h-[88px] py-3.5 [border-right:1px_solid_#e8eff8] text-[var(--primary-soft)] text-center last:[border-right:0]">
             <ShieldCheck size={22} strokeWidth={2.4} />
-            <span>난이도</span>
-            <strong>{mission.difficulty}</strong>
+            <span className="text-[#8b98aa] text-[10px] font-extrabold">난이도</span>
+            <strong className="text-[var(--ink)] text-sm">{mission.difficulty}</strong>
           </div>
         </section>
 
-        <section className="detail-card">
-          <header>
+        <section className="border-[1px_solid_#dce8f5] rounded-[20px] p-4 bg-white [box-shadow:0_2px_8px_rgba(8,_37,_95,_0.08)]">
+          <header className="flex items-center gap-[7px] text-[var(--primary-soft)]">
             <Sparkles size={17} strokeWidth={2.4} />
-            <h2>미션 소개</h2>
+            <h2 className="m-0 text-[var(--ink)] text-[15px] leading-[1.3]">미션 소개</h2>
           </header>
-          <p>{mission.description}</p>
+          <p className="m-[10px_0_0] text-[#65758b] text-[13px] leading-[1.65]">{mission.description}</p>
         </section>
 
-        <section className="detail-card location-detail-card">
-          <header>
+        <section className="border-[1px_solid_#dce8f5] rounded-[20px] p-4 bg-white [box-shadow:0_2px_8px_rgba(8,_37,_95,_0.08)]">
+          <header className="flex items-center gap-[7px] text-[var(--primary-soft)]">
             <MapPin size={17} strokeWidth={2.4} />
-            <h2>장소 정보</h2>
+            <h2 className="m-0 text-[var(--ink)] text-[15px] leading-[1.3]">장소 정보</h2>
           </header>
-          <strong>{mission.place}</strong>
-          <p>{mission.address}</p>
-          <div className="mini-map-preview">
+          <strong className="block mt-3 text-[var(--ink)] text-base">{mission.place}</strong>
+          <p className="m-[10px_0_0] text-[#65758b] text-[13px] leading-[1.65]">{mission.address}</p>
+          <div className="relative flex items-center justify-between min-h-[92px] mt-3.5 overflow-hidden rounded-[18px] p-3.5 bg-[linear-gradient(90deg,_rgba(8,_37,_95,_0.05)_1px,_transparent_1px),_linear-gradient(0deg,_rgba(8,_37,_95,_0.05)_1px,_transparent_1px),_linear-gradient(145deg,_#e5f6ff_0%,_#f8fdff_100%)] bg-size-[34px_34px,_34px_34px,_auto] text-[var(--primary-soft)]">
             <Route size={44} strokeWidth={1.9} />
-            <span>
+            <span className="grid w-[38px] h-[38px] place-items-center rounded-full bg-[var(--primary-soft)] text-white [box-shadow:0_8px_16px_rgba(43,_143,_219,_0.18)]">
               <Navigation size={16} strokeWidth={2.6} />
             </span>
-            <b>{mission.distance}</b>
+            <b className="rounded-full p-[7px_10px] bg-[rgba(255,_255,_255,_0.86)] text-[var(--ink)] text-xs">{mission.distance}</b>
           </div>
         </section>
 
-        <section className="detail-card">
-          <header>
+        <section className="border-[1px_solid_#dce8f5] rounded-[20px] p-4 bg-white [box-shadow:0_2px_8px_rgba(8,_37,_95,_0.08)]">
+          <header className="flex items-center gap-[7px] text-[var(--primary-soft)]">
             <Camera size={17} strokeWidth={2.4} />
-            <h2>인증 가이드</h2>
+            <h2 className="m-0 text-[var(--ink)] text-[15px] leading-[1.3]">인증 가이드</h2>
           </header>
-          <p>{mission.guide}</p>
+          <p className="m-[10px_0_0] text-[#65758b] text-[13px] leading-[1.65]">{mission.guide}</p>
         </section>
 
-        <section className="detail-card">
-          <header>
+        <section className="border-[1px_solid_#dce8f5] rounded-[20px] p-4 bg-white [box-shadow:0_2px_8px_rgba(8,_37,_95,_0.08)]">
+          <header className="flex items-center gap-[7px] text-[var(--primary-soft)]">
             <CalendarClock size={17} strokeWidth={2.4} />
-            <h2>진행 순서</h2>
+            <h2 className="m-0 text-[var(--ink)] text-[15px] leading-[1.3]">진행 순서</h2>
           </header>
-          <ol className="mission-step-list">
+          <ol className="grid gap-2.5 m-[14px_0_0] p-0 list-none">
             {mission.steps.map((step, index) => (
-              <li key={step}>
+              <li className="grid [grid-template-columns:28px_minmax(0,_1fr)_20px] gap-2.5 items-center min-h-[42px]" key={step}>
                 <span>{index + 1}</span>
-                <p>{step}</p>
+                <p className="m-[10px_0_0] text-[#65758b] text-[13px] leading-[1.65] m-0 text-[var(--ink)] font-extrabold">{step}</p>
                 {index === mission.steps.length - 1 ? (
                   <CheckCircle2 size={18} strokeWidth={2.5} />
                 ) : null}
@@ -118,17 +127,17 @@ export default function MissionDetailPage() {
           </ol>
         </section>
 
-        <section className="review-summary-card">
-          <div>
+        <section className="border-[1px_solid_#dce8f5] rounded-[20px] p-4 bg-white [box-shadow:0_2px_8px_rgba(8,_37,_95,_0.08)] grid gap-2.5 bg-[linear-gradient(145deg,_#fff_0%,_#f7fbff_100%)]">
+          <div className="inline-flex items-center gap-[5px] text-[#f5b01a]">
             <Star size={15} fill="#f5b01a" strokeWidth={0} />
-            <strong>4.8</strong>
-            <span>참여자 만족도</span>
+            <strong className="text-[var(--ink)] text-base">4.8</strong>
+            <span className="text-[#8b98aa] text-xs font-extrabold">참여자 만족도</span>
           </div>
-          <p>“짧은 시간 안에 지역 분위기를 느낄 수 있어서 좋아요.”</p>
+          <p className="m-0 text-[#65758b] text-[13px] leading-[1.55]">“짧은 시간 안에 지역 분위기를 느낄 수 있어서 좋아요.”</p>
         </section>
 
         <Button
-          className="detail-start-button"
+          className="sticky bottom-0 min-h-[54px] rounded-[18px] [box-shadow:0_10px_22px_rgba(91,_181,_248,_0.28)]"
           icon={<ChevronRight size={18} strokeWidth={2.6} />}
           onClick={() => navigate(PATH.MISSION_PHOTO)}
         >
diff --git a/src/pages/mission/MissionPhotoPage.tsx b/src/pages/mission/MissionPhotoPage.tsx
index cb3a1d3..0bfa5d6 100644
--- a/src/pages/mission/MissionPhotoPage.tsx
+++ b/src/pages/mission/MissionPhotoPage.tsx
@@ -20,13 +20,13 @@ export default function MissionPhotoPage() {
         title="사진 인증"
         onBack={() => navigate(-1)}
         action={
-          <button className="hint-action" type="button">
+          <button className="inline-flex items-center gap-1 bg-transparent text-[var(--primary-soft)] text-xs font-bold" type="button">
             <Lightbulb size={13} strokeWidth={2.6} />
             힌트
           </button>
         }
       />
-      <section className="mission-stack">
+      <section className="flex flex-col gap-4 p-4 [overflow-y:auto]">
         <Panel>
           <h2>
             <ClipboardList size={15} strokeWidth={2.5} />
@@ -41,34 +41,34 @@ export default function MissionPhotoPage() {
 
         <Panel className="example-panel">
           <h2>예시 사진</h2>
-          <div className="example-grid">
-            <figure>
-              <div className="photo-example good">
-                <img src={figmaAssets.goodPhoto} alt="좋은 인증 예시" />
-                <span>
+          <div className="grid [grid-template-columns:1fr_1fr] gap-2.5">
+            <figure className="m-0 text-red-500">
+              <div className="relative h-32 overflow-hidden rounded-2xl after:[content:''] after:absolute after:[inset:0] after:rounded-[inherit] after:border-[3px_solid_#34d399] after:bg-[rgba(5,_150,_105,_0.12)] px-2">
+                <img className="w-full h-full object-cover" src={figmaAssets.goodPhoto} alt="좋은 인증 예시" />
+                <span className="absolute z-10 top-[8px] left-[8px] inline-flex items-center gap-1 rounded-full py-1 bg-[rgba(5,_150,_105,_0.9)] text-white text-[9px] font-black">
                   <Check size={10} strokeWidth={3} /> 좋은 예
                 </span>
               </div>
-              <figcaption>✅ 간판·내부 포함</figcaption>
+              <figcaption className="pt-1.5 text-[#059669] text-[10px] font-bold text-center">✅ 간판·내부 포함</figcaption>
             </figure>
-            <figure>
-              <div className="photo-example bad">
-                <img src={figmaAssets.badPhoto} alt="나쁜 인증 예시" />
-                <span>
+            <figure className="m-0 text-red-500">
+              <div className="relative h-32 overflow-hidden rounded-2xl after:[content:''] after:absolute after:[inset:0] after:rounded-[inherit] after:border-[3px_solid_#34d399] after:bg-[rgba(5,_150,_105,_0.12)] px-2 after:border-[#f87171] after:bg-[rgba(239,_68,_68,_0.15)]">
+                <img className="w-full h-full object-cover" src={figmaAssets.badPhoto} alt="나쁜 인증 예시" />
+                <span className="absolute z-10 top-[8px] left-[8px] inline-flex items-center gap-1 rounded-full py-1 bg-[rgba(5,_150,_105,_0.9)] text-white text-[9px] font-black bg-[rgba(220,_38,_38,_0.9)]">
                   <X size={10} strokeWidth={3} /> 나쁜 예
                 </span>
               </div>
-              <figcaption>❌ 장소 식별 불가</figcaption>
+              <figcaption className="pt-1.5 text-[#059669] text-[10px] font-bold text-center">❌ 장소 식별 불가</figcaption>
             </figure>
           </div>
         </Panel>
 
-        <Panel className="upload-panel">
-          <div className="camera-bubble">
+        <Panel className="grid place-items-center min-h-[210px] bg-[var(--sky-100)] text-center">
+          <div className="grid place-items-center w-16 h-16 rounded-full bg-[var(--sky-300)] text-[var(--primary-soft)] last:flex last:gap-2">
             <Camera size={28} strokeWidth={2.4} />
           </div>
           <p>사진을 촬영하거나 업로드하세요</p>
-          <div>
+          <div className="last:flex last:gap-2">
             <Button icon={<Camera size={14} strokeWidth={2.4} />}>
               촬영하기
             </Button>
@@ -80,10 +80,11 @@ export default function MissionPhotoPage() {
             </Button>
           </div>
         </Panel>
-        <Button variant="disabled" className="full-button">
+        <Button variant="disabled" className="min-h-13 rounded-2xl text-sm [box-shadow:0_4px_3px_#dbeafe,_0_2px_2px_#dbeafe]">
           사진을 먼저 선택해주세요
         </Button>
       </section>
     </>
   );
 }
+
diff --git a/src/pages/mission/MissionRecordPage.tsx b/src/pages/mission/MissionRecordPage.tsx
index 50bb9db..981d0df 100644
--- a/src/pages/mission/MissionRecordPage.tsx
+++ b/src/pages/mission/MissionRecordPage.tsx
@@ -16,28 +16,28 @@ export default function MissionRecordPage() {
   return (
     <>
       <SubHeader title="감상 기록" onBack={() => navigate(-1)} />
-      <section className="mission-stack">
-        <section className="visit-banner">
-          <span>
+      <section className="flex flex-col gap-4 p-4 [overflow-y:auto]">
+        <section className="flex items-center gap-2 min-h-[58px] rounded-2xl p-4 bg-[linear-gradient(169deg,_var(--sky-100)_0%,_var(--sky-300)_100%)]">
+          <span className="text-2xl">
             <PencilLine size={23} strokeWidth={2.4} />
           </span>
           <div>
-            <strong>인사동 전통찻집</strong>
-            <small>2026년 7월 8일 방문</small>
+            <strong className="block text-sm font-black">인사동 전통찻집</strong>
+            <small className="text-[var(--muted-2)] text-[10px]">2026년 7월 8일 방문</small>
           </div>
         </section>
 
-        <Panel className="record-panel">
-          <header>
-            <h2>
+        <Panel className="">
+          <header className="flex items-center justify-between">
+            <h2 className="inline-flex items-center gap-1.5">
               <MessageCircle size={15} strokeWidth={2.5} />
               작성 프롬프트
             </h2>
             <button type="button">다른 질문 →</button>
           </header>
-          <blockquote>"오늘 방문한 장소에서 가장 인상 깊었던 점은?"</blockquote>
-          <textarea placeholder="여기에 자유롭게 적어보세요…" maxLength={300} />
-          <small>0/300</small>
+          <blockquote className="m-[12px_0] rounded-[14px] p-3 bg-[var(--sky-100)] text-[var(--ink)] text-sm font-bold">"오늘 방문한 장소에서 가장 인상 깊었던 점은?"</blockquote>
+          <textarea className="w-full h-[91px] resize-none border-0 bg-transparent text-[var(--ink)] outline-none" placeholder="여기에 자유롭게 적어보세요…" maxLength={300} />
+          <small className="block text-[var(--muted-2)] text-[10px] text-right">0/300</small>
         </Panel>
 
         <Panel>
@@ -45,7 +45,7 @@ export default function MissionRecordPage() {
             <PencilLine size={15} strokeWidth={2.5} />이 장소를 한 단어로!
           </h2>
           <input
-            className="soft-input"
+            className="w-full min-h-8 border-[1px_solid_#dbe8f8] rounded-[10px] p-[0_13px] bg-[#f6faff] text-[var(--navy)] outline-none placeholder:text-[#c6d1e0] min-h-10 border-0 rounded-[14px] bg-[var(--sky-100)] text-sm"
             placeholder="예: 고요함, 따뜻함, 전통…"
           />
         </Panel>
@@ -55,18 +55,19 @@ export default function MissionRecordPage() {
             <Camera size={15} strokeWidth={2.5} />
             사진 첨부
           </h2>
-          <div className="attachment-row">
-            <span className="photo-chip">
+          <div className="flex gap-2 pt-2">
+            <span className="grid place-items-center w-16 h-16 rounded-[14px] bg-[linear-gradient(_135deg,_rgba(253,_230,_138,_0.27),_rgba(254,_243,_199,_0.27)_)] text-3xl text-[#8a5d1f]">
               <Coffee size={28} strokeWidth={2.3} />
             </span>
-            <button type="button" aria-label="사진 추가">
+            <button className="grid place-items-center w-16 h-16 rounded-[14px] border-[2px_dashed_var(--sky-300)] bg-white text-[#d1d5dc] text-2xl font-medium text-[#b9c4d4]" type="button" aria-label="사진 추가">
               <Plus size={24} strokeWidth={2.5} />
             </button>
           </div>
         </Panel>
 
-        <Button className="full-button">감상 저장하기</Button>
+        <Button className="min-h-13 rounded-2xl text-sm [box-shadow:0_4px_3px_#dbeafe,_0_2px_2px_#dbeafe]">감상 저장하기</Button>
       </section>
     </>
   );
 }
+
diff --git a/src/styles/global.css b/src/styles/global.css
index c40e609..49e265c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,3084 +1,67 @@
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap");
-@import "tailwindcss";
-
-@theme {
-  --color-primary: #1673f8;
-}
-
-:root {
-  --primary: #1673f8;
-  --primary-soft: #5bb5f8;
-  --navy: #08255f;
-  --sky-50: #f0f6ff;
-  --sky-100: #eaf5ff;
-  --sky-200: #e0f2ff;
-  --sky-300: #c8e8ff;
-  --border: #dde4ee;
-  --muted: #6d7e9e;
-  --muted-2: #9bafc8;
-  --surface: rgba(255, 255, 255, 0.88);
-  --app-bg: #f4f8ff;
-  --ink: #1c1c3a;
-  color: var(--ink);
-  font-family:
-    "Noto Sans KR",
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-  background: linear-gradient(143deg, #c8e8ff 0%, #eaf5ff 50%, #d4ecff 100%);
-}
-
-button,
-input,
-textarea {
-  font: inherit;
-}
-
-button {
-  border: 0;
-  cursor: pointer;
-}
-
-a {
-  text-decoration: none;
-}
-
-.app-shell {
-  display: grid;
-  grid-template-columns: 240px minmax(0, 1fr);
-  min-height: 100vh;
-}
-
-.screen-sidebar {
-  display: flex;
-  flex-direction: column;
-  gap: 28px;
-  padding: 28px 20px;
-  background: rgba(255, 255, 255, 0.72);
-  border-right: 1px solid rgba(221, 228, 238, 0.8);
-  backdrop-filter: blur(18px);
-}
-
-.screen-sidebar > div {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.brand-mark {
-  display: grid;
-  place-items: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 14px;
-  background: var(--primary);
-  color: #fff;
-  font-weight: 900;
-}
-
-.screen-sidebar strong {
-  display: block;
-  color: var(--primary);
-  font-size: 18px;
-  line-height: 1.2;
-}
-
-.screen-sidebar small {
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.screen-sidebar nav {
-  display: grid;
-  gap: 8px;
-}
-
-.screen-sidebar button {
-  width: 100%;
-  border-radius: 8px;
-  padding: 12px 14px;
-  background: transparent;
-  color: var(--navy);
-  text-align: left;
-  font-weight: 700;
-}
-
-.screen-sidebar button:hover,
-.screen-sidebar button.is-selected {
-  background: var(--primary);
-  color: #fff;
-}
-
-.preview-stage {
-  display: grid;
-  min-height: 100vh;
-  place-items: center;
-  padding: 36px;
-  overflow: auto;
-}
-
-.preview-landing {
-  align-items: start;
-}
-
-.landing-page {
-  width: min(100%, 980px);
-  overflow: hidden;
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  background: var(--surface);
-  box-shadow: 0 8px 32px rgba(22, 115, 248, 0.12);
-}
-
-.landing-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 68px;
-  padding: 0 34px;
-  border-bottom: 1px solid #dbe8f8;
-}
-
-.landing-header > strong {
-  color: var(--primary);
-  font-size: 22px;
-  font-weight: 900;
-}
-
-.landing-header nav {
-  display: flex;
-  gap: 30px;
-  color: var(--navy);
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.landing-start {
-  width: auto;
-  min-width: 78px;
-  height: 46px;
-  padding: 0 16px;
-}
-
-.landing-hero {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 280px;
-  padding: 40px 58px;
-  background: var(--sky-200);
-}
-
-.landing-hero h1 {
-  margin: 0;
-  color: var(--navy);
-  font-size: 44px;
-  line-height: 1.2;
-  letter-spacing: 0;
-}
-
-.landing-hero p {
-  margin: 20px 0 28px;
-  color: rgba(8, 37, 95, 0.72);
-  font-size: 16px;
-  line-height: 1.65;
-}
-
-.hero-mascot {
-  width: 200px;
-  height: 200px;
-  object-fit: contain;
-  background: #fff;
-}
-
-.course-section {
-  padding: 28px 44px 34px;
-}
-
-.course-section h2 {
-  margin: 0 0 18px;
-  color: var(--navy);
-  font-size: 20px;
-}
-
-.course-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 18px;
-}
-
-.course-card {
-  overflow: hidden;
-  min-height: 122px;
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  background: #fff;
-}
-
-.course-card strong {
-  display: block;
-  padding: 12px;
-  color: var(--navy);
-  font-size: 12px;
-}
-
-.device-frame {
-  display: flex;
-  flex-direction: column;
-  width: 390px;
-  min-height: 844px;
-  overflow: hidden;
-  border-radius: 44px;
-  background: var(--app-bg);
-  box-shadow:
-    0 40px 100px rgba(43, 143, 219, 0.25),
-    0 8px 32px rgba(0, 0, 0, 0.08);
-}
-
-.compact-device {
-  min-height: 412px;
-  width: 190px;
-  border-radius: 32px;
-  box-shadow:
-    0 8px 32px rgba(22, 115, 248, 0.13),
-    0 0 0 1px rgba(22, 115, 248, 0.08);
-}
-
-.status-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 33px;
-  padding: 8px 24px;
-  background: #fff;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.compact-device .status-bar {
-  min-height: 32px;
-  padding: 9px 20px;
-  background: var(--surface);
-  font-size: 9px;
-}
-
-.compact-device .status-icons {
-  width: 20px;
-  height: 3px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: rgba(8, 37, 95, 0.4);
-  color: transparent;
-}
-
-.status-icons {
-  color: var(--muted-2);
-}
-
-.device-content {
-  flex: 1;
-  overflow: hidden;
-}
-
-.sub-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  height: 57px;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--sky-100);
-  background: #fff;
-}
-
-.sub-header h1 {
-  flex: 1;
-  margin: 0;
-  font-size: 14px;
-  font-weight: 900;
-}
-
-.sub-header-action {
-  display: flex;
-  align-items: center;
-}
-
-.icon-circle {
-  display: grid;
-  place-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 999px;
-  background: var(--sky-100);
-  color: var(--primary-soft);
-  font-size: 22px;
-  line-height: 1;
-}
-
-.icon-circle img {
-  width: 17px;
-  height: 17px;
-}
-
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 34px;
-  border-radius: 10px;
-  padding: 0 14px;
-  font-size: 13px;
-  font-weight: 900;
-  white-space: nowrap;
-}
-
-.button-primary {
-  background: var(--primary);
-  color: #fff;
-}
-
-.button-secondary {
-  border: 1px solid #dbe8f8;
-  background: #f5faff;
-  color: var(--primary);
-}
-
-.button-disabled {
-  background: #d2d3d4;
-  color: #fff;
-  cursor: default;
-}
-
-.field {
-  display: grid;
-  gap: 3px;
-  width: 100%;
-  color: var(--muted);
-  font-size: 8px;
-  font-weight: 700;
-}
-
-.field input,
-.soft-input {
-  width: 100%;
-  min-height: 32px;
-  border: 1px solid #dbe8f8;
-  border-radius: 10px;
-  padding: 0 13px;
-  background: #f6faff;
-  color: var(--navy);
-  outline: none;
-}
-
-.field input::placeholder,
-.soft-input::placeholder,
-textarea::placeholder {
-  color: #c6d1e0;
-}
-
-.login-screen,
-.signup-screen,
-.terms-screen,
-.home-screen {
-  display: flex;
-  flex-direction: column;
-  padding: 24px 20px;
-}
-
-.login-screen {
-  align-items: center;
-  text-align: center;
-}
-
-.login-screen h1 {
-  margin: 28px 0 0;
-  color: var(--primary);
-  font-size: 22px;
-  line-height: 33px;
-}
-
-.login-screen img {
-  width: 96px;
-  height: 96px;
-  object-fit: contain;
-}
-
-.login-screen p {
-  margin: 0 0 18px;
-  color: var(--muted);
-  font-size: 9px;
-  font-weight: 700;
-  line-height: 1.5;
-}
-
-.auth-actions {
-  display: grid;
-  gap: 8px;
-  width: 100%;
-}
-
-.login-screen small,
-.signup-screen small {
-  margin-top: 12px;
-  color: var(--muted);
-  font-size: 8px;
-}
-
-.login-screen b,
-.signup-screen b {
-  color: var(--primary);
-}
-
-.signup-screen {
-  gap: 8px;
-}
-
-.signup-screen h1,
-.terms-screen h1 {
-  margin: 16px 0 12px;
-  color: var(--navy);
-  font-size: 14px;
-  line-height: 21px;
-  text-align: center;
-}
-
-.terms-screen {
-  gap: 24px;
-}
-
-.terms-list {
-  overflow: hidden;
-  border: 1px solid #dbe8f8;
-  border-radius: 14px;
-  background: #fff;
-}
-
-.check-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 42px;
-  padding: 10px 0;
-  border-bottom: 1px solid #dbe8f8;
-  font-size: 10px;
-  color: var(--navy);
-}
-
-.check-row:last-child {
-  border-bottom: 0;
-}
-
-.check-row span {
-  display: grid;
-  place-items: center;
-  width: 14px;
-  height: 14px;
-  margin-left: 12px;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  background: #fff;
-}
-
-.check-row .checked {
-  border-color: var(--primary);
-  background: var(--primary);
-}
-
-.check-row .checked::after {
-  content: "";
-  width: 5px;
-  height: 5px;
-  border-radius: 999px;
-  background: #fff;
-}
-
-.home-screen {
-  gap: 12px;
-  padding: 12px 16px 0;
-}
-
-.home-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.home-title strong {
-  color: var(--primary);
-  font-size: 13px;
-  font-weight: 900;
-}
-
-.home-title span {
-  width: 28px;
-  height: 28px;
-  border-radius: 999px;
-  background: var(--border);
-}
-
-.home-screen h1 {
-  margin: 0;
-  color: var(--navy);
-  font-size: 13px;
-  line-height: 1.38;
-}
-
-.search-box {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 32px;
-  padding: 0 12px;
-  border: 1px solid #dbe8f8;
-  border-radius: 16px;
-  background: var(--sky-50);
-}
-
-.search-box input {
-  width: 100%;
-  border: 0;
-  background: transparent;
-  color: var(--navy);
-  font-size: 9px;
-  outline: none;
-}
-
-.mobile-course {
-  display: grid;
-  gap: 6px;
-}
-
-.mobile-course strong {
-  color: var(--navy);
-  font-size: 9px;
-}
-
-.wire-image {
-  position: relative;
-  height: 64px;
-  overflow: hidden;
-  border-radius: 10px;
-  background: #c5cedc;
-}
-
-.wire-image::after {
-  content: "";
-  position: absolute;
-  inset: auto 0 0;
-  height: 40%;
-  background: #b8d8b8;
-}
-
-.wire-image i {
-  position: absolute;
-  left: 10px;
-  right: 10px;
-  top: 50%;
-  height: 5px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.45);
-}
-
-.wire-image span {
-  position: absolute;
-  z-index: 1;
-  top: 8px;
-  left: 8px;
-  color: rgba(8, 37, 95, 0.6);
-  font-size: 8px;
-  font-weight: 700;
-}
-
-.bottom-nav {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  height: 67px;
-  margin-top: auto;
-  background: #fff;
-}
-
-.bottom-nav button {
-  position: relative;
-  display: grid;
-  place-items: center;
-  gap: 2px;
-  background: transparent;
-  color: var(--muted);
-  font-size: 9px;
-  font-weight: 900;
-}
-
-.bottom-nav img {
-  width: 20px;
-  height: 20px;
-  object-fit: contain;
-}
-
-.nav-dot {
-  width: 20px;
-  height: 20px;
-  border-radius: 8px;
-  background: var(--border);
-}
-
-.bottom-nav .is-active {
-  color: var(--primary);
-}
-
-.bottom-nav .is-active::after {
-  content: "";
-  position: absolute;
-  bottom: 12px;
-  width: 16px;
-  height: 2px;
-  border-radius: 999px;
-  background: var(--primary);
-}
-
-.mission-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 16px;
-}
-
-.panel {
-  width: 100%;
-  border: 1px solid var(--sky-100);
-  border-radius: 16px;
-  padding: 16px;
-  background: #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.panel h2 {
-  margin: 0 0 8px;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.panel strong {
-  display: block;
-  color: #5a6b84;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.panel p {
-  margin: 2px 0 0;
-  color: var(--muted-2);
-  font-size: 12px;
-  line-height: 1.6;
-}
-
-.hint-action {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  background: transparent;
-  color: var(--primary-soft);
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.hint-action img {
-  width: 13px;
-  height: 13px;
-}
-
-.example-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-}
-
-.example-grid figure {
-  margin: 0;
-}
-
-.photo-example {
-  position: relative;
-  height: 128px;
-  overflow: hidden;
-  border-radius: 16px;
-}
-
-.photo-example > img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.photo-example::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  border: 3px solid #34d399;
-  background: rgba(5, 150, 105, 0.12);
-}
-
-.photo-example.bad::after {
-  border-color: #f87171;
-  background: rgba(239, 68, 68, 0.15);
-}
-
-.photo-example span {
-  position: absolute;
-  z-index: 1;
-  top: 8px;
-  left: 8px;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  border-radius: 999px;
-  padding: 4px 8px;
-  background: rgba(5, 150, 105, 0.9);
-  color: #fff;
-  font-size: 9px;
-  font-weight: 900;
-}
-
-.photo-example.bad span {
-  background: rgba(220, 38, 38, 0.9);
-}
-
-.photo-example span img {
-  width: 10px;
-  height: 10px;
-}
-
-.example-grid figcaption {
-  padding-top: 6px;
-  color: #059669;
-  font-size: 10px;
-  font-weight: 700;
-  text-align: center;
-}
-
-.example-grid figure:last-child figcaption {
-  color: #ef4444;
-}
-
-.upload-panel {
-  display: grid;
-  place-items: center;
-  min-height: 210px;
-  background: var(--sky-100);
-  text-align: center;
-}
-
-.upload-panel > div:last-child {
-  display: flex;
-  gap: 8px;
-}
-
-.upload-panel .button {
-  width: auto;
-  min-height: 32px;
-  border-radius: 14px;
-  font-size: 12px;
-}
-
-.camera-bubble {
-  display: grid;
-  place-items: center;
-  width: 64px;
-  height: 64px;
-  border-radius: 999px;
-  background: var(--sky-300);
-}
-
-.camera-bubble img {
-  width: 28px;
-  height: 28px;
-}
-
-.full-button {
-  min-height: 52px;
-  border-radius: 16px;
-  font-size: 14px;
-  box-shadow:
-    0 4px 3px #dbeafe,
-    0 2px 2px #dbeafe;
-}
-
-.visit-banner {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 58px;
-  border-radius: 16px;
-  padding: 16px;
-  background: linear-gradient(169deg, var(--sky-100) 0%, var(--sky-300) 100%);
-}
-
-.visit-banner span {
-  font-size: 24px;
-}
-
-.visit-banner strong {
-  display: block;
-  font-size: 14px;
-  font-weight: 900;
-}
-
-.visit-banner small {
-  color: var(--muted-2);
-  font-size: 10px;
-}
-
-.record-panel header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.record-panel header button {
-  background: transparent;
-  color: var(--primary-soft);
-  font-size: 10px;
-  font-weight: 700;
-}
-
-.record-panel blockquote {
-  margin: 12px 0;
-  border-radius: 14px;
-  padding: 12px;
-  background: var(--sky-100);
-  color: var(--ink);
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.record-panel textarea {
-  width: 100%;
-  height: 91px;
-  resize: none;
-  border: 0;
-  background: transparent;
-  color: var(--ink);
-  outline: none;
-}
-
-.record-panel small {
-  display: block;
-  color: var(--muted-2);
-  font-size: 10px;
-  text-align: right;
-}
-
-.soft-input {
-  min-height: 40px;
-  border: 0;
-  border-radius: 14px;
-  background: var(--sky-100);
-  font-size: 14px;
-}
-
-.attachment-row {
-  display: flex;
-  gap: 8px;
-  padding-top: 8px;
-}
-
-.photo-chip,
-.attachment-row button {
-  display: grid;
-  place-items: center;
-  width: 64px;
-  height: 64px;
-  border-radius: 14px;
-}
-
-.photo-chip {
-  background: linear-gradient(
-    135deg,
-    rgba(253, 230, 138, 0.27),
-    rgba(254, 243, 199, 0.27)
-  );
-  font-size: 30px;
-}
-
-.attachment-row button {
-  border: 2px dashed var(--sky-300);
-  background: #fff;
-  color: #d1d5dc;
-  font-size: 24px;
-  font-weight: 500;
-}
-
-@media (max-width: 820px) {
-  .app-shell {
-    grid-template-columns: 1fr;
-  }
-
-  .screen-sidebar {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    padding: 16px;
-  }
-
-  .screen-sidebar nav {
-    display: flex;
-    overflow-x: auto;
-  }
-
-  .screen-sidebar button {
-    flex: 0 0 auto;
-    width: auto;
-  }
-
-  .preview-stage {
-    min-height: calc(100vh - 168px);
-    padding: 24px 14px;
-  }
-
-  .landing-header {
-    gap: 16px;
-    padding: 0 20px;
-  }
-
-  .landing-header nav {
-    display: none;
-  }
-
-  .landing-hero {
-    padding: 28px 24px;
-  }
-
-  .landing-hero h1 {
-    font-size: 32px;
-  }
-
-  .hero-mascot {
-    width: 110px;
-    height: 110px;
-  }
-
-  .course-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .device-frame {
-    max-width: calc(100vw - 28px);
-  }
-}
-
-.mobile-app-shell {
-  display: grid;
-  grid-template-columns: 1fr;
-  min-height: 100vh;
-  place-items: center;
-  padding: 28px 16px;
-  background:
-    radial-gradient(
-      circle at 20% 12%,
-      rgba(255, 255, 255, 0.82),
-      transparent 28%
-    ),
-    linear-gradient(143deg, #c8e8ff 0%, #eaf5ff 52%, #d4ecff 100%);
-}
-
-.mobile-stage {
-  display: grid;
-  width: min(100%, 430px);
-  place-items: center;
-}
-
-.auth-device,
-.app-device {
-  width: min(390px, calc(100vw - 28px));
-  min-height: min(844px, calc(100vh - 56px));
-  border-radius: 44px;
-}
-
-.status-icons {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  color: var(--muted-2);
-}
-
-.auth-device .device-content,
-.app-device .device-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.button {
-  gap: 8px;
-}
-
-.button-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.auth-device .button,
-.app-device .button {
-  min-height: 52px;
-  border-radius: 16px;
-  font-size: 14px;
-}
-
-.login-screen {
-  min-height: 100%;
-  padding: 24px 22px 30px;
-}
-
-.login-brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--primary);
-}
-
-.login-brand span {
-  display: grid;
-  width: 40px;
-  height: 40px;
-  place-items: center;
-  border-radius: 16px;
-  background: var(--sky-100);
-}
-
-.login-brand strong {
-  font-size: 22px;
-  font-weight: 900;
-}
-
-.login-hero-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 42px;
-  border-radius: 28px;
-  padding: 26px 22px 28px;
-  background: linear-gradient(169deg, #eaf5ff 0%, #c8e8ff 100%);
-  text-align: center;
-}
-
-.login-hero-card img {
-  width: 148px;
-  height: 148px;
-  object-fit: contain;
-}
-
-.login-hero-card h1 {
-  margin: 18px 0 10px;
-  color: var(--navy);
-  font-size: 25px;
-  line-height: 1.24;
-}
-
-.login-hero-card p {
-  max-width: 260px;
-  margin: 0;
-  color: #5a6b84;
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.auth-device .auth-actions {
-  display: grid;
-  gap: 10px;
-  margin-top: auto;
-  width: 100%;
-}
-
-.auth-text-button {
-  margin-top: 18px;
-  background: transparent;
-  color: var(--muted);
-  font-size: 13px;
-}
-
-.auth-text-button b {
-  color: var(--primary);
-}
-
-.auth-device .signup-screen,
-.auth-device .terms-screen {
-  min-height: 100%;
-  padding: 36px 24px 30px;
-}
-
-.auth-device .signup-screen {
-  gap: 14px;
-}
-
-.auth-device .signup-screen h1,
-.auth-device .terms-screen h1 {
-  margin: 8px 0 18px;
-  font-size: 24px;
-  line-height: 1.25;
-}
-
-.auth-device .field {
-  gap: 7px;
-  font-size: 13px;
-}
-
-.auth-device .field input {
-  min-height: 48px;
-  border-radius: 16px;
-  font-size: 14px;
-}
-
-.auth-device .signup-screen small {
-  margin-top: 4px;
-  font-size: 13px;
-  text-align: center;
-}
-
-.auth-device .terms-screen {
-  gap: 28px;
-}
-
-.auth-device .terms-list {
-  border-radius: 20px;
-}
-
-.auth-device .check-row {
-  min-height: 58px;
-  padding: 12px 4px;
-  font-size: 14px;
-}
-
-.auth-device .check-row span {
-  width: 22px;
-  height: 22px;
-}
-
-.auth-device .check-row .checked {
-  color: #fff;
-}
-
-.auth-device .check-row .checked::after {
-  display: none;
-}
-
-.app-home-screen {
-  gap: 16px;
-  min-height: 100%;
-  overflow-y: auto;
-  padding: 18px 16px 16px;
-}
-
-.mobile-topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 42px;
-}
-
-.mobile-topbar strong {
-  display: block;
-  color: var(--primary);
-  font-size: 22px;
-  font-weight: 900;
-}
-
-.mobile-topbar small {
-  color: var(--muted-2);
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.topbar-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.topbar-actions button {
-  display: grid;
-  width: 36px;
-  height: 36px;
-  place-items: center;
-  border-radius: 999px;
-  background: #fff;
-  color: var(--navy);
-  box-shadow: 0 1px 4px rgba(8, 37, 95, 0.08);
-}
-
-.home-hero-card {
-  display: grid;
-  grid-template-columns: 1fr 110px;
-  gap: 12px;
-  align-items: center;
-  border-radius: 24px;
-  padding: 20px 18px;
-  background: linear-gradient(169deg, #e0f2ff 0%, #c8e8ff 100%);
-}
-
-.home-hero-card h1 {
-  margin: 10px 0 8px;
-  color: var(--navy);
-  font-size: 24px;
-  line-height: 1.28;
-}
-
-.home-hero-card p {
-  margin: 0;
-  color: #5a6b84;
-  font-size: 12px;
-  line-height: 1.55;
-}
-
-.home-hero-card img {
-  width: 110px;
-  height: 110px;
-  object-fit: contain;
-  border-radius: 24px;
-  background: rgba(255, 255, 255, 0.45);
-}
-
-.location-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  width: fit-content;
-  border-radius: 999px;
-  padding: 5px 9px;
-  background: rgba(255, 255, 255, 0.82);
-  color: var(--primary);
-  font-size: 11px;
-  font-weight: 900;
-}
-
-.app-home-screen .search-box {
-  height: 46px;
-  border-radius: 18px;
-  padding: 0 14px;
-  background: #fff;
-  color: var(--muted-2);
-  box-shadow: 0 1px 5px rgba(8, 37, 95, 0.08);
-}
-
-.app-home-screen .search-box input {
-  font-size: 13px;
-}
-
-.summary-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-}
-
-.summary-grid article {
-  display: grid;
-  gap: 5px;
-  border: 1px solid var(--sky-100);
-  border-radius: 18px;
-  padding: 14px;
-  background: #fff;
-  color: var(--primary);
-  box-shadow: 0 1px 5px rgba(8, 37, 95, 0.08);
-}
-
-.summary-grid span {
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.summary-grid strong {
-  color: var(--navy);
-  font-size: 20px;
-}
-
-.mission-list-section {
-  display: grid;
-  gap: 12px;
-}
-
-.section-title-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.section-title-row h2 {
-  margin: 0;
-  color: var(--navy);
-  font-size: 18px;
-}
-
-.section-title-row button {
-  background: transparent;
-  color: var(--primary);
-  font-size: 12px;
-  font-weight: 900;
-}
-
-.mobile-course-list {
-  display: grid;
-  gap: 12px;
-}
-
-.mobile-course-card {
-  display: grid;
-  grid-template-columns: 92px minmax(0, 1fr) 34px;
-  gap: 12px;
-  align-items: center;
-  border: 1px solid var(--sky-100);
-  border-radius: 20px;
-  padding: 10px;
-  background: #fff;
-  box-shadow: 0 1px 5px rgba(8, 37, 95, 0.08);
-}
-
-.mobile-course-card .wire-image {
-  height: 82px;
-  border-radius: 16px;
-}
-
-.mobile-course-card .location-badge {
-  padding: 3px 7px;
-  font-size: 10px;
-}
-
-.mobile-course-card strong {
-  display: block;
-  margin-top: 7px;
-  color: var(--navy);
-  font-size: 14px;
-  line-height: 1.3;
-}
-
-.mobile-course-card p {
-  margin: 5px 0 0;
-  color: var(--muted);
-  font-size: 11px;
-  line-height: 1.45;
-}
-
-.mobile-course-card > button {
-  display: grid;
-  width: 34px;
-  height: 34px;
-  place-items: center;
-  border-radius: 999px;
-  background: var(--sky-100);
-  color: var(--primary);
-}
-
-.home-main-cta {
-  margin-top: 2px;
-}
-
-.wire-image {
-  display: grid;
-  place-items: center;
-  color: rgba(8, 37, 95, 0.5);
-}
-
-.wire-image-icon {
-  position: relative;
-  z-index: 1;
-}
-
-.wire-image span {
-  top: auto;
-  bottom: 8px;
-  left: 8px;
-  color: rgba(8, 37, 95, 0.68);
-}
-
-.bottom-nav {
-  border-top: 1px solid var(--sky-100);
-  box-shadow: 0 -10px 24px rgba(8, 37, 95, 0.04);
-}
-
-.bottom-nav button {
-  color: var(--muted-2);
-}
-
-.bottom-nav button svg {
-  color: currentColor;
-}
-
-.bottom-nav .is-active {
-  color: var(--primary);
-}
-
-.mission-stack {
-  overflow-y: auto;
-}
-
-.panel h2,
-.record-panel h2 {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.hint-action img {
-  display: none;
-}
-
-.camera-bubble {
-  color: var(--primary-soft);
-}
-
-.photo-chip {
-  color: #8a5d1f;
-}
-
-.attachment-row button {
-  color: #b9c4d4;
-}
-
-.map-screen {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 14px;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.map-search-row {
-  display: grid;
-  grid-template-columns: 1fr 42px;
-  gap: 10px;
-}
-
-.map-search-row label,
-.map-search-row button {
-  display: flex;
-  align-items: center;
-  min-height: 46px;
-  border: 1px solid var(--sky-100);
-  border-radius: 18px;
-  background: #fff;
-  color: var(--muted-2);
-  box-shadow: 0 1px 5px rgba(8, 37, 95, 0.08);
-}
-
-.map-search-row label {
-  gap: 8px;
-  padding: 0 14px;
-}
-
-.map-search-row input {
-  width: 100%;
-  border: 0;
-  background: transparent;
-  color: var(--navy);
-  font-size: 13px;
-  outline: none;
-}
-
-.map-search-row button {
-  justify-content: center;
-  color: var(--navy);
-}
-
-.mission-map {
-  position: relative;
-  min-height: 300px;
-  overflow: hidden;
-  border: 1px solid #cce8ff;
-  border-radius: 26px;
-  background:
-    linear-gradient(
-      28deg,
-      rgba(184, 216, 184, 0.52) 0 22%,
-      transparent 22% 100%
-    ),
-    linear-gradient(145deg, #dff3ff 0%, #f5fbff 55%, #d2edff 100%);
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
-    0 8px 26px rgba(43, 143, 219, 0.14);
-}
-
-.map-grid-lines {
-  position: absolute;
-  inset: 0;
-  background:
-    linear-gradient(90deg, rgba(8, 37, 95, 0.06) 1px, transparent 1px),
-    linear-gradient(0deg, rgba(8, 37, 95, 0.06) 1px, transparent 1px);
-  background-size: 54px 54px;
-  mask-image: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 0.4),
-    rgba(0, 0, 0, 0.08)
-  );
-}
-
-.map-route {
-  position: absolute;
-  height: 92px;
-  border: 8px solid rgba(22, 115, 248, 0.2);
-  border-right: 0;
-  border-bottom: 0;
-  border-radius: 36px 0 0 0;
-}
-
-.route-one {
-  right: 34px;
-  bottom: 82px;
-  width: 230px;
-  transform: rotate(-12deg);
-}
-
-.route-two {
-  left: 42px;
-  top: 72px;
-  width: 190px;
-  border-color: rgba(91, 181, 248, 0.34);
-  transform: rotate(162deg);
-}
-
-.map-pin,
-.current-location {
-  position: absolute;
-  display: grid;
-  place-items: center;
-  border-radius: 999px;
-  box-shadow: 0 8px 18px rgba(8, 37, 95, 0.16);
-}
-
-.map-pin {
-  width: 42px;
-  height: 42px;
-  background: var(--primary);
-  color: #fff;
-}
-
-.map-pin.pin-a {
-  left: 58px;
-  top: 78px;
-}
-
-.map-pin.pin-b {
-  right: 76px;
-  top: 104px;
-  background: #f5b01a;
-}
-
-.map-pin.pin-c {
-  left: 172px;
-  bottom: 72px;
-  background: #22c55e;
-}
-
-.current-location {
-  right: 38px;
-  bottom: 34px;
-  width: 48px;
-  height: 48px;
-  border: 5px solid rgba(255, 255, 255, 0.86);
-  background: var(--sky-300);
-  color: var(--primary);
-}
-
-.map-floating-card {
-  position: absolute;
-  left: 16px;
-  right: 16px;
-  bottom: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.76);
-  border-radius: 20px;
-  padding: 14px;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(12px);
-  box-shadow: 0 8px 24px rgba(8, 37, 95, 0.12);
-}
-
-.map-floating-card strong {
-  display: block;
-  margin-top: 8px;
-  color: var(--navy);
-  font-size: 17px;
-}
-
-.map-floating-card p {
-  margin: 4px 0 0;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.nearby-panel {
-  display: grid;
-  gap: 12px;
-}
-
-.nearby-panel .section-title-row span {
-  color: var(--primary);
-  font-size: 12px;
-  font-weight: 900;
-}
-
-.nearby-list {
-  display: grid;
-  gap: 10px;
-}
-
-.nearby-list article {
-  display: grid;
-  grid-template-columns: 44px minmax(0, 1fr) auto;
-  gap: 12px;
-  align-items: center;
-  border: 1px solid var(--sky-100);
-  border-radius: 18px;
-  padding: 12px;
-  background: #fff;
-  box-shadow: 0 1px 5px rgba(8, 37, 95, 0.08);
-}
-
-.nearby-icon {
-  display: grid;
-  width: 44px;
-  height: 44px;
-  place-items: center;
-  border-radius: 16px;
-  background: var(--sky-100);
-  color: var(--primary);
-}
-
-.nearby-icon.pin-b {
-  background: rgba(245, 176, 26, 0.16);
-  color: #b77900;
-}
-
-.nearby-icon.pin-c {
-  background: rgba(34, 197, 94, 0.14);
-  color: #138a3d;
-}
-
-.nearby-list strong {
-  display: block;
-  overflow: hidden;
-  color: var(--navy);
-  font-size: 14px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.nearby-list small {
-  display: block;
-  margin-top: 3px;
-  color: var(--muted);
-  font-size: 11px;
-}
-
-.nearby-list em {
-  border-radius: 999px;
-  padding: 5px 8px;
-  background: var(--sky-100);
-  color: var(--primary);
-  font-size: 11px;
-  font-style: normal;
-  font-weight: 900;
-}
-
-.home-device .device-content {
-  background: #f2f7ff;
-}
-
-.app-home-screen {
-  flex: 1;
-  gap: 22px;
-  min-height: 0;
-  padding: 0 18px 22px;
-  background: #f2f7ff;
-}
-
-.home-main-header {
-  min-height: 56px;
-  margin: 0 -18px;
-  padding: 0 22px;
-  background: #fff;
-}
-
-.home-main-header > div {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.home-main-header img {
-  width: 34px;
-  height: 34px;
-  object-fit: contain;
-}
-
-.home-main-header strong {
-  color: var(--primary-soft);
-  font-size: 24px;
-  line-height: 1;
-}
-
-.notification-button {
-  position: relative;
-  display: grid;
-  width: 36px;
-  height: 36px;
-  place-items: center;
-  border-radius: 999px;
-  background: transparent;
-  color: #b7c2d1;
-}
-
-.notification-button span {
-  position: absolute;
-  right: 0;
-  top: 2px;
-  display: grid;
-  width: 18px;
-  height: 18px;
-  place-items: center;
-  border: 2px solid #fff;
-  border-radius: 999px;
-  background: #ef4444;
-  color: #fff;
-  font-size: 10px;
-  font-weight: 900;
-}
-
-.home-hero-panel {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 152px;
-  gap: 8px;
-  align-items: center;
-  margin: 0 -18px;
-  padding: 20px 22px 26px;
-  background: linear-gradient(180deg, #cdeeff 0%, #e9f7ff 100%);
-}
-
-.hello-pill {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 999px;
-  padding: 7px 14px;
-  background: rgba(255, 255, 255, 0.86);
-  color: var(--primary-soft);
-  font-size: 12px;
-  font-weight: 900;
-}
-
-.hello-pill::before {
-  content: "";
-  width: 7px;
-  height: 7px;
-  margin-right: 8px;
-  border-radius: 999px;
-  background: var(--primary-soft);
-}
-
-.home-hero-panel h1 {
-  margin: 18px 0 10px;
-  color: var(--ink);
-  font-size: 26px;
-  line-height: 1.22;
-  letter-spacing: 0;
-}
-
-.home-hero-panel h1 br + * {
-  color: var(--primary-soft);
-}
-
-.home-hero-panel h1 {
-  background: linear-gradient(
-    180deg,
-    var(--ink) 0 48%,
-    var(--primary-soft) 48% 100%
-  );
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-
-.home-hero-panel p {
-  margin: 0 0 18px;
-  color: #718198;
-  font-size: 14px;
-  line-height: 1.55;
-}
-
-.home-hero-panel img {
-  justify-self: end;
-  width: 158px;
-  height: 158px;
-  object-fit: contain;
-  filter: drop-shadow(0 18px 18px rgba(43, 143, 219, 0.18));
-}
-
-.hero-button {
-  width: fit-content;
-  min-height: 40px;
-  border-radius: 18px;
-  padding: 0 18px;
-  background: var(--primary-soft);
-  font-size: 13px;
-  box-shadow: 0 8px 16px rgba(91, 181, 248, 0.28);
-}
-
-.app-home-screen > .search-box {
-  min-height: 44px;
-  margin-top: -4px;
-  border: 1px solid #dce8f5;
-  border-radius: 17px;
-  padding: 0 18px;
-  background: #fff;
-  color: #9aa8bb;
-  box-shadow: 0 3px 9px rgba(8, 37, 95, 0.08);
-}
-
-.app-home-screen > .search-box input {
-  color: var(--ink);
-  font-size: 13px;
-}
-
-.home-stat-card {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  overflow: hidden;
-  border-radius: 18px;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(8, 37, 95, 0.08);
-}
-
-.home-stat-card article {
-  display: grid;
-  gap: 5px;
-  justify-items: center;
-  min-height: 70px;
-  padding: 16px 6px;
-  border-right: 1px solid #e8eff8;
-  text-align: center;
-}
-
-.home-stat-card article:last-child {
-  border-right: 0;
-}
-
-.home-stat-card strong {
-  color: var(--primary-soft);
-  font-size: 18px;
-  line-height: 1;
-}
-
-.home-stat-card span {
-  color: #8b98aa;
-  font-size: 10px;
-  font-weight: 700;
-}
-
-.home-section {
-  display: grid;
-  gap: 14px;
-}
-
-.home-section h2,
-.nearby-section h2 {
-  margin: 0;
-  color: var(--ink);
-  font-size: 18px;
-  line-height: 1.25;
-  letter-spacing: 0;
-}
-
-.category-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 10px;
-}
-
-.category-card {
-  display: grid;
-  gap: 10px;
-  justify-items: center;
-  min-height: 96px;
-  border: 1px solid #dce8f5;
-  border-radius: 15px;
-  padding: 14px 6px 12px;
-  background: #fff;
-  color: var(--ink);
-  box-shadow: 0 2px 6px rgba(8, 37, 95, 0.11);
-}
-
-.category-card span {
-  display: grid;
-  width: 50px;
-  height: 50px;
-  place-items: center;
-  border-radius: 17px;
-}
-
-.category-card strong {
-  color: #59677a;
-  font-size: 11px;
-  line-height: 1.25;
-  text-align: center;
-}
-
-.tone-violet span {
-  background: #eee1ff;
-  color: #8b5cf6;
-}
-
-.tone-green span {
-  background: #e1faef;
-  color: #16a34a;
-}
-
-.tone-amber span {
-  background: #fff1c9;
-  color: #ea8a00;
-}
-
-.tone-blue span {
-  background: #dcecff;
-  color: #2577ff;
-}
-
-.tone-pink span {
-  background: #ffe1f0;
-  color: #ec4899;
-}
-
-.tone-cyan span {
-  background: #cff9fb;
-  color: #0891b2;
-}
-
-.tone-rose span {
-  background: #ffdede;
-  color: #ef4444;
-}
-
-.tone-purple span {
-  background: #f0e3ff;
-  color: #9333ea;
-}
-
-.section-title-row button {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  color: var(--primary-soft);
-  font-size: 13px;
-}
-
-.recommended-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.mission-card {
-  overflow: hidden;
-  border: 1px solid #dce8f5;
-  border-radius: 16px;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(8, 37, 95, 0.09);
-}
-
-.mission-visual {
-  position: relative;
-  display: grid;
-  min-height: 122px;
-  place-items: center;
-}
-
-.mission-visual button {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  display: grid;
-  width: 28px;
-  height: 28px;
-  place-items: center;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.85);
-  color: #b8c3d2;
-}
-
-.mission-visual > span {
-  font-size: 44px;
-  filter: drop-shadow(0 10px 12px rgba(8, 37, 95, 0.12));
-}
-
-.mission-visual.tone-cream {
-  background: linear-gradient(145deg, #fff6cc 0%, #fffef6 100%);
-}
-
-.mission-visual.tone-lavender {
-  background: linear-gradient(145deg, #f6f0ff 0%, #fffaff 100%);
-}
-
-.mission-visual.tone-mint {
-  background: linear-gradient(145deg, #ddfaee 0%, #fafffd 100%);
-}
-
-.mission-visual.tone-peach {
-  background: linear-gradient(145deg, #ffe6d7 0%, #fff9f5 100%);
-}
-
-.mission-visual.tone-blue {
-  background: linear-gradient(145deg, #dff1ff 0%, #f7fcff 100%);
-}
-
-.mission-card-body {
-  padding: 12px 12px 14px;
-}
-
-.mission-chip {
-  display: inline-flex;
-  border-radius: 999px;
-  padding: 5px 9px;
-  background: #fff0c9;
-  color: #f59e0b;
-  font-size: 11px;
-  font-weight: 900;
-}
-
-.mission-card-body strong {
-  display: block;
-  margin-top: 9px;
-  color: var(--ink);
-  font-size: 14px;
-  line-height: 1.35;
-}
-
-.mission-card-body footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 12px;
-  color: #99a6b8;
-  font-size: 12px;
-}
-
-.mission-card-body footer span {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-}
-
-.mission-card-body footer b {
-  color: var(--primary-soft);
-  font-size: 14px;
-}
-
-.nearby-section .section-title-row h2 {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.spot-list {
-  display: grid;
-  gap: 12px;
-}
-
-.spot-list article {
-  display: grid;
-  grid-template-columns: 56px minmax(0, 1fr) auto 34px;
-  gap: 10px;
-  align-items: center;
-  min-height: 76px;
-  border: 1px solid #dce8f5;
-  border-radius: 18px;
-  padding: 10px 12px;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(8, 37, 95, 0.09);
-}
-
-.spot-icon {
-  position: relative;
-  display: grid;
-  width: 50px;
-  height: 50px;
-  place-items: center;
-  border-radius: 17px;
-  background: #e7fff4;
-  color: #14d98b;
-}
-
-.spot-list article:not(.is-done) .spot-icon {
-  background: #e9f5ff;
-  color: var(--primary-soft);
-}
-
-.spot-check,
-.spot-icon b {
-  position: absolute;
-  right: -2px;
-  top: -7px;
-  display: grid;
-  place-items: center;
-  border: 2px solid #fff;
-  border-radius: 999px;
-  background: #16d889;
-  color: #fff;
-}
-
-.spot-icon b {
-  width: 22px;
-  height: 22px;
-  background: var(--primary-soft);
-  font-size: 10px;
-  font-weight: 900;
-}
-
-.spot-info strong {
-  display: block;
-  overflow: hidden;
-  color: var(--ink);
-  font-size: 16px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.spot-info p {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  margin: 7px 0 0;
-  color: #9aa6b8;
-  font-size: 12px;
-}
-
-.spot-info i {
-  width: 1px;
-  height: 10px;
-  background: #d9e2ee;
-}
-
-.spot-info em {
-  color: #16c77a;
-  font-style: normal;
-  font-weight: 900;
-}
-
-.spot-rating {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  color: #697789;
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.spot-list article > button {
-  display: grid;
-  width: 34px;
-  height: 34px;
-  place-items: center;
-  border-radius: 999px;
-  background: #e7fff4;
-  color: #18cc82;
-}
-
-.spot-list article:not(.is-done) > button {
-  background: #e9f5ff;
-  color: var(--primary-soft);
-}
-
-.bonus-banner {
-  display: grid;
-  grid-template-columns: 82px minmax(0, 1fr);
-  gap: 12px;
-  align-items: center;
-  overflow: hidden;
-  min-height: 96px;
-  border-radius: 24px;
-  padding: 18px 20px;
-  background:
-    radial-gradient(
-      circle at right 40%,
-      rgba(255, 255, 255, 0.13) 0 62px,
-      transparent 63px
-    ),
-    linear-gradient(135deg, #55b8fb 0%, #63bded 100%);
-  color: #fff;
-}
-
-.bonus-banner img {
-  width: 72px;
-  height: 72px;
-  object-fit: contain;
-}
-
-.bonus-banner strong {
-  display: block;
-  font-size: 16px;
-  line-height: 1.35;
-}
-
-.bonus-banner p {
-  margin: 6px 0 0;
-  color: rgba(255, 255, 255, 0.82);
-  font-size: 11px;
-}
-
-.mission-card {
-  cursor: pointer;
-}
-
-.mission-detail-actions {
-  display: inline-flex;
-  gap: 8px;
-}
-
-.mission-detail-actions button {
-  display: grid;
-  width: 32px;
-  height: 32px;
-  place-items: center;
-  border-radius: 999px;
-  background: var(--sky-100);
-  color: var(--primary-soft);
-}
-
-.mission-detail-screen {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 14px;
-  overflow-y: auto;
-  padding: 16px 16px 22px;
-  background: #f2f7ff;
-}
-
-.mission-detail-hero {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 118px;
-  align-items: center;
-  min-height: 190px;
-  overflow: hidden;
-  border-radius: 26px;
-  padding: 22px 18px;
-  box-shadow: 0 12px 24px rgba(8, 37, 95, 0.08);
-}
-
-.mission-detail-hero.tone-cream {
-  background: linear-gradient(145deg, #fff6cc 0%, #fffef6 100%);
-}
-
-.mission-detail-hero.tone-lavender {
-  background: linear-gradient(145deg, #f1e8ff 0%, #fffaff 100%);
-}
-
-.mission-detail-hero.tone-mint {
-  background: linear-gradient(145deg, #ddfaee 0%, #fafffd 100%);
-}
-
-.mission-detail-hero.tone-peach {
-  background: linear-gradient(145deg, #ffe6d7 0%, #fff9f5 100%);
-}
-
-.mission-detail-hero.tone-blue {
-  background: linear-gradient(145deg, #dff1ff 0%, #f7fcff 100%);
-}
-
-.mission-detail-hero h1 {
-  margin: 12px 0 8px;
-  color: var(--ink);
-  font-size: 25px;
-  line-height: 1.26;
-  letter-spacing: 0;
-}
-
-.mission-detail-hero p {
-  margin: 0;
-  color: #64758d;
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.mission-detail-hero > span {
-  justify-self: center;
-  font-size: 76px;
-  filter: drop-shadow(0 16px 18px rgba(8, 37, 95, 0.12));
-}
-
-.detail-reward-card {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  overflow: hidden;
-  border-radius: 20px;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(8, 37, 95, 0.08);
-}
-
-.detail-reward-card div {
-  display: grid;
-  gap: 5px;
-  justify-items: center;
-  min-height: 88px;
-  padding: 14px 6px;
-  border-right: 1px solid #e8eff8;
-  color: var(--primary-soft);
-  text-align: center;
-}
-
-.detail-reward-card div:last-child {
-  border-right: 0;
-}
-
-.detail-reward-card span {
-  color: #8b98aa;
-  font-size: 10px;
-  font-weight: 800;
-}
-
-.detail-reward-card strong {
-  color: var(--ink);
-  font-size: 14px;
-}
-
-.detail-card,
-.review-summary-card {
-  border: 1px solid #dce8f5;
-  border-radius: 20px;
-  padding: 16px;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(8, 37, 95, 0.08);
-}
-
-.detail-card header {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  color: var(--primary-soft);
-}
-
-.detail-card h2 {
-  margin: 0;
-  color: var(--ink);
-  font-size: 15px;
-  line-height: 1.3;
-}
-
-.detail-card p {
-  margin: 10px 0 0;
-  color: #65758b;
-  font-size: 13px;
-  line-height: 1.65;
-}
-
-.location-detail-card strong {
-  display: block;
-  margin-top: 12px;
-  color: var(--ink);
-  font-size: 16px;
-}
-
-.mini-map-preview {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 92px;
-  margin-top: 14px;
-  overflow: hidden;
-  border-radius: 18px;
-  padding: 14px;
-  background:
-    linear-gradient(90deg, rgba(8, 37, 95, 0.05) 1px, transparent 1px),
-    linear-gradient(0deg, rgba(8, 37, 95, 0.05) 1px, transparent 1px),
-    linear-gradient(145deg, #e5f6ff 0%, #f8fdff 100%);
-  background-size:
-    34px 34px,
-    34px 34px,
-    auto;
-  color: var(--primary-soft);
-}
-
-.mini-map-preview span {
-  display: grid;
-  width: 38px;
-  height: 38px;
-  place-items: center;
-  border-radius: 999px;
-  background: var(--primary-soft);
-  color: #fff;
-  box-shadow: 0 8px 16px rgba(43, 143, 219, 0.18);
-}
-
-.mini-map-preview b {
-  border-radius: 999px;
-  padding: 7px 10px;
-  background: rgba(255, 255, 255, 0.86);
-  color: var(--ink);
-  font-size: 12px;
-}
-
-.mission-step-list {
-  display: grid;
-  gap: 10px;
-  margin: 14px 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.mission-step-list li {
-  display: grid;
-  grid-template-columns: 28px minmax(0, 1fr) 20px;
-  gap: 10px;
-  align-items: center;
-  min-height: 42px;
-}
-
-.mission-step-list li > span {
-  display: grid;
-  width: 28px;
-  height: 28px;
-  place-items: center;
-  border-radius: 999px;
-  background: var(--sky-100);
-  color: var(--primary-soft);
-  font-size: 12px;
-  font-weight: 900;
-}
-
-.mission-step-list p {
-  margin: 0;
-  color: var(--ink);
-  font-weight: 800;
-}
-
-.mission-step-list svg {
-  color: #16d889;
-}
-
-.review-summary-card {
-  display: grid;
-  gap: 10px;
-  background: linear-gradient(145deg, #fff 0%, #f7fbff 100%);
-}
-
-.review-summary-card div {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  color: #f5b01a;
+@theme {
+  --color-primary: #1673f8;
 }
 
-.review-summary-card strong {
+:root {
+  --primary: #1673f8;
+  --primary-soft: #5bb5f8;
+  --navy: #08255f;
+  --sky-50: #f0f6ff;
+  --sky-100: #eaf5ff;
+  --sky-200: #e0f2ff;
+  --sky-300: #c8e8ff;
+  --border: #dde4ee;
+  --muted: #6d7e9e;
+  --muted-2: #9bafc8;
+  --surface: rgba(255, 255, 255, 0.88);
+  --app-bg: #f4f8ff;
+  --ink: #1c1c3a;
   color: var(--ink);
-  font-size: 16px;
-}
-
-.review-summary-card span {
-  color: #8b98aa;
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.review-summary-card p {
-  margin: 0;
-  color: #65758b;
-  font-size: 13px;
-  line-height: 1.55;
-}
-
-.detail-start-button {
-  position: sticky;
-  bottom: 0;
-  min-height: 54px;
-  border-radius: 18px;
-  box-shadow: 0 10px 22px rgba(91, 181, 248, 0.28);
-}
-
-.my-device .device-content,
-.questy-device .device-content {
-  background: #f2f7ff;
-}
-
-.my-screen,
-.questy-screen {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 0;
-  overflow-y: auto;
-  background: #f2f7ff;
-}
-
-.my-main-header,
-.questy-logo-header {
-  flex: 0 0 auto;
-  min-height: 66px;
-  padding: 0 30px;
-  background: #fff;
-}
-
-.my-main-header > div,
-.questy-logo-header > div {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-}
-
-.my-main-header img,
-.questy-logo-header img {
-  width: 35px;
-  height: 35px;
-  object-fit: contain;
-}
-
-.my-main-header strong,
-.questy-logo-header strong {
-  color: var(--primary-soft);
-  font-size: 25px;
-}
-
-.profile-hero {
-  position: relative;
-  display: grid;
-  justify-items: center;
-  min-height: 350px;
-  overflow: hidden;
-  padding: 44px 24px 30px;
-  background: linear-gradient(180deg, #cfefff 0%, #e7f6ff 100%);
-  text-align: center;
-}
-
-.profile-hero::after {
-  content: "";
-  position: absolute;
-  right: -64px;
-  top: 0;
-  width: 190px;
-  height: 190px;
-  border-radius: 999px;
-  background: rgba(8, 37, 95, 0.08);
-}
-
-.profile-avatar {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  width: 112px;
-  height: 112px;
-  place-items: center;
-  border-radius: 999px;
-  background: #fff;
-  box-shadow: 0 8px 20px rgba(8, 37, 95, 0.14);
-}
-
-.profile-avatar img {
-  width: 86px;
-  height: 86px;
-  object-fit: contain;
-}
-
-.profile-avatar button {
-  position: absolute;
-  right: -5px;
-  bottom: 9px;
-  display: grid;
-  width: 34px;
-  height: 34px;
-  place-items: center;
-  border-radius: 999px;
-  background: var(--primary-soft);
-  color: #fff;
-  box-shadow: 0 6px 12px rgba(91, 181, 248, 0.28);
+  font-family:
+    "Noto Sans KR",
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
 }
 
-.profile-hero h1 {
-  z-index: 1;
-  margin: 22px 0 4px;
-  color: var(--ink);
-  font-size: 25px;
-  line-height: 1.25;
+* {
+  box-sizing: border-box;
 }
 
-.profile-hero p {
-  z-index: 1;
+body {
   margin: 0;
-  color: #9aa6b8;
-  font-size: 15px;
-}
-
-.profile-stats {
-  z-index: 1;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  width: 250px;
-  margin-top: 26px;
-}
-
-.profile-stats article {
-  display: grid;
-  gap: 7px;
-}
-
-.profile-stats strong {
-  color: var(--primary-soft);
-  font-size: 24px;
-  line-height: 1;
-}
-
-.profile-stats span {
-  color: #9aa6b8;
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.my-content-stack {
-  display: grid;
-  gap: 16px;
-  padding: 28px 22px 24px;
-}
-
-.questy-promo-card {
-  display: grid;
-  grid-template-columns: 86px minmax(0, 1fr) 22px;
-  gap: 14px;
-  align-items: center;
-  min-height: 128px;
-  border: 1px solid #cde9ff;
-  border-radius: 20px;
-  padding: 18px;
-  background: #fff;
-  color: var(--ink);
-  text-align: left;
-  box-shadow: 0 2px 8px rgba(8, 37, 95, 0.11);
-}
-
-.questy-promo-card img {
-  width: 76px;
-  height: 76px;
-  object-fit: contain;
-  animation: questyFloat 3.2s ease-in-out infinite;
-}
-
-.questy-promo-card strong {
-  display: block;
-  color: var(--ink);
-  font-size: 19px;
-  line-height: 1.25;
-}
-
-.questy-promo-card p {
-  margin: 6px 0 10px;
-  color: #9aa6b8;
-  font-size: 12px;
-  line-height: 1.45;
-}
-
-.questy-promo-card span {
-  display: flex;
-  gap: 7px;
-}
-
-.questy-promo-card b,
-.questy-promo-card em {
-  border-radius: 999px;
-  padding: 6px 10px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 900;
-}
-
-.questy-promo-card b {
-  background: var(--primary-soft);
-  color: #fff;
-}
-
-.questy-promo-card em {
-  background: #fff0c9;
-  color: #ea8a00;
-}
-
-.questy-promo-card > svg {
-  color: #c8e8ff;
-}
-
-.my-quick-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.my-quick-grid button {
-  display: grid;
-  gap: 10px;
-  justify-items: center;
-  min-height: 116px;
-  border: 1px solid #dce8f5;
-  border-radius: 18px;
-  padding: 24px 6px 18px;
-  background: #fff;
-  color: #7d8794;
-  box-shadow: 0 2px 8px rgba(8, 37, 95, 0.1);
-}
-
-.my-quick-grid strong {
-  font-size: 14px;
-}
-
-.my-panel {
-  border: 1px solid #dce8f5;
-  border-radius: 20px;
-  padding: 18px;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(8, 37, 95, 0.08);
-}
-
-.my-panel h2 {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: 0 0 15px;
-  color: var(--ink);
-  font-size: 16px;
-}
-
-.style-tag-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.style-tag-row span {
-  border-radius: 999px;
-  padding: 10px 14px;
-  background: var(--primary-soft);
-  color: #fff;
-  font-size: 13px;
-  font-weight: 900;
+  min-width: 320px;
+  min-height: 100vh;
+  background: linear-gradient(143deg, #c8e8ff 0%, #eaf5ff 50%, #d4ecff 100%);
 }
 
-.progress-panel {
-  gap: 11px;
+button {
+  font: inherit;
 }
 
-.progress-panel div {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #8a98aa;
-  font-size: 13px;
-  font-weight: 800;
+input {
+  font: inherit;
 }
 
-.progress-panel strong {
-  color: var(--ink);
-  font-size: 16px;
+textarea {
+  font: inherit;
 }
 
-.progress-panel progress {
-  width: 100%;
-  height: 10px;
-  overflow: hidden;
+button {
   border: 0;
-  border-radius: 999px;
-  background: var(--sky-100);
-}
-
-.progress-panel progress::-webkit-progress-bar {
-  background: var(--sky-100);
-}
-
-.progress-panel progress::-webkit-progress-value {
-  border-radius: inherit;
-  background: var(--primary-soft);
-}
-
-.review-panel p {
-  margin: 0;
-  color: #65758b;
-  font-size: 13px;
-  line-height: 1.55;
-}
-
-.questy-screen {
-  background: #eef6ff;
-}
-
-.questy-logo-header {
-  min-height: 64px;
-}
-
-.point-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  border-radius: 999px;
-  padding: 9px 14px;
-  background: var(--sky-100);
-  color: var(--primary-soft);
-  font-size: 14px;
-  font-weight: 900;
-}
-
-.questy-preview {
-  position: relative;
-  display: grid;
-  justify-items: center;
-  min-height: 344px;
-  padding: 28px 20px 24px;
-  background: linear-gradient(180deg, #caedff 0%, #e3f5ff 100%);
-}
-
-.sparkle {
-  position: absolute;
-  color: #fcd34d;
-  font-size: 20px;
-  animation: sparkleBlink 1.8s ease-in-out infinite;
-}
-
-.sparkle-a {
-  left: 54px;
-  top: 36px;
-}
-
-.sparkle-b {
-  right: 74px;
-  top: 52px;
-  animation-delay: 0.5s;
-}
-
-.questy-avatar {
-  position: relative;
-  display: grid;
-  width: 204px;
-  height: 204px;
-  place-items: center;
-  background: rgba(255, 255, 255, 0.72);
-}
-
-.questy-avatar-img {
-  width: 176px;
-  height: 176px;
-  object-fit: contain;
-  animation: questyDance 2.4s ease-in-out infinite;
-  filter: drop-shadow(0 14px 16px rgba(8, 37, 95, 0.16));
-}
-
-.questy-avatar b {
-  position: absolute;
-  right: -17px;
-  top: -16px;
-  display: grid;
-  width: 48px;
-  height: 48px;
-  place-items: center;
-  border: 5px solid rgba(28, 28, 58, 0.42);
-  border-radius: 999px;
-  background: #8e36ff;
-  color: #fff;
-  font-size: 18px;
-  box-shadow: 0 5px 10px rgba(28, 28, 58, 0.32);
-}
-
-.questy-hat,
-.questy-glasses,
-.questy-scarf,
-.questy-bag {
-  position: absolute;
-  z-index: 2;
-  pointer-events: none;
-}
-
-.questy-hat {
-  left: 55px;
-  top: 5px;
-  font-size: 40px;
-  transform: rotate(-8deg);
-  animation: accessoryWiggle 2.4s ease-in-out infinite;
-}
-
-.questy-glasses {
-  left: 76px;
-  top: 76px;
-  color: #111827;
-  opacity: 0.9;
-}
-
-.questy-scarf {
-  left: 50px;
-  top: 98px;
-  font-size: 35px;
-  transform: rotate(-28deg);
-}
-
-.questy-bag {
-  left: 24px;
-  bottom: 18px;
-  font-size: 36px;
-  transform: rotate(-12deg);
-}
-
-.equipped-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 9px;
-  margin-top: 18px;
-}
-
-.equipped-row span {
-  border-radius: 999px;
-  padding: 8px 10px;
-  background: #fff;
-  color: var(--primary-soft);
-  font-size: 12px;
-  font-weight: 900;
-}
-
-.questy-preview p {
-  margin: 14px 0 0;
-  color: #9aa6b8;
-  font-size: 13px;
-}
-
-.closet-panel {
-  display: grid;
-  gap: 16px;
-  padding: 22px;
-}
-
-.closet-tabs {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  border-radius: 22px;
-  padding: 6px;
-  background: #e6f4ff;
-}
-
-.closet-tabs button,
-.closet-filters button {
-  min-height: 44px;
-  border-radius: 18px;
-  background: transparent;
-  color: #9aa6b8;
-  font-weight: 900;
-}
-
-.closet-tabs .is-selected {
-  background: #fff;
-  color: var(--primary-soft);
-  box-shadow: 0 2px 8px rgba(8, 37, 95, 0.08);
-}
-
-.closet-filters {
-  display: flex;
-  gap: 8px;
-  overflow-x: auto;
-}
-
-.closet-filters button {
-  flex: 0 0 auto;
-  min-height: 36px;
-  padding: 0 15px;
-  background: #e7f4ff;
-  font-size: 13px;
-}
-
-.closet-filters .is-selected {
-  background: var(--primary-soft);
-  color: #fff;
-}
-
-.closet-count {
-  margin: 0;
-  color: #8a98aa;
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.closet-count b {
-  color: var(--ink);
-}
-
-.closet-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 14px;
-}
-
-.closet-grid article {
-  display: grid;
-  justify-items: center;
-  border: 2px solid var(--primary-soft);
-  border-radius: 17px;
-  padding: 18px 8px 12px;
-  background: #fff;
-  text-align: center;
-}
-
-.closet-grid article > span {
-  display: grid;
-  width: 56px;
-  height: 56px;
-  place-items: center;
-  border-radius: 16px;
-  background: #f3f6fb;
-  font-size: 31px;
-}
-
-.closet-grid strong {
-  margin-top: 12px;
-  color: var(--ink);
-  font-size: 12px;
-  line-height: 1.3;
-}
-
-.closet-grid small {
-  margin-top: 8px;
-  color: #9aa6b8;
-  font-size: 11px;
-  font-weight: 800;
-}
-
-.closet-grid button {
-  margin-top: 9px;
-  border-radius: 999px;
-  padding: 7px 10px;
-  background: var(--primary-soft);
-  color: #fff;
-  font-size: 11px;
-  font-weight: 900;
-}
-
-.locked-item-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: 18px;
-  padding: 14px 16px;
-  background: #fff;
-  color: #8a98aa;
-  font-size: 12px;
-  font-weight: 800;
+  cursor: pointer;
 }
 
-.locked-item-row span {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
+a {
+  text-decoration: none;
 }
 
-.locked-item-row > svg {
-  color: var(--primary-soft);
+textarea::placeholder {
+  color: #c6d1e0;
 }
 
 @keyframes questyFloat {
@@ -3130,26 +113,3 @@ textarea::placeholder {
     transform: scale(1.12);
   }
 }
-
-@media (max-width: 380px) {
-  .home-hero-panel {
-    grid-template-columns: 1fr 126px;
-  }
-
-  .home-hero-panel img {
-    width: 126px;
-    height: 126px;
-  }
-
-  .category-grid {
-    gap: 8px;
-  }
-
-  .category-card strong {
-    font-size: 10px;
-  }
-
-  .closet-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}