diff --git a/frontend/src/views/seller/SellerListingCreateView.css b/frontend/src/views/seller/SellerListingCreateView.css
new file mode 100644
index 0000000..3c7b76f
--- /dev/null
+++ b/frontend/src/views/seller/SellerListingCreateView.css
@@ -0,0 +1,677 @@
+.publish-page {
+  min-width: 0;
+  color: #20242a;
+}
+
+.publish-layout {
+  display: grid;
+  grid-template-columns: minmax(760px, 920px) 300px;
+  align-items: start;
+  gap: 18px;
+  max-width: 1238px;
+  margin: 0 auto;
+}
+
+.form-column {
+  display: grid;
+  min-width: 0;
+  gap: 18px;
+}
+
+.summary-panel {
+  border: 1px solid #e6ebf2;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 12px 34px rgba(20, 34, 56, 0.05);
+}
+
+.field-row {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr);
+  gap: 14px;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.panel-field-row,
+.panel-input-grid {
+  padding: 12px;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.panel-input-grid {
+  align-items: end;
+}
+
+.field-row > label,
+.input-block > span {
+  color: #303743;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 22px;
+}
+
+.field-row label span,
+.input-block b,
+.level-row strong span,
+.upload-copy strong span {
+  color: #f04438;
+}
+
+.level-btn,
+.region-btn,
+.mode-toggle button,
+.ratio-mode-btn {
+  border: 1px solid #d6dce5;
+  background: #fff;
+  color: #596474;
+  font-weight: 800;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
+}
+
+.level-btn.active,
+.region-btn.active {
+  border-color: #1477ff;
+  background: #1477ff;
+  color: #fff;
+}
+
+.compact-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.compact-grid.two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.input-block {
+  display: grid;
+  min-width: 0;
+  gap: 8px;
+}
+
+.input-block :deep(.el-input-number),
+.input-block :deep(.el-input),
+.input-block :deep(.el-date-editor) {
+  width: 100%;
+}
+
+.input-block :deep(.el-input__wrapper),
+.input-block :deep(.el-textarea__inner) {
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px #dfe5ee inset;
+}
+
+.level-panel {
+  display: grid;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.level-row {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.level-row strong {
+  font-size: 13px;
+}
+
+.level-options {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 9px;
+}
+
+.level-btn {
+  height: 30px;
+  min-width: 0;
+  border-radius: 15px;
+}
+
+.field-hint {
+  grid-column: 2;
+  margin: 0;
+  color: #7f8895;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.login-method-row {
+  padding: 12px;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.login-method-row .field-hint {
+  margin-top: -2px;
+}
+
+.quantity-table {
+  display: grid;
+  gap: 8px;
+}
+
+.quantity-header,
+.quantity-item {
+  display: grid;
+  grid-template-columns: minmax(160px, 1fr) 90px 112px 112px 92px;
+  gap: 12px;
+  align-items: center;
+}
+
+.quantity-header {
+  min-height: 30px;
+  padding: 0 12px;
+  color: #7b8492;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.quantity-item {
+  min-height: 58px;
+  padding: 12px;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.quantity-meta {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+}
+
+.quantity-meta strong {
+  overflow: hidden;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.quantity-meta small,
+.quantity-price,
+.quantity-status,
+.upload-copy small,
+.region-title span {
+  color: #7f8895;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.quantity-price,
+.quantity-status {
+  white-space: nowrap;
+}
+
+.quantity-item.disabled {
+  opacity: 0.62;
+}
+
+.quantity-item :deep(.el-input-number) {
+  width: 100%;
+  min-width: 0;
+}
+
+.mode-toggle {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+  min-width: 0;
+}
+
+.mode-toggle button {
+  height: 30px;
+  min-width: 0;
+  border-radius: 8px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.mode-toggle button:disabled {
+  cursor: not-allowed;
+}
+
+.mode-toggle button.active {
+  border-color: #ff6a00;
+  background: #fff3ea;
+  color: #e65f00;
+}
+
+.recommend-button {
+  flex: 0 0 auto;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid #ffba86;
+  border-radius: 8px;
+  background: #fff7f0;
+  color: #e65f00;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.deposit-control {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.deposit-breakdown {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.deposit-breakdown span {
+  min-height: 24px;
+  padding: 4px 8px;
+  border-radius: 12px;
+  background: #fff7f0;
+  color: #e65f00;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.skin-groups {
+  display: grid;
+  gap: 10px;
+}
+
+.skin-group,
+.region-panel,
+.ratio-panel {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.skin-title,
+.region-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+}
+
+.skin-group {
+  border: none;
+}
+
+.skin-title {
+  min-height: 34px;
+  margin-bottom: 8px;
+}
+
+.time-preset-panel {
+  display: grid;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.time-preset-row {
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+  padding: 12px;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.time-preset-row strong {
+  color: #303743;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 32px;
+}
+
+.time-preset-content {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.time-input {
+  width: 118px;
+}
+
+.time-input :deep(.el-input__wrapper) {
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px #dfe5ee inset;
+}
+
+.login-region-panel {
+  margin-top: 18px;
+}
+
+.region-grid {
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.region-btn {
+  height: 32px;
+  min-width: 0;
+  border-radius: 16px;
+}
+
+.upload-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.upload-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 96px;
+  gap: 12px;
+  align-items: center;
+  min-height: 112px;
+  padding: 12px;
+  border: 1px solid #e6ebf2;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.upload-copy {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+}
+
+.upload-copy strong {
+  color: #232a35;
+  font-size: 14px;
+}
+
+.upload-copy small {
+  line-height: 1.45;
+}
+
+.upload-add,
+.upload-preview {
+  width: 96px;
+  height: 88px;
+  border-radius: 8px;
+}
+
+.upload-add {
+  display: grid;
+  place-items: center;
+  border: 1px dashed #c7ceda;
+  background: #fff;
+  color: #727d8d;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.upload-add:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.upload-preview {
+  position: relative;
+  overflow: hidden;
+  background: #e8edf4;
+}
+
+.upload-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.upload-preview button {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  border: none;
+  border-radius: 8px;
+  background: rgba(17, 24, 39, 0.72);
+  color: #fff;
+  cursor: pointer;
+}
+
+.hidden-file {
+  display: none;
+}
+
+.ratio-panel {
+  margin-top: 14px;
+}
+
+.ratio-reference {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.ratio-reference span {
+  color: #303743;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.ratio-reference strong,
+.price-cell strong,
+.summary-main strong {
+  color: #ff6a00;
+  font-weight: 900;
+}
+
+.ratio-reference strong {
+  font-size: 22px;
+}
+
+.ratio-panel p {
+  margin: 0;
+  color: #7f8895;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.ratio-mode-grid,
+.price-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.ratio-mode-btn {
+  display: grid;
+  gap: 6px;
+  min-height: 72px;
+  padding: 12px;
+  border-radius: 8px;
+  text-align: left;
+}
+
+.ratio-mode-btn span {
+  color: #7f8895;
+  font-size: 12px;
+}
+
+.ratio-mode-btn.active {
+  border-color: #ff6a00;
+  background: #fff7f0;
+  color: #ff6a00;
+}
+
+.ratio-mode-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.price-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-top: 14px;
+}
+
+.price-cell {
+  display: grid;
+  gap: 6px;
+  min-height: 82px;
+  padding: 14px;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.price-cell span {
+  color: #6f7a89;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.price-cell strong {
+  overflow-wrap: anywhere;
+  font-size: 21px;
+}
+
+.price-cell.accent {
+  background: #fff7f0;
+}
+
+.remark {
+  margin-top: 14px;
+}
+
+.summary-column {
+  min-width: 0;
+  position: sticky;
+  top: 76px;
+  align-self: start;
+  height: fit-content;
+}
+
+.summary-panel {
+  padding: 16px;
+}
+
+.summary-main {
+  display: grid;
+  gap: 8px;
+  padding: 16px;
+  border-radius: 8px;
+  background: #fff7f0;
+}
+
+.summary-main span,
+.summary-list span {
+  color: #6f7a89;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.summary-main strong {
+  font-size: 34px;
+  line-height: 1;
+}
+
+.summary-list {
+  display: grid;
+  gap: 10px;
+  margin: 14px 0;
+}
+
+.summary-list div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eef2f6;
+}
+
+.summary-list strong {
+  color: #20242a;
+  font-size: 13px;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.summary-actions {
+  display: grid;
+  gap: 10px;
+}
+
+.summary-actions :deep(.el-button) {
+  width: 100%;
+  margin-left: 0;
+}
+
+@media (max-width: 1180px) {
+  .publish-layout {
+    grid-template-columns: 1fr;
+    max-width: 920px;
+  }
+
+  .summary-column {
+    display: none;
+  }
+}
+
+@media (max-width: 860px) {
+  .field-row,
+  .compact-grid,
+  .compact-grid.two,
+  .upload-grid,
+  .price-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .quantity-header {
+    display: none;
+  }
+
+  .field-hint {
+    grid-column: auto;
+  }
+
+  .quantity-item,
+  .upload-item {
+    grid-template-columns: 1fr;
+  }
+
+  .deposit-control,
+  .ratio-mode-grid,
+  .time-preset-row {
+    grid-template-columns: 1fr;
+  }
+
+  .time-input {
+    width: 140px;
+  }
+
+  .upload-add,
+  .upload-preview {
+    width: 100%;
+  }
+
+  .region-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
diff --git a/frontend/src/views/seller/SellerListingCreateView.vue b/frontend/src/views/seller/SellerListingCreateView.vue
index 07b75b5..d2c4761 100644
--- a/frontend/src/views/seller/SellerListingCreateView.vue
+++ b/frontend/src/views/seller/SellerListingCreateView.vue
@@ -3,6 +3,8 @@ import { Delete, DocumentChecked, Picture, RefreshRight, UploadFilled } from '@e
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 import { usePublishForm } from '@/composables/usePublishForm'
+import OptionChips from './components/OptionChips.vue'
+import PublishSection from './components/PublishSection.vue'
 
 const {
   commonOnlineTimes,
@@ -81,48 +83,29 @@ const {
   notifyWarning: (message) => ElMessage.warning(message),
   notifyError: (message) => ElMessage.error(message),
 })
+
+function toggleSkinOption(value: string | number) {
+  toggleSkin(String(value))
+}
+
+function selectDailyLoss(value: string | number) {
+  form.daily_loss_m = Number(value)
+}
 </script>
 
 <template>
   <main class="publish-page">
     <div class="publish-layout">
       <section class="form-column">
-        <section class="form-section">
-          <div class="section-heading">
-            <h2>基础资料</h2>
-            <span>{{ publishTitle }}</span>
-          </div>
-
+        <PublishSection title="基础资料" :description="publishTitle">
           <div class="field-row panel-field-row">
             <label>区服<span>*</span></label>
-            <div class="chip-group">
-              <button
-                v-for="opt in serverOptions"
-                :key="opt"
-                type="button"
-                class="chip"
-                :class="{ active: form.server_region === opt }"
-                @click="form.server_region = opt"
-              >
-                {{ opt }}
-              </button>
-            </div>
+            <OptionChips :options="serverOptions" :model-value="form.server_region" @select="form.server_region = String($event)" />
           </div>
 
           <div v-if="faceOptions.length" class="field-row panel-field-row">
             <label>是否本人人脸</label>
-            <div class="chip-group">
-              <button
-                v-for="opt in faceOptions"
-                :key="opt"
-                type="button"
-                class="chip"
-                :class="{ active: form.face_owner === opt }"
-                @click="form.face_owner = opt"
-              >
-                {{ opt }}
-              </button>
-            </div>
+            <OptionChips :options="faceOptions" :model-value="form.face_owner" @select="form.face_owner = String($event)" />
           </div>
 
           <div class="compact-grid panel-input-grid">
@@ -148,34 +131,16 @@ const {
 
           <div class="field-row panel-field-row">
             <label>段位<span>*</span></label>
-            <div class="chip-group">
-              <button
-                v-for="opt in rankOptions"
-                :key="opt"
-                type="button"
-                class="chip"
-                :class="{ active: form.rank_level === opt }"
-                @click="form.rank_level = opt"
-              >
-                {{ opt }}
-              </button>
-            </div>
+            <OptionChips :options="rankOptions" :model-value="form.rank_level" @select="form.rank_level = String($event)" />
           </div>
 
           <div class="field-row panel-field-row">
             <label>赛季保险<span>*</span></label>
-            <div class="chip-group">
-              <button
-                v-for="opt in insuranceOptions"
-                :key="opt"
-                type="button"
-                class="chip"
-                :class="{ active: form.season_insurance === opt }"
-                @click="form.season_insurance = opt"
-              >
-                {{ opt }}
-              </button>
-            </div>
+            <OptionChips
+              :options="insuranceOptions"
+              :model-value="form.season_insurance"
+              @select="form.season_insurance = String($event)"
+            />
           </div>
 
           <div class="level-panel">
@@ -210,13 +175,9 @@ const {
               </div>
             </div>
           </div>
-        </section>
+        </PublishSection>
 
-        <section v-if="quantityItems.length" class="form-section">
-          <div class="section-heading">
-            <h2>额外消耗品</h2>
-            <span>收费项会计入发布价格</span>
-          </div>
+        <PublishSection v-if="quantityItems.length" title="额外消耗品" description="收费项会计入发布价格">
           <div class="quantity-table">
             <div class="quantity-header">
               <span>物资</span>
@@ -265,13 +226,9 @@ const {
               </span>
             </div>
           </div>
-        </section>
-
-        <section class="form-section">
-          <div class="section-heading">
-            <h2>皮肤与交接</h2>
-          </div>
+        </PublishSection>
 
+        <PublishSection title="皮肤与交接">
           <div v-if="skinGroups.length" class="skin-groups">
             <div
               v-for="group in skinGroups"
@@ -281,35 +238,17 @@ const {
               <div class="skin-title">
                 <strong>{{ group.title }}</strong>
               </div>
-              <div class="chip-group">
-                <button
-                  v-for="skin in group.options"
-                  :key="skin"
-                  type="button"
-                  class="chip"
-                  :class="{ active: selectedSkins.includes(skin) }"
-                  @click="toggleSkin(skin)"
-                >
-                  {{ skin }}
-                </button>
-              </div>
+              <OptionChips :options="group.options" :active-values="selectedSkins" @select="toggleSkinOption" />
             </div>
           </div>
 
           <div class="field-row login-method-row">
             <label>上号方式</label>
-            <div class="chip-group">
-              <button
-                v-for="opt in loginMethodOptions"
-                :key="opt"
-                type="button"
-                class="chip"
-                :class="{ active: form.login_method === opt }"
-                @click="form.login_method = opt"
-              >
-                {{ opt }}
-              </button>
-            </div>
+            <OptionChips
+              :options="loginMethodOptions"
+              :model-value="form.login_method"
+              @select="form.login_method = String($event)"
+            />
             <p class="field-hint">优先推荐账密登录，出售速度通常更快；请结合账号安全情况自行选择。</p>
           </div>
 
@@ -324,18 +263,12 @@ const {
                   placeholder="开始时间"
                   class="time-input"
                 />
-                <div class="chip-group">
-                  <button
-                    v-for="time in commonOnlineTimes"
-                    :key="`start-${time}`"
-                    type="button"
-                    class="chip"
-                    :class="{ active: form.online_start === time }"
-                    @click="form.online_start = time"
-                  >
-                    {{ time }}
-                  </button>
-                </div>
+                <OptionChips
+                  :options="commonOnlineTimes"
+                  :model-value="form.online_start"
+                  key-prefix="start-"
+                  @select="form.online_start = String($event)"
+                />
               </div>
             </div>
             <div class="time-preset-row">
@@ -348,18 +281,12 @@ const {
                   placeholder="结束时间"
                   class="time-input"
                 />
-                <div class="chip-group">
-                  <button
-                    v-for="time in commonOnlineTimes"
-                    :key="`end-${time}`"
-                    type="button"
-                    class="chip"
-                    :class="{ active: form.online_end === time }"
-                    @click="form.online_end = time"
-                  >
-                    {{ time }}
-                  </button>
-                </div>
+                <OptionChips
+                  :options="commonOnlineTimes"
+                  :model-value="form.online_end"
+                  key-prefix="end-"
+                  @select="form.online_end = String($event)"
+                />
               </div>
             </div>
           </div>
@@ -367,18 +294,7 @@ const {
 
           <div v-if="banRecordOptions.length" class="field-row">
             <label>封禁记录<span>*</span></label>
-            <div class="chip-group">
-              <button
-                v-for="opt in banRecordOptions"
-                :key="opt"
-                type="button"
-                class="chip"
-                :class="{ active: form.ban_record === opt }"
-                @click="form.ban_record = opt"
-              >
-                {{ opt }}
-              </button>
-            </div>
+            <OptionChips :options="banRecordOptions" :model-value="form.ban_record" @select="form.ban_record = String($event)" />
           </div>
 
           <div v-if="regionOptions.length" class="region-panel login-region-panel">
@@ -399,13 +315,9 @@ const {
               </button>
             </div>
           </div>
-        </section>
+        </PublishSection>
 
-        <section class="form-section">
-          <div class="section-heading">
-            <h2>截图材料</h2>
-            <span>{{ uploadedScreenshotCount }}/{{ screenshotSlots.length }} 已上传</span>
-          </div>
+        <PublishSection title="截图材料" :description="`${uploadedScreenshotCount}/${screenshotSlots.length} 已上传`">
           <div class="upload-grid">
             <div v-for="slot in screenshotSlots" :key="slot.key" class="upload-item">
               <div class="upload-copy">
@@ -431,14 +343,9 @@ const {
             class="hidden-file"
             @change="handleScreenshotUpload"
           />
-        </section>
-
-        <section class="form-section">
-          <div class="section-heading">
-            <h2>押金与价格</h2>
-            <span>系统按资料自动计算售价</span>
-          </div>
+        </PublishSection>
 
+        <PublishSection title="押金与价格" description="系统按资料自动计算售价">
           <div class="compact-grid two">
             <label class="input-block">
               <span>押金<b>*</b></span>
@@ -461,18 +368,13 @@ const {
             </label>
             <label class="input-block">
               <span>每日损耗<b>*</b></span>
-              <div class="chip-group compact">
-                <button
-                  v-for="loss in dailyLossOptions"
-                  :key="loss"
-                  type="button"
-                  class="chip"
-                  :class="{ active: dailyLossMAmount === loss }"
-                  @click="form.daily_loss_m = loss"
-                >
-                  {{ loss }}M/天
-                </button>
-              </div>
+              <OptionChips
+                :options="dailyLossOptions"
+                :model-value="dailyLossMAmount"
+                compact
+                suffix="M/天"
+                @select="selectDailyLoss"
+              />
             </label>
           </div>
 
@@ -545,7 +447,7 @@ const {
               placeholder="如有不可使用的物资，请在此备注，并在买家下单后主动提醒。"
             />
           </label>
-        </section>
+        </PublishSection>
       </section>
 
       <aside class="summary-column">
@@ -587,730 +489,4 @@ const {
   </main>
 </template>
 
-<style scoped>
-.publish-page {
-  min-width: 0;
-  color: #20242a;
-}
-
-.publish-layout {
-  display: grid;
-  grid-template-columns: minmax(760px, 920px) 300px;
-  align-items: start;
-  gap: 18px;
-  max-width: 1238px;
-  margin: 0 auto;
-}
-
-.form-column {
-  display: grid;
-  min-width: 0;
-  gap: 18px;
-}
-
-.form-section,
-.summary-panel {
-  border: 1px solid #e6ebf2;
-  border-radius: 8px;
-  background: #fff;
-  box-shadow: 0 12px 34px rgba(20, 34, 56, 0.05);
-}
-
-.form-section {
-  padding: 20px;
-}
-
-.section-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  min-height: 28px;
-  margin-bottom: 18px;
-}
-
-.section-heading h2 {
-  margin: 0;
-  color: #171b24;
-  font-size: 17px;
-}
-
-.section-heading span {
-  color: #7b8492;
-  font-size: 13px;
-  font-weight: 700;
-  text-align: right;
-}
-
-.field-row {
-  display: grid;
-  grid-template-columns: 112px minmax(0, 1fr);
-  gap: 14px;
-  align-items: center;
-  margin-top: 12px;
-}
-
-.panel-field-row,
-.panel-input-grid {
-  padding: 12px;
-  border-radius: 8px;
-  background: #f7f9fc;
-}
-
-.panel-input-grid {
-  align-items: end;
-}
-
-.field-row > label,
-.input-block > span {
-  color: #303743;
-  font-size: 13px;
-  font-weight: 800;
-  line-height: 22px;
-}
-
-.field-row label span,
-.input-block b,
-.level-row strong span,
-.upload-copy strong span {
-  color: #f04438;
-}
-
-.chip-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 7px;
-  min-width: 0;
-}
-
-.chip-group.compact {
-  align-items: center;
-  min-height: 32px;
-}
-
-.chip,
-.level-btn,
-.region-btn,
-.mode-toggle button,
-.ratio-mode-btn {
-  border: 1px solid #d6dce5;
-  background: #fff;
-  color: #596474;
-  font-weight: 800;
-  cursor: pointer;
-  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
-}
-
-.chip {
-  min-height: 30px;
-  padding: 0 12px;
-  border-radius: 15px;
-  font-size: 12px;
-}
-
-.chip.active,
-.level-btn.active,
-.region-btn.active {
-  border-color: #1477ff;
-  background: #1477ff;
-  color: #fff;
-}
-
-.compact-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 16px;
-  margin-top: 16px;
-}
-
-.compact-grid.two {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.input-block {
-  display: grid;
-  min-width: 0;
-  gap: 8px;
-}
-
-.input-block :deep(.el-input-number),
-.input-block :deep(.el-input),
-.input-block :deep(.el-date-editor) {
-  width: 100%;
-}
-
-.input-block :deep(.el-input__wrapper),
-.input-block :deep(.el-textarea__inner) {
-  border-radius: 8px;
-  box-shadow: 0 0 0 1px #dfe5ee inset;
-}
-
-.level-panel {
-  display: grid;
-  gap: 10px;
-  margin-top: 16px;
-}
-
-.level-row {
-  display: grid;
-  grid-template-columns: 72px minmax(0, 1fr);
-  gap: 12px;
-  align-items: center;
-  padding: 10px 12px;
-  border-radius: 8px;
-  background: #f7f9fc;
-}
-
-.level-row strong {
-  font-size: 13px;
-}
-
-.level-options {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  gap: 9px;
-}
-
-.level-btn {
-  height: 30px;
-  min-width: 0;
-  border-radius: 15px;
-}
-
-.field-hint {
-  grid-column: 2;
-  margin: 0;
-  color: #7f8895;
-  font-size: 12px;
-  line-height: 1.55;
-}
-
-.login-method-row {
-  padding: 12px;
-  border-radius: 8px;
-  background: #f7f9fc;
-}
-
-.login-method-row .field-hint {
-  margin-top: -2px;
-}
-
-.quantity-table {
-  display: grid;
-  gap: 8px;
-}
-
-.quantity-header,
-.quantity-item {
-  display: grid;
-  grid-template-columns: minmax(160px, 1fr) 90px 112px 112px 92px;
-  gap: 12px;
-  align-items: center;
-}
-
-.quantity-header {
-  min-height: 30px;
-  padding: 0 12px;
-  color: #7b8492;
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.quantity-item {
-  min-height: 58px;
-  padding: 12px;
-  border-radius: 8px;
-  background: #f7f9fc;
-}
-
-.quantity-meta {
-  display: grid;
-  min-width: 0;
-  gap: 4px;
-}
-
-.quantity-meta strong {
-  overflow: hidden;
-  font-size: 13px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.quantity-meta small,
-.quantity-price,
-.quantity-status,
-.upload-copy small,
-.region-title span {
-  color: #7f8895;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.quantity-price,
-.quantity-status {
-  white-space: nowrap;
-}
-
-.quantity-item.disabled {
-  opacity: 0.62;
-}
-
-.quantity-item :deep(.el-input-number) {
-  width: 100%;
-  min-width: 0;
-}
-
-.mode-toggle {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 6px;
-  min-width: 0;
-}
-
-.mode-toggle button {
-  height: 30px;
-  min-width: 0;
-  border-radius: 8px;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.mode-toggle button:disabled {
-  cursor: not-allowed;
-}
-
-.mode-toggle button.active {
-  border-color: #ff6a00;
-  background: #fff3ea;
-  color: #e65f00;
-}
-
-.recommend-button {
-  flex: 0 0 auto;
-  height: 32px;
-  padding: 0 12px;
-  border: 1px solid #ffba86;
-  border-radius: 8px;
-  background: #fff7f0;
-  color: #e65f00;
-  font-size: 12px;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.deposit-control {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 8px;
-  align-items: center;
-}
-
-.deposit-breakdown {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.deposit-breakdown span {
-  min-height: 24px;
-  padding: 4px 8px;
-  border-radius: 12px;
-  background: #fff7f0;
-  color: #e65f00;
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.skin-groups {
-  display: grid;
-  gap: 10px;
-}
-
-.skin-group,
-.region-panel,
-.ratio-panel {
-  display: grid;
-  gap: 10px;
-  padding: 12px;
-  border-radius: 8px;
-  background: #f7f9fc;
-}
-
-.skin-title,
-.region-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  font-size: 13px;
-}
-
-.skin-group {
-  border: none;
-}
-
-.skin-title {
-  min-height: 34px;
-  margin-bottom: 8px;
-}
-
-.time-preset-panel {
-  display: grid;
-  gap: 10px;
-  margin-top: 16px;
-}
-
-.time-preset-row {
-  display: grid;
-  grid-template-columns: 88px minmax(0, 1fr);
-  gap: 12px;
-  align-items: start;
-  padding: 12px;
-  border-radius: 8px;
-  background: #f7f9fc;
-}
-
-.time-preset-row strong {
-  color: #303743;
-  font-size: 13px;
-  font-weight: 800;
-  line-height: 32px;
-}
-
-.time-preset-content {
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-}
-
-.time-input {
-  width: 118px;
-}
-
-.time-input :deep(.el-input__wrapper) {
-  border-radius: 8px;
-  box-shadow: 0 0 0 1px #dfe5ee inset;
-}
-
-.login-region-panel {
-  margin-top: 18px;
-}
-
-.region-grid {
-  display: grid;
-  grid-template-columns: repeat(8, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.region-btn {
-  height: 32px;
-  min-width: 0;
-  border-radius: 16px;
-}
-
-.upload-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.upload-item {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 96px;
-  gap: 12px;
-  align-items: center;
-  min-height: 112px;
-  padding: 12px;
-  border: 1px solid #e6ebf2;
-  border-radius: 8px;
-  background: #f8fafc;
-}
-
-.upload-copy {
-  display: grid;
-  min-width: 0;
-  gap: 6px;
-}
-
-.upload-copy strong {
-  color: #232a35;
-  font-size: 14px;
-}
-
-.upload-copy small {
-  line-height: 1.45;
-}
-
-.upload-add,
-.upload-preview {
-  width: 96px;
-  height: 88px;
-  border-radius: 8px;
-}
-
-.upload-add {
-  display: grid;
-  place-items: center;
-  border: 1px dashed #c7ceda;
-  background: #fff;
-  color: #727d8d;
-  font-size: 12px;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.upload-add:disabled {
-  cursor: not-allowed;
-  opacity: 0.58;
-}
-
-.upload-preview {
-  position: relative;
-  overflow: hidden;
-  background: #e8edf4;
-}
-
-.upload-preview img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.upload-preview button {
-  position: absolute;
-  right: 6px;
-  bottom: 6px;
-  display: grid;
-  width: 28px;
-  height: 28px;
-  place-items: center;
-  border: none;
-  border-radius: 8px;
-  background: rgba(17, 24, 39, 0.72);
-  color: #fff;
-  cursor: pointer;
-}
-
-.hidden-file {
-  display: none;
-}
-
-.ratio-panel {
-  margin-top: 14px;
-}
-
-.ratio-reference {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 52px;
-  padding: 12px;
-  border-radius: 8px;
-  background: #fff;
-}
-
-.ratio-reference span {
-  color: #303743;
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.ratio-reference strong,
-.price-cell strong,
-.summary-main strong {
-  color: #ff6a00;
-  font-weight: 900;
-}
-
-.ratio-reference strong {
-  font-size: 22px;
-}
-
-.ratio-panel p {
-  margin: 0;
-  color: #7f8895;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.ratio-mode-grid,
-.price-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-}
-
-.ratio-mode-btn {
-  display: grid;
-  gap: 6px;
-  min-height: 72px;
-  padding: 12px;
-  border-radius: 8px;
-  text-align: left;
-}
-
-.ratio-mode-btn span {
-  color: #7f8895;
-  font-size: 12px;
-}
-
-.ratio-mode-btn.active {
-  border-color: #ff6a00;
-  background: #fff7f0;
-  color: #ff6a00;
-}
-
-.ratio-mode-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.58;
-}
-
-.price-grid {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  margin-top: 14px;
-}
-
-.price-cell {
-  display: grid;
-  gap: 6px;
-  min-height: 82px;
-  padding: 14px;
-  border-radius: 8px;
-  background: #f7f9fc;
-}
-
-.price-cell span {
-  color: #6f7a89;
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.price-cell strong {
-  overflow-wrap: anywhere;
-  font-size: 21px;
-}
-
-.price-cell.accent {
-  background: #fff7f0;
-}
-
-.remark {
-  margin-top: 14px;
-}
-
-.summary-column {
-  min-width: 0;
-  position: sticky;
-  top: 76px;
-  align-self: start;
-  height: fit-content;
-}
-
-.summary-panel {
-  padding: 16px;
-}
-
-.summary-main {
-  display: grid;
-  gap: 8px;
-  padding: 16px;
-  border-radius: 8px;
-  background: #fff7f0;
-}
-
-.summary-main span,
-.summary-list span {
-  color: #6f7a89;
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.summary-main strong {
-  font-size: 34px;
-  line-height: 1;
-}
-
-.summary-list {
-  display: grid;
-  gap: 10px;
-  margin: 14px 0;
-}
-
-.summary-list div {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #eef2f6;
-}
-
-.summary-list strong {
-  color: #20242a;
-  font-size: 13px;
-  text-align: right;
-  overflow-wrap: anywhere;
-}
-
-.summary-actions {
-  display: grid;
-  gap: 10px;
-}
-
-.summary-actions :deep(.el-button) {
-  width: 100%;
-  margin-left: 0;
-}
-
-@media (max-width: 1180px) {
-  .publish-layout {
-    grid-template-columns: 1fr;
-    max-width: 920px;
-  }
-
-  .summary-column {
-    display: none;
-  }
-}
-
-@media (max-width: 860px) {
-  .field-row,
-  .compact-grid,
-  .compact-grid.two,
-  .upload-grid,
-  .price-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .quantity-header {
-    display: none;
-  }
-
-  .field-hint {
-    grid-column: auto;
-  }
-
-  .quantity-item,
-  .upload-item {
-    grid-template-columns: 1fr;
-  }
-
-  .deposit-control,
-  .ratio-mode-grid,
-  .time-preset-row {
-    grid-template-columns: 1fr;
-  }
-
-  .time-input {
-    width: 140px;
-  }
-
-  .upload-add,
-  .upload-preview {
-    width: 100%;
-  }
-
-  .region-grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-}
-</style>
+<style scoped src="./SellerListingCreateView.css"></style>
diff --git a/frontend/src/views/seller/components/OptionChips.vue b/frontend/src/views/seller/components/OptionChips.vue
new file mode 100644
index 0000000..0538941
--- /dev/null
+++ b/frontend/src/views/seller/components/OptionChips.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+type ChipValue = string | number
+
+const props = withDefaults(
+  defineProps<{
+    options: ChipValue[]
+    modelValue?: ChipValue
+    activeValues?: ChipValue[]
+    compact?: boolean
+    suffix?: string
+    keyPrefix?: string
+  }>(),
+  {
+    activeValues: undefined,
+    compact: false,
+    suffix: '',
+    keyPrefix: '',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: ChipValue]
+  select: [value: ChipValue]
+}>()
+
+function isActive(value: ChipValue) {
+  return props.activeValues ? props.activeValues.includes(value) : props.modelValue === value
+}
+
+function selectValue(value: ChipValue) {
+  emit('update:modelValue', value)
+  emit('select', value)
+}
+</script>
+
+<template>
+  <div class="chip-group" :class="{ compact }">
+    <button
+      v-for="option in options"
+      :key="`${keyPrefix}${option}`"
+      type="button"
+      class="chip"
+      :class="{ active: isActive(option) }"
+      @click="selectValue(option)"
+    >
+      {{ option }}{{ suffix }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  min-width: 0;
+}
+
+.chip-group.compact {
+  align-items: center;
+  min-height: 32px;
+}
+
+.chip {
+  min-height: 30px;
+  padding: 0 12px;
+  border: 1px solid #d6dce5;
+  border-radius: 15px;
+  background: #fff;
+  color: #596474;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
+}
+
+.chip.active {
+  border-color: #1477ff;
+  background: #1477ff;
+  color: #fff;
+}
+</style>
diff --git a/frontend/src/views/seller/components/PublishSection.vue b/frontend/src/views/seller/components/PublishSection.vue
new file mode 100644
index 0000000..ec8ea9f
--- /dev/null
+++ b/frontend/src/views/seller/components/PublishSection.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <section class="form-section">
+    <div class="section-heading">
+      <h2>{{ title }}</h2>
+      <span v-if="description">{{ description }}</span>
+    </div>
+    <slot />
+  </section>
+</template>
+
+<style scoped>
+.form-section {
+  padding: 20px;
+  border: 1px solid #e6ebf2;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 12px 34px rgba(20, 34, 56, 0.05);
+}
+
+.section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 28px;
+  margin-bottom: 18px;
+}
+
+.section-heading h2 {
+  margin: 0;
+  color: #171b24;
+  font-size: 17px;
+}
+
+.section-heading span {
+  color: #7b8492;
+  font-size: 13px;
+  font-weight: 700;
+  text-align: right;
+}
+</style>
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 15dd91b..28c21b6 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -3,9 +3,8 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
     "types": ["vite/client"],
-    "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["./src/*"]
     }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]