diff --git a/Assets/Data/UI/ui_theme.csv b/Assets/Data/UI/ui_theme.csv
index 670655ff..7a0e98e6 100644
--- a/Assets/Data/UI/ui_theme.csv
+++ b/Assets/Data/UI/ui_theme.csv
@@ -1,15 +1,15 @@
 kind,id,path,overlay,ppu,inset,alpha,color,note
-color,bg,,,,,,#EFE5CF,화면 바탕(양피지)
-color,paper,,,,,,#FFF9EC,패널·카드 바탕
+color,bg,,,,,,#033FA4,화면 바탕(목록형 B · 설계서 §2-2 · 구 양피지 #EFE5CF)
+color,paper,,,,,,#343549,패널·카드(어두운 패널 · 구 종이 #FFF9EC)
 color,header,,,,,,#2E3349,제목 띠(팩 진남)
 color,header_text,,,,,,#FFFFFF,제목 띠 글자
 color,header_sub,,,,,,#C9C3D6,제목 띠 보조 글자
-color,ink,,,,,,#2A2230,글자(먹)
-color,ink_soft,,,,,,#6F6470,보조 글자
-color,dark,,,,,,#3A4060,어두운 버튼(팩 진남)
+color,ink,,,,,,#FFFFFF,글자(어두운 패널 위 흰 · 구 먹 #2A2230)
+color,ink_soft,,,,,,#C7CBD6,보조 글자(구 #6F6470)
+color,dark,,,,,,#1E2440,어두운 버튼(팩 진남)
 color,red,,,,,,#D8412F,붉은 옻칠(주 버튼·강조)
 color,line,,,,,,#1E2535,외곽선
-color,slot,,,,,,#DCD0B9,빈 칸
+color,slot,,,,,,#303146,빈 칸(팩 빈 카드 · 구 #DCD0B9)
 color,coin,,,,,,#F3B72E,금
 color,jade,,,,,,#23B394,보옥(옥)
 color,grain,,,,,,#D9963F,군량
@@ -288,4 +288,69 @@ color,gear_gold_deco,,,,,,#FFDE00E6,장비 칸 gold deco
 color,gear_gold_light,,,,,,#FEFD4ED9,장비 칸 gold light
 color,gear_gold_glow,,,,,,#F3FF3159,장비 칸 gold glow
 color,grade_pattern,,,,,,#FFFFFF1A,등급 바탕 문양 타일(흰 10 %)
+skin,card_bg,Frame/CardFrame01_Bg_n.png,,1,,,,영웅 카드 바탕(등급 틴트)
+skin,card_grad,Frame/CardFrame01_Gradient.png,,1,,,,영웅 카드 그라데이션
+skin,card_glow,Frame/CardFrame01_Glow.png,,1,,,,영웅 카드 초상 뒤 빛
+skin,card_bottom,Frame/CardFrame01_Bottom.png,,1,,,,영웅 카드 이름 띠
+skin,card_border,Frame/CardFrame01_Border.png,,1,,,,영웅 카드 테두리
+skin,card_empty,Frame/CardFrame01_Bg_d.png,,1,,,,빈·미보유 카드 바탕
+skin,card_empty_pattern,Frame/CardFrame01_Bg_d_Pattern.png,,1,,,,빈·미보유 카드 문양(Tiled)
+skin,tail,Label/Label_Tail_White_Bg.png,,1,,,,꼬리 칩(출전 등 · 틴트)
+icon,lv_badge_s,IconMisc/Icon_Badge03_Blue.png,,,,,,작은 레벨 배지(카드)
+color,band_top,,,,,,#5461FF,목록형 상단 띠(재화 바 뒤 · 설계서 §2-2 B)
+color,card_bottom,,,,,,#1B1A1FE6,영웅 카드 이름 띠
+color,card_border,,,,,,#000000,영웅 카드 테두리
+color,card_empty,,,,,,#303146,빈·미보유 카드
+color,card_empty_pattern,,,,,,#2D2F42,빈·미보유 카드 문양
+color,card_empty_border,,,,,,#1A1B27,빈·미보유 카드 테두리
+color,card_dim,,,,,,#000000A0,미보유 초상 어둡게
+color,tail_red,,,,,,#D8412F,출전 꼬리 칩
+color,grade_white_card_bg,,,,,,#626E8B,영웅 카드 white card_bg
+color,grade_white_card_grad,,,,,,#90A3BA,영웅 카드 white card_grad
+color,grade_white_card_glow,,,,,,#83A6B4,영웅 카드 white card_glow
+color,grade_green_card_bg,,,,,,#34B153,영웅 카드 green card_bg
+color,grade_green_card_grad,,,,,,#5AD848,영웅 카드 green card_grad
+color,grade_green_card_glow,,,,,,#9CFE4F,영웅 카드 green card_glow
+color,grade_blue_card_bg,,,,,,#3C88F6,영웅 카드 blue card_bg
+color,grade_blue_card_grad,,,,,,#06ACFE,영웅 카드 blue card_grad
+color,grade_blue_card_glow,,,,,,#01DEFF,영웅 카드 blue card_glow
+color,grade_purple_card_bg,,,,,,#734DEE,영웅 카드 purple card_bg
+color,grade_purple_card_grad,,,,,,#9555FD,영웅 카드 purple card_grad
+color,grade_purple_card_glow,,,,,,#B996FF,영웅 카드 purple card_glow
+color,grade_orange_card_bg,,,,,,#FF9A2E,영웅 카드 orange card_bg
+color,grade_orange_card_grad,,,,,,#FFB84A,영웅 카드 orange card_grad
+color,grade_orange_card_glow,,,,,,#FFD47A,영웅 카드 orange card_glow
+color,grade_gold_card_bg,,,,,,#FFC900,영웅 카드 gold card_bg
+color,grade_gold_card_grad,,,,,,#FFF522,영웅 카드 gold card_grad
+color,grade_gold_card_glow,,,,,,#FFD820,영웅 카드 gold card_glow
+color,tre_rare,,,,,,#3C88F6,보물 등급 rare 대표 색
+color,tre_rare_bg,,,,,,#00A8FF,보물 칸 rare bg
+color,tre_rare_deco,,,,,,#2CBEFFE6,보물 칸 rare deco
+color,tre_rare_light,,,,,,#35FBFFD9,보물 칸 rare light
+color,tre_rare_glow,,,,,,#08EFFF59,보물 칸 rare glow
+color,tre_epic,,,,,,#9752FF,보물 등급 epic 대표 색
+color,tre_epic_bg,,,,,,#B260FD,보물 칸 epic bg
+color,tre_epic_deco,,,,,,#C880FEE6,보물 칸 epic deco
+color,tre_epic_light,,,,,,#FF8AFFD9,보물 칸 epic light
+color,tre_epic_glow,,,,,,#B996FF59,보물 칸 epic glow
+color,tre_legend,,,,,,#FF9A2E,보물 등급 legend 대표 색
+color,tre_legend_bg,,,,,,#FF8A1E,보물 칸 legend bg
+color,tre_legend_deco,,,,,,#FFA43CE6,보물 칸 legend deco
+color,tre_legend_light,,,,,,#FFD36BD9,보물 칸 legend light
+color,tre_legend_glow,,,,,,#FFD98A59,보물 칸 legend glow
+color,tre_myth,,,,,,#F1424B,보물 등급 myth 대표 색
+color,tre_myth_bg,,,,,,#DF2F38,보물 칸 myth bg
+color,tre_myth_deco,,,,,,#FD474BE6,보물 칸 myth deco
+color,tre_myth_light,,,,,,#FF8F9CD9,보물 칸 myth light
+color,tre_myth_glow,,,,,,#FF9DA459,보물 칸 myth glow
+color,tre_arcana,,,,,,#FFC900,보물 등급 arcana 대표 색
+color,tre_arcana_bg,,,,,,#FFC900,보물 칸 arcana bg
+color,tre_arcana_deco,,,,,,#FFDE00E6,보물 칸 arcana deco
+color,tre_arcana_light,,,,,,#FEFD4ED9,보물 칸 arcana light
+color,tre_arcana_glow,,,,,,#F3FF3159,보물 칸 arcana glow
+color,tre_none_bg,,,,,,#064599,보물 칸 미보유 바탕
+color,tre_none_deco,,,,,,#0A52B0,보물 칸 미보유 장식
+color,tre_none_light,,,,,,#1A64C080,보물 칸 미보유 윗면
+color,tre_none_glow,,,,,,#00000000,보물 칸 미보유 빛(없음)
+color,tre_none_icon,,,,,,#FFFFFF40,보물 칸 미보유 실루엣(흰 25 %)
 font,title,Assets/UI/GUIPro/ResourcesData/Fonts/Sen-ExtraBold.ttf,,,,,,제목·숫자(라틴 Sen · 한글 = 폴백 Malgun Gothic · PD 결정 전)
diff --git a/Assets/Resources/UI/UITheme.asset b/Assets/Resources/UI/UITheme.asset
index d7891daa..10ae3c37 100644
--- a/Assets/Resources/UI/UITheme.asset
+++ b/Assets/Resources/UI/UITheme.asset
@@ -14,9 +14,9 @@ MonoBehaviour:
   m_EditorClassIdentifier: TKS.Runtime::TKS.UITheme
   colors:
   - id: bg
-    color: {r: 0.9372549, g: 0.8980392, b: 0.8117647, a: 1}
+    color: {r: 0.011764706, g: 0.24705882, b: 0.6431373, a: 1}
   - id: paper
-    color: {r: 1, g: 0.9764706, b: 0.9254902, a: 1}
+    color: {r: 0.20392157, g: 0.20784314, b: 0.28627452, a: 1}
   - id: header
     color: {r: 0.18039216, g: 0.2, b: 0.28627452, a: 1}
   - id: header_text
@@ -24,17 +24,17 @@ MonoBehaviour:
   - id: header_sub
     color: {r: 0.7882353, g: 0.7647059, b: 0.8392157, a: 1}
   - id: ink
-    color: {r: 0.16470589, g: 0.13333334, b: 0.1882353, a: 1}
+    color: {r: 1, g: 1, b: 1, a: 1}
   - id: ink_soft
-    color: {r: 0.43529412, g: 0.39215687, b: 0.4392157, a: 1}
+    color: {r: 0.78039217, g: 0.79607844, b: 0.8392157, a: 1}
   - id: dark
-    color: {r: 0.22745098, g: 0.2509804, b: 0.3764706, a: 1}
+    color: {r: 0.11764706, g: 0.14117648, b: 0.2509804, a: 1}
   - id: red
     color: {r: 0.84705883, g: 0.25490198, b: 0.18431373, a: 1}
   - id: line
     color: {r: 0.11764706, g: 0.14509805, b: 0.20784314, a: 1}
   - id: slot
-    color: {r: 0.8627451, g: 0.8156863, b: 0.7254902, a: 1}
+    color: {r: 0.1882353, g: 0.19215687, b: 0.27450982, a: 1}
   - id: coin
     color: {r: 0.9529412, g: 0.7176471, b: 0.18039216, a: 1}
   - id: jade
@@ -321,6 +321,118 @@ MonoBehaviour:
     color: {r: 0.9529412, g: 1, b: 0.19215687, a: 0.34901962}
   - id: grade_pattern
     color: {r: 1, g: 1, b: 1, a: 0.101960786}
+  - id: band_top
+    color: {r: 0.32941177, g: 0.38039216, b: 1, a: 1}
+  - id: card_bottom
+    color: {r: 0.105882354, g: 0.101960786, b: 0.12156863, a: 0.9019608}
+  - id: card_border
+    color: {r: 0, g: 0, b: 0, a: 1}
+  - id: card_empty
+    color: {r: 0.1882353, g: 0.19215687, b: 0.27450982, a: 1}
+  - id: card_empty_pattern
+    color: {r: 0.1764706, g: 0.18431373, b: 0.25882354, a: 1}
+  - id: card_empty_border
+    color: {r: 0.101960786, g: 0.105882354, b: 0.15294118, a: 1}
+  - id: card_dim
+    color: {r: 0, g: 0, b: 0, a: 0.627451}
+  - id: tail_red
+    color: {r: 0.84705883, g: 0.25490198, b: 0.18431373, a: 1}
+  - id: grade_white_card_bg
+    color: {r: 0.38431373, g: 0.43137255, b: 0.54509807, a: 1}
+  - id: grade_white_card_grad
+    color: {r: 0.5647059, g: 0.6392157, b: 0.7294118, a: 1}
+  - id: grade_white_card_glow
+    color: {r: 0.5137255, g: 0.6509804, b: 0.7058824, a: 1}
+  - id: grade_green_card_bg
+    color: {r: 0.20392157, g: 0.69411767, b: 0.3254902, a: 1}
+  - id: grade_green_card_grad
+    color: {r: 0.3529412, g: 0.84705883, b: 0.28235295, a: 1}
+  - id: grade_green_card_glow
+    color: {r: 0.6117647, g: 0.99607843, b: 0.30980393, a: 1}
+  - id: grade_blue_card_bg
+    color: {r: 0.23529412, g: 0.53333336, b: 0.9647059, a: 1}
+  - id: grade_blue_card_grad
+    color: {r: 0.023529412, g: 0.6745098, b: 0.99607843, a: 1}
+  - id: grade_blue_card_glow
+    color: {r: 0.003921569, g: 0.87058824, b: 1, a: 1}
+  - id: grade_purple_card_bg
+    color: {r: 0.4509804, g: 0.3019608, b: 0.93333334, a: 1}
+  - id: grade_purple_card_grad
+    color: {r: 0.58431375, g: 0.33333334, b: 0.99215686, a: 1}
+  - id: grade_purple_card_glow
+    color: {r: 0.7254902, g: 0.5882353, b: 1, a: 1}
+  - id: grade_orange_card_bg
+    color: {r: 1, g: 0.6039216, b: 0.18039216, a: 1}
+  - id: grade_orange_card_grad
+    color: {r: 1, g: 0.72156864, b: 0.2901961, a: 1}
+  - id: grade_orange_card_glow
+    color: {r: 1, g: 0.83137256, b: 0.47843137, a: 1}
+  - id: grade_gold_card_bg
+    color: {r: 1, g: 0.7882353, b: 0, a: 1}
+  - id: grade_gold_card_grad
+    color: {r: 1, g: 0.9607843, b: 0.13333334, a: 1}
+  - id: grade_gold_card_glow
+    color: {r: 1, g: 0.84705883, b: 0.1254902, a: 1}
+  - id: tre_rare
+    color: {r: 0.23529412, g: 0.53333336, b: 0.9647059, a: 1}
+  - id: tre_rare_bg
+    color: {r: 0, g: 0.65882355, b: 1, a: 1}
+  - id: tre_rare_deco
+    color: {r: 0.17254902, g: 0.74509805, b: 1, a: 0.9019608}
+  - id: tre_rare_light
+    color: {r: 0.20784314, g: 0.9843137, b: 1, a: 0.8509804}
+  - id: tre_rare_glow
+    color: {r: 0.03137255, g: 0.9372549, b: 1, a: 0.34901962}
+  - id: tre_epic
+    color: {r: 0.5921569, g: 0.32156864, b: 1, a: 1}
+  - id: tre_epic_bg
+    color: {r: 0.69803923, g: 0.3764706, b: 0.99215686, a: 1}
+  - id: tre_epic_deco
+    color: {r: 0.78431374, g: 0.5019608, b: 0.99607843, a: 0.9019608}
+  - id: tre_epic_light
+    color: {r: 1, g: 0.5411765, b: 1, a: 0.8509804}
+  - id: tre_epic_glow
+    color: {r: 0.7254902, g: 0.5882353, b: 1, a: 0.34901962}
+  - id: tre_legend
+    color: {r: 1, g: 0.6039216, b: 0.18039216, a: 1}
+  - id: tre_legend_bg
+    color: {r: 1, g: 0.5411765, b: 0.11764706, a: 1}
+  - id: tre_legend_deco
+    color: {r: 1, g: 0.6431373, b: 0.23529412, a: 0.9019608}
+  - id: tre_legend_light
+    color: {r: 1, g: 0.827451, b: 0.41960785, a: 0.8509804}
+  - id: tre_legend_glow
+    color: {r: 1, g: 0.8509804, b: 0.5411765, a: 0.34901962}
+  - id: tre_myth
+    color: {r: 0.94509804, g: 0.25882354, b: 0.29411766, a: 1}
+  - id: tre_myth_bg
+    color: {r: 0.8745098, g: 0.18431373, b: 0.21960784, a: 1}
+  - id: tre_myth_deco
+    color: {r: 0.99215686, g: 0.2784314, b: 0.29411766, a: 0.9019608}
+  - id: tre_myth_light
+    color: {r: 1, g: 0.56078434, b: 0.6117647, a: 0.8509804}
+  - id: tre_myth_glow
+    color: {r: 1, g: 0.6156863, b: 0.6431373, a: 0.34901962}
+  - id: tre_arcana
+    color: {r: 1, g: 0.7882353, b: 0, a: 1}
+  - id: tre_arcana_bg
+    color: {r: 1, g: 0.7882353, b: 0, a: 1}
+  - id: tre_arcana_deco
+    color: {r: 1, g: 0.87058824, b: 0, a: 0.9019608}
+  - id: tre_arcana_light
+    color: {r: 0.99607843, g: 0.99215686, b: 0.30588236, a: 0.8509804}
+  - id: tre_arcana_glow
+    color: {r: 0.9529412, g: 1, b: 0.19215687, a: 0.34901962}
+  - id: tre_none_bg
+    color: {r: 0.023529412, g: 0.27058825, b: 0.6, a: 1}
+  - id: tre_none_deco
+    color: {r: 0.039215688, g: 0.32156864, b: 0.6901961, a: 1}
+  - id: tre_none_light
+    color: {r: 0.101960786, g: 0.39215687, b: 0.7529412, a: 0.5019608}
+  - id: tre_none_glow
+    color: {r: 0, g: 0, b: 0, a: 0}
+  - id: tre_none_icon
+    color: {r: 1, g: 1, b: 1, a: 0.2509804}
   skins:
   - id: card
     pack: {fileID: 21300000, guid: 3070a6f23e6ca4273897acf1b7e8c5ce, type: 3}
@@ -770,6 +882,62 @@ MonoBehaviour:
     ppu: 1
     inset: {x: 0, y: 0, z: 0, w: 0}
     overlayAlpha: 1
+  - id: card_bg
+    pack: {fileID: 21300000, guid: eebd5d88ad8c94308a78cffcd517b736, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
+  - id: card_grad
+    pack: {fileID: 21300000, guid: 7a68a4faa81064e6c8ca27a8f6673baf, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
+  - id: card_glow
+    pack: {fileID: 21300000, guid: 269983f7991d743e8bdec3212c98d9d7, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
+  - id: card_bottom
+    pack: {fileID: 21300000, guid: 5e915d0bf336547b99658208e2770e34, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
+  - id: card_border
+    pack: {fileID: 21300000, guid: ac1a5e19ad4b94781b52ca72c7602efe, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
+  - id: card_empty
+    pack: {fileID: 21300000, guid: b982a0ca466374cd6a05c60234ce9d64, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
+  - id: card_empty_pattern
+    pack: {fileID: 21300000, guid: a263718a226e54b009c0cfc63e646872, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
+  - id: tail
+    pack: {fileID: 21300000, guid: f1b870f1b460a4adf85d57ecc60ba7ca, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
   icons:
   - id: cur_gold
     pack: {fileID: 21300000, guid: 6d5687fb0dd3a428d9cd26a6f36c6d78, type: 3}
@@ -1055,6 +1223,10 @@ MonoBehaviour:
     pack: {fileID: 21300000, guid: a3b88d8ffc0ed43a9877519fd3d30d6d, type: 3}
     samguk: {fileID: 0}
     tint: {r: 1, g: 1, b: 1, a: 1}
+  - id: lv_badge_s
+    pack: {fileID: 21300000, guid: f71c132174347405a9d3d63db9df3c0f, type: 3}
+    samguk: {fileID: 0}
+    tint: {r: 1, g: 1, b: 1, a: 1}
   - id: tile_bridge
     pack: {fileID: 0}
     samguk: {fileID: 21300000, guid: 8e5bf7eb1e300474785ff2781eeb5093, type: 3}
diff --git a/Assets/Scripts/OutGame/Arena/ArenaScreen.cs b/Assets/Scripts/OutGame/Arena/ArenaScreen.cs
index 772699f6..4d8c0a12 100644
--- a/Assets/Scripts/OutGame/Arena/ArenaScreen.cs
+++ b/Assets/Scripts/OutGame/Arena/ArenaScreen.cs
@@ -101,7 +101,7 @@ namespace TKS.OutGame
                     UiKit.FillLabel(tag.transform, tags[t], 24, UiKit.White);
                     UiKit.Label(card.transform, text[i, t], 28, UiKit.Ink, TextAnchor.UpperLeft, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(20f, ty - 52f), new Vector2(w - 40f, 104f), false);
                 }
-                var st = UiKit.Box("Status", card.transform, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), new Vector2(0f, 16f), new Vector2(w - 32f, 70f), new Color(0.95f, 0.9f, 0.8f));
+                var st = UiKit.Box("Status", card.transform, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), new Vector2(0f, 16f), new Vector2(w - 32f, 70f), UiKit.Dark);
                 st.raycastTarget = false;
                 UiKit.FillLabel(st.transform, text[i, 3], 26, UiKit.Red);
             }
@@ -191,7 +191,7 @@ namespace TKS.OutGame
                 bool open = ArenaRules.OpenToday(dg, now);
                 int left = ArenaRules.DungeonLeft(db, d, dg, now);
                 var box = Panel("Dungeon_" + dg.id, 180f + i * 330f, 310f);
-                box.GetComponent<Image>().color = open ? UiKit.Paper : new Color(0.88f, 0.85f, 0.8f);
+                box.GetComponent<Image>().color = open ? UiKit.Paper : UiKit.Slot;
                 UiKit.Label(box, dg.nameKo, 52, UiKit.Ink, TextAnchor.MiddleLeft, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(28f, -16f), new Vector2(400f, 76f));
                 var days = new List<string>();
                 foreach (var w in dg.weekdays) days.Add(w == today ? "<color=#b0301e>" + DayKo(w) + "</color>" : DayKo(w));
diff --git a/Assets/Scripts/OutGame/Domestic/DomesticScreen.cs b/Assets/Scripts/OutGame/Domestic/DomesticScreen.cs
index 9b118129..176f8ba7 100644
--- a/Assets/Scripts/OutGame/Domestic/DomesticScreen.cs
+++ b/Assets/Scripts/OutGame/Domestic/DomesticScreen.cs
@@ -95,7 +95,7 @@ namespace TKS.OutGame
             for (int i = 0; i < tabs.Count; i++)
             {
                 bool on = i == page;
-                tabs[i].GetComponent<Image>().color = on ? UiKit.Dark : UiKit.Paper;
+                tabs[i].GetComponent<Image>().color = on ? UiKit.Red : UiKit.Paper; // 선택 = 붉은 옻칠(다른 화면 탭과 같음)
                 UiKit.LabelOf(tabs[i]).color = on ? UiKit.White : UiKit.Ink;
                 pages[i].gameObject.SetActive(on);
             }
@@ -158,12 +158,12 @@ namespace TKS.OutGame
                 int k = i;
                 int lv = TrainingRules.Lv(d, t, i);
                 bool max = lv >= db.Training.MaxLevel;
-                var card = UiKit.Box("Card" + i, p, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(24f + i * (cw + 21f), -838f), new Vector2(cw, 360f), max ? new Color(0.85f, 0.81f, 0.9f) : UiKit.Paper);
+                var card = UiKit.Box("Card" + i, p, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(24f + i * (cw + 21f), -838f), new Vector2(cw, 360f), max ? UiKit.Purple : UiKit.Paper);
                 UiKit.Border(card, UiKit.Line, 3f);
                 var head = UiKit.TopBand("Head", card.transform, 0f, 72f);
-                UiKit.Paint(head, max ? UiKit.Purple : new Color(0.93f, 0.87f, 0.7f));
+                UiKit.Paint(head, max ? UiKit.Purple : UiKit.Dark);
                 UiKit.FillLabel(head, max ? "Max" : "LV." + lv, 36, max ? UiKit.White : UiKit.Ink);
-                var dot = UiKit.Dot("Icon", card.transform, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -86f), 96f, new Color(0.9f, 0.86f, 0.8f));
+                var dot = UiKit.Dot("Icon", card.transform, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -86f), 96f, UiKit.Slot);
                 UiKit.FillLabel(dot.transform, marks[i], 40, UiKit.Ink);
                 UiKit.Label(card.transform, names[i], 38, UiKit.Ink, TextAnchor.MiddleCenter, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -190f), new Vector2(310f, 50f));
                 UiKit.Label(card.transform, "LV " + lv + "/" + db.Training.MaxLevel + "  +" + TrainingRules.Bonus(db, d, t, TrainingTable.Stats[i]).ToString("0.#") + "%", 26, UiKit.InkSoft, TextAnchor.MiddleCenter, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -232f), new Vector2(310f, 36f), false);
@@ -210,7 +210,7 @@ namespace TKS.OutGame
 
             var acc = Panel(p, "Accum", 126f, 170f);
             UiKit.Label(acc, "누적 " + FormatHours(h) + " / 최대 " + FormatHours(cap), 40, UiKit.Ink, TextAnchor.MiddleLeft, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(24f, -8f), new Vector2(900f, 56f));
-            var fill = UiKit.Bar("Bar", acc, new Vector2(0.5f, 0.5f), new Vector2(0.5f, 0.5f), new Vector2(0f, -6f), new Vector2(980f, 34f), new Color(0.88f, 0.84f, 0.77f), UiKit.Red);
+            var fill = UiKit.Bar("Bar", acc, new Vector2(0.5f, 0.5f), new Vector2(0.5f, 0.5f), new Vector2(0f, -6f), new Vector2(980f, 34f), UiKit.Slot, UiKit.Red);
             UiKit.SetBar(fill, cap > 0f ? h / cap : 0f);
             UiKit.Label(acc, "성장 패스 24시간(준비 중) · 농업 개발로 +" + Mathf.RoundToInt(DevRules.Mod(db, d, DevRules.PatrolCap)) + "분", 26, UiKit.Red, TextAnchor.MiddleLeft, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(24f, 8f), new Vector2(900f, 44f), false);
 
@@ -228,7 +228,7 @@ namespace TKS.OutGame
             string[] rIcon = { "cur_gold", "cur_exp", "cur_gear", "chest_bronze" };
             for (int i = 0; i < 4; i++)
             {
-                var line = UiKit.Box("Row" + i, rate, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -76f - i * 78f), new Vector2(980f, 68f), new Color(0.95f, 0.92f, 0.86f));
+                var line = UiKit.Box("Row" + i, rate, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -76f - i * 78f), new Vector2(980f, 68f), UiKit.Dark);
                 if (UiKit.Icon(line.transform, rIcon[i], new Vector2(0f, 0.5f), new Vector2(0f, 0.5f), new Vector2(12f, 0f), 58f) == null)
                     UiKit.Dot("Dot", line.transform, new Vector2(0f, 0.5f), new Vector2(0f, 0.5f), new Vector2(16f, 0f), 50f, rc[i]);
                 UiKit.Label(line.transform, rn[i], 34, UiKit.Ink, TextAnchor.MiddleLeft, new Vector2(0f, 0.5f), new Vector2(0f, 0.5f), new Vector2(86f, 0f), new Vector2(400f, 56f));
@@ -241,7 +241,7 @@ namespace TKS.OutGame
             string[] sv = { "골드\n" + y.gold.ToString("N0"), "병사 경험\n" + y.exp.ToString("N0"), "승급 장비\n" + y.gear, "청동 상자\n" + y.chests };
             for (int i = 0; i < 4; i++)
             {
-                var chip = UiKit.Box("Chip" + i, got, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(24f + i * 250f, 16f), new Vector2(232f, 130f), new Color(0.95f, 0.92f, 0.86f));
+                var chip = UiKit.Box("Chip" + i, got, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(24f + i * 250f, 16f), new Vector2(232f, 130f), UiKit.Dark);
                 UiKit.Border(chip, rc[i], 3f);
                 UiKit.FillLabel(chip.transform, sv[i], 30, UiKit.Ink);
             }
@@ -360,7 +360,7 @@ namespace TKS.OutGame
                 UiKit.Border(img, nd.Big ? new Color(0.78f, 0.62f, 0.25f) : UiKit.Line, nd.Big ? 6f : 3f);
                 UiKit.LabelOf(c).text = open ? nd.nameKo.Substring(0, 1) : "잠";
                 UiKit.LabelOf(c).fontSize = nd.Big ? 60 : 44;
-                UiKit.LabelOf(c).color = open ? (max ? UiKit.White : UiKit.Ink) : new Color(0.85f, 0.82f, 0.78f);
+                UiKit.LabelOf(c).color = open ? (max ? UiKit.White : UiKit.Ink) : UiKit.InkSoft;
                 var pill = UiKit.Box("Lv", c.transform, new Vector2(0.5f, 0f), new Vector2(0.5f, 0.5f), new Vector2(0f, 0f), new Vector2(110f, 40f), UiKit.Dark);
                 UiKit.FillLabel(pill.transform, lv + "/" + nd.lvMax, 24, UiKit.White);
                 float side = pos[nd.id].x <= 0f ? 1f : -1f;
diff --git a/Assets/Scripts/OutGame/Treasure/TreasureScreen.cs b/Assets/Scripts/OutGame/Treasure/TreasureScreen.cs
index de2e6d4c..0fdbf077 100644
--- a/Assets/Scripts/OutGame/Treasure/TreasureScreen.cs
+++ b/Assets/Scripts/OutGame/Treasure/TreasureScreen.cs
@@ -39,7 +39,7 @@ namespace TKS.OutGame
         public override void Build()
         {
             Tab = 1;
-            Header("보물", "수집품 · 보유만으로 상시 발동", true);
+            Header("보물", "", true); // 부제 삭제(설계서 §2-5)
             var body = Body();
             for (int i = 0; i < PageNames.Length; i++)
             {
@@ -67,7 +67,7 @@ namespace TKS.OutGame
             for (int i = 0; i < tabs.Count; i++)
             {
                 bool on = i == page;
-                tabs[i].GetComponent<Image>().color = on ? UiKit.Dark : UiKit.Paper;
+                tabs[i].GetComponent<Image>().color = on ? UiKit.Red : UiKit.Paper; // 선택 = 붉은 옻칠(다른 화면 탭과 같음)
                 UiKit.LabelOf(tabs[i]).color = on ? UiKit.White : UiKit.Ink;
                 pages[i].gameObject.SetActive(on);
             }
@@ -77,43 +77,47 @@ namespace TKS.OutGame
             else BuildChests(pages[2]);
         }
 
+        /// <summary>보물 등급 대표 색(테마 tre_&lt;등급&gt; · 희귀 청 · 영웅 자 · 전설 주 · 신화 적 · 명장 금).</summary>
         public static Color GradeColor(string g)
         {
-            switch (g)
-            {
-                case "rare": return new Color(0.27f, 0.45f, 0.75f);
-                case "epic": return new Color(0.55f, 0.33f, 0.66f);
-                case "legend": return new Color(0.86f, 0.45f, 0.16f);
-                case "myth": return new Color(0.75f, 0.2f, 0.18f);
-                case "arcana": return new Color(0.78f, 0.62f, 0.16f);
-            }
-            return UiKit.Slot;
+            return UiKit.Col("tre_" + g, UiKit.Slot);
         }
 
-        /// <summary>보물 칸(아이콘 = 이름 첫 글자 · ★ · 등급 띠 · 미보유 = 회색 「?」).</summary>
+        /// <summary>
+        /// 보물 칸(UI 상업용 재설계 ⑥ · 설계서 §3⑥) = 팩 ItemFrame 5층 등급색 + 아이콘(납품 tre_* · 없으면 이름 첫 글자) + ★ 또는 조각 바 + 아래 이름 판 ·
+        /// 미보유 = 진청 빈 칸 + 흰 25 % 실루엣.
+        /// </summary>
         void TreasureCell(Transform parent, TreasureDb.Item it, bool showShards)
         {
             var st = S.Save.inv.Treasure(it.id);
             bool owned = st != null;
-            var cell = UiKit.Cell(parent, "T_" + it.id, owned ? UiKit.Paper : new Color(0.85f, 0.82f, 0.77f), owned ? (System.Action)(() => Detail(it.id)) : null);
-            UiKit.Border(cell, owned ? GradeColor(it.grade) : new Color(0.7f, 0.66f, 0.62f), 3f);
-            var icon = UiKit.Dot("Icon", cell.transform, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -14f), 120f, owned ? new Color(0.94f, 0.9f, 0.83f) : new Color(0.78f, 0.74f, 0.69f));
-            if (owned && UiKit.HasFinalIcon("tre_" + it.id)) UiKit.Icon(icon.transform, "tre_" + it.id, new Vector2(0.5f, 0.5f), new Vector2(0.5f, 0.5f), Vector2.zero, 100f);
-            else UiKit.FillLabel(icon.transform, owned ? it.nameKo.Substring(0, 1) : "?", 60, owned ? GradeColor(it.grade) : new Color(0.6f, 0.56f, 0.52f));
+            var cell = UiKit.Cell(parent, "T_" + it.id, Color.clear, owned ? (System.Action)(() => Detail(it.id)) : null);
+            cell.sprite = null; // 바닥 = 클릭 판(투명)
+            var t = cell.transform;
+            UiKit.ItemSlot(t, owned ? "tre_" + it.grade + "_" : "tre_none_", owned);
+            var art = UiKit.Rect("Art", t, new Vector2(0.5f, 1f), new Vector2(0.5f, 0.5f), new Vector2(0f, -96f), new Vector2(140f, 140f));
+            if (UiKit.HasFinalIcon("tre_" + it.id))
+            {
+                var ic = UiKit.Icon(art, "tre_" + it.id, new Vector2(0.5f, 0.5f), new Vector2(0.5f, 0.5f), Vector2.zero, 140f);
+                if (owned) UiKit.DropShadow(ic, 5f);
+                else ic.color = UiKit.Col("tre_none_icon", UiKit.InkSoft);
+            }
+            else if (owned) UiKit.Title(UiKit.FillLabel(art, it.nameKo.Substring(0, 1), 84, UiKit.White), true);
             if (owned)
             {
                 if (showShards && st.star < it.starMax)
                 {
                     int need, iron;
                     TreasureRules.EnhanceCost(S.Db, it, st.star + 1, out need, out iron);
-                    var fill = UiKit.Bar("Shards", cell.transform, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -142f), new Vector2(150f, 26f), new Color(0.3f, 0.27f, 0.25f), new Color(0.38f, 0.62f, 0.86f));
+                    var fill = UiKit.Bar("Shards", t, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), new Vector2(0f, 76f), new Vector2(150f, 26f), UiKit.Slot, GradeColor(it.grade));
                     UiKit.SetBar(fill, st.shards / (float)Mathf.Max(1, need));
                     UiKit.FillLabel(fill.parent, st.shards + "/" + need, 18, UiKit.White);
                 }
-                else UiKit.Label(cell.transform, st.star > 0 ? "★" + st.star : "☆", 32, UiKit.Star, TextAnchor.MiddleCenter, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -140f), new Vector2(200f, 40f));
+                else if (st.star > 0) UiKit.StarRow(t, st.star, st.star, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), new Vector2(0f, 72f), 30f);
             }
-            var band = UiKit.Box("Name", cell.transform, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), new Vector2(0f, 10f), new Vector2(210f, 56f), owned ? GradeColor(it.grade) : new Color(0.62f, 0.58f, 0.55f));
-            UiKit.FillLabel(band.transform, owned ? it.nameKo : "미보유", 26, UiKit.White);
+            var band = UiKit.Skin(UiKit.Rect("Name", t, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), new Vector2(0f, 12f), new Vector2(206f, 52f)), "plate12", UiKit.Col("gear_plate", UiKit.Dark));
+            var nt = UiKit.FillLabel(band.transform, owned ? it.nameKo : "미보유", 26, owned ? UiKit.White : UiKit.InkSoft);
+            nt.horizontalOverflow = HorizontalWrapMode.Overflow;
         }
 
         // ---------- ① 보유 중 ----------
@@ -209,7 +213,7 @@ namespace TKS.OutGame
                 var head = tiers[0];
                 var block = UiKit.Cell(list, "Set_" + setId, new Color(0f, 0f, 0f, 0f), null);
                 block.raycastTarget = false;
-                var band = UiKit.Box("Band", block.transform, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), Vector2.zero, new Vector2(700f, 70f), new Color(0.47f, 0.33f, 0.24f));
+                var band = UiKit.Box("Band", block.transform, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), Vector2.zero, new Vector2(700f, 70f), UiKit.Dark);
                 UiKit.FillLabel(band.transform, head.nameKo, 40, UiKit.White);
                 int owned = TreasureRules.OwnedIn(d, head);
                 UiKit.Label(block.transform, "보유 " + owned + "/" + head.members.Count, 30, owned == head.members.Count ? UiKit.Ink : UiKit.Red, TextAnchor.MiddleRight, new Vector2(1f, 1f), new Vector2(1f, 1f), new Vector2(0f, -10f), new Vector2(200f, 50f));
@@ -229,16 +233,17 @@ namespace TKS.OutGame
                     c.anchorMax = Vector2.one;
                     c.offsetMin = c.offsetMax = Vector2.zero;
                 }
-                var fx = UiKit.Box("Effects", block.transform, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), Vector2.zero, new Vector2(1032f, 250f), new Color(0.96f, 0.93f, 0.87f));
+                var fx = UiKit.Box("Effects", block.transform, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), Vector2.zero, new Vector2(1032f, 250f), UiKit.Paper);
                 UiKit.Border(fx, UiKit.Line, 2f);
                 var best = TreasureRules.SetTier(db, d, setId);
                 var sb = new System.Text.StringBuilder("<b>기본 효과</b>  <size=26>(가장 높은 달성 단계 1개)</size>");
+                string okHex = "#" + ColorUtility.ToHtmlStringRGB(UiKit.Ok), offHex = "#" + ColorUtility.ToHtmlStringRGB(UiKit.InkSoft);
                 foreach (var t in tiers)
                 {
                     bool ok = TreasureRules.TierReached(d, t);
                     string label = t.stars == 0 ? "[세트]" : "[" + t.stars + "성]";
                     string stat = TreasureRules.StatKo(t.effectKey.Replace("_pct", ""));
-                    sb.Append("\n").Append(ok ? (t == best ? "<color=#2c6a26><b>" : "<color=#2c6a26>") : "<color=#8a8078>").Append(label).Append(" ").Append(stat).Append(" +").Append(t.pct.ToString("0.#")).Append("%")
+                    sb.Append("\n").Append(ok ? (t == best ? "<color=" + okHex + "><b>" : "<color=" + okHex + ">") : "<color=" + offHex + ">").Append(label).Append(" ").Append(stat).Append(" +").Append(t.pct.ToString("0.#")).Append("%")
                       .Append(ok ? (t == best ? "  ✔ 적용</b>" : "  달성") : "  미달성").Append("</color>");
                 }
                 UiKit.FillLabel(fx.transform, sb.ToString(), 30, UiKit.Ink, TextAnchor.MiddleLeft, false, 24f);
@@ -260,7 +265,7 @@ namespace TKS.OutGame
                 UiKit.FillLabel(UiKit.Dot("P", goalBox, new Vector2(0f, 0.5f), new Vector2(0f, 0.5f), new Vector2(20f, 0f), 90f, UiKit.Coin).transform, "P", 44, UiKit.Ink);
             var reward = db.Chests.Get(e.ChestPointReward);
             UiKit.Label(goalBox, (e.ChestPointGoal - d.inv.chestPoints) + "포인트 더 모으면 " + (reward != null ? reward.nameKo : ""), 34, UiKit.Ink, TextAnchor.MiddleLeft, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(130f, -12f), new Vector2(800f, 54f));
-            var fill = UiKit.Bar("Bar", goalBox, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(130f, 52f), new Vector2(700f, 30f), new Color(0.88f, 0.84f, 0.77f), UiKit.Coin);
+            var fill = UiKit.Bar("Bar", goalBox, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(130f, 52f), new Vector2(700f, 30f), UiKit.Slot, UiKit.Coin);
             UiKit.SetBar(fill, d.inv.chestPoints / (float)Mathf.Max(1, e.ChestPointGoal));
             UiKit.Label(goalBox, "상자 포인트 " + d.inv.chestPoints + " / " + e.ChestPointGoal, 26, UiKit.InkSoft, TextAnchor.MiddleLeft, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(130f, 8f), new Vector2(700f, 40f), false);
 
@@ -299,7 +304,7 @@ namespace TKS.OutGame
             {
                 var ch = db.Chests.chests[i];
                 int k = i;
-                var b = UiKit.Btn("Chest_" + ch.id, p, "", 28, i == chestIdx ? new Color(1f, 0.95f, 0.8f) : UiKit.Paper, UiKit.Ink, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(24f + i * (w + 12f), 24f), new Vector2(w, 220f), () =>
+                var b = UiKit.Btn("Chest_" + ch.id, p, "", 28, i == chestIdx ? UiKit.Red : UiKit.Paper, UiKit.Ink, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(24f + i * (w + 12f), 24f), new Vector2(w, 220f), () =>
                 {
                     chestIdx = k;
                     Refresh();
diff --git a/Assets/Scripts/OutGame/UI/FormationScreen.cs b/Assets/Scripts/OutGame/UI/FormationScreen.cs
index 751cdf5d..d3a09b88 100644
--- a/Assets/Scripts/OutGame/UI/FormationScreen.cs
+++ b/Assets/Scripts/OutGame/UI/FormationScreen.cs
@@ -298,7 +298,7 @@ namespace TKS.OutGame
                 }
                 else
                 {
-                    UiKit.Dot("Empty", s, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -10f), 192f, new Color(0.9f, 0.87f, 0.82f));
+                    UiKit.Dot("Empty", s, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -10f), 192f, UiKit.Slot);
                     UiKit.Label(s, "+\n<size=26>빈 칸</size>", 60, UiKit.InkSoft, TextAnchor.MiddleCenter, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -40f), new Vector2(200f, 140f));
                 }
             }
diff --git a/Assets/Scripts/OutGame/UI/HeroScreens.cs b/Assets/Scripts/OutGame/UI/HeroScreens.cs
index 3951eca4..f3da2ccb 100644
--- a/Assets/Scripts/OutGame/UI/HeroScreens.cs
+++ b/Assets/Scripts/OutGame/UI/HeroScreens.cs
@@ -4,36 +4,74 @@ using UnityEngine.UI;
 
 namespace TKS.OutGame
 {
-    /// <summary>영웅·병사 카드(2줄 · 기획 S12 v4) — 좌 초상(★ 는 초상 아래) · 1줄 = 병종 배지 · Lv · 출전 중 · 2줄 = 이름.</summary>
+    /// <summary>
+    /// 영웅·병사 카드(가로형 · UI 상업용 재설계 ② · 설계서 §3② · 팩 CardFrame01 5층 등급색) — 초상(뒤 빛) · 병종 원 · Lv 배지 · 세력 깃발 · 출전 꼬리 칩 ·
+    /// 아래 이름 띠(이름 · ★ · 등급 칩) · 미보유 = 빈 카드(문양 + 초상 어둡게). 목록 · 편성 보유 행 · 도감 공용.
+    /// </summary>
     public static class HeroCards
     {
         public static Image Card(Transform content, OutGameSession s, HeroDb.Hero h, bool deployed, bool owned, System.Action onTap)
         {
-            var cell = UiKit.Cell(content, "Card_" + h.id, owned ? UiKit.Paper : new Color(0.86f, 0.84f, 0.8f), onTap);
-            UiKit.Border(cell, deployed ? UiKit.Red : UiKit.Line, deployed ? 4f : 2f);
+            var cell = UiKit.Cell(content, "Card_" + h.id, Color.clear, onTap);
+            cell.sprite = null; // 바닥 = 클릭 판(투명) · 그림은 층으로
             var lv = s.Save.Level(h.id);
             var hs = s.Save.Hero(h.id);
-            UiKit.Portrait("Face", cell.transform, h, new Vector2(0f, 0.5f), new Vector2(0f, 0.5f), new Vector2(12f, 8f), new Vector2(116f, 108f), false, 2f, new Color(0.9f, 0.86f, 0.8f));
+            string g = h.isSoldier || hs == null || string.IsNullOrEmpty(hs.grade) ? "white" : hs.grade;
+            string G = "grade_" + g + "_";
+            var t = cell.transform;
+            if (owned)
+            {
+                UiKit.Layer(t, "Bg", "card_bg", UiKit.Col(G + "card_bg", UiKit.Paper));
+                UiKit.Layer(t, "Grad", "card_grad", UiKit.Col(G + "card_grad", UiKit.White), 0f, 6f, 0f, 0f);
+                var glow = UiKit.Skin(UiKit.Rect("Glow", t, new Vector2(0f, 0.5f), new Vector2(0.5f, 0.5f), new Vector2(72f, 6f), new Vector2(190f, 190f)), "card_glow", UiKit.Col(G + "card_glow", UiKit.White));
+                glow.enabled = UISkin.Has("card_glow");
+            }
+            else
+            {
+                UiKit.Layer(t, "Bg", "card_empty", UiKit.Col("card_empty", UiKit.Slot));
+                var pat = UiKit.Layer(t, "Pattern", "card_empty_pattern", UiKit.Col("card_empty_pattern", UiKit.Slot), 6f, 6f, 6f, 6f);
+                pat.type = Image.Type.Tiled;
+            }
+            UiKit.Portrait("Face", t, h, new Vector2(0f, 0.5f), new Vector2(0f, 0.5f), new Vector2(12f, 6f), new Vector2(120f, 116f), false, 2f, Color.clear);
+            if (!owned) UiKit.Paint(UiKit.Rect("Dim", t, new Vector2(0f, 0.5f), new Vector2(0f, 0.5f), new Vector2(12f, 6f), new Vector2(120f, 116f)), UiKit.Col("card_dim", UiKit.Dark), false);
+            var band = UiKit.Rect("Band", t, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), Vector2.zero, new Vector2(0f, 62f));
+            band.anchorMin = new Vector2(0f, 0f);
+            band.anchorMax = new Vector2(1f, 0f);
+            band.sizeDelta = new Vector2(0f, 62f);
+            UiKit.Skin(band, "card_bottom", UiKit.Col("card_bottom", UiKit.Dark)).enabled = UISkin.Has("card_bottom");
+            UiKit.Layer(t, "Border", "card_border", UiKit.Col(owned ? "card_border" : "card_empty_border", UiKit.Line));
+
             int star = hs != null ? hs.star : h.rarity;
-            if (UISkin.Icon("star_on") != null) UiKit.StarRow(cell.transform, star, star, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(14f, 2f), 24f);
-            else UiKit.Label(cell.transform, UiKit.Stars(star, star), 22, UiKit.Star, TextAnchor.MiddleCenter, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(12f, 2f), new Vector2(116f, 30f));
-            UiKit.TypeBadge(cell.transform, h.type, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(142f, -16f), 40f);
-            UiKit.Title(UiKit.Label(cell.transform, owned ? "Lv " + (lv != null ? lv.lv : 1) : "미보유", 30, UiKit.Ink, TextAnchor.MiddleLeft, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(204f, -12f), new Vector2(150f, 48f)));
+            UiKit.StarRow(t, star, star, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(16f, 8f), 24f);
+            var name = UiKit.Title(UiKit.Label(t, h.nameKo, 40, owned ? UiKit.White : UiKit.InkSoft, TextAnchor.MiddleLeft, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(142f, 4f), new Vector2(260f, 56f)), true);
+            name.horizontalOverflow = HorizontalWrapMode.Overflow;
+
+            // 위 줄: 병종 원 · Lv 배지 · 세력 깃발 · (출전 꼬리 칩)
+            var ring = UiKit.Skin(UiKit.Rect("Type", t, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(142f, -12f), new Vector2(52f, 52f)), "dot", UiKit.White);
+            ring.preserveAspect = true;
+            var cls = UiKit.Icon(ring.transform, UiKit.TypeIconId(h.type), new Vector2(0.5f, 0.5f), new Vector2(0.5f, 0.5f), Vector2.zero, 36f);
+            if (cls == null) UiKit.Title(UiKit.FillLabel(ring.transform, UnitTypeInfo.Mark(h.type), 26, UiKit.White), true);
+            if (owned)
+            {
+                var badge = UiKit.Icon(t, "lv_badge_s", new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(202f, -8f), 56f);
+                var lt = UiKit.Title(UiKit.Label(badge != null ? badge.transform : t, (lv != null ? lv.lv : 1).ToString(), 26, UiKit.White, TextAnchor.MiddleCenter,
+                    badge != null ? new Vector2(0.5f, 0.5f) : new Vector2(0f, 1f), new Vector2(0.5f, 0.5f), badge != null ? new Vector2(0f, 2f) : new Vector2(230f, -36f), new Vector2(56f, 40f)), true);
+                lt.horizontalOverflow = HorizontalWrapMode.Overflow;
+            }
+            var flag = UiKit.Icon(t, UISkin.Icon("flag_" + h.faction) != null ? "flag_" + h.faction : "flag_other", new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(264f, -14f), 44f);
+            UiKit.DropShadow(flag, 2f);
             if (deployed)
             {
-                var b = UiKit.Box("Deployed", cell.transform, new Vector2(1f, 1f), new Vector2(1f, 1f), new Vector2(-12f, -14f), new Vector2(124f, 44f), UiKit.Red);
-                UiKit.Title(UiKit.FillLabel(b.transform, "출전 중", 24, UiKit.White), true);
+                var tail = UiKit.Skin(UiKit.Rect("Deployed", t, new Vector2(1f, 1f), new Vector2(1f, 1f), new Vector2(-10f, -10f), new Vector2(104f, 46f)), "tail", UiKit.Col("tail_red", UiKit.Red));
+                UiKit.Title(UiKit.FillLabel(tail.transform, "출전", 26, UiKit.White), true);
             }
-            if (hs != null)
+            if (owned && hs != null && !h.isSoldier && UISkin.Has("para_" + g))
             {
-                var g = UiKit.Box("Grade", cell.transform, new Vector2(1f, 0f), new Vector2(1f, 0f), new Vector2(-12f, 14f), new Vector2(56f, 48f), UiKit.GradeColor(hs.grade));
-                UiKit.GradeFrame(g, hs.grade);
-                UiKit.Title(UiKit.FillLabel(g.transform, UiKit.GradeKo(hs.grade), 24, UiKit.White), true);
+                var chip = UiKit.Skin(UiKit.Rect("Grade", t, new Vector2(1f, 0f), new Vector2(1f, 0f), new Vector2(-14f, 11f), new Vector2(66f, 40f)), "para_" + g, UiKit.Col(G + "chip", UiKit.White));
+                UiKit.Title(UiKit.FillLabel(chip.transform, UiKit.GradeKo(g), 24, UiKit.White), true);
             }
-            var name = UiKit.Title(UiKit.Label(cell.transform, h.nameKo, 44, owned ? UiKit.Ink : UiKit.InkSoft, TextAnchor.MiddleLeft, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(142f, 12f), new Vector2(290f, 66f)));
-            name.horizontalOverflow = HorizontalWrapMode.Overflow;
-            if (owned && s.CanGrowAny(h.id) && UiKit.Icon(cell.transform, "new_dot", new Vector2(0f, 1f), new Vector2(0.5f, 0.5f), new Vector2(14f, -10f), 34f) == null)
-                UiKit.Dot("New", cell.transform, new Vector2(0f, 1f), new Vector2(0.5f, 0.5f), new Vector2(14f, -10f), 26f, UiKit.Red);
+            if (owned && s.CanGrowAny(h.id) && UiKit.Icon(t, "new_dot", new Vector2(0f, 1f), new Vector2(0.5f, 0.5f), new Vector2(14f, -10f), 34f) == null)
+                UiKit.Dot("New", t, new Vector2(0f, 1f), new Vector2(0.5f, 0.5f), new Vector2(14f, -10f), 26f, UiKit.Red);
             return cell;
         }
     }
@@ -55,7 +93,7 @@ namespace TKS.OutGame
         public override void Build()
         {
             Tab = 0;
-            Header("영웅", "레벨 · 승급 · 진화 · 스킬", true);
+            Header("영웅", "", true); // 부제 삭제(설계서 §2-5)
             var body = Body();
             tabHero = UiKit.Btn("TabHero", body, "장수", 36, UiKit.Red, UiKit.White, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(24f, -20f), new Vector2(220f, 84f), () => SetFilter(false));
             tabSoldier = UiKit.Btn("TabSoldier", body, "병사", 36, UiKit.Paper, UiKit.Ink, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(258f, -20f), new Vector2(220f, 84f), () => SetFilter(true));
@@ -730,9 +768,8 @@ namespace TKS.OutGame
             {
                 bool own = s.Save.Owns(h.id);
                 var hero = h;
-                var cell = HeroCards.Card(grid, s, h, false, own, () => root.Toast(hero.nameKo + (string.IsNullOrEmpty(hero.hanja) ? "" : "(" + hero.hanja + ")") + " · " +
+                HeroCards.Card(grid, s, h, false, own, () => root.Toast(hero.nameKo + (string.IsNullOrEmpty(hero.hanja) ? "" : "(" + hero.hanja + ")") + " · " +
                     UnitTypeInfo.Korean(hero.type) + " · ★" + hero.rarity + (hero.isSoldier ? " · 병사 유닛" : "") + (own ? " · 보유" : " · 미보유 — 거래 > 뽑기")));
-                if (!own) cell.color = new Color(0.78f, 0.76f, 0.73f);
             }
         }
     }
diff --git a/Assets/Scripts/OutGame/UI/OutGameRoot.cs b/Assets/Scripts/OutGame/UI/OutGameRoot.cs
index 79cd39b3..86f84063 100644
--- a/Assets/Scripts/OutGame/UI/OutGameRoot.cs
+++ b/Assets/Scripts/OutGame/UI/OutGameRoot.cs
@@ -207,6 +207,8 @@ namespace TKS.OutGame
 
             var bg = UiKit.Fill("Bg", mainCanvas.transform);
             UiKit.Paint(bg, UiKit.Bg, false, true);
+            // 목록형 B(설계서 §2-2): 재화 바 뒤 상단 띠 · 화면이 자기 바탕(로비 키아트 · 영웅 상세 등급색)을 깔면 가려짐
+            if (UISkin.On) UiKit.Paint(UiKit.TopBand("BgTop", bg, 0f, TopBarH), UiKit.Col("band_top", UiKit.Bg), false);
 
             Lobby = Add(new LobbyScreen());
             HeroList = Add(new HeroListScreen());
diff --git a/Assets/Scripts/OutGame/UI/TradeScreen.cs b/Assets/Scripts/OutGame/UI/TradeScreen.cs
index a072fe53..58b798e1 100644
--- a/Assets/Scripts/OutGame/UI/TradeScreen.cs
+++ b/Assets/Scripts/OutGame/UI/TradeScreen.cs
@@ -120,7 +120,7 @@ namespace TKS.OutGame
             UiKit.Border(pimg, UiKit.Line, 3f);
             UiKit.Label(pity, "천장 게이지", 36, UiKit.Ink, TextAnchor.MiddleLeft, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(24f, -10f), new Vector2(400f, 56f));
             pityText = UiKit.Label(pity, "", 30, UiKit.Red, TextAnchor.MiddleRight, new Vector2(1f, 1f), new Vector2(1f, 1f), new Vector2(-24f, -10f), new Vector2(560f, 56f));
-            pityBar = UiKit.Bar("PityBar", pity, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), new Vector2(0f, 18f), new Vector2(980f, 32f), new Color(0.86f, 0.82f, 0.75f), UiKit.Red);
+            pityBar = UiKit.Bar("PityBar", pity, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), new Vector2(0f, 18f), new Vector2(980f, 32f), UiKit.Slot, UiKit.Red);
 
             var prob = UiKit.TopBand("Prob", p, 614f, 270f, 24f, 24f);
             var primg = UiKit.Paint(prob, UiKit.Paper);
@@ -131,7 +131,7 @@ namespace TKS.OutGame
             {
                 float y = -84f - (3 - t) * 58f;
                 UiKit.Label(prob, UiKit.Stars(t, t), 38, UiKit.Star, TextAnchor.MiddleLeft, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(24f, y), new Vector2(160f, 50f));
-                var fill = UiKit.Bar("P" + t, prob, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(200f, y - 12f), new Vector2(380f, 28f), new Color(0.86f, 0.82f, 0.75f), t == 3 ? UiKit.Red : new Color(0.47f, 0.38f, 0.32f));
+                var fill = UiKit.Bar("P" + t, prob, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(200f, y - 12f), new Vector2(380f, 28f), UiKit.Slot, t == 3 ? UiKit.Red : new Color(0.47f, 0.38f, 0.32f));
                 UiKit.SetBar(fill, g.P(t));
                 UiKit.Label(prob, (g.P(t) * 100f).ToString("0.#") + " %" + (t == 1 ? " (병사 유닛 포함)" : ""), 32, UiKit.Ink, TextAnchor.MiddleLeft, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(600f, y), new Vector2(420f, 50f));
             }
@@ -217,7 +217,7 @@ namespace TKS.OutGame
             UiKit.Border(back, new Color(0.8f, 0.62f, 0.3f), 3f);
             UiKit.FillLabel(back.transform, "?", 90, new Color(0.8f, 0.62f, 0.3f));
             var front = UiKit.Fill("Front", back.transform);
-            UiKit.Paint(front, p.tier == 3 ? new Color(1f, 0.93f, 0.75f) : p.tier == 2 ? new Color(0.92f, 0.9f, 0.98f) : UiKit.Paper);
+            UiKit.Paint(front, p.tier == 3 ? UiKit.Col("grade_orange_card_bg", UiKit.Coin) : p.tier == 2 ? UiKit.Purple : UiKit.Paper);
             UiKit.Portrait("Face", front, h, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -10f), new Vector2(176f, 176f), false, 1.8f, new Color(0.9f, 0.86f, 0.8f));
             UiKit.Label(front, UiKit.Stars(p.tier, p.tier), 30, UiKit.Star, TextAnchor.MiddleCenter, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -188f), new Vector2(190f, 40f));
             UiKit.Label(front, h != null ? h.nameKo : p.heroId, 32, UiKit.Ink, TextAnchor.MiddleCenter, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -226f), new Vector2(190f, 44f));
@@ -313,7 +313,7 @@ namespace TKS.OutGame
                 var it = d.shop.items[i];
                 var g = S.Db.Gear.Get(it.gearId);
                 int k = i;
-                var cell = UiKit.Cell(shopGrid, "Item" + i, it.sold ? new Color(0.86f, 0.84f, 0.8f) : UiKit.Paper, null);
+                var cell = UiKit.Cell(shopGrid, "Item" + i, it.sold ? UiKit.Slot : UiKit.Paper, null);
                 UiKit.Border(cell, UiKit.Line, 2f);
                 var strip = UiKit.TopBand("Grade", cell.transform, 0f, 64f);
                 UiKit.Paint(strip, UiKit.GradeColor(g != null ? g.grade : ""));
diff --git a/Assets/Scripts/OutGame/UI/UiKit.cs b/Assets/Scripts/OutGame/UI/UiKit.cs
index 56131ff9..62f019cb 100644
--- a/Assets/Scripts/OutGame/UI/UiKit.cs
+++ b/Assets/Scripts/OutGame/UI/UiKit.cs
@@ -152,6 +152,34 @@ namespace TKS.OutGame
             return img;
         }
 
+        /// <summary>부모를 채우는 스킨 층(안쪽 여백 왼·위·오·아래 · 음수 = 바깥) · 스킨이 없으면 꺼 둔다(UI 상업용 재설계 #1104).</summary>
+        public static Image Layer(Transform p, string name, string skin, Color c, float l = 0f, float t = 0f, float r = 0f, float b = 0f)
+        {
+            var img = Skin(Fill(name, p, l, r, t, b), skin, c);
+            img.enabled = UISkin.Has(skin);
+            return img;
+        }
+
+        /// <summary>아이템 칸 5층(팩 ItemFrame00~03 · 색 = prefix + bg · deco · light · glow · 테두리 gear_border) — 장비·보물·보상 칸 공용.</summary>
+        public static void ItemSlot(Transform cell, string prefix, bool lit)
+        {
+            Layer(cell, "Glow", "item_glow", lit ? Col(prefix + "glow", White) : Color.clear, -8f, -8f, -8f, -8f);
+            Layer(cell, "Bg", "item_bg", Col(prefix + "bg", White));
+            Layer(cell, "Deco", "item_deco", Col(prefix + "deco", White), 4f, 4f, 4f, 4f);
+            var light = Layer(cell, "Light", "item_light", Col(prefix + "light", White), 8f, 6f, 8f, 0f);
+            light.rectTransform.anchorMin = new Vector2(0f, 0.54f); // 윗면 빛 = 칸 높이 46 %(목업)
+            Layer(cell, "Border", "item_border", Col("gear_border", Line));
+        }
+
+        /// <summary>아이콘·글자 그림자(테마 icon_shadow).</summary>
+        public static void DropShadow(Graphic g, float d)
+        {
+            if (g == null) return;
+            var s = g.gameObject.AddComponent<Shadow>();
+            s.effectColor = Col("icon_shadow", new Color(0f, 0f, 0f, 0.35f));
+            s.effectDistance = new Vector2(0f, -d);
+        }
+
         /// <summary>아이콘(테마 id · 없으면 null).</summary>
         public static Image Icon(Transform parent, string id, Vector2 anchor, Vector2 pivot, Vector2 pos, float size)
         {