diff --git a/.gitignore b/.gitignore
index 6f3146e..7248d27 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,10 +6,10 @@
 !.env.*.example
 
 # ==========================================
-# 도커 영속 데이터
+# 도커 영속 데이터 (루트 한정 — src 내부 data 폴더는 무시하지 않음)
 # ==========================================
-data/
-!data/.gitkeep
+/data/
+!/data/.gitkeep
 db-data/
 redis-data/
 
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 88a106d..a84221d 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -183,10 +183,8 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
+      "extraneous": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "readdirp": "^4.0.1"
       },
@@ -208,9 +206,8 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
       "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
+      "extraneous": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">= 14.18.0"
       },
@@ -278,10 +275,8 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
+      "extraneous": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "readdirp": "^4.0.1"
       },
@@ -303,9 +298,8 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
       "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
+      "extraneous": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">= 14.18.0"
       },
@@ -355,7 +349,6 @@
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -904,7 +897,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@emnapi/wasi-threads": "1.2.1",
         "tslib": "^2.4.0"
@@ -917,7 +909,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -2368,6 +2359,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2385,6 +2379,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2402,6 +2399,9 @@
         "ppc64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2419,6 +2419,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2436,6 +2439,9 @@
         "s390x"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2453,6 +2459,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2470,6 +2479,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2571,7 +2583,6 @@
       "resolved": "https://registry.npmjs.org/@nestjs/axios/-/axios-4.0.1.tgz",
       "integrity": "sha512-68pFJgu+/AZbWkGu65Z3r55bTsCPlgyKaV4BSG8yUAD72q1PPuyVRgUwFv6BxdnibTUHlyxm06FmYWNC+bjN7A==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@nestjs/common": "^10.0.0 || ^11.0.0",
         "axios": "^1.3.1",
@@ -2670,7 +2681,6 @@
       "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -2701,7 +2711,6 @@
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "readdirp": "^4.0.1"
       },
@@ -2858,7 +2867,6 @@
       "resolved": "https://registry.npmjs.org/@nestjs/common/-/common-11.1.26.tgz",
       "integrity": "sha512-0VARQyzuGbprvjO+slWq9Jtj1P0jYCSKAUSv9LWFNWD39ZbDzXXM1pMs35kReVXwchra0urMfTQxw4uAOfdSzA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "file-type": "21.3.4",
         "iterare": "1.2.1",
@@ -2905,7 +2913,6 @@
       "resolved": "https://registry.npmjs.org/@nestjs/core/-/core-11.1.26.tgz",
       "integrity": "sha512-K45zUwYpowEsVqm8qNIzsMcl4LJev0MK9zVhDnmym7YRTJ2/caslqVeKYhPRd5+Fh81IkvWUVu6vEo46uZ5mgQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-safe-stringify": "2.1.1",
         "iterare": "1.2.1",
@@ -2965,7 +2972,6 @@
       "resolved": "https://registry.npmjs.org/@nestjs/platform-express/-/platform-express-11.1.26.tgz",
       "integrity": "sha512-MJ5Kwe52Ag4nlIuLK2ekB6TVYu1a22uvDzc0Aq0wIzcLySIz4YK0fMcrDOKGdbGQWpfZtNu1PM3jhlf4hvf6Og==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cors": "2.8.6",
         "express": "5.2.1",
@@ -3086,10 +3092,8 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
+      "extraneous": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "readdirp": "^4.0.1"
       },
@@ -3111,9 +3115,8 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
       "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
+      "extraneous": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">= 14.18.0"
       },
@@ -3291,7 +3294,6 @@
       "resolved": "https://registry.npmjs.org/@nestjs/typeorm/-/typeorm-11.0.1.tgz",
       "integrity": "sha512-8rw/nKT0S+L+MkzgE9F2/mox7mAgsPlwfzmW9gsESN1lmQtIrVEfiiBwC2O8+guS1jBfQehJIdcdUj2OAp4VUQ==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@nestjs/common": "^10.0.0 || ^11.0.0",
         "@nestjs/core": "^10.0.0 || ^11.0.0",
@@ -3435,7 +3437,6 @@
       "integrity": "sha512-L+ACCGHCiS0VqHVep/INLVnvRvJ2XooQFLZq4L8snhxw1jsqz+XRcY313UsyPVturPPE1shW3jic7rt3qEQTSQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@swc/counter": "^0.1.3",
         "@xhmikosr/bin-wrapper": "^14.0.0",
@@ -3505,10 +3506,9 @@
       "version": "1.15.41",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.41.tgz",
       "integrity": "sha512-03nQq/082QRJJiOvp3FGbgxTGyyxMxohPTjhk/W9bD2J0tk4ukITI7goOhOO2WbaHn/lsPmo/zf8+DIXhwpgYQ==",
-      "dev": true,
+      "devOptional": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@swc/counter": "^0.1.3",
         "@swc/types": "^0.1.26"
@@ -3550,7 +3550,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -3567,7 +3566,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -3584,7 +3582,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -3601,7 +3598,9 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -3618,7 +3617,9 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -3635,7 +3636,9 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -3652,7 +3655,9 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -3669,7 +3674,9 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -3686,7 +3693,9 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -3703,7 +3712,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -3720,7 +3728,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -3737,7 +3744,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -3751,14 +3757,14 @@
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
       "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0"
     },
     "node_modules/@swc/types": {
       "version": "0.1.26",
       "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.26.tgz",
       "integrity": "sha512-lyMwd7WGgG79RS7EERZV3T8wMdmPq3xwyg+1nmAM64kIhx5yl+juO2PYIHb7vTiPgPCj8LYjsNV2T5wiQHUEaw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@swc/counter": "^0.1.3"
@@ -4031,7 +4037,6 @@
       "integrity": "sha512-VMeFBSCKQKmm2swI2kW51SFusDqekC6q9trBCvJ/JliDchFSuoYYKN7yVNjPthP1HKZcx3U1gI/wTcEBjEFKTA==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -4176,7 +4181,6 @@
       "integrity": "sha512-5B7PfA2e1NQGCnDHd/0lW7W3gvp3d59Ryw54FYO8Uswxo9f6ikw3AZV+Xj/TvpImmpsiYyUqAfhC6kJID1jF6w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.61.0",
         "@typescript-eslint/types": "8.61.0",
@@ -4527,6 +4531,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4541,6 +4548,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4555,6 +4565,9 @@
         "loong64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4569,6 +4582,9 @@
         "loong64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4583,6 +4599,9 @@
         "ppc64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4597,6 +4616,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4611,6 +4633,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4625,6 +4650,9 @@
         "s390x"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4639,6 +4667,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4653,6 +4684,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5082,7 +5116,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5144,7 +5177,6 @@
       "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -5390,7 +5422,6 @@
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.17.0.tgz",
       "integrity": "sha512-J8SwNxprqqpbfenehxWYXE7CW+wM1BB4w3+N+g+/Wx40xM4rsLrfPmHHxSWIxJLYDgSY/HqlFPIYb2/S3rxafw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "follow-redirects": "^1.16.0",
         "form-data": "^4.0.5",
@@ -5857,7 +5888,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -5964,7 +5994,6 @@
       "resolved": "https://registry.npmjs.org/cache-manager/-/cache-manager-6.4.3.tgz",
       "integrity": "sha512-VV5eq/QQ5rIVix7/aICO4JyvSeEv9eIQuKL5iFwgM2BrcYoE0A/D1mNsAHJAsB0WEbNdBlKkn6Tjz6fKzh/cKQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "keyv": "^5.3.3"
       }
@@ -6068,9 +6097,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001797",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001797.tgz",
-      "integrity": "sha512-l8xKG+gwAIExZGl9FrF7KUwuOmk6wbEPC9Xoy/RtnWv1XG0Q4LFlagaLpUv3Kiza3W/wm27zy0yWJEieYKAP6w==",
+      "version": "1.0.30001799",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
+      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==",
       "dev": true,
       "funding": [
         {
@@ -6176,10 +6205,8 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
       "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
-      "dev": true,
+      "extraneous": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "readdirp": "^5.0.0"
       },
@@ -6227,15 +6254,13 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/class-transformer/-/class-transformer-0.5.1.tgz",
       "integrity": "sha512-SQa1Ws6hUbfC98vKGxZH3KFY0Y1lm5Zm0SY8XX9zbK7FJCyVEac3ATW0RIpwzW+oOfmHE5PMPufDG9hCfoEOMw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/class-validator": {
       "version": "0.14.4",
       "resolved": "https://registry.npmjs.org/class-validator/-/class-validator-0.14.4.tgz",
       "integrity": "sha512-AwNusCCam51q703dW82x95tOqQp6oC9HNUl724KxJJOfnKscI8dOloXFgyez7LbTTKWuRBA37FScqVbJEoq8Yw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/validator": "^13.15.3",
         "libphonenumber-js": "^1.11.1",
@@ -7141,7 +7166,6 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -7202,7 +7226,6 @@
       "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -7441,7 +7464,6 @@
       "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
       "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",
@@ -8904,7 +8926,6 @@
       "integrity": "sha512-Yi1jqNC/Oq0N4hBgNH/YvBpP1P57QqundgytzYqy3yqAa7NZPNjSoi4SGbRAXDMdBzNE6xBCi5U7RgfrvMEUVQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/core": "30.4.2",
         "@jest/types": "30.4.1",
@@ -9830,7 +9851,6 @@
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.6.0.tgz",
       "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@keyv/serialize": "^1.1.1"
       }
@@ -10928,7 +10948,6 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.21.0.tgz",
       "integrity": "sha512-AUP1EYJuHraQGsVoCQVIcM7TEJVGtDzxWtGFZd8rds9d+CCXlU5Js1rYgfLNvxy9iJrpHjGrRjoi/3BT9fRyiA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.13.0",
         "pg-pool": "^3.14.0",
@@ -11196,7 +11215,6 @@
       "integrity": "sha512-N2MylSdi48+5N/6S5j+maeHbUSIzzZ5uOcX5Hm4QpV8Dkb1HFjfAKTKX6yNPJQD9AhcT3ifHNB66tWTTJDi11Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -11400,9 +11418,8 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
       "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
-      "dev": true,
+      "extraneous": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">= 20.19.0"
       },
@@ -11415,8 +11432,7 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
       "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/require-directory": {
       "version": "2.1.1",
@@ -11535,7 +11551,6 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -12399,7 +12414,6 @@
       "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -12782,7 +12796,6 @@
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -12959,7 +12972,6 @@
       "resolved": "https://registry.npmjs.org/typeorm/-/typeorm-0.3.30.tgz",
       "integrity": "sha512-8T35PzjefOdqc2ZR9mwLQj0pUGp6lQhMbK2EvVMwJVJWlaoHm0v/Q6dThNOZkFchD+0yMg8gwjKM28ePiLSXSQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@sqltools/formatter": "^1.2.5",
         "ansis": "^4.2.0",
@@ -13166,7 +13178,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -13567,6 +13578,7 @@
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ajv": "^8.0.0"
       },
@@ -13585,6 +13597,7 @@
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -13598,6 +13611,7 @@
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -13612,6 +13626,7 @@
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -13621,7 +13636,8 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/webpack/node_modules/schema-utils": {
       "version": "4.3.3",
@@ -13629,6 +13645,7 @@
       "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -13736,7 +13753,6 @@
       "resolved": "https://registry.npmjs.org/winston/-/winston-3.19.0.tgz",
       "integrity": "sha512-LZNJgPzfKR+/J3cHkxcpHKpKKvGfDZVPS4hfJCc4cCG0CgYzvlD6yE/S3CIL/Yt91ak327YCpiF/0MyeZHEHKA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@colors/colors": "^1.6.0",
         "@dabh/diagnostics": "^2.0.8",
diff --git a/backend/src/app.module.ts b/backend/src/app.module.ts
index d9d3b23..24d341a 100644
--- a/backend/src/app.module.ts
+++ b/backend/src/app.module.ts
@@ -11,6 +11,12 @@ import { AppService } from './app.service';
 import { HealthModule } from './modules/health/health.module';
 import { UserModule } from './modules/user/user.module';
 import { EventsModule } from './modules/events/events.module';
+import { NewsModule } from './modules/news/news.module';
+import { RankingModule } from './modules/ranking/ranking.module';
+import { SaUserModule } from './modules/sa-user/sa-user.module';
+import { SaMetaModule } from './modules/sa-meta/sa-meta.module';
+import { SaMatchModule } from './modules/sa-match/sa-match.module';
+import { NexonModule } from './shared/nexon/nexon.module';
 
 @Module({
   imports: [
@@ -60,7 +66,13 @@ import { EventsModule } from './modules/events/events.module';
     }),
     HealthModule,
     UserModule,
+    NexonModule,
     EventsModule,
+    NewsModule,
+    RankingModule,
+    SaUserModule,
+    SaMetaModule,
+    SaMatchModule,
   ],
   controllers: [AppController],
   providers: [
diff --git a/backend/src/modules/news/dto/news-item.dto.ts b/backend/src/modules/news/dto/news-item.dto.ts
new file mode 100644
index 0000000..a4f7293
--- /dev/null
+++ b/backend/src/modules/news/dto/news-item.dto.ts
@@ -0,0 +1,19 @@
+import { ApiProperty } from '@nestjs/swagger';
+
+// SA 소식 항목 DTO (공지사항/업데이트/GM이야기 공통)
+export class NewsItemDto {
+  @ApiProperty({ description: '표시용 날짜 (MM.DD)', example: '06.11' })
+  date!: string;
+
+  @ApiProperty({
+    description: '소식 제목',
+    example: '6/11(목) 서든어택 정기점검 안내(오전 3시)',
+  })
+  title!: string;
+
+  @ApiProperty({
+    description: '원문 상세 페이지 링크',
+    example: 'https://sa.nexon.com/news/notice/view.aspx?ArticleSN=149280',
+  })
+  link!: string;
+}
diff --git a/backend/src/modules/news/entities/sa-news.entity.ts b/backend/src/modules/news/entities/sa-news.entity.ts
new file mode 100644
index 0000000..ec15ace
--- /dev/null
+++ b/backend/src/modules/news/entities/sa-news.entity.ts
@@ -0,0 +1,36 @@
+import {
+  Column,
+  Entity,
+  Index,
+  PrimaryGeneratedColumn,
+  UpdateDateColumn,
+} from 'typeorm';
+
+// SA 소식 저장 테이블 (공지사항/업데이트/GM이야기 — 1시간마다 크롤링 결과를 영속화)
+@Entity('sa_news')
+@Index(['category', 'sortOrder'])
+export class SaNewsEntity {
+  @PrimaryGeneratedColumn()
+  id!: number;
+
+  // 분류 — '공지사항' | '업데이트' | 'GM이야기'
+  @Column({ type: 'varchar', length: 20 })
+  category!: string;
+
+  // 표시용 날짜 (MM.DD 형식으로 정규화 저장)
+  @Column({ type: 'varchar', length: 10, default: '' })
+  date!: string;
+
+  @Column({ type: 'varchar', length: 300 })
+  title!: string;
+
+  @Column({ type: 'varchar', length: 1000, default: '' })
+  link!: string;
+
+  // 크롤링 순서(사이트 노출 순서, 최신순) 유지용
+  @Column({ type: 'int', default: 0 })
+  sortOrder!: number;
+
+  @UpdateDateColumn()
+  updatedAt!: Date;
+}
diff --git a/backend/src/modules/news/news.controller.ts b/backend/src/modules/news/news.controller.ts
new file mode 100644
index 0000000..705ce0c
--- /dev/null
+++ b/backend/src/modules/news/news.controller.ts
@@ -0,0 +1,26 @@
+import { Controller, Get } from '@nestjs/common';
+import { ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger';
+
+import { NewsService } from './news.service';
+import { NewsItemDto } from './dto/news-item.dto';
+
+@ApiTags('News')
+@Controller('news')
+export class NewsController {
+  constructor(private readonly newsService: NewsService) {}
+
+  @Get('sections')
+  @ApiOperation({
+    summary: 'SA 소식 카테고리별 조회',
+    description:
+      'DB에 저장된 공지사항/업데이트/GM이야기 소식을 카테고리별로 반환합니다. 원본은 1시간마다 크롤링으로 갱신됩니다. (방문마다 크롤링하지 않음)',
+  })
+  @ApiResponse({
+    status: 200,
+    description:
+      '카테고리(공지사항/GM이야기/업데이트)별 소식 목록. 예: { "공지사항": [...], "GM이야기": [...], "업데이트": [...] }',
+  })
+  getSections(): Promise<Record<string, NewsItemDto[]>> {
+    return this.newsService.getSections();
+  }
+}
diff --git a/backend/src/modules/news/news.module.ts b/backend/src/modules/news/news.module.ts
new file mode 100644
index 0000000..868a722
--- /dev/null
+++ b/backend/src/modules/news/news.module.ts
@@ -0,0 +1,15 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+
+import { NewsController } from './news.controller';
+import { NewsService } from './news.service';
+import { SaNewsEntity } from './entities/sa-news.entity';
+
+// SA 소식 모듈 — 1시간마다 크롤링(스케줄) + DB 영속
+@Module({
+  imports: [TypeOrmModule.forFeature([SaNewsEntity])],
+  controllers: [NewsController],
+  providers: [NewsService],
+  exports: [NewsService],
+})
+export class NewsModule {}
diff --git a/backend/src/modules/news/news.service.ts b/backend/src/modules/news/news.service.ts
new file mode 100644
index 0000000..b584697
--- /dev/null
+++ b/backend/src/modules/news/news.service.ts
@@ -0,0 +1,238 @@
+import { Injectable, Logger, OnModuleInit } from '@nestjs/common';
+import { Cron, CronExpression } from '@nestjs/schedule';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { load } from 'cheerio';
+
+import { curlFetchHtml } from '../../shared/utils/curl-fetch';
+import { NewsItemDto } from './dto/news-item.dto';
+import { SaNewsEntity } from './entities/sa-news.entity';
+
+// ────────────────────────────────────────────────────────────
+// SA 소식(공지사항/업데이트/GM이야기) — 1시간마다 크롤링 후 DB 영속.
+// 유저에겐 DB에서 카테고리별로 서빙(방문마다 크롤링 X).
+// 출처: sa.nexon.com 각 목록 페이지(서버렌더 HTML)
+// ────────────────────────────────────────────────────────────
+
+// 크롤링 대상 정의
+interface NewsSource {
+  category: string;
+  url: string;
+  // 'table'  : 게시판 테이블형(td.subject + 날짜 td) — 공지/업데이트
+  // 'gmstory': 카드 리스트형(.singleBoardList) — GM이야기
+  type: 'table' | 'gmstory';
+}
+
+// 파싱 중간 결과
+interface RawItem {
+  date: string;
+  title: string;
+  link: string;
+}
+
+@Injectable()
+export class NewsService implements OnModuleInit {
+  private readonly logger = new Logger(NewsService.name);
+
+  private static readonly REFERER = 'https://sa.nexon.com/';
+  // 카테고리별 보관 개수 (홈 소식 카드 노출용 — 최신순 상위 N개)
+  private static readonly PER_CATEGORY = 5;
+
+  private static readonly SOURCES: NewsSource[] = [
+    {
+      category: '공지사항',
+      url: 'https://sa.nexon.com/news/notice/list.aspx',
+      type: 'table',
+    },
+    {
+      category: '업데이트',
+      url: 'https://sa.nexon.com/news/update/list.aspx',
+      type: 'table',
+    },
+    {
+      category: 'GM이야기',
+      url: 'https://sa.nexon.com/InfoCenter/gmstory/list.aspx',
+      type: 'gmstory',
+    },
+  ];
+
+  constructor(
+    @InjectRepository(SaNewsEntity)
+    private readonly repo: Repository<SaNewsEntity>,
+  ) {}
+
+  // 최초 기동 시 데이터가 비어 있으면 1회 시드 크롤링 (부팅 비차단)
+  onModuleInit(): void {
+    void this.seedIfEmpty();
+  }
+
+  private async seedIfEmpty(): Promise<void> {
+    try {
+      const count = await this.repo.count();
+      if (count > 0) return;
+      this.logger.log('소식 데이터가 없어 초기 크롤링을 수행합니다.');
+      await this.refresh();
+    } catch (error) {
+      this.logger.warn(`초기 소식 시드 실패: ${(error as Error).message}`);
+    }
+  }
+
+  // 매시 정각 — SA 소식 갱신
+  @Cron(CronExpression.EVERY_HOUR, {
+    name: 'hourly-news-refresh',
+    timeZone: 'Asia/Seoul',
+  })
+  async handleHourlyRefresh(): Promise<void> {
+    this.logger.log('시간별 소식 갱신 시작');
+    await this.refresh();
+  }
+
+  /**
+   * 카테고리별로 독립 크롤링 → 성공·비어있지 않은 카테고리만 해당 행 교체.
+   * 한 카테고리가 실패/빈 결과여도 다른 카테고리·기존 데이터는 유지된다.
+   */
+  async refresh(): Promise<number> {
+    let total = 0;
+
+    for (const src of NewsService.SOURCES) {
+      try {
+        const html = await curlFetchHtml(src.url, {
+          referer: NewsService.REFERER,
+        });
+        const items = (
+          src.type === 'gmstory'
+            ? this.parseGmStory(html)
+            : this.parseTable(html)
+        ).slice(0, NewsService.PER_CATEGORY);
+
+        if (!items.length) {
+          this.logger.warn(
+            `[${src.category}] 크롤링 결과가 비어 갱신을 건너뜁니다(기존 유지).`,
+          );
+          continue;
+        }
+
+        // 카테고리 단위 전체 교체 (트랜잭션)
+        await this.repo.manager.transaction(async (m) => {
+          await m.delete(SaNewsEntity, { category: src.category });
+          const rows = items.map((it, i) =>
+            m.create(SaNewsEntity, {
+              category: src.category,
+              date: it.date,
+              title: it.title,
+              link: it.link,
+              sortOrder: i,
+            }),
+          );
+          await m.save(rows);
+        });
+
+        total += items.length;
+        this.logger.log(`[${src.category}] ${items.length}건 갱신 완료`);
+      } catch (error) {
+        this.logger.warn(
+          `[${src.category}] 갱신 실패(기존 유지): ${(error as Error).message}`,
+        );
+      }
+    }
+
+    return total;
+  }
+
+  /** DB에서 카테고리별 소식 조회 (크롤링하지 않음). 키 순서는 화면 탭 순서. */
+  async getSections(): Promise<Record<string, NewsItemDto[]>> {
+    const rows = await this.repo.find({
+      order: { category: 'ASC', sortOrder: 'ASC' },
+    });
+
+    // 탭 순서를 고정해 초기화 (데이터 없어도 빈 배열 보장)
+    const out: Record<string, NewsItemDto[]> = {
+      공지사항: [],
+      GM이야기: [],
+      업데이트: [],
+    };
+    for (const r of rows) {
+      (out[r.category] ??= []).push({
+        date: r.date,
+        title: r.title,
+        link: r.link,
+      });
+    }
+    return out;
+  }
+
+  /** 게시판 테이블형 파싱 (공지/업데이트): td.subject(제목) + 다음 td(날짜) */
+  private parseTable(html: string): RawItem[] {
+    const $ = load(html);
+    const out: RawItem[] = [];
+
+    $('td.subject').each((_, td) => {
+      const cell = $(td);
+      const a = cell.find('a').first();
+      const title = a.text().replace(/\s+/g, ' ').trim();
+      if (!title) return;
+
+      const dateRaw = cell.next('td').text().trim();
+      out.push({
+        title,
+        date: this.normalizeDate(dateRaw),
+        link: this.normalizeLink(a.attr('href')?.trim() ?? ''),
+      });
+    });
+
+    return out;
+  }
+
+  /** GM이야기 카드 리스트 파싱: .date .months(날짜) + a.subject(제목) */
+  private parseGmStory(html: string): RawItem[] {
+    const $ = load(html);
+    const out: RawItem[] = [];
+
+    $('.singleBoardList tr').each((_, tr) => {
+      const row = $(tr);
+      const a = row.find('a.subject').first();
+      const title = a.text().replace(/\s+/g, ' ').trim();
+      if (!title) return;
+
+      // 날짜: '<p class="months"><b>06.05</b></p>' (연도는 별도 .years)
+      const md = row.find('.date .months b').first().text().trim();
+      out.push({
+        title,
+        date: this.normalizeDate(md),
+        link: this.normalizeLink(a.attr('href')?.trim() ?? ''),
+      });
+    });
+
+    return out;
+  }
+
+  /** http → https 정규화 (혼합 콘텐츠 방지) */
+  private normalizeLink(link: string): string {
+    return link.replace(/^http:\/\//i, 'https://');
+  }
+
+  /**
+   * 다양한 날짜 표기를 'MM.DD' 로 정규화.
+   * - '2026.06.09' / '2026-06-09' → '06.09'
+   * - '06.05'(GM이야기 months)     → '06.05'
+   * - 'AM 10:12' / 'PM 02:18'(당일) → 오늘 날짜 MM.DD
+   */
+  private normalizeDate(raw: string): string {
+    const full = raw.match(/(\d{4})[.-](\d{1,2})[.-](\d{1,2})/);
+    if (full) {
+      return `${full[2].padStart(2, '0')}.${full[3].padStart(2, '0')}`;
+    }
+    const md = raw.match(/^(\d{1,2})\.(\d{1,2})$/);
+    if (md) {
+      return `${md[1].padStart(2, '0')}.${md[2].padStart(2, '0')}`;
+    }
+    // 시간만 표기된 당일 글 → 크롤링 시점의 오늘 날짜
+    if (/\d{1,2}:\d{2}/.test(raw) || /AM|PM|오전|오후/i.test(raw)) {
+      const now = new Date();
+      const mm = String(now.getMonth() + 1).padStart(2, '0');
+      const dd = String(now.getDate()).padStart(2, '0');
+      return `${mm}.${dd}`;
+    }
+    return raw;
+  }
+}
diff --git a/backend/src/modules/ranking/dto/ranking-item.dto.ts b/backend/src/modules/ranking/dto/ranking-item.dto.ts
new file mode 100644
index 0000000..ec03a50
--- /dev/null
+++ b/backend/src/modules/ranking/dto/ranking-item.dto.ts
@@ -0,0 +1,40 @@
+import { ApiProperty } from '@nestjs/swagger';
+
+// SA 랭킹 항목 DTO (카테고리별로 사용하는 필드만 채워진다)
+export class RankingItemDto {
+  @ApiProperty({ description: '랭킹 순위', example: 1 })
+  rankNo!: number;
+
+  @ApiProperty({ description: '닉네임 또는 클랜명', example: 'Hack' })
+  name!: string;
+
+  @ApiProperty({ description: '계급 이미지 URL', example: '' })
+  gradeImg!: string;
+
+  @ApiProperty({ description: '티어(MMR) 이미지 URL', example: '' })
+  tierImg!: string;
+
+  @ApiProperty({ description: '클랜마크 이미지 URL', example: '' })
+  clanMark!: string;
+
+  @ApiProperty({ description: '승률', example: '73.9%' })
+  winRate!: string;
+
+  @ApiProperty({ description: '킬데스', example: '56.1%' })
+  kd!: string;
+
+  @ApiProperty({ description: '전적/참여판수', example: '118540승 32289패 24무' })
+  record!: string;
+
+  @ApiProperty({ description: 'RP/클랜RP', example: '5,063' })
+  rp!: string;
+
+  @ApiProperty({ description: '플레이 시간', example: '107:22' })
+  playTime!: string;
+
+  @ApiProperty({ description: '누적점수(공식클랜)', example: '2,440' })
+  score!: string;
+
+  @ApiProperty({ description: '클랜마스터 닉네임', example: 'vVv-vVv' })
+  master!: string;
+}
diff --git a/backend/src/modules/ranking/entities/sa-ranking.entity.ts b/backend/src/modules/ranking/entities/sa-ranking.entity.ts
new file mode 100644
index 0000000..f79dc97
--- /dev/null
+++ b/backend/src/modules/ranking/entities/sa-ranking.entity.ts
@@ -0,0 +1,77 @@
+import {
+  Column,
+  Entity,
+  Index,
+  PrimaryGeneratedColumn,
+  UpdateDateColumn,
+} from 'typeorm';
+
+// SA 랭킹 저장 테이블 (계급/랭크전/클랜 — 매일 00시 크롤링 결과를 영속화)
+// 카테고리마다 사용하는 필드가 다르므로 미사용 필드는 빈 문자열로 둔다.
+@Entity('sa_ranking')
+@Index(['category', 'sortOrder'])
+export class SaRankingEntity {
+  @PrimaryGeneratedColumn()
+  id!: number;
+
+  // 카테고리:
+  // total_class(통합계급) | season_class(시즌계급)
+  // ranked_solo(랭크전 솔로) | ranked_party(랭크전 파티) | ranked_clan(랭크전 클랜)
+  // official_clan(공식클랜) | clan(클랜)
+  @Column({ type: 'varchar', length: 20 })
+  category!: string;
+
+  @Column({ type: 'int' })
+  rankNo!: number;
+
+  // 닉네임(유저 랭킹) 또는 클랜명(클랜 랭킹)
+  @Column({ type: 'varchar', length: 100 })
+  name!: string;
+
+  // 계급 이미지 URL (유저 계급/랭크전)
+  @Column({ type: 'varchar', length: 500, default: '' })
+  gradeImg!: string;
+
+  // 티어(MMR) 이미지 URL (랭크전 유저)
+  @Column({ type: 'varchar', length: 500, default: '' })
+  tierImg!: string;
+
+  // 클랜마크 이미지 URL — 2개 레이어(배경 0_, 심볼 1_)를 '|'로 join (겹쳐서 표시)
+  @Column({ type: 'varchar', length: 1000, default: '' })
+  clanMark!: string;
+
+  // 승률 (예: '73.9%')
+  @Column({ type: 'varchar', length: 20, default: '' })
+  winRate!: string;
+
+  // 킬데스 (예: '62.6%')
+  @Column({ type: 'varchar', length: 20, default: '' })
+  kd!: string;
+
+  // 전적/참여판수 (예: '118540승 32289패 24무')
+  @Column({ type: 'varchar', length: 100, default: '' })
+  record!: string;
+
+  // RP/클랜RP (예: '5,063')
+  @Column({ type: 'varchar', length: 30, default: '' })
+  rp!: string;
+
+  // 플레이 시간 (랭크전 유저, 예: '107:22')
+  @Column({ type: 'varchar', length: 20, default: '' })
+  playTime!: string;
+
+  // 누적점수 (공식클랜, 예: '2,440')
+  @Column({ type: 'varchar', length: 30, default: '' })
+  score!: string;
+
+  // 클랜마스터 닉네임 (클랜 랭킹)
+  @Column({ type: 'varchar', length: 100, default: '' })
+  master!: string;
+
+  // 크롤링 순서(랭킹 순서) 유지용
+  @Column({ type: 'int', default: 0 })
+  sortOrder!: number;
+
+  @UpdateDateColumn()
+  updatedAt!: Date;
+}
diff --git a/backend/src/modules/ranking/ranking.controller.ts b/backend/src/modules/ranking/ranking.controller.ts
new file mode 100644
index 0000000..2066cba
--- /dev/null
+++ b/backend/src/modules/ranking/ranking.controller.ts
@@ -0,0 +1,25 @@
+import { Controller, Get } from '@nestjs/common';
+import { ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger';
+
+import { RankingService } from './ranking.service';
+import { RankingItemDto } from './dto/ranking-item.dto';
+
+@ApiTags('Ranking')
+@Controller('ranking')
+export class RankingController {
+  constructor(private readonly rankingService: RankingService) {}
+
+  @Get('sections')
+  @ApiOperation({
+    summary: 'SA 랭킹 카테고리별 조회',
+    description:
+      'DB에 저장된 랭킹을 카테고리별로 반환합니다. 카테고리 키: total_class, season_class, ranked_solo, ranked_party, ranked_clan, official_clan, clan. 원본은 매일 00:00(KST) 크롤링으로 갱신됩니다.',
+  })
+  @ApiResponse({
+    status: 200,
+    description: '카테고리별 랭킹 목록 (카테고리 키 → RankingItemDto[])',
+  })
+  getSections(): Promise<Record<string, RankingItemDto[]>> {
+    return this.rankingService.getSections();
+  }
+}
diff --git a/backend/src/modules/ranking/ranking.module.ts b/backend/src/modules/ranking/ranking.module.ts
new file mode 100644
index 0000000..c23192c
--- /dev/null
+++ b/backend/src/modules/ranking/ranking.module.ts
@@ -0,0 +1,15 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+
+import { RankingController } from './ranking.controller';
+import { RankingService } from './ranking.service';
+import { SaRankingEntity } from './entities/sa-ranking.entity';
+
+// SA 랭킹 모듈 — 매일 00시 크롤링(스케줄) + DB 영속
+@Module({
+  imports: [TypeOrmModule.forFeature([SaRankingEntity])],
+  controllers: [RankingController],
+  providers: [RankingService],
+  exports: [RankingService],
+})
+export class RankingModule {}
diff --git a/backend/src/modules/ranking/ranking.service.ts b/backend/src/modules/ranking/ranking.service.ts
new file mode 100644
index 0000000..6519b8a
--- /dev/null
+++ b/backend/src/modules/ranking/ranking.service.ts
@@ -0,0 +1,394 @@
+import { Injectable, Logger, OnModuleInit } from '@nestjs/common';
+import { Cron, CronExpression } from '@nestjs/schedule';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { load, type CheerioAPI, type Cheerio } from 'cheerio';
+import type { Element } from 'domhandler';
+
+import { curlFetchHtml } from '../../shared/utils/curl-fetch';
+import { RankingItemDto } from './dto/ranking-item.dto';
+import { SaRankingEntity } from './entities/sa-ranking.entity';
+
+// ────────────────────────────────────────────────────────────
+// SA 랭킹(계급/랭크전/클랜) — 매일 00:00(KST) 크롤링 후 DB 영속.
+// 유저에겐 DB에서 카테고리별로 서빙(방문마다 크롤링 X).
+// 데이터는 AJAX 리스트 엔드포인트 또는 정적 페이지에서 수집한다.
+// 시즌 파라미터(예: 20260102 / 2602)는 시즌마다 바뀌므로 list 페이지에서 추출한다.
+// ────────────────────────────────────────────────────────────
+
+// 파싱 중간 결과 (카테고리별로 일부 필드만 채워진다)
+interface RankingRaw {
+  rankNo: number;
+  name: string;
+  gradeImg?: string;
+  tierImg?: string;
+  clanMark?: string;
+  winRate?: string;
+  kd?: string;
+  record?: string;
+  rp?: string;
+  playTime?: string;
+  score?: string;
+  master?: string;
+}
+
+@Injectable()
+export class RankingService implements OnModuleInit {
+  private readonly logger = new Logger(RankingService.name);
+
+  private static readonly BASE = 'https://sa.nexon.com';
+  private static readonly REFERER = 'https://sa.nexon.com/';
+  // 카테고리별 보관 개수 (홈 랭킹 카드 TOP 10)
+  private static readonly PER_CATEGORY = 10;
+  // AJAX 엔드포인트 호출용 헤더
+  private static readonly AJAX_HEADERS = { 'X-Requested-With': 'XMLHttpRequest' };
+
+  constructor(
+    @InjectRepository(SaRankingEntity)
+    private readonly repo: Repository<SaRankingEntity>,
+  ) {}
+
+  onModuleInit(): void {
+    void this.seedIfEmpty();
+  }
+
+  private async seedIfEmpty(): Promise<void> {
+    try {
+      const count = await this.repo.count();
+      if (count > 0) return;
+      this.logger.log('랭킹 데이터가 없어 초기 크롤링을 수행합니다.');
+      await this.refresh();
+    } catch (error) {
+      this.logger.warn(`초기 랭킹 시드 실패: ${(error as Error).message}`);
+    }
+  }
+
+  // 매일 00:00:00 (KST) — 랭킹 갱신 (전일 기록 기준 갱신 시점)
+  @Cron(CronExpression.EVERY_DAY_AT_MIDNIGHT, {
+    name: 'daily-ranking-refresh',
+    timeZone: 'Asia/Seoul',
+  })
+  async handleDailyRefresh(): Promise<void> {
+    this.logger.log('일일 랭킹 갱신(00:00 KST) 시작');
+    await this.refresh();
+  }
+
+  /**
+   * 7개 데이터셋을 각각 크롤링 → 성공·비어있지 않은 카테고리만 교체.
+   * 한 카테고리 실패/빈 결과여도 다른 카테고리·기존 데이터는 유지된다.
+   */
+  async refresh(): Promise<number> {
+    let total = 0;
+
+    // 각 카테고리를 (페치+파싱) 후 교체. 실패는 개별 격리.
+    const tasks: { category: string; run: () => Promise<RankingRaw[]> }[] = [
+      { category: 'total_class', run: () => this.crawlTotalClass() },
+      { category: 'season_class', run: () => this.crawlSeasonClass() },
+      { category: 'ranked_solo', run: () => this.crawlRankMatch('S') },
+      { category: 'ranked_party', run: () => this.crawlRankMatch('') },
+      { category: 'ranked_clan', run: () => this.crawlClanRank() },
+      { category: 'official_clan', run: () => this.crawlOfficialClan() },
+      { category: 'clan', run: () => this.crawlClan() },
+    ];
+
+    for (const task of tasks) {
+      try {
+        const items = (await task.run()).slice(0, RankingService.PER_CATEGORY);
+        if (!items.length) {
+          this.logger.warn(
+            `[${task.category}] 크롤링 결과가 비어 갱신을 건너뜁니다(기존 유지).`,
+          );
+          continue;
+        }
+        await this.replaceCategory(task.category, items);
+        total += items.length;
+        this.logger.log(`[${task.category}] ${items.length}건 갱신 완료`);
+      } catch (error) {
+        this.logger.warn(
+          `[${task.category}] 갱신 실패(기존 유지): ${(error as Error).message}`,
+        );
+      }
+    }
+
+    return total;
+  }
+
+  /** 카테고리 단위 전체 교체 (트랜잭션) */
+  private async replaceCategory(
+    category: string,
+    items: RankingRaw[],
+  ): Promise<void> {
+    await this.repo.manager.transaction(async (m) => {
+      await m.delete(SaRankingEntity, { category });
+      const rows = items.map((it, i) =>
+        m.create(SaRankingEntity, {
+          category,
+          rankNo: it.rankNo,
+          name: it.name,
+          gradeImg: it.gradeImg ?? '',
+          tierImg: it.tierImg ?? '',
+          clanMark: it.clanMark ?? '',
+          winRate: it.winRate ?? '',
+          kd: it.kd ?? '',
+          record: it.record ?? '',
+          rp: it.rp ?? '',
+          playTime: it.playTime ?? '',
+          score: it.score ?? '',
+          master: it.master ?? '',
+          sortOrder: i,
+        }),
+      );
+      await m.save(rows);
+    });
+  }
+
+  /** DB에서 카테고리별 랭킹 조회 (크롤링하지 않음). 키 순서는 화면 카테고리 순서. */
+  async getSections(): Promise<Record<string, RankingItemDto[]>> {
+    const rows = await this.repo.find({
+      order: { category: 'ASC', sortOrder: 'ASC' },
+    });
+
+    const out: Record<string, RankingItemDto[]> = {
+      total_class: [],
+      season_class: [],
+      ranked_solo: [],
+      ranked_party: [],
+      ranked_clan: [],
+      official_clan: [],
+      clan: [],
+    };
+    for (const r of rows) {
+      (out[r.category] ??= []).push({
+        rankNo: r.rankNo,
+        name: r.name,
+        gradeImg: r.gradeImg,
+        tierImg: r.tierImg,
+        clanMark: r.clanMark,
+        winRate: r.winRate,
+        kd: r.kd,
+        record: r.record,
+        rp: r.rp,
+        playTime: r.playTime,
+        score: r.score,
+        master: r.master,
+      });
+    }
+    return out;
+  }
+
+  // ──────────────────────────────────────────────────────────
+  // 크롤링 (카테고리별)
+  // ──────────────────────────────────────────────────────────
+
+  /** AJAX/정적 페이지 fetch (브라우저 + AJAX 헤더) */
+  private fetch(url: string): Promise<string> {
+    return curlFetchHtml(RankingService.BASE + url, {
+      referer: RankingService.REFERER,
+      headers: RankingService.AJAX_HEADERS,
+    });
+  }
+
+  /** list 페이지에서 정규식으로 현재 시즌값 추출 */
+  private async extractSeason(
+    listPath: string,
+    regexes: RegExp[],
+  ): Promise<string> {
+    const html = await this.fetch(listPath);
+    for (const re of regexes) {
+      const m = html.match(re);
+      if (m?.[1]) return m[1];
+    }
+    throw new Error(`시즌값 추출 실패: ${listPath}`);
+  }
+
+  /** 통합 계급 — 시즌 무관 */
+  private async crawlTotalClass(): Promise<RankingRaw[]> {
+    const html = await this.fetch(
+      '/ranking/total/ranklist.aspx?n4PageNo=1&strSearch=&delay=false&rd=0.1',
+    );
+    return this.parseUserClass(html);
+  }
+
+  /** 시즌 계급 — seasonlevel list 에서 현재 시즌 추출 */
+  private async crawlSeasonClass(): Promise<RankingRaw[]> {
+    const season = await this.extractSeason('/ranking/seasonlevel/list.aspx', [
+      /id="Contents_hid_now_season_no"\s+value="(\d+)"/i,
+      /<option\s+selected[^>]*value="(\d+)"/i,
+    ]);
+    const html = await this.fetch(
+      `/ranking/seasonlevel/ranklist.aspx?strSeasonNo=${season}&n4PageNo=1&strSearch=&delay=false&now_season=${season}&rd=0.1`,
+    );
+    return this.parseUserClass(html);
+  }
+
+  /** 랭크전 솔로(party='S') / 파티(party='') — rankmatch list 에서 시즌 추출 */
+  private async crawlRankMatch(party: 'S' | ''): Promise<RankingRaw[]> {
+    // 첫 옵션 value(예: 2602S)에서 숫자 부분만 시즌 번호로 사용
+    const season = await this.extractSeason('/ranking/rankmatch/list.aspx', [
+      /<option[^>]*value="(\d+)S?"/i,
+    ]);
+    const html = await this.fetch(
+      `/ranking/rankmatch/rankinglist.aspx?n2SeasonNo=${season}&n4PageNo=1&strSeasonType=${party}&strSearch=&delay=false&now_season=${season}&rd=0.1`,
+    );
+    return this.parseRankMatch(html);
+  }
+
+  /** 랭크전 클랜 — clanrank list 에서 시즌 추출.
+   *  ※ now_season 과 gubun(C=클랜) 파라미터가 없으면 "집계 중" 빈 결과가 반환된다. */
+  private async crawlClanRank(): Promise<RankingRaw[]> {
+    const season = await this.extractSeason('/ranking/clanrank/list.aspx', [
+      /id="Contents_hid_now_season_no"\s+value="(\d+)"/i,
+      /<option\s+selected[^>]*value="(\d+)"/i,
+    ]);
+    const html = await this.fetch(
+      `/ranking/clanrank/rank.aspx?strSeasonNo=${season}&n4PageNo=1&strSearch=&delay=false&now_season=${season}&gubun=C&rd=0.1`,
+    );
+    return this.parseClanRank(html);
+  }
+
+  /** 공식클랜 — 정적 페이지 */
+  private async crawlOfficialClan(): Promise<RankingRaw[]> {
+    const html = await this.fetch('/ranking/official/rank.aspx');
+    return this.parseOfficialClan(html);
+  }
+
+  /** 클랜 — 정적 페이지 */
+  private async crawlClan(): Promise<RankingRaw[]> {
+    const html = await this.fetch('/ranking/clan/rank.aspx');
+    return this.parseClan(html);
+  }
+
+  // ──────────────────────────────────────────────────────────
+  // 파싱 (응답 HTML → RankingRaw[])
+  // ──────────────────────────────────────────────────────────
+
+  /** boardList 의 데이터 행(tr) 수집 (no-data 행 제외) */
+  private dataRows($: CheerioAPI): Cheerio<Element> {
+    return $('.boardList tbody tr').filter(
+      (_, tr) => $(tr).find('td.no-data, .no-data').length === 0,
+    );
+  }
+
+  private txt($el: Cheerio<Element>): string {
+    return $el.text().replace(/\s+/g, ' ').trim();
+  }
+
+  /** 클랜마크 이미지 src 들을 '|'로 join (배경 0_ + 심볼 1_ 2개 레이어) */
+  private joinImgSrcs($imgs: Cheerio<Element>): string {
+    const out: string[] = [];
+    $imgs.each((_, el) => {
+      const src = el.attribs?.['src'];
+      if (src) out.push(src);
+    });
+    return out.join('|');
+  }
+
+  /** 계급 랭킹(통합/시즌): [순위][등락][닉네임+계급][승률][킬데스][전적][클랜] */
+  private parseUserClass(html: string): RankingRaw[] {
+    const $ = load(html);
+    const out: RankingRaw[] = [];
+    this.dataRows($).each((i, tr) => {
+      const row = $(tr);
+      const tds = row.find('> td');
+      const name = this.txt(row.find('td.left a').first());
+      if (!name) return;
+      out.push({
+        rankNo: i + 1,
+        name,
+        gradeImg: row.find('span.grade img').first().attr('src') ?? '',
+        winRate: this.txt(tds.eq(3)),
+        kd: this.txt(tds.eq(4)),
+        record: this.txt(tds.eq(5)),
+        clanMark: this.joinImgSrcs(row.find('span.clanmark img')),
+      });
+    });
+    return out;
+  }
+
+  /** 랭크전 유저(솔로/파티): [순위][등락][닉네임+계급][RP+티어][승률][킬데스][플레이시간][클랜] */
+  private parseRankMatch(html: string): RankingRaw[] {
+    const $ = load(html);
+    const out: RankingRaw[] = [];
+    this.dataRows($).each((i, tr) => {
+      const row = $(tr);
+      const tds = row.find('> td');
+      const name = this.txt(row.find('td.left a').first());
+      if (!name) return;
+      const rpCell = tds.eq(3);
+      out.push({
+        rankNo: i + 1,
+        name,
+        gradeImg: row.find('span.grade img').first().attr('src') ?? '',
+        tierImg: rpCell.find('span.mmr img').first().attr('src') ?? '',
+        // 'XX,XXX RP' → 숫자/콤마만
+        rp: this.txt(rpCell).replace(/[^0-9,]/g, ''),
+        winRate: this.txt(tds.eq(4)),
+        kd: this.txt(tds.eq(5)),
+        playTime: this.txt(tds.eq(6)),
+        clanMark: this.joinImgSrcs(row.find('span.clanmark img')),
+      });
+    });
+    return out;
+  }
+
+  /** 랭크전 클랜: [순위][등락][클랜명][클랜RP][승률][참여판수][마스터] */
+  private parseClanRank(html: string): RankingRaw[] {
+    const $ = load(html);
+    const out: RankingRaw[] = [];
+    this.dataRows($).each((i, tr) => {
+      const row = $(tr);
+      const tds = row.find('> td');
+      const name = this.txt(tds.eq(2).find('a').first()) || this.txt(tds.eq(2));
+      if (!name) return;
+      out.push({
+        rankNo: i + 1,
+        name,
+        clanMark: this.joinImgSrcs(tds.eq(2).find('span.clanmark img')),
+        rp: this.txt(tds.eq(3)).replace(/[^0-9,]/g, ''),
+        winRate: this.txt(tds.eq(4)),
+        record: this.txt(tds.eq(5)),
+        master: this.txt(tds.eq(6).find('a').first()) || this.txt(tds.eq(6)),
+      });
+    });
+    return out;
+  }
+
+  /** 공식클랜: [순위][등락][클랜명][누적점수][클랜마스터] */
+  private parseOfficialClan(html: string): RankingRaw[] {
+    const $ = load(html);
+    const out: RankingRaw[] = [];
+    this.dataRows($).each((i, tr) => {
+      const row = $(tr);
+      const tds = row.find('> td');
+      const name = this.txt(tds.eq(2).find('a b').first());
+      if (!name) return;
+      out.push({
+        rankNo: i + 1,
+        name,
+        clanMark: this.joinImgSrcs(tds.eq(2).find('span.clanmark img')),
+        score: this.txt(tds.eq(3)),
+        master: this.txt(tds.eq(4).find('a').first()) || this.txt(tds.eq(4)),
+      });
+    });
+    return out;
+  }
+
+  /** 클랜: [순위][등락][클랜명][클랜마스터] */
+  private parseClan(html: string): RankingRaw[] {
+    const $ = load(html);
+    const out: RankingRaw[] = [];
+    this.dataRows($).each((i, tr) => {
+      const row = $(tr);
+      const tds = row.find('> td');
+      const name = this.txt(tds.eq(2).find('a b').first()) || this.txt(tds.eq(2).find('a').first());
+      if (!name) return;
+      out.push({
+        rankNo: i + 1,
+        name,
+        clanMark: this.joinImgSrcs(tds.eq(2).find('span.clanmark img')),
+        master: this.txt(tds.eq(3).find('a').first()) || this.txt(tds.eq(3)),
+      });
+    });
+    return out;
+  }
+}
diff --git a/backend/src/modules/sa-match/dto/match-detail.dto.ts b/backend/src/modules/sa-match/dto/match-detail.dto.ts
new file mode 100644
index 0000000..a81009c
--- /dev/null
+++ b/backend/src/modules/sa-match/dto/match-detail.dto.ts
@@ -0,0 +1,24 @@
+import { ApiProperty } from '@nestjs/swagger';
+
+import { ParticipantDto } from './participant.dto';
+
+// 매치 상세 DTO (맵 + 참가자 전원)
+export class MatchDetailDto {
+  @ApiProperty({ example: '260607145024007001' })
+  matchId!: string;
+
+  @ApiProperty({ example: '랭크전 솔로' })
+  matchType!: string;
+
+  @ApiProperty({ example: '폭파미션' })
+  matchMode!: string;
+
+  @ApiProperty({ description: '매치 일시(ISO)', example: '2026-06-07T05:50:24.532Z' })
+  dateMatch!: string;
+
+  @ApiProperty({ description: '매치 맵', example: '제3보급창고' })
+  matchMap!: string;
+
+  @ApiProperty({ type: [ParticipantDto], description: '양 팀 참가자 성적' })
+  participants!: ParticipantDto[];
+}
diff --git a/backend/src/modules/sa-match/dto/match-item.dto.ts b/backend/src/modules/sa-match/dto/match-item.dto.ts
new file mode 100644
index 0000000..f993ab4
--- /dev/null
+++ b/backend/src/modules/sa-match/dto/match-item.dto.ts
@@ -0,0 +1,28 @@
+import { ApiProperty } from '@nestjs/swagger';
+
+// 매치 목록 항목 DTO
+export class MatchItemDto {
+  @ApiProperty({ example: '260607145024007001' })
+  matchId!: string;
+
+  @ApiProperty({ example: '랭크전 솔로' })
+  matchType!: string;
+
+  @ApiProperty({ example: '폭파미션' })
+  matchMode!: string;
+
+  @ApiProperty({ description: '매치 일시(ISO)', example: '2026-06-07T05:50:24.532Z' })
+  dateMatch!: string;
+
+  @ApiProperty({ description: '매치 결과 코드(본인 기준)', example: '1' })
+  matchResult!: string;
+
+  @ApiProperty({ example: 9 })
+  kill!: number;
+
+  @ApiProperty({ example: 6 })
+  death!: number;
+
+  @ApiProperty({ example: 3 })
+  assist!: number;
+}
diff --git a/backend/src/modules/sa-match/dto/match-query.dto.ts b/backend/src/modules/sa-match/dto/match-query.dto.ts
new file mode 100644
index 0000000..b01728c
--- /dev/null
+++ b/backend/src/modules/sa-match/dto/match-query.dto.ts
@@ -0,0 +1,24 @@
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+import { IsNotEmpty, IsOptional, IsString } from 'class-validator';
+
+// 매치 목록 조회 쿼리 DTO
+export class MatchQueryDto {
+  @ApiProperty({ description: '유저 OUID', example: '9b2852e25a85deebc5ce4173b1ccc1e6' })
+  @IsString()
+  @IsNotEmpty({ message: 'ouid를 입력해 주세요.' })
+  ouid!: string;
+
+  @ApiProperty({
+    description: '매치 타입',
+    example: '랭크전 솔로',
+    enum: ['퀵매치 클랜전', '클랜 랭크전', '랭크전 솔로', '랭크전 파티', '토너먼트'],
+  })
+  @IsString()
+  @IsNotEmpty({ message: 'match_type을 입력해 주세요.' })
+  match_type!: string;
+
+  @ApiPropertyOptional({ description: '매치 모드', example: '폭파미션', default: '폭파미션' })
+  @IsString()
+  @IsOptional()
+  match_mode: string = '폭파미션';
+}
diff --git a/backend/src/modules/sa-match/dto/participant.dto.ts b/backend/src/modules/sa-match/dto/participant.dto.ts
new file mode 100644
index 0000000..91349a3
--- /dev/null
+++ b/backend/src/modules/sa-match/dto/participant.dto.ts
@@ -0,0 +1,34 @@
+import { ApiProperty } from '@nestjs/swagger';
+
+// 매치 상세 참가자 DTO
+export class ParticipantDto {
+  @ApiProperty({ description: '팀 식별자', example: '1' })
+  teamId!: string;
+
+  @ApiProperty({ description: '매치 결과 코드', example: '1' })
+  matchResult!: string;
+
+  @ApiProperty({ example: 'Hack' })
+  userName!: string;
+
+  @ApiProperty({ description: '시즌 계급', example: '총사령관' })
+  seasonGrade!: string;
+
+  @ApiProperty({ description: '클랜명', example: '바디' })
+  clanName!: string;
+
+  @ApiProperty({ example: 18 })
+  kill!: number;
+
+  @ApiProperty({ example: 9 })
+  death!: number;
+
+  @ApiProperty({ example: 7 })
+  headshot!: number;
+
+  @ApiProperty({ example: 3200 })
+  damage!: number;
+
+  @ApiProperty({ example: 4 })
+  assist!: number;
+}
diff --git a/backend/src/modules/sa-match/entities/sa-match-detail.entity.ts b/backend/src/modules/sa-match/entities/sa-match-detail.entity.ts
new file mode 100644
index 0000000..210de3e
--- /dev/null
+++ b/backend/src/modules/sa-match/entities/sa-match-detail.entity.ts
@@ -0,0 +1,26 @@
+import { Column, CreateDateColumn, Entity, PrimaryColumn } from 'typeorm';
+
+// 매치 상세 헤더 (lazy) — 유저가 '더보기' 했을 때만 match-detail API 로 적재.
+// 존재 여부로 상세 로드 완료를 판단한다(참가자는 sa_match_participants).
+@Entity('sa_match_details')
+export class SaMatchDetailEntity {
+  @PrimaryColumn({ type: 'varchar', length: 40 })
+  matchId!: string;
+
+  @Column({ type: 'varchar', length: 30, default: '' })
+  matchType!: string;
+
+  @Column({ type: 'varchar', length: 30, default: '' })
+  matchMode!: string;
+
+  @Column({ type: 'timestamptz', nullable: true })
+  dateMatch!: Date | null;
+
+  // 매치 맵 (상세에서만 제공)
+  @Column({ type: 'varchar', length: 50, default: '' })
+  matchMap!: string;
+
+  // 상세 적재 시각
+  @CreateDateColumn()
+  detailLoadedAt!: Date;
+}
diff --git a/backend/src/modules/sa-match/entities/sa-match-participant.entity.ts b/backend/src/modules/sa-match/entities/sa-match-participant.entity.ts
new file mode 100644
index 0000000..01d884f
--- /dev/null
+++ b/backend/src/modules/sa-match/entities/sa-match-participant.entity.ts
@@ -0,0 +1,48 @@
+import {
+  Column,
+  Entity,
+  Index,
+  PrimaryGeneratedColumn,
+} from 'typeorm';
+
+// 매치 상세 참가자 (lazy) — 한 매치의 양 팀 전원 성적. match-detail API 로 적재.
+@Entity('sa_match_participants')
+@Index(['matchId'])
+export class SaMatchParticipantEntity {
+  @PrimaryGeneratedColumn()
+  id!: number;
+
+  @Column({ type: 'varchar', length: 40 })
+  matchId!: string;
+
+  @Column({ type: 'varchar', length: 20, default: '' })
+  teamId!: string;
+
+  @Column({ type: 'varchar', length: 10, default: '' })
+  matchResult!: string;
+
+  @Column({ type: 'varchar', length: 50, default: '' })
+  userName!: string;
+
+  @Column({ type: 'varchar', length: 30, default: '' })
+  seasonGrade!: string;
+
+  @Column({ type: 'varchar', length: 50, default: '' })
+  clanName!: string;
+
+  @Column({ type: 'int', default: 0 })
+  kill!: number;
+
+  @Column({ type: 'int', default: 0 })
+  death!: number;
+
+  @Column({ type: 'int', default: 0 })
+  headshot!: number;
+
+  // 데미지는 소수(float)로 제공됨 (예: 543.0, 819.0)
+  @Column({ type: 'float', default: 0 })
+  damage!: number;
+
+  @Column({ type: 'int', default: 0 })
+  assist!: number;
+}
diff --git a/backend/src/modules/sa-match/entities/sa-match.entity.ts b/backend/src/modules/sa-match/entities/sa-match.entity.ts
new file mode 100644
index 0000000..a976d6b
--- /dev/null
+++ b/backend/src/modules/sa-match/entities/sa-match.entity.ts
@@ -0,0 +1,54 @@
+import {
+  Column,
+  CreateDateColumn,
+  Entity,
+  Index,
+  PrimaryGeneratedColumn,
+} from 'typeorm';
+
+// 매치 목록 (유저별 매치 참여 기록) — match API 결과를 누적.
+// 같은 매치라도 유저(ouid)마다 본인 성적(k/d/a)이 다르므로 (matchId, ouid) 단위로 저장한다.
+@Entity('sa_matches')
+@Index(['ouid', 'matchType'])
+@Index(['matchId', 'ouid'], { unique: true })
+export class SaMatchEntity {
+  @PrimaryGeneratedColumn()
+  id!: number;
+
+  // 매치 식별자
+  @Index()
+  @Column({ type: 'varchar', length: 40 })
+  matchId!: string;
+
+  // 매치를 조회한 유저(본인) 식별자
+  @Column({ type: 'varchar', length: 64 })
+  ouid!: string;
+
+  // 매치 타입 (랭크전 솔로/파티, 퀵매치 클랜전, 클랜 랭크전, 토너먼트 등)
+  @Column({ type: 'varchar', length: 30 })
+  matchType!: string;
+
+  // 매치 모드 (폭파미션 등)
+  @Column({ type: 'varchar', length: 30 })
+  matchMode!: string;
+
+  // 매치 일시
+  @Column({ type: 'timestamptz' })
+  dateMatch!: Date;
+
+  // 매치 결과 코드 (본인 기준)
+  @Column({ type: 'varchar', length: 10, default: '' })
+  matchResult!: string;
+
+  @Column({ type: 'int', default: 0 })
+  kill!: number;
+
+  @Column({ type: 'int', default: 0 })
+  death!: number;
+
+  @Column({ type: 'int', default: 0 })
+  assist!: number;
+
+  @CreateDateColumn()
+  createdAt!: Date;
+}
diff --git a/backend/src/modules/sa-match/sa-match.controller.ts b/backend/src/modules/sa-match/sa-match.controller.ts
new file mode 100644
index 0000000..aaba3fd
--- /dev/null
+++ b/backend/src/modules/sa-match/sa-match.controller.ts
@@ -0,0 +1,35 @@
+import { Controller, Get, Param, Query } from '@nestjs/common';
+import { ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger';
+
+import { SaMatchService } from './sa-match.service';
+import { MatchQueryDto } from './dto/match-query.dto';
+import { MatchItemDto } from './dto/match-item.dto';
+import { MatchDetailDto } from './dto/match-detail.dto';
+
+@ApiTags('SA Match')
+@Controller('sa-matches')
+export class SaMatchController {
+  constructor(private readonly saMatchService: SaMatchService) {}
+
+  @Get()
+  @ApiOperation({
+    summary: '매치 목록 조회 (기본)',
+    description:
+      '유저(ouid)의 매치 목록을 넥슨 API에서 가져와 누적 저장 후 반환합니다. 상세 정보는 포함하지 않습니다.',
+  })
+  @ApiResponse({ status: 200, description: '매치 목록', type: [MatchItemDto] })
+  getMatches(@Query() dto: MatchQueryDto): Promise<MatchItemDto[]> {
+    return this.saMatchService.getMatches(dto.ouid, dto.match_type, dto.match_mode);
+  }
+
+  @Get(':matchId')
+  @ApiOperation({
+    summary: '매치 상세 조회 (더보기)',
+    description:
+      '특정 매치의 맵/참가자 상세를 반환합니다. 유저가 더보기 했을 때만 호출되며, 최초 1회 API로 적재 후 캐시됩니다.',
+  })
+  @ApiResponse({ status: 200, description: '매치 상세', type: MatchDetailDto })
+  getMatchDetail(@Param('matchId') matchId: string): Promise<MatchDetailDto> {
+    return this.saMatchService.getMatchDetail(matchId);
+  }
+}
diff --git a/backend/src/modules/sa-match/sa-match.module.ts b/backend/src/modules/sa-match/sa-match.module.ts
new file mode 100644
index 0000000..856c048
--- /dev/null
+++ b/backend/src/modules/sa-match/sa-match.module.ts
@@ -0,0 +1,26 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+
+import { SaMatchController } from './sa-match.controller';
+import { SaMatchService } from './sa-match.service';
+import { SaMatchEntity } from './entities/sa-match.entity';
+import { SaMatchDetailEntity } from './entities/sa-match-detail.entity';
+import { SaMatchParticipantEntity } from './entities/sa-match-participant.entity';
+import { SaUserEntity } from '../sa-user/entities/sa-user.entity';
+
+// 매치 모듈 — 목록(기본 누적 + 일일 크론) + 상세(더보기 lazy). 넥슨 호출은 전역 NexonService 사용.
+// 크론에서 등록 유저(sa_users)를 읽기 위해 SaUserEntity 를 함께 등록한다.
+@Module({
+  imports: [
+    TypeOrmModule.forFeature([
+      SaMatchEntity,
+      SaMatchDetailEntity,
+      SaMatchParticipantEntity,
+      SaUserEntity,
+    ]),
+  ],
+  controllers: [SaMatchController],
+  providers: [SaMatchService],
+  exports: [SaMatchService],
+})
+export class SaMatchModule {}
diff --git a/backend/src/modules/sa-match/sa-match.service.ts b/backend/src/modules/sa-match/sa-match.service.ts
new file mode 100644
index 0000000..83defc5
--- /dev/null
+++ b/backend/src/modules/sa-match/sa-match.service.ts
@@ -0,0 +1,233 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { Cron } from '@nestjs/schedule';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+
+import { NexonService } from '../../shared/nexon/nexon.service';
+import { SaUserEntity } from '../sa-user/entities/sa-user.entity';
+import { MatchItemDto } from './dto/match-item.dto';
+import { MatchDetailDto } from './dto/match-detail.dto';
+import { ParticipantDto } from './dto/participant.dto';
+import { SaMatchEntity } from './entities/sa-match.entity';
+import { SaMatchDetailEntity } from './entities/sa-match-detail.entity';
+import { SaMatchParticipantEntity } from './entities/sa-match-participant.entity';
+
+// 넥슨 API 응답 타입
+interface MatchApiItem {
+  match_id: string;
+  match_type: string;
+  match_mode: string;
+  date_match: string;
+  match_result: string;
+  kill: number;
+  death: number;
+  assist: number;
+}
+interface MatchListRes {
+  match: MatchApiItem[];
+}
+interface DetailParticipant {
+  team_id: string;
+  match_result: string;
+  user_name: string;
+  season_grade: string;
+  // 실제 응답 필드는 clan_name 이 아니라 guild_name 이며 null 일 수 있음
+  guild_name: string | null;
+  kill: number;
+  death: number;
+  headshot: number;
+  damage: number;
+  assist: number;
+}
+interface MatchDetailRes {
+  match_id: string;
+  match_type: string;
+  match_mode: string;
+  date_match: string;
+  match_map: string;
+  match_detail: DetailParticipant[];
+}
+
+// ────────────────────────────────────────────────────────────
+// 매치 — 목록(기본)은 넥슨 API에서 가져와 누적 저장하고,
+// 상세(맵/참가자)는 유저가 '더보기' 했을 때만 lazy 적재한다.
+// 매일 크론으로 등록 유저 전체의 매치 목록도 자동 누적한다(상세는 제외).
+// 모든 넥슨 호출은 NexonService 의 전역 rate limiter 를 통과한다.
+// ────────────────────────────────────────────────────────────
+@Injectable()
+export class SaMatchService {
+  private readonly logger = new Logger(SaMatchService.name);
+
+  // 기본 매치 모드 / 전체 매치 타입
+  private static readonly DEFAULT_MODE = '폭파미션';
+  private static readonly MATCH_TYPES = [
+    '퀵매치 클랜전',
+    '클랜 랭크전',
+    '랭크전 솔로',
+    '랭크전 파티',
+    '토너먼트',
+  ];
+
+  constructor(
+    @InjectRepository(SaMatchEntity)
+    private readonly matchRepo: Repository<SaMatchEntity>,
+    @InjectRepository(SaMatchDetailEntity)
+    private readonly detailRepo: Repository<SaMatchDetailEntity>,
+    @InjectRepository(SaMatchParticipantEntity)
+    private readonly participantRepo: Repository<SaMatchParticipantEntity>,
+    @InjectRepository(SaUserEntity)
+    private readonly userRepo: Repository<SaUserEntity>,
+    private readonly nexon: NexonService,
+  ) {}
+
+  /** 매치 목록 조회 — 최신분 누적 후 DB에서 반환. */
+  async getMatches(
+    ouid: string,
+    matchType: string,
+    matchMode: string,
+  ): Promise<MatchItemDto[]> {
+    await this.syncMatches(ouid, matchType, matchMode);
+
+    const saved = await this.matchRepo.find({
+      where: { ouid, matchType },
+      order: { dateMatch: 'DESC' },
+    });
+    return saved.map((m) => ({
+      matchId: m.matchId,
+      matchType: m.matchType,
+      matchMode: m.matchMode,
+      dateMatch: m.dateMatch.toISOString(),
+      matchResult: m.matchResult,
+      kill: m.kill,
+      death: m.death,
+      assist: m.assist,
+    }));
+  }
+
+  /** 넥슨 매치 목록 API → 신규분 누적(upsert). 실패는 격리(기존 데이터 유지). */
+  private async syncMatches(
+    ouid: string,
+    matchType: string,
+    matchMode: string,
+  ): Promise<void> {
+    try {
+      const res = await this.nexon.get<MatchListRes>('/suddenattack/v1/match', {
+        ouid,
+        match_mode: matchMode,
+        match_type: matchType,
+      });
+      const items = res?.match ?? [];
+      if (!items.length) return;
+      const rows = items.map((m) => ({
+        matchId: m.match_id,
+        ouid,
+        matchType: m.match_type,
+        matchMode: m.match_mode,
+        dateMatch: new Date(m.date_match),
+        matchResult: m.match_result ?? '',
+        kill: m.kill ?? 0,
+        death: m.death ?? 0,
+        assist: m.assist ?? 0,
+      }));
+      await this.matchRepo.upsert(rows, ['matchId', 'ouid']);
+    } catch (error) {
+      this.logger.warn(
+        `매치 동기화 실패(ouid=${ouid}, type=${matchType}): ${(error as Error).message}`,
+      );
+    }
+  }
+
+  // 매일 03:00 (KST) — 등록 유저 전체의 매치 목록 자동 누적 (상세는 더보기 시에만)
+  @Cron('0 3 * * *', {
+    name: 'daily-match-sync',
+    timeZone: 'Asia/Seoul',
+  })
+  async handleDailyMatchSync(): Promise<void> {
+    const users = await this.userRepo.find();
+    this.logger.log(
+      `일일 매치 동기화 시작 (대상 ${users.length}명 × ${SaMatchService.MATCH_TYPES.length}타입)`,
+    );
+    for (const user of users) {
+      for (const type of SaMatchService.MATCH_TYPES) {
+        // 호출 간격은 NexonService rate limiter 가 전역으로 조절한다
+        await this.syncMatches(user.ouid, type, SaMatchService.DEFAULT_MODE);
+      }
+    }
+    this.logger.log('일일 매치 동기화 완료');
+  }
+
+  /** 매치 상세 조회 — DB에 적재돼 있으면 반환, 없으면 더보기 시점에 1회 API 적재 후 반환. */
+  async getMatchDetail(matchId: string): Promise<MatchDetailDto> {
+    const cached = await this.detailRepo.findOne({ where: { matchId } });
+    if (cached) {
+      const parts = await this.participantRepo.find({ where: { matchId } });
+      return this.toDetailDto(cached, parts);
+    }
+
+    const res = await this.nexon.get<MatchDetailRes>(
+      '/suddenattack/v1/match-detail',
+      { match_id: matchId },
+    );
+
+    // 헤더 + 참가자 적재 (재로드 대비 참가자는 교체)
+    await this.detailRepo.manager.transaction(async (m) => {
+      await m.delete(SaMatchParticipantEntity, { matchId });
+      await m.save(
+        m.create(SaMatchDetailEntity, {
+          matchId: res.match_id,
+          matchType: res.match_type ?? '',
+          matchMode: res.match_mode ?? '',
+          dateMatch: res.date_match ? new Date(res.date_match) : null,
+          matchMap: res.match_map ?? '',
+        }),
+      );
+      const parts = (res.match_detail ?? []).map((p) =>
+        m.create(SaMatchParticipantEntity, {
+          matchId: res.match_id,
+          teamId: p.team_id ?? '',
+          matchResult: p.match_result ?? '',
+          userName: p.user_name ?? '',
+          seasonGrade: p.season_grade ?? '',
+          clanName: p.guild_name ?? '',
+          kill: p.kill ?? 0,
+          death: p.death ?? 0,
+          headshot: p.headshot ?? 0,
+          damage: p.damage ?? 0,
+          assist: p.assist ?? 0,
+        }),
+      );
+      await m.save(parts);
+    });
+
+    const header = await this.detailRepo.findOne({ where: { matchId } });
+    const parts = await this.participantRepo.find({ where: { matchId } });
+    return this.toDetailDto(header!, parts);
+  }
+
+  private toDetailDto(
+    header: SaMatchDetailEntity,
+    parts: SaMatchParticipantEntity[],
+  ): MatchDetailDto {
+    return {
+      matchId: header.matchId,
+      matchType: header.matchType,
+      matchMode: header.matchMode,
+      dateMatch: header.dateMatch ? header.dateMatch.toISOString() : '',
+      matchMap: header.matchMap,
+      participants: parts.map(
+        (p): ParticipantDto => ({
+          teamId: p.teamId,
+          matchResult: p.matchResult,
+          userName: p.userName,
+          seasonGrade: p.seasonGrade,
+          clanName: p.clanName,
+          kill: p.kill,
+          death: p.death,
+          headshot: p.headshot,
+          damage: p.damage,
+          assist: p.assist,
+        }),
+      ),
+    };
+  }
+}
diff --git a/backend/src/modules/sa-meta/dto/meta-item.dto.ts b/backend/src/modules/sa-meta/dto/meta-item.dto.ts
new file mode 100644
index 0000000..391ffbe
--- /dev/null
+++ b/backend/src/modules/sa-meta/dto/meta-item.dto.ts
@@ -0,0 +1,14 @@
+import { ApiProperty } from '@nestjs/swagger';
+
+// 메타 항목 DTO (이름 → 이미지)
+export class MetaItemDto {
+  @ApiProperty({ description: '항목 이름', example: 'LEGEND' })
+  name!: string;
+
+  @ApiProperty({
+    description: '이미지 URL',
+    example:
+      'https://open.api.nexon.com/static/suddenattack/img/2505b378734c223d6961dc336f3aee1f',
+  })
+  image!: string;
+}
diff --git a/backend/src/modules/sa-meta/entities/sa-meta.entity.ts b/backend/src/modules/sa-meta/entities/sa-meta.entity.ts
new file mode 100644
index 0000000..368cc5d
--- /dev/null
+++ b/backend/src/modules/sa-meta/entities/sa-meta.entity.ts
@@ -0,0 +1,36 @@
+import {
+  Column,
+  Entity,
+  Index,
+  PrimaryGeneratedColumn,
+  UpdateDateColumn,
+} from 'typeorm';
+
+// SA 메타데이터 (계급/시즌계급/티어 이름 → 이미지 URL 매핑)
+// 넥슨 공식 정적 메타(/static/suddenattack/meta/*)를 영속화한다.
+@Entity('sa_meta')
+@Index(['type', 'sortOrder'])
+@Index(['type', 'name'])
+export class SaMetaEntity {
+  @PrimaryGeneratedColumn()
+  id!: number;
+
+  // 메타 종류: 'grade'(통합계급) | 'season_grade'(시즌계급) | 'tier'(티어)
+  @Column({ type: 'varchar', length: 20 })
+  type!: string;
+
+  // 항목 이름 (예: '대원수', '특등이병', 'LEGEND')
+  @Column({ type: 'varchar', length: 50 })
+  name!: string;
+
+  // 이미지 URL
+  @Column({ type: 'varchar', length: 500, default: '' })
+  image!: string;
+
+  // 등급/티어 순서(낮을수록 하위)
+  @Column({ type: 'int', default: 0 })
+  sortOrder!: number;
+
+  @UpdateDateColumn()
+  updatedAt!: Date;
+}
diff --git a/backend/src/modules/sa-meta/sa-meta.controller.ts b/backend/src/modules/sa-meta/sa-meta.controller.ts
new file mode 100644
index 0000000..befcbdc
--- /dev/null
+++ b/backend/src/modules/sa-meta/sa-meta.controller.ts
@@ -0,0 +1,25 @@
+import { Controller, Get } from '@nestjs/common';
+import { ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger';
+
+import { SaMetaService } from './sa-meta.service';
+import { MetaItemDto } from './dto/meta-item.dto';
+
+@ApiTags('SA Meta')
+@Controller('sa-meta')
+export class SaMetaController {
+  constructor(private readonly saMetaService: SaMetaService) {}
+
+  @Get()
+  @ApiOperation({
+    summary: 'SA 메타데이터 조회 (계급/시즌계급/티어 이미지)',
+    description:
+      '계급(grade)/시즌계급(season_grade)/티어(tier) 이름→이미지 매핑을 반환합니다. 넥슨 정적 메타를 주 1회 갱신합니다.',
+  })
+  @ApiResponse({
+    status: 200,
+    description: '종류별 메타 목록 { grade: [...], season_grade: [...], tier: [...] }',
+  })
+  getAll(): Promise<Record<string, MetaItemDto[]>> {
+    return this.saMetaService.getAll();
+  }
+}
diff --git a/backend/src/modules/sa-meta/sa-meta.module.ts b/backend/src/modules/sa-meta/sa-meta.module.ts
new file mode 100644
index 0000000..7bcabcf
--- /dev/null
+++ b/backend/src/modules/sa-meta/sa-meta.module.ts
@@ -0,0 +1,15 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+
+import { SaMetaController } from './sa-meta.controller';
+import { SaMetaService } from './sa-meta.service';
+import { SaMetaEntity } from './entities/sa-meta.entity';
+
+// SA 메타데이터 모듈 — 넥슨 정적 메타(계급/시즌계급/티어) 주 1회 동기화 + DB 영속
+@Module({
+  imports: [TypeOrmModule.forFeature([SaMetaEntity])],
+  controllers: [SaMetaController],
+  providers: [SaMetaService],
+  exports: [SaMetaService],
+})
+export class SaMetaModule {}
diff --git a/backend/src/modules/sa-meta/sa-meta.service.ts b/backend/src/modules/sa-meta/sa-meta.service.ts
new file mode 100644
index 0000000..a30ca80
--- /dev/null
+++ b/backend/src/modules/sa-meta/sa-meta.service.ts
@@ -0,0 +1,128 @@
+import { Injectable, Logger, OnModuleInit } from '@nestjs/common';
+import { Cron } from '@nestjs/schedule';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+
+import { NexonService } from '../../shared/nexon/nexon.service';
+import { MetaItemDto } from './dto/meta-item.dto';
+import { SaMetaEntity } from './entities/sa-meta.entity';
+
+// 메타 종류별 넥슨 정적 엔드포인트 정의
+interface MetaSource {
+  type: string;
+  path: string;
+  nameKey: string;
+  imageKey: string;
+}
+
+// ────────────────────────────────────────────────────────────
+// SA 메타데이터(계급/시즌계급/티어 이미지) — 넥슨 정적 메타를 주 1회 동기화.
+// 거의 불변이므로 부팅 시 비어 있으면 1회 시드 + 매주 갱신한다.
+// ────────────────────────────────────────────────────────────
+@Injectable()
+export class SaMetaService implements OnModuleInit {
+  private readonly logger = new Logger(SaMetaService.name);
+
+  private static readonly SOURCES: MetaSource[] = [
+    {
+      type: 'grade',
+      path: '/static/suddenattack/meta/grade',
+      nameKey: 'grade',
+      imageKey: 'grade_image',
+    },
+    {
+      type: 'season_grade',
+      path: '/static/suddenattack/meta/season_grade',
+      nameKey: 'season_grade',
+      imageKey: 'season_grade_image',
+    },
+    {
+      type: 'tier',
+      path: '/static/suddenattack/meta/tier',
+      nameKey: 'tier',
+      imageKey: 'tier_image',
+    },
+  ];
+
+  constructor(
+    @InjectRepository(SaMetaEntity)
+    private readonly repo: Repository<SaMetaEntity>,
+    private readonly nexon: NexonService,
+  ) {}
+
+  onModuleInit(): void {
+    void this.seedIfEmpty();
+  }
+
+  private async seedIfEmpty(): Promise<void> {
+    try {
+      const count = await this.repo.count();
+      if (count > 0) return;
+      this.logger.log('메타 데이터가 없어 초기 동기화를 수행합니다.');
+      await this.refresh();
+    } catch (error) {
+      this.logger.warn(`초기 메타 시드 실패: ${(error as Error).message}`);
+    }
+  }
+
+  // 매주 목요일 10:00 (KST) — 메타 갱신 (정기점검 이후, 신규 계급/티어 추가 대비)
+  @Cron('0 10 * * 4', {
+    name: 'weekly-meta-refresh',
+    timeZone: 'Asia/Seoul',
+  })
+  async handleWeeklyRefresh(): Promise<void> {
+    this.logger.log('주간 메타 갱신 시작');
+    await this.refresh();
+  }
+
+  /** 종류별 메타 크롤링 → 성공·비어있지 않은 종류만 교체 */
+  async refresh(): Promise<number> {
+    let total = 0;
+    for (const src of SaMetaService.SOURCES) {
+      try {
+        const list = await this.nexon.get<Record<string, string>[]>(src.path);
+        const items = (list ?? [])
+          .map((it, i) => ({
+            type: src.type,
+            name: it[src.nameKey] ?? '',
+            image: it[src.imageKey] ?? '',
+            sortOrder: i,
+          }))
+          .filter((it) => it.name);
+
+        if (!items.length) {
+          this.logger.warn(`[${src.type}] 메타 결과가 비어 건너뜁니다(기존 유지).`);
+          continue;
+        }
+
+        await this.repo.manager.transaction(async (m) => {
+          await m.delete(SaMetaEntity, { type: src.type });
+          await m.save(items.map((it) => m.create(SaMetaEntity, it)));
+        });
+        total += items.length;
+        this.logger.log(`[${src.type}] 메타 ${items.length}건 갱신 완료`);
+      } catch (error) {
+        this.logger.warn(
+          `[${src.type}] 메타 갱신 실패(기존 유지): ${(error as Error).message}`,
+        );
+      }
+    }
+    return total;
+  }
+
+  /** 종류별 메타 조회 { grade: [...], season_grade: [...], tier: [...] } */
+  async getAll(): Promise<Record<string, MetaItemDto[]>> {
+    const rows = await this.repo.find({
+      order: { type: 'ASC', sortOrder: 'ASC' },
+    });
+    const out: Record<string, MetaItemDto[]> = {
+      grade: [],
+      season_grade: [],
+      tier: [],
+    };
+    for (const r of rows) {
+      (out[r.type] ??= []).push({ name: r.name, image: r.image });
+    }
+    return out;
+  }
+}
diff --git a/backend/src/modules/sa-user/dto/ouid-response.dto.ts b/backend/src/modules/sa-user/dto/ouid-response.dto.ts
new file mode 100644
index 0000000..83e723e
--- /dev/null
+++ b/backend/src/modules/sa-user/dto/ouid-response.dto.ts
@@ -0,0 +1,13 @@
+import { ApiProperty } from '@nestjs/swagger';
+
+// 유저 OUID 응답 DTO
+export class OuidResponseDto {
+  @ApiProperty({
+    description: '넥슨 계정 식별자(OUID)',
+    example: 'fd9de3b7a6e3d0ab2f4b39c5e594671b',
+  })
+  ouid!: string;
+
+  @ApiProperty({ description: '조회된 닉네임', example: 'master' })
+  userName!: string;
+}
diff --git a/backend/src/modules/sa-user/dto/profile-response.dto.ts b/backend/src/modules/sa-user/dto/profile-response.dto.ts
new file mode 100644
index 0000000..f217569
--- /dev/null
+++ b/backend/src/modules/sa-user/dto/profile-response.dto.ts
@@ -0,0 +1,70 @@
+import { ApiProperty } from '@nestjs/swagger';
+
+// 유저 종합 프로필 응답 DTO (basic + rank + tier + recent)
+export class ProfileResponseDto {
+  @ApiProperty({ example: '9b2852e25a85deebc5ce4173b1ccc1e6' })
+  ouid!: string;
+
+  @ApiProperty({ example: 'Hack' })
+  userName!: string;
+
+  @ApiProperty({ description: '계정 생성일(ISO)', example: '2020-02-02T23:15:59.330Z' })
+  dateCreate!: string;
+
+  @ApiProperty({ description: '칭호', example: '짝' })
+  titleName!: string;
+
+  @ApiProperty({ description: '클랜명', example: '바디' })
+  clanName!: string;
+
+  @ApiProperty({ description: '매너 등급', example: '최고' })
+  mannerGrade!: string;
+
+  @ApiProperty({ description: '통합 계급', example: '대원수' })
+  grade!: string;
+
+  @ApiProperty({ description: '통합 계급 경험치', example: 2578812318 })
+  gradeExp!: number;
+
+  @ApiProperty({ description: '통합 계급 랭킹', example: 1 })
+  gradeRanking!: number;
+
+  @ApiProperty({ description: '시즌 계급', example: '총사령관' })
+  seasonGrade!: string;
+
+  @ApiProperty({ description: '시즌 계급 경험치', example: 317755457 })
+  seasonGradeExp!: number;
+
+  @ApiProperty({ description: '시즌 계급 랭킹', example: 10 })
+  seasonGradeRanking!: number;
+
+  @ApiProperty({ description: '솔로 랭크 티어', example: 'LEGEND' })
+  soloTier!: string;
+
+  @ApiProperty({ description: '솔로 랭크 점수', example: 4094 })
+  soloScore!: number;
+
+  @ApiProperty({ description: '파티 랭크 티어', example: 'GRAND MASTER II' })
+  partyTier!: string;
+
+  @ApiProperty({ description: '파티 랭크 점수', example: 3203 })
+  partyScore!: number;
+
+  @ApiProperty({ description: '최근 승률(%)', example: 46.67 })
+  recentWinRate!: number;
+
+  @ApiProperty({ description: '최근 킬데스(%)', example: 55.83 })
+  recentKdRate!: number;
+
+  @ApiProperty({ description: '최근 돌격(%)', example: 58.67 })
+  recentAssaultRate!: number;
+
+  @ApiProperty({ description: '최근 저격(%)', example: 47.22 })
+  recentSniperRate!: number;
+
+  @ApiProperty({ description: '최근 특수전(%)', example: 56.0 })
+  recentSpecialRate!: number;
+
+  @ApiProperty({ description: '마지막 동기화 시각' })
+  lastSyncedAt!: Date;
+}
diff --git a/backend/src/modules/sa-user/dto/search-user.dto.ts b/backend/src/modules/sa-user/dto/search-user.dto.ts
new file mode 100644
index 0000000..a61712e
--- /dev/null
+++ b/backend/src/modules/sa-user/dto/search-user.dto.ts
@@ -0,0 +1,11 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { IsNotEmpty, IsString, MaxLength } from 'class-validator';
+
+// 유저 검색 요청 DTO (쿼리 파라미터)
+export class SearchUserDto {
+  @ApiProperty({ description: '검색할 유저 닉네임', example: 'master' })
+  @IsString()
+  @IsNotEmpty({ message: '닉네임을 입력해 주세요.' })
+  @MaxLength(50, { message: '닉네임이 너무 깁니다.' })
+  user_name!: string;
+}
diff --git a/backend/src/modules/sa-user/entities/sa-user-profile.entity.ts b/backend/src/modules/sa-user/entities/sa-user-profile.entity.ts
new file mode 100644
index 0000000..cfb8e31
--- /dev/null
+++ b/backend/src/modules/sa-user/entities/sa-user-profile.entity.ts
@@ -0,0 +1,85 @@
+import { Column, Entity, PrimaryColumn, UpdateDateColumn } from 'typeorm';
+
+// bigint(계급 경험치) ↔ number 변환기 (Postgres bigint 는 기본 string 반환)
+// 스냅샷 엔티티에서도 재사용한다.
+export const bigintToNumber = {
+  to: (value: number): number => value,
+  from: (value: string | null): number => (value == null ? 0 : Number(value)),
+};
+
+// 서든어택 유저 종합 프로필 (basic + rank + tier + recent 통합 최신 스냅샷)
+// ouid 기준 1행. 매일 크론으로 갱신(upsert)된다. 시계열 이력은 sa_user_snapshots 참조.
+@Entity('sa_user_profiles')
+export class SaUserProfileEntity {
+  @PrimaryColumn({ type: 'varchar', length: 64 })
+  ouid!: string;
+
+  // ── basic ──
+  @Column({ type: 'varchar', length: 50, default: '' })
+  userName!: string;
+
+  // 계정 생성일 (ISO 문자열 원본 보존)
+  @Column({ type: 'varchar', length: 40, default: '' })
+  dateCreate!: string;
+
+  @Column({ type: 'varchar', length: 50, default: '' })
+  titleName!: string;
+
+  @Column({ type: 'varchar', length: 50, default: '' })
+  clanName!: string;
+
+  @Column({ type: 'varchar', length: 20, default: '' })
+  mannerGrade!: string;
+
+  // ── rank (계급) ──
+  @Column({ type: 'varchar', length: 30, default: '' })
+  grade!: string;
+
+  @Column({ type: 'bigint', default: 0, transformer: bigintToNumber })
+  gradeExp!: number;
+
+  @Column({ type: 'int', default: 0 })
+  gradeRanking!: number;
+
+  @Column({ type: 'varchar', length: 30, default: '' })
+  seasonGrade!: string;
+
+  @Column({ type: 'bigint', default: 0, transformer: bigintToNumber })
+  seasonGradeExp!: number;
+
+  @Column({ type: 'int', default: 0 })
+  seasonGradeRanking!: number;
+
+  // ── tier (랭크전) ──
+  @Column({ type: 'varchar', length: 30, default: '' })
+  soloTier!: string;
+
+  @Column({ type: 'int', default: 0 })
+  soloScore!: number;
+
+  @Column({ type: 'varchar', length: 30, default: '' })
+  partyTier!: string;
+
+  @Column({ type: 'int', default: 0 })
+  partyScore!: number;
+
+  // ── recent (최근 동향, %) ──
+  @Column({ type: 'float', default: 0 })
+  recentWinRate!: number;
+
+  @Column({ type: 'float', default: 0 })
+  recentKdRate!: number;
+
+  @Column({ type: 'float', default: 0 })
+  recentAssaultRate!: number;
+
+  @Column({ type: 'float', default: 0 })
+  recentSniperRate!: number;
+
+  @Column({ type: 'float', default: 0 })
+  recentSpecialRate!: number;
+
+  // 마지막 동기화 시각
+  @UpdateDateColumn()
+  lastSyncedAt!: Date;
+}
diff --git a/backend/src/modules/sa-user/entities/sa-user-snapshot.entity.ts b/backend/src/modules/sa-user/entities/sa-user-snapshot.entity.ts
new file mode 100644
index 0000000..069bb19
--- /dev/null
+++ b/backend/src/modules/sa-user/entities/sa-user-snapshot.entity.ts
@@ -0,0 +1,90 @@
+import {
+  Column,
+  CreateDateColumn,
+  Entity,
+  Index,
+  PrimaryGeneratedColumn,
+} from 'typeorm';
+
+import { bigintToNumber } from './sa-user-profile.entity';
+
+// 유저 일별 스냅샷 (시계열 이력) — 타임라인으로 추적·컨텐츠화 가능한 모든 가변 데이터를 기록.
+// 유저가 직접 조회하지 않아도 크론이 매일 기록하므로 닉네임/클랜 변경, 티어/계급 변동,
+// 시즌 종료 시점의 마지막 값 등이 모두 보존된다. (불변값 dateCreate/ouid 는 프로필에만 보관)
+@Entity('sa_user_snapshots')
+@Index(['ouid', 'snapshotDate'], { unique: true })
+export class SaUserSnapshotEntity {
+  @PrimaryGeneratedColumn()
+  id!: number;
+
+  @Column({ type: 'varchar', length: 64 })
+  ouid!: string;
+
+  // 스냅샷 일자 (YYYY-MM-DD) — ouid 당 하루 1행
+  @Column({ type: 'date' })
+  snapshotDate!: string;
+
+  // ── basic (가변) — 닉네임/클랜 변경 타임라인 ──
+  @Column({ type: 'varchar', length: 50, default: '' })
+  userName!: string;
+
+  @Column({ type: 'varchar', length: 50, default: '' })
+  titleName!: string;
+
+  @Column({ type: 'varchar', length: 50, default: '' })
+  clanName!: string;
+
+  @Column({ type: 'varchar', length: 20, default: '' })
+  mannerGrade!: string;
+
+  // ── rank (계급) ──
+  @Column({ type: 'varchar', length: 30, default: '' })
+  grade!: string;
+
+  @Column({ type: 'bigint', default: 0, transformer: bigintToNumber })
+  gradeExp!: number;
+
+  @Column({ type: 'int', default: 0 })
+  gradeRanking!: number;
+
+  @Column({ type: 'varchar', length: 30, default: '' })
+  seasonGrade!: string;
+
+  @Column({ type: 'bigint', default: 0, transformer: bigintToNumber })
+  seasonGradeExp!: number;
+
+  @Column({ type: 'int', default: 0 })
+  seasonGradeRanking!: number;
+
+  // ── tier (랭크전) ──
+  @Column({ type: 'varchar', length: 30, default: '' })
+  soloTier!: string;
+
+  @Column({ type: 'int', default: 0 })
+  soloScore!: number;
+
+  @Column({ type: 'varchar', length: 30, default: '' })
+  partyTier!: string;
+
+  @Column({ type: 'int', default: 0 })
+  partyScore!: number;
+
+  // ── recent (최근 동향, %) ──
+  @Column({ type: 'float', default: 0 })
+  recentWinRate!: number;
+
+  @Column({ type: 'float', default: 0 })
+  recentKdRate!: number;
+
+  @Column({ type: 'float', default: 0 })
+  recentAssaultRate!: number;
+
+  @Column({ type: 'float', default: 0 })
+  recentSniperRate!: number;
+
+  @Column({ type: 'float', default: 0 })
+  recentSpecialRate!: number;
+
+  @CreateDateColumn()
+  createdAt!: Date;
+}
diff --git a/backend/src/modules/sa-user/entities/sa-user.entity.ts b/backend/src/modules/sa-user/entities/sa-user.entity.ts
new file mode 100644
index 0000000..d7b6c69
--- /dev/null
+++ b/backend/src/modules/sa-user/entities/sa-user.entity.ts
@@ -0,0 +1,33 @@
+import {
+  Column,
+  CreateDateColumn,
+  Entity,
+  Index,
+  PrimaryGeneratedColumn,
+  UpdateDateColumn,
+} from 'typeorm';
+
+// 추적 대상 서든어택 유저 (ouid 기준 1행 = 1계정).
+// 닉네임은 가변이므로 ouid 를 유일 키로 두고, userName 은 "현재 닉네임"으로 크론이 갱신한다.
+// 닉네임 변경/양도가 일어나도 행이 중복되지 않으며, 변경 타임라인은 sa_user_snapshots 로 추적한다.
+@Entity('sa_users')
+export class SaUserEntity {
+  @PrimaryGeneratedColumn()
+  id!: number;
+
+  // 넥슨 계정 식별자 (불변, 유일)
+  @Index({ unique: true })
+  @Column({ type: 'varchar', length: 64 })
+  ouid!: string;
+
+  // 현재 닉네임 (가변 — 검색 캐시 및 표시용. 크론이 최신값으로 갱신)
+  @Index()
+  @Column({ type: 'varchar', length: 50 })
+  userName!: string;
+
+  @CreateDateColumn()
+  createdAt!: Date;
+
+  @UpdateDateColumn()
+  updatedAt!: Date;
+}
diff --git a/backend/src/modules/sa-user/sa-user.controller.ts b/backend/src/modules/sa-user/sa-user.controller.ts
new file mode 100644
index 0000000..99aafe4
--- /dev/null
+++ b/backend/src/modules/sa-user/sa-user.controller.ts
@@ -0,0 +1,36 @@
+import { Controller, Get, Param, Query } from '@nestjs/common';
+import { ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger';
+
+import { SaUserService } from './sa-user.service';
+import { SearchUserDto } from './dto/search-user.dto';
+import { OuidResponseDto } from './dto/ouid-response.dto';
+import { ProfileResponseDto } from './dto/profile-response.dto';
+
+@ApiTags('SA User')
+@Controller('sa-users')
+export class SaUserController {
+  constructor(private readonly saUserService: SaUserService) {}
+
+  @Get('search')
+  @ApiOperation({
+    summary: '닉네임으로 유저 OUID 검색',
+    description:
+      '닉네임으로 넥슨 오픈 API에서 OUID를 조회합니다. 결과는 DB에 저장되며, 신규 유저는 프로필도 즉시 동기화됩니다. 이후 매일 크론으로 자동 갱신됩니다.',
+  })
+  @ApiResponse({ status: 200, description: '조회된 OUID', type: OuidResponseDto })
+  @ApiResponse({ status: 404, description: '해당 닉네임의 유저를 찾을 수 없음' })
+  search(@Query() dto: SearchUserDto): Promise<OuidResponseDto> {
+    return this.saUserService.searchOuid(dto.user_name);
+  }
+
+  @Get(':ouid/profile')
+  @ApiOperation({
+    summary: '유저 종합 프로필 조회',
+    description:
+      'OUID로 종합 프로필(기본/계급/티어/최근동향)을 반환합니다. DB에 없으면 1회 동기화 후 반환합니다.',
+  })
+  @ApiResponse({ status: 200, description: '유저 프로필', type: ProfileResponseDto })
+  getProfile(@Param('ouid') ouid: string): Promise<ProfileResponseDto> {
+    return this.saUserService.getProfile(ouid);
+  }
+}
diff --git a/backend/src/modules/sa-user/sa-user.module.ts b/backend/src/modules/sa-user/sa-user.module.ts
new file mode 100644
index 0000000..a87316f
--- /dev/null
+++ b/backend/src/modules/sa-user/sa-user.module.ts
@@ -0,0 +1,24 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+
+import { SaUserController } from './sa-user.controller';
+import { SaUserService } from './sa-user.service';
+import { SaUserEntity } from './entities/sa-user.entity';
+import { SaUserProfileEntity } from './entities/sa-user-profile.entity';
+import { SaUserSnapshotEntity } from './entities/sa-user-snapshot.entity';
+
+// 서든어택 유저 모듈 — OUID 검색 + 종합 프로필 동기화(매일 크론) + 일별 이력
+// 넥슨 호출은 전역 NexonModule(NexonService)을 주입해 사용한다.
+@Module({
+  imports: [
+    TypeOrmModule.forFeature([
+      SaUserEntity,
+      SaUserProfileEntity,
+      SaUserSnapshotEntity,
+    ]),
+  ],
+  controllers: [SaUserController],
+  providers: [SaUserService],
+  exports: [SaUserService],
+})
+export class SaUserModule {}
diff --git a/backend/src/modules/sa-user/sa-user.service.ts b/backend/src/modules/sa-user/sa-user.service.ts
new file mode 100644
index 0000000..a4d8d65
--- /dev/null
+++ b/backend/src/modules/sa-user/sa-user.service.ts
@@ -0,0 +1,249 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { Cron } from '@nestjs/schedule';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+
+import { NexonService } from '../../shared/nexon/nexon.service';
+import { OuidResponseDto } from './dto/ouid-response.dto';
+import { ProfileResponseDto } from './dto/profile-response.dto';
+import { SaUserEntity } from './entities/sa-user.entity';
+import { SaUserProfileEntity } from './entities/sa-user-profile.entity';
+import { SaUserSnapshotEntity } from './entities/sa-user-snapshot.entity';
+
+// 넥슨 API 응답 타입
+interface IdRes {
+  ouid: string;
+}
+interface BasicRes {
+  user_name: string;
+  user_date_create: string;
+  title_name: string;
+  clan_name: string;
+  manner_grade: string;
+}
+interface RankRes {
+  user_name: string;
+  grade: string;
+  grade_exp: number;
+  grade_ranking: number;
+  season_grade: string;
+  season_grade_exp: number;
+  season_grade_ranking: number;
+}
+interface TierRes {
+  user_name: string;
+  solo_rank_match_tier: string;
+  solo_rank_match_score: number;
+  party_rank_match_tier: string;
+  party_rank_match_score: number;
+}
+interface RecentRes {
+  user_name: string;
+  recent_win_rate: number;
+  recent_kill_death_rate: number;
+  recent_assault_rate: number;
+  recent_sniper_rate: number;
+  recent_special_rate: number;
+}
+
+const sleep = (ms: number): Promise<void> =>
+  new Promise((resolve) => setTimeout(resolve, ms));
+
+// ────────────────────────────────────────────────────────────
+// 서든어택 유저 — 닉네임→OUID 검색 + 종합 프로필(basic/rank/tier/recent) 동기화.
+// 등록된 유저는 매일 크론으로 자동 갱신되며, 일별 스냅샷으로 시계열 이력을 보존한다.
+// (유저가 직접 조회하지 않아도 데이터가 누적되어 시즌 종료 시점 등 연속성이 유지됨)
+// ────────────────────────────────────────────────────────────
+@Injectable()
+export class SaUserService {
+  private readonly logger = new Logger(SaUserService.name);
+
+  constructor(
+    @InjectRepository(SaUserEntity)
+    private readonly userRepo: Repository<SaUserEntity>,
+    @InjectRepository(SaUserProfileEntity)
+    private readonly profileRepo: Repository<SaUserProfileEntity>,
+    @InjectRepository(SaUserSnapshotEntity)
+    private readonly snapshotRepo: Repository<SaUserSnapshotEntity>,
+    private readonly nexon: NexonService,
+  ) {}
+
+  /**
+   * 닉네임으로 OUID 조회. ouid 기준으로 정규화하므로 닉네임 변경/양도가 일어나도
+   * 행이 중복되지 않는다. 신규 유저는 프로필도 즉시 동기화한다.
+   */
+  async searchOuid(rawName: string): Promise<OuidResponseDto> {
+    const userName = rawName.trim();
+
+    // 1. 현재 닉네임으로 캐시 확인
+    const byName = await this.userRepo.findOne({ where: { userName } });
+    if (byName) {
+      return { ouid: byName.ouid, userName: byName.userName };
+    }
+
+    // 2. 넥슨 API로 ouid 조회
+    const { ouid } = await this.nexon.get<IdRes>('/suddenattack/v1/id', {
+      user_name: userName,
+    });
+
+    // 3. ouid 기준 정규화 — 닉네임을 바꾼 기존 유저면 행을 재사용(현재 닉네임만 갱신)
+    const byOuid = await this.userRepo.findOne({ where: { ouid } });
+    if (byOuid) {
+      if (byOuid.userName !== userName) {
+        byOuid.userName = userName;
+        await this.userRepo.save(byOuid);
+      }
+      return { ouid, userName };
+    }
+
+    // 4. 신규 유저 등록 + 프로필 즉시 1회 동기화 (이후는 크론이 자동 갱신)
+    try {
+      await this.userRepo.save(this.userRepo.create({ ouid, userName }));
+    } catch {
+      // 동시 요청으로 인한 ouid unique 충돌은 무시 (이미 등록됨)
+    }
+    try {
+      await this.syncProfile(ouid);
+    } catch (error) {
+      this.logger.warn(
+        `신규 유저 프로필 동기화 실패(ouid=${ouid}): ${(error as Error).message}`,
+      );
+    }
+
+    return { ouid, userName };
+  }
+
+  /** 종합 프로필 조회 (DB 우선, 없으면 1회 동기화). */
+  async getProfile(ouid: string): Promise<ProfileResponseDto> {
+    const profile =
+      (await this.profileRepo.findOne({ where: { ouid } })) ??
+      (await this.syncProfile(ouid));
+    return this.toDto(profile);
+  }
+
+  /** basic/rank/tier/recent 4종을 병렬 조회 → 최신 프로필 upsert + 일별 스냅샷 기록 */
+  async syncProfile(ouid: string): Promise<SaUserProfileEntity> {
+    const [basic, rank, tier, recent] = await Promise.all([
+      this.nexon.get<BasicRes>('/suddenattack/v1/user/basic', { ouid }),
+      this.nexon.get<RankRes>('/suddenattack/v1/user/rank', { ouid }),
+      this.nexon.get<TierRes>('/suddenattack/v1/user/tier', { ouid }),
+      this.nexon.get<RecentRes>('/suddenattack/v1/user/recent-info', { ouid }),
+    ]);
+
+    const profile: SaUserProfileEntity = {
+      ouid,
+      userName: basic.user_name,
+      dateCreate: basic.user_date_create,
+      titleName: basic.title_name ?? '',
+      clanName: basic.clan_name ?? '',
+      mannerGrade: basic.manner_grade ?? '',
+      grade: rank.grade ?? '',
+      gradeExp: rank.grade_exp ?? 0,
+      gradeRanking: rank.grade_ranking ?? 0,
+      seasonGrade: rank.season_grade ?? '',
+      seasonGradeExp: rank.season_grade_exp ?? 0,
+      seasonGradeRanking: rank.season_grade_ranking ?? 0,
+      soloTier: tier.solo_rank_match_tier ?? '',
+      soloScore: tier.solo_rank_match_score ?? 0,
+      partyTier: tier.party_rank_match_tier ?? '',
+      partyScore: tier.party_rank_match_score ?? 0,
+      recentWinRate: recent.recent_win_rate ?? 0,
+      recentKdRate: recent.recent_kill_death_rate ?? 0,
+      recentAssaultRate: recent.recent_assault_rate ?? 0,
+      recentSniperRate: recent.recent_sniper_rate ?? 0,
+      recentSpecialRate: recent.recent_special_rate ?? 0,
+      lastSyncedAt: new Date(),
+    };
+
+    // 최신 프로필 upsert (ouid PK)
+    await this.profileRepo.upsert(profile, ['ouid']);
+
+    // 일별 스냅샷 upsert (ouid + 오늘 날짜) — 타임라인 추적용 전체 가변 필드 기록
+    const snapshotDate = this.todayKst();
+    await this.snapshotRepo.upsert(
+      {
+        ouid,
+        snapshotDate,
+        userName: profile.userName,
+        titleName: profile.titleName,
+        clanName: profile.clanName,
+        mannerGrade: profile.mannerGrade,
+        grade: profile.grade,
+        gradeExp: profile.gradeExp,
+        gradeRanking: profile.gradeRanking,
+        seasonGrade: profile.seasonGrade,
+        seasonGradeExp: profile.seasonGradeExp,
+        seasonGradeRanking: profile.seasonGradeRanking,
+        soloTier: profile.soloTier,
+        soloScore: profile.soloScore,
+        partyTier: profile.partyTier,
+        partyScore: profile.partyScore,
+        recentWinRate: profile.recentWinRate,
+        recentKdRate: profile.recentKdRate,
+        recentAssaultRate: profile.recentAssaultRate,
+        recentSniperRate: profile.recentSniperRate,
+        recentSpecialRate: profile.recentSpecialRate,
+      },
+      ['ouid', 'snapshotDate'],
+    );
+
+    return profile;
+  }
+
+  // 매일 03:00 (KST) — 등록된 모든 유저의 프로필을 자동 갱신 (조회 의존 없이 이력 누적)
+  @Cron('0 3 * * *', {
+    name: 'daily-user-profile-sync',
+    timeZone: 'Asia/Seoul',
+  })
+  async handleDailySync(): Promise<void> {
+    const users = await this.userRepo.find();
+    this.logger.log(`일일 유저 프로필 동기화 시작 (대상 ${users.length}명)`);
+    let ok = 0;
+    for (const user of users) {
+      try {
+        await this.syncProfile(user.ouid);
+        ok++;
+      } catch (error) {
+        this.logger.warn(
+          `[${user.userName}] 프로필 동기화 실패: ${(error as Error).message}`,
+        );
+      }
+      // 넥슨 API rate limit 완화를 위한 호출 간 간격
+      await sleep(120);
+    }
+    this.logger.log(`일일 유저 프로필 동기화 완료 (${ok}/${users.length})`);
+  }
+
+  /** KST 기준 오늘 날짜 (YYYY-MM-DD) */
+  private todayKst(): string {
+    const kst = new Date(Date.now() + 9 * 60 * 60 * 1000);
+    return kst.toISOString().slice(0, 10);
+  }
+
+  private toDto(p: SaUserProfileEntity): ProfileResponseDto {
+    return {
+      ouid: p.ouid,
+      userName: p.userName,
+      dateCreate: p.dateCreate,
+      titleName: p.titleName,
+      clanName: p.clanName,
+      mannerGrade: p.mannerGrade,
+      grade: p.grade,
+      gradeExp: p.gradeExp,
+      gradeRanking: p.gradeRanking,
+      seasonGrade: p.seasonGrade,
+      seasonGradeExp: p.seasonGradeExp,
+      seasonGradeRanking: p.seasonGradeRanking,
+      soloTier: p.soloTier,
+      soloScore: p.soloScore,
+      partyTier: p.partyTier,
+      partyScore: p.partyScore,
+      recentWinRate: p.recentWinRate,
+      recentKdRate: p.recentKdRate,
+      recentAssaultRate: p.recentAssaultRate,
+      recentSniperRate: p.recentSniperRate,
+      recentSpecialRate: p.recentSpecialRate,
+      lastSyncedAt: p.lastSyncedAt,
+    };
+  }
+}
diff --git a/backend/src/shared/nexon/nexon.module.ts b/backend/src/shared/nexon/nexon.module.ts
new file mode 100644
index 0000000..3512d45
--- /dev/null
+++ b/backend/src/shared/nexon/nexon.module.ts
@@ -0,0 +1,13 @@
+import { Global, Module } from '@nestjs/common';
+import { HttpModule } from '@nestjs/axios';
+
+import { NexonService } from './nexon.service';
+
+// 넥슨 오픈 API 공통 클라이언트 모듈 (전역) — 모든 SA 데이터 모듈에서 주입 사용
+@Global()
+@Module({
+  imports: [HttpModule],
+  providers: [NexonService],
+  exports: [NexonService],
+})
+export class NexonModule {}
diff --git a/backend/src/shared/nexon/nexon.service.ts b/backend/src/shared/nexon/nexon.service.ts
new file mode 100644
index 0000000..5077d69
--- /dev/null
+++ b/backend/src/shared/nexon/nexon.service.ts
@@ -0,0 +1,115 @@
+import {
+  HttpException,
+  Injectable,
+  Logger,
+  NotFoundException,
+  ServiceUnavailableException,
+} from '@nestjs/common';
+import { HttpService } from '@nestjs/axios';
+import { ConfigService } from '@nestjs/config';
+import { firstValueFrom } from 'rxjs';
+import axios from 'axios';
+
+// ────────────────────────────────────────────────────────────
+// 넥슨 오픈 API 공통 클라이언트
+// - 모든 SA 데이터 모듈(sa-user / sa-meta / sa-match)이 재사용
+// - x-nxopen-api-key 인증 헤더 자동 부착, 표준 에러 변환
+// ────────────────────────────────────────────────────────────
+@Injectable()
+export class NexonService {
+  private readonly logger = new Logger(NexonService.name);
+
+  // rate limiter (1초 슬라이딩 윈도우) — env NEXON_API_RATE_LIMIT_PER_SEC (개발 5/s, 운영 500/s)
+  // 모든 넥슨 호출이 get() 을 거치므로 전역으로 초당 호출 수가 제한된다.
+  private readonly maxPerSecond: number;
+  // 최근 1초 이내 호출 시각들
+  private readonly callTimestamps: number[] = [];
+
+  constructor(
+    private readonly http: HttpService,
+    private readonly config: ConfigService,
+  ) {
+    const rps = Number(this.config.get<string>('NEXON_API_RATE_LIMIT_PER_SEC'));
+    this.maxPerSecond = Number.isFinite(rps) && rps > 0 ? rps : 5;
+  }
+
+  private get baseUrl(): string {
+    const url = this.config.get<string>('NEXON_API_URL');
+    if (!url) {
+      this.logger.error('NEXON_API_URL 설정이 누락되었습니다.');
+      throw new ServiceUnavailableException(
+        '요청하신 작업을 완료하지 못했습니다.',
+      );
+    }
+    return url.replace(/\/$/, '');
+  }
+
+  private get apiKey(): string {
+    const key = this.config.get<string>('NEXON_API_KEY');
+    if (!key) {
+      this.logger.error('NEXON_API_KEY 설정이 누락되었습니다.');
+      throw new ServiceUnavailableException(
+        '요청하신 작업을 완료하지 못했습니다.',
+      );
+    }
+    return key;
+  }
+
+  /**
+   * 호출 허가를 받을 때까지 대기 (1초 슬라이딩 윈도우, 초당 maxPerSecond 제한).
+   * 타임스탬프 정리·검사·추가 구간에는 await 가 없어 동시 호출이 몰려도 한도를 넘지 않는다.
+   */
+  private async acquire(): Promise<void> {
+    for (;;) {
+      const now = Date.now();
+      // 1초가 지난 호출 기록 제거
+      while (
+        this.callTimestamps.length > 0 &&
+        this.callTimestamps[0] <= now - 1000
+      ) {
+        this.callTimestamps.shift();
+      }
+      if (this.callTimestamps.length < this.maxPerSecond) {
+        this.callTimestamps.push(now);
+        return;
+      }
+      // 가장 오래된 호출이 1초 경과할 때까지 대기
+      const waitMs = this.callTimestamps[0] + 1000 - now;
+      await new Promise((resolve) => setTimeout(resolve, Math.max(5, waitMs)));
+    }
+  }
+
+  /**
+   * 넥슨 오픈 API GET 호출. (호출 전 rate limiter 통과)
+   * @param path  '/suddenattack/v1/...' 또는 '/static/suddenattack/meta/...'
+   * @param params 쿼리 파라미터
+   * 닉네임/식별자 미존재(400·404)는 NotFoundException, 그 외 장애는 ServiceUnavailableException 으로 변환한다.
+   */
+  async get<T>(path: string, params?: Record<string, unknown>): Promise<T> {
+    await this.acquire();
+    try {
+      const { data } = await firstValueFrom(
+        this.http.get<T>(`${this.baseUrl}${path}`, {
+          params,
+          headers: { 'x-nxopen-api-key': this.apiKey },
+          timeout: 10_000,
+        }),
+      );
+      return data;
+    } catch (error) {
+      if (error instanceof HttpException) throw error;
+      if (axios.isAxiosError(error)) {
+        const status = error.response?.status;
+        this.logger.warn(
+          `넥슨 API 오류(path=${path}, status=${status}): ${JSON.stringify(error.response?.data)}`,
+        );
+        if (status === 400 || status === 404) {
+          throw new NotFoundException('요청하신 정보를 찾을 수 없습니다.');
+        }
+      }
+      throw new ServiceUnavailableException(
+        '요청하신 작업을 완료하지 못했습니다.',
+      );
+    }
+  }
+}
diff --git a/backend/src/shared/utils/curl-fetch.ts b/backend/src/shared/utils/curl-fetch.ts
index a9d613d..c18e5e7 100644
--- a/backend/src/shared/utils/curl-fetch.ts
+++ b/backend/src/shared/utils/curl-fetch.ts
@@ -14,6 +14,8 @@ const DEFAULT_UA =
 export interface CurlFetchOptions {
   /** Referer 헤더 (안티봇 우회에 필요한 경우) */
   referer?: string;
+  /** 추가 요청 헤더 (예: AJAX 엔드포인트용 'X-Requested-With') */
+  headers?: Record<string, string>;
   /** 타임아웃(초) — 기본 12초 */
   timeoutSec?: number;
   /** 최대 응답 버퍼(MB) — 기본 10MB */
@@ -25,7 +27,7 @@ export function curlFetchHtml(
   url: string,
   opts: CurlFetchOptions = {},
 ): Promise<string> {
-  const { referer, timeoutSec = 12, maxBufferMb = 10 } = opts;
+  const { referer, headers, timeoutSec = 12, maxBufferMb = 10 } = opts;
 
   // 넥슨 WAF 우회 핵심: 반드시 HTTP/2(--http2)로 요청하고, 브라우저(Chrome) 헤더를
   // 함께 보낸다. 단 `--compressed`(Accept-Encoding: gzip,deflate,br,zstd)는 차단을
@@ -61,6 +63,11 @@ export function curlFetchHtml(
   if (referer) {
     args.push('-H', `Referer: ${referer}`);
   }
+  if (headers) {
+    for (const [key, value] of Object.entries(headers)) {
+      args.push('-H', `${key}: ${value}`);
+    }
+  }
   args.push(url);
 
   return new Promise<string>((resolve, reject) => {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b1e6106..f066a2f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -119,7 +119,6 @@
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -645,7 +644,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       },
@@ -694,7 +692,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       }
@@ -706,7 +703,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@emnapi/wasi-threads": "1.2.1",
         "tslib": "^2.4.0"
@@ -719,7 +715,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -1280,6 +1275,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1297,6 +1295,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1314,6 +1315,9 @@
         "ppc64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1331,6 +1335,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1348,6 +1355,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1365,6 +1375,9 @@
         "s390x"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1382,6 +1395,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1399,6 +1415,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1587,6 +1606,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1604,6 +1626,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1621,6 +1646,9 @@
         "ppc64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1638,6 +1666,9 @@
         "s390x"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1655,6 +1686,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1672,6 +1706,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1897,7 +1934,6 @@
       "integrity": "sha512-5B7PfA2e1NQGCnDHd/0lW7W3gvp3d59Ryw54FYO8Uswxo9f6ikw3AZV+Xj/TvpImmpsiYyUqAfhC6kJID1jF6w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.61.0",
         "@typescript-eslint/types": "8.61.0",
@@ -2370,7 +2406,6 @@
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.38.tgz",
       "integrity": "sha512-JTqp25l8aFfJYF7/KmsXZjAxJz7T+SjmTJLoXVjHtc2BrSgSiW2n9Aem/cWq1OPe68A8JL06B3eVdhlP0H4TVw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-core": "3.5.38",
         "@vue/shared": "3.5.38"
@@ -2568,7 +2603,6 @@
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.38.tgz",
       "integrity": "sha512-vue8vbf2QlV4quHqzwmJy6dWfmRhP1J8l4wtZg60CL6VoKqcPY2oe7may3+1d9qfpedjK5PRLFqd5k3Isj9mUw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-ssr": "3.5.38",
         "@vue/shared": "3.5.38"
@@ -2639,7 +2673,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2862,7 +2895,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -2917,9 +2949,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001797",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001797.tgz",
-      "integrity": "sha512-l8xKG+gwAIExZGl9FrF7KUwuOmk6wbEPC9Xoy/RtnWv1XG0Q4LFlagaLpUv3Kiza3W/wm27zy0yWJEieYKAP6w==",
+      "version": "1.0.30001799",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
+      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==",
       "dev": true,
       "funding": [
         {
@@ -3404,7 +3436,6 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3465,7 +3496,6 @@
       "integrity": "sha512-174lJKuNsuDIlLpjeXc5E2Tss8P44uIimAfGD0b90k0NoirJqpG7stLuU9Vp/9ioTOrQdWVREc4mRd1BD+CvGw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "globals": "^13.24.0",
@@ -4706,6 +4736,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -4727,6 +4760,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -4748,6 +4784,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -4769,6 +4808,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -6013,7 +6055,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6163,7 +6204,6 @@
       "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6297,7 +6337,6 @@
       "integrity": "sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -6699,7 +6738,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.38.tgz",
       "integrity": "sha512-vAMKHfImQlYSy0C+PBue4s3ERZ2xGKfgZg5GXAsLInq1dyh2H78ILVP5sK0KPFPVW4kv+OGCIvBEondcjpZp7A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.38",
         "@vue/compiler-sfc": "3.5.38",
diff --git a/frontend/src/composables/useBreakpoint.ts b/frontend/src/composables/useBreakpoint.ts
new file mode 100644
index 0000000..4d09184
--- /dev/null
+++ b/frontend/src/composables/useBreakpoint.ts
@@ -0,0 +1,20 @@
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+// 반응형 뷰포트 훅 — 원본 sa-shared.jsx useBP() 포팅.
+// CSS 미디어쿼리로 처리하기 어려운 JS 레벨 분기(엘리먼트 크기/prop 등)에 사용한다.
+// breakpoint 체계: mobile < 760px, narrow < 600px (CSS @media 와 동일 기준)
+export function useBreakpoint() {
+  const w = ref<number>(typeof window !== 'undefined' ? window.innerWidth : 1200)
+
+  function onResize() {
+    w.value = window.innerWidth
+  }
+
+  onMounted(() => window.addEventListener('resize', onResize))
+  onUnmounted(() => window.removeEventListener('resize', onResize))
+
+  const mobile = computed(() => w.value < 760)
+  const narrow = computed(() => w.value < 600)
+
+  return { w, mobile, narrow }
+}
diff --git a/frontend/src/composables/useNews.ts b/frontend/src/composables/useNews.ts
new file mode 100644
index 0000000..43a14c2
--- /dev/null
+++ b/frontend/src/composables/useNews.ts
@@ -0,0 +1,34 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+
+// SA 소식 항목 (백엔드 /api/news/sections 크롤링 결과)
+export interface NewsItem {
+  date: string
+  title: string
+  link: string
+}
+
+// 카테고리(공지사항/GM이야기/업데이트)별 소식 맵
+export type NewsSections = Record<string, NewsItem[]>
+
+export function useNews() {
+  const api = useApi()
+  const loading = ref<boolean>(false)
+  const error = ref<string | null>(null)
+
+  async function getSections(): Promise<NewsSections> {
+    loading.value = true
+    error.value = null
+    try {
+      // 인터셉터에서 success/data 언래핑 후 객체만 반환
+      return (await api.get<NewsSections>('/news/sections')) as unknown as NewsSections
+    } catch (e) {
+      error.value = (e as Error)?.message ?? 'unknown error'
+      return {}
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { loading, error, getSections }
+}
diff --git a/frontend/src/composables/useRanking.ts b/frontend/src/composables/useRanking.ts
new file mode 100644
index 0000000..5ebb24c
--- /dev/null
+++ b/frontend/src/composables/useRanking.ts
@@ -0,0 +1,44 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+
+// SA 랭킹 항목 (백엔드 /api/ranking/sections 크롤링 결과)
+// 카테고리별로 사용하는 필드만 채워진다.
+export interface RankingItem {
+  rankNo: number
+  name: string
+  gradeImg: string
+  tierImg: string
+  clanMark: string
+  winRate: string
+  kd: string
+  record: string
+  rp: string
+  playTime: string
+  score: string
+  master: string
+}
+
+// 카테고리 키: total_class | season_class | ranked_solo | ranked_party | ranked_clan | official_clan | clan
+export type RankingSections = Record<string, RankingItem[]>
+
+export function useRanking() {
+  const api = useApi()
+  const loading = ref<boolean>(false)
+  const error = ref<string | null>(null)
+
+  async function getSections(): Promise<RankingSections> {
+    loading.value = true
+    error.value = null
+    try {
+      // 인터셉터에서 success/data 언래핑 후 객체만 반환
+      return (await api.get<RankingSections>('/ranking/sections')) as unknown as RankingSections
+    } catch (e) {
+      error.value = (e as Error)?.message ?? 'unknown error'
+      return {}
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { loading, error, getSections }
+}
diff --git a/frontend/src/composables/useSaMatch.ts b/frontend/src/composables/useSaMatch.ts
new file mode 100644
index 0000000..7c9447c
--- /dev/null
+++ b/frontend/src/composables/useSaMatch.ts
@@ -0,0 +1,76 @@
+import { useApi } from './useApi'
+
+// 매치 목록 항목 (백엔드 MatchItemDto)
+export interface SaMatchItem {
+  matchId: string
+  matchType: string
+  matchMode: string
+  dateMatch: string
+  matchResult: string
+  kill: number
+  death: number
+  assist: number
+}
+
+// 매치 상세 참가자
+export interface SaParticipant {
+  teamId: string
+  matchResult: string
+  userName: string
+  seasonGrade: string
+  clanName: string
+  kill: number
+  death: number
+  headshot: number
+  damage: number
+  assist: number
+}
+
+// 매치 상세 (맵 + 참가자)
+export interface SaMatchDetail {
+  matchId: string
+  matchType: string
+  matchMode: string
+  dateMatch: string
+  matchMap: string
+  participants: SaParticipant[]
+}
+
+// 매치 타입 (넥슨 match_type 과 동일 문자열)
+export const MATCH_TYPES = [
+  '랭크전 솔로',
+  '랭크전 파티',
+  '퀵매치 클랜전',
+  '클랜 랭크전',
+  '토너먼트',
+] as const
+
+export function useSaMatch() {
+  const api = useApi()
+
+  // 매치 목록 (타입별). 실패 시 빈 배열
+  async function getMatches(
+    ouid: string,
+    matchType: string,
+    matchMode = '폭파미션',
+  ): Promise<SaMatchItem[]> {
+    try {
+      return (await api.get('/sa-matches', {
+        params: { ouid, match_type: matchType, match_mode: matchMode },
+      })) as unknown as SaMatchItem[]
+    } catch {
+      return []
+    }
+  }
+
+  // 매치 상세 (더보기 시점에만 호출). 실패 시 null
+  async function getMatchDetail(matchId: string): Promise<SaMatchDetail | null> {
+    try {
+      return (await api.get(`/sa-matches/${matchId}`)) as unknown as SaMatchDetail
+    } catch {
+      return null
+    }
+  }
+
+  return { getMatches, getMatchDetail }
+}
diff --git a/frontend/src/composables/useSaMeta.ts b/frontend/src/composables/useSaMeta.ts
new file mode 100644
index 0000000..9d308f7
--- /dev/null
+++ b/frontend/src/composables/useSaMeta.ts
@@ -0,0 +1,30 @@
+import { useApi } from './useApi'
+
+// 메타 항목 (이름 → 이미지)
+export interface SaMetaItem {
+  name: string
+  image: string
+}
+
+// 종류별 메타 { grade, season_grade, tier }
+export type SaMetaSections = Record<string, SaMetaItem[]>
+
+export function useSaMeta() {
+  const api = useApi()
+
+  async function getMeta(): Promise<SaMetaSections> {
+    try {
+      return (await api.get('/sa-meta')) as unknown as SaMetaSections
+    } catch {
+      return {}
+    }
+  }
+
+  // 종류 + 이름으로 이미지 URL 조회 (없으면 빈 문자열)
+  function imageOf(meta: SaMetaSections, type: string, name: string): string {
+    const list = meta[type] ?? []
+    return list.find((m) => m.name === name)?.image ?? ''
+  }
+
+  return { getMeta, imageOf }
+}
diff --git a/frontend/src/composables/useSaUser.ts b/frontend/src/composables/useSaUser.ts
new file mode 100644
index 0000000..115f4ea
--- /dev/null
+++ b/frontend/src/composables/useSaUser.ts
@@ -0,0 +1,68 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+
+// 유저 OUID 검색 결과
+export interface SaOuid {
+  ouid: string
+  userName: string
+}
+
+// 유저 종합 프로필 (백엔드 ProfileResponseDto)
+export interface SaProfile {
+  ouid: string
+  userName: string
+  dateCreate: string
+  titleName: string
+  clanName: string
+  mannerGrade: string
+  grade: string
+  gradeExp: number
+  gradeRanking: number
+  seasonGrade: string
+  seasonGradeExp: number
+  seasonGradeRanking: number
+  soloTier: string
+  soloScore: number
+  partyTier: string
+  partyScore: number
+  recentWinRate: number
+  recentKdRate: number
+  recentAssaultRate: number
+  recentSniperRate: number
+  recentSpecialRate: number
+  lastSyncedAt: string
+}
+
+export function useSaUser() {
+  const api = useApi()
+  const loading = ref<boolean>(false)
+  const error = ref<string | null>(null)
+
+  // 닉네임 → OUID 검색 (실패 시 null, 인터셉터가 에러 알림 처리)
+  async function searchOuid(userName: string): Promise<SaOuid | null> {
+    loading.value = true
+    error.value = null
+    try {
+      return (await api.get('/sa-users/search', {
+        params: { user_name: userName },
+      })) as unknown as SaOuid
+    } catch (e) {
+      error.value = (e as Error)?.message ?? 'unknown error'
+      return null
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // OUID → 종합 프로필
+  async function getProfile(ouid: string): Promise<SaProfile | null> {
+    try {
+      return (await api.get(`/sa-users/${ouid}/profile`)) as unknown as SaProfile
+    } catch (e) {
+      error.value = (e as Error)?.message ?? 'unknown error'
+      return null
+    }
+  }
+
+  return { loading, error, searchOuid, getProfile }
+}
diff --git a/frontend/src/pages/ClanHomePage.vue b/frontend/src/pages/ClanHomePage.vue
index 0e0c424..9a63f5b 100644
--- a/frontend/src/pages/ClanHomePage.vue
+++ b/frontend/src/pages/ClanHomePage.vue
@@ -2,8 +2,9 @@
 // 클랜 홈 — 배너 + 스탯 스트립 + 소개 + 2단 섹션. sa-clan.jsx ClanHome 포팅.
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { SA } from '@/shared/data/sa'
-import { ClanDB } from '@/shared/data/clan'
+import { useBreakpoint } from '@/composables/useBreakpoint'
+import { SA } from '@/shared/mock/sa'
+import { ClanDB } from '@/shared/mock/clan'
 import AppIcon from '@/shared/components/AppIcon.vue'
 import ImageSlot from '@/shared/components/ImageSlot.vue'
 import ClanEmblem from '@/shared/components/ClanEmblem.vue'
@@ -17,6 +18,8 @@ import ClanMembers from '@/pages/clan/ClanMembers.vue'
 
 const route = useRoute()
 const router = useRouter()
+// 반응형 분기 — 모바일(<760)에서 히어로 엠블럼 size 축소(원본 sa-clan.jsx)
+const { mobile } = useBreakpoint()
 const clan = computed(() => ClanDB(route.params.name as string))
 
 const stats = computed(() => [
@@ -59,7 +62,7 @@ function back() {
         <div class="clan__emblem">
           <ClanEmblem
             :cfg="clan.emblem"
-            :size="104"
+            :size="mobile ? 64 : 104"
           />
         </div>
         <div class="clan__title">
@@ -334,4 +337,48 @@ function back() {
   gap: 18px;
   min-width: 0;
 }
+
+/* ─────────────────────────────────────────────
+   반응형 (데스크톱 레이아웃 유지, 좁은 화면만 재배치)
+   원본 searchgg 메인 홈.html @media 및 sa-clan.jsx mobile 분기 대응
+   ───────────────────────────────────────────── */
+
+/* 모바일(<760): 히어로 제목/슬로건/버튼 축소 — 엠블럼 size는 JS(mobile)로 분기 */
+@media (max-width: 760px) {
+  /* 좌우 패딩 축소 (원본 mobile: '0 16px 14px') */
+  .clan__identity {
+    padding: 0 1rem 0.875rem;
+    gap: 0.75rem;
+  }
+  /* 제목 30 → 21px */
+  .clan__name {
+    font-size: 1.3125rem;
+  }
+  /* 슬로건 14.5 → 12.5px */
+  .clan__slogan {
+    font-size: 0.78125rem;
+  }
+  /* 가입 버튼 padding/fontSize 축소 (원본 '8px 14px' / 12px) */
+  .clan__join {
+    padding: 0.5rem 0.875rem;
+    font-size: 0.75rem;
+  }
+}
+
+/* 태블릿(<960): 2단 본문 그리드 → 1단 (원본 sg-grid-main) */
+@media (max-width: 960px) {
+  .clan__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 모바일(<600): wrap 좌우 패딩 16px(1rem) 축소 (원본 sg-wrap) */
+@media (max-width: 600px) {
+  .clan__topbar,
+  .clan__statstrip-inner,
+  .clan__body {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
 </style>
diff --git a/frontend/src/pages/ClanPlazaPage.vue b/frontend/src/pages/ClanPlazaPage.vue
index 0c8deea..6777e11 100644
--- a/frontend/src/pages/ClanPlazaPage.vue
+++ b/frontend/src/pages/ClanPlazaPage.vue
@@ -2,8 +2,8 @@
 // 클랜 모집 광장 — 히어로 + 필터 + 카드 그리드 + 상세/등록 모달. sa-clan-plaza.jsx ClanPlaza 포팅.
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { SA } from '@/shared/data/sa'
-import { buildRecruits, RECRUIT_TYPES, type Recruit } from '@/shared/data/clan'
+import { SA } from '@/shared/mock/sa'
+import { buildRecruits, RECRUIT_TYPES, type Recruit } from '@/shared/mock/clan'
 import AppIcon from '@/shared/components/AppIcon.vue'
 import ClanEmblem from '@/shared/components/ClanEmblem.vue'
 import RecruitCard from '@/pages/clan/RecruitCard.vue'
@@ -692,4 +692,23 @@ function goMyClan() {
   background: var(--point);
   color: var(--point-ink);
 }
+
+/* 반응형 — 카드 그리드(sg-plaza-cards 대응) 760px 이하 1열 */
+@media (max-width: 760px) {
+  .plaza__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 반응형 — 600px 이하 페이지 좌우 패딩 축소(28px → 16px=1rem) */
+@media (max-width: 600px) {
+  .plaza__hero-inner,
+  .plaza__filterbar-inner,
+  .plaza__detailrow-inner,
+  .plaza__mywrap,
+  .plaza__grid-wrap {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
 </style>
diff --git a/frontend/src/pages/CommunityPage.vue b/frontend/src/pages/CommunityPage.vue
index 3ab489a..dc56456 100644
--- a/frontend/src/pages/CommunityPage.vue
+++ b/frontend/src/pages/CommunityPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 커뮤니티 — 게시판 목록 + 검색/필터 + 상세/글쓰기 + 사이드. sa-community.jsx CommunityScreen 포팅.
 import { computed, ref } from 'vue'
-import { SA } from '@/shared/data/sa'
+import { SA } from '@/shared/mock/sa'
 import {
   CM_BOARDS,
   CM_NOTICES,
@@ -9,7 +9,7 @@ import {
   CM_POSTS,
   cmBody,
   type CmPost,
-} from '@/shared/data/community'
+} from '@/shared/mock/community'
 import AppIcon from '@/shared/components/AppIcon.vue'
 import CmRow from '@/pages/community/CmRow.vue'
 import CmSidePanel from '@/pages/community/CmSidePanel.vue'
@@ -380,6 +380,10 @@ function hotView(p: CmPost) {
   gap: 18px;
   align-items: start;
 }
+/* 그리드 자식이 좁아질 때 내용이 넘치지 않도록 (sg-grid-main > * { min-width: 0 }) */
+.cm__grid > * {
+  min-width: 0;
+}
 .cm__board {
   background: var(--surf);
   border: 1px solid var(--line);
@@ -559,4 +563,19 @@ function hotView(p: CmPost) {
   flex-direction: column;
   gap: 18px;
 }
+
+/* ===== 반응형 (원본 sg-grid-main / sg-wrap @media 대응) ===== */
+/* 태블릿 이하: 메인 2단 그리드 → 1단 (sg-grid-main: 1fr) */
+@media (max-width: 960px) {
+  .cm__grid {
+    grid-template-columns: 1fr;
+  }
+}
+/* 모바일: 페이지 좌우 패딩 축소 16px(1rem) (sg-wrap) */
+@media (max-width: 600px) {
+  .cm__inner {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
 </style>
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
index ecccb48..c761afa 100644
--- a/frontend/src/pages/HomePage.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 // 홈 페이지 — 히어로 + 이벤트 + 좌(콘텐츠)/우(사이드) 2단 그리드. sa-home.jsx Home 포팅.
+import { storeToRefs } from 'pinia'
+import { useUserStore } from '@/stores/user.store'
 import HomeHero from '@/pages/home/HomeHero.vue'
 import EventStrip from '@/pages/home/EventStrip.vue'
 import StreamLive from '@/pages/home/StreamLive.vue'
@@ -13,6 +15,10 @@ import SeasonCard from '@/pages/home/SeasonCard.vue'
 import SaRanking from '@/pages/home/SaRanking.vue'
 import SearchRank from '@/pages/home/SearchRank.vue'
 import LiveStats from '@/pages/home/LiveStats.vue'
+
+// 내 전적/즐겨찾기 카드는 로그인 상태에서만 노출
+const userStore = useUserStore()
+const { isLoggedIn } = storeToRefs(userStore)
 </script>
 
 <template>
@@ -29,8 +35,8 @@ import LiveStats from '@/pages/home/LiveStats.vue'
           <CommunityPreview />
         </div>
         <div class="home__col">
-          <MeCard />
-          <FavoritesPanel />
+          <MeCard v-if="isLoggedIn" />
+          <FavoritesPanel v-if="isLoggedIn" />
           <SeasonCard />
           <SaRanking />
           <SearchRank />
@@ -62,4 +68,18 @@ import LiveStats from '@/pages/home/LiveStats.vue'
   gap: 18px;
   min-width: 0;
 }
+
+/* 반응형 — 태블릿 이하: 우측 사이드 컬럼을 본문 아래로 1단 배치 */
+@media (max-width: 960px) {
+  .home__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 반응형 — 모바일: 좌우 패딩 축소(16px=1rem), 세로 패딩 유지 */
+@media (max-width: 600px) {
+  .home__inner {
+    padding: 1.25rem 1rem 2.5rem;
+  }
+}
 </style>
diff --git a/frontend/src/pages/ProfilePage.vue b/frontend/src/pages/ProfilePage.vue
index 57cba2c..9ba8faa 100644
--- a/frontend/src/pages/ProfilePage.vue
+++ b/frontend/src/pages/ProfilePage.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
 // 전적검색(프로필) 페이지 — 검색 서브헤더 + 요약 + 전적/통계 탭. sa-profile.jsx ProfileScreen 포팅.
-import { computed, ref } from 'vue'
+// UI 구조는 기존(mock 디자인) 그대로 유지하고, 데이터만 넥슨 실데이터를 어댑터로 변환해 주입한다.
+import { ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { SA, findPlayer } from '@/shared/data/sa'
-import type { Player } from '@/shared/data/types'
+import { useSaUser, type SaProfile } from '@/composables/useSaUser'
+import { useSaMatch, MATCH_TYPES, type SaMatchItem } from '@/composables/useSaMatch'
+import { useSaMeta, type SaMetaSections } from '@/composables/useSaMeta'
+import { makeRank } from '@/shared/utils/adapt'
+import type { Player, MatchRecord, RankedRecord, ClanRecord } from '@/shared/mock/types'
 import SearchBar from '@/shared/components/SearchBar.vue'
 import ProfileSummary from '@/pages/profile/ProfileSummary.vue'
 import RankedSeasons from '@/pages/profile/RankedSeasons.vue'
@@ -16,13 +20,198 @@ import ModeRecords from '@/pages/profile/ModeRecords.vue'
 import MapRecords from '@/pages/profile/MapRecords.vue'
 
 const route = useRoute()
-// 라우트 파라미터로 유저 조회. 없으면 로그인 유저(나) 폴백.
-const p = computed<Player>(() => {
-  const name = route.params.name as string
-  return findPlayer(name) ?? SA.me
-})
+const { searchOuid, getProfile } = useSaUser()
+const { getMatches } = useSaMatch()
+const { getMeta, imageOf } = useSaMeta()
 
+const loading = ref(false)
+const notFound = ref(false)
+const p = ref<Player | null>(null)
 const tab = ref('전적')
+
+// 넥슨 매치타입 → 기존 UI 탭 라벨
+const TYPE_LABEL: Record<string, string> = {
+  '랭크전 솔로': '솔로 랭크전',
+  '랭크전 파티': '파티 랭크전',
+  '퀵매치 클랜전': '클랜전',
+  '클랜 랭크전': '클랜 랭크전',
+  토너먼트: '토너먼트',
+}
+
+// ISO → 'MM.DD HH:mm' (KST)
+function fmtAgo(iso: string): string {
+  const kst = new Date(new Date(iso).getTime() + 9 * 3600 * 1000)
+  const mm = String(kst.getUTCMonth() + 1).padStart(2, '0')
+  const dd = String(kst.getUTCDate()).padStart(2, '0')
+  const hh = String(kst.getUTCHours()).padStart(2, '0')
+  const mi = String(kst.getUTCMinutes()).padStart(2, '0')
+  return `${mm}.${dd} ${hh}:${mi}`
+}
+
+// 킬뎃 %(recentKdRate)를 kda 값으로 역산 (ProfileSummary 가 SA.kdPct 로 다시 %로 환산하므로)
+function kdaFromPct(pct: number): number {
+  const r = Math.min(99, Math.max(0, pct))
+  return r / (100 - r)
+}
+
+// 랭크전 매치(솔로/파티)를 집계해 시즌 전적(RankedRecord) 생성.
+// 티어/점수는 프로필 tier API 값, 전적/승률/킬뎃은 매치 목록 집계.
+function aggRanked(
+  items: SaMatchItem[],
+  type: string,
+  tier: string,
+  points: number,
+  tierImage: string,
+): RankedRecord {
+  const f = items.filter((m) => m.matchType === type)
+  const matches = f.length
+  const w = f.filter((x) => x.matchResult === '1').length
+  const l = matches - w
+  let kdSum = 0
+  f.forEach((x) => {
+    const t = x.kill + x.death
+    kdSum += t ? (x.kill / t) * 100 : 0
+  })
+  return {
+    matches,
+    w,
+    l,
+    wr: matches ? Math.round((w / matches) * 100) : 0,
+    kd: matches ? Math.round(kdSum / matches) : 0,
+    hs: 0,
+    tier: tier || 'UNRANK',
+    div: null,
+    points,
+    tierImage,
+  }
+}
+
+// 클랜전 전적 — 클랜이 있으면 클랜전(퀵매치 클랜전 + 클랜 랭크전) 매치를 집계.
+// 전적이 없으면 0으로 표기, 클랜이 없으면 빈 목록.
+function aggClanRecords(items: SaMatchItem[], clanName: string): ClanRecord[] {
+  if (!clanName) return []
+  const clanTypes = ['퀵매치 클랜전', '클랜 랭크전']
+  const f = items.filter((m) => clanTypes.includes(m.matchType))
+  const matches = f.length
+  const w = f.filter((x) => x.matchResult === '1').length
+  const l = matches - w
+  let kdSum = 0
+  f.forEach((x) => {
+    const t = x.kill + x.death
+    kdSum += t ? (x.kill / t) * 100 : 0
+  })
+  // 현재 가입된 클랜이므로 가입 1회로 카운트. 가입일은 알 수 없어 '????',
+  // 종료는 현재(활동중) 년월(yyyy-mm)로 표기한다.
+  const kst = new Date(Date.now() + 9 * 60 * 60 * 1000)
+  const nowYm = `${kst.getUTCFullYear()}-${String(kst.getUTCMonth() + 1).padStart(2, '0')}`
+  return [
+    {
+      clan: clanName,
+      tag: clanName.slice(0, 4),
+      matches,
+      w,
+      l,
+      wr: matches ? Math.round((w / matches) * 100) : 0,
+      kd: matches ? Math.round(kdSum / matches) : 0,
+      periods: [{ from: '????', to: nowYm, months: 0 }],
+    },
+  ]
+}
+
+function adaptMatches(items: SaMatchItem[]): MatchRecord[] {
+  return items.map((m) => ({
+    matchId: m.matchId,
+    mode: TYPE_LABEL[m.matchType] ?? m.matchType,
+    win: m.matchResult === '1',
+    map: '',
+    k: m.kill,
+    d: m.death,
+    a: m.assist,
+    ago: fmtAgo(m.dateMatch),
+    winSide: 'blue',
+    teams: { blue: [], red: [] },
+  }))
+}
+
+// 넥슨 프로필/매치 → 기존 UI가 기대하는 mock Player 형태로 변환.
+// 넥슨이 제공하지 않는 항목(집계/추세/함께한 유저 등)은 빈 값으로 두고 2차에서 채운다.
+function adaptPlayer(pr: SaProfile, matches: SaMatchItem[], meta: SaMetaSections): Player {
+  const gradeImg = imageOf(meta, 'grade', pr.grade)
+  const seasonImg = imageOf(meta, 'season_grade', pr.seasonGrade)
+  return {
+    name: pr.userName,
+    clan: pr.clanName || null,
+    rank: makeRank(pr.grade, gradeImg),
+    rankTotal: makeRank(pr.grade, gradeImg),
+    rankSeason: makeRank(pr.seasonGrade, seasonImg),
+    rankNoTotal: pr.gradeRanking,
+    rankNoSeason: pr.seasonGradeRanking,
+    level: 0,
+    wins: 0,
+    losses: 0,
+    wr: Math.round(pr.recentWinRate * 10) / 10,
+    kda: kdaFromPct(pr.recentKdRate),
+    hs: 0,
+    rifle: Math.round(pr.recentAssaultRate),
+    sniper: Math.round(pr.recentSniperRate),
+    special: Math.round(pr.recentSpecialRate),
+    manner: 0,
+    mannerGrade: pr.mannerGrade,
+    connRate: 0,
+    views: 0,
+    contrib: 0,
+    matches: adaptMatches(matches),
+    rankedSeasons: [
+      {
+        season: '현재 시즌',
+        solo: aggRanked(matches, '랭크전 솔로', pr.soloTier, pr.soloScore, imageOf(meta, 'tier', pr.soloTier)),
+        party: aggRanked(matches, '랭크전 파티', pr.partyTier, pr.partyScore, imageOf(meta, 'tier', pr.partyTier)),
+      },
+    ],
+    clanRecords: aggClanRecords(matches, pr.clanName),
+    modeRecords: [],
+    mapRecords: [],
+    trend: { daily: [], weekly: [] },
+    together: { games: 0, w: 0, l: 0 },
+  }
+}
+
+async function load() {
+  const name = (route.params.name as string)?.trim()
+  if (!name) return
+  loading.value = true
+  notFound.value = false
+  p.value = null
+
+  const res = await searchOuid(name)
+  if (!res) {
+    notFound.value = true
+    loading.value = false
+    return
+  }
+
+  const results = await Promise.all([
+    getProfile(res.ouid),
+    getMeta(),
+    ...MATCH_TYPES.map((t) => getMatches(res.ouid, t)),
+  ])
+  const profile = results[0] as SaProfile | null
+  const meta = results[1] as SaMetaSections
+  const matchLists = results.slice(2) as SaMatchItem[][]
+  if (!profile) {
+    notFound.value = true
+    loading.value = false
+    return
+  }
+
+  const allMatches = matchLists
+    .flat()
+    .sort((a, b) => b.dateMatch.localeCompare(a.dateMatch))
+  p.value = adaptPlayer(profile, allMatches, meta)
+  loading.value = false
+}
+
+watch(() => route.params.name, load, { immediate: true })
 </script>
 
 <template>
@@ -37,49 +226,64 @@ const tab = ref('전적')
     </div>
 
     <div class="pf__body">
-      <ProfileSummary :p="p" />
+      <div
+        v-if="loading"
+        class="pf__state"
+      >
+        불러오는 중...
+      </div>
+      <div
+        v-else-if="notFound"
+        class="pf__state"
+      >
+        요청하신 유저를 찾을 수 없습니다.
+      </div>
 
-      <!-- 서브탭 -->
-      <div class="pf__tabs">
-        <button
-          v-for="t in ['전적', '통계']"
-          :key="t"
-          class="pf__tab"
-          :class="{ 'pf__tab--on': tab === t }"
-          @click="tab = t"
+      <template v-else-if="p">
+        <ProfileSummary :p="p" />
+
+        <!-- 서브탭 -->
+        <div class="pf__tabs">
+          <button
+            v-for="t in ['전적', '통계']"
+            :key="t"
+            class="pf__tab"
+            :class="{ 'pf__tab--on': tab === t }"
+            @click="tab = t"
+          >
+            {{ t }}
+            <span
+              v-if="tab === t"
+              class="pf__tab-line"
+              :style="{ background: p.rank.color }"
+            />
+          </button>
+        </div>
+
+        <div
+          v-if="tab === '전적'"
+          class="pf__grid"
         >
-          {{ t }}
-          <span
-            v-if="tab === t"
-            class="pf__tab-line"
-            :style="{ background: p.rank.color }"
-          />
-        </button>
-      </div>
-
-      <div
-        v-if="tab === '전적'"
-        class="pf__grid"
-      >
-        <div class="pf__col">
-          <RankedSeasons :p="p" />
-          <ClanRecords :p="p" />
-          <MatchHistory :p="p" />
+          <div class="pf__col">
+            <RankedSeasons :p="p" />
+            <ClanRecords :p="p" />
+            <MatchHistory :p="p" />
+          </div>
+          <div class="pf__col pf__col--side">
+            <RecentTrend :p="p" />
+            <Companions :p="p" />
+          </div>
         </div>
-        <div class="pf__col pf__col--side">
-          <RecentTrend :p="p" />
-          <Companions :p="p" />
-        </div>
-      </div>
 
-      <div
-        v-else
-        class="pf__stack"
-      >
-        <TrendChart :p="p" />
-        <ModeRecords :p="p" />
-        <MapRecords :p="p" />
-      </div>
+        <div
+          v-else
+          class="pf__stack"
+        >
+          <TrendChart :p="p" />
+          <ModeRecords :p="p" />
+          <MapRecords :p="p" />
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -107,6 +311,12 @@ const tab = ref('전적')
   margin: 0 auto;
   padding: 24px 28px 44px;
 }
+.pf__state {
+  padding: 60px 0;
+  text-align: center;
+  color: var(--t3);
+  font-size: 0.875rem;
+}
 .pf__tabs {
   display: flex;
   gap: 4px;
@@ -152,4 +362,18 @@ const tab = ref('전적')
   flex-direction: column;
   gap: 18px;
 }
+
+/* ── 반응형 ── */
+@media (max-width: 960px) {
+  .pf__grid {
+    grid-template-columns: 1fr;
+  }
+}
+@media (max-width: 600px) {
+  .pf__subhead-inner,
+  .pf__body {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
 </style>
diff --git a/frontend/src/pages/clan/ClanActivity.vue b/frontend/src/pages/clan/ClanActivity.vue
index 4bcec1b..aa4a7f6 100644
--- a/frontend/src/pages/clan/ClanActivity.vue
+++ b/frontend/src/pages/clan/ClanActivity.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 주간 활동 — 요일별 접속률 막대. sa-clan-sections.jsx ClanActivity 포팅.
 import { computed } from 'vue'
-import type { Clan } from '@/shared/data/clan'
+import type { Clan } from '@/shared/mock/clan'
 import UiPanel from '@/shared/components/UiPanel.vue'
 
 interface Props {
diff --git a/frontend/src/pages/clan/ClanFeed.vue b/frontend/src/pages/clan/ClanFeed.vue
index 7062dea..76e319e 100644
--- a/frontend/src/pages/clan/ClanFeed.vue
+++ b/frontend/src/pages/clan/ClanFeed.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 // 클랜 피드 — 작성(내 클랜) + 페이지네이션. sa-clan-sections.jsx ClanFeed 포팅.
 import { computed, ref, watch } from 'vue'
-import { SA } from '@/shared/data/sa'
-import type { Clan, ClanFeedItem } from '@/shared/data/clan'
+import { SA } from '@/shared/mock/sa'
+import type { Clan, ClanFeedItem } from '@/shared/mock/clan'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import AppIcon from '@/shared/components/AppIcon.vue'
 import ClanPager from './ClanPager.vue'
diff --git a/frontend/src/pages/clan/ClanGuestbook.vue b/frontend/src/pages/clan/ClanGuestbook.vue
index 09fd273..8938e83 100644
--- a/frontend/src/pages/clan/ClanGuestbook.vue
+++ b/frontend/src/pages/clan/ClanGuestbook.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 // 방명록 — 방문자 글 + 클랜원 답글. sa-clan-sections.jsx ClanGuestbook 포팅.
 import { computed, ref, watch } from 'vue'
-import { SA } from '@/shared/data/sa'
-import type { Clan, ClanGuestItem } from '@/shared/data/clan'
+import { SA } from '@/shared/mock/sa'
+import type { Clan, ClanGuestItem } from '@/shared/mock/clan'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import ClanPager from './ClanPager.vue'
 
diff --git a/frontend/src/pages/clan/ClanMembers.vue b/frontend/src/pages/clan/ClanMembers.vue
index ce4cd1f..81d4c7f 100644
--- a/frontend/src/pages/clan/ClanMembers.vue
+++ b/frontend/src/pages/clan/ClanMembers.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 // 클랜원 — 역할별 그룹 + 기여도. sa-clan-sections.jsx ClanMembers 포팅.
 import { useRouter } from 'vue-router'
-import { SA } from '@/shared/data/sa'
-import type { Clan } from '@/shared/data/clan'
+import { SA } from '@/shared/mock/sa'
+import type { Clan } from '@/shared/mock/clan'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import RankBadge from '@/shared/components/RankBadge.vue'
 
diff --git a/frontend/src/pages/clan/ClanNotices.vue b/frontend/src/pages/clan/ClanNotices.vue
index 8783e09..0970d25 100644
--- a/frontend/src/pages/clan/ClanNotices.vue
+++ b/frontend/src/pages/clan/ClanNotices.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 클랜 공지 — 페이지네이션. sa-clan-sections.jsx ClanNotices 포팅.
 import { computed, ref } from 'vue'
-import type { Clan } from '@/shared/data/clan'
+import type { Clan } from '@/shared/mock/clan'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import ClanPager from './ClanPager.vue'
 
diff --git a/frontend/src/pages/clan/ClanSchedule.vue b/frontend/src/pages/clan/ClanSchedule.vue
index 0efd6e4..77d21a8 100644
--- a/frontend/src/pages/clan/ClanSchedule.vue
+++ b/frontend/src/pages/clan/ClanSchedule.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 클랜 일정 — 주간 정기전 + 등록/삭제(내 클랜). sa-clan-sections.jsx ClanSchedule 포팅.
 import { computed, ref, watch } from 'vue'
-import type { Clan, ClanScheduleItem } from '@/shared/data/clan'
+import type { Clan, ClanScheduleItem } from '@/shared/mock/clan'
 import UiPanel from '@/shared/components/UiPanel.vue'
 
 interface Props {
diff --git a/frontend/src/pages/clan/ClanWeeklyMatches.vue b/frontend/src/pages/clan/ClanWeeklyMatches.vue
index 5598b8c..7030466 100644
--- a/frontend/src/pages/clan/ClanWeeklyMatches.vue
+++ b/frontend/src/pages/clan/ClanWeeklyMatches.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 주간 매치 — 요일별 모드 스택 막대 + 합계. sa-clan-sections.jsx ClanWeeklyMatches 포팅.
 import { computed } from 'vue'
-import type { Clan, ClanActivityDay } from '@/shared/data/clan'
+import type { Clan, ClanActivityDay } from '@/shared/mock/clan'
 import UiPanel from '@/shared/components/UiPanel.vue'
 
 interface Props {
diff --git a/frontend/src/pages/clan/RecruitCard.vue b/frontend/src/pages/clan/RecruitCard.vue
index 1ef9d5f..e4bb9cc 100644
--- a/frontend/src/pages/clan/RecruitCard.vue
+++ b/frontend/src/pages/clan/RecruitCard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 // 모집 카드 — 포스터 + 클랜 정보 + 모집 현황 막대. sa-clan-plaza.jsx RecruitCard 포팅.
 import { computed } from 'vue'
-import { SA } from '@/shared/data/sa'
-import { recruitAgeLabel, type Recruit } from '@/shared/data/clan'
+import { SA } from '@/shared/mock/sa'
+import { recruitAgeLabel, type Recruit } from '@/shared/mock/clan'
 import ImageSlot from '@/shared/components/ImageSlot.vue'
 import ClanEmblem from '@/shared/components/ClanEmblem.vue'
 
diff --git a/frontend/src/pages/clan/RecruitCreate.vue b/frontend/src/pages/clan/RecruitCreate.vue
index cf5a14f..6446886 100644
--- a/frontend/src/pages/clan/RecruitCreate.vue
+++ b/frontend/src/pages/clan/RecruitCreate.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 // 모집글 등록 모달 — 포스터/유형/조건/안내/문의채널. sa-clan-plaza.jsx RecruitCreate 포팅(데모).
 import { computed, ref } from 'vue'
-import { SA } from '@/shared/data/sa'
-import { ClanDB, RECRUIT_TYPES } from '@/shared/data/clan'
+import { SA } from '@/shared/mock/sa'
+import { ClanDB, RECRUIT_TYPES } from '@/shared/mock/clan'
 import ImageSlot from '@/shared/components/ImageSlot.vue'
 import ClanEmblem from '@/shared/components/ClanEmblem.vue'
 import ContactGlyph from './ContactGlyph.vue'
diff --git a/frontend/src/pages/clan/RecruitDetail.vue b/frontend/src/pages/clan/RecruitDetail.vue
index 4e9f2ff..ce07fc7 100644
--- a/frontend/src/pages/clan/RecruitDetail.vue
+++ b/frontend/src/pages/clan/RecruitDetail.vue
@@ -2,7 +2,7 @@
 // 모집 상세 모달 — 포스터 + 통계 + 가입 조건 + 액션. sa-clan-plaza.jsx RecruitDetail 포팅.
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { recruitAgeLabel, type Recruit } from '@/shared/data/clan'
+import { recruitAgeLabel, type Recruit } from '@/shared/mock/clan'
 import ImageSlot from '@/shared/components/ImageSlot.vue'
 import ClanEmblem from '@/shared/components/ClanEmblem.vue'
 import ContactGlyph from './ContactGlyph.vue'
@@ -364,4 +364,11 @@ function openClan() {
 .rd__contact--kakao {
   background: var(--kakao);
 }
+
+/* 반응형 — 가입 조건 그리드(sg-cond2 대응) 760px 이하 1열 */
+@media (max-width: 760px) {
+  .rd__cond {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/frontend/src/pages/community/CmAuthor.vue b/frontend/src/pages/community/CmAuthor.vue
index cc515de..b2430cb 100644
--- a/frontend/src/pages/community/CmAuthor.vue
+++ b/frontend/src/pages/community/CmAuthor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 작성자 + 서든어택 인증 마크. sa-community.jsx CmAuthor/CmVerifiedTag 포팅.
 import { computed } from 'vue'
-import { cmVerified } from '@/shared/data/community'
+import { cmVerified } from '@/shared/mock/community'
 
 interface Props {
   name: string
diff --git a/frontend/src/pages/community/CmPostDetail.vue b/frontend/src/pages/community/CmPostDetail.vue
index d4a20ef..764ff36 100644
--- a/frontend/src/pages/community/CmPostDetail.vue
+++ b/frontend/src/pages/community/CmPostDetail.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 // 커뮤니티 글 상세 — 본문 + 추천/비추 + 댓글/답글. sa-community.jsx CmPostDetail 포팅.
 import { computed, ref, watch } from 'vue'
-import { SA } from '@/shared/data/sa'
-import { CM_BEST_UP, cmBody, cmComments, cmPartyBadges, type CmComment, type CmPost } from '@/shared/data/community'
+import { SA } from '@/shared/mock/sa'
+import { CM_BEST_UP, cmBody, cmComments, cmPartyBadges, type CmComment, type CmPost } from '@/shared/mock/community'
 import AppIcon from '@/shared/components/AppIcon.vue'
 import CmAuthor from './CmAuthor.vue'
 
diff --git a/frontend/src/pages/community/CmRow.vue b/frontend/src/pages/community/CmRow.vue
index b5180e2..b3082e4 100644
--- a/frontend/src/pages/community/CmRow.vue
+++ b/frontend/src/pages/community/CmRow.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 커뮤니티 목록 행. sa-community.jsx CmRow 포팅.
-import { SA } from '@/shared/data/sa'
-import { CM_BEST_UP, cmPartyBadges, type CmPost } from '@/shared/data/community'
+import { SA } from '@/shared/mock/sa'
+import { CM_BEST_UP, cmPartyBadges, type CmPost } from '@/shared/mock/community'
 import CmAuthor from './CmAuthor.vue'
 
 interface Props {
diff --git a/frontend/src/pages/community/CmSidePanel.vue b/frontend/src/pages/community/CmSidePanel.vue
index 961f603..455af49 100644
--- a/frontend/src/pages/community/CmSidePanel.vue
+++ b/frontend/src/pages/community/CmSidePanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // 커뮤니티 사이드 위젯 — 인기글/주간 베스트. sa-community.jsx CmSidePanel 포팅.
-import type { CmPost } from '@/shared/data/community'
+import type { CmPost } from '@/shared/mock/community'
 import UiPanel from '@/shared/components/UiPanel.vue'
 
 interface Props {
diff --git a/frontend/src/pages/community/CmWrite.vue b/frontend/src/pages/community/CmWrite.vue
index ee67439..87dd747 100644
--- a/frontend/src/pages/community/CmWrite.vue
+++ b/frontend/src/pages/community/CmWrite.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 // 글쓰기 — 일반/파티 모집. sa-community.jsx CmWrite 포팅.
 import { computed, ref } from 'vue'
-import { SA } from '@/shared/data/sa'
-import { CM_BOARDS, CM_PARTY_TYPES, type CmPost } from '@/shared/data/community'
+import { SA } from '@/shared/mock/sa'
+import { CM_BOARDS, CM_PARTY_TYPES, type CmPost } from '@/shared/mock/community'
 
 interface Props {
   initialBoard: string
diff --git a/frontend/src/pages/home/CommunityPreview.vue b/frontend/src/pages/home/CommunityPreview.vue
index f7ec338..ca4afcd 100644
--- a/frontend/src/pages/home/CommunityPreview.vue
+++ b/frontend/src/pages/home/CommunityPreview.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 커뮤니티 미리보기 — 자유+공략 인기글 6개. sa-home.jsx Community 포팅.
 import { useRouter } from 'vue-router'
-import { SA } from '@/shared/data/sa'
+import { SA } from '@/shared/mock/sa'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import AppIcon from '@/shared/components/AppIcon.vue'
 
diff --git a/frontend/src/pages/home/EventStrip.vue b/frontend/src/pages/home/EventStrip.vue
index b72c250..cab7630 100644
--- a/frontend/src/pages/home/EventStrip.vue
+++ b/frontend/src/pages/home/EventStrip.vue
@@ -2,7 +2,7 @@
 // 진행중인 이벤트 — 4개씩 페이지 캐러셀 + 자동 슬라이드. sa-home.jsx EventStrip 포팅.
 // 데이터: 백엔드 크롤링(/api/events/ongoing). 실패 시 더미(SA.events) 폴백.
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { SA } from '@/shared/data/sa'
+import { SA } from '@/shared/mock/sa'
 import { useEvents } from '@/composables/useEvents'
 import ImageSlot from '@/shared/components/ImageSlot.vue'
 
@@ -318,4 +318,18 @@ onBeforeUnmount(stopTimer)
   width: 20px;
   background: var(--point);
 }
+
+/* 반응형 — 태블릿 이하: 한 페이지에 2개씩 */
+@media (max-width: 960px) {
+  .es__page {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* 반응형 — 모바일: 한 페이지에 1개씩 */
+@media (max-width: 440px) {
+  .es__page {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/frontend/src/pages/home/FavoritesPanel.vue b/frontend/src/pages/home/FavoritesPanel.vue
index a1aa69f..e1b4b62 100644
--- a/frontend/src/pages/home/FavoritesPanel.vue
+++ b/frontend/src/pages/home/FavoritesPanel.vue
@@ -2,8 +2,8 @@
 // 즐겨찾기 — 페이지네이션 목록. sa-home.jsx Favorites 포팅.
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { SA } from '@/shared/data/sa'
-import type { Player } from '@/shared/data/types'
+import { SA } from '@/shared/mock/sa'
+import type { Player } from '@/shared/mock/types'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import RankBadge from '@/shared/components/RankBadge.vue'
 
diff --git a/frontend/src/pages/home/HomeHero.vue b/frontend/src/pages/home/HomeHero.vue
index a98219d..fcb5830 100644
--- a/frontend/src/pages/home/HomeHero.vue
+++ b/frontend/src/pages/home/HomeHero.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // 홈 히어로 — 검색 밴드 + 환영 문구 + 최근검색 칩
-import { SA } from '@/shared/data/sa'
+import { SA } from '@/shared/mock/sa'
 import SearchBar from '@/shared/components/SearchBar.vue'
 import RecentChips from '@/shared/components/RecentChips.vue'
 
diff --git a/frontend/src/pages/home/HotStreak.vue b/frontend/src/pages/home/HotStreak.vue
index 122545d..6bde5b4 100644
--- a/frontend/src/pages/home/HotStreak.vue
+++ b/frontend/src/pages/home/HotStreak.vue
@@ -2,9 +2,9 @@
 // 폼 좋은 유저 — 연승/승률/킬뎃 탭. sa-home.jsx HotStreak 포팅.
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { SA } from '@/shared/data/sa'
+import { SA } from '@/shared/mock/sa'
 import { wrColor } from '@/shared/utils/stats'
-import type { Player } from '@/shared/data/types'
+import type { Player } from '@/shared/mock/types'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import SegTabs from '@/shared/components/SegTabs.vue'
 import RankBadge from '@/shared/components/RankBadge.vue'
@@ -189,4 +189,11 @@ function open(p: Player) {
 .hs__pct--pt {
   color: var(--point);
 }
+
+/* 반응형 — 좁은 화면: 카드 1열로 전환 */
+@media (max-width: 760px) {
+  .hs__grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/frontend/src/pages/home/LiveStats.vue b/frontend/src/pages/home/LiveStats.vue
index fed1acb..1404108 100644
--- a/frontend/src/pages/home/LiveStats.vue
+++ b/frontend/src/pages/home/LiveStats.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // 오늘의 전장 — 총 매치/모드별/제재. sa-home.jsx LiveStats 포팅.
-import { SA } from '@/shared/data/sa'
+import { SA } from '@/shared/mock/sa'
 import UiPanel from '@/shared/components/UiPanel.vue'
 
 const L = SA.liveStats
diff --git a/frontend/src/pages/home/MeCard.vue b/frontend/src/pages/home/MeCard.vue
index 2c648d1..c8d2d07 100644
--- a/frontend/src/pages/home/MeCard.vue
+++ b/frontend/src/pages/home/MeCard.vue
@@ -2,7 +2,7 @@
 // 내 전적 요약 — 통합/시즌 토글 + 핵심 지표. sa-home.jsx MeCard 포팅.
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { SA } from '@/shared/data/sa'
+import { SA } from '@/shared/mock/sa'
 import { wrColor } from '@/shared/utils/stats'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import SegTabs from '@/shared/components/SegTabs.vue'
diff --git a/frontend/src/pages/home/RecruitPosters.vue b/frontend/src/pages/home/RecruitPosters.vue
index 5f95afc..87de9b5 100644
--- a/frontend/src/pages/home/RecruitPosters.vue
+++ b/frontend/src/pages/home/RecruitPosters.vue
@@ -2,7 +2,7 @@
 // 모집 중인 클랜 — 세로 포스터 4개. sa-home.jsx RecruitPosters 포팅.
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { buildRecruits } from '@/shared/data/clan'
+import { buildRecruits } from '@/shared/mock/clan'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import AppIcon from '@/shared/components/AppIcon.vue'
 import ImageSlot from '@/shared/components/ImageSlot.vue'
@@ -117,4 +117,11 @@ function goClan(name: string) {
   color: var(--t3);
   padding-left: 27px;
 }
+
+/* 반응형 — 모바일: 포스터 2열로 축소 */
+@media (max-width: 600px) {
+  .rp__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 </style>
diff --git a/frontend/src/pages/home/SaNews.vue b/frontend/src/pages/home/SaNews.vue
index 2271601..adf5f8d 100644
--- a/frontend/src/pages/home/SaNews.vue
+++ b/frontend/src/pages/home/SaNews.vue
@@ -1,12 +1,31 @@
 <script setup lang="ts">
 // SA 소식 — 공지/GM이야기/업데이트 탭. sa-home.jsx SANews 포팅.
-import { computed, ref } from 'vue'
-import { SA } from '@/shared/data/sa'
+// 데이터: 백엔드 크롤링(/api/news/sections). 실패 시 더미(SA.news) 폴백.
+import { computed, onMounted, ref } from 'vue'
+import { SA } from '@/shared/mock/sa'
+import { useNews, type NewsItem } from '@/composables/useNews'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import SegTabs from '@/shared/components/SegTabs.vue'
 
 const tab = ref('공지사항')
-const rows = computed(() => SA.news[tab.value] ?? [])
+// 초기값은 더미 — 마운트 시 실데이터로 교체
+const sections = ref<Record<string, Partial<NewsItem>[]>>(SA.news)
+// 홈 소식 카드는 카테고리당 최대 5개만 표시
+const rows = computed(() => (sections.value[tab.value] ?? []).slice(0, 5))
+
+// 실데이터 로드 (크롤링). 성공 시 교체, 실패/빈 응답이면 더미 유지.
+const { getSections } = useNews()
+onMounted(async () => {
+  const data = await getSections()
+  // 항목이 하나라도 있는 카테고리가 있을 때만 교체
+  if (Object.values(data).some((list) => list.length)) {
+    sections.value = data
+  }
+})
+
+function openNews(link?: string) {
+  if (link) window.open(link, '_blank', 'noopener')
+}
 </script>
 
 <template>
@@ -27,6 +46,7 @@ const rows = computed(() => SA.news[tab.value] ?? [])
       :key="i"
       class="news__row"
       :class="{ 'news__row--line': i < rows.length - 1 }"
+      @click="openNews(r.link)"
     >
       <span class="news__date num">{{ r.date }}</span>
       <span class="news__title">{{ r.title }}</span>
diff --git a/frontend/src/pages/home/SaRanking.vue b/frontend/src/pages/home/SaRanking.vue
index 1fd1774..296f463 100644
--- a/frontend/src/pages/home/SaRanking.vue
+++ b/frontend/src/pages/home/SaRanking.vue
@@ -1,37 +1,48 @@
 <script setup lang="ts">
-// SA 랭킹 — 통합/시즌 계급, 랭크전(솔로/파티/클랜), 공식/일반 클랜. sa-home.jsx SARanking 포팅.
-import { computed, ref } from 'vue'
+// SA 랭킹 — 통합/시즌 계급, 랭크전(솔로/파티/클랜), 공식/일반 클랜.
+// 데이터: 백엔드 크롤링(/api/ranking/sections). 계급=승률 주지표, 티어/계급은 넥슨 원본 이미지.
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { SA } from '@/shared/data/sa'
+import { useRanking, type RankingItem } from '@/composables/useRanking'
 import UiPanel from '@/shared/components/UiPanel.vue'
-import RankBadge from '@/shared/components/RankBadge.vue'
 
 const router = useRouter()
 const CATS = ['통합 계급', '시즌 계급', '랭크전', '공식 클랜', '클랜']
 const cat = ref('통합 계급')
 const mode = ref('솔로')
 
-const tcol = computed(() => Object.fromEntries(SA.tiers.map((t) => [t.name, t.color])))
-const isClass = computed(() => cat.value === '시즌 계급' || cat.value === '통합 계급')
+const sections = ref<Record<string, RankingItem[]>>({})
+
+const isClass = computed(() => cat.value === '통합 계급' || cat.value === '시즌 계급')
 const isRanked = computed(() => cat.value === '랭크전')
 const isRankedUser = computed(() => isRanked.value && mode.value !== '클랜')
 const isRankedClan = computed(() => isRanked.value && mode.value === '클랜')
-const isClan = computed(() => cat.value === '공식 클랜' || cat.value === '클랜')
+const isOfficialClan = computed(() => cat.value === '공식 클랜')
+const isClan = computed(() => cat.value === '클랜')
 
-const classList = computed(() =>
-  cat.value === '시즌 계급' ? SA.seasonClassRanking : SA.totalClassRanking,
-)
-const contentList = computed(() => (mode.value === '솔로' ? SA.soloRpRanking : SA.partyRpRanking))
-const clanList = computed(() =>
-  cat.value === '공식 클랜' ? SA.officialClanRanking : SA.generalClanRanking,
-)
+// 현재 카테고리/모드 → 백엔드 카테고리 키
+const catKey = computed(() => {
+  if (cat.value === '통합 계급') return 'total_class'
+  if (cat.value === '시즌 계급') return 'season_class'
+  if (cat.value === '공식 클랜') return 'official_clan'
+  if (cat.value === '클랜') return 'clan'
+  // 랭크전
+  if (mode.value === '솔로') return 'ranked_solo'
+  if (mode.value === '파티') return 'ranked_party'
+  return 'ranked_clan'
+})
+const rows = computed(() => (sections.value[catKey.value] ?? []).slice(0, 10))
+
+const { getSections } = useRanking()
+onMounted(async () => {
+  const data = await getSections()
+  if (Object.values(data).some((list) => list.length)) {
+    sections.value = data
+  }
+})
 
-function findP(name: string) {
-  return SA.allPlayers.find((x) => x.name === name)
-}
 function openPlayer(name: string) {
-  const p = findP(name)
-  if (p) router.push({ name: 'profile', params: { name: p.name } })
+  router.push({ name: 'profile', params: { name } })
 }
 function openClan(name: string) {
   router.push({ name: 'clan', params: { name } })
@@ -79,11 +90,19 @@ function openClan(name: string) {
       </div>
     </div>
 
-    <!-- 계급 랭킹 -->
+    <!-- 빈 상태 -->
+    <div
+      v-if="!rows.length"
+      class="sr__empty"
+    >
+      랭킹을 집계 중입니다.
+    </div>
+
+    <!-- 계급 랭킹 (통합/시즌) — 주지표: 승률 -->
     <template v-if="isClass">
       <button
-        v-for="(e, i) in classList"
-        :key="e.name"
+        v-for="(e, i) in rows"
+        :key="e.rankNo"
         class="sr__row"
         :class="{ 'sr__row--alt': i % 2 === 1 }"
         @click="openPlayer(e.name)"
@@ -91,32 +110,30 @@ function openClan(name: string) {
         <span
           class="sr__no num"
           :class="{ 'sr__no--top': i < 3 }"
-        >{{ i + 1 }}</span>
-        <RankBadge
-          :rank="findP(e.name)?.rank ?? null"
-          :size="28"
-        />
+        >{{ e.rankNo }}</span>
+        <img
+          v-if="e.gradeImg"
+          :src="e.gradeImg"
+          class="sr__img"
+          alt="계급"
+        >
         <div class="sr__info">
-          <div class="sr__name-line">
-            <span class="sr__name">{{ e.name }}</span>
-            <span
-              v-if="findP(e.name)?.clan"
-              class="sr__tag"
-            >{{ findP(e.name)?.clan }}</span>
+          <div class="sr__name">
+            {{ e.name }}
           </div>
           <div class="sr__sub">
-            {{ findP(e.name)?.rank.name }}
+            킬뎃 {{ e.kd }}
           </div>
         </div>
-        <span class="sr__val num">{{ SA.fmt(e.score) }}<span class="sr__unit">점</span></span>
+        <span class="sr__val num">{{ e.winRate }}</span>
       </button>
     </template>
 
-    <!-- 랭크전(솔로/파티) -->
+    <!-- 랭크전 (솔로/파티) — 주지표: RP, 티어 이미지 -->
     <template v-if="isRankedUser">
       <button
-        v-for="(e, i) in contentList"
-        :key="e.name"
+        v-for="(e, i) in rows"
+        :key="e.rankNo"
         class="sr__row"
         :class="{ 'sr__row--alt': i % 2 === 1 }"
         @click="openPlayer(e.name)"
@@ -124,37 +141,30 @@ function openClan(name: string) {
         <span
           class="sr__no num"
           :class="{ 'sr__no--top': i < 3 }"
-        >{{ i + 1 }}</span>
-        <div
-          class="sr__tier"
-          :style="{ background: tcol[e.tier] || 'var(--point)' }"
+        >{{ e.rankNo }}</span>
+        <img
+          v-if="e.tierImg"
+          :src="e.tierImg"
+          class="sr__img"
+          alt="티어"
         >
-          {{ e.tier[0] }}
-        </div>
         <div class="sr__info">
-          <div class="sr__name-line">
-            <span class="sr__name">{{ e.name }}</span>
-            <span
-              v-if="findP(e.name)?.clan"
-              class="sr__tag"
-            >{{ findP(e.name)?.clan }}</span>
+          <div class="sr__name">
+            {{ e.name }}
           </div>
-          <div
-            class="sr__sub"
-            :style="{ color: tcol[e.tier], fontWeight: 600 }"
-          >
-            {{ e.tier }}
+          <div class="sr__sub">
+            승률 {{ e.winRate }}
           </div>
         </div>
-        <span class="sr__val num">{{ SA.fmt(e.rp) }}<span class="sr__unit">RP</span></span>
+        <span class="sr__val num">{{ e.rp }}<span class="sr__unit">RP</span></span>
       </button>
     </template>
 
-    <!-- 랭크전(클랜) -->
+    <!-- 랭크전 (클랜) — 주지표: 클랜 RP -->
     <template v-if="isRankedClan">
       <button
-        v-for="(c, i) in SA.clanRpRanking"
-        :key="c.name"
+        v-for="(c, i) in rows"
+        :key="c.rankNo"
         class="sr__row"
         :class="{ 'sr__row--alt': i % 2 === 1 }"
         @click="openClan(c.name)"
@@ -162,27 +172,41 @@ function openClan(name: string) {
         <span
           class="sr__no num"
           :class="{ 'sr__no--top': i < 3 }"
-        >{{ i + 1 }}</span>
-        <div class="sr__clantag num">
-          {{ c.tag }}
+        >{{ c.rankNo }}</span>
+        <span
+          v-if="c.clanMark"
+          class="sr__mark"
+        >
+          <img
+            v-for="(src, idx) in c.clanMark.split('|')"
+            :key="idx"
+            :src="src"
+            alt="클랜마크"
+          >
+        </span>
+        <div
+          v-else
+          class="sr__clantag num"
+        >
+          {{ c.name.slice(0, 3) }}
         </div>
         <div class="sr__info">
           <div class="sr__name">
             {{ c.name }}
           </div>
           <div class="sr__sub">
-            {{ c.members }}명
+            승률 {{ c.winRate }}
           </div>
         </div>
-        <span class="sr__val num">{{ SA.fmt(c.rp) }}<span class="sr__unit">RP</span></span>
+        <span class="sr__val num">{{ c.rp }}<span class="sr__unit">RP</span></span>
       </button>
     </template>
 
-    <!-- 클랜 랭킹 -->
-    <template v-if="isClan">
+    <!-- 공식 클랜 — 주지표: 누적점수 -->
+    <template v-if="isOfficialClan">
       <button
-        v-for="(c, i) in clanList"
-        :key="c.name"
+        v-for="(c, i) in rows"
+        :key="c.rankNo"
         class="sr__row"
         :class="{ 'sr__row--alt': i % 2 === 1 }"
         @click="openClan(c.name)"
@@ -190,23 +214,74 @@ function openClan(name: string) {
         <span
           class="sr__no num"
           :class="{ 'sr__no--top': i < 3 }"
-        >{{ i + 1 }}</span>
-        <div class="sr__clantag num">
-          {{ c.tag }}
+        >{{ c.rankNo }}</span>
+        <span
+          v-if="c.clanMark"
+          class="sr__mark"
+        >
+          <img
+            v-for="(src, idx) in c.clanMark.split('|')"
+            :key="idx"
+            :src="src"
+            alt="클랜마크"
+          >
+        </span>
+        <div
+          v-else
+          class="sr__clantag num"
+        >
+          {{ c.name.slice(0, 3) }}
         </div>
         <div class="sr__info">
-          <div class="sr__name-line">
-            <span class="sr__name">{{ c.name }}</span>
-            <span
-              v-if="cat === '공식 클랜'"
-              class="sr__cert"
-            >인증</span>
+          <div class="sr__name">
+            {{ c.name }}
           </div>
           <div class="sr__sub">
-            {{ c.members }}명
+            마스터 {{ c.master }}
+          </div>
+        </div>
+        <span class="sr__val num">{{ c.score }}<span class="sr__unit">점</span></span>
+      </button>
+    </template>
+
+    <!-- 클랜 (일반) — 점수 없음, 마스터 표시 -->
+    <template v-if="isClan">
+      <button
+        v-for="(c, i) in rows"
+        :key="c.rankNo"
+        class="sr__row"
+        :class="{ 'sr__row--alt': i % 2 === 1 }"
+        @click="openClan(c.name)"
+      >
+        <span
+          class="sr__no num"
+          :class="{ 'sr__no--top': i < 3 }"
+        >{{ c.rankNo }}</span>
+        <span
+          v-if="c.clanMark"
+          class="sr__mark"
+        >
+          <img
+            v-for="(src, idx) in c.clanMark.split('|')"
+            :key="idx"
+            :src="src"
+            alt="클랜마크"
+          >
+        </span>
+        <div
+          v-else
+          class="sr__clantag num"
+        >
+          {{ c.name.slice(0, 3) }}
+        </div>
+        <div class="sr__info">
+          <div class="sr__name">
+            {{ c.name }}
+          </div>
+          <div class="sr__sub">
+            마스터 {{ c.master }}
           </div>
         </div>
-        <span class="sr__val num">{{ SA.fmt(c.rp) }}<span class="sr__unit">RP</span></span>
       </button>
     </template>
   </UiPanel>
@@ -268,6 +343,12 @@ function openClan(name: string) {
   background: var(--point);
   color: var(--point-ink);
 }
+.sr__empty {
+  padding: 32px 14px;
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--t3);
+}
 .sr__row {
   display: flex;
   align-items: center;
@@ -295,17 +376,26 @@ function openClan(name: string) {
 .sr__no--top {
   color: var(--point);
 }
-.sr__tier {
+.sr__img {
   width: 28px;
   height: 28px;
-  border-radius: var(--r-xs);
-  display: grid;
-  place-items: center;
-  color: #fff;
-  font-weight: 800;
-  font-size: 0.78125rem;
+  object-fit: contain;
   flex-shrink: 0;
 }
+/* 클랜마크 — 배경(0_)+심볼(1_) 2개 이미지를 겹쳐서 표시 */
+.sr__mark {
+  position: relative;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+}
+.sr__mark img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
 .sr__clantag {
   width: 28px;
   height: 28px;
@@ -322,11 +412,6 @@ function openClan(name: string) {
   flex: 1;
   min-width: 0;
 }
-.sr__name-line {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
 .sr__name {
   font-size: 0.84375rem;
   color: var(--ink);
@@ -334,25 +419,7 @@ function openClan(name: string) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex-shrink: 0;
-  max-width: 60%;
-}
-.sr__tag {
-  font-size: 0.65625rem;
-  color: var(--t3);
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.sr__cert {
-  font-size: 0.5625rem;
-  font-weight: 700;
-  color: var(--point);
-  border: 1px solid var(--point);
-  border-radius: 3px;
-  padding: 0 4px;
-  line-height: 1.5;
+  max-width: 100%;
 }
 .sr__sub {
   font-size: 0.65625rem;
diff --git a/frontend/src/pages/home/SearchRank.vue b/frontend/src/pages/home/SearchRank.vue
index b5ceef7..be3902f 100644
--- a/frontend/src/pages/home/SearchRank.vue
+++ b/frontend/src/pages/home/SearchRank.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 인기 검색 — 24시간 조회수 랭킹 + 추세(▲▼/NEW). sa-home.jsx SearchRank 포팅.
 import { useRouter } from 'vue-router'
-import { SA } from '@/shared/data/sa'
+import { SA } from '@/shared/mock/sa'
 import UiPanel from '@/shared/components/UiPanel.vue'
 
 const router = useRouter()
diff --git a/frontend/src/pages/home/SeasonCard.vue b/frontend/src/pages/home/SeasonCard.vue
index 4c719ab..7caa3d5 100644
--- a/frontend/src/pages/home/SeasonCard.vue
+++ b/frontend/src/pages/home/SeasonCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 시즌 현황 — 진행률 + 시즌 맵(5v5/3v3). sa-home.jsx SeasonCard 포팅.
 import { computed, ref } from 'vue'
-import { SA } from '@/shared/data/sa'
+import { SA } from '@/shared/mock/sa'
 import UiPanel from '@/shared/components/UiPanel.vue'
 
 const s = SA.season
diff --git a/frontend/src/pages/home/StreamLive.vue b/frontend/src/pages/home/StreamLive.vue
index 331e622..e1f931f 100644
--- a/frontend/src/pages/home/StreamLive.vue
+++ b/frontend/src/pages/home/StreamLive.vue
@@ -2,8 +2,8 @@
 // 서든 LIVE — 치지직/숲/유튜브 방송. 플랫폼 필터 + 시청자 합계. sa-home.jsx StreamLive 포팅.
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { SA } from '@/shared/data/sa'
-import type { StreamPlatform } from '@/shared/data/types'
+import { SA } from '@/shared/mock/sa'
+import type { StreamPlatform } from '@/shared/mock/types'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import SegTabs from '@/shared/components/SegTabs.vue'
 import ImageSlot from '@/shared/components/ImageSlot.vue'
@@ -220,4 +220,11 @@ function openStreamer(name: string) {
   color: var(--t3);
   flex-shrink: 0;
 }
+
+/* 반응형 — 좁은 화면: 방송 카드 1열로 전환 */
+@media (max-width: 760px) {
+  .sl__grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/frontend/src/pages/profile/ClanRecords.vue b/frontend/src/pages/profile/ClanRecords.vue
index 97133f7..23664fd 100644
--- a/frontend/src/pages/profile/ClanRecords.vue
+++ b/frontend/src/pages/profile/ClanRecords.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 클랜전 전적 — 소속 클랜별 행, 클릭 시 활동 기간 펼침. sa-profile-sections.jsx ClanRecords 포팅.
 import { computed, ref } from 'vue'
-import type { ClanRecord, Player } from '@/shared/data/types'
+import type { ClanRecord, Player } from '@/shared/mock/types'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import AppIcon from '@/shared/components/AppIcon.vue'
 import WrCell from '@/shared/components/WrCell.vue'
@@ -75,7 +75,9 @@ function recStr(d: ClanRecord) {
                     stroke="var(--t3)"
                     :style="{ transform: open === i ? 'rotate(90deg)' : 'none', transition: 'transform .15s' }"
                   />
+                  <!-- 클랜 태그/이미지 — 넥슨 미제공으로 숨김
                   <span class="cr__tag num">{{ c.tag }}</span>
+                  -->
                   <span class="cr__name">{{ c.clan }}</span>
                   <span
                     v-if="i === 0"
@@ -121,7 +123,10 @@ function recStr(d: ClanRecord) {
                       stroke="var(--t3)"
                     />
                     <span class="cr__period-range num">{{ pd.from }} ~ {{ pd.to }}</span>
-                    <span class="cr__period-months">약 {{ pd.months }}개월</span>
+                    <span
+                      v-if="pd.months > 0"
+                      class="cr__period-months"
+                    >약 {{ pd.months }}개월</span>
                   </div>
                 </div>
               </td>
diff --git a/frontend/src/pages/profile/Companions.vue b/frontend/src/pages/profile/Companions.vue
index 5fee2c0..0aee8be 100644
--- a/frontend/src/pages/profile/Companions.vue
+++ b/frontend/src/pages/profile/Companions.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 // 자주 함께한 유저 — 함께한 전적/승률. sa-profile-sections.jsx Companions 포팅.
 import { useRouter } from 'vue-router'
-import { SA } from '@/shared/data/sa'
-import { wrColor } from '@/shared/utils/stats'
-import type { Player } from '@/shared/data/types'
+import { SA } from '@/shared/mock/sa'
+import type { Player } from '@/shared/mock/types'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import RankBadge from '@/shared/components/RankBadge.vue'
 import AppIcon from '@/shared/components/AppIcon.vue'
@@ -47,10 +46,7 @@ function open(f: Player) {
           함께 {{ f.together.games }}전<span class="cp__mid">·</span>
           <b class="num cp__w">{{ f.together.w }}승</b> <b class="num cp__l">{{ f.together.l }}패</b>
           <span class="cp__mid">·</span>
-          <span
-            class="num cp__wr"
-            :style="{ color: wrColor(togetherWr(f)) }"
-          >승률 {{ togetherWr(f) }}%</span>
+          <span class="num cp__wr">승률 {{ togetherWr(f) }}%</span>
         </div>
       </div>
       <AppIcon
diff --git a/frontend/src/pages/profile/MapRecords.vue b/frontend/src/pages/profile/MapRecords.vue
index 98e45af..0a6779c 100644
--- a/frontend/src/pages/profile/MapRecords.vue
+++ b/frontend/src/pages/profile/MapRecords.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 맵별 전적 — 매치 많은 순. sa-profile-sections.jsx MapRecords 포팅.
 import { computed, ref } from 'vue'
-import type { MapRecord, Player } from '@/shared/data/types'
+import type { MapRecord, Player } from '@/shared/mock/types'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import WrCell from '@/shared/components/WrCell.vue'
 
diff --git a/frontend/src/pages/profile/MatchHistory.vue b/frontend/src/pages/profile/MatchHistory.vue
index 4ccb7ea..53ebc87 100644
--- a/frontend/src/pages/profile/MatchHistory.vue
+++ b/frontend/src/pages/profile/MatchHistory.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 매치 기록 — 모드 필터 + 매치 행 목록. sa-profile-sections.jsx MatchHistory 포팅.
 import { computed, ref, watch } from 'vue'
-import type { Player } from '@/shared/data/types'
+import type { Player } from '@/shared/mock/types'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import MatchRow from './MatchRow.vue'
 
diff --git a/frontend/src/pages/profile/MatchRow.vue b/frontend/src/pages/profile/MatchRow.vue
index ed0b450..652f21e 100644
--- a/frontend/src/pages/profile/MatchRow.vue
+++ b/frontend/src/pages/profile/MatchRow.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 // 매치 1건 행 — 승/패 + 맵/모드 + KDA, 클릭 시 양 팀 상세. sa-profile-sections.jsx MatchRow 포팅.
+// 상세(맵/참가자)는 클릭(더보기) 시 넥슨 match-detail API로 lazy 로드한다.
 import { computed, ref } from 'vue'
-import type { MatchRecord } from '@/shared/data/types'
+import { useSaMatch, type SaParticipant } from '@/composables/useSaMatch'
+import { makeRank } from '@/shared/utils/adapt'
+import type { MatchRecord, RosterPlayer } from '@/shared/mock/types'
 import KdaChip from '@/shared/components/KdaChip.vue'
 import AppIcon from '@/shared/components/AppIcon.vue'
 import TeamTable from './TeamTable.vue'
@@ -12,10 +15,47 @@ interface Props {
 }
 const props = defineProps<Props>()
 
+const { getMatchDetail } = useSaMatch()
 const open = ref(false)
-const pct = computed(() => Math.round((props.m.k / (props.m.k + props.m.d)) * 100))
-const winTeam = computed(() => (props.m.winSide === 'blue' ? props.m.teams.blue : props.m.teams.red))
-const loseTeam = computed(() => (props.m.winSide === 'blue' ? props.m.teams.red : props.m.teams.blue))
+const loading = ref(false)
+const loaded = ref(false)
+const mapName = ref(props.m.map)
+const winTeam = ref<RosterPlayer[]>([])
+const loseTeam = ref<RosterPlayer[]>([])
+
+const pct = computed(() => {
+  const total = props.m.k + props.m.d
+  return total ? Math.round((props.m.k / total) * 100) : 0
+})
+
+// 매치 상세 참가자 → 기존 UI 로스터(RosterPlayer)
+function toRoster(p: SaParticipant): RosterPlayer {
+  return {
+    rank: makeRank(p.seasonGrade),
+    name: p.userName,
+    isOwner: false,
+    k: p.kill,
+    d: p.death,
+    a: p.assist,
+    hs: p.headshot,
+    dmg: p.damage,
+  }
+}
+
+async function toggle() {
+  open.value = !open.value
+  // 처음 펼칠 때만 상세 1회 로드 (matchId 없으면 스킵)
+  if (!open.value || loaded.value || !props.m.matchId) return
+  loading.value = true
+  const detail = await getMatchDetail(props.m.matchId)
+  if (detail) {
+    mapName.value = detail.matchMap || props.m.map
+    winTeam.value = detail.participants.filter((x) => x.matchResult === '1').map(toRoster)
+    loseTeam.value = detail.participants.filter((x) => x.matchResult !== '1').map(toRoster)
+  }
+  loaded.value = true
+  loading.value = false
+}
 </script>
 
 <template>
@@ -27,7 +67,7 @@ const loseTeam = computed(() => (props.m.winSide === 'blue' ? props.m.teams.red
       class="mrow__head"
       :class="{ 'mrow__head--open': open }"
       :style="{ borderLeftColor: m.win ? 'var(--point)' : 'var(--negative)' }"
-      @click="open = !open"
+      @click="toggle"
     >
       <div class="mrow__result">
         <span
@@ -37,7 +77,7 @@ const loseTeam = computed(() => (props.m.winSide === 'blue' ? props.m.teams.red
       </div>
       <div class="mrow__map">
         <div class="mrow__mapname">
-          {{ m.map }}
+          {{ mapName || '—' }}
         </div>
         <div class="mrow__mode">
           {{ m.mode }}
@@ -65,20 +105,28 @@ const loseTeam = computed(() => (props.m.winSide === 'blue' ? props.m.teams.red
       v-if="open"
       class="mrow__detail"
     >
-      <div class="mrow__team">
-        <TeamTable
-          result="승리"
-          color="var(--point)"
-          :players="winTeam"
-        />
-      </div>
-      <div class="mrow__team">
-        <TeamTable
-          result="패배"
-          color="var(--negative)"
-          :players="loseTeam"
-        />
+      <div
+        v-if="loading"
+        class="mrow__loading"
+      >
+        상세 불러오는 중...
       </div>
+      <template v-else>
+        <div class="mrow__team">
+          <TeamTable
+            result="승리"
+            color="var(--point)"
+            :players="winTeam"
+          />
+        </div>
+        <div class="mrow__team">
+          <TeamTable
+            result="패배"
+            color="var(--negative)"
+            :players="loseTeam"
+          />
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -161,4 +209,11 @@ const loseTeam = computed(() => (props.m.winSide === 'blue' ? props.m.teams.red
   overflow: hidden;
   background: var(--surf);
 }
+.mrow__loading {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 14px 0;
+  font-size: 0.78125rem;
+  color: var(--t3);
+}
 </style>
diff --git a/frontend/src/pages/profile/ModeRecords.vue b/frontend/src/pages/profile/ModeRecords.vue
index b52be89..b3924d5 100644
--- a/frontend/src/pages/profile/ModeRecords.vue
+++ b/frontend/src/pages/profile/ModeRecords.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // 모드별 전적. sa-profile-sections.jsx ModeRecords 포팅.
-import type { ModeRecord, Player } from '@/shared/data/types'
+import type { ModeRecord, Player } from '@/shared/mock/types'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import WrCell from '@/shared/components/WrCell.vue'
 
diff --git a/frontend/src/pages/profile/ProfileSummary.vue b/frontend/src/pages/profile/ProfileSummary.vue
index c8e8a98..5ee50b6 100644
--- a/frontend/src/pages/profile/ProfileSummary.vue
+++ b/frontend/src/pages/profile/ProfileSummary.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 // 프로필 요약 헤더 — 계급/이름/액션 + 승률·킬뎃 링 + 9종 지표. sa-profile-sections.jsx ProfileSummary 포팅.
 import { computed, ref } from 'vue'
-import { SA } from '@/shared/data/sa'
-import { wrColor } from '@/shared/utils/stats'
-import type { Player } from '@/shared/data/types'
+import { SA } from '@/shared/mock/sa'
+import type { Player } from '@/shared/mock/types'
 import SegTabs from '@/shared/components/SegTabs.vue'
 import RankBadge from '@/shared/components/RankBadge.vue'
 import WinRing from '@/shared/components/WinRing.vue'
@@ -19,14 +18,14 @@ const selRank = computed(() => (scope.value === '통합' ? props.p.rankTotal : p
 const selRankNo = computed(() => (scope.value === '통합' ? props.p.rankNoTotal : props.p.rankNoSeason))
 
 const stats = computed(() => [
-  { lab: '승률', val: props.p.wr + '%', col: wrColor(props.p.wr) },
+  { lab: '승률', val: props.p.wr + '%', col: 'var(--ink)' },
   { lab: '킬뎃', val: SA.kdPct(props.p.kda) + '%', col: 'var(--point)' },
   { lab: '헤드샷', val: props.p.hs + '%', col: 'var(--ink)' },
   { lab: '라이플', val: props.p.rifle + '%', col: 'var(--ink)' },
   { lab: '스나', val: props.p.sniper + '%', col: 'var(--ink)' },
   { lab: '특수', val: props.p.special + '%', col: 'var(--ink)' },
   { lab: '랭킹', val: SA.fmt(selRankNo.value) + '위', col: 'var(--point)' },
-  { lab: '매너', val: props.p.manner + '점', col: 'var(--ink)' },
+  { lab: '매너', val: props.p.mannerGrade ?? '-', col: 'var(--ink)' },
   { lab: '접속률', val: props.p.connRate + '%', col: 'var(--ink)' },
 ])
 </script>
diff --git a/frontend/src/pages/profile/RankedSeasons.vue b/frontend/src/pages/profile/RankedSeasons.vue
index d020386..5b35894 100644
--- a/frontend/src/pages/profile/RankedSeasons.vue
+++ b/frontend/src/pages/profile/RankedSeasons.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 // 시즌별 랭크전 전적 — 시즌 선택(통산 집계 포함) · 솔로/파티. sa-profile-sections.jsx RankedSeasons 포팅.
 import { computed, ref } from 'vue'
-import { SA } from '@/shared/data/sa'
-import type { Player, RankedRecord } from '@/shared/data/types'
+import { SA } from '@/shared/mock/sa'
+import type { Player, RankedRecord } from '@/shared/mock/types'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import WrCell from '@/shared/components/WrCell.vue'
 import TierChip from '@/shared/components/TierChip.vue'
@@ -120,6 +120,7 @@ function recStr(d: RankedRecord) {
                 v-else
                 :name="d.tier"
                 :div="d.div"
+                :image="d.tierImage"
               />
             </td>
             <td class="ta-r td-num">
@@ -127,7 +128,7 @@ function recStr(d: RankedRecord) {
                 v-if="isAll"
                 class="rs__dash"
               >—</span>
-              <span v-else>{{ SA.fmt(d.points) }}<span class="rs__unit"> 점</span></span>
+              <span v-else>{{ SA.fmt(d.points) }}<span class="rs__unit"> RP</span></span>
             </td>
             <td class="ta-r td-num">
               {{ d.matches }}
diff --git a/frontend/src/pages/profile/RecentTrend.vue b/frontend/src/pages/profile/RecentTrend.vue
index 4e7582c..1f1fc07 100644
--- a/frontend/src/pages/profile/RecentTrend.vue
+++ b/frontend/src/pages/profile/RecentTrend.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 최근 전적 및 동향 — 최근 승률/평균 킬뎃 링 + 최근 경기 흐름. sa-profile-sections.jsx RecentTrend 포팅.
 import { computed } from 'vue'
-import type { Player } from '@/shared/data/types'
+import type { Player } from '@/shared/mock/types'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import WinRing from '@/shared/components/WinRing.vue'
 
@@ -56,9 +56,6 @@ const flow = computed(() => recent.value.slice().reverse())
         {{ m.win ? '승' : '패' }}
       </span>
     </div>
-    <div class="rt__caption">
-      ← 최신 경기 흐름
-    </div>
   </UiPanel>
 </template>
 
@@ -102,9 +99,4 @@ const flow = computed(() => recent.value.slice().reverse())
 .rt__cell--l {
   background: rgba(229, 72, 77, 0.9);
 }
-.rt__caption {
-  font-size: 0.65625rem;
-  color: var(--t3);
-  margin-top: 7px;
-}
 </style>
diff --git a/frontend/src/pages/profile/TeamTable.vue b/frontend/src/pages/profile/TeamTable.vue
index bd8c7a5..4df1da0 100644
--- a/frontend/src/pages/profile/TeamTable.vue
+++ b/frontend/src/pages/profile/TeamTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 매치 상세 팀 테이블 — 승/패 팀 로스터. sa-profile-sections.jsx TeamTable 포팅.
-import { SA } from '@/shared/data/sa'
-import type { RosterPlayer } from '@/shared/data/types'
+import { SA } from '@/shared/mock/sa'
+import type { RosterPlayer } from '@/shared/mock/types'
 import RankBadge from '@/shared/components/RankBadge.vue'
 
 interface Props {
diff --git a/frontend/src/pages/profile/TrendChart.vue b/frontend/src/pages/profile/TrendChart.vue
index 87728d5..7e362db 100644
--- a/frontend/src/pages/profile/TrendChart.vue
+++ b/frontend/src/pages/profile/TrendChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 최근 동향 추세 그래프 — 승률/킬뎃 시계열 (일별/주별). sa-profile-sections.jsx TrendChart 포팅.
 import { computed, ref } from 'vue'
-import type { Player, TrendPoint } from '@/shared/data/types'
+import type { Player, TrendPoint } from '@/shared/mock/types'
 import UiPanel from '@/shared/components/UiPanel.vue'
 import SegTabs from '@/shared/components/SegTabs.vue'
 
diff --git a/frontend/src/shared/components/ClanEmblem.vue b/frontend/src/shared/components/ClanEmblem.vue
index e660cb7..0012e62 100644
--- a/frontend/src/shared/components/ClanEmblem.vue
+++ b/frontend/src/shared/components/ClanEmblem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 클랜 엠블럼 렌더러 — 도형(방패/원/육각/마름모) + 심볼 조합. sa-clan-data.jsx Emblem 포팅.
 import { computed } from 'vue'
-import { EMBLEM_SHAPES, shade, type ClanEmblem } from '@/shared/data/clan'
+import { EMBLEM_SHAPES, shade, type ClanEmblem } from '@/shared/mock/clan'
 
 interface Props {
   cfg?: ClanEmblem
diff --git a/frontend/src/shared/components/RankBadge.vue b/frontend/src/shared/components/RankBadge.vue
index a6b3ea7..43cf44b 100644
--- a/frontend/src/shared/components/RankBadge.vue
+++ b/frontend/src/shared/components/RankBadge.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 계급(랭크) 뱃지 — 방패 + 계급명 + pip(계급 표식). sa-shared.jsx RankBadge 포팅.
 import { computed } from 'vue'
-import type { Rank } from '@/shared/data/types'
+import type { Rank } from '@/shared/mock/types'
 
 interface Props {
   rank: Rank | null
@@ -45,7 +45,17 @@ const pips = computed<Pip[]>(() => {
     class="rb"
     :style="{ gap: showName ? '8px' : '0' }"
   >
+    <!-- 넥슨 메타 계급 이미지가 있으면 이미지로 표시 -->
+    <img
+      v-if="rank.image"
+      :src="rank.image"
+      :width="s"
+      :height="s"
+      :alt="rank.name"
+      class="rb__img"
+    >
     <svg
+      v-else
       :width="s"
       :height="s"
       :viewBox="`0 0 ${s} ${s}`"
@@ -140,6 +150,10 @@ const pips = computed<Pip[]>(() => {
   display: flex;
   align-items: center;
 }
+.rb__img {
+  object-fit: contain;
+  flex-shrink: 0;
+}
 .rb-name {
   line-height: 1.1;
 }
diff --git a/frontend/src/shared/components/RecentChips.vue b/frontend/src/shared/components/RecentChips.vue
index 7d701a6..0fbccc1 100644
--- a/frontend/src/shared/components/RecentChips.vue
+++ b/frontend/src/shared/components/RecentChips.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 최근 검색 칩 — 클릭 시 프로필로 이동. sa-shared.jsx RecentChips 포팅.
 import { useRouter } from 'vue-router'
-import { SA } from '@/shared/data/sa'
+import { SA } from '@/shared/mock/sa'
 import AppIcon from './AppIcon.vue'
 
 interface Props {
diff --git a/frontend/src/shared/components/SearchBar.vue b/frontend/src/shared/components/SearchBar.vue
index ef974c8..4eb3028 100644
--- a/frontend/src/shared/components/SearchBar.vue
+++ b/frontend/src/shared/components/SearchBar.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-// 검색바 — 라이브 추천 드롭다운(최근검색/매칭). 선택 시 프로필 라우트로 이동.
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+// 검색바 — 닉네임 제출 시 백엔드에서 OUID를 조회하고 프로필 라우트로 이동.
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { SA } from '@/shared/data/sa'
-import type { Player } from '@/shared/data/types'
+import { useSaUser } from '@/composables/useSaUser'
 import AppIcon from './AppIcon.vue'
-import RankBadge from './RankBadge.vue'
 
 interface Props {
   big?: boolean
@@ -15,52 +13,31 @@ withDefaults(defineProps<Props>(), {
   big: false,
   placeholder: '닉네임으로 전적을 검색하세요',
 })
-const emit = defineEmits<{ (e: 'pick', player: Player): void }>()
 
 const router = useRouter()
+const { searchOuid, loading } = useSaUser()
 const q = ref('')
-const open = ref(false)
-const root = ref<HTMLElement | null>(null)
 
-const matches = computed<Player[]>(() => {
-  const term = q.value.trim().toLowerCase()
-  if (!term) return []
-  return SA.allPlayers.filter((p) => p.name.toLowerCase().includes(term)).slice(0, 6)
-})
-const recents = computed<Player[]>(() =>
-  SA.recentSearches
-    .map((n) => SA.allPlayers.find((p) => p.name === n))
-    .filter((p): p is Player => Boolean(p)),
-)
-const list = computed(() => (q.value.trim() ? matches.value : recents.value))
+// 닉네임 검색 제출 — 백엔드 조회 후 프로필 페이지로 이동
+async function submit() {
+  const name = q.value.trim()
+  // 빈 입력이거나 검색 중이면 무시
+  if (!name || loading.value) return
 
-function pick(p: Player) {
-  emit('pick', p)
+  const res = await searchOuid(name)
+  // 미존재 등으로 결과가 없으면 아무것도 하지 않음(에러 알림은 인터셉터가 처리)
+  if (!res) return
+
+  router.push({ name: 'profile', params: { name: res.userName } })
   q.value = ''
-  open.value = false
-  router.push({ name: 'profile', params: { name: p.name } })
 }
-function submit() {
-  const found = matches.value[0] || SA.allPlayers.find((p) => p.name === q.value.trim())
-  if (found) pick(found)
-  else if (q.value.trim()) {
-    const fallback = SA.allPlayers[1] // 데모: 미존재 시 임의 유저
-    if (fallback) pick(fallback)
-  }
-}
-
-function onDocPointer(e: PointerEvent) {
-  if (root.value && !root.value.contains(e.target as Node)) open.value = false
-}
-onMounted(() => document.addEventListener('pointerdown', onDocPointer, true))
-onBeforeUnmount(() => document.removeEventListener('pointerdown', onDocPointer, true))
 </script>
 
 <template>
-  <div
-    ref="root"
+  <form
     class="sb"
-    :class="{ 'sb--big': big, 'sb--open': open }"
+    :class="{ 'sb--big': big }"
+    @submit.prevent="submit"
   >
     <div class="sb__field">
       <div class="sb__icon">
@@ -74,61 +51,16 @@ onBeforeUnmount(() => document.removeEventListener('pointerdown', onDocPointer,
         v-model="q"
         class="sb__input"
         :placeholder="placeholder"
-        @focus="open = true"
-        @input="open = true"
-        @keydown.enter="submit"
       >
       <button
+        type="submit"
         class="sb__btn num"
-        @click="submit"
+        :disabled="loading"
       >
         검색
       </button>
     </div>
-
-    <div
-      v-if="open"
-      class="sb__pop"
-    >
-      <div class="sb__pophead">
-        {{ q.trim() ? `"${q}" 검색 결과` : '최근 검색한 유저' }}
-      </div>
-      <button
-        v-for="p in list"
-        :key="p.name"
-        class="sb__row"
-        @click="pick(p)"
-      >
-        <RankBadge
-          :rank="p.rank"
-          :size="32"
-        />
-        <div class="sb__info">
-          <div class="sb__line">
-            <span class="sb__nm">{{ p.name }}</span>
-            <span
-              v-if="p.clan"
-              class="sb__clan"
-            >{{ p.clan }}</span>
-          </div>
-          <div class="sb__sub">
-            {{ p.rank.name }} · Lv.{{ p.level }} · 승률 {{ p.wr }}%
-          </div>
-        </div>
-        <AppIcon
-          name="chevR"
-          :size="15"
-          stroke="var(--t3)"
-        />
-      </button>
-      <div
-        v-if="q.trim() && matches.length === 0"
-        class="sb__empty"
-      >
-        일치하는 유저가 없어요. 닉네임을 확인해 주세요.
-      </div>
-    </div>
-  </div>
+  </form>
 </template>
 
 <style scoped>
@@ -139,9 +71,9 @@ onBeforeUnmount(() => document.removeEventListener('pointerdown', onDocPointer,
 .sb__field {
   display: flex;
   align-items: center;
-  height: 44px;
+  height: 2.75rem;
   background: var(--surf);
-  border: 1.5px solid var(--line2);
+  border: 0.09375rem solid var(--line2);
   border-radius: var(--r-xs);
   box-shadow: var(--sh-card);
   transition:
@@ -150,21 +82,22 @@ onBeforeUnmount(() => document.removeEventListener('pointerdown', onDocPointer,
   overflow: hidden;
 }
 .sb--big .sb__field {
-  height: 58px;
+  height: 3.625rem;
 }
-.sb--open .sb__field {
+/* 포커스 시 강조 — 기존 sb--open 효과를 입력 포커스로 대체 */
+.sb__field:focus-within {
   border-color: var(--point);
   box-shadow: var(--sh-pop);
 }
 .sb__icon {
-  padding-left: 13px;
+  padding-left: 0.8125rem;
   color: var(--t3);
   display: flex;
 }
 .sb--big .sb__icon {
-  padding-left: 18px;
+  padding-left: 1.125rem;
 }
-.sb--open .sb__icon {
+.sb__field:focus-within .sb__icon {
   color: var(--point);
 }
 .sb__input {
@@ -175,13 +108,13 @@ onBeforeUnmount(() => document.removeEventListener('pointerdown', onDocPointer,
   color: #15171c;
   font-family: var(--font-body);
   font-size: 0.90625rem;
-  padding: 0 11px;
+  padding: 0 0.6875rem;
   font-weight: 500;
   min-width: 0;
 }
 .sb--big .sb__input {
   font-size: 1.0625rem;
-  padding: 0 16px;
+  padding: 0 1rem;
 }
 .sb__btn {
   height: 100%;
@@ -191,84 +124,15 @@ onBeforeUnmount(() => document.removeEventListener('pointerdown', onDocPointer,
   background: var(--point);
   font-weight: 700;
   font-size: 0.8125rem;
-  padding: 0 17px;
+  padding: 0 1.0625rem;
   letter-spacing: 0.5px;
 }
+.sb__btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
 .sb--big .sb__btn {
   font-size: 0.9375rem;
-  padding: 0 26px;
-}
-.sb__pop {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  right: 0;
-  background: var(--surf);
-  border: 1px solid var(--line);
-  border-radius: var(--r-xs);
-  box-shadow: 0 16px 40px rgba(20, 22, 28, 0.12);
-  padding: 7px;
-  z-index: 40;
-  overflow: hidden;
-  text-align: left;
-}
-.sb__pophead {
-  font-size: 0.6875rem;
-  font-weight: 700;
-  color: var(--t3);
-  padding: 6px 10px 8px;
-  letter-spacing: 0.3px;
-}
-.sb__row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  border: none;
-  background: transparent;
-  padding: 8px 10px;
-  border-radius: var(--r-xs);
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.12s;
-}
-.sb__row:hover {
-  background: #f5f6f8;
-}
-.sb__info {
-  flex: 1;
-  min-width: 0;
-}
-.sb__line {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-}
-.sb__nm {
-  color: #15171c;
-  font-weight: 600;
-  font-size: 0.875rem;
-  flex-shrink: 0;
-  max-width: 62%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.sb__clan {
-  font-size: 0.6875rem;
-  color: var(--t2);
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.sb__sub {
-  font-size: 0.71875rem;
-  color: var(--t3);
-}
-.sb__empty {
-  padding: 14px 10px;
-  color: var(--t3);
-  font-size: 0.8125rem;
+  padding: 0 1.625rem;
 }
 </style>
diff --git a/frontend/src/shared/components/TierChip.vue b/frontend/src/shared/components/TierChip.vue
index dbc6ff1..4f71a2d 100644
--- a/frontend/src/shared/components/TierChip.vue
+++ b/frontend/src/shared/components/TierChip.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-// 티어 칩 — 마름모 색 표식 + 티어명(+디비전). sa-profile-sections.jsx TierChipS 포팅.
+// 티어 칩 — 티어 이미지(넥슨 메타) 또는 마름모 색 표식 + 티어명(+디비전). sa-profile-sections.jsx TierChipS 포팅.
 import { computed } from 'vue'
-import { SA } from '@/shared/data/sa'
+import { SA } from '@/shared/mock/sa'
 
 interface Props {
   name: string
   div?: number | null
+  // 넥슨 티어 메타 이미지 URL (있으면 마름모 대신 이미지로 표시)
+  image?: string
 }
-const props = withDefaults(defineProps<Props>(), { div: null })
+const props = withDefaults(defineProps<Props>(), { div: null, image: '' })
 
 const col = computed(() => {
   const t = (SA.tiers || []).find((x) => x.name === props.name)
@@ -17,7 +19,14 @@ const col = computed(() => {
 
 <template>
   <span class="tc">
+    <img
+      v-if="image"
+      :src="image"
+      :alt="name"
+      class="tc__img"
+    >
     <span
+      v-else
       class="tc__mark"
       :style="{ background: col }"
     />
@@ -32,6 +41,12 @@ const col = computed(() => {
   gap: 7px;
   white-space: nowrap;
 }
+.tc__img {
+  width: 1.375rem;
+  height: 1.375rem;
+  object-fit: contain;
+  flex-shrink: 0;
+}
 .tc__mark {
   width: 9px;
   height: 9px;
diff --git a/frontend/src/shared/components/WinRing.vue b/frontend/src/shared/components/WinRing.vue
index 1b43cea..5f75102 100644
--- a/frontend/src/shared/components/WinRing.vue
+++ b/frontend/src/shared/components/WinRing.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 // 승률 링 — 도넛 게이지 + 중앙 수치. sa-shared.jsx WinRing 포팅.
 import { computed } from 'vue'
-import { wrColor } from '@/shared/utils/stats'
 
 interface Props {
   wr: number
@@ -14,12 +13,12 @@ const props = withDefaults(defineProps<Props>(), {
   size: 64,
   sw: 6,
   label: '승률',
-  color: '', // 빈 값이면 승률 기반 색상 자동 적용
+  color: '', // 빈 값이면 포인트색 사용 (승률 낮을 때 빨강 표시하지 않음)
 })
 
 const radius = computed(() => (props.size - props.sw) / 2)
 const circ = computed(() => 2 * Math.PI * radius.value)
-const col = computed(() => props.color || wrColor(props.wr))
+const col = computed(() => props.color || 'var(--point)')
 const dashOffset = computed(() => circ.value * (1 - props.wr / 100))
 </script>
 
diff --git a/frontend/src/shared/components/WrCell.vue b/frontend/src/shared/components/WrCell.vue
index 2ae2bc4..2878709 100644
--- a/frontend/src/shared/components/WrCell.vue
+++ b/frontend/src/shared/components/WrCell.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 승률 셀 — 가로 막대 + 퍼센트. 표 안에서 승률 표현. sa-profile-sections.jsx WrCell 포팅.
+// 승률 색상 분기(높음 초록/낮음 빨강)는 제거하고 중립색으로 표시한다.
 import { computed } from 'vue'
-import { wrColor } from '@/shared/utils/stats'
 
 interface Props {
   wr: number
@@ -10,7 +10,6 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), { width: 46 })
 
 const fill = computed(() => Math.max(0.04, Math.min(1, (props.wr - 35) / (80 - 35))))
-const col = computed(() => wrColor(props.wr))
 </script>
 
 <template>
@@ -21,13 +20,10 @@ const col = computed(() => wrColor(props.wr))
     >
       <span
         class="wrc__fill"
-        :style="{ width: fill * 100 + '%', background: col }"
+        :style="{ width: fill * 100 + '%' }"
       />
     </span>
-    <span
-      class="wrc__pct num"
-      :style="{ color: col }"
-    >{{ wr }}%</span>
+    <span class="wrc__pct num">{{ wr }}%</span>
   </div>
 </template>
 
@@ -49,10 +45,12 @@ const col = computed(() => wrColor(props.wr))
 .wrc__fill {
   display: block;
   height: 100%;
+  background: var(--point);
 }
 .wrc__pct {
   font-weight: 700;
   min-width: 36px;
   text-align: right;
+  color: var(--ink);
 }
 </style>
diff --git a/frontend/src/shared/components/layout/AppFooter.vue b/frontend/src/shared/components/layout/AppFooter.vue
index 7a20502..99265a0 100644
--- a/frontend/src/shared/components/layout/AppFooter.vue
+++ b/frontend/src/shared/components/layout/AppFooter.vue
@@ -56,4 +56,17 @@ const links = ['이용약관', '개인정보처리방침', '공지사항', '문
   color: var(--t3);
   line-height: 1.7;
 }
+
+/* 반응형 — 좁은 화면(<600px)에서 세로 정렬, 카피라이트 좌측 정렬 (원본 .sg-footer @600) */
+@media (max-width: 600px) {
+  .footer__inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 14px;
+  }
+  .footer__copy {
+    margin-left: 0;
+    text-align: left;
+  }
+}
 </style>
diff --git a/frontend/src/shared/components/layout/AppNav.vue b/frontend/src/shared/components/layout/AppNav.vue
index 5016108..d62e037 100644
--- a/frontend/src/shared/components/layout/AppNav.vue
+++ b/frontend/src/shared/components/layout/AppNav.vue
@@ -3,10 +3,14 @@
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import AppLogo from '@/shared/components/AppLogo.vue'
+import { useBreakpoint } from '@/composables/useBreakpoint'
 
 const route = useRoute()
 const router = useRouter()
 
+// 반응형 — 모바일(<760px)에서 로고 크기 축소(22→19). CSS로 처리 불가한 prop 분기.
+const { mobile } = useBreakpoint()
+
 interface NavItem {
   label: string
   to: string
@@ -38,7 +42,7 @@ function go(to: string) {
         to="/"
         class="nav__logo"
       >
-        <AppLogo :size="22" />
+        <AppLogo :size="mobile ? 19 : 22" />
       </RouterLink>
       <nav class="nav__menu">
         <button
@@ -99,4 +103,23 @@ function go(to: string) {
   color: var(--point);
   border-bottom-color: var(--point);
 }
+
+/* 반응형 — 모바일(<760px)에서 nav 간격/항목 축소 및 가로 스크롤 허용 (로고 크기는 prop으로 분기) */
+@media (max-width: 760px) {
+  .nav__logo {
+    flex-shrink: 0;
+  }
+  .nav__menu {
+    margin-left: 12px;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-x: auto;
+  }
+  .nav__item {
+    padding: 0 11px;
+    font-size: 0.875rem;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+}
 </style>
diff --git a/frontend/src/shared/components/layout/TopBar.vue b/frontend/src/shared/components/layout/TopBar.vue
index 9d21a73..2a4a3e5 100644
--- a/frontend/src/shared/components/layout/TopBar.vue
+++ b/frontend/src/shared/components/layout/TopBar.vue
@@ -61,4 +61,17 @@ const ui = useUiStore()
 .topbar__link:hover {
   color: #fff;
 }
+
+/* 반응형 — 모바일(<760px)에서 링크 폰트·구분선 간격 축소 (원본 로그인 버튼 마진/폰트 축소 대응) */
+@media (max-width: 760px) {
+  .topbar__inner {
+    padding: 0 12px;
+  }
+  .topbar__sep {
+    margin: 0 8px;
+  }
+  .topbar__link {
+    font-size: 0.6875rem;
+  }
+}
 </style>
diff --git a/frontend/src/shared/mock/clan.ts b/frontend/src/shared/mock/clan.ts
new file mode 100644
index 0000000..b4acc6e
--- /dev/null
+++ b/frontend/src/shared/mock/clan.ts
@@ -0,0 +1,382 @@
+// 클랜/모집 도메인 mock 데이터 및 유틸 (엠블럼 도형, 색 보정, 클랜 조회, 모집 생성)
+import type { Rank } from './types'
+
+// ─────────────────────────────────────────────────────────────
+// 엠블럼
+// ─────────────────────────────────────────────────────────────
+/** 엠블럼 설정 — ClanEmblem.vue가 소비 (모든 필드 optional 허용) */
+export interface ClanEmblem {
+  /** 도형 — EMBLEM_SHAPES 키 또는 'circle'(별도 렌더) */
+  shape: string
+  /** 배경 기준 색 (HEX) */
+  bg: string
+  /** 심볼 종류 */
+  symbol: string
+  /** 심볼 색 */
+  symbolColor: string
+}
+
+/** 엠블럼 도형 path(d) 맵 — viewBox 0~100. 'circle'은 컴포넌트가 별도 처리하므로 제외 */
+export const EMBLEM_SHAPES: Record<string, string> = {
+  shield: 'M50 8 L86 22 V52 C86 74 70 86 50 94 C30 86 14 74 14 52 V22 Z',
+  hexagon: 'M50 6 L88 28 V72 L50 94 L12 72 V28 Z',
+  diamond: 'M50 6 L92 50 L50 94 L8 50 Z',
+  pentagon: 'M50 6 L92 38 L76 90 H24 L8 38 Z',
+}
+
+/** HEX 색 밝기 보정 — amount 양수면 밝게, 음수면 어둡게 */
+export function shade(hex: string, amount: number): string {
+  const h = hex.replace('#', '')
+  const full = h.length === 3 ? h.split('').map((c) => c + c).join('') : h
+  const num = parseInt(full, 16)
+  const clamp = (v: number) => Math.max(0, Math.min(255, v))
+  const r = clamp((num >> 16) + amount)
+  const g = clamp(((num >> 8) & 0xff) + amount)
+  const b = clamp((num & 0xff) + amount)
+  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
+}
+
+// ─────────────────────────────────────────────────────────────
+// 클랜 타입
+// ─────────────────────────────────────────────────────────────
+/** 요일별 매치 활동량 — keyof로 카테고리 순회하므로 number 4필드만 유지 */
+export interface ClanActivityDay {
+  clanWar: number
+  clanRanked: number
+  soloRanked: number
+  partyRanked: number
+}
+
+/** 클랜 공지 1건 */
+export interface ClanNoticeItem {
+  title: string
+  author: string
+  time: string
+  /** 상단 고정 여부 */
+  pin: boolean
+}
+
+/** 클랜 피드 1건 */
+export interface ClanFeedItem {
+  author: string
+  time: string
+  text: string
+  likes: number
+  role?: string
+}
+
+/** 방명록 답글 */
+export interface ClanGuestReply {
+  author: string
+  text: string
+  time: string
+}
+
+/** 방명록 1건 */
+export interface ClanGuestItem {
+  author: string
+  text: string
+  time: string
+  replies: ClanGuestReply[]
+}
+
+/** 주간 일정 1건 (요일 7개 고정) */
+export interface ClanScheduleItem {
+  /** 요일 단일 글자 (월~일) */
+  day: string
+  time: string
+  title: string
+  /** 활성 여부 */
+  on: boolean
+}
+
+/** 클랜원 1명 */
+export interface ClanMember {
+  /** 직책 — '클랜장' | '운영진' | '정예' | '일반' */
+  role: string
+  name: string
+  /** 계급 (없으면 미표기) */
+  rank?: Rank
+  /** 기여도 */
+  contrib: number
+}
+
+/** 클랜 종합 데이터 */
+export interface Clan {
+  name: string
+  tag?: string
+  /** 내 클랜 여부 (작성/등록 권한 분기) */
+  isMine: boolean
+  slogan: string
+  intro: string
+  /** 클랜 랭킹 */
+  rank: number
+  totalMembers: number
+  memberMax: number
+  /** 창설일 */
+  founded: string
+  /** 누적 경험치 */
+  expTotal: number
+  /** 이번 주 경험치 */
+  expWeek: number
+  emblem: ClanEmblem
+  /** 요일별 접속률(%) 길이 7 (월~일) */
+  attendance: number[]
+  /** 요일별 활동 길이 7 (월~일) */
+  activity: ClanActivityDay[]
+  notices: ClanNoticeItem[]
+  feed: ClanFeedItem[]
+  guestbook: ClanGuestItem[]
+  /** 주간 일정 (월~일 7개) */
+  schedule: ClanScheduleItem[]
+  members: ClanMember[]
+}
+
+// ─────────────────────────────────────────────────────────────
+// 모집 타입
+// ─────────────────────────────────────────────────────────────
+/** 가입 조건 */
+export interface RecruitConditions {
+  /** 최소 연령 (제한 없으면 null) */
+  ageMin: number | null
+  /** 최대 연령 (제한 없으면 null) */
+  ageMax: number | null
+  /** 보이스 필수 */
+  voice: boolean
+  /** 닉네임 변경 필요 */
+  nickChange: boolean
+  /** 이중클랜/부계 금지 */
+  noDualClan: boolean
+  /** 지인 동반 가입 가능 */
+  friendJoin: boolean
+}
+
+/** 문의 채널 */
+export interface RecruitContact {
+  type: '디스코드' | '오픈카톡'
+  label: string
+}
+
+/** 모집 공고 1건 */
+export interface Recruit {
+  name: string
+  emblem: ClanEmblem
+  /** 모집 유형 (RECRUIT_TYPES 부분집합) */
+  recruitTypes: string[]
+  intro: string
+  /** 클랜 랭킹 */
+  rank: number
+  /** 주간 승률(%) */
+  weeklyWr: number
+  record: { matches: number; w: number; l: number }
+  /** 현재 인원 */
+  cur: number
+  /** 정원 */
+  max: number
+  /** 남은 자리 */
+  openings: number
+  /** 인기 점수 (정렬용) */
+  hot: number
+  /** 작성 경과(분) */
+  createdAgo: number
+  conditions: RecruitConditions
+  contacts: RecruitContact[]
+}
+
+/** 모집 유형 목록 ('전체'는 미포함 — 사용처에서 앞에 붙임) */
+export const RECRUIT_TYPES = ['클랜전', '랭크전', '친목', '대회준비', '초보환영', '고인물'] as const
+
+// ─────────────────────────────────────────────────────────────
+// 결정론적 생성 유틸
+// ─────────────────────────────────────────────────────────────
+function hashSeed(str: string): number {
+  let h = 1779033703 ^ str.length
+  for (let i = 0; i < str.length; i++) {
+    h = Math.imul(h ^ str.charCodeAt(i), 3432918353)
+    h = (h << 13) | (h >>> 19)
+  }
+  return h >>> 0
+}
+function rng(seed: number): () => number {
+  let a = seed
+  return () => {
+    a |= 0
+    a = (a + 0x6d2b79f5) | 0
+    let t = Math.imul(a ^ (a >>> 15), 1 | a)
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
+}
+function ri(r: () => number, min: number, max: number): number {
+  return Math.floor(r() * (max - min + 1)) + min
+}
+function pick<T>(r: () => number, arr: readonly T[]): T {
+  return arr[Math.floor(r() * arr.length)] as T
+}
+
+const DAYS = ['월', '화', '수', '목', '금', '토', '일']
+const EMBLEM_BGS = ['#48515f', '#7a3b3b', '#2f5d7a', '#3b6a3f', '#6a4a8a', '#8a6a2a', '#2a6a6a']
+const EMBLEM_SHAPE_KEYS = ['shield', 'hexagon', 'diamond', 'pentagon', 'circle']
+const EMBLEM_SYMBOLS = ['crosshair', 'star', 'skull', 'wolf', 'sword', 'crown', 'flame', 'bolt', 'shieldcheck', 'anchor']
+const NICKS = ['심해', '강철늑대', '백발백중', '저격수K', '그림자', '불꽃', '레이븐', '겨울', '에이스', '광속', '폭풍', '제로']
+const CLANS = ['불곰부대', 'NOXIA', '백호단', '서리늑대', '검은방패', 'OVERDRIVE', '한울', '레이지', '나이트폴', '청룡']
+
+const RANK_PRESETS: Rank[] = [
+  { name: '병장', color: '#4f86f7', pips: 4, shape: 'bar', group: '훈련병' },
+  { name: '상사', color: '#3aa657', pips: 3, shape: 'chev', group: '부사관' },
+  { name: '대위', color: '#e8762a', pips: 3, shape: 'dia', group: '위관' },
+  { name: '대령', color: '#a8369c', pips: 3, shape: 'flower', group: '영관' },
+  { name: '준장', color: '#f0c14b', pips: 1, shape: 'star', group: '장성' },
+]
+
+function makeEmblem(r: () => number): ClanEmblem {
+  return {
+    shape: pick(r, EMBLEM_SHAPE_KEYS),
+    bg: pick(r, EMBLEM_BGS),
+    symbol: pick(r, EMBLEM_SYMBOLS),
+    symbolColor: '#ffffff',
+  }
+}
+
+// ─────────────────────────────────────────────────────────────
+// 클랜 조회
+// ─────────────────────────────────────────────────────────────
+/** 클랜명으로 클랜 데이터 조회 (데모: 존재하지 않아도 생성 반환) */
+export function ClanDB(name: string): Clan {
+  const r = rng(hashSeed('clan-' + name))
+  const isMine = name === '불곰부대'
+
+  const members: ClanMember[] = [
+    { role: '클랜장', name: pick(r, NICKS), rank: pick(r, RANK_PRESETS), contrib: ri(r, 40000, 90000) },
+    ...Array.from({ length: ri(r, 2, 4) }, () => ({
+      role: '운영진',
+      name: pick(r, NICKS) + ri(r, 1, 99),
+      rank: pick(r, RANK_PRESETS),
+      contrib: ri(r, 20000, 50000),
+    })),
+    ...Array.from({ length: ri(r, 4, 8) }, () => ({
+      role: '정예',
+      name: pick(r, NICKS) + ri(r, 1, 99),
+      rank: pick(r, RANK_PRESETS),
+      contrib: ri(r, 8000, 24000),
+    })),
+    ...Array.from({ length: ri(r, 6, 12) }, () => ({
+      role: '일반',
+      name: pick(r, NICKS) + ri(r, 1, 99),
+      contrib: ri(r, 500, 8000),
+    })),
+  ]
+  const leader = members[0] as ClanMember
+
+  return {
+    name,
+    tag: name.slice(0, 3).toUpperCase(),
+    isMine,
+    slogan: pick(r, ['우리는 한 팀, 끝까지 간다', '실력보다 매너', '랭킹 1위를 향해', '즐겜과 빡겜 사이']),
+    intro: `${name}은(는) ${ri(r, 2020, 2024)}년에 창설된 클랜입니다. 클랜전과 랭크전을 함께 즐기며 꾸준히 성장하고 있습니다. 매너 있고 적극적인 분들을 환영합니다.`,
+    rank: ri(r, 1, 240),
+    totalMembers: members.length,
+    memberMax: 30,
+    founded: `202${ri(r, 0, 4)}.0${ri(r, 1, 9)}.${ri(r, 10, 28)}`,
+    expTotal: ri(r, 200000, 2400000),
+    expWeek: ri(r, 4000, 42000),
+    emblem: makeEmblem(r),
+    attendance: DAYS.map(() => ri(r, 30, 95)),
+    activity: DAYS.map(() => ({
+      clanWar: ri(r, 0, 12),
+      clanRanked: ri(r, 0, 10),
+      soloRanked: ri(r, 0, 18),
+      partyRanked: ri(r, 0, 14),
+    })),
+    notices: [
+      { title: '이번 주 클랜전 일정 공지', author: leader.name, time: '2일 전', pin: true },
+      { title: '클랜 규칙 안내 (필독)', author: leader.name, time: '1주 전', pin: true },
+      { title: '정기 모임 결과 공유', author: pick(r, NICKS), time: '3일 전', pin: false },
+      { title: '신규 클랜원 환영합니다', author: pick(r, NICKS), time: '5일 전', pin: false },
+      { title: '랭크전 파티 모집', author: pick(r, NICKS), time: '6일 전', pin: false },
+    ],
+    feed: Array.from({ length: 6 }, () => ({
+      author: pick(r, NICKS),
+      time: pick(r, ['방금 전', '1시간 전', '오늘', '어제', '2일 전']),
+      text: pick(r, [
+        '오늘 클랜전 다들 수고하셨습니다!',
+        '저녁 9시에 랭크 같이 돌릴 사람?',
+        '신규 맵 연습 좀 하고 싶은데 같이 하실 분',
+        '이번 주 승률 좋네요 ㅎㅎ',
+        '클랜전 라인업 공유합니다',
+      ]),
+      likes: ri(r, 0, 24),
+      role: '일반',
+    })),
+    guestbook: Array.from({ length: 4 }, () => ({
+      author: pick(r, NICKS) + ri(r, 1, 99),
+      text: pick(r, ['가입 문의 드립니다!', '클랜전 잘 봤어요', '같이 게임해요~', '분위기 좋아 보이네요']),
+      time: pick(r, ['1시간 전', '오늘', '어제', '3일 전']),
+      replies:
+        r() > 0.5
+          ? [{ author: leader.name, text: '감사합니다! 디스코드로 연락주세요', time: '방금 전' }]
+          : [],
+    })),
+    schedule: DAYS.map((day) => {
+      const on = r() > 0.4
+      return {
+        day,
+        time: on ? `${ri(r, 19, 23)}:00` : '—',
+        title: on ? pick(r, ['클랜전', '랭크 파티', '내전', '스크림', '자유참여']) : '휴식',
+        on,
+      }
+    }),
+    members,
+  }
+}
+
+// ─────────────────────────────────────────────────────────────
+// 모집 공고 생성
+// ─────────────────────────────────────────────────────────────
+/** 연령 조건을 라벨 문자열로 변환 */
+export function recruitAgeLabel(cond: RecruitConditions): string {
+  const { ageMin, ageMax } = cond
+  if (ageMin == null && ageMax == null) return '전연령'
+  if (ageMin != null && ageMax != null) return `${ageMin}~${ageMax}세`
+  if (ageMin != null) return `${ageMin}세 이상`
+  return `${ageMax}세 이하`
+}
+
+/** 모집 공고 목록 생성 */
+export function buildRecruits(): Recruit[] {
+  return CLANS.map((name) => {
+    const r = rng(hashSeed('recruit-' + name))
+    const max = pick(r, [20, 25, 30])
+    const cur = ri(r, Math.floor(max * 0.4), max - 1)
+    const matches = ri(r, 80, 1200)
+    const w = ri(r, Math.floor(matches * 0.42), Math.floor(matches * 0.58))
+    const ageMin = r() > 0.4 ? pick(r, [16, 18, 19, 20]) : null
+    const types = RECRUIT_TYPES.filter(() => r() > 0.5).slice(0, 3)
+    return {
+      name,
+      emblem: makeEmblem(r),
+      recruitTypes: types.length ? types : [pick(r, RECRUIT_TYPES)],
+      intro: `${name}에서 함께할 클랜원을 모집합니다. ${pick(r, ['클랜전 위주', '랭크전 위주', '친목 위주'])}로 활동하며, ${pick(r, ['초보 환영', '실력자 우대', '매너 중시'])}합니다.`,
+      rank: ri(r, 1, 240),
+      weeklyWr: ri(r, 42, 72),
+      record: { matches, w, l: matches - w },
+      cur,
+      max,
+      openings: max - cur,
+      hot: ri(r, 0, 100),
+      createdAgo: ri(r, 3, 720),
+      conditions: {
+        ageMin,
+        ageMax: null,
+        voice: r() > 0.5,
+        nickChange: r() > 0.7,
+        noDualClan: r() > 0.5,
+        friendJoin: r() > 0.4,
+      },
+      contacts: [
+        { type: '디스코드', label: `${name} 디스코드` },
+        ...(r() > 0.5 ? [{ type: '오픈카톡' as const, label: `${name} 오픈채팅` }] : []),
+      ],
+    }
+  })
+}
diff --git a/frontend/src/shared/mock/community.ts b/frontend/src/shared/mock/community.ts
new file mode 100644
index 0000000..ff41160
--- /dev/null
+++ b/frontend/src/shared/mock/community.ts
@@ -0,0 +1,197 @@
+// 커뮤니티 도메인 mock 데이터 및 유틸 (게시판/게시글/댓글)
+
+/** 파티 모집 정보 — CmPost.party */
+export interface CmParty {
+  /** 모집 유형 (CM_PARTY_TYPES 원소) */
+  ptype: string
+  /** 보이스 필수 여부 */
+  voice: boolean
+}
+
+/** 댓글 답글 */
+export interface CmReply {
+  author: string
+  text: string
+  time: string
+}
+
+/** 댓글 1건 */
+export interface CmComment {
+  author: string
+  text: string
+  time: string
+  /** 추천수 */
+  up: number
+  replies: CmReply[]
+  /** 삭제 표시 */
+  deleted?: boolean
+}
+
+/** 게시글 1건 */
+export interface CmPost {
+  id: number
+  /** 게시판명 (CM_BOARDS 원소) */
+  board: string
+  title: string
+  author: string
+  /** 상대 시간 표기 */
+  time: string
+  /** 경과 시간(시간 단위) */
+  hoursAgo: number
+  views: number
+  /** 댓글 수 */
+  cmt: number
+  /** 추천수 */
+  up: number
+  /** HOT 여부 */
+  hot: boolean
+  /** 사진 포함 여부 */
+  hasImage: boolean
+  /** 본문 */
+  body: string
+  /** 파티 모집 정보 (없으면 null) */
+  party: CmParty | null
+}
+
+/** 게시판 목록 ('전체'는 미포함 — 사용처에서 앞에 붙임) */
+export const CM_BOARDS = ['자유', '공략', '파티 모집', '클랜', '질문', '유머']
+
+/** 파티 모집 유형 목록 */
+export const CM_PARTY_TYPES = ['클랜전', '랭크전', '일반전', '내전', '대회']
+
+/** 베스트 게시글 추천 임계값 */
+export const CM_BEST_UP = 30
+
+/** 상단 공지 목록 */
+export const CM_NOTICES: { title: string; time: string }[] = [
+  { title: '[공지] 커뮤니티 이용 규칙 안내', time: '상시' },
+  { title: '[공지] 비매너/도배 신고 방법', time: '05.20' },
+  { title: '[이벤트] 베스트 글 작성자 보상 지급', time: '06.01' },
+]
+
+// ─────────────────────────────────────────────────────────────
+// 결정론적 생성 유틸
+// ─────────────────────────────────────────────────────────────
+function hashSeed(str: string): number {
+  let h = 1779033703 ^ str.length
+  for (let i = 0; i < str.length; i++) {
+    h = Math.imul(h ^ str.charCodeAt(i), 3432918353)
+    h = (h << 13) | (h >>> 19)
+  }
+  return h >>> 0
+}
+function rng(seed: number): () => number {
+  let a = seed
+  return () => {
+    a |= 0
+    a = (a + 0x6d2b79f5) | 0
+    let t = Math.imul(a ^ (a >>> 15), 1 | a)
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
+}
+function ri(r: () => number, min: number, max: number): number {
+  return Math.floor(r() * (max - min + 1)) + min
+}
+function pick<T>(r: () => number, arr: readonly T[]): T {
+  return arr[Math.floor(r() * arr.length)] as T
+}
+
+const AUTHORS = ['심해', '강철늑대', '백발백중', '저격수K', '그림자', '불꽃', '레이븐', '겨울', '익명의총잡이', '뉴비1234']
+const VERIFIED = new Set(['심해', '강철늑대', '백발백중', '저격수K', '불꽃', '레이븐'])
+
+const TITLES = [
+  '오늘 랭크 올린 후기 공유합니다',
+  '신규 맵 앵글 정리해봄',
+  '클랜전 같이 하실 분 구해요',
+  '저격 감도 추천 부탁드립니다',
+  '이번 패치 무기 밸런스 어떰?',
+  '폭파미션 기본기 강좌',
+  '연승 중인데 팁 공유함',
+  '에임 연습 루틴 정리',
+  '비매너 유저 후기',
+  '신규 캐릭터 성능 리뷰',
+  '주말 내전 모집합니다',
+  '랭크 듀오 구해요 (보이스 필수)',
+]
+
+const BODIES = [
+  '오늘 드디어 목표 티어 달성했습니다! 꾸준히 하니까 되네요. 다들 화이팅하세요.',
+  '이 맵에서 자주 쓰는 앵글 몇 개 정리해봤습니다. 스크린샷은 댓글에 추가할게요.',
+  '저녁에 같이 게임하실 분 구합니다. 분위기 좋게 즐겜 위주로 해요.',
+  '감도 세팅 공유합니다. 본인한테 맞게 조금씩 조정하는 걸 추천드려요.',
+  '이번 패치로 메타가 좀 바뀐 것 같은데 여러분 생각은 어떠신가요?',
+]
+
+function makePost(id: number, board: string, isParty: boolean): CmPost {
+  const r = rng(hashSeed('post-' + id))
+  const up = ri(r, 0, 80)
+  return {
+    id,
+    board,
+    title: pick(r, TITLES),
+    author: pick(r, AUTHORS),
+    time: pick(r, ['방금 전', '12분 전', '1시간 전', '3시간 전', '오늘', '어제']),
+    hoursAgo: ri(r, 0, 72),
+    views: ri(r, 30, 24000),
+    cmt: ri(r, 0, 60),
+    up,
+    hot: up >= CM_BEST_UP || r() > 0.8,
+    hasImage: r() > 0.6,
+    body: pick(r, BODIES),
+    party: isParty
+      ? { ptype: pick(r, CM_PARTY_TYPES), voice: r() > 0.5 }
+      : null,
+  }
+}
+
+/** 전체 게시글 목록 */
+export const CM_POSTS: CmPost[] = Array.from({ length: 48 }, (_, i) => {
+  const r = rng(hashSeed('board-' + i))
+  const isParty = r() > 0.7
+  const board = isParty ? '파티 모집' : pick(r, CM_BOARDS.filter((b) => b !== '파티 모집'))
+  return makePost(1000 + i, board, isParty)
+})
+
+// ─────────────────────────────────────────────────────────────
+// 조회 유틸
+// ─────────────────────────────────────────────────────────────
+/** 게시글 본문 반환 */
+export function cmBody(p: CmPost): string {
+  return p.body
+}
+
+/** 게시글의 댓글 목록 반환 (id 기반 결정론적 생성) */
+export function cmComments(p: CmPost): CmComment[] {
+  const count = Math.min(p.cmt, 12)
+  return Array.from({ length: count }, (_, i) => {
+    const r = rng(hashSeed('cmt-' + p.id + '-' + i))
+    return {
+      author: pick(r, AUTHORS),
+      text: pick(r, [
+        '좋은 정보 감사합니다!',
+        'ㄹㅇ 공감되네요',
+        '저도 같은 생각이에요',
+        '도움 많이 됐습니다 ㅎㅎ',
+        '혹시 감도 얼마 쓰시나요?',
+        '같이 게임해요~',
+      ]),
+      time: pick(r, ['방금 전', '5분 전', '30분 전', '1시간 전', '오늘']),
+      up: ri(r, 0, 18),
+      replies:
+        r() > 0.7
+          ? [{ author: p.author, text: '댓글 감사합니다!', time: '방금 전' }]
+          : [],
+    }
+  })
+}
+
+/** 파티 정보 → 배지 문자열 배열 */
+export function cmPartyBadges(party: CmParty): string[] {
+  return [party.ptype, party.voice ? '보이스 필수' : '보이스 자유']
+}
+
+/** 닉네임 인증(공식 유저) 여부 */
+export function cmVerified(name: string): boolean {
+  return VERIFIED.has(name)
+}
diff --git a/frontend/src/shared/mock/sa.ts b/frontend/src/shared/mock/sa.ts
new file mode 100644
index 0000000..615e8a2
--- /dev/null
+++ b/frontend/src/shared/mock/sa.ts
@@ -0,0 +1,455 @@
+// 서든어택 전적 사이트 mock 데이터 허브 (`SA`) + 플레이어 조회 유틸
+// 실제 API 연동 전까지 사용하는 데모용 데이터. 시드 기반 결정론적 생성으로 매 빌드 동일.
+import type {
+  Player,
+  Rank,
+  StreamPlatform,
+  MatchRecord,
+  RosterPlayer,
+  RankedSeason,
+  TrendPoint,
+} from './types'
+
+// ─────────────────────────────────────────────────────────────
+// 결정론적 의사난수 (문자열 시드 기반 mulberry32)
+// ─────────────────────────────────────────────────────────────
+function hashSeed(str: string): number {
+  let h = 1779033703 ^ str.length
+  for (let i = 0; i < str.length; i++) {
+    h = Math.imul(h ^ str.charCodeAt(i), 3432918353)
+    h = (h << 13) | (h >>> 19)
+  }
+  return h >>> 0
+}
+
+function rng(seed: number): () => number {
+  let a = seed
+  return () => {
+    a |= 0
+    a = (a + 0x6d2b79f5) | 0
+    let t = Math.imul(a ^ (a >>> 15), 1 | a)
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
+}
+
+/** [min, max] 정수 난수 */
+function ri(r: () => number, min: number, max: number): number {
+  return Math.floor(r() * (max - min + 1)) + min
+}
+
+/** 배열에서 하나 선택 */
+function pick<T>(r: () => number, arr: T[]): T {
+  return arr[Math.floor(r() * arr.length)] as T
+}
+
+// ─────────────────────────────────────────────────────────────
+// 계급(Rank) 프리셋
+// ─────────────────────────────────────────────────────────────
+const RANKS: Record<string, Rank> = {
+  이병: { name: '이병', color: '#9aa4b2', pips: 1, shape: 'bar', group: '훈련병' },
+  일병: { name: '일병', color: '#8b97c7', pips: 2, shape: 'bar', group: '훈련병' },
+  상병: { name: '상병', color: '#6f86d6', pips: 3, shape: 'bar', group: '훈련병' },
+  병장: { name: '병장', color: '#4f86f7', pips: 4, shape: 'bar', group: '훈련병' },
+  하사: { name: '하사', color: '#37c0a8', pips: 1, shape: 'chev', group: '부사관' },
+  중사: { name: '중사', color: '#2fb37f', pips: 2, shape: 'chev', group: '부사관' },
+  상사: { name: '상사', color: '#3aa657', pips: 3, shape: 'chev', group: '부사관' },
+  소위: { name: '소위', color: '#d8a73a', pips: 1, shape: 'dia', group: '위관' },
+  중위: { name: '중위', color: '#e0922e', pips: 2, shape: 'dia', group: '위관' },
+  대위: { name: '대위', color: '#e8762a', pips: 3, shape: 'dia', group: '위관' },
+  소령: { name: '소령', color: '#d65a7a', pips: 1, shape: 'flower', group: '영관' },
+  중령: { name: '중령', color: '#c8417a', pips: 2, shape: 'flower', group: '영관' },
+  대령: { name: '대령', color: '#a8369c', pips: 3, shape: 'flower', group: '영관' },
+  준장: { name: '준장', color: '#f0c14b', pips: 1, shape: 'star', group: '장성' },
+  소장: { name: '소장', color: '#f5b323', pips: 2, shape: 'star', group: '장성' },
+  중장: { name: '중장', color: '#ff9d2f', pips: 3, shape: 'star', group: '장성' },
+}
+const RANK_LADDER = Object.values(RANKS)
+
+// ─────────────────────────────────────────────────────────────
+// 티어(랭크전) 프리셋
+// ─────────────────────────────────────────────────────────────
+const TIERS = [
+  { name: '브론즈', color: '#b08d57' },
+  { name: '실버', color: '#9aa4b2' },
+  { name: '골드', color: '#e0a93a' },
+  { name: '플래티넘', color: '#3fb6a8' },
+  { name: '다이아', color: '#5b9bf0' },
+  { name: '마스터', color: '#c057d6' },
+  { name: '그랜드마스터', color: '#ff5c7a' },
+]
+
+const MAPS_5V5 = ['제3보급창고', '웨어하우스', '서드포트', '데드엔드', '오피스']
+const MAPS_3V3 = ['포트', '컨테이너', '하이드아웃']
+const MODE_NAMES = ['폭파미션', '데스매치', '점령전', '감염모드', '대인전']
+const MATCH_MODES = ['클랜전', '솔로 랭크전', '파티 랭크전', '클랜 랭크전', '토너먼트']
+
+const NICK_POOL = [
+  '심해', '독수리', '그림자', '바람', '강철늑대', '한방러', '저격수K', '불꽃', '제로', '광속',
+  '야간조', '백발백중', '검은표범', '폭풍', '에이스', 'no_scope', '한타장인', '무한리필', '겨울', '레이븐',
+]
+
+const CLAN_POOL = ['불곰부대', 'NOXIA', '백호단', '서리늑대', '검은방패', 'OVERDRIVE']
+
+// ─────────────────────────────────────────────────────────────
+// 표기 유틸 (SA 메서드로 노출)
+// ─────────────────────────────────────────────────────────────
+function saFmt(n: number): string {
+  return n.toLocaleString('en-US')
+}
+function saKdPct(kda: number): number {
+  return Math.round((kda / (kda + 1)) * 100)
+}
+
+// ─────────────────────────────────────────────────────────────
+// 로스터/매치 생성
+// ─────────────────────────────────────────────────────────────
+function makeRoster(r: () => number, ownerName: string, ownerIsHere: boolean): RosterPlayer[] {
+  return Array.from({ length: 5 }, (_, i) => {
+    const isOwner = ownerIsHere && i === 0
+    return {
+      rank: pick(r, RANK_LADDER),
+      name: isOwner ? ownerName : pick(r, NICK_POOL) + ri(r, 1, 99),
+      isOwner,
+      k: ri(r, 5, 28),
+      d: ri(r, 4, 20),
+      a: ri(r, 0, 10),
+      hs: ri(r, 20, 65),
+      dmg: ri(r, 1800, 6200),
+    }
+  })
+}
+
+function makeMatches(r: () => number, name: string, count: number): MatchRecord[] {
+  return Array.from({ length: count }, () => {
+    const mode = pick(r, MATCH_MODES)
+    const is5v5 = mode !== '토너먼트'
+    const map = pick(r, is5v5 ? MAPS_5V5 : MAPS_3V3)
+    const win = r() > 0.45
+    const winSide: 'blue' | 'red' = win ? 'blue' : 'red'
+    return {
+      mode,
+      win,
+      map,
+      k: ri(r, 8, 30),
+      d: ri(r, 6, 22),
+      a: ri(r, 0, 9),
+      ago: pick(r, ['방금 전', '12분 전', '1시간 전', '3시간 전', '어제', '2일 전']),
+      winSide,
+      teams: {
+        blue: makeRoster(r, name, true),
+        red: makeRoster(r, name, false),
+      },
+    }
+  })
+}
+
+function makeTrend(r: () => number, n: number, weekly: boolean): TrendPoint[] {
+  return Array.from({ length: n }, (_, i) => ({
+    wr: ri(r, 38, 72),
+    kd: ri(r, 40, 70),
+    label: weekly ? `${i + 1}주` : `${i + 1}일`,
+  }))
+}
+
+function makeRankedSeasons(r: () => number): RankedSeason[] {
+  const seasons = ['2024 S1', '2024 S2', '2025 S1']
+  const mk = () => {
+    const matches = ri(r, 40, 260)
+    const w = ri(r, Math.floor(matches * 0.4), Math.floor(matches * 0.6))
+    const l = matches - w
+    const tier = pick(r, TIERS).name
+    return {
+      matches,
+      w,
+      l,
+      wr: Math.round((w / matches) * 100),
+      kd: ri(r, 45, 65),
+      hs: ri(r, 25, 55),
+      tier,
+      div: ri(r, 1, 4),
+      points: ri(r, 800, 2400),
+    }
+  }
+  return seasons.map((season) => ({ season, solo: mk(), party: mk() }))
+}
+
+function makeRecords(r: () => number, names: string[]) {
+  return names.map((name) => {
+    const matches = ri(r, 30, 400)
+    const w = ri(r, Math.floor(matches * 0.4), Math.floor(matches * 0.6))
+    const l = matches - w
+    return { name, matches, w, l, wr: Math.round((w / matches) * 100), kd: ri(r, 42, 68) }
+  })
+}
+
+// ─────────────────────────────────────────────────────────────
+// 플레이어 팩토리
+// ─────────────────────────────────────────────────────────────
+interface PlayerSeed {
+  name: string
+  clan?: string | null
+  rankNoTotal?: number
+  rankNoSeason?: number
+}
+
+function makePlayer(seed: PlayerSeed): Player {
+  const r = rng(hashSeed(seed.name))
+  const wins = ri(r, 600, 9800)
+  const losses = ri(r, 500, 8200)
+  const wr = Math.round((wins / (wins + losses)) * 100)
+  const rankTotal = RANK_LADDER[ri(r, 4, RANK_LADDER.length - 1)] as Rank
+  const rankSeason = RANK_LADDER[ri(r, 4, RANK_LADDER.length - 1)] as Rank
+
+  return {
+    name: seed.name,
+    clan: seed.clan ?? null,
+    rank: rankTotal,
+    rankTotal,
+    rankSeason,
+    rankNoTotal: seed.rankNoTotal ?? ri(r, 1, 90000),
+    rankNoSeason: seed.rankNoSeason ?? ri(r, 1, 90000),
+    level: ri(r, 30, 220),
+    wins,
+    losses,
+    wr,
+    kda: +(r() * 1.6 + 0.7).toFixed(2),
+    hs: ri(r, 28, 62),
+    rifle: ri(r, 40, 75),
+    sniper: ri(r, 15, 50),
+    special: ri(r, 5, 25),
+    manner: ri(r, 78, 100),
+    connRate: ri(r, 80, 99),
+    views: ri(r, 1200, 480000),
+    contrib: ri(r, 2000, 90000),
+    matches: makeMatches(r, seed.name, 14),
+    rankedSeasons: makeRankedSeasons(r),
+    clanRecords: (seed.clan ? [seed.clan] : []).concat(pick(r, CLAN_POOL)).map((clan, i) => {
+      const matches = ri(r, 60, 900)
+      const w = ri(r, Math.floor(matches * 0.42), Math.floor(matches * 0.58))
+      const l = matches - w
+      return {
+        clan,
+        tag: clan.slice(0, 3).toUpperCase(),
+        matches,
+        w,
+        l,
+        wr: Math.round((w / matches) * 100),
+        kd: ri(r, 45, 65),
+        periods: [
+          { from: `202${3 + i}.0${ri(r, 1, 9)}`, to: i === 0 ? '활동중' : `202${4 + i}.0${ri(r, 1, 9)}`, months: ri(r, 2, 18) },
+        ],
+      }
+    }),
+    modeRecords: makeRecords(r, MODE_NAMES),
+    mapRecords: makeRecords(r, [...MAPS_5V5, ...MAPS_3V3]),
+    trend: {
+      daily: makeTrend(r, 14, false),
+      weekly: makeTrend(r, 12, true),
+    },
+    together: (() => {
+      const games = ri(r, 8, 120)
+      const w = ri(r, Math.floor(games * 0.4), Math.floor(games * 0.6))
+      return { games, w, l: games - w }
+    })(),
+  }
+}
+
+// ─────────────────────────────────────────────────────────────
+// 플레이어 풀 구성
+// ─────────────────────────────────────────────────────────────
+const PLAYER_SEEDS: PlayerSeed[] = [
+  { name: '심해', clan: '불곰부대', rankNoTotal: 12, rankNoSeason: 8 },
+  { name: '강철늑대', clan: 'NOXIA', rankNoTotal: 27, rankNoSeason: 19 },
+  { name: '백발백중', clan: '백호단', rankNoTotal: 41, rankNoSeason: 33 },
+  { name: '저격수K', clan: '서리늑대', rankNoTotal: 58, rankNoSeason: 52 },
+  { name: '그림자', clan: null, rankNoTotal: 73, rankNoSeason: 64 },
+  { name: '불꽃', clan: '검은방패', rankNoTotal: 88, rankNoSeason: 79 },
+  { name: '레이븐', clan: 'OVERDRIVE', rankNoTotal: 104, rankNoSeason: 95 },
+  { name: '겨울', clan: '불곰부대', rankNoTotal: 121, rankNoSeason: 110 },
+  { name: '에이스', clan: 'NOXIA', rankNoTotal: 143, rankNoSeason: 128 },
+  { name: '한타장인', clan: null, rankNoTotal: 167, rankNoSeason: 151 },
+  { name: '검은표범', clan: '백호단', rankNoTotal: 192, rankNoSeason: 174 },
+  { name: '광속', clan: '서리늑대', rankNoTotal: 215, rankNoSeason: 199 },
+]
+
+const allPlayers: Player[] = PLAYER_SEEDS.map(makePlayer)
+const playerByName = new Map(allPlayers.map((p) => [p.name, p]))
+
+/** 내 계정 (데모) — 친구의 together 정보 부여 */
+const me: Player = {
+  ...makePlayer({ name: '심해', clan: '불곰부대', rankNoTotal: 12, rankNoSeason: 8 }),
+}
+
+/** 친구 목록 — together(함께한 전적) 부여 */
+const friends: Player[] = allPlayers.slice(1, 7).map((p) => {
+  const r = rng(hashSeed('together-' + p.name))
+  const games = ri(r, 8, 120)
+  const w = ri(r, Math.floor(games * 0.4), Math.floor(games * 0.6))
+  return { ...p, together: { games, w, l: games - w } }
+})
+
+// ─────────────────────────────────────────────────────────────
+// 랭킹 데이터
+// ─────────────────────────────────────────────────────────────
+const classRanking = (offset: number) =>
+  allPlayers
+    .map((p, i) => ({ name: p.name, score: 9800 - i * 137 - offset }))
+    .sort((a, b) => b.score - a.score)
+
+const rpRanking = (seed: string) => {
+  const r = rng(hashSeed(seed))
+  return allPlayers
+    .map((p) => ({ name: p.name, tier: pick(r, TIERS).name, rp: ri(r, 1200, 2600) }))
+    .sort((a, b) => b.rp - a.rp)
+}
+
+const clanRanking = (seed: string) => {
+  const r = rng(hashSeed(seed))
+  return CLAN_POOL.map((name) => ({
+    name,
+    tag: name.slice(0, 3).toUpperCase(),
+    members: ri(r, 12, 60),
+    rp: ri(r, 8000, 24000),
+  })).sort((a, b) => b.rp - a.rp)
+}
+
+// ─────────────────────────────────────────────────────────────
+// SA — mock 데이터 허브
+// ─────────────────────────────────────────────────────────────
+export const SA = {
+  /** 천 단위 콤마 포맷 */
+  fmt: saFmt,
+  /** KDA → 킬뎃 백분율(정수) */
+  kdPct: saKdPct,
+
+  me,
+  allPlayers,
+  favorites: allPlayers.slice(0, 8),
+  friends,
+
+  /** 티어 색상표 */
+  tiers: TIERS,
+
+  // 계급 랭킹
+  totalClassRanking: classRanking(0),
+  seasonClassRanking: classRanking(420),
+
+  // 랭크전 RP 랭킹
+  soloRpRanking: rpRanking('solo-rp'),
+  partyRpRanking: rpRanking('party-rp'),
+
+  // 클랜 랭킹
+  clanRpRanking: clanRanking('clan-rp'),
+  officialClanRanking: clanRanking('official-clan'),
+  generalClanRanking: clanRanking('general-clan'),
+
+  /** 최근 검색 닉네임 */
+  recentSearches: ['강철늑대', '저격수K', '그림자', '불꽃', '에이스', '겨울'],
+
+  /** 실시간 검색 추세 */
+  searchTrending: [
+    { name: '강철늑대', move: 2 as number | 'new', count: 12840 },
+    { name: '백발백중', move: 'new' as number | 'new', count: 9320 },
+    { name: '심해', move: 0 as number | 'new', count: 8710 },
+    { name: '불꽃', move: -1 as number | 'new', count: 7220 },
+    { name: '레이븐', move: 5 as number | 'new', count: 6105 },
+    { name: '광속', move: -3 as number | 'new', count: 4980 },
+  ],
+
+  /** 연승 플레이어 */
+  hotStreak: [
+    { name: '강철늑대', streak: 11 },
+    { name: '심해', streak: 8 },
+    { name: '에이스', streak: 7 },
+    { name: '불꽃', streak: 5 },
+    { name: '레이븐', streak: 4 },
+  ],
+
+  /** 뉴스 (탭별) */
+  news: {
+    공지사항: [
+      { date: '06.10', title: '2025 시즌2 랭크전 보상 안내' },
+      { date: '06.08', title: '정기 점검 안내 (06/12 02:00~06:00)' },
+      { date: '06.05', title: '비매너 이용자 제재 정책 강화' },
+      { date: '06.01', title: '6월 출석 이벤트 오픈' },
+    ],
+    GM이야기: [
+      { date: '06.09', title: 'GM이 직접 플레이한 신규 맵 후기' },
+      { date: '06.03', title: '밸런스 패치 방향성 공유' },
+      { date: '05.28', title: '커뮤니티 피드백 반영 현황' },
+    ],
+    업데이트: [
+      { date: '06.11', title: '신규 캐릭터 "서리" 출시' },
+      { date: '06.07', title: '무기 밸런스 조정 v3.2' },
+      { date: '06.02', title: '클랜 시스템 개편 적용' },
+    ],
+  } as Record<string, { date: string; title: string }[]>,
+
+  /** 실시간 통계 */
+  liveStats: {
+    totalMatches: 1842301,
+    prevDelta: 4.2,
+    bannedToday: 318,
+    matchModes: [
+      { name: '폭파미션', count: 921400 },
+      { name: '데스매치', count: 412800 },
+      { name: '점령전', count: 286500 },
+      { name: '감염모드', count: 221601 },
+    ],
+  },
+
+  /** 시즌 정보 */
+  season: {
+    dday: 'D-12',
+    name: '2025 시즌2',
+    period: '06.30',
+    progress: 68,
+    maps5v5: MAPS_5V5,
+    maps3v3: MAPS_3V3,
+  },
+
+  /** 방송 목록 */
+  streams: [
+    { platform: '치지직', streamer: '강철늑대', viewers: 4210, title: '랭크 올리기 가즈아', started: '2시간 전' },
+    { platform: '치지직', streamer: '심해', viewers: 1880, title: '시청자 클랜전', started: '40분 전' },
+    { platform: '숲', streamer: '백발백중', viewers: 3120, title: '저격 원챔 방송', started: '1시간 전' },
+    { platform: '숲', streamer: '불꽃', viewers: 980, title: '데스매치 연승 도전', started: '20분 전' },
+    { platform: '유튜브', streamer: '레이븐', viewers: 2540, title: '신규 맵 공략', started: '3시간 전' },
+  ] as { platform: string; streamer: string; viewers: number; title: string; started: string }[],
+
+  /** 방송 플랫폼 표기 */
+  streamPlatforms: {
+    치지직: { color: '#00ffa3', tag: 'CHZ', label: '치지직' },
+    숲: { color: '#0064ff', tag: 'SOOP', label: '숲(아프리카)' },
+    유튜브: { color: '#ff0033', tag: 'YT', label: '유튜브' },
+  } as Record<string, StreamPlatform>,
+
+  /** 커뮤니티 미리보기 (게시판별) */
+  community: {
+    자유: [
+      { tag: '자유', title: '오늘 클랜전 진짜 재밌었다', hot: true, cmt: 24, time: '12분 전' },
+      { tag: '자유', title: '신규 맵 어떰?', hot: false, cmt: 8, time: '30분 전' },
+      { tag: '자유', title: '랭크 올리는 팁 공유함', hot: true, cmt: 41, time: '1시간 전' },
+      { tag: '자유', title: '저격 감도 추천좀', hot: false, cmt: 12, time: '2시간 전' },
+    ],
+    공략: [
+      { tag: '공략', title: '제3보급창고 앵글 정리', hot: true, cmt: 33, time: '40분 전' },
+      { tag: '공략', title: '폭파미션 라인전 기본기', hot: false, cmt: 15, time: '3시간 전' },
+      { tag: '공략', title: '에임 연습 루틴 공유', hot: false, cmt: 9, time: '5시간 전' },
+    ],
+  } as Record<string, { tag: string; title: string; hot: boolean; cmt: number; time: string }[]>,
+
+  /** 이벤트 스트립 */
+  events: [
+    { title: '6월 출석 이벤트', sub: '매일 접속하고 보상 받기', period: '06.01~06.30', dday: 'D-19', tag: 'EVENT' },
+    { title: '시즌2 랭크 보상', sub: '티어별 한정 무기 지급', period: '~06.30', dday: 'D-12', tag: 'SEASON' },
+    { title: '신규 캐릭터 출시 기념', sub: '"서리" 픽업 한정 패키지', period: '~06.20', dday: 'D-9', tag: 'NEW' },
+    { title: '주말 경험치 2배', sub: '토·일 전 모드 적용', period: '매주 주말', dday: 'D-2', tag: 'BONUS' },
+  ] as { title: string; sub: string; period: string; dday: string; tag: string; image?: string; link?: string }[],
+}
+
+/** 닉네임으로 플레이어 조회 (없으면 undefined) */
+export function findPlayer(name: string): Player | undefined {
+  return playerByName.get(name)
+}
diff --git a/frontend/src/shared/mock/types.ts b/frontend/src/shared/mock/types.ts
new file mode 100644
index 0000000..50f53fd
--- /dev/null
+++ b/frontend/src/shared/mock/types.ts
@@ -0,0 +1,229 @@
+// 공용 도메인 타입 정의 모듈 (mock 데이터 및 컴포넌트가 공유하는 순수 타입)
+// 값(데이터)은 포함하지 않고 타입만 정의한다.
+
+/** 계급(랭크) 뱃지 데이터 — RankBadge.vue가 소비 */
+export interface Rank {
+  /** 계급 약칭 (방패 내부 텍스트) */
+  name: string
+  /** 계급 대표 색 (CSS color, hex 권장 — 알파 합성 `${color}16` 사용) */
+  color: string
+  /** 계급 표식(pip) 개수 */
+  pips: number
+  /** pip 도형 종류 — 그 외 값은 기본 막대(bar)로 렌더 */
+  shape: 'star' | 'flower' | 'dia' | 'chev' | 'bar'
+  /** 계급 그룹명 (showName 시 하단 표기) */
+  group: string
+  /** 계급 이미지 URL (있으면 SVG 뱃지 대신 이미지로 표시 — 넥슨 메타 연동용) */
+  image?: string
+}
+
+/** 방송 플랫폼 표기 정보 — StreamLive.vue가 소비 */
+export interface StreamPlatform {
+  /** 플랫폼 색상 */
+  color: string
+  /** 짧은 태그 (썸네일 우상단 배지) */
+  tag: string
+  /** 플랫폼 라벨 (메타 줄 표기) */
+  label: string
+}
+
+/** 매치(전적) 1건 — Player.matches 원소 */
+export interface MatchRecord {
+  /** 매치 식별자 (상세 lazy 로드용 — 실데이터 연동 시 사용) */
+  matchId?: string
+  /** 매치 모드 (예: '클랜전' | '솔로 랭크전' | '파티 랭크전' | '클랜 랭크전' | '토너먼트') */
+  mode: string
+  /** 승리 여부 */
+  win: boolean
+  /** 맵 이름 */
+  map: string
+  /** 킬 */
+  k: number
+  /** 데스 */
+  d: number
+  /** 어시스트 */
+  a: number
+  /** 경과 표기 (예: '3시간 전') */
+  ago: string
+  /** 승리 진영 */
+  winSide: 'blue' | 'red'
+  /** 양 팀 로스터 */
+  teams: {
+    blue: RosterPlayer[]
+    red: RosterPlayer[]
+  }
+}
+
+/** 매치 로스터 1명 — MatchRecord.teams.blue/red 원소, TeamTable.vue가 소비 */
+export interface RosterPlayer {
+  /** 계급 */
+  rank: Rank
+  /** 플레이어 이름 */
+  name: string
+  /** 프로필 주인공(ME) 여부 */
+  isOwner: boolean
+  /** 킬 */
+  k: number
+  /** 데스 */
+  d: number
+  /** 어시스트 */
+  a: number
+  /** 헤드샷(%) */
+  hs: number
+  /** 데미지 */
+  dmg: number
+}
+
+/** 클랜별 전적 — Player.clanRecords 원소 */
+export interface ClanRecord {
+  /** 클랜 이름 */
+  clan: string
+  /** 클랜 태그 */
+  tag: string
+  /** 총 매치 수 */
+  matches: number
+  /** 승 */
+  w: number
+  /** 패 */
+  l: number
+  /** 승률(%) */
+  wr: number
+  /** 킬뎃(%) */
+  kd: number
+  /** 활동 기간 목록 */
+  periods: {
+    from: string
+    to: string
+    months: number
+  }[]
+}
+
+/** 모드별/맵별 전적 — Player.modeRecords / mapRecords 원소 */
+export interface ModeRecord {
+  /** 모드/맵 이름 */
+  name: string
+  /** 매치 수 */
+  matches: number
+  /** 승 */
+  w: number
+  /** 패 */
+  l: number
+  /** 승률(%) */
+  wr: number
+  /** 킬뎃(%) */
+  kd: number
+}
+
+/** 맵별 전적 (ModeRecord와 동일 구조) */
+export type MapRecord = ModeRecord
+
+/** 랭크전 시즌 단위 전적 (솔로/파티 각각) — RankedSeason.solo / party */
+export interface RankedRecord {
+  /** 매치 수 */
+  matches: number
+  /** 승 */
+  w: number
+  /** 패 */
+  l: number
+  /** 승률(%) */
+  wr: number
+  /** 킬뎃(%) */
+  kd: number
+  /** 헤드샷(%) */
+  hs: number
+  /** 티어 이름 */
+  tier: string
+  /** 티어 디비전 (없으면 null) */
+  div: number | null
+  /** 티어 점수(RP) */
+  points: number
+  /** 티어 이미지 URL (넥슨 메타 연동 — 있으면 마름모 대신 이미지 표시) */
+  tierImage?: string
+}
+
+/** 랭크전 시즌 — Player.rankedSeasons 원소 */
+export interface RankedSeason {
+  /** 시즌 식별자 (예: '2024 S1') */
+  season: string
+  /** 솔로 랭크전 전적 */
+  solo: RankedRecord
+  /** 파티 랭크전 전적 */
+  party: RankedRecord
+}
+
+/** 추세 그래프 1포인트 — Player.trend.daily / weekly 원소 */
+export interface TrendPoint {
+  /** 승률(%) */
+  wr: number
+  /** 킬뎃(%) */
+  kd: number
+  /** x축 라벨 (날짜/주차) */
+  label: string
+}
+
+/** 플레이어 종합 데이터 — 프로필/홈/검색 등 광범위 소비 */
+export interface Player {
+  /** 닉네임 */
+  name: string
+  /** 소속 클랜명 (없으면 빈 문자열 또는 null) */
+  clan?: string | null
+  /** 대표 계급 (프로필 accent 등) */
+  rank: Rank
+  /** 통합 계급 */
+  rankTotal: Rank
+  /** 시즌 계급 */
+  rankSeason: Rank
+  /** 통합 랭킹 순위 */
+  rankNoTotal: number
+  /** 시즌 랭킹 순위 */
+  rankNoSeason: number
+  /** 레벨 */
+  level: number
+  /** 승 */
+  wins: number
+  /** 패 */
+  losses: number
+  /** 승률(%) */
+  wr: number
+  /** KDA 수치 */
+  kda: number
+  /** 헤드샷(%) */
+  hs: number
+  /** 라이플(%) */
+  rifle: number
+  /** 스나이퍼(%) */
+  sniper: number
+  /** 특수전(%) */
+  special: number
+  /** 매너 점수 (mock) */
+  manner: number
+  /** 매너 등급 텍스트 (넥슨 API manner_grade — 예: '최고') */
+  mannerGrade?: string
+  /** 접속률(%) */
+  connRate: number
+  /** 프로필 조회수 */
+  views: number
+  /** 클랜 기여도 */
+  contrib: number
+  /** 매치 기록 */
+  matches: MatchRecord[]
+  /** 랭크전 시즌 기록 */
+  rankedSeasons: RankedSeason[]
+  /** 클랜별 전적 */
+  clanRecords: ClanRecord[]
+  /** 모드별 전적 */
+  modeRecords: ModeRecord[]
+  /** 맵별 전적 */
+  mapRecords: MapRecord[]
+  /** 추세 (일별/주별) */
+  trend: {
+    daily: TrendPoint[]
+    weekly: TrendPoint[]
+  }
+  /** 함께한 전적 (친구 목록 등에서 사용) */
+  together: {
+    games: number
+    w: number
+    l: number
+  }
+}
diff --git a/frontend/src/shared/utils/adapt.ts b/frontend/src/shared/utils/adapt.ts
new file mode 100644
index 0000000..6bc3950
--- /dev/null
+++ b/frontend/src/shared/utils/adapt.ts
@@ -0,0 +1,10 @@
+// 넥슨 실데이터 → 기존 mock UI(Player/Rank) 어댑터 유틸
+// UI 구조를 그대로 유지하기 위해 실데이터를 mock 타입 형태로 변환할 때 사용한다.
+import type { Rank } from '@/shared/mock/types'
+
+// 계급/시즌계급 명(문자열)으로 RankBadge 표시용 Rank 객체 합성.
+// 넥슨 메타 계급 이미지가 있으면 image 로 넘겨 RankBadge 가 이미지를 표시한다.
+// 이미지가 없을 때를 대비해 color 는 (알파 합성 가능한) hex 로 둔다.
+export function makeRank(name: string, image = ''): Rank {
+  return { name: name || '-', color: '#48515f', pips: 0, shape: 'bar', group: '', image }
+}
diff --git a/openapi.md b/openapi.md
new file mode 100644
index 0000000..575109b
--- /dev/null
+++ b/openapi.md
@@ -0,0 +1,701 @@
+1. 유저 식별자 조회
+/suddenattack/v1/id
+
+파라미터 
+{
+    user_name: string
+}
+
+리턴값
+{
+  "ouid": "string"
+}
+
+2. 유저 기본 정보 조회
+/suddenattack/v1/user/basic
+
+파라미터
+{
+    ouid: string
+}
+
+리턴값
+{
+  "user_name": "string",
+  "user_date_create": "2023-12-14T08:28:35Z",
+  "title_name": "string",
+  "clan_name": "string",
+  "manner_grade": "string"
+}
+
+3. 유저 계급 정보 조회
+/suddenattack/v1/user/rank
+
+파라미터
+{
+    ouid: string
+}
+
+리턴값
+{
+  "user_name": "string",
+  "grade": "string",
+  "grade_exp": 0,
+  "grade_ranking": 0,
+  "season_grade": "string",
+  "season_grade_exp": 0,
+  "season_grade_ranking": 0
+}
+
+4. 유저 티어 정보 조회
+/suddenattack/v1/user/tier
+
+파라미터
+{
+    ouid: string
+}
+
+리턴값
+{
+  "user_name": "string",
+  "solo_rank_match_tier": 0,
+  "solo_rank_match_score": 0,
+  "party_rank_match_tier": 0,
+  "party_rank_match_score": 0
+}
+
+5. 유저 최근 동향 정보
+/suddenattack/v1/user/recent-info
+
+파라미터
+{
+    ouid: string
+}
+
+리턴값
+{
+  "user_name": "string",
+  "recent_win_rate": 0,
+  "recent_kill_death_rate": 0,
+  "recent_assault_rate": 0,
+  "recent_sniper_rate": 0,
+  "recent_special_rate": 0
+}
+
+6. 매치 목록 조회
+/suddenattack/v1/match
+
+파라미터
+{
+    ouid: string,
+    match_mode: '폭파미션',
+    match_type: '퀵매치 클랜전','클랜 랭크전','랭크전 솔로','랭크전 파티','토너먼트'
+}
+
+리턴값
+{
+  "match": [
+    {
+      "match_id": "string",
+      "match_type": "string",
+      "match_mode": "string",
+      "date_match": "2023-12-14T08:28:35Z",
+      "match_result": "string",
+      "kill": 0,
+      "death": 0,
+      "assist": 0
+    }
+  ]
+}
+
+7. 매치 상세 정보 조회
+/suddenattack/v1/match-detail
+
+파라미터
+{
+  "match_id": "string"
+}
+
+리턴값
+{
+  "match_id": "string",
+  "match_type": "string",
+  "match_mode": "string",
+  "date_match": "2023-12-14T08:28:35Z",
+  "match_map": "string",
+  "match_detail": [
+    {
+      "team_id": "string",
+      "match_result": "string",
+      "user_name": "string",
+      "season_grade": "string",
+      "clan_name": "string",
+      "kill": 0,
+      "death": 0,
+      "headshot": 0,
+      "damage": 0,
+      "assist": 0
+    }
+  ]
+}
+
+8. 통합 계급 메타데이터
+/static/suddenattack/meta/grade
+
+리턴값
+[
+  {
+    "grade": "훈련병",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/ee33e82aefcc246d112d88aca8098387"
+  },
+  {
+    "grade": "이병",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/f6b0bce6a0633923c6d0dc1a1535a752"
+  },
+  {
+    "grade": "일병",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/fe6543b38dac6008775f38b85b45fad5"
+  },
+  {
+    "grade": "상병",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/bdf837ab7c947449f0414b3723f5fe25"
+  },
+  {
+    "grade": "병장",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/d7e1328453d3390c4af424e97d3443f0"
+  },
+  {
+    "grade": "하사 1호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/a3ec954a0db126d065a8279f7288a114"
+  },
+  {
+    "grade": "하사 2호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/097117f41b6c330aa2e604b122beffc2"
+  },
+  {
+    "grade": "하사 3호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/d5bdd9de0af7abcb6416ba71e7f41f11"
+  },
+  {
+    "grade": "중사 1호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/fbcce1eba93ea0950b3ac07826a534e9"
+  },
+  {
+    "grade": "중사 2호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/3cb4372033ec53fdae1d4c6f49dfc416"
+  },
+  {
+    "grade": "중사 3호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/1809859b1fb6cd889f3013c108b677a7"
+  },
+  {
+    "grade": "중사 4호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/479b4df67b37e480d521662ef2532441"
+  },
+  {
+    "grade": "상사 1호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/ddd3ec5c5d800330adcec94762d60bd5"
+  },
+  {
+    "grade": "상사 2호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/94cd9097efdc03d984f49a4cd1e0ff7c"
+  },
+  {
+    "grade": "상사 3호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/807d4881131e4febc44598249790b870"
+  },
+  {
+    "grade": "상사 4호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/33faf6a236a3e8266a6e03837cb92a6a"
+  },
+  {
+    "grade": "상사 5호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/9d987e0af4ae629fa0d119d723ee71be"
+  },
+  {
+    "grade": "소위 1호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/99639aa76ac88e5b883420b906c9ee2e"
+  },
+  {
+    "grade": "소위 2호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/54d60b9ef82a9c43882bd20ba0083503"
+  },
+  {
+    "grade": "소위 3호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/d258e96f556162ccfa264fc248fbd4ce"
+  },
+  {
+    "grade": "소위 4호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/e0259c17bb861ff40882cc9f107e4f7f"
+  },
+  {
+    "grade": "소위 5호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/a3e827641ec54ea0ba21f4924f83533b"
+  },
+  {
+    "grade": "소위 6호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/057d034519d3b192cba75335c56cc11c"
+  },
+  {
+    "grade": "중위 1호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/e2b2e134e6fb4b5f4a267ceeea9fb219"
+  },
+  {
+    "grade": "중위 2호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/1c717dd3f1d0a32c1197cb7fe7320417"
+  },
+  {
+    "grade": "중위 3호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/6481f73a5dc34e2846b8211d59aa953a"
+  },
+  {
+    "grade": "중위 4호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/21afa47beda67061fcc92342e7c1ce8b"
+  },
+  {
+    "grade": "중위 5호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/d7f3d22c8f78dda724317c54f344f178"
+  },
+  {
+    "grade": "중위 6호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/eda00bfc9062d099843a08173272c33d"
+  },
+  {
+    "grade": "대위 1호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/ffc95f21adebd68cb6a6ec7d15d2fc2d"
+  },
+  {
+    "grade": "대위 2호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/2eecbda07f4f87fec7892f8279a226fa"
+  },
+  {
+    "grade": "대위 3호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/bf2110207240360a0a8dd7d304f578ba"
+  },
+  {
+    "grade": "대위 4호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/002811863beea8b24fc467fbd8a76106"
+  },
+  {
+    "grade": "대위 5호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/6853b2d35a303475a354537a65a58458"
+  },
+  {
+    "grade": "대위 6호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/d28cbb7ff3a2578777063589e7aaab59"
+  },
+  {
+    "grade": "소령 1호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/9193618ec31e1d0fb1cade96d6a3ba22"
+  },
+  {
+    "grade": "소령 2호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/80b446c2812f6a59afe8f9c94552601e"
+  },
+  {
+    "grade": "소령 3호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/9e5f8b3d73df7b167a3f47daf35d83a4"
+  },
+  {
+    "grade": "소령 4호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/2f3aba1457a07cf4b791062877f47b35"
+  },
+  {
+    "grade": "소령 5호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/f88d65356382dfd952fd56e263a36e43"
+  },
+  {
+    "grade": "소령 6호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/b9299be5cdfbbf05008b2920596c99ef"
+  },
+  {
+    "grade": "중령 1호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/3239d3b003c468660258c64d5fd21751"
+  },
+  {
+    "grade": "중령 2호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/913c4649daec660735120b53df8bf6e5"
+  },
+  {
+    "grade": "중령 3호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/d1ed04a1be721ddc64e22b70e4298b81"
+  },
+  {
+    "grade": "중령 4호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/19d3c57d1f82e3f14a4e03ca3f6bcb21"
+  },
+  {
+    "grade": "중령 5호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/72d0744bc4545021fe8b226417244d7b"
+  },
+  {
+    "grade": "중령 6호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/72ee5d1941f0edac8ff47b659e0c21e1"
+  },
+  {
+    "grade": "대령 1호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/29f7106d65441a50a0b1eefe5c45543b"
+  },
+  {
+    "grade": "대령 2호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/1b1984ebb33bea9221c184c927309332"
+  },
+  {
+    "grade": "대령 3호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/65b837764113b6a61f195d035dbf2118"
+  },
+  {
+    "grade": "대령 4호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/d9effa0841b72b9ab0120be2857c002d"
+  },
+  {
+    "grade": "대령 5호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/f8949e8e2afe9ca20577a9a2af06d4c9"
+  },
+  {
+    "grade": "대령 6호봉",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/70bce9a8fbc2bc6c50fd0fc227b09fd1"
+  },
+  {
+    "grade": "준장",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/6f06affe4aea65559279c81e2add7128"
+  },
+  {
+    "grade": "소장",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/3c2e89ad209e9552e9efc12c2e1fd75a"
+  },
+  {
+    "grade": "중장",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/1efdce67ff05aa032f245305e183382d"
+  },
+  {
+    "grade": "대장",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/cf9b9c46cec3344aeb3ce37ba262ce8b"
+  },
+  {
+    "grade": "부원수",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/de1042c33798a11f4fb9d92a96b6a98b"
+  },
+  {
+    "grade": "원수",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/4b78c9d39ee096c95817aa71f93ea0e2"
+  },
+  {
+    "grade": "대원수",
+    "grade_image": "https://open.api.nexon.com/static/suddenattack/img/935b9032fe35e71a30f4cc8b48ee9e03"
+  }
+]
+
+9. 시즌 계급 메타데이터
+/static/suddenattack/meta/season_grade
+
+리턴값
+[
+  {
+    "season_grade": "특등이병",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/5c0245da786782a483c7407e0b212fc6"
+  },
+  {
+    "season_grade": "특등일병",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/91d2f3a77afa2bfc56b9c3f1ebe62f50"
+  },
+  {
+    "season_grade": "특등상병",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/060620db3563099031b5cd32cfec51c4"
+  },
+  {
+    "season_grade": "특등병장",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/c441dad340753256a0c5da639177129d"
+  },
+  {
+    "season_grade": "특전하사 1호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/d2fc1fc9e0aae1f83e4e5779acd31147"
+  },
+  {
+    "season_grade": "특전하사 2호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/18af392bd890a452f51a466dda51299a"
+  },
+  {
+    "season_grade": "특전하사 3호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/e235f68f98158fe46b174c49d200eaab"
+  },
+  {
+    "season_grade": "특전하사 4호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/cf74c43e31848f32d6575fa9e67c8e6e"
+  },
+  {
+    "season_grade": "특전하사 5호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/f6b9fd56e9dce0da8740330405d58307"
+  },
+  {
+    "season_grade": "특전중사 1호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/8e82702752d9f50c0b98708d0ae7c42f"
+  },
+  {
+    "season_grade": "특전중사 2호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/036acc6d32dffa13b0acb040b8464fe1"
+  },
+  {
+    "season_grade": "특전중사 3호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/db84babc76a585ff88f5a408c6a79d4a"
+  },
+  {
+    "season_grade": "특정중사 4호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/9d1f039c3f1ccefea280272d175da4b8"
+  },
+  {
+    "season_grade": "특전중사 5호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/df6729af9e6877166f5b3150c90b09ae"
+  },
+  {
+    "season_grade": "특전상사 1호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/c0a6f41437887a32bfe7f2f83c000045"
+  },
+  {
+    "season_grade": "특전상사 2호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/c23a27e6178022b1342388b4d9f59db4"
+  },
+  {
+    "season_grade": "특전상사 3호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/93e0f88520f6b83d2700e86d006711fc"
+  },
+  {
+    "season_grade": "특전상사 4호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/73ef5792ab8d8b23421f4cc580b06f19"
+  },
+  {
+    "season_grade": "특전상사 5호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/e051946f68c49eaf78044fd984a99538"
+  },
+  {
+    "season_grade": "특임소위 1호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/a097b9d34626a5823d2818e3ff5ab68b"
+  },
+  {
+    "season_grade": "특임소위 2호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/61d91ea4e6fb2e3dea35f03d02e4971c"
+  },
+  {
+    "season_grade": "특임소위 3호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/57650eacf3f1f2daab1a19bdba3b9de3"
+  },
+  {
+    "season_grade": "특임소위 4호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/37081fbf76a6b7c96ba80a69ec340db6"
+  },
+  {
+    "season_grade": "특임소위 5호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/cfbb4175778d9b7168d94cdb4f6ccd93"
+  },
+  {
+    "season_grade": "특임중위 1호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/53f6b0405bf93a690c59b6606a42083a"
+  },
+  {
+    "season_grade": "특임중위 2호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/48d9790b78bb82234038f408e99aac22"
+  },
+  {
+    "season_grade": "특임중위 3호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/2e0c885f465c19dd2f511bd72c340e76"
+  },
+  {
+    "season_grade": "특임중위 4호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/f6c4d041945a007ce5e4ec67dfb98fea"
+  },
+  {
+    "season_grade": "특임중위 5호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/6233233e9daa50148685c648c64b6443"
+  },
+  {
+    "season_grade": "특임대위 1호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/866447cd0d81fa0dac4f2354d3f1a84f"
+  },
+  {
+    "season_grade": "특임대위 2호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/56660249209b179ec912988ae05d778a"
+  },
+  {
+    "season_grade": "특임대위 3호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/664d869c2e08c983d001bb6873cf97b9"
+  },
+  {
+    "season_grade": "특임대위 4호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/13e7f7b2099e6b1598e18178ab08fb36"
+  },
+  {
+    "season_grade": "특임대위 5호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/a05e4295d41d5aef6314db5c98454b07"
+  },
+  {
+    "season_grade": "특공소령 1호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/7c790d496a75725c8d72183078a8a466"
+  },
+  {
+    "season_grade": "특공소령 2호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/f76732e93f8550c3e620981c738014d8"
+  },
+  {
+    "season_grade": "특공소령 3호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/860b4118bc7d88a0aa1ce761a33f1b67"
+  },
+  {
+    "season_grade": "특공소령 4호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/b2f81cbe6c4a0d22478447a9a76f6689"
+  },
+  {
+    "season_grade": "특공소령 5호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/9a875da7dd22d1d5cc7a4ce1b5a79ff1"
+  },
+  {
+    "season_grade": "특공중령 1호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/bf1c599001ecf2cb982636b458ed1539"
+  },
+  {
+    "season_grade": "특공중령 2호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/25bd0d495d33a5d4be55774f5c55ee54"
+  },
+  {
+    "season_grade": "특공중령 3호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/5b67c09d23aadb20762ac02f336a4283"
+  },
+  {
+    "season_grade": "특공중령 4호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/e8a94a441c38afb563e75744d6eb6857"
+  },
+  {
+    "season_grade": "특공중령 5호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/cf6e03a68b857ba97c1db831c778f961"
+  },
+  {
+    "season_grade": "특공대령 1호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/965ff81760aba7dbd9ff9a1c7dd3978d"
+  },
+  {
+    "season_grade": "특공대령 2호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/a572a3f1c096e42661cf189f13e69d47"
+  },
+  {
+    "season_grade": "특공대령 3호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/a4a4472c1ffb2d870a79cbcbdc9f0e9a"
+  },
+  {
+    "season_grade": "특공대령 4호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/5faf2f9cd47068b2d81d850360890e45"
+  },
+  {
+    "season_grade": "특공대령 5호봉",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/db07313ef8aac75555fd799d24d9f014"
+  },
+  {
+    "season_grade": "특급준장",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/a2f5b4d56be784f7bee1bdafe0813afc"
+  },
+  {
+    "season_grade": "특급소장",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/58d2558e002f8dd74f55470e953f3ecb"
+  },
+  {
+    "season_grade": "특급중장",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/3c72710084d42d0c7723f8984c9de57c"
+  },
+  {
+    "season_grade": "특급대장",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/644476cb5f3bb3da1899afcdc0ee507b"
+  },
+  {
+    "season_grade": "부사령관",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/e1ab5d6f641c4908f6240db26e5c2773"
+  },
+  {
+    "season_grade": "사령관",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/db87b52ab2cf50e13869554685be7951"
+  },
+  {
+    "season_grade": "총사령관",
+    "season_grade_image": "https://open.api.nexon.com/static/suddenattack/img/1b33bc224cac2dadfe4edf61976c4dd8"
+  }
+]
+
+10. 티어 메타데이터
+/static/suddenattack/meta/tier
+
+리턴값
+[
+  {
+    "tier": "UNRANK",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/012402621044afac26c6066600ddc646"
+  },
+  {
+    "tier": "BRONZE I",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/b0f5af75bf3550a99f889430dfca5c74"
+  },
+  {
+    "tier": "BRONZE II",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/f86f0c277939b3f76027f7925f856074"
+  },
+  {
+    "tier": "BRONZE III",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/d310c656c6c7000f22c118f7de7bedb4"
+  },
+  {
+    "tier": "SILVER I",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/c4915978785a7606078533ed969345d1"
+  },
+  {
+    "tier": "SILVER II",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/e79039fd53e85da3e798cbcb4fa66923"
+  },
+  {
+    "tier": "SILVER III",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/e78cb254264207e7cdca60574e9f0d0c"
+  },
+  {
+    "tier": "GOLD I",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/730c46caab05526911863c926795e248"
+  },
+  {
+    "tier": "GOLD II",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/89957d34fd79fc5930787d4c5f39143a"
+  },
+  {
+    "tier": "GOLD III",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/9b2ec6d8b04ac98d8f72a89faeda0a97"
+  },
+  {
+    "tier": "MASTER I",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/b653f4fd54581281740582c5d2161fe3"
+  },
+  {
+    "tier": "MASTER II",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/46e4958e9cb1090c15689b144095a0d5"
+  },
+  {
+    "tier": "MASTER III",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/72115a52cd367614bb383d4e59ab38ac"
+  },
+  {
+    "tier": "GRAND MASTER I",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/1c1421d5d7afa6515be53abf11d555f7"
+  },
+  {
+    "tier": "GRAND MASTER II",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/a0fa9b80343d2064a75f132eac84f596"
+  },
+  {
+    "tier": "GRAND MASTER III",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/8193b86db355b149d49e76d47d3f730d"
+  },
+  {
+    "tier": "LEGEND",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/2505b378734c223d6961dc336f3aee1f"
+  },
+  {
+    "tier": "RANKER",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/e58a5681cde2e41b72cecb6b96d745f2"
+  },
+  {
+    "tier": "HIGH RANKER",
+    "tier_image": "https://open.api.nexon.com/static/suddenattack/img/5da40d54b530b98ee4686f0a992074f2"
+  }
+]
\ No newline at end of file
diff --git a/searchgg 디자인 토큰.html b/searchgg 디자인 토큰.html
deleted file mode 100644
index 378c340..0000000
--- a/searchgg 디자인 토큰.html	
+++ /dev/null
@@ -1,311 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>searchgg · 디자인 토큰</title>
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&display=swap" rel="stylesheet" />
-<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
-<style>
-  :root {
-    /* ── 표면 / 배경 ── */
-    --bg: #ffffff;
-    --bg2: #eef0f2;
-    --surf: #ffffff;
-    --surf2: #f1f3f5;
-    --head: #f1f3f5;       /* 패널 헤더바 */
-    /* ── 경계선 ── */
-    --line: #e4e6e9;
-    --line2: #d2d6db;
-    /* ── 텍스트 ── */
-    --ink: #20242b;        /* 본문 강조 */
-    --t2: #5b626c;         /* 보조 */
-    --t3: #949aa3;         /* 약한 / 캡션 */
-    --t-table: #33373d;    /* 표 셀 */
-    --placeholder: #9aa1ab;
-    /* ── 브랜드 / 시맨틱 ── */
-    --point: #48515f;      /* 메인 포인트(올리브/슬레이트) */
-    --point-soft: rgba(72,81,95,.12);
-    --positive: #48515f;   /* 승 / 좋은 승률 */
-    --negative: #e5484d;   /* 패 / 데스 / 마감임박 */
-    --up: #16a34a;         /* 상승 추세 */
-    --accent-blue: #2f6fed;/* 그래프 승률선 / 블루 엠블럼 */
-    --gold: #c0901a;       /* 영관 계급 / 챔피언 */
-    /* ── 외부 채널 ── */
-    --discord: #5865F2;
-    --kakao: #FEE500;
-    --kakao-ink: #191600;
-    --chzzk: #00b6a0;
-    --soop: #0064ff;
-    --youtube: #e62117;
-    /* ── 모양 ── */
-    --r-xs: 4px; --r-sm: 5px; --r-md: 7px; --r-lg: 8px; --r-xl: 14px; --r-pill: 20px;
-    /* ── 그림자 ── */
-    --sh-card: 0 1px 2px rgba(0,0,0,.04);
-    --sh-hover: 0 4px 14px rgba(0,0,0,.10);
-    --sh-pop: 0 6px 22px rgba(0,0,0,.10);
-    --sh-modal: 0 24px 70px rgba(0,0,0,.34);
-  }
-  * { box-sizing: border-box; }
-  html, body { margin: 0; padding: 0; background: var(--bg2); }
-  body { font-family: 'Pretendard', sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
-  .num { font-family: 'Chakra Petch', sans-serif; }
-  ::-webkit-scrollbar { width: 0; height: 0; }
-
-  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px 80px; }
-
-  /* 헤더 */
-  header.top { background: linear-gradient(135deg,#23262b,#2e333b); color: #fff; }
-  header.top .inner { max-width: 1080px; margin: 0 auto; padding: 40px 28px 34px; }
-  .kicker { font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: rgba(255,255,255,.55); }
-  header.top h1 { margin: 10px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -.6px; }
-  header.top p { margin: 9px 0 0; font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.6; }
-  .brand { font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: -.5px; }
-
-  section { margin-top: 40px; }
-  .sec-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 2px solid var(--ink); }
-  .sec-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
-  .sec-head .en { font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--t3); }
-  .sec-note { font-size: 13px; color: var(--t2); margin: -8px 0 18px; line-height: 1.6; }
-
-  /* 스와치 그리드 */
-  .grid { display: grid; gap: 14px; }
-  .g4 { grid-template-columns: repeat(4, 1fr); }
-  .g3 { grid-template-columns: repeat(3, 1fr); }
-  .g2 { grid-template-columns: repeat(2, 1fr); }
-
-  .swatch { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); }
-  .swatch .chip { height: 76px; }
-  .swatch .meta { padding: 10px 12px; }
-  .swatch .nm { font-size: 13px; font-weight: 700; }
-  .swatch .var { font-family: 'Chakra Petch', sans-serif; font-size: 11.5px; color: var(--t2); margin-top: 2px; }
-  .swatch .hex { font-family: 'Chakra Petch', sans-serif; font-size: 11.5px; color: var(--t3); text-transform: uppercase; margin-top: 1px; }
-
-  /* 램프 */
-  .ramp { display: flex; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-card); }
-  .ramp > div { flex: 1; height: 64px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-family: 'Chakra Petch', sans-serif; font-size: 10px; color: rgba(255,255,255,.92); font-weight: 600; }
-
-  /* 타이포 표본 */
-  .type-row { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
-  .type-row:last-child { border-bottom: none; }
-  .type-row .label { width: 150px; flex-shrink: 0; font-size: 12px; color: var(--t3); font-weight: 600; }
-  .type-row .label b { display: block; color: var(--t2); font-size: 12.5px; font-weight: 700; }
-  .type-row .spec { width: 130px; flex-shrink: 0; font-family: 'Chakra Petch', sans-serif; font-size: 12px; color: var(--t3); }
-
-  /* 토큰 표 */
-  table.tok { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); }
-  table.tok th, table.tok td { text-align: left; padding: 11px 16px; font-size: 13px; border-bottom: 1px solid var(--line); }
-  table.tok thead th { background: var(--surf2); font-size: 11px; font-weight: 700; color: var(--t3); letter-spacing: .3px; }
-  table.tok tbody tr:last-child td { border-bottom: none; }
-  table.tok td.k { font-family: 'Chakra Petch', sans-serif; font-weight: 700; color: var(--ink); width: 220px; }
-  table.tok td.v { font-family: 'Chakra Petch', sans-serif; color: var(--t2); }
-  .demo-box { display: inline-flex; align-items: center; gap: 10px; }
-
-  /* 컴포넌트 미니 */
-  .comp-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-card); }
-  .btn { font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 13px; border-radius: var(--r-md); padding: 10px 16px; cursor: default; border: 1px solid var(--line2); }
-  .btn.primary { background: var(--point); color: #fff; border: none; }
-  .btn.ghost { background: #fff; color: #3a4049; }
-  .pill { display: inline-block; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; border: 1px solid var(--line2); color: var(--t2); }
-  .pill.on { background: var(--point); color: #fff; border-color: var(--point); }
-  .tag { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; color: var(--point); background: var(--point-soft); }
-  .codeblock { background: #1c1f24; color: #e7e9ec; border-radius: var(--r-lg); padding: 18px 20px; font-family: 'Chakra Petch', monospace; font-size: 12.5px; line-height: 1.7; overflow-x: auto; white-space: pre; }
-</style>
-</head>
-<body>
-<header class="top">
-  <div class="inner">
-    <div class="kicker">SEARCH.GG · DESIGN TOKENS</div>
-    <h1><span class="brand">search<span style="color:#8b94a0">.gg</span></span> 디자인 토큰</h1>
-    <p>서든어택 전적검색 서비스의 색·타이포·간격·컴포넌트 토큰 정의서입니다.<br/>밝은 표면 + 올리브/슬레이트 포인트, 숫자는 Chakra Petch, 본문은 Pretendard를 사용합니다.</p>
-  </div>
-</header>
-
-<div class="wrap">
-
-  <!-- 표면 / 텍스트 -->
-  <section>
-    <div class="sec-head"><h2>표면 & 텍스트</h2><span class="en">SURFACE / TEXT</span></div>
-    <div class="grid g4" id="surface"></div>
-  </section>
-
-  <!-- 브랜드 / 시맨틱 -->
-  <section>
-    <div class="sec-head"><h2>브랜드 & 시맨틱</h2><span class="en">BRAND / SEMANTIC</span></div>
-    <p class="sec-note">포인트 컬러는 올리브-슬레이트 <b>#48515f</b> 하나로 통일합니다. 승/긍정은 포인트색, 패/데스/위험은 레드, 추세 상승은 그린을 씁니다.</p>
-    <div class="grid g4" id="semantic"></div>
-  </section>
-
-  <!-- 외부 채널 -->
-  <section>
-    <div class="sec-head"><h2>외부 채널</h2><span class="en">CHANNELS</span></div>
-    <div class="grid g3" id="channel"></div>
-  </section>
-
-  <!-- 계급 색 램프 -->
-  <section>
-    <div class="sec-head"><h2>계급 색 램프</h2><span class="en">MILITARY RANK</span></div>
-    <p class="sec-note">사병(슬레이트) → 부사관(브론즈) → 준·위관(블루그레이) → 영관·장성(골드)으로 이어지는 군 계급 색입니다.</p>
-    <div class="ramp" id="rankramp"></div>
-  </section>
-
-  <!-- 랭크전 티어 -->
-  <section>
-    <div class="sec-head"><h2>랭크전 티어 색</h2><span class="en">RANKED TIER</span></div>
-    <div class="ramp" id="tierramp"></div>
-  </section>
-
-  <!-- 엠블럼 팔레트 -->
-  <section>
-    <div class="sec-head"><h2>클랜 엠블럼 팔레트</h2><span class="en">EMBLEM</span></div>
-    <p class="sec-note">클랜 엠블럼 배경에 쓰는 8색. 심볼 색은 흰색 + 파스텔 4색을 조합합니다.</p>
-    <div class="ramp" id="emblemramp" style="margin-bottom:12px"></div>
-    <div class="ramp" id="symbolramp"></div>
-  </section>
-
-  <!-- 타이포그래피 -->
-  <section>
-    <div class="sec-head"><h2>타이포그래피</h2><span class="en">TYPE</span></div>
-    <p class="sec-note"><b>Pretendard</b> — 본문·UI 전반(400~800). &nbsp;<b>Chakra Petch</b> — 숫자·지표·라벨·로고(500/600/700).</p>
-    <div class="comp-card" id="type"></div>
-  </section>
-
-  <!-- 간격 / 라디우스 / 그림자 -->
-  <section>
-    <div class="sec-head"><h2>모양 & 깊이</h2><span class="en">RADIUS / SHADOW</span></div>
-    <div class="grid g2">
-      <table class="tok">
-        <thead><tr><th>라디우스</th><th>값</th><th>용도</th></tr></thead>
-        <tbody id="radius"></tbody>
-      </table>
-      <table class="tok">
-        <thead><tr><th>그림자</th><th>용도</th></tr></thead>
-        <tbody id="shadow"></tbody>
-      </table>
-    </div>
-  </section>
-
-  <!-- 컴포넌트 -->
-  <section>
-    <div class="sec-head"><h2>핵심 컴포넌트</h2><span class="en">COMPONENTS</span></div>
-    <div class="comp-card">
-      <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px">
-        <span class="btn primary">기본 버튼</span>
-        <span class="btn ghost">보조 버튼</span>
-        <span class="pill on">선택됨</span>
-        <span class="pill">필터 칩</span>
-        <span class="tag">즐겜/친목팟</span>
-      </div>
-      <div style="display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--t2)">
-        <span>승 <b class="num" style="color:var(--positive)">128승</b></span>
-        <span>패 <b class="num" style="color:var(--negative)">74패</b></span>
-        <span>K/D/A <b class="num"><span style="color:var(--ink)">24</span> / <span style="color:var(--negative)">11</span> / <span style="color:var(--point)">7</span></b></span>
-        <span>추세 <b class="num" style="color:var(--up)">▲6</b></span>
-      </div>
-    </div>
-  </section>
-
-  <!-- CSS 토큰 코드 -->
-  <section>
-    <div class="sec-head"><h2>CSS 토큰</h2><span class="en">:ROOT</span></div>
-    <p class="sec-note">아래 블록을 그대로 스타일시트 최상단에 붙여 넣어 사용합니다.</p>
-    <div class="codeblock" id="csscode"></div>
-  </section>
-
-</div>
-
-<script>
-  const surface = [
-    ['배경', '--bg', '#ffffff'], ['앱 배경', '--bg2', '#eef0f2'],
-    ['표면2', '--surf2', '#f1f3f5'], ['패널 헤더', '--head', '#f1f3f5'],
-    ['경계선', '--line', '#e4e6e9'], ['진한 경계', '--line2', '#d2d6db'],
-    ['본문 강조', '--ink', '#20242b'], ['보조 텍스트', '--t2', '#5b626c'],
-    ['약한 텍스트', '--t3', '#949aa3'], ['표 셀', '--t-table', '#33373d'],
-    ['플레이스홀더', '--placeholder', '#9aa1ab'], ['표면', '--surf', '#ffffff'],
-  ];
-  const semantic = [
-    ['포인트', '--point', '#48515f'], ['포인트 소프트', '--point-soft', 'rgba(72,81,95,.12)'],
-    ['긍정 / 승', '--positive', '#48515f'], ['부정 / 패·데스', '--negative', '#e5484d'],
-    ['상승 추세', '--up', '#16a34a'], ['그래프 블루', '--accent-blue', '#2f6fed'],
-    ['골드 / 챔피언', '--gold', '#c0901a'], ['위험 / 마감임박', '--negative', '#e5484d'],
-  ];
-  const channel = [
-    ['디스코드', '--discord', '#5865F2'], ['카카오 오픈챗', '--kakao', '#FEE500'],
-    ['치지직', '--chzzk', '#00b6a0'], ['숲 (SOOP)', '--soop', '#0064ff'],
-    ['유튜브', '--youtube', '#e62117'], ['카카오 잉크', '--kakao-ink', '#191600'],
-  ];
-  const rankramp = ['#737d8a','#525c68','#b3712b','#9e6022','#566f8e','#415d7e','#c0901a','#ad800c','#9c7b1e','#7d6111'];
-  const ranknames = ['이병','병장','하사','원사','준위','대위','소령','대령','준장','대장'];
-  const tiers = [['브론즈','#a9743b'],['실버','#94a0aa'],['골드','#c4960f'],['마스터','#5b8a72'],['그랜드마스터','#4f6b8a'],['챌린저','#7a5bb0'],['랭커','#b25a2b'],['하이랭커','#b23b3b']];
-  const emblem = ['#48515f','#2f6fed','#c0392b','#1f8a5b','#8e44ad','#d98a1f','#16708a','#33373d'];
-  const symbols = [['#ffffff','흰'],['#ffe08a','골드'],['#ffd1d1','로즈'],['#bfe3ff','스카이'],['#c9f0d8','민트']];
-
-  const isLight = (hex) => {
-    const h = hex.replace('#',''); if (h.length < 6) return false;
-    const r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
-    return (0.299*r + 0.587*g + 0.114*b) > 150;
-  };
-  const swatch = (nm, v, hex) => {
-    const tc = isLight(hex) ? '#20242b' : '#fff';
-    return `<div class="swatch"><div class="chip" style="background:${hex}"></div><div class="meta"><div class="nm">${nm}</div><div class="var">var(${v})</div><div class="hex">${hex}</div></div></div>`;
-  };
-  document.getElementById('surface').innerHTML = surface.map(s => swatch(...s)).join('');
-  document.getElementById('semantic').innerHTML = semantic.map(s => swatch(...s)).join('');
-  document.getElementById('channel').innerHTML = channel.map(s => swatch(...s)).join('');
-
-  document.getElementById('rankramp').innerHTML = rankramp.map((c,i) => `<div style="background:${c}">${ranknames[i]}</div>`).join('');
-  document.getElementById('tierramp').innerHTML = tiers.map(([n,c]) => `<div style="background:${c};color:${isLight(c)?'#20242b':'#fff'}">${n}</div>`).join('');
-  document.getElementById('emblemramp').innerHTML = emblem.map(c => `<div style="background:${c}">${c.slice(1)}</div>`).join('');
-  document.getElementById('symbolramp').innerHTML = symbols.map(([c,n]) => `<div style="background:${c};color:#20242b;border-right:1px solid #e4e6e9">${n}</div>`).join('');
-
-  const types = [
-    ['페이지 타이틀', 'Pretendard 800 · 30px', '<span style="font-size:30px;font-weight:800;letter-spacing:-.6px">전적 검색</span>'],
-    ['섹션 헤더', 'Pretendard 800 · 19px', '<span style="font-size:19px;font-weight:800">시즌별 랭크전 전적</span>'],
-    ['패널 제목', 'Pretendard 800 · 15px', '<span style="font-size:15px;font-weight:800">클랜원</span>'],
-    ['본문', 'Pretendard 500 · 14px', '<span style="font-size:14px;font-weight:500">분위기 좋은 우리 클랜에 놀러오세요.</span>'],
-    ['보조 / 캡션', 'Pretendard 600 · 12px', '<span style="font-size:12px;font-weight:600;color:#5b626c">최근 14전 · 9승 5패</span>'],
-    ['지표 숫자', 'Chakra Petch 700 · 22px', '<span class="num" style="font-size:22px;font-weight:700">68<span style="font-size:14px">%</span></span>'],
-    ['라벨 / EN', 'Chakra Petch 700 · 11px · ls 2px', '<span class="num" style="font-size:11px;font-weight:700;letter-spacing:2px;color:#949aa3">RANKED</span>'],
-    ['로고', 'Chakra Petch 700 · ls -.5px', '<span class="brand" style="font-size:20px">search<span style="color:#48515f">.gg</span></span>'],
-  ];
-  document.getElementById('type').innerHTML = types.map(([l,s,d]) =>
-    `<div class="type-row"><div class="label"><b>${l}</b></div><div class="spec">${s}</div><div>${d}</div></div>`).join('');
-
-  const radius = [['--r-xs','4px','인풋·작은 배지'],['--r-sm','5px','기본 카드·패널'],['--r-md','7px','버튼·인풋'],['--r-lg','8px','큰 카드'],['--r-xl','14px','모달'],['--r-pill','20px','칩·태그']];
-  document.getElementById('radius').innerHTML = radius.map(([k,v,u]) =>
-    `<tr><td class="k">${k}</td><td class="v"><span class="demo-box"><span style="width:34px;height:24px;background:var(--point-soft);border:1px solid var(--line2);border-radius:${v}"></span>${v}</span></td><td>${u}</td></tr>`).join('');
-
-  const shadow = [['--sh-card','카드 기본'],['--sh-hover','카드 호버'],['--sh-pop','드롭다운·검색'],['--sh-modal','모달']];
-  document.getElementById('shadow').innerHTML = shadow.map(([k,u]) =>
-    `<tr><td class="k">${k}</td><td><span class="demo-box"><span style="width:46px;height:30px;background:#fff;border-radius:7px;box-shadow:var(${k})"></span><span style="color:var(--t2)">${u}</span></span></td></tr>`).join('');
-
-  document.getElementById('csscode').textContent =
-`:root {
-  /* 표면 */
-  --bg:#ffffff; --bg2:#eef0f2; --surf2:#f1f3f5; --head:#f1f3f5;
-  --line:#e4e6e9; --line2:#d2d6db;
-  /* 텍스트 */
-  --ink:#20242b; --t2:#5b626c; --t3:#949aa3; --placeholder:#9aa1ab;
-  /* 시맨틱 */
-  --point:#48515f; --point-soft:rgba(72,81,95,.12);
-  --positive:#48515f; --negative:#e5484d; --up:#16a34a;
-  --accent-blue:#2f6fed; --gold:#c0901a;
-  /* 채널 */
-  --discord:#5865F2; --kakao:#FEE500; --chzzk:#00b6a0; --soop:#0064ff; --youtube:#e62117;
-  /* 라디우스 */
-  --r-xs:4px; --r-sm:5px; --r-md:7px; --r-lg:8px; --r-xl:14px; --r-pill:20px;
-  /* 그림자 */
-  --sh-card:0 1px 2px rgba(0,0,0,.04);
-  --sh-hover:0 4px 14px rgba(0,0,0,.10);
-  --sh-pop:0 6px 22px rgba(0,0,0,.10);
-  --sh-modal:0 24px 70px rgba(0,0,0,.34);
-}
-
-/* 폰트 */
-body   { font-family:'Pretendard',sans-serif; }
-.num   { font-family:'Chakra Petch',sans-serif; }  /* 숫자·지표·라벨 */`;
-</script>
-</body>
-</html>
diff --git a/surinz-source/image-slot.js b/surinz-source/image-slot.js
deleted file mode 100644
index f90728a..0000000
--- a/surinz-source/image-slot.js
+++ /dev/null
@@ -1,643 +0,0 @@
-// @ds-adherence-ignore -- omelette starter scaffold (raw elements/hex/px by design)
-/* BEGIN USAGE */
-/**
- * <image-slot> — user-fillable image placeholder.
- *
- * Drop this into a deck, mockup, or page wherever you want the user to
- * supply an image. You control the slot's shape and size; the user fills it
- * by dragging an image file onto it (or clicking to browse). The dropped
- * image persists across reloads via a .image-slots.state.json sidecar —
- * same read-via-fetch / write-via-window.omelette pattern as
- * design_canvas.jsx, so the filled slot shows on share links, downloaded
- * zips, and PPTX export. Outside the omelette runtime the slot is read-only.
- *
- * The host bridge only allows sidecar writes at the project root, so the
- * HTML that uses this component is assumed to live at the project root too
- * (same constraint as design_canvas.jsx).
- *
- * Attributes:
- *   id           Persistence key. REQUIRED for the drop to survive reload —
- *                every slot on the page needs a distinct id.
- *   shape        'rect' | 'rounded' | 'circle' | 'pill'   (default 'rounded')
- *                'circle' applies 50% border-radius; on a non-square slot
- *                that's an ellipse — set equal width and height for a true
- *                circle.
- *   radius       Corner radius in px for 'rounded'.       (default 12)
- *   mask         Any CSS clip-path value. Overrides `shape` — use this for
- *                hexagons, blobs, arbitrary polygons.
- *   fit          object-fit: cover | contain | fill.       (default 'cover')
- *                With cover (the default) double-clicking the filled slot
- *                enters a reframe mode: the whole image spills past the mask
- *                (translucent outside, opaque inside), drag to reposition,
- *                corner-drag to scale. The crop persists alongside the image
- *                in the sidecar. contain/fill stay static.
- *   position     object-position for fit=contain|fill.     (default '50% 50%')
- *   placeholder  Empty-state caption.                      (default 'Drop an image')
- *   src          Optional initial/fallback image URL. A user drop overrides
- *                it; clearing the drop reveals src again.
- *
- * Size and layout come from ordinary CSS on the element — width/height
- * inline or from a parent grid — so it composes with any layout.
- *
- * Usage:
- *   <image-slot id="hero"   style="width:800px;height:450px" shape="rounded" radius="20"
- *               placeholder="Drop a hero image"></image-slot>
- *   <image-slot id="avatar" style="width:120px;height:120px" shape="circle"></image-slot>
- *   <image-slot id="kite"   style="width:300px;height:300px"
- *               mask="polygon(50% 0, 100% 50%, 50% 100%, 0 50%)"></image-slot>
- */
-/* END USAGE */
-
-(() => {
-  const STATE_FILE = '.image-slots.state.json';
-  // 2× a ~600px slot in a 1920-wide deck — retina-sharp without making the
-  // sidecar enormous. A 1200px WebP at q=0.85 is ~150-300KB.
-  const MAX_DIM = 1200;
-  // Raster formats only. SVG is excluded (can carry script; createImageBitmap
-  // on SVG blobs is inconsistent). GIF is excluded because the canvas
-  // re-encode keeps only the first frame, so an animated GIF would silently
-  // go still — better to reject than surprise.
-  const ACCEPT = ['image/png', 'image/jpeg', 'image/webp', 'image/avif'];
-
-  // ── Shared sidecar store ────────────────────────────────────────────────
-  // One fetch + immediate write-on-change for every <image-slot> on the
-  // page. Reads via fetch() so viewing works anywhere the HTML and sidecar
-  // are served together; writes go through window.omelette.writeFile, which
-  // the host allowlists to *.state.json basenames only.
-  const subs = new Set();
-  let slots = {};
-  // ids explicitly cleared before the sidecar fetch resolved — otherwise
-  // the merge below can't tell "never set" from "just deleted" and would
-  // resurrect the sidecar's stale value.
-  const tombstones = new Set();
-  let loaded = false;
-  let loadP = null;
-
-  function load() {
-    if (loadP) return loadP;
-    loadP = fetch(STATE_FILE)
-      .then((r) => (r.ok ? r.json() : null))
-      .then((j) => {
-        // Merge: sidecar loses to any in-memory change that raced ahead of
-        // the fetch (drop or clear) so neither is clobbered by hydration.
-        if (j && typeof j === 'object') {
-          const merged = Object.assign({}, j, slots);
-          // A framing-only write that raced ahead of hydration must not
-          // drop a user image that's only on disk — inherit u from the
-          // sidecar for any in-memory entry that lacks one.
-          for (const k in slots) {
-            if (merged[k] && !merged[k].u && j[k]) {
-              merged[k].u = typeof j[k] === 'string' ? j[k] : j[k].u;
-            }
-          }
-          for (const id of tombstones) delete merged[id];
-          slots = merged;
-        }
-        tombstones.clear();
-      })
-      .catch(() => {})
-      .then(() => { loaded = true; subs.forEach((fn) => fn()); });
-    return loadP;
-  }
-
-  // Serialize writes so two near-simultaneous drops on different slots
-  // can't reorder at the backend and leave the sidecar with only the
-  // first. A save requested mid-flight just marks dirty and re-fires on
-  // completion with the then-current slots.
-  let saving = false;
-  let saveDirty = false;
-  function save() {
-    if (saving) { saveDirty = true; return; }
-    const w = window.omelette && window.omelette.writeFile;
-    if (!w) return;
-    saving = true;
-    Promise.resolve(w(STATE_FILE, JSON.stringify(slots)))
-      .catch(() => {})
-      .then(() => { saving = false; if (saveDirty) { saveDirty = false; save(); } });
-  }
-
-  const S_MAX = 5;
-  const clampS = (s) => Math.max(1, Math.min(S_MAX, s));
-
-  // Normalize a stored slot value. Pre-reframe sidecars stored a bare
-  // data-URL string; newer ones store {u, s, x, y}. Either shape is valid.
-  function getSlot(id) {
-    const v = slots[id];
-    if (!v) return null;
-    return typeof v === 'string' ? { u: v, s: 1, x: 0, y: 0 } : v;
-  }
-
-  function setSlot(id, val) {
-    if (!id) return;
-    if (val) { slots[id] = val; tombstones.delete(id); }
-    else { delete slots[id]; if (!loaded) tombstones.add(id); }
-    subs.forEach((fn) => fn());
-    // A drop is rare + high-value — write immediately so nav-away can't lose
-    // it. Gate on the initial read so we don't overwrite a sidecar we haven't
-    // merged yet; the merge in load() keeps this change once the read lands.
-    if (loaded) save(); else load().then(save);
-  }
-
-  // ── Image downscale ─────────────────────────────────────────────────────
-  // Encode through a canvas so the sidecar carries resized bytes, not the
-  // raw upload. Longest side is capped at 2× the slot's rendered width
-  // (retina) and at MAX_DIM. WebP keeps alpha and is ~10× smaller than PNG
-  // for photos, so there's no need for per-image format picking.
-  async function toDataUrl(file, targetW) {
-    const bitmap = await createImageBitmap(file);
-    try {
-      const cap = Math.min(MAX_DIM, Math.max(1, Math.round(targetW * 2)) || MAX_DIM);
-      const scale = Math.min(1, cap / Math.max(bitmap.width, bitmap.height));
-      const w = Math.max(1, Math.round(bitmap.width * scale));
-      const h = Math.max(1, Math.round(bitmap.height * scale));
-      const canvas = document.createElement('canvas');
-      canvas.width = w; canvas.height = h;
-      canvas.getContext('2d').drawImage(bitmap, 0, 0, w, h);
-      return canvas.toDataURL('image/webp', 0.85);
-    } finally {
-      bitmap.close && bitmap.close();
-    }
-  }
-
-  // ── Custom element ──────────────────────────────────────────────────────
-  const stylesheet =
-    ':host{display:inline-block;position:relative;vertical-align:top;' +
-    '  font:13px/1.3 system-ui,-apple-system,sans-serif;color:rgba(0,0,0,.55);width:240px;height:160px}' +
-    '.frame{position:absolute;inset:0;overflow:hidden;background:rgba(0,0,0,.04)}' +
-    // .frame img (clipped) and .spill (unclipped ghost + handles) share the
-    // same left/top/width/height in frame-%, computed by _applyView(), so the
-    // inside-mask crop and the outside-mask spill stay pixel-aligned.
-    '.frame img{position:absolute;max-width:none;transform:translate(-50%,-50%);' +
-    '  -webkit-user-drag:none;user-select:none;touch-action:none}' +
-    // Reframe mode (double-click): the full image spills past the mask. The
-    // spill layer is sized to the IMAGE bounds so its corners are where the
-    // resize handles belong. The ghost <img> inside is translucent; the real
-    // clipped <img> underneath shows the opaque in-mask crop.
-    '.spill{position:absolute;transform:translate(-50%,-50%);display:none;z-index:1;' +
-    '  cursor:grab;touch-action:none}' +
-    ':host([data-panning]) .spill{cursor:grabbing}' +
-    '.spill .ghost{position:absolute;inset:0;width:100%;height:100%;opacity:.35;' +
-    '  pointer-events:none;-webkit-user-drag:none;user-select:none;' +
-    '  box-shadow:0 0 0 1px rgba(0,0,0,.2),0 12px 32px rgba(0,0,0,.2)}' +
-    '.spill .handle{position:absolute;width:12px;height:12px;border-radius:50%;' +
-    '  background:#fff;box-shadow:0 0 0 1.5px #c96442,0 1px 3px rgba(0,0,0,.3);' +
-    '  transform:translate(-50%,-50%)}' +
-    '.spill .handle[data-c=nw]{left:0;top:0;cursor:nwse-resize}' +
-    '.spill .handle[data-c=ne]{left:100%;top:0;cursor:nesw-resize}' +
-    '.spill .handle[data-c=sw]{left:0;top:100%;cursor:nesw-resize}' +
-    '.spill .handle[data-c=se]{left:100%;top:100%;cursor:nwse-resize}' +
-    ':host([data-reframe]){z-index:10}' +
-    ':host([data-reframe]) .spill{display:block}' +
-    ':host([data-reframe]) .frame{box-shadow:0 0 0 2px #c96442}' +
-    '.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;' +
-    '  justify-content:center;gap:6px;text-align:center;padding:12px;box-sizing:border-box;' +
-    '  cursor:pointer;user-select:none}' +
-    '.empty svg{opacity:.45}' +
-    '.empty .cap{max-width:90%;font-weight:500;letter-spacing:.01em}' +
-    '.empty .sub{font-size:11px}' +
-    '.empty .sub u{text-underline-offset:2px;text-decoration-color:rgba(0,0,0,.25)}' +
-    '.empty:hover .sub u{color:rgba(0,0,0,.75);text-decoration-color:currentColor}' +
-    ':host([data-over]) .frame{outline:2px solid #c96442;outline-offset:-2px;' +
-    '  background:rgba(201,100,66,.10)}' +
-    '.ring{position:absolute;inset:0;pointer-events:none;border:1.5px dashed rgba(0,0,0,.25);' +
-    '  transition:border-color .12s}' +
-    ':host([data-over]) .ring{border-color:#c96442}' +
-    ':host([data-filled]) .ring{display:none}' +
-    // Controls sit BELOW the mask (top:100%), absolutely positioned so the
-    // author-declared slot height is unaffected. The gap is padding, not a
-    // top offset, so the hover target stays contiguous with the frame.
-    '.ctl{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:8px;' +
-    '  display:flex;gap:6px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:2;' +
-    '  white-space:nowrap}' +
-    ':host([data-filled][data-editable]:hover) .ctl,:host([data-reframe]) .ctl' +
-    '  {opacity:1;pointer-events:auto}' +
-    '.ctl button{appearance:none;border:0;border-radius:6px;padding:5px 10px;cursor:pointer;' +
-    '  background:rgba(0,0,0,.65);color:#fff;font:11px/1 system-ui,-apple-system,sans-serif;' +
-    '  backdrop-filter:blur(6px)}' +
-    '.ctl button:hover{background:rgba(0,0,0,.8)}' +
-    '.err{position:absolute;left:8px;bottom:8px;right:8px;color:#b3261e;font-size:11px;' +
-    '  background:rgba(255,255,255,.85);padding:4px 6px;border-radius:5px;pointer-events:none}';
-
-  const icon =
-    '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" ' +
-    'stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">' +
-    '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>' +
-    '<path d="m21 15-5-5L5 21"/></svg>';
-
-  class ImageSlot extends HTMLElement {
-    static get observedAttributes() {
-      return ['shape', 'radius', 'mask', 'fit', 'position', 'placeholder', 'src', 'id'];
-    }
-
-    constructor() {
-      super();
-      const root = this.attachShadow({ mode: 'open' });
-      // .spill and .ctl sit OUTSIDE .frame so overflow:hidden + border-radius
-      // on the frame (circle, pill, rounded) can't clip them.
-      root.innerHTML =
-        '<style>' + stylesheet + '</style>' +
-        '<div class="frame" part="frame">' +
-        '  <img part="image" alt="" draggable="false" style="display:none">' +
-        '  <div class="empty" part="empty">' + icon +
-        '    <div class="cap"></div>' +
-        '    <div class="sub">or <u>browse files</u></div></div>' +
-        '  <div class="ring" part="ring"></div>' +
-        '</div>' +
-        '<div class="spill">' +
-        '  <img class="ghost" alt="" draggable="false">' +
-        '  <div class="handle" data-c="nw"></div><div class="handle" data-c="ne"></div>' +
-        '  <div class="handle" data-c="sw"></div><div class="handle" data-c="se"></div>' +
-        '</div>' +
-        '<div class="ctl"><button data-act="replace" title="Replace image">Replace</button>' +
-        '  <button data-act="clear" title="Remove image">Remove</button></div>' +
-        '<input type="file" accept="' + ACCEPT.join(',') + '" hidden>';
-      this._frame = root.querySelector('.frame');
-      this._ring = root.querySelector('.ring');
-      this._img = root.querySelector('.frame img');
-      this._empty = root.querySelector('.empty');
-      this._cap = root.querySelector('.cap');
-      this._sub = root.querySelector('.sub');
-      this._spill = root.querySelector('.spill');
-      this._ghost = root.querySelector('.ghost');
-      this._err = null;
-      this._input = root.querySelector('input');
-      this._depth = 0;
-      this._gen = 0;
-      this._view = { s: 1, x: 0, y: 0 };
-      this._subFn = () => this._render();
-      // Shadow-DOM listeners live with the shadow DOM — bound once here so
-      // disconnect/reconnect (e.g. React remount) doesn't stack handlers.
-      this._empty.addEventListener('click', () => this._input.click());
-      root.addEventListener('click', (e) => {
-        const act = e.target && e.target.getAttribute && e.target.getAttribute('data-act');
-        if (act === 'replace') { this._exitReframe(true); this._input.click(); }
-        if (act === 'clear') {
-          this._exitReframe(false);
-          this._gen++;
-          this._local = null;
-          if (this.id) setSlot(this.id, null); else this._render();
-        }
-      });
-      this._input.addEventListener('change', () => {
-        const f = this._input.files && this._input.files[0];
-        if (f) this._ingest(f);
-        this._input.value = '';
-      });
-      // naturalWidth/Height aren't known until load — re-apply so the cover
-      // baseline is computed from real dimensions, not the 100%×100% fallback.
-      this._img.addEventListener('load', () => this._applyView());
-      // Gated on editable + fit=cover so share links and contain/fill slots
-      // stay static.
-      this.addEventListener('dblclick', (e) => {
-        if (!this.hasAttribute('data-editable') || !this._reframes()) return;
-        e.preventDefault();
-        if (this.hasAttribute('data-reframe')) this._exitReframe(true);
-        else this._enterReframe();
-      });
-      // Pan + resize both originate on the spill layer. A handle pointerdown
-      // drives an aspect-locked resize anchored at the opposite corner; any
-      // other pointerdown on the spill pans. Offsets are frame-% so a
-      // reframed slot survives responsive resize / PPTX export.
-      this._spill.addEventListener('pointerdown', (e) => {
-        if (e.button !== 0 || !this.hasAttribute('data-reframe')) return;
-        e.preventDefault();
-        e.stopPropagation();
-        this._spill.setPointerCapture(e.pointerId);
-        const rect = this.getBoundingClientRect();
-        const fw = rect.width || 1, fh = rect.height || 1;
-        const corner = e.target.getAttribute && e.target.getAttribute('data-c');
-        let move;
-        if (corner) {
-          // Resize about the OPPOSITE corner. Viewport-px throughout (rect
-          // fw/fh, not clientWidth) so the math survives a transform:scale()
-          // ancestor — deck_stage renders slides scaled-to-fit.
-          const iw = this._img.naturalWidth || 1, ih = this._img.naturalHeight || 1;
-          const base = Math.max(fw / iw, fh / ih);
-          const sx = corner.includes('e') ? 1 : -1;
-          const sy = corner.includes('s') ? 1 : -1;
-          const s0 = this._view.s;
-          const w0 = iw * base * s0, h0 = ih * base * s0;
-          const cx0 = (50 + this._view.x) / 100 * fw;
-          const cy0 = (50 + this._view.y) / 100 * fh;
-          const ox = cx0 - sx * w0 / 2, oy = cy0 - sy * h0 / 2;
-          const diag0 = Math.hypot(w0, h0);
-          const ux = sx * w0 / diag0, uy = sy * h0 / diag0;
-          move = (ev) => {
-            const proj = (ev.clientX - rect.left - ox) * ux +
-                         (ev.clientY - rect.top - oy) * uy;
-            const s = clampS(s0 * proj / diag0);
-            const d = diag0 * s / s0;
-            this._view.s = s;
-            this._view.x = (ox + ux * d / 2) / fw * 100 - 50;
-            this._view.y = (oy + uy * d / 2) / fh * 100 - 50;
-            this._clampView();
-            this._applyView();
-          };
-        } else {
-          this.setAttribute('data-panning', '');
-          const start = { px: e.clientX, py: e.clientY, x: this._view.x, y: this._view.y };
-          move = (ev) => {
-            this._view.x = start.x + (ev.clientX - start.px) / fw * 100;
-            this._view.y = start.y + (ev.clientY - start.py) / fh * 100;
-            this._clampView();
-            this._applyView();
-          };
-        }
-        const up = () => {
-          try { this._spill.releasePointerCapture(e.pointerId); } catch {}
-          this._spill.removeEventListener('pointermove', move);
-          this._spill.removeEventListener('pointerup', up);
-          this._spill.removeEventListener('pointercancel', up);
-          this.removeAttribute('data-panning');
-          this._dragUp = null;
-        };
-        // Stashed so _exitReframe (Escape / outside-click mid-drag) can
-        // tear the capture + listeners down synchronously.
-        this._dragUp = up;
-        this._spill.addEventListener('pointermove', move);
-        this._spill.addEventListener('pointerup', up);
-        this._spill.addEventListener('pointercancel', up);
-      });
-      // Wheel zoom stays available inside reframe mode as a trackpad nicety —
-      // zooms toward the cursor (offset' = cursor·(1-k) + offset·k).
-      this.addEventListener('wheel', (e) => {
-        if (!this.hasAttribute('data-reframe')) return;
-        e.preventDefault();
-        const r = this.getBoundingClientRect();
-        const cx = (e.clientX - r.left) / r.width * 100 - 50;
-        const cy = (e.clientY - r.top) / r.height * 100 - 50;
-        const prev = this._view.s;
-        const next = clampS(prev * Math.pow(1.0015, -e.deltaY));
-        if (next === prev) return;
-        const k = next / prev;
-        this._view.s = next;
-        this._view.x = cx * (1 - k) + this._view.x * k;
-        this._view.y = cy * (1 - k) + this._view.y * k;
-        this._clampView();
-        this._applyView();
-      }, { passive: false });
-    }
-
-    connectedCallback() {
-      // Warn once per page — an id-less slot works for the session but
-      // cannot persist, and two id-less slots would share nothing.
-      if (!this.id && !ImageSlot._warned) {
-        ImageSlot._warned = true;
-        console.warn('<image-slot> without an id will not persist its dropped image.');
-      }
-      this.addEventListener('dragenter', this);
-      this.addEventListener('dragover', this);
-      this.addEventListener('dragleave', this);
-      this.addEventListener('drop', this);
-      subs.add(this._subFn);
-      // width%/height% in _applyView encode the frame aspect at call time —
-      // a host resize (responsive grid, pane divider) would stretch the
-      // image until the next _render. Re-render on size change: _render()
-      // re-seeds _view from stored before clamp/apply, so a shrink→grow
-      // cycle round-trips instead of ratcheting x/y toward the narrower
-      // frame's clamp range.
-      this._ro = new ResizeObserver(() => this._render());
-      this._ro.observe(this);
-      load();
-      this._render();
-    }
-
-    disconnectedCallback() {
-      subs.delete(this._subFn);
-      this.removeEventListener('dragenter', this);
-      this.removeEventListener('dragover', this);
-      this.removeEventListener('dragleave', this);
-      this.removeEventListener('drop', this);
-      if (this._ro) { this._ro.disconnect(); this._ro = null; }
-      this._exitReframe(false);
-    }
-
-    _enterReframe() {
-      if (this.hasAttribute('data-reframe')) return;
-      this.setAttribute('data-reframe', '');
-      this._applyView();
-      // Close on click outside (the spill handler stopPropagation()s so
-      // in-image drags don't reach this) and on Escape. Listeners are held
-      // on the instance so _exitReframe / disconnectedCallback can detach
-      // exactly what was attached.
-      this._outside = (e) => {
-        if (e.composedPath && e.composedPath().includes(this)) return;
-        this._exitReframe(true);
-      };
-      this._esc = (e) => { if (e.key === 'Escape') this._exitReframe(true); };
-      document.addEventListener('pointerdown', this._outside, true);
-      document.addEventListener('keydown', this._esc, true);
-    }
-
-    _exitReframe(commit) {
-      if (!this.hasAttribute('data-reframe')) return;
-      if (this._dragUp) this._dragUp();
-      this.removeAttribute('data-reframe');
-      this.removeAttribute('data-panning');
-      if (this._outside) document.removeEventListener('pointerdown', this._outside, true);
-      if (this._esc) document.removeEventListener('keydown', this._esc, true);
-      this._outside = this._esc = null;
-      if (commit) this._commitView();
-    }
-
-    attributeChangedCallback() { if (this.shadowRoot) this._render(); }
-
-    // handleEvent — one listener object for all four drag events keeps the
-    // add/remove symmetric and the depth counter correct.
-    handleEvent(e) {
-      if (e.type === 'dragenter' || e.type === 'dragover') {
-        // Without preventDefault the browser never fires 'drop'.
-        e.preventDefault();
-        e.stopPropagation();
-        if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
-        if (e.type === 'dragenter') this._depth++;
-        this.setAttribute('data-over', '');
-      } else if (e.type === 'dragleave') {
-        // dragenter/leave fire for every descendant crossing — count depth
-        // so hovering the icon inside the empty state doesn't flicker.
-        if (--this._depth <= 0) { this._depth = 0; this.removeAttribute('data-over'); }
-      } else if (e.type === 'drop') {
-        e.preventDefault();
-        e.stopPropagation();
-        this._depth = 0;
-        this.removeAttribute('data-over');
-        const f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
-        if (f) this._ingest(f);
-      }
-    }
-
-    async _ingest(file) {
-      this._setError(null);
-      if (!file || ACCEPT.indexOf(file.type) < 0) {
-        this._setError('Drop a PNG, JPEG, WebP, or AVIF image.');
-        return;
-      }
-      // toDataUrl can take hundreds of ms on a large photo. A Clear or a
-      // newer drop during that window would be clobbered when this await
-      // resumes — bump + capture a generation so stale encodes bail.
-      const gen = ++this._gen;
-      try {
-        const w = this.clientWidth || this.offsetWidth || MAX_DIM;
-        const url = await toDataUrl(file, w);
-        if (gen !== this._gen) return;
-        // Only exit reframe once the new image is in hand — a rejected type
-        // or decode failure leaves the in-progress crop untouched.
-        this._exitReframe(false);
-        const val = { u: url, s: 1, x: 0, y: 0 };
-        setSlot(this.id || '', val);
-        // Keep a session-local copy for id-less slots so the drop still
-        // shows, even though it cannot persist.
-        if (!this.id) { this._local = val; this._render(); }
-      } catch (err) {
-        if (gen !== this._gen) return;
-        this._setError('Could not read that image.');
-        console.warn('<image-slot> ingest failed:', err);
-      }
-    }
-
-    _setError(msg) {
-      if (this._err) { this._err.remove(); this._err = null; }
-      if (!msg) return;
-      const d = document.createElement('div');
-      d.className = 'err'; d.textContent = msg;
-      this.shadowRoot.appendChild(d);
-      this._err = d;
-      setTimeout(() => { if (this._err === d) { d.remove(); this._err = null; } }, 3000);
-    }
-
-    // Reframing (pan/resize) is only meaningful for fit=cover — contain/fill
-    // keep the old object-fit path and double-click is a no-op.
-    _reframes() {
-      return this.hasAttribute('data-filled') &&
-        (this.getAttribute('fit') || 'cover') === 'cover';
-    }
-
-    // Cover-baseline geometry, shared by clamp/apply/resize. Null until the
-    // img has loaded (naturalWidth is 0 before that) or when the slot has no
-    // layout box — ResizeObserver fires with a 0×0 rect under display:none,
-    // and clamping against a degenerate 1×1 frame would silently pull the
-    // stored pan toward zero.
-    _geom() {
-      const iw = this._img.naturalWidth, ih = this._img.naturalHeight;
-      const fw = this.clientWidth, fh = this.clientHeight;
-      if (!iw || !ih || !fw || !fh) return null;
-      return { iw, ih, fw, fh, base: Math.max(fw / iw, fh / ih) };
-    }
-
-    _clampView() {
-      // Pan range on each axis is half the overflow past the frame edge.
-      const g = this._geom();
-      if (!g) return;
-      const mx = Math.max(0, (g.iw * g.base * this._view.s / g.fw - 1) * 50);
-      const my = Math.max(0, (g.ih * g.base * this._view.s / g.fh - 1) * 50);
-      this._view.x = Math.max(-mx, Math.min(mx, this._view.x));
-      this._view.y = Math.max(-my, Math.min(my, this._view.y));
-    }
-
-    _applyView() {
-      const g = this._geom();
-      const fit = this.getAttribute('fit') || 'cover';
-      if (fit !== 'cover' || !g) {
-        // Non-cover, or dimensions not known yet (before img load).
-        this._img.style.width = '100%';
-        this._img.style.height = '100%';
-        this._img.style.left = '50%';
-        this._img.style.top = '50%';
-        this._img.style.objectFit = fit;
-        this._img.style.objectPosition = this.getAttribute('position') || '50% 50%';
-        return;
-      }
-      // Cover baseline: img fills the frame on its tighter axis at s=1, so
-      // pan works immediately on the overflowing axis without zooming first.
-      // Width/height and left/top are all frame-% — depends only on the
-      // frame aspect ratio, so a responsive resize keeps the same crop. The
-      // spill layer mirrors the same box so its corners = image corners.
-      const k = g.base * this._view.s;
-      const w = (g.iw * k / g.fw * 100) + '%';
-      const h = (g.ih * k / g.fh * 100) + '%';
-      const l = (50 + this._view.x) + '%';
-      const t = (50 + this._view.y) + '%';
-      this._img.style.width = w; this._img.style.height = h;
-      this._img.style.left = l; this._img.style.top = t;
-      this._img.style.objectFit = '';
-      this._spill.style.width = w; this._spill.style.height = h;
-      this._spill.style.left = l; this._spill.style.top = t;
-    }
-
-    _commitView() {
-      const v = { s: this._view.s, x: this._view.x, y: this._view.y };
-      if (this._userUrl) v.u = this._userUrl;
-      // Framing-only (no u) persists too so an author-src slot remembers its
-      // crop; clearing the sidecar still falls through to src=.
-      if (this.id) setSlot(this.id, v);
-      else { this._local = v; }
-    }
-
-    _render() {
-      // Shape / mask. Presets use border-radius so the dashed ring can
-      // follow the rounded outline; clip-path is only applied for an
-      // explicit `mask` (the ring is hidden there since a rectangle
-      // dashed border chopped by an arbitrary polygon looks broken).
-      const mask = this.getAttribute('mask');
-      const shape = (this.getAttribute('shape') || 'rounded').toLowerCase();
-      let radius = '';
-      if (shape === 'circle') radius = '50%';
-      else if (shape === 'pill') radius = '9999px';
-      else if (shape === 'rounded') {
-        const n = parseFloat(this.getAttribute('radius'));
-        radius = (Number.isFinite(n) ? n : 12) + 'px';
-      }
-      this._frame.style.borderRadius = mask ? '' : radius;
-      this._frame.style.clipPath = mask || '';
-      this._ring.style.borderRadius = mask ? '' : radius;
-      this._ring.style.display = mask ? 'none' : '';
-
-      // Controls and reframe entry gate on this so share links stay read-only.
-      const editable = !!(window.omelette && window.omelette.writeFile);
-      this.toggleAttribute('data-editable', editable);
-      this._sub.style.display = editable ? '' : 'none';
-
-      // Content. The sidecar is also writable by the agent's write_file
-      // tool, so its value isn't guaranteed canvas-originated — only accept
-      // data:image/ URLs from it. The `src` attribute is author-controlled
-      // (Claude wrote it into the HTML) so it passes through unchanged.
-      let stored = this.id ? getSlot(this.id) : this._local;
-      if (stored && stored.u && !/^data:image\//i.test(stored.u)) stored = null;
-      const srcAttr = this.getAttribute('src') || '';
-      this._userUrl = (stored && stored.u) || null;
-      const url = this._userUrl || srcAttr;
-      // Don't clobber an in-flight reframe with a store-triggered re-render.
-      if (!this.hasAttribute('data-reframe')) {
-        this._view = {
-          s: stored && Number.isFinite(stored.s) ? clampS(stored.s) : 1,
-          x: stored && Number.isFinite(stored.x) ? stored.x : 0,
-          y: stored && Number.isFinite(stored.y) ? stored.y : 0,
-        };
-      }
-      this._cap.textContent = this.getAttribute('placeholder') || 'Drop an image';
-      // Toggle via style.display — the [hidden] attribute alone loses to
-      // the display:flex / display:block rules in the stylesheet above.
-      if (url) {
-        if (this._img.getAttribute('src') !== url) {
-          this._img.src = url;
-          this._ghost.src = url;
-        }
-        this._img.style.display = 'block';
-        this._empty.style.display = 'none';
-        this.setAttribute('data-filled', '');
-        this._clampView();
-        this._applyView();
-      } else {
-        this._img.style.display = 'none';
-        this._img.removeAttribute('src');
-        this._ghost.removeAttribute('src');
-        this._empty.style.display = 'flex';
-        this.removeAttribute('data-filled');
-      }
-    }
-  }
-
-  if (!customElements.get('image-slot')) {
-    customElements.define('image-slot', ImageSlot);
-  }
-})();
diff --git a/surinz-source/sa-clan-data.jsx b/surinz-source/sa-clan-data.jsx
deleted file mode 100644
index e86a0a0..0000000
--- a/surinz-source/sa-clan-data.jsx
+++ /dev/null
@@ -1,242 +0,0 @@
-/* eslint-disable */
-// ─────────────────────────────────────────────────────────────
-// searchgg · 클랜 데이터 + 엠블럼 렌더러
-// window.ClanDB(name) → 클랜 상세,  window.Emblem,  window.EMBLEM_LIB
-// ─────────────────────────────────────────────────────────────
-(function () {
-  const r = (n) => Math.floor(Math.random() * n);
-  const pick = (a) => a[r(a.length)];
-
-  // ── 엠블럼 도형 (viewBox 100x100) ──
-  const SHAPES = {
-    shield: 'M50 6 L88 22 V52 C88 78 70 88 50 96 C30 88 12 78 12 52 V22 Z',
-    circle: null, // 원은 <circle>로 별도 처리
-    hexagon: 'M50 5 L88 27 V73 L50 95 L12 73 V27 Z',
-    diamond: 'M50 5 L95 50 L50 95 L5 50 Z',
-  };
-  const SHAPE_KEYS = ['shield', 'circle', 'hexagon', 'diamond'];
-
-  // ── 엠블럼 심볼 (중심 50,50 기준) ──
-  const SYM = {
-    crosshair: (c) => (<g fill="none" stroke={c} strokeWidth="5" strokeLinecap="round">
-      <circle cx="50" cy="50" r="17" /><line x1="50" y1="22" x2="50" y2="34" /><line x1="50" y1="66" x2="50" y2="78" />
-      <line x1="22" y1="50" x2="34" y2="50" /><line x1="66" y1="50" x2="78" y2="50" /><circle cx="50" cy="50" r="3" fill={c} stroke="none" /></g>),
-    star: (c) => (<path fill={c} d="M50 26 L56.5 43 L74 44 L60 55 L65 72 L50 62 L35 72 L40 55 L26 44 L43.5 43 Z" />),
-    skull: (c) => (<g fill={c}><path d="M50 28 C36 28 28 38 28 50 C28 58 32 62 36 65 L36 72 L64 72 L64 65 C68 62 72 58 72 50 C72 38 64 28 50 28 Z" />
-      <circle cx="41" cy="50" r="5" fill="#fff" /><circle cx="59" cy="50" r="5" fill="#fff" /><path d="M47 60 L50 56 L53 60 Z" fill="#fff" /></g>),
-    wolf: (c) => (<g fill={c}><ellipse cx="50" cy="58" rx="9" ry="11" /><ellipse cx="35" cy="44" rx="5" ry="7" /><ellipse cx="65" cy="44" rx="5" ry="7" /><ellipse cx="42" cy="34" rx="4.5" ry="6" /><ellipse cx="58" cy="34" rx="4.5" ry="6" /></g>),
-    sword: (c) => (<g stroke={c} strokeWidth="5" strokeLinecap="round" fill="none"><line x1="30" y1="30" x2="68" y2="68" /><line x1="70" y1="30" x2="32" y2="68" /><line x1="26" y1="40" x2="40" y2="26" /><line x1="60" y1="74" x2="74" y2="60" /></g>),
-    crown: (c) => (<path fill={c} d="M28 64 L24 36 L37 48 L50 30 L63 48 L76 36 L72 64 Z" />),
-    flame: (c) => (<path fill={c} d="M50 26 C58 38 66 44 66 56 C66 67 58 74 50 74 C42 74 34 67 34 56 C34 50 38 46 42 50 C42 40 46 32 50 26 Z" />),
-    bolt: (c) => (<path fill={c} d="M54 24 L34 54 L47 54 L44 76 L66 44 L52 44 Z" />),
-    shieldcheck: (c) => (<g><path fill={c} d="M50 26 L70 33 V52 C70 64 61 70 50 75 C39 70 30 64 30 52 V33 Z" /><path d="M42 51 L48 57 L60 43" fill="none" stroke="#fff" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" /></g>),
-    anchor: (c) => (<g fill="none" stroke={c} strokeWidth="5" strokeLinecap="round"><circle cx="50" cy="32" r="5" /><line x1="50" y1="37" x2="50" y2="72" /><line x1="38" y1="48" x2="62" y2="48" /><path d="M32 60 C32 70 42 74 50 74 C58 74 68 70 68 60" /></g>),
-  };
-  const SYM_KEYS = Object.keys(SYM);
-
-  const BG_COLORS = ['#48515f', '#2f6fed', '#c0392b', '#1f8a5b', '#8e44ad', '#d98a1f', '#16708a', '#33373d'];
-  const SYMBOL_COLORS = ['#ffffff', '#ffe08a', '#ffd1d1', '#bfe3ff', '#c9f0d8'];
-  const THEMES = ['#48515f', '#2f6fed', '#c0392b', '#1f8a5b', '#8e44ad', '#b8860b'];
-
-  function shade(hex, amt) {
-    const n = parseInt(hex.slice(1), 16);
-    let r0 = (n >> 16) + amt, g0 = ((n >> 8) & 255) + amt, b0 = (n & 255) + amt;
-    r0 = Math.max(0, Math.min(255, r0)); g0 = Math.max(0, Math.min(255, g0)); b0 = Math.max(0, Math.min(255, b0));
-    return '#' + (r0 * 65536 + g0 * 256 + b0).toString(16).padStart(6, '0');
-  }
-
-  function Emblem({ cfg, size = 88, ring = true }) {
-    const { shape = 'shield', bg = '#48515f', symbol = 'crosshair', symbolColor = '#ffffff' } = cfg || {};
-    const grad = `eg-${shape}-${bg.slice(1)}-${Math.round(size)}`;
-    return (
-      <svg width={size} height={size} viewBox="0 0 100 100" style={{ flexShrink: 0, filter: 'drop-shadow(0 2px 4px rgba(0,0,0,.18))' }}>
-        <defs>
-          <linearGradient id={grad} x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stopColor={shade(bg, 26)} /><stop offset="100%" stopColor={shade(bg, -22)} />
-          </linearGradient>
-        </defs>
-        {shape === 'circle'
-          ? <circle cx="50" cy="50" r="45" fill={`url(#${grad})`} stroke={ring ? '#ffffff' : 'none'} strokeWidth={ring ? 3 : 0} strokeOpacity="0.7" />
-          : <path d={SHAPES[shape]} fill={`url(#${grad})`} stroke={ring ? '#ffffff' : 'none'} strokeWidth={ring ? 3 : 0} strokeOpacity="0.7" strokeLinejoin="round" />}
-        {SYM[symbol] ? SYM[symbol](symbolColor) : null}
-      </svg>
-    );
-  }
-
-  // ── 클랜 멤버 생성 ──
-  const MEMBER_NICKS = ['불곰대장', '꿀밤한방', '연어초밥', '심야의총잡이', '각잡는곰', '리코일마스터', '플래시박사', '스팀팩중독', '한발의미학', '엄폐중독자', '연막의신', '돌격앞으로', '백발백중', '수비의화신', '클러치메이커', '에임핵아님', '곰발바닥', '겨울잠전문', '북극곰', '꿀단지수호', '재장전중', '헤드샷셰프', '각성한곰', '연승기원', '막내곰', '신입곰돌이'];
-
-  function genMembers(count, captain) {
-    const out = []; const used = new Set();
-    // 군 계급(rank) 풀 — 낮은 tier 숫자가 높은 계급
-    const ranks = (window.SA && window.SA.allPlayers ? window.SA.allPlayers.map((p) => p.rank).filter(Boolean) : []);
-    const uniq = []; const seenT = new Set();
-    ranks.forEach((rk) => { if (!seenT.has(rk.tier)) { seenT.add(rk.tier); uniq.push(rk); } });
-    uniq.sort((a, b) => a.tier - b.tier); // 높은 계급(작은 tier)부터
-    const rankByRole = (role) => {
-      if (!uniq.length) return null;
-      const top = uniq.length;
-      let lo, hi;
-      if (role === '클랜장') { lo = 0; hi = Math.max(1, Math.floor(top * 0.18)); }
-      else if (role === '운영진') { lo = 0; hi = Math.max(2, Math.floor(top * 0.35)); }
-      else if (role === '정예') { lo = Math.floor(top * 0.2); hi = Math.floor(top * 0.6); }
-      else { lo = Math.floor(top * 0.4); hi = top; }
-      const idx = Math.min(top - 1, lo + r(Math.max(1, hi - lo)));
-      return uniq[idx];
-    };
-    const plan = [];
-    plan.push('클랜장');
-    for (let i = 0; i < 3 && plan.length < count; i++) plan.push('운영진');
-    for (let i = 0; i < 7 && plan.length < count; i++) plan.push('정예');
-    while (plan.length < count) plan.push('일반');
-    plan.forEach((role, i) => {
-      let name;
-      if (i === 0 && captain) name = captain;
-      else { do { name = pick(MEMBER_NICKS); } while (used.has(name)); }
-      used.add(name);
-      out.push({
-        name, role,
-        rank: rankByRole(role),
-        contrib: role === '클랜장' ? 1800 + r(900) : role === '운영진' ? 1100 + r(800) : role === '정예' ? 600 + r(700) : 60 + r(560),
-      });
-    });
-    return out.sort((a, b) => b.contrib - a.contrib);
-  }
-
-  // 클랜별 고정 시드(이름 기반)로 엠블럼/테마 결정 → 재방문 시 동일
-  function seedFromName(s) { let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0; return h; }
-
-  const BASE = {
-    '불곰부대': { tag: 'BEAR', members: 52, wr: 68, rank: 2, captain: '서든황제김씨', emblem: { shape: 'shield', bg: '#8a5a2b', symbol: 'wolf', symbolColor: '#ffe08a' }, theme: '#8a5a2b',
-      slogan: '겨울잠은 시즌 끝나고. 지금은 사냥철.', intro: '러시아워 정규전 위주로 빡겜과 친목을 동시에 챙기는 곰 군단입니다. 매너 좋은 복귀 유저, 성장하고 싶은 뉴비 모두 환영해요.' },
-    '서울제일': { tag: 'SEL', members: 48, wr: 71, rank: 1, captain: 'GLOCK_여신', emblem: { shape: 'hexagon', bg: '#2f6fed', symbol: 'crown', symbolColor: '#ffe08a' }, theme: '#2f6fed',
-      slogan: '제일이 아니면 의미가 없다.', intro: '시즌2 1위 수성 중인 경쟁 지향 클랜. 정예 위주 스크림, 대회 출전 클랜입니다.' },
-    '야간전투': { tag: 'NGT', members: 41, wr: 66, rank: 3, captain: '컨테이너지박령', emblem: { shape: 'circle', bg: '#33373d', symbol: 'bolt', symbolColor: '#bfe3ff' }, theme: '#33373d',
-      slogan: '해가 지면, 우리의 시간.', intro: '심야 스크림 전문. 새벽까지 함께 달릴 올빼미 환영.' },
-    '한강수비대': { tag: 'HAN', members: 45, wr: 64, rank: 4, captain: '데드폴터줏대', emblem: { shape: 'shield', bg: '#16708a', symbol: 'shieldcheck', symbolColor: '#ffffff' }, theme: '#16708a',
-      slogan: '뚫리지 않는다. 우리가 강이니까.', intro: '주말 정모 클랜전 중심의 안정적인 운영. 꾸준한 활동러 환영.' },
-    '벚꽃클랜': { tag: 'SAK', members: 38, wr: 62, rank: 5, captain: '오로라공주', emblem: { shape: 'diamond', bg: '#b14d7a', symbol: 'flame', symbolColor: '#ffd1d1' }, theme: '#b14d7a',
-      slogan: '피고 지는 건 벚꽃, 지지 않는 건 우리.', intro: '뉴비 멘토링 ◎ 친목과 즐겜 위주의 따뜻한 클랜이에요.' },
-    '강철군화': { tag: 'STL', members: 50, wr: 61, rank: 6, captain: '원킬원샷', emblem: { shape: 'hexagon', bg: '#48515f', symbol: 'sword', symbolColor: '#ffffff' }, theme: '#48515f',
-      slogan: '매일 21시, 군화 끈을 조여라.', intro: '매일 정기 클랜전 운영. 규율 있는 활동을 선호하는 분께 추천.' },
-  };
-
-  const _cache = {};
-  function ClanDB(name) {
-    const key = name || '불곰부대';
-    if (_cache[key]) return _cache[key];
-    const b = BASE[key] || {
-      tag: (key.slice(0, 3) || 'CLN').toUpperCase(), members: 30 + r(25), wr: 55 + r(16), rank: 7 + r(40), captain: pick(MEMBER_NICKS),
-      emblem: { shape: pick(SHAPE_KEYS), bg: pick(BG_COLORS), symbol: pick(SYM_KEYS), symbolColor: pick(SYMBOL_COLORS) }, theme: pick(THEMES),
-      slogan: '함께라서 강하다.', intro: '함께 성장할 클랜원을 찾고 있어요. 분위기 좋은 우리 클랜에 놀러오세요!',
-    };
-    const seed = seedFromName(key);
-    const members = genMembers(Math.min(b.members, 24), b.captain);
-    const data = {
-      name: key, tag: b.tag, slogan: b.slogan, intro: b.intro,
-      emblem: { ...b.emblem }, theme: b.theme,
-      level: 12 + (seed % 20), exp: 40 + (seed % 55), expMax: 100,
-      expTotal: 80000 + (seed % 90000), expWeek: 1200 + (seed % 4200),
-      founded: `${2021 + (seed % 4)}.${String(1 + (seed % 11)).padStart(2, '0')}.${String(1 + (seed % 27)).padStart(2, '0')}`,
-      members, memberMax: b.members, totalMembers: b.members,
-      weeklyWr: b.wr, rank: b.rank,
-      notices: [
-        { pin: true, title: '이번 주 정기전 일정 안내 — 목/토 21시', author: b.captain, time: '2시간 전' },
-        { pin: false, title: '신규 클랜원 환영합니다! 인사 남겨주세요', author: pick(MEMBER_NICKS), time: '1일 전' },
-        { pin: false, title: '클랜 보이스 채널 새로 팠어요 (디스코드)', author: pick(MEMBER_NICKS), time: '2일 전' },
-        { pin: false, title: '클랜전 출전 명단 신청 받습니다 (이번 주)', author: b.captain, time: '3일 전' },
-        { pin: false, title: '주말 내전 결과 정리 및 하이라이트', author: pick(MEMBER_NICKS), time: '4일 전' },
-        { pin: false, title: '장기 미접속 클랜원 정리 예고 안내', author: b.captain, time: '5일 전' },
-        { pin: false, title: '클랜 규칙 일부 개정 — 필독 부탁드려요', author: b.captain, time: '1주 전' },
-      ],
-      feed: [
-        { author: members[0].name, role: members[0].role, text: '오늘 정기전 5승 0패! 다들 폼 미쳤다 🔥', time: '38분 전', likes: 24 },
-        { author: members[2] ? members[2].name : '정예곰', role: '정예', text: '신맵 데드폴 수비 루트 정리해서 공지에 올려둠. 한번씩 보기!', time: '3시간 전', likes: 17 },
-        { author: members[4] ? members[4].name : '막내곰', role: '일반', text: '가입한 지 일주일 됐는데 다들 너무 친절하세요 ㅎㅎ 잘부탁드립니다', time: '6시간 전', likes: 31 },
-        { author: members[1] ? members[1].name : '운영곰', role: members[1] ? members[1].role : '운영진', text: '오늘 저녁 9시 보이스 모여요. 클랜전 전략 회의 있습니다.', time: '9시간 전', likes: 12 },
-        { author: members[3] ? members[3].name : '정예곰2', role: '정예', text: '어제 매치 하이라이트 클립 올렸어요. 마지막 1대3 클러치 꼭 보세요', time: '1일 전', likes: 28 },
-        { author: members[5] ? members[5].name : '일반곰', role: '일반', text: '이번 주 출석 이벤트 다들 참여하셨나요? 마감 임박!', time: '1일 전', likes: 9 },
-        { author: members[0].name, role: members[0].role, text: '지난 주 MVP 투표 결과 공유합니다. 축하해주세요 👏', time: '2일 전', likes: 35 },
-      ],
-      guestbook: [
-        { author: '지나가던행인', text: '클랜 분위기 좋아보여요 👍', time: '1일 전', replies: [{ author: b.captain, text: '좋게 봐주셔서 감사합니다! 언제든 놀러오세요 🙂', time: '1일 전' }] },
-        { author: '스카우터', text: '혹시 정기전 용병 한 자리 가능할까요?', time: '2일 전', replies: [] },
-        { author: '복귀유저A', text: '오랜만에 복귀했는데 가입 문의는 어디로 하면 되나요?', time: '3일 전', replies: [{ author: b.captain, text: '모집 광장의 저희 모집글에서 디스코드로 문의 주세요!', time: '3일 전' }] },
-        { author: '옆클랜원', text: '지난 클랜전 잘 봤습니다. 다음에 또 붙어요!', time: '4일 전', replies: [] },
-        { author: '구경꾼', text: '엠블럼 멋지네요 ㅎㅎ', time: '5일 전', replies: [] },
-        { author: '뉴비방문자', text: '초보도 받아주시나요? 열심히 할 자신 있습니다!', time: '6일 전', replies: [] },
-      ],
-      schedule: [
-        { day: '월', time: '21:00', title: '자유 스크림', on: false },
-        { day: '화', time: '—', title: '휴식', on: false },
-        { day: '수', time: '21:00', title: '내전 데이', on: true },
-        { day: '목', time: '21:00', title: '정기 클랜전', on: true },
-        { day: '금', time: '22:00', title: '친선전', on: false },
-        { day: '토', time: '21:00', title: '정기 클랜전', on: true },
-        { day: '일', time: '20:00', title: '주간 결산', on: true },
-      ],
-      attendance: Array.from({ length: 7 }, (_, i) => 55 + ((seed >> i) % 42)),
-      activity: Array.from({ length: 7 }, (_, i) => {
-        const s2 = (seed * (i + 3)) % 9973;
-        const wk = i >= 5 ? 1.6 : 1; // 주말 가중
-        return {
-          clanWar: Math.round((3 + (s2 % 8)) * wk),
-          clanRanked: Math.round((2 + ((s2 >> 1) % 7)) * wk),
-          soloRanked: Math.round((4 + ((s2 >> 2) % 10)) * wk),
-          partyRanked: Math.round((3 + ((s2 >> 4) % 8)) * wk),
-        };
-      }),
-      isMine: key === '불곰부대',
-    };
-    _cache[key] = data;
-    return data;
-  }
-
-  window.Emblem = Emblem;
-  window.ClanDB = ClanDB;
-  window.__SYM_PREVIEW = SYM;
-  window.EMBLEM_LIB = { SHAPE_KEYS, SYM_KEYS, BG_COLORS, SYMBOL_COLORS, THEMES };
-
-  // ── 모집 광장 데이터 ──
-  const RECRUIT_NAMES = ['불곰부대', '서울제일', '야간전투', '한강수비대', '벚꽃클랜', '강철군화', '한밤의늑대', '새벽기습대', '데드샷연합', '폭풍전야', '은하수비대', '정예타격대', '코리아게이밍', '불꽃군단', '심야의사냥꾼'];
-  const RECRUIT_TYPES = ['클랜전', 'A보급', '3보급', '랭크전', '상관없음'];
-  window.RECRUIT_TYPES = RECRUIT_TYPES;
-  const _recruits = [];
-  function buildRecruits() {
-    if (_recruits.length) return _recruits;
-    RECRUIT_NAMES.forEach((nm) => {
-      const c = ClanDB(nm);
-      const seed = seedFromName(nm);
-      const max = c.memberMax;
-      const cur = Math.max(8, max - (3 + (seed % 12)));
-      const openings = max - cur;
-      const matches = 120 + (seed % 380);
-      const w = Math.round(matches * c.weeklyWr / 100);
-      _recruits.push({
-        name: nm, emblem: c.emblem, intro: c.intro,
-        weeklyWr: c.weeklyWr, rank: c.rank,
-        recruitTypes: (() => { const n = 1 + (seed % 3); const out = []; for (let i = 0; i < n; i++) { const t = RECRUIT_TYPES[(seed + i * 2) % RECRUIT_TYPES.length]; if (!out.includes(t)) out.push(t); } return out; })(),
-        record: { matches, w, l: matches - w },
-        conditions: (() => {
-          const ageMin = [null, 20, 25, 30][seed % 4];
-          const ageMax = (seed >> 2) % 3 === 0 ? (ageMin ? ageMin + 10 + (seed % 6) : 35) : null;
-          return {
-            ageMin, ageMax,
-            voice: seed % 4 !== 0,
-            nickChange: seed % 3 === 0,
-            noDualClan: seed % 2 === 0,
-            friendJoin: seed % 3 !== 1,
-          };
-        })(),
-        contacts: [
-          { type: '디스코드', label: '디스코드로 문의' },
-          ...(seed % 3 !== 0 ? [{ type: '오픈카톡', label: '오픈카톡으로 문의' }] : []),
-        ],
-        cur, max, openings,
-        hot: 40 + (seed % 220), createdAgo: 1 + (seed % 46),
-      });
-    });
-    return _recruits;
-  }
-  window.ClanRecruits = buildRecruits;
-})();
diff --git a/surinz-source/sa-clan-plaza.jsx b/surinz-source/sa-clan-plaza.jsx
deleted file mode 100644
index ad66842..0000000
--- a/surinz-source/sa-clan-plaza.jsx
+++ /dev/null
@@ -1,457 +0,0 @@
-/* eslint-disable */
-// ─────────────────────────────────────────────────────────────
-// searchgg · 클랜 모집 광장 (모집 공고 게시판)
-// window.ClanPlaza  ·  의존: Nav, Panel, Icon, Emblem, ClanRecruits, ClanDB
-// ─────────────────────────────────────────────────────────────
-const PZPT = '#48515f';
-const PZCH = "'Chakra Petch',sans-serif";
-function pzAgeLabel(cd) {
-  if (cd.ageMin && cd.ageMax) return `${cd.ageMin}~${cd.ageMax}세`;
-  if (cd.ageMin) return `${cd.ageMin}세 이상`;
-  if (cd.ageMax) return `${cd.ageMax}세 이하`;
-  return '전연령';
-}
-
-function ContactGlyph({ type }) {
-  if (type === '디스코드') {
-    return (
-      <svg width="19" height="19" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">
-        <path d="M20.3 4.4A19.8 19.8 0 0 0 15.4 3l-.25.5a14.6 14.6 0 0 1 4.3 1.4c-2-1-4.2-1.5-6.45-1.5s-4.45.5-6.45 1.5A14.6 14.6 0 0 1 10.85 3.5L10.6 3a19.8 19.8 0 0 0-4.9 1.4C2.6 9 1.75 13.4 2.15 17.75A19.9 19.9 0 0 0 8.2 20.8l.5-.85a13 13 0 0 1-2-1l.5-.36a14.2 14.2 0 0 0 12.1 0l.5.36c-.62.4-1.3.74-2 1l.5.85a19.9 19.9 0 0 0 6.05-3.05c.5-5-0.86-9.36-3.85-13.35ZM9 15.3c-1 0-1.8-.9-1.8-2s.8-2 1.8-2 1.82.9 1.8 2c0 1.1-.8 2-1.8 2Zm6 0c-1 0-1.8-.9-1.8-2s.8-2 1.8-2 1.82.9 1.8 2c0 1.1-.8 2-1.8 2Z"/>
-      </svg>
-    );
-  }
-  return (
-    <svg width="19" height="19" viewBox="0 0 24 24" fill="#191600" aria-hidden="true">
-      <path d="M12 4C7 4 3 7.1 3 11c0 2.5 1.7 4.7 4.2 5.9-.18.65-.66 2.35-.76 2.72 0 0-.02.13.07.18.08.05.2 0 .2 0 .26-.04 2.96-1.96 3.5-2.34.58.08 1.18.13 1.79.13 5 0 9-3.1 9-7C21 7.1 17 4 12 4Z"/>
-    </svg>
-  );
-}
-
-function RecruitCard({ rc, onOpen, onDetail }) {
-  const fill = Math.round((rc.cur / rc.max) * 100);
-  const isMine = rc.name === (window.SA.me.clan || '');
-  return (
-    <div onClick={() => onDetail(rc)} style={{ background: '#fff', border: `1px solid ${isMine ? PZPT : 'var(--line)'}`, borderRadius: 8, overflow: 'hidden', display: 'flex', cursor: 'pointer', boxShadow: '0 1px 2px rgba(0,0,0,.04)', transition: 'box-shadow .15s' }}
-      onMouseEnter={(e) => e.currentTarget.style.boxShadow = '0 4px 14px rgba(0,0,0,.1)'} onMouseLeave={(e) => e.currentTarget.style.boxShadow = '0 1px 2px rgba(0,0,0,.04)'}>
-      {/* 홍보 포스터 (3:4, 유저 업로드) */}
-      <div style={{ width: 150, flexShrink: 0, alignSelf: 'stretch', borderRight: '1px solid var(--line)', background: '#f4f5f7' }}>
-        <image-slot id={`recruit-poster-${rc.name}`} shape="rect" placeholder="홍보 포스터" style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
-      </div>
-
-      <div style={{ flex: 1, minWidth: 0, padding: '13px 15px', display: 'flex', flexDirection: 'column' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
-          <div style={{ flexShrink: 0 }}><window.Emblem cfg={rc.emblem} size={30} /></div>
-          <span style={{ fontSize: 15.5, fontWeight: 800, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{rc.name}</span>
-          {isMine && <span style={{ flexShrink: 0, fontSize: 9.5, fontWeight: 700, color: PZPT, border: `1px solid ${PZPT}`, borderRadius: 3, padding: '1px 6px' }}>내 모집글</span>}
-        </div>
-        <div style={{ marginTop: 7, display: 'flex', gap: 5, flexWrap: 'wrap', alignItems: 'center' }}>
-          {rc.recruitTypes.map((t) => (
-            <span key={t} style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--ink)', border: '1px solid var(--line2)', background: '#fff', padding: '2px 8px', borderRadius: 4 }}>{t}</span>
-          ))}
-          {(() => {
-            const cd = rc.conditions;
-            const age = pzAgeLabel(cd);
-            return [age !== '전연령' ? age : null, cd.voice ? '보이스 채팅 필수' : null].filter(Boolean).map((b) => (
-              <span key={b} style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--t2)', background: '#eef0f2', padding: '2px 8px', borderRadius: 4 }}>{b}</span>
-            ));
-          })()}
-        </div>
-        <p style={{ margin: '8px 0 0', fontSize: 12, lineHeight: 1.5, color: '#4a505a', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{rc.intro}</p>
-
-        <div style={{ marginTop: 'auto', paddingTop: 10, display: 'flex', alignItems: 'center', gap: 9, fontSize: 11.5, color: 'var(--t2)', flexWrap: 'wrap' }}>
-          <span><b style={{ color: PZPT, fontFamily: PZCH, fontWeight: 700 }}>{rc.rank}위</b></span>
-          <span style={{ color: 'var(--line2)' }}>·</span>
-          <span>승률 <b style={{ color: 'var(--ink)', fontFamily: PZCH }}>{rc.weeklyWr}%</b></span>
-          <span style={{ color: 'var(--line2)' }}>·</span>
-          <span style={{ fontFamily: PZCH }}>{rc.record.matches}전 <b style={{ color: PZPT }}>{rc.record.w}승</b> <b style={{ color: '#e5484d' }}>{rc.record.l}패</b></span>
-        </div>
-
-        <div style={{ marginTop: 10 }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontSize: 11, marginBottom: 4 }}>
-            <span style={{ color: 'var(--t3)', fontWeight: 600 }}>클랜원</span>
-            <span style={{ fontFamily: PZCH, fontWeight: 700, color: 'var(--ink)' }}>{rc.cur}<span style={{ color: 'var(--t3)' }}>/{rc.max}</span> <span style={{ color: rc.openings <= 3 ? '#e5484d' : PZPT, fontWeight: 700 }}>· {rc.openings}자리</span></span>
-          </div>
-          <div style={{ height: 6, background: '#d4d8de', borderRadius: 4, overflow: 'hidden', boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.05)' }}>
-            <div style={{ width: `${fill}%`, height: '100%', background: rc.openings <= 3 ? '#e5484d' : PZPT, borderRadius: 4 }} />
-          </div>
-        </div>
-
-        <button onClick={(e) => { e.stopPropagation(); }} style={{ marginTop: 11, padding: '8px 0', borderRadius: 6, border: 'none', background: PZPT, color: '#fff', fontWeight: 700, fontSize: 12.5, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif" }}>가입 신청</button>
-      </div>
-    </div>
-  );
-}
-
-// ── 상세 모집글 ──
-function RecruitDetail({ rc, onClose, onOpenClan }) {
-  return (
-    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 240, background: 'rgba(20,22,26,.62)', backdropFilter: 'blur(3px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px 20px', overflowY: 'auto', animation: 'sgFade .2s ease' }}>
-      <div onClick={(e) => e.stopPropagation()} style={{ width: 860, maxWidth: '100%', margin: 'auto', background: '#fff', borderRadius: 14, overflow: 'hidden', boxShadow: '0 24px 70px rgba(0,0,0,.34)', fontFamily: "'Pretendard',sans-serif" }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px', borderBottom: '1px solid var(--line)' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
-            <window.Emblem cfg={rc.emblem} size={34} />
-            <span style={{ fontSize: 17, fontWeight: 800, color: 'var(--ink)' }}>{rc.name}</span>
-            <span style={{ fontSize: 11.5, color: 'var(--t3)', fontWeight: 600 }}>모집글 · {rc.createdAgo}분 전</span>
-          </div>
-          <button onClick={onClose} style={{ width: 30, height: 30, borderRadius: 6, border: 'none', background: '#eef0f2', color: '#5b626c', cursor: 'pointer', fontSize: 16 }}>×</button>
-        </div>
-
-        <div style={{ display: 'flex', gap: 0, alignItems: 'stretch' }}>
-          {/* 3:4 포스터 */}
-          <div style={{ width: 360, flexShrink: 0, background: '#f4f5f7', borderRight: '1px solid var(--line)' }}>
-            <image-slot id={`recruit-poster-${rc.name}`} shape="rect" placeholder="클랜 홍보 포스터 (3:4)를 끌어다 놓으세요" style={{ display: 'block', width: '100%', height: 480 }}></image-slot>
-          </div>
-
-          <div style={{ flex: 1, minWidth: 0, padding: '20px 24px 24px', display: 'flex', flexDirection: 'column' }}>
-            <div style={{ display: 'flex', border: '1px solid var(--line)', borderRadius: 7, overflow: 'hidden', marginBottom: 16 }}>
-              {[['랭킹', `${rc.rank}위`, PZPT], ['승률', `${rc.weeklyWr}%`, 'var(--ink)'], ['전적', `${rc.record.matches}전 ${rc.record.w}승 ${rc.record.l}패`, 'var(--ink)']].map(([l, v, c], i) => (
-                <div key={l} style={{ flex: i === 2 ? 1.6 : 1, minWidth: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '11px 4px', borderLeft: i ? '1px solid var(--line)' : 'none', background: i % 2 ? '#fff' : '#fafbfc' }}>
-                  <div style={{ fontSize: 10, lineHeight: 1, color: 'var(--t3)', fontWeight: 600 }}>{l}</div>
-                  <div style={{ fontFamily: PZCH, fontWeight: 700, fontSize: 13.5, lineHeight: 1, whiteSpace: 'nowrap', color: c }}>{v}</div>
-                </div>
-              ))}
-            </div>
-
-            <div style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--t3)', marginBottom: 6 }}>모집 안내</div>
-            <p style={{ margin: '0 0 14px', fontSize: 13.5, lineHeight: 1.7, color: '#3a4049', whiteSpace: 'pre-line' }}>{rc.intro}</p>
-
-            <div style={{ marginTop: 'auto', display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
-              {rc.recruitTypes.map((t) => (
-                <span key={t} style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--ink)', border: '1px solid var(--line2)', background: '#fff', padding: '3px 10px', borderRadius: 5 }}>{t}</span>
-              ))}
-            </div>
-
-            <div style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--t3)', marginBottom: 7 }}>가입 조건</div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '7px 18px', marginBottom: 14, padding: '12px 14px', background: '#fafbfc', border: '1px solid var(--line)', borderRadius: 7 }}>
-              {(() => {
-                const cd = rc.conditions;
-                return [
-                  ['연령', pzAgeLabel(cd)],
-                  ['보이스 채팅', cd.voice ? '필수' : '자율'],
-                  ['닉네임 변경', cd.nickChange ? '필요' : '불필요'],
-                  ['이중클랜·부계정', cd.noDualClan ? '금지' : '허용'],
-                  ['지인 동반 가입', cd.friendJoin ? '가능' : '불가'],
-                ].map(([l, v]) => (
-                  <div key={l} style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
-                    <span style={{ fontSize: 11.5, color: 'var(--t3)', fontWeight: 600, flexShrink: 0 }}>{l}</span>
-                    <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink)', textAlign: 'right' }}>{v}</span>
-                  </div>
-                ));
-              })()}
-            </div>
-
-            <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
-              <button onClick={() => onOpenClan(rc.name)} style={{ flex: 1, padding: '11px 0', borderRadius: 7, border: '1px solid var(--line2)', background: '#fff', color: '#3a4049', fontWeight: 700, fontSize: 13.5, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif" }}>클랜 구경</button>
-              <button style={{ flex: 1.3, padding: '11px 0', borderRadius: 7, border: 'none', background: PZPT, color: '#fff', fontWeight: 700, fontSize: 13.5, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif" }}>가입 신청</button>
-              {rc.contacts.map((ct) => {
-                const isDc = ct.type === '디스코드';
-                return (
-                  <button key={ct.type} title={ct.label} aria-label={ct.label} style={{ width: 42, height: 42, flexShrink: 0, display: 'grid', placeItems: 'center', borderRadius: 7, border: 'none', cursor: 'pointer', background: isDc ? '#5865F2' : '#FEE500' }}>
-                    <window.ContactGlyph type={ct.type} />
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── 모집글 등록 모달 ──
-function RecruitCreate({ onClose }) {
-  const SA = window.SA;
-  const myClanName = SA.me.clan || '불곰부대';
-  const clan = (window.ClanDB && window.ClanDB(myClanName)) || {};
-
-  const [types, setTypes] = React.useState([]);
-  const [ageMin, setAgeMin] = React.useState('');
-  const [ageMax, setAgeMax] = React.useState('');
-  const [conds, setConds] = React.useState(['보이스 채팅 필수']);
-  const [intro, setIntro] = React.useState('');
-  const [dc, setDc] = React.useState(false);
-  const [dcLink, setDcLink] = React.useState('');
-  const [kakao, setKakao] = React.useState(false);
-  const [kakaoLink, setKakaoLink] = React.useState('');
-
-  const toggleType = (v) => setTypes((t) => t.includes(v) ? t.filter((x) => x !== v) : [...t, v]);
-  const toggleCond = (v) => setConds((t) => t.includes(v) ? t.filter((x) => x !== v) : [...t, v]);
-  const label = { fontSize: 12, fontWeight: 700, color: 'var(--t2)', marginBottom: 7 };
-  const chip = (on) => ({ padding: '6px 12px', borderRadius: 5, border: `1px solid ${on ? 'var(--ink)' : 'var(--line2)'}`, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12, background: on ? 'var(--ink)' : '#fff', color: on ? '#fff' : 'var(--t2)' });
-  const valid = intro.trim().length > 0 && types.length > 0;
-
-  return (
-    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 250, background: 'rgba(20,22,26,.62)', backdropFilter: 'blur(3px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px 20px', overflowY: 'auto', animation: 'sgFade .2s ease' }}>
-      <div onClick={(e) => e.stopPropagation()} style={{ width: 760, maxWidth: '100%', margin: 'auto', background: '#fff', borderRadius: 14, overflow: 'hidden', boxShadow: '0 24px 70px rgba(0,0,0,.34)', fontFamily: "'Pretendard',sans-serif" }}>
-        {/* 헤더 */}
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '15px 20px', borderBottom: '1px solid var(--line)' }}>
-          <div>
-            <div style={{ fontSize: 16.5, fontWeight: 800, color: 'var(--ink)' }}>모집글 등록</div>
-            <div style={{ fontSize: 11.5, color: 'var(--t3)', marginTop: 2 }}>랭킹 · 승률 · 전적은 클랜 데이터에서 자동으로 표시됩니다.</div>
-          </div>
-          <button onClick={onClose} style={{ width: 30, height: 30, borderRadius: 6, border: 'none', background: '#eef0f2', color: '#5b626c', cursor: 'pointer', fontSize: 16 }}>×</button>
-        </div>
-
-        <div style={{ display: 'flex', gap: 0, alignItems: 'stretch' }}>
-          {/* 포스터 업로드 */}
-          <div style={{ width: 300, flexShrink: 0, background: '#f4f5f7', borderRight: '1px solid var(--line)', display: 'flex', flexDirection: 'column' }}>
-            <image-slot id={`recruit-poster-${myClanName}`} shape="rect" placeholder="홍보 포스터 (3:4) 업로드" style={{ display: 'block', width: '100%', height: 400 }}></image-slot>
-            <div style={{ padding: '11px 16px', color: 'var(--t3)', fontSize: 11, lineHeight: 1.5 }}>권장 비율 3:4 · 클랜을 가장 잘 보여줄 포스터를 올려보세요.</div>
-          </div>
-
-          {/* 폼 */}
-          <div style={{ flex: 1, minWidth: 0, padding: '18px 22px 20px', maxHeight: 520, overflowY: 'auto' }}>
-            {/* 클랜 (자동) */}
-            <div style={{ marginBottom: 16 }}>
-              <div style={label}>클랜</div>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', border: '1px solid var(--line)', borderRadius: 7, background: '#fafbfc' }}>
-                <window.Emblem cfg={clan.emblem} size={28} />
-                <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)' }}>{myClanName}</span>
-                <span style={{ marginLeft: 'auto', fontSize: 11.5, color: 'var(--t3)', fontFamily: PZCH }}>{clan.rank}위</span>
-              </div>
-            </div>
-
-            {/* 모집 유형 */}
-            <div style={{ marginBottom: 16 }}>
-              <div style={label}>모집 유형 <span style={{ color: 'var(--t3)', fontWeight: 600 }}>(어떤 유저를 찾나요?)</span></div>
-              <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
-                {(window.RECRUIT_TYPES || []).map((v) => {
-                  const on = types.includes(v);
-                  return (
-                    <button key={v} onClick={() => toggleType(v)} style={chip(on)}>{v}</button>
-                  );
-                })}
-              </div>
-            </div>
-
-            {/* 연령 조건 */}
-            <div style={{ marginBottom: 16 }}>
-              <div style={label}>연령 조건 <span style={{ color: 'var(--t3)', fontWeight: 600 }}>(비워두면 전연령)</span></div>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                <input type="number" min="1" max="99" value={ageMin} onChange={(e) => setAgeMin(e.target.value)} placeholder="제한 없음"
-                  style={{ width: 90, padding: '9px 11px', border: '1px solid var(--line2)', borderRadius: 7, fontSize: 13, fontFamily: "'Pretendard',sans-serif", fontWeight: 600, color: 'var(--ink)', outline: 'none', boxSizing: 'border-box' }} />
-                <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--t2)', flexShrink: 0 }}>세 이상</span>
-                <span style={{ color: 'var(--line2)' }}>~</span>
-                <input type="number" min="1" max="99" value={ageMax} onChange={(e) => setAgeMax(e.target.value)} placeholder="제한 없음"
-                  style={{ width: 90, padding: '9px 11px', border: '1px solid var(--line2)', borderRadius: 7, fontSize: 13, fontFamily: "'Pretendard',sans-serif", fontWeight: 600, color: 'var(--ink)', outline: 'none', boxSizing: 'border-box' }} />
-                <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--t2)', flexShrink: 0 }}>세 이하</span>
-              </div>
-            </div>
-
-            {/* 가입 조건 */}
-            <div style={{ marginBottom: 16 }}>
-              <div style={label}>가입 조건 <span style={{ color: 'var(--t3)', fontWeight: 600 }}>(해당하는 항목 선택)</span></div>
-              <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
-                {['보이스 채팅 필수', '닉네임 변경 필요', '이중클랜·부계 금지', '지인 동반 가입 가능'].map((v) => (
-                  <button key={v} onClick={() => toggleCond(v)} style={chip(conds.includes(v))}>{v}</button>
-                ))}
-              </div>
-            </div>
-
-            {/* 모집 안내 */}
-            <div style={{ marginBottom: 16 }}>
-              <div style={label}>모집 안내</div>
-              <textarea value={intro} onChange={(e) => setIntro(e.target.value)} placeholder="클랜 분위기와 매너 기준, 활동 시간대, 클랜 목표(정기전·내전·티어 올리기 등)를 자유롭게 적어주세요." rows={5}
-                style={{ width: '100%', resize: 'vertical', padding: '11px 12px', border: '1px solid var(--line2)', borderRadius: 7, fontSize: 13.5, lineHeight: 1.6, fontFamily: "'Pretendard',sans-serif", color: '#3a4049', outline: 'none', boxSizing: 'border-box' }} />
-            </div>
-
-            {/* 문의 채널 (선택) */}
-            <div>
-              <div style={label}>문의 채널 <span style={{ color: 'var(--t3)', fontWeight: 600 }}>(선택)</span></div>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
-                {[['디스코드', dc, () => setDc((v) => !v), dcLink, setDcLink, '#5865F2', 'https://discord.gg/...'], ['오픈카톡', kakao, () => setKakao((v) => !v), kakaoLink, setKakaoLink, '#FEE500', 'https://open.kakao.com/...']].map(([nm, on, fn, lk, setLk, bg, ph]) => (
-                  <div key={nm} style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
-                    <button onClick={fn} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 12px', minWidth: 124, borderRadius: 7, cursor: 'pointer', fontWeight: 700, fontSize: 13, fontFamily: "'Pretendard',sans-serif", flexShrink: 0,
-                      border: on ? `2px solid ${bg}` : '1px solid var(--line2)', background: on ? `${bg}14` : '#fff', color: on ? 'var(--ink)' : 'var(--t3)' }}>
-                      <span style={{ width: 22, height: 22, borderRadius: 5, background: bg, display: 'grid', placeItems: 'center' }}><window.ContactGlyph type={nm} /></span>
-                      {nm}
-                    </button>
-                    <input value={lk} onChange={(e) => setLk(e.target.value)} disabled={!on} placeholder={ph}
-                      style={{ flex: 1, minWidth: 0, padding: '9px 11px', border: '1px solid var(--line2)', borderRadius: 7, fontSize: 12.5, fontFamily: "'Pretendard',sans-serif", color: 'var(--ink)', background: on ? '#fff' : '#f4f5f7', outline: 'none', boxSizing: 'border-box' }} />
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* 푸터 */}
-        <div style={{ display: 'flex', gap: 10, padding: '14px 20px', borderTop: '1px solid var(--line)', background: '#fafbfc' }}>
-          <button onClick={onClose} style={{ flex: 1, padding: '12px 0', borderRadius: 7, border: '1px solid var(--line2)', background: '#fff', color: '#3a4049', fontWeight: 700, fontSize: 14, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif" }}>취소</button>
-          <button onClick={onClose} disabled={!valid} style={{ flex: 2, padding: '12px 0', borderRadius: 7, border: 'none', background: valid ? PZPT : '#c4c8ce', color: '#fff', fontWeight: 700, fontSize: 14, cursor: valid ? 'pointer' : 'not-allowed', fontFamily: "'Pretendard',sans-serif" }}>모집글 등록하기</button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ClanPlaza({ onClose, onOpenClan, onLogin, onClan, onCommunity }) {
-  const all = window.ClanRecruits();
-  const [rtype, setRtype] = React.useState('전체');
-  const [showFilter, setShowFilter] = React.useState(false);
-  const [fAge, setFAge] = React.useState('');
-  const [fVoice, setFVoice] = React.useState('전체');
-  const [fNick, setFNick] = React.useState('전체');
-  const [fDual, setFDual] = React.useState('전체');
-  const [fFriend, setFFriend] = React.useState('전체');
-  const [detail, setDetail] = React.useState(null);
-  const [creating, setCreating] = React.useState(false);
-  const [page, setPage] = React.useState(1);
-  const PER_PAGE = 8;
-  const myClanName = window.SA.me.clan || '불곰부대';
-  const myPost = all.find((c) => c.name === myClanName);
-  const [myActive, setMyActive] = React.useState(() => { try { return localStorage.getItem('sa-my-recruit-active') !== '0'; } catch (e) { return true; } });
-  const toggleMy = () => setMyActive((v) => { const n = !v; try { localStorage.setItem('sa-my-recruit-active', n ? '1' : '0'); } catch (e) {} return n; });
-
-  let list = [...all];
-  if (rtype !== '전체') list = list.filter((c) => c.recruitTypes.includes(rtype));
-  if (fAge) { const a = parseInt(fAge, 10); if (!isNaN(a)) list = list.filter((c) => (c.conditions.ageMin == null || a >= c.conditions.ageMin) && (c.conditions.ageMax == null || a <= c.conditions.ageMax)); }
-  if (fVoice !== '전체') list = list.filter((c) => fVoice === '필수' ? c.conditions.voice : !c.conditions.voice);
-  if (fNick !== '전체') list = list.filter((c) => fNick === '불필요' ? !c.conditions.nickChange : c.conditions.nickChange);
-  if (fDual !== '전체') list = list.filter((c) => fDual === '허용' ? !c.conditions.noDualClan : c.conditions.noDualClan);
-  if (fFriend !== '전체') list = list.filter((c) => fFriend === '가능' ? c.conditions.friendJoin : !c.conditions.friendJoin);
-  if (!myActive) list = list.filter((c) => c.name !== myClanName);
-  list = [...list].sort((a, b) => b.hot - a.hot);
-  const totalPages = Math.max(1, Math.ceil(list.length / PER_PAGE));
-  const curPage = Math.min(page, totalPages);
-  const pageList = list.slice((curPage - 1) * PER_PAGE, curPage * PER_PAGE);
-  const goPage = (n) => { setPage(Math.max(1, Math.min(totalPages, n))); };
-  const setRtypeReset = (v) => { setRtype(v); setPage(1); };
-  const setF = (setter) => (v) => { setter(v); setPage(1); };
-  const activeFilters = (fAge ? 1 : 0) + (fVoice !== '전체' ? 1 : 0) + (fNick !== '전체' ? 1 : 0) + (fDual !== '전체' ? 1 : 0) + (fFriend !== '전체' ? 1 : 0);
-  const resetFilters = () => { setFAge(''); setFVoice('전체'); setFNick('전체'); setFDual('전체'); setFFriend('전체'); setPage(1); };
-  const totalOpenings = all.reduce((s, c) => s + c.openings, 0);
-
-  return (
-    <div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'var(--bg2)', display: 'flex', flexDirection: 'column', animation: 'sgFade .22s ease' }}>
-      <window.Nav active="클랜" onLogin={onLogin} onClan={onClan} onCommunity={onCommunity} />
-      <div style={{ flex: 1, overflowY: 'auto' }}>
-        {/* 히어로 */}
-        <div style={{ background: 'linear-gradient(135deg,#23262b,#2e333b)', color: '#fff' }}>
-          <div style={{ maxWidth: 1180, margin: '0 auto', padding: '30px 28px 26px' }}>
-            <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
-              <div>
-                <div style={{ fontFamily: PZCH, fontSize: 11, fontWeight: 700, letterSpacing: '2.5px', color: 'rgba(255,255,255,.55)', marginBottom: 9 }}>CLAN RECRUIT PLAZA</div>
-                <h1 style={{ margin: 0, fontSize: 30, fontWeight: 800, letterSpacing: '-.6px' }}>클랜 모집 광장</h1>
-                <p style={{ margin: '8px 0 0', fontSize: 13.5, color: 'rgba(255,255,255,.7)' }}>
-                  지금 <b style={{ color: '#fff', fontFamily: PZCH }}>{all.length}</b>개 클랜이 <b style={{ color: '#fff', fontFamily: PZCH }}>{totalOpenings}</b>명의 새 식구를 찾고 있어요.
-                </p>
-              </div>
-            </div>
-            {/* 검색 + 내 클랜 가기 */}
-            <div style={{ marginTop: 20, display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
-              <div style={{ position: 'relative', flex: 1, minWidth: 240, maxWidth: 480 }}>
-                <span style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', display: 'flex' }}><Icon name="search" size={17} stroke="rgba(255,255,255,.55)" /></span>
-                <input placeholder="클랜명 · 분위기 · 포지션으로 검색" style={{ width: '100%', height: 42, paddingLeft: 40, paddingRight: 14, borderRadius: 8, border: '1px solid rgba(255,255,255,.2)', background: 'rgba(255,255,255,.1)', color: '#fff', fontSize: 14, outline: 'none', fontFamily: "'Pretendard',sans-serif" }} />
-              </div>
-              <button onClick={() => onOpenClan(window.SA.me.clan || '불곰부대')} style={{ height: 42, padding: '0 20px', borderRadius: 8, border: '1px solid rgba(255,255,255,.25)', background: 'rgba(255,255,255,.1)', color: '#fff', fontWeight: 700, fontSize: 13.5, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", flexShrink: 0, marginLeft: 'auto' }}>
-                내 클랜 가기
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* 필터/정렬 바 */}
-        <div style={{ background: '#fff', borderBottom: '1px solid var(--line2)', position: 'sticky', top: 0, zIndex: 5 }}>
-          <div style={{ maxWidth: 1180, margin: '0 auto', padding: '12px 28px', display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
-            <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
-              {['전체', ...(window.RECRUIT_TYPES || [])].map((v) => {
-                const on = v === rtype;
-                return (
-                  <button key={v} onClick={() => setRtypeReset(v)} style={{ padding: '6px 12px', borderRadius: 20, border: `1px solid ${on ? PZPT : 'var(--line2)'}`, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12, background: on ? PZPT : '#fff', color: on ? '#fff' : 'var(--t2)' }}>{v}</button>
-                );
-              })}
-            </div>
-            <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
-              <span style={{ fontSize: 12, color: 'var(--t3)', fontWeight: 600 }}>{list.length}개 클랜</span>
-              <button onClick={() => setShowFilter((v) => !v)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 12px', borderRadius: 6, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12.5,
-                border: `1px solid ${showFilter || activeFilters ? PZPT : 'var(--line2)'}`, background: showFilter ? PZPT : '#fff', color: showFilter ? '#fff' : (activeFilters ? PZPT : 'var(--ink)') }}>
-                상세 필터{activeFilters > 0 && <span style={{ fontFamily: PZCH, fontSize: 11, fontWeight: 700, background: showFilter ? 'rgba(255,255,255,.25)' : `${PZPT}18`, borderRadius: 9, padding: '0 6px' }}>{activeFilters}</span>}
-              </button>
-              <button onClick={() => setCreating(true)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 6, border: 'none', background: PZPT, color: '#fff', fontWeight: 700, fontSize: 12.5, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif" }}>
-                모집글 등록
-              </button>
-            </div>
-          </div>
-          {/* 상세 필터 행 */}
-          {showFilter && (
-            <div style={{ borderTop: '1px solid var(--line)', background: '#fafbfc' }}>
-              <div style={{ maxWidth: 1180, margin: '0 auto', padding: '12px 28px', display: 'flex', alignItems: 'flex-end', gap: 18, flexWrap: 'wrap' }}>
-                <div>
-                  <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--t3)', marginBottom: 6 }}>내 나이</div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                    <input type="number" min="1" max="99" value={fAge} onChange={(e) => setF(setFAge)(e.target.value)} placeholder="나이"
-                      style={{ width: 64, padding: '7px 9px', border: '1px solid var(--line2)', borderRadius: 6, fontSize: 12.5, fontFamily: "'Pretendard',sans-serif", fontWeight: 600, color: 'var(--ink)', outline: 'none', boxSizing: 'border-box', background: '#fff' }} />
-                    <span style={{ fontSize: 11.5, color: 'var(--t3)', fontWeight: 600 }}>세 가입 가능</span>
-                  </div>
-                </div>
-                {[['보이스 채팅', fVoice, setFVoice, ['전체', '필수', '자율']], ['닉네임 변경', fNick, setFNick, ['전체', '불필요', '필요']], ['이중클랜·부계', fDual, setFDual, ['전체', '허용', '금지']], ['지인 동반', fFriend, setFFriend, ['전체', '가능', '불가']]].map(([lab, val, setter, opts]) => (
-                  <div key={lab}>
-                    <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--t3)', marginBottom: 6 }}>{lab}</div>
-                    <div style={{ display: 'flex', gap: 4 }}>
-                      {opts.map((o) => {
-                        const on = val === o;
-                        return (
-                          <button key={o} onClick={() => setF(setter)(o)} style={{ padding: '6px 11px', borderRadius: 6, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 11.5,
-                            border: `1px solid ${on ? PZPT : 'var(--line2)'}`, background: on ? PZPT : '#fff', color: on ? '#fff' : 'var(--t2)' }}>{o}</button>
-                        );
-                      })}
-                    </div>
-                  </div>
-                ))}
-                {activeFilters > 0 && (
-                  <button onClick={resetFilters} style={{ marginLeft: 'auto', padding: '7px 12px', borderRadius: 6, border: 'none', background: 'transparent', color: 'var(--t2)', fontWeight: 700, fontSize: 12, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", textDecoration: 'underline' }}>초기화</button>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* 내 모집글 관리 */}
-        {myPost && (
-          <div style={{ maxWidth: 1180, margin: '0 auto', padding: '16px 28px 0' }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: '#fff', border: `1px solid ${myActive ? 'var(--line)' : 'var(--line2)'}`, borderLeft: `3px solid ${myActive ? PZPT : '#c4c8ce'}`, borderRadius: 7, padding: '11px 16px', flexWrap: 'wrap' }}>
-              <window.Emblem cfg={myPost.emblem} size={26} />
-              <span style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--ink)' }}>{myClanName}</span>
-              <span style={{ fontSize: 12, fontWeight: 700, color: myActive ? PZPT : 'var(--t3)' }}>내 모집글 · {myActive ? '게시 중' : '비활성화됨'}</span>
-              {!myActive && <span style={{ fontSize: 11.5, color: 'var(--t3)' }}>목록에 노출되지 않아요.</span>}
-              <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
-                {myActive && <button onClick={() => setDetail(myPost)} style={{ padding: '7px 13px', borderRadius: 6, border: '1px solid var(--line2)', background: '#fff', color: '#3a4049', fontWeight: 700, fontSize: 12, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif" }}>미리보기</button>}
-                <button onClick={toggleMy} style={{ padding: '7px 13px', borderRadius: 6, border: 'none', background: myActive ? '#eef0f2' : PZPT, color: myActive ? '#5b626c' : '#fff', fontWeight: 700, fontSize: 12, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif" }}>
-                  {myActive ? '비활성화' : '다시 활성화'}
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* 카드 그리드 */}
-        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '20px 28px 46px' }}>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 16 }}>
-            {pageList.map((rc) => <RecruitCard key={rc.name} rc={rc} onOpen={onOpenClan} onDetail={setDetail} />)}
-          </div>
-          {totalPages > 1 && (
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginTop: 26 }}>
-              <button onClick={() => goPage(curPage - 1)} disabled={curPage === 1} style={{ width: 32, height: 32, borderRadius: 6, border: '1px solid var(--line2)', background: '#fff', cursor: curPage === 1 ? 'default' : 'pointer', opacity: curPage === 1 ? .4 : 1, display: 'grid', placeItems: 'center' }}>
-                <Icon name="chevL" size={15} stroke="var(--t2)" />
-              </button>
-              {Array.from({ length: totalPages }, (_, i) => i + 1).map((n) => (
-                <button key={n} onClick={() => goPage(n)} style={{ minWidth: 32, height: 32, padding: '0 6px', borderRadius: 6, cursor: 'pointer', fontFamily: "'Chakra Petch',sans-serif", fontWeight: 700, fontSize: 13,
-                  border: n === curPage ? 'none' : '1px solid var(--line2)', background: n === curPage ? PZPT : '#fff', color: n === curPage ? '#fff' : 'var(--t2)' }}>{n}</button>
-              ))}
-              <button onClick={() => goPage(curPage + 1)} disabled={curPage === totalPages} style={{ width: 32, height: 32, borderRadius: 6, border: '1px solid var(--line2)', background: '#fff', cursor: curPage === totalPages ? 'default' : 'pointer', opacity: curPage === totalPages ? .4 : 1, display: 'grid', placeItems: 'center' }}>
-                <Icon name="chevR" size={15} stroke="var(--t2)" />
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-      {detail && <RecruitDetail rc={detail} onClose={() => setDetail(null)} onOpenClan={onOpenClan} />}
-      {creating && <RecruitCreate onClose={() => setCreating(false)} />}
-    </div>
-  );
-}
-
-window.ClanPlaza = ClanPlaza;
-window.ContactGlyph = ContactGlyph;
diff --git a/surinz-source/sa-clan-sections.jsx b/surinz-source/sa-clan-sections.jsx
deleted file mode 100644
index dc42ff0..0000000
--- a/surinz-source/sa-clan-sections.jsx
+++ /dev/null
@@ -1,370 +0,0 @@
-/* eslint-disable */
-// ─────────────────────────────────────────────────────────────
-// searchgg · 클랜홈 섹션 컴포넌트 (브랜드 컬러 고정)
-// 의존: window.Panel, Icon, RankBadge, Emblem, SA
-// ─────────────────────────────────────────────────────────────
-const CLPT = '#48515f';
-const CLCH = "'Chakra Petch',sans-serif";
-
-function RoleBadge({ role, theme }) {
-  const map = {
-    '클랜장': { bg: theme, color: '#fff' },
-    '운영진': { bg: `${theme}22`, color: theme },
-    '정예': { bg: '#eef0f2', color: '#5b626c' },
-    '일반': { bg: 'transparent', color: '#949aa3' },
-  };
-  const s = map[role] || map['일반'];
-  return <span style={{ fontSize: 10, fontWeight: 700, padding: '1px 7px', borderRadius: 4, background: s.bg, color: s.color, flexShrink: 0 }}>{role}</span>;
-}
-
-// ── 멤버 ──
-function ClanMembers({ clan, onPick }) {
-  const groups = ['클랜장', '운영진', '정예', '일반'];
-  const byRole = (r) => clan.members.filter((m) => m.role === r);
-  return (
-    <Panel title="클랜원" en="MEMBERS" right={<span style={{ fontSize: 11, color: 'var(--t3)', fontWeight: 600 }}>{clan.totalMembers} / {clan.memberMax}명</span>} bodyPad="6px 0 6px">
-      {groups.map((g) => {
-        const list = byRole(g);
-        if (!list.length) return null;
-        return (
-          <div key={g}>
-            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '8px 16px 4px' }}>
-              <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--t3)', letterSpacing: '.3px' }}>{g} · {list.length}</span>
-              <span style={{ fontSize: 9.5, fontWeight: 600, color: 'var(--t3)' }}>기여도</span>
-            </div>
-            {list.map((m, i) => (
-              <button key={m.name + i} onClick={() => onPick && onPick(m.name)} style={{ display: 'flex', alignItems: 'center', gap: 9, width: '100%', border: 'none', background: 'transparent', padding: '8px 16px', cursor: 'pointer', textAlign: 'left', fontFamily: "'Pretendard',sans-serif" }}
-                onMouseEnter={(e) => e.currentTarget.style.background = '#f6f7f8'} onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
-                {m.rank && <RankBadge rank={m.rank} size={26} />}
-                <span style={{ flex: 1, minWidth: 0, fontSize: 13, fontWeight: 600, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.name}</span>
-                <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 3, flexShrink: 0 }}>
-                  <span style={{ fontFamily: CLCH, fontSize: 12.5, color: CLPT, fontWeight: 700 }}>{window.SA.fmt(m.contrib)}</span>
-                  <span style={{ fontSize: 9.5, color: 'var(--t3)', fontWeight: 600 }}>P</span>
-                </span>
-              </button>
-            ))}
-          </div>
-        );
-      })}
-    </Panel>
-  );
-}
-
-// ── 정기전 일정 ──
-function ClanSchedule({ clan }) {
-  const t = CLPT;
-  const [items, setItems] = React.useState(clan.schedule);
-  const [open, setOpen] = React.useState(false);
-  const [day, setDay] = React.useState('월');
-  const [time, setTime] = React.useState('21:00');
-  const [title, setTitle] = React.useState('');
-  React.useEffect(() => { setItems(clan.schedule); setOpen(false); }, [clan.name]);
-
-  const register = () => {
-    const name = title.trim();
-    if (!name) return;
-    setItems(items.map((s) => s.day === day ? { ...s, on: true, time, title: name } : s));
-    setTitle('');
-    setOpen(false);
-  };
-  const remove = (d) => setItems(items.map((s) => s.day === d ? { ...s, on: false, time: '—', title: '휴식' } : s));
-
-  const inputStyle = { border: '1px solid var(--line2)', borderRadius: 6, padding: '9px 11px', fontSize: 13, fontFamily: "'Pretendard',sans-serif", fontWeight: 600, color: 'var(--ink)', outline: 'none', boxSizing: 'border-box' };
-
-  return (
-    <Panel title="클랜 일정" en="SCHEDULE" right={clan.isMine ? (
-      <button onClick={() => setOpen(true)} style={{ border: 'none', background: 'transparent', cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12, color: t, padding: 0 }}>+ 일정 등록</button>
-    ) : null} bodyPad="12px 14px 14px">
-      <div style={{ display: 'flex', gap: 5 }}>
-        {items.map((s) => (
-          <div key={s.day} style={{ flex: 1, textAlign: 'center', padding: '9px 2px', borderRadius: 6, background: s.on ? t : '#f4f5f7', color: s.on ? '#fff' : 'var(--t3)' }}>
-            <div style={{ fontSize: 12, fontWeight: 800 }}>{s.day}</div>
-            <div style={{ fontFamily: CLCH, fontSize: 9.5, marginTop: 2, opacity: .9 }}>{s.time}</div>
-          </div>
-        ))}
-      </div>
-      <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
-        {items.filter((s) => s.on).map((s) => (
-          <div key={s.day} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5 }}>
-            <span style={{ fontWeight: 800, color: t, width: 16 }}>{s.day}</span>
-            <span style={{ fontFamily: CLCH, color: 'var(--t2)', width: 44 }}>{s.time}</span>
-            <span style={{ color: 'var(--ink)', fontWeight: 600, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.title}</span>
-            {clan.isMine && (
-              <button onClick={() => remove(s.day)} title="일정 삭제" style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--t3)', fontSize: 14, lineHeight: 1, padding: '0 2px', flexShrink: 0 }}>×</button>
-            )}
-          </div>
-        ))}
-        {items.every((s) => !s.on) && <div style={{ fontSize: 12, color: 'var(--t3)', textAlign: 'center', padding: '6px 0' }}>등록된 일정이 없어요.</div>}
-      </div>
-
-      {/* 일정 등록 모달 */}
-      {open && (
-        <div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 260, background: 'rgba(20,22,26,.55)', backdropFilter: 'blur(2px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, animation: 'sgFade .18s ease' }}>
-          <div onClick={(e) => e.stopPropagation()} style={{ width: 380, maxWidth: '100%', background: '#fff', borderRadius: 12, overflow: 'hidden', boxShadow: '0 24px 70px rgba(0,0,0,.3)', fontFamily: "'Pretendard',sans-serif" }}>
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px', borderBottom: '1px solid var(--line)' }}>
-              <span style={{ fontSize: 15, fontWeight: 800, color: 'var(--ink)' }}>일정 등록</span>
-              <button onClick={() => setOpen(false)} style={{ width: 28, height: 28, borderRadius: 6, border: 'none', background: '#eef0f2', color: '#5b626c', cursor: 'pointer', fontSize: 15 }}>×</button>
-            </div>
-            <div style={{ padding: '16px 18px' }}>
-              <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--t2)', marginBottom: 7 }}>요일</div>
-              <div style={{ display: 'flex', gap: 5, marginBottom: 14 }}>
-                {items.map((s) => (
-                  <button key={s.day} onClick={() => setDay(s.day)} style={{ flex: 1, padding: '8px 0', borderRadius: 6, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 800, fontSize: 12.5,
-                    border: `1px solid ${day === s.day ? t : 'var(--line2)'}`, background: day === s.day ? t : '#fff', color: day === s.day ? '#fff' : (s.on ? t : 'var(--t2)') }}>{s.day}</button>
-                ))}
-              </div>
-              {items.find((s) => s.day === day && s.on) && (
-                <div style={{ fontSize: 11.5, color: 'var(--t3)', marginTop: -8, marginBottom: 12 }}>이미 일정이 있는 요일이에요. 등록하면 덮어써요.</div>
-              )}
-              <div style={{ display: 'flex', gap: 10, marginBottom: 14 }}>
-                <div style={{ width: 120 }}>
-                  <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--t2)', marginBottom: 7 }}>시간</div>
-                  <input type="time" value={time} onChange={(e) => setTime(e.target.value)} style={{ ...inputStyle, width: '100%' }} />
-                </div>
-                <div style={{ flex: 1 }}>
-                  <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--t2)', marginBottom: 7 }}>일정명</div>
-                  <input value={title} onChange={(e) => setTitle(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') register(); }} placeholder="예: 정기전, 내전 데이" style={{ ...inputStyle, width: '100%' }} />
-                </div>
-              </div>
-              <div style={{ display: 'flex', gap: 8 }}>
-                <button onClick={() => setOpen(false)} style={{ flex: 1, padding: '11px 0', borderRadius: 7, border: '1px solid var(--line2)', background: '#fff', color: '#3a4049', fontWeight: 700, fontSize: 13.5, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif" }}>취소</button>
-                <button onClick={register} disabled={!title.trim()} style={{ flex: 1.4, padding: '11px 0', borderRadius: 7, border: 'none', background: title.trim() ? t : '#c4c8ce', color: '#fff', fontWeight: 700, fontSize: 13.5, cursor: title.trim() ? 'pointer' : 'not-allowed', fontFamily: "'Pretendard',sans-serif" }}>등록하기</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </Panel>
-  );
-}
-
-// ── 주간 활동 (접속률) ──
-function ClanActivity({ clan }) {
-  const days = ['월', '화', '수', '목', '금', '토', '일'];
-  const max = Math.max(...clan.attendance);
-  return (
-    <Panel title="주간 활동" en="ACTIVITY" right={<span style={{ fontSize: 11, color: 'var(--t3)', fontWeight: 600 }}>접속률</span>} bodyPad="14px 14px 12px">
-      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 7, height: 86 }}>
-        {clan.attendance.map((v, i) => (
-          <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
-            <span style={{ fontFamily: CLCH, fontSize: 10, color: 'var(--t3)', fontWeight: 600 }}>{v}%</span>
-            <div style={{ width: '100%', height: `${(v / max) * 58}px`, background: CLPT, borderRadius: '3px 3px 0 0', opacity: 0.55 + 0.45 * (v / max) }} />
-            <span style={{ fontSize: 10.5, color: 'var(--t3)' }}>{days[i]}</span>
-          </div>
-        ))}
-      </div>
-    </Panel>
-  );
-}
-
-// ── 주간 매치 (모드별) ──
-function ClanWeeklyMatches({ clan }) {
-  const days = ['월', '화', '수', '목', '금', '토', '일'];
-  const acts = clan.activity;
-  const cats = [
-    ['clanWar', '클랜전', CLPT],
-    ['clanRanked', '클랜 랭크전', '#6b7585'],
-    ['soloRanked', '솔로 랭크전', '#99a1ae'],
-    ['partyRanked', '파티 랭크전', '#cdd2d9'],
-  ];
-  const sum = (a) => cats.reduce((s, [k]) => s + a[k], 0);
-  const max = Math.max(...acts.map(sum));
-  const totals = cats.map(([k, label, color]) => [label, acts.reduce((s, a) => s + a[k], 0), color]);
-  return (
-    <Panel title="주간 매치" en="MATCHES" right={<span style={{ fontSize: 11, color: 'var(--t3)', fontWeight: 600 }}>모드별 판수</span>} bodyPad="14px 14px 12px">
-      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 7, height: 96 }}>
-        {acts.map((a, i) => (
-          <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
-            <span style={{ fontFamily: CLCH, fontSize: 10, color: 'var(--t3)', fontWeight: 600 }}>{sum(a)}</span>
-            <div style={{ width: '100%', height: `${(sum(a) / max) * 62}px`, display: 'flex', flexDirection: 'column-reverse', borderRadius: '3px 3px 0 0', overflow: 'hidden' }}>
-              {cats.map(([k, label, color]) => (
-                <div key={k} title={`${label} ${a[k]}판`} style={{ height: `${(a[k] / sum(a)) * 100}%`, background: color }} />
-              ))}
-            </div>
-            <span style={{ fontSize: 10.5, color: 'var(--t3)' }}>{days[i]}</span>
-          </div>
-        ))}
-      </div>
-      <div style={{ marginTop: 11, paddingTop: 10, borderTop: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '7px 10px' }}>
-        {totals.map(([label, n, color]) => (
-          <span key={label} style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11.5, color: 'var(--t2)', fontWeight: 600 }}>
-            <span style={{ width: 8, height: 8, borderRadius: 2, background: color, flexShrink: 0 }} />
-            {label} <b style={{ fontFamily: CLCH, color: 'var(--ink)', marginLeft: 'auto' }}>{n}판</b>
-          </span>
-        ))}
-      </div>
-    </Panel>
-  );
-}
-
-// ── 미니 페이저 ──
-function ClanPager({ page, total, onPage }) {
-  if (total <= 1) return null;
-  const nav = (dis) => ({ width: 26, height: 26, borderRadius: 5, border: '1px solid var(--line2)', background: '#fff', cursor: dis ? 'default' : 'pointer', opacity: dis ? .4 : 1, display: 'grid', placeItems: 'center' });
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '11px 0 5px' }}>
-      <button onClick={() => onPage(page - 1)} disabled={page === 1} style={nav(page === 1)}><Icon name="chevL" size={13} stroke="var(--t2)" /></button>
-      {Array.from({ length: total }, (_, i) => i + 1).map((n) => (
-        <button key={n} onClick={() => onPage(n)} style={{ minWidth: 26, height: 26, padding: '0 5px', borderRadius: 5, cursor: 'pointer', fontFamily: CLCH, fontWeight: 700, fontSize: 11.5, border: n === page ? 'none' : '1px solid var(--line2)', background: n === page ? CLPT : '#fff', color: n === page ? '#fff' : 'var(--t2)' }}>{n}</button>
-      ))}
-      <button onClick={() => onPage(page + 1)} disabled={page === total} style={nav(page === total)}><Icon name="chevR" size={13} stroke="var(--t2)" /></button>
-    </div>
-  );
-}
-
-// ── 공지 ──
-function ClanNotices({ clan }) {
-  const PER = 4;
-  const [page, setPage] = React.useState(1);
-  React.useEffect(() => setPage(1), [clan.name]);
-  const total = Math.max(1, Math.ceil(clan.notices.length / PER));
-  const cur = Math.min(page, total);
-  const rows = clan.notices.slice((cur - 1) * PER, cur * PER);
-  return (
-    <Panel title="클랜 공지" en="NOTICE" bodyPad="2px 14px 6px">
-      {rows.map((n, i) => (
-        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 2px', borderBottom: i < rows.length - 1 ? '1px solid #eaecef' : 'none', cursor: 'pointer' }}>
-          {n.pin && <span style={{ fontSize: 10, fontWeight: 800, color: CLPT, flexShrink: 0 }}>고정</span>}
-          <span style={{ flex: 1, fontSize: 13.5, color: '#33373d', fontWeight: n.pin ? 700 : 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{n.title}</span>
-          <span style={{ fontSize: 11, color: 'var(--t3)', flexShrink: 0 }}>{n.author} · {n.time}</span>
-        </div>
-      ))}
-      <ClanPager page={cur} total={total} onPage={(n) => setPage(Math.max(1, Math.min(total, n)))} />
-    </Panel>
-  );
-}
-
-// ── 클랜 피드 ──
-function ClanFeed({ clan }) {
-  const PER = 3;
-  const [items, setItems] = React.useState(clan.feed);
-  const [draft, setDraft] = React.useState('');
-  const [page, setPage] = React.useState(1);
-  React.useEffect(() => { setItems(clan.feed); setDraft(''); setPage(1); }, [clan.name]);
-  const total = Math.max(1, Math.ceil(items.length / PER));
-  const cur = Math.min(page, total);
-  const rows = items.slice((cur - 1) * PER, cur * PER);
-  const post = () => {
-    const text = draft.trim();
-    if (!text) return;
-    setItems([{ author: window.SA.me.name, role: '일반', time: '방금 전', text, likes: 0 }, ...items]);
-    setDraft('');
-    setPage(1);
-  };
-  return (
-    <Panel title="클랜 피드" en="FEED" bodyPad="6px 14px 12px">
-      {clan.isMine && (
-        <div style={{ display: 'flex', gap: 8, padding: '10px 0 12px', borderBottom: '1px solid var(--line)' }}>
-          <div style={{ width: 34, height: 34, borderRadius: '50%', background: `${CLPT}1c`, color: CLPT, display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 14, flexShrink: 0 }}>{window.SA.me.name.slice(0, 1)}</div>
-          <input value={draft} onChange={(e) => setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') post(); }}
-            placeholder="클랜원들에게 소식을 남겨보세요"
-            style={{ flex: 1, minWidth: 0, border: '1px solid var(--line2)', borderRadius: 6, padding: '9px 12px', fontSize: 13, fontFamily: "'Pretendard',sans-serif", outline: 'none' }} />
-          <button onClick={post} disabled={!draft.trim()} style={{ padding: '0 16px', borderRadius: 6, border: 'none', cursor: draft.trim() ? 'pointer' : 'not-allowed', background: draft.trim() ? CLPT : '#c4c8ce', color: '#fff', fontWeight: 700, fontSize: 12.5, fontFamily: "'Pretendard',sans-serif", flexShrink: 0 }}>작성</button>
-        </div>
-      )}
-      {rows.map((f, i) => (
-        <div key={(cur - 1) * PER + i} style={{ display: 'flex', gap: 11, padding: '11px 0', borderBottom: i < rows.length - 1 ? '1px solid #f1f2f4' : 'none' }}>
-          <div style={{ width: 34, height: 34, borderRadius: '50%', background: `${CLPT}1c`, color: CLPT, display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 14, flexShrink: 0 }}>{f.author.slice(0, 1)}</div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
-              <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)' }}>{f.author}</span>
-              <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--t3)' }}>{f.time}</span>
-            </div>
-            <div style={{ fontSize: 13.5, color: '#3a4049', lineHeight: 1.5 }}>{f.text}</div>
-            <div style={{ marginTop: 6, display: 'flex', alignItems: 'center', gap: 5, color: 'var(--t3)' }}>
-              <Icon name="heart" size={13} stroke="var(--t3)" /><span style={{ fontSize: 11.5, fontWeight: 600 }}>{f.likes}</span>
-            </div>
-          </div>
-        </div>
-      ))}
-      <ClanPager page={cur} total={total} onPage={(n) => setPage(Math.max(1, Math.min(total, n)))} />
-    </Panel>
-  );
-}
-
-// ── 방명록 ──
-function ClanGuestbook({ clan }) {
-  const PER = 4;
-  const [items, setItems] = React.useState(clan.guestbook);
-  const [draft, setDraft] = React.useState('');
-  const [page, setPage] = React.useState(1);
-  React.useEffect(() => { setItems(clan.guestbook); setDraft(''); setPage(1); }, [clan.name]);
-  const total = Math.max(1, Math.ceil(items.length / PER));
-  const cur = Math.min(page, total);
-  const rows = items.slice((cur - 1) * PER, cur * PER);
-  const post = () => {
-    const text = draft.trim();
-    if (!text) return;
-    setItems([{ author: window.SA.me.name, text, time: '방금 전' }, ...items]);
-    setDraft('');
-    setPage(1);
-  };
-  const [replyAt, setReplyAt] = React.useState(-1);
-  const [replyDraft, setReplyDraft] = React.useState('');
-  React.useEffect(() => { setReplyAt(-1); setReplyDraft(''); }, [clan.name]);
-  const postReply = (gi) => {
-    const text = replyDraft.trim();
-    if (!text) return;
-    setItems(items.map((g, idx) => idx === gi ? { ...g, replies: [...(g.replies || []), { author: window.SA.me.name, text, time: '방금 전' }] } : g));
-    setReplyDraft('');
-    setReplyAt(-1);
-  };
-  return (
-    <Panel title="방명록" en="GUESTBOOK" right={clan.isMine ? <span style={{ fontSize: 11, color: 'var(--t3)', fontWeight: 600 }}>클랜원은 답글만 달 수 있어요</span> : null} bodyPad="10px 14px 14px">
-      {!clan.isMine && (
-        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
-          <input value={draft} onChange={(e) => setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') post(); }} placeholder="따뜻한 한마디를 남겨보세요" style={{ flex: 1, minWidth: 0, border: '1px solid var(--line2)', borderRadius: 6, padding: '9px 12px', fontSize: 13, fontFamily: "'Pretendard',sans-serif", outline: 'none' }} />
-          <button onClick={post} disabled={!draft.trim()} style={{ padding: '0 16px', borderRadius: 6, border: 'none', background: draft.trim() ? CLPT : '#c4c8ce', color: '#fff', fontWeight: 700, fontSize: 13, cursor: draft.trim() ? 'pointer' : 'not-allowed', fontFamily: "'Pretendard',sans-serif", flexShrink: 0 }}>등록</button>
-        </div>
-      )}
-      {rows.map((g, i) => {
-        const gi = (cur - 1) * PER + i;
-        const replies = g.replies || [];
-        return (
-          <div key={gi} style={{ display: 'flex', gap: 9, padding: '9px 0', borderTop: '1px solid #f1f2f4' }}>
-            <div style={{ width: 28, height: 28, borderRadius: '50%', background: '#eef0f2', color: '#7a8089', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 12, flexShrink: 0 }}>{g.author.slice(0, 1)}</div>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{ display: 'flex', alignItems: 'baseline', gap: 7 }}>
-                <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink)' }}>{g.author}</span>
-                <span style={{ fontSize: 11, color: 'var(--t3)' }}>{g.time}</span>
-                {clan.isMine && (
-                  <button onClick={() => { setReplyAt(replyAt === gi ? -1 : gi); setReplyDraft(''); }} style={{ marginLeft: 'auto', border: 'none', background: 'transparent', cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 11, color: CLPT, padding: 0, flexShrink: 0 }}>
-                    {replyAt === gi ? '취소' : '답글'}
-                  </button>
-                )}
-              </div>
-              <div style={{ fontSize: 13, color: '#3a4049', marginTop: 2 }}>{g.text}</div>
-
-              {/* 답글 목록 */}
-              {replies.map((rp, j) => (
-                <div key={j} style={{ display: 'flex', gap: 9, marginTop: 13, paddingLeft: 10, borderLeft: `2px solid ${CLPT}33` }}>
-                  <div style={{ width: 28, height: 28, borderRadius: '50%', background: `${CLPT}1c`, color: CLPT, display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 12, flexShrink: 0 }}>{rp.author.slice(0, 1)}</div>
-                  <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 7 }}>
-                      <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink)' }}>{rp.author}</span>
-                      <span style={{ fontSize: 9.5, fontWeight: 700, color: CLPT, border: `1px solid ${CLPT}55`, borderRadius: 3, padding: '0 4px' }}>클랜원</span>
-                      <span style={{ fontSize: 11, color: 'var(--t3)' }}>{rp.time}</span>
-                    </div>
-                    <div style={{ fontSize: 13, color: '#3a4049', marginTop: 4 }}>{rp.text}</div>
-                  </div>
-                </div>
-              ))}
-
-              {/* 답글 입력 */}
-              {replyAt === gi && (
-                <div style={{ display: 'flex', gap: 7, marginTop: 13, paddingLeft: 10, borderLeft: `2px solid ${CLPT}33` }}>
-                  <input autoFocus value={replyDraft} onChange={(e) => setReplyDraft(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') postReply(gi); }} placeholder="답글을 남겨보세요"
-                    style={{ flex: 1, minWidth: 0, border: '1px solid var(--line2)', borderRadius: 6, padding: '7px 10px', fontSize: 12.5, fontFamily: "'Pretendard',sans-serif", outline: 'none' }} />
-                  <button onClick={() => postReply(gi)} disabled={!replyDraft.trim()} style={{ padding: '0 13px', borderRadius: 6, border: 'none', background: replyDraft.trim() ? CLPT : '#c4c8ce', color: '#fff', fontWeight: 700, fontSize: 11.5, cursor: replyDraft.trim() ? 'pointer' : 'not-allowed', fontFamily: "'Pretendard',sans-serif", flexShrink: 0 }}>등록</button>
-                </div>
-              )}
-            </div>
-          </div>
-        );
-      })}
-      <ClanPager page={cur} total={total} onPage={(n) => setPage(Math.max(1, Math.min(total, n)))} />
-    </Panel>
-  );
-}
-
-Object.assign(window, { ClanMembers, ClanSchedule, ClanActivity, ClanWeeklyMatches, ClanNotices, ClanFeed, ClanGuestbook });
diff --git a/surinz-source/sa-clan.jsx b/surinz-source/sa-clan.jsx
deleted file mode 100644
index cd5aee7..0000000
--- a/surinz-source/sa-clan.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/* eslint-disable */
-// ─────────────────────────────────────────────────────────────
-// searchgg · 클랜홈 메인 화면 (브랜드 컬러 고정)
-// window.ClanHome  ·  의존: Nav, Panel, Icon, Emblem, ClanDB, 섹션들(window)
-// ─────────────────────────────────────────────────────────────
-function ClanHome({ clanName, onClose, onPick, onLogin, onCommunity }) {
-  const clan = window.ClanDB(clanName);
-  const t = '#48515f'; // 브랜드 포인트 컬러(올리브)
-
-  const stat = (label, value, sub) => (
-    <div style={{ flex: 1, textAlign: 'center', padding: '12px 6px', display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: 60 }}>
-      <div style={{ fontSize: 10.5, color: 'var(--t3)', fontWeight: 600, marginBottom: 5 }}>{label}</div>
-      <div style={{ fontFamily: "'Chakra Petch',sans-serif", fontWeight: 700, fontSize: 15, color: 'var(--ink)', lineHeight: 1.1 }}>{value}</div>
-      {sub && <div style={{ fontSize: 10, color: t, fontWeight: 700, fontFamily: "'Chakra Petch',sans-serif", marginTop: 3 }}>{sub}</div>}
-    </div>
-  );
-
-  return (
-    <div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'var(--bg2)', display: 'flex', flexDirection: 'column', animation: 'sgFade .22s ease' }}>
-      <window.Nav active="클랜" onLogin={onLogin} onCommunity={onCommunity} />
-      <div style={{ flex: 1, overflowY: 'auto' }}>
-        {/* 히어로 배너 */}
-        <div style={{ position: 'relative', background: '#1c1f24' }}>
-          <image-slot id={`clan-banner-${clan.name}`} shape="rect" placeholder="클랜 대표 배너 이미지를 끌어다 놓으세요" style={{ display: 'block', width: '100%', height: 210, color: 'rgba(255,255,255,.78)' }}></image-slot>
-          <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, ${t}26 0%, rgba(20,22,26,.34) 46%, rgba(20,22,26,.9) 100%)`, pointerEvents: 'none' }} />
-          <div style={{ position: 'absolute', top: 14, left: 0, right: 0, maxWidth: 1180, margin: '0 auto', padding: '0 28px', display: 'flex', justifyContent: 'flex-end', pointerEvents: 'none' }}>
-            <button onClick={onClose} style={{ pointerEvents: 'auto', display: 'flex', alignItems: 'center', gap: 5, padding: '7px 13px', borderRadius: 6, border: 'none', background: 'rgba(0,0,0,.42)', color: '#fff', cursor: 'pointer', fontWeight: 600, fontSize: 12.5, fontFamily: "'Pretendard',sans-serif" }}>
-              <Icon name="chevL" size={15} stroke="#fff" /> 닫기
-            </button>
-          </div>
-
-          {/* 엠블럼 + 정체성 */}
-          <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, maxWidth: 1180, margin: '0 auto', padding: '0 28px 20px', display: 'flex', alignItems: 'flex-end', gap: 20 }}>
-            <div style={{ flexShrink: 0 }}><window.Emblem cfg={clan.emblem} size={104} /></div>
-            <div style={{ flex: 1, minWidth: 0, paddingBottom: 4 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
-                <h1 style={{ margin: 0, fontSize: 30, fontWeight: 800, color: '#fff', letterSpacing: '-.6px', textShadow: '0 2px 12px rgba(0,0,0,.4)' }}>{clan.name}</h1>
-                {clan.isMine && <span style={{ padding: '3px 10px', borderRadius: 5, background: t, color: '#fff', fontWeight: 700, fontSize: 11.5 }}>내 클랜</span>}
-              </div>
-              <div style={{ marginTop: 7, fontSize: 14.5, color: 'rgba(255,255,255,.9)', fontWeight: 500, fontStyle: 'italic' }}>“{clan.slogan}”</div>
-            </div>
-            {!clan.isMine && (
-              <div style={{ flexShrink: 0, paddingBottom: 4 }}>
-                <button style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 20px', borderRadius: 7, border: 'none', cursor: 'pointer', background: t, color: '#fff', fontWeight: 700, fontSize: 13.5, fontFamily: "'Pretendard',sans-serif", boxShadow: '0 3px 12px rgba(0,0,0,.25)' }}>
-                  가입 신청
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* 스탯 스트립 */}
-        <div style={{ background: '#fff', borderBottom: '1px solid var(--line2)' }}>
-          <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 28px' }}>
-            <div style={{ display: 'flex', alignItems: 'stretch' }}>
-              {stat('클랜 랭킹', `${clan.rank}위`)}
-              <span style={{ width: 1, background: 'var(--line)' }} />
-              {stat('클랜원', `${clan.totalMembers}명`)}
-              <span style={{ width: 1, background: 'var(--line)' }} />
-              {stat('창설일', clan.founded)}
-              <span style={{ width: 1, background: 'var(--line)' }} />
-              {stat('클랜 경험치', `${window.SA.fmt(clan.expTotal)} EXP`, `▲ ${window.SA.fmt(clan.expWeek)} 이번 주`)}
-            </div>
-          </div>
-        </div>
-
-        {/* 본문 */}
-        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '22px 28px 44px' }}>
-          {/* 소개 */}
-          <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 6, padding: '16px 18px', marginBottom: 18, borderLeft: `4px solid ${t}` }}>
-            <div style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--t3)', marginBottom: 7 }}>클랜 소개</div>
-            <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.65, color: '#3a4049' }}>{clan.intro}</p>
-          </div>
-
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 322px', gap: 18, alignItems: 'start' }}>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, minWidth: 0 }}>
-              <window.ClanNotices clan={clan} />
-              <window.ClanFeed clan={clan} />
-              <window.ClanGuestbook clan={clan} />
-            </div>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
-              <window.ClanSchedule clan={clan} />
-              <window.ClanActivity clan={clan} />
-              <window.ClanWeeklyMatches clan={clan} />
-              <window.ClanMembers clan={clan} onPick={onPick} />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-window.ClanHome = ClanHome;
diff --git a/surinz-source/sa-community.jsx b/surinz-source/sa-community.jsx
deleted file mode 100644
index 95a7725..0000000
--- a/surinz-source/sa-community.jsx
+++ /dev/null
@@ -1,551 +0,0 @@
-/* eslint-disable */
-// ─────────────────────────────────────────────────────────────
-// searchgg · 커뮤니티 (목록 화면)
-// 게시판: 자유 / 공략·팁 / 질문 / 파티 모집 — 텍스트 리스트형
-// 사이드: 인기글(HOT) · 주간 베스트
-// ─────────────────────────────────────────────────────────────
-const CMPT = '#48515f';
-const CMCH = "'Chakra Petch',sans-serif";
-
-// ── 게시글 더미 데이터 (시드 고정) ──
-const CM_BOARDS = ['자유', '공략·팁', '질문', '파티 모집'];
-const CM_POSTS = (() => {
-  const titles = {
-    '자유': ['오늘 제3보급 진짜 미친 매치 했다', '시즌2 보상 다들 받았음?', '요즘 저녁 큐 잡히는 속도 어떰', '복귀했는데 감도 설정 다 까먹음', '클랜전 하다가 현타온 썰', '이번 패치 평가 어떻게 생각함', '10년차 유저인데 아직도 재밌네', '오랜만에 5연승 함 ㅋㅋ', '새벽 매치 분위기 좋아서 글 남김', '내일 점검이라는데 뭐 바뀜?', '신캐 나오면 누구 뽑을 거임', '오늘자 명장면.gif 올림'],
-    '공략·팁': ['데드폴 수비 루트 총정리 (시즌2 기준)', '웨어하우스 러시 타이밍 분석', '저감도 vs 고감도 — 결론 정리해줌', '라이플 반동 제어 연습법 공유', '컨테이너시티 스나 포지션 5곳', '클랜 랭크전 픽 우선순위 가이드', '초보가 제일 많이 하는 실수 7가지', '3vs3 맵별 스폰 위치 정리', '에임 워밍업 루틴 추천', '파티 랭크전 콜 사인 정리본'],
-    '질문': ['랭크 점수 산정 방식 아시는 분?', '티어 강등 기준이 어떻게 되나요', '클랜 옮기면 클랜전 기록 초기화되나요?', '모니터 144hz 체감 큰가요', '복귀 유저인데 뭐부터 하면 됨?', '계급이랑 티어 차이가 뭔가요', '신고하면 처리 결과 알 수 있나요', '파티 랭크전 듀오 가능한가요', '토너먼트 참가 조건 아시는 분', '전적 갱신이 안 되는데 저만 그런가요'],
-    '파티 모집': ['파티 랭크전 같이 하실 분 (골드 이상)', '저녁 9시 클랜전 용병 1명 구해요', '3보급 내전 인원 모집합니다', '주말 토너먼트 팀원 구함 (스나 1)', '심야 듀오 구합니다 — 마스터 부근', '즐겜 파티 상시 모집 중', '음성 가능한 파티 멤버 2명', 'A보급 연습 같이 하실 분', '평일 오후 파티 고정 멤버 구해요', '랭커 도전 듀오 모집 (진지하게)'],
-  };
-  const nicks = ['독수리오형제', '한밤의저격수', '돌격대장', '연사의신', '클러치킹', '광속에임', '벽뚫는소리', '플래시뱅', '노스코프', '리코일제로', '소음기장착', '검은표범', '강철멘탈', '야시경', '엄폐엄폐', '침착한손', '스나는예술', '원피스원킬'];
-  const out = [];
-  let id = 0;
-  CM_BOARDS.forEach((board, bi) => {
-    titles[board].forEach((title, ti) => {
-      const seed = (bi * 131 + ti * 17 + title.length * 7) % 9973;
-      const hours = 1 + (seed % 70);
-      out.push({
-        id: ++id, board, title,
-        author: nicks[(seed + bi) % nicks.length],
-        time: hours < 24 ? `${hours}시간 전` : `${Math.floor(hours / 24)}일 전`,
-        hoursAgo: hours,
-        views: 120 + (seed % 4200),
-        cmt: seed % 46,
-        up: seed % 88,
-        hot: seed % 5 === 0,
-        hasImage: seed % 3 === 0,
-        party: board === '파티 모집' ? {
-          ptype: ['클랜전', '파티 랭크전', '클랜 랭크전', '토너먼트', '생존', '기타'][seed % 6],
-          voice: seed % 3 !== 0,
-        } : null,
-      });
-    });
-  });
-  return out.sort((a, b) => a.hoursAgo - b.hoursAgo);
-})();
-
-// ── 고정 공지 ──
-const CM_NOTICES = [
-  { title: '커뮤니티 이용 규칙 안내 — 비방·도배·정치 글 제재', time: '운영팀' },
-  { title: '파티 모집 글은 파티 모집 게시판에만 작성해주세요', time: '운영팀' },
-];
-
-// 파티 모집 유형
-const CM_PARTY_TYPES = ['클랜전', '파티 랭크전', '클랜 랭크전', '토너먼트', '생존', '기타'];
-// 파티 모집 조건 → 배지 라벨 배열
-function cmPartyBadges(party) {
-  return [party.ptype, party.voice ? '보이스 채팅 필수' : null].filter(Boolean);
-}
-
-// 개념글 기준 추천 수
-const CM_BEST_UP = 40;
-
-// 서든어택 계정 인증 여부 (닉네임 시드 고정)
-function cmVerified(name) {
-  if (!name) return false;
-  if (window.SA && window.SA.me && name === window.SA.me.name) return true;
-  let s = 0;
-  for (let i = 0; i < name.length; i++) s = (s + name.charCodeAt(i) * (i + 1)) % 997;
-  return s % 3 !== 0; // 약 2/3 인증
-}
-// 인증 배지 (인증=서든 마크 / 미인증=표시 없음)
-function CmVerifiedTag({ name, size = 13 }) {
-  if (!cmVerified(name)) return null;
-  return (
-    <span title="서든어택 계정 인증 유저" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: size, height: size, borderRadius: '50%', background: CMPT, flexShrink: 0 }}>
-      <svg width={size * 0.68} height={size * 0.68} viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" /></svg>
-    </span>
-  );
-}
-function CmAuthor({ name, style }) {
-  return (
-    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, minWidth: 0 }}>
-      <span style={{ ...style, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{name}</span>
-      <CmVerifiedTag name={name} />
-    </span>
-  );
-}
-
-// ── 글 상세 더미 (본문·댓글, 시드 고정) ──
-const CM_BODIES = {
-  '자유': '오늘 매치 돌리면서 느낀 점 적어봅니다.\n\n요즘 큐 잡히는 속도도 그렇고 전반적인 매치 퀄리티가 시즌 초반보다 확실히 좋아진 느낌이에요. 다들 체감 어떠신지 궁금합니다.\n\n댓글로 의견 남겨주세요!', '공략·팁': '직접 테스트해보고 정리한 내용입니다.\n\n1. 진입 타이밍은 소리 정보가 제일 중요합니다. 발소리 출력을 충분히 키우세요.\n2. 교전 전에 미니맵으로 아군 위치를 확인하는 습관을 들이면 생존율이 크게 올라갑니다.\n3. 마지막으로, 장시간 연승보다 짧게 끊어서 집중하는 게 에임 유지에 좋았습니다.\n\n궁금한 점은 댓글로 물어보세요.', '질문': '검색해봐도 정확한 내용이 안 나와서 질문 남깁니다.\n\n아시는 분 계시면 답변 부탁드려요. 미리 감사합니다!', '파티 모집': '안녕하세요, 글 제목 그대로 함께하실 분 찾습니다.\n\n· 매너 좋으신 분이면 실력 무관\n· 저녁 시간대 위주로 활동합니다\n\n댓글이나 쪽지 주세요!',
-};
-const CM_CMT_TEXTS = ['완전 공감합니다 ㅋㅋ', '좋은 글 감사합니다. 추천 누르고 갑니다', '이거 진짜 유용하네요. 저장해둡니다', '저는 생각이 좀 다른데... 그래도 잘 봤습니다', '댓글 보고 바로 해봤는데 효과 있음', '이런 글 많이 올라오면 좋겠어요', '쪽지 보냈습니다!', '오 나도 어제 비슷한 경험 함', '정리 깔낁하네요 잘 읽었습니다', '이거 때문에 요즘 매치 분위기 좋아짐'];
-const CM_CMT_NICKS = ['안개손절이', '플래그팔로우', '리스폰지옥', '점수지키미', '안전제일', '한발더', '에임수엽', '무릎샇소리'];
-function cmDetail(p) {
-  const seed = (p.id * 37) % 9973;
-  const n = 2 + (seed % 5);
-  const comments = [];
-  for (let i = 0; i < n; i++) {
-    comments.push({
-      author: CM_CMT_NICKS[(seed + i * 3) % CM_CMT_NICKS.length],
-      text: CM_CMT_TEXTS[(seed + i * 5) % CM_CMT_TEXTS.length],
-      time: `${1 + ((seed + i * 7) % 20)}시간 전`,
-      up: (seed + i * 11) % 18,
-      replies: i === 0 ? [{ author: CM_CMT_NICKS[(seed + 5) % CM_CMT_NICKS.length], text: '맞아요, 저도 비슷하게 느꼈습니다.', time: `${1 + (seed % 12)}시간 전` }] : [],
-    });
-  }
-  return { body: p.body || CM_BODIES[p.board], comments };
-}
-
-// ── 목록 행 ──
-function CmRow({ p, zebra, onOpen }) {
-  return (
-    <div onClick={() => onOpen && onOpen(p)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 14px', background: zebra ? '#fbfbfc' : '#fff', borderBottom: '1px solid #eef0f2', cursor: 'pointer' }}>
-      <span style={{ flexShrink: 0, fontSize: 10.5, fontWeight: 700, padding: '1px 7px', borderRadius: 4, background: '#f1f3f5', border: '1px solid var(--line)', color: '#5a5f66', minWidth: 44, textAlign: 'center' }}>{p.board}</span>
-      <span style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 6 }}>
-        <span style={{ minWidth: 0, flexShrink: 1, fontSize: 13.5, lineHeight: 1.3, color: '#33373d', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.title}</span>
-        {p.hasImage && (
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--t3)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }} title="사진 포함">
-            <rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="M21 15l-5-5L5 21" />
-          </svg>
-        )}
-        {p.cmt > 0 && <span style={{ flexShrink: 0, fontFamily: CMCH, fontSize: 11.5, lineHeight: 1, fontWeight: 700, color: CMPT }}>[{p.cmt}]</span>}
-        {p.hot && <span style={{ flexShrink: 0, fontFamily: CMCH, fontSize: 9.5, lineHeight: 1, fontWeight: 800, color: '#b23b3b' }}>HOT</span>}
-        {p.party && (
-          <span style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
-            {cmPartyBadges(p.party).slice(0, 3).map((b) => (
-              <span key={b} style={{ display: 'inline-flex', alignItems: 'center', height: 18, fontSize: 9.5, fontWeight: 700, lineHeight: 1, color: 'var(--t2)', border: '1px solid var(--line2)', borderRadius: 3, padding: '0 5px', boxSizing: 'border-box' }}>{b}</span>
-            ))}
-          </span>
-        )}
-      </span>
-      <span style={{ flexShrink: 0, fontFamily: CMCH, fontSize: 11, width: 52, textAlign: 'right', color: p.up >= CM_BEST_UP ? CMPT : 'var(--t3)', fontWeight: p.up >= CM_BEST_UP ? 700 : 400 }}>추천 {p.up}</span>
-      <span style={{ flexShrink: 0, width: 92, display: 'flex', justifyContent: 'flex-end' }}><CmAuthor name={p.author} style={{ fontSize: 12, color: 'var(--t2)' }} /></span>
-      <span style={{ flexShrink: 0, fontSize: 11, color: 'var(--t3)', width: 56, textAlign: 'right' }}>{p.time}</span>
-      <span style={{ flexShrink: 0, fontFamily: CMCH, fontSize: 11, color: 'var(--t3)', width: 52, textAlign: 'right' }}>{window.SA.fmt(p.views)}</span>
-    </div>
-  );
-}
-
-// ── 사이드 위젯 ──
-function CmSidePanel({ title, en, posts, valueOf, onOpen }) {
-  return (
-    <Panel title={title} en={en} bodyPad="4px 0 6px">
-      {posts.map((p, i) => (
-        <div key={p.id} onClick={() => onOpen && onOpen(p)} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '9px 14px', borderBottom: i < posts.length - 1 ? '1px solid #f1f2f4' : 'none', cursor: 'pointer' }}>
-          <span style={{ width: 14, textAlign: 'center', fontFamily: CMCH, fontWeight: 700, fontSize: 12.5, lineHeight: 1, color: i < 3 ? CMPT : 'var(--t3)', flexShrink: 0 }}>{i + 1}</span>
-          <span style={{ flex: 1, minWidth: 0, fontSize: 12.5, lineHeight: 1.3, color: '#33373d', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.title}</span>
-          <span style={{ flexShrink: 0, fontFamily: CMCH, fontSize: 10.5, lineHeight: 1, color: 'var(--t3)', whiteSpace: 'nowrap' }}>{valueOf(p)}</span>
-        </div>
-      ))}
-    </Panel>
-  );
-}
-
-// ── 글 상세 ──
-function CmPostDetail({ p, onBack }) {
-  const d = React.useMemo(() => cmDetail(p), [p.id]);
-  const [comments, setComments] = React.useState(d.comments);
-  const [draft, setDraft] = React.useState('');
-  const [up, setUp] = React.useState(p.up);
-  const [voted, setVoted] = React.useState(0); // 0 없음 / 1 추천 / -1 비추
-  React.useEffect(() => { setComments(d.comments); setDraft(''); setUp(p.up); setVoted(0); setCmtVoted({}); }, [p.id]);
-  const vote = (v) => {
-    if (voted === v) { setVoted(0); setUp(up - v); return; }
-    setUp(up - voted + v);
-    setVoted(v);
-  };
-  const delCmt = (i) => setComments(comments.map((c, idx) => idx === i ? { ...c, deleted: true } : c));
-  const post = () => {
-    const text = draft.trim();
-    if (!text) return;
-    setComments([...comments, { author: window.SA.me.name, text, time: '방금 전', up: 0, replies: [] }]);
-    setDraft('');
-  };
-  const [replyAt, setReplyAt] = React.useState(-1);
-  const [replyDraft, setReplyDraft] = React.useState('');
-  const [cmtVoted, setCmtVoted] = React.useState({});
-  const voteCmt = (i) => setCmtVoted((v) => ({ ...v, [i]: !v[i] }));
-  const postReply = (ci) => {
-    const text = replyDraft.trim();
-    if (!text) return;
-    setComments(comments.map((c, idx) => idx === ci ? { ...c, replies: [...(c.replies || []), { author: window.SA.me.name, text, time: '방금 전' }] } : c));
-    setReplyDraft('');
-    setReplyAt(-1);
-  };
-  return (
-    <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 8, overflow: 'hidden' }}>
-      {/* 상단 */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', borderBottom: '1px solid var(--line)' }}>
-        <button onClick={onBack} style={{ display: 'flex', alignItems: 'center', gap: 4, border: '1px solid var(--line2)', background: '#fff', borderRadius: 6, padding: '6px 12px', cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12, color: 'var(--t2)' }}>
-          <Icon name="chevL" size={13} stroke="var(--t2)" /> 목록
-        </button>
-        <span style={{ fontSize: 10.5, fontWeight: 700, padding: '1px 7px', borderRadius: 4, background: '#f1f3f5', border: '1px solid var(--line)', color: '#5a5f66' }}>{p.board}</span>
-      </div>
-
-      {/* 제목 + 메타 */}
-      <div style={{ padding: '16px 18px 14px', borderBottom: '1px solid var(--line)' }}>
-        <h2 style={{ margin: 0, fontSize: 19, fontWeight: 800, color: 'var(--ink)', letterSpacing: '-.3px', lineHeight: 1.4 }}>{p.title}</h2>
-        <div style={{ marginTop: 9, display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--t3)', flexWrap: 'wrap' }}>
-          <CmAuthor name={p.author} style={{ fontWeight: 700, color: 'var(--t2)' }} />
-          <span>·</span><span>{p.time}</span>
-          <span>·</span><span>조회 <b style={{ fontFamily: CMCH, color: 'var(--t2)' }}>{window.SA.fmt(p.views)}</b></span>
-          <span>·</span><span>추천 <b style={{ fontFamily: CMCH, color: up >= CM_BEST_UP ? CMPT : 'var(--t2)' }}>{up}</b></span>
-        </div>
-        {p.party && (
-          <div style={{ marginTop: 11, display: 'flex', gap: 6 }}>
-            {cmPartyBadges(p.party).map((b) => (
-              <span key={b} style={{ display: 'inline-flex', alignItems: 'center', height: 22, fontSize: 11, fontWeight: 700, color: 'var(--t2)', border: '1px solid var(--line2)', borderRadius: 4, padding: '0 8px' }}>{b}</span>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* 본문 */}
-      <div style={{ padding: '18px 18px 8px', fontSize: 14, lineHeight: 1.8, color: '#33373d', whiteSpace: 'pre-line' }}>{d.body}</div>
-
-      {/* 추천/비추 */}
-      <div style={{ display: 'flex', justifyContent: 'center', gap: 8, padding: '16px 0 20px' }}>
-        <button onClick={() => vote(1)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '9px 18px', borderRadius: 7, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 13,
-          border: `1px solid ${voted === 1 ? CMPT : 'var(--line2)'}`, background: voted === 1 ? CMPT : '#fff', color: voted === 1 ? '#fff' : 'var(--t2)' }}>
-          ▲ 추천 <span style={{ fontFamily: CMCH }}>{up}</span>
-        </button>
-        <button onClick={() => vote(-1)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '9px 18px', borderRadius: 7, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 13,
-          border: `1px solid ${voted === -1 ? '#b23b3b' : 'var(--line2)'}`, background: voted === -1 ? '#b23b3b' : '#fff', color: voted === -1 ? '#fff' : 'var(--t2)' }}>
-          ▼ 비추
-        </button>
-      </div>
-
-      {/* 댓글 */}
-      <div style={{ borderTop: '1px solid var(--line)', padding: '14px 18px 18px' }}>
-        <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--ink)', marginBottom: 10 }}>댓글 <span style={{ fontFamily: CMCH, color: CMPT }}>{comments.length}</span></div>
-        {comments.map((c, i) => (
-          <div key={i} style={{ display: 'flex', gap: 9, padding: '10px 0', borderTop: i ? '1px solid #f1f2f4' : 'none' }}>
-            <div style={{ width: 28, height: 28, borderRadius: '50%', background: '#eef0f2', color: '#7a8089', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 12, flexShrink: 0, opacity: c.deleted ? .5 : 1 }}>{c.deleted ? '–' : c.author.slice(0, 1)}</div>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              {c.deleted ? (
-                <div style={{ fontSize: 13, color: 'var(--t3)', fontStyle: 'italic', padding: '5px 0' }}>삭제된 댓글입니다.</div>
-              ) : (
-              <React.Fragment>
-              <div style={{ display: 'flex', alignItems: 'baseline', gap: 7 }}>
-                <CmAuthor name={c.author} style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink)' }} />
-                <span style={{ fontSize: 11, color: 'var(--t3)' }}>{c.time}</span>
-                <button onClick={() => { setReplyAt(replyAt === i ? -1 : i); setReplyDraft(''); }} style={{ border: 'none', background: 'transparent', cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 11, color: CMPT, padding: 0 }}>
-                  {replyAt === i ? '취소' : '답글'}
-                </button>
-                {c.author === window.SA.me.name && (
-                  <button onClick={() => delCmt(i)} style={{ border: 'none', background: 'transparent', cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 11, color: '#b23b3b', padding: 0 }}>삭제</button>
-                )}
-                <button onClick={() => voteCmt(i)} title="댓글 추천" style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 4, border: `1px solid ${cmtVoted[i] ? CMPT : 'var(--line2)'}`, background: cmtVoted[i] ? CMPT : '#fff', color: cmtVoted[i] ? '#fff' : 'var(--t3)', borderRadius: 5, padding: '3px 8px', cursor: 'pointer', fontFamily: CMCH, fontSize: 10.5, fontWeight: 700 }}>
-                  ▲ {c.up + (cmtVoted[i] ? 1 : 0)}
-                </button>
-              </div>
-              <div style={{ fontSize: 13, color: '#3a4049', marginTop: 3, lineHeight: 1.55 }}>{c.text}</div>
-              </React.Fragment>
-              )}
-
-              {/* 답글 목록 */}
-              {(c.replies || []).map((rp, j) => (
-                <div key={j} style={{ display: 'flex', gap: 9, marginTop: 13, paddingLeft: 10, borderLeft: `2px solid ${CMPT}33` }}>
-                  <div style={{ width: 28, height: 28, borderRadius: '50%', background: `${CMPT}1c`, color: CMPT, display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 12, flexShrink: 0 }}>{rp.author.slice(0, 1)}</div>
-                  <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 7 }}>
-                      <CmAuthor name={rp.author} style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink)' }} />
-                      <span style={{ fontSize: 11, color: 'var(--t3)' }}>{rp.time}</span>
-                    </div>
-                    <div style={{ fontSize: 13, color: '#3a4049', marginTop: 3, lineHeight: 1.55 }}>{rp.text}</div>
-                  </div>
-                </div>
-              ))}
-
-              {/* 답글 입력 */}
-              {replyAt === i && (
-                <div style={{ display: 'flex', gap: 7, marginTop: 13, paddingLeft: 10, borderLeft: `2px solid ${CMPT}33` }}>
-                  <input autoFocus value={replyDraft} onChange={(e) => setReplyDraft(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') postReply(i); }} placeholder="답글을 남겨보세요"
-                    style={{ flex: 1, minWidth: 0, border: '1px solid var(--line2)', borderRadius: 6, padding: '7px 10px', fontSize: 12.5, fontFamily: "'Pretendard',sans-serif", outline: 'none' }} />
-                  <button onClick={() => postReply(i)} disabled={!replyDraft.trim()} style={{ padding: '0 13px', borderRadius: 6, border: 'none', background: replyDraft.trim() ? CMPT : '#c4c8ce', color: '#fff', fontWeight: 700, fontSize: 11.5, cursor: replyDraft.trim() ? 'pointer' : 'not-allowed', fontFamily: "'Pretendard',sans-serif", flexShrink: 0 }}>등록</button>
-                </div>
-              )}
-            </div>
-          </div>
-        ))}
-        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
-          <input value={draft} onChange={(e) => setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') post(); }} placeholder="댓글을 남겨보세요"
-            style={{ flex: 1, minWidth: 0, border: '1px solid var(--line2)', borderRadius: 6, padding: '10px 12px', fontSize: 13, fontFamily: "'Pretendard',sans-serif", outline: 'none' }} />
-          <button onClick={post} disabled={!draft.trim()} style={{ padding: '0 18px', borderRadius: 6, border: 'none', background: draft.trim() ? CMPT : '#c4c8ce', color: '#fff', fontWeight: 700, fontSize: 13, cursor: draft.trim() ? 'pointer' : 'not-allowed', fontFamily: "'Pretendard',sans-serif", flexShrink: 0 }}>등록</button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── 글쓰기 화면 (일반 / 파티 모집) ──
-function CmWrite({ initialBoard, onCancel, onSubmit }) {
-  const [board, setBoard] = React.useState(initialBoard && initialBoard !== '전체' ? initialBoard : '자유');
-  const [title, setTitle] = React.useState('');
-  const [body, setBody] = React.useState('');
-  const [hasImage, setHasImage] = React.useState(false);
-  const fileRef = React.useRef(null);
-  // 파티 모집 전용
-  const [ptype, setPtype] = React.useState(CM_PARTY_TYPES[0]);
-  const [voice, setVoice] = React.useState(true);
-
-  const isParty = board === '파티 모집';
-  const valid = title.trim() && body.trim();
-  const label = { fontSize: 12, fontWeight: 700, color: 'var(--t2)', marginBottom: 7 };
-  const chip = (on) => ({ padding: '6px 12px', borderRadius: 5, border: `1px solid ${on ? 'var(--ink)' : 'var(--line2)'}`, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12, background: on ? 'var(--ink)' : '#fff', color: on ? '#fff' : 'var(--t2)' });
-  const inputBase = { width: '100%', border: '1px solid var(--line2)', borderRadius: 7, padding: '10px 12px', fontSize: 13.5, fontFamily: "'Pretendard',sans-serif", color: 'var(--ink)', outline: 'none', boxSizing: 'border-box' };
-
-  const submit = () => {
-    if (!valid) return;
-    onSubmit({
-      board, title: title.trim(),
-      author: window.SA.me.name, time: '방금 전', hoursAgo: 0,
-      views: 1, cmt: 0, up: 0, hot: false, hasImage,
-      body: body.trim(),
-      party: isParty ? { ptype, voice } : null,
-    });
-  };
-
-  return (
-    <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 8, overflow: 'hidden' }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '13px 16px', borderBottom: '1px solid var(--line)' }}>
-        <span style={{ fontSize: 15.5, fontWeight: 800, color: 'var(--ink)' }}>글쓰기</span>
-        <button onClick={onCancel} style={{ border: '1px solid var(--line2)', background: '#fff', borderRadius: 6, padding: '6px 12px', cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12, color: 'var(--t2)' }}>목록</button>
-      </div>
-
-      <div style={{ padding: '18px 18px 20px' }}>
-        {/* 게시판 */}
-        <div style={{ marginBottom: 16 }}>
-          <div style={label}>게시판</div>
-          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
-            {CM_BOARDS.map((b) => {
-              const on = board === b;
-              return <button key={b} onClick={() => setBoard(b)} style={{ padding: '7px 14px', borderRadius: 20, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12.5, border: `1px solid ${on ? CMPT : 'var(--line2)'}`, background: on ? CMPT : '#fff', color: on ? '#fff' : 'var(--t2)' }}>{b}</button>;
-            })}
-          </div>
-        </div>
-
-        {/* 제목 */}
-        <div style={{ marginBottom: 16 }}>
-          <div style={label}>제목</div>
-          <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder={isParty ? '예: 저녁 9시 파티 랭크전 같이 하실 분' : '제목을 입력하세요'} style={inputBase} />
-        </div>
-
-        {/* 모집 유형 */}
-        {isParty && (
-          <div style={{ marginBottom: 16 }}>
-            <div style={label}>모집 유형</div>
-            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
-              {CM_PARTY_TYPES.map((t) => (
-                <button key={t} onClick={() => setPtype(t)} style={chip(ptype === t)}>{t}</button>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* 참여 조건 */}
-        {isParty && (
-          <div style={{ marginBottom: 16 }}>
-            <div style={label}>참여 조건</div>
-            <button onClick={() => setVoice((v) => !v)} style={chip(voice)}>보이스 채팅 필수</button>
-          </div>
-        )}
-
-        {/* 내용 */}
-        <div style={{ marginBottom: 14 }}>
-          <div style={label}>내용</div>
-          <textarea value={body} onChange={(e) => setBody(e.target.value)} rows={10} placeholder={isParty ? '활동 시간대, 분위기, 디스코드/오픈카톡 연락 방법 등을 적어주세요.' : '내용을 입력하세요.'} style={{ ...inputBase, resize: 'vertical', lineHeight: 1.7 }} />
-        </div>
-
-        {/* 사진 첨부 */}
-        <input ref={fileRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={(e) => { if (e.target.files && e.target.files.length) setHasImage(true); e.target.value = ''; }} />
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
-          <button onClick={() => fileRef.current && fileRef.current.click()} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 13px', borderRadius: 7, cursor: 'pointer', background: '#fff', border: '1px dashed var(--line2)', color: 'var(--t2)', fontWeight: 700, fontSize: 12, fontFamily: "'Pretendard',sans-serif" }}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="M21 15l-5-5L5 21" /></svg>
-            사진 첨부
-          </button>
-          {hasImage && (
-            <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--t2)', fontWeight: 600 }}>
-              사진 1장 첨부됨
-              <button onClick={() => setHasImage(false)} style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--t3)', fontSize: 14, padding: 0 }}>×</button>
-            </span>
-          )}
-        </div>
-
-        {/* 버튼 */}
-        <div style={{ display: 'flex', gap: 10, borderTop: '1px solid var(--line)', paddingTop: 16 }}>
-          <button onClick={onCancel} style={{ flex: 1, padding: '12px 0', borderRadius: 7, border: '1px solid var(--line2)', background: '#fff', color: '#3a4049', fontWeight: 700, fontSize: 14, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif" }}>취소</button>
-          <button onClick={submit} disabled={!valid} style={{ flex: 2, padding: '12px 0', borderRadius: 7, border: 'none', background: valid ? CMPT : '#c4c8ce', color: '#fff', fontWeight: 700, fontSize: 14, cursor: valid ? 'pointer' : 'not-allowed', fontFamily: "'Pretendard',sans-serif" }}>등록하기</button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── 커뮤니티 화면 ──
-function CommunityScreen({ onClose, onLogin, onClan, onCommunity }) {
-  const [per, setPer] = React.useState(15);
-  const [board, setBoard] = React.useState('전체');
-  const [ptypeF, setPtypeF] = React.useState('전체');
-  const [voiceF, setVoiceF] = React.useState('전체');
-  const [q, setQ] = React.useState('');
-  const [qScope, setQScope] = React.useState('제목');
-  const [page, setPage] = React.useState(1);
-  const [view, setView] = React.useState(null);
-  const [writing, setWriting] = React.useState(false);
-  const [extra, setExtra] = React.useState([]); // 새로 쓴 글
-
-  const allPosts = [...extra, ...CM_POSTS];
-  let list = board === '전체' ? allPosts : allPosts.filter((p) => p.board === board);
-  if (board === '파티 모집') {
-    if (ptypeF !== '전체') list = list.filter((p) => p.party && p.party.ptype === ptypeF);
-    if (voiceF !== '전체') list = list.filter((p) => p.party && (voiceF === '필수' ? p.party.voice : !p.party.voice));
-  }
-  if (q.trim()) {
-    const k = q.trim();
-    list = list.filter((p) =>
-      qScope === '제목' ? p.title.includes(k)
-      : qScope === '작성자' ? p.author.includes(k)
-      : (CM_BODIES[p.board] || '').includes(k)
-    );
-  }
-  const totalPages = Math.max(1, Math.ceil(list.length / per));
-  const cur = Math.min(page, totalPages);
-  const rows = list.slice((cur - 1) * per, cur * per);
-  const goPage = (n) => setPage(Math.max(1, Math.min(totalPages, n)));
-
-  const hot = [...CM_POSTS].sort((a, b) => b.views - a.views).slice(0, 5);
-  const best = [...CM_POSTS].sort((a, b) => b.up - a.up).slice(0, 5);
-
-  return (
-    <div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'var(--bg2)', display: 'flex', flexDirection: 'column', animation: 'sgFade .22s ease' }}>
-      <window.Nav active="커뮤니티" onLogin={onLogin} onClan={onClan} />
-      <div style={{ flex: 1, overflowY: 'auto' }}>
-        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '24px 28px 46px' }}>
-          {/* 타이틀 + 검색 */}
-          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16, flexWrap: 'wrap' }}>
-            <div>
-              <div style={{ fontFamily: CMCH, fontSize: 10.5, fontWeight: 700, letterSpacing: '2.2px', color: 'var(--t3)' }}>COMMUNITY</div>
-              <h1 style={{ margin: '3px 0 0', fontSize: 24, fontWeight: 800, color: 'var(--ink)', letterSpacing: '-.4px' }}>커뮤니티</h1>
-            </div>
-            <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
-              <select value={qScope} onChange={(e) => { setQScope(e.target.value); setPage(1); }} style={{ fontFamily: "'Pretendard',sans-serif", fontSize: 12.5, fontWeight: 700, color: 'var(--ink)', border: '1px solid var(--line2)', borderRadius: 7, padding: '9px 10px', background: '#fff', cursor: 'pointer' }}>
-                {['제목', '작성자', '내용'].map((s) => <option key={s} value={s}>{s}</option>)}
-              </select>
-              <div style={{ position: 'relative', width: 250 }}>
-                <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', display: 'flex' }}><Icon name="search" size={15} stroke="var(--t3)" /></span>
-                <input value={q} onChange={(e) => { setQ(e.target.value); setPage(1); }} placeholder={`${qScope} 검색`}
-                  style={{ width: '100%', height: 38, paddingLeft: 36, paddingRight: 12, borderRadius: 7, border: '1px solid var(--line2)', background: '#fff', fontSize: 13, outline: 'none', fontFamily: "'Pretendard',sans-serif", color: 'var(--ink)', boxSizing: 'border-box' }} />
-              </div>
-            </div>
-            <button onClick={() => { setWriting(true); setView(null); }} style={{ padding: '10px 18px', borderRadius: 7, border: 'none', background: CMPT, color: '#fff', fontWeight: 700, fontSize: 13, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif" }}>글쓰기</button>
-          </div>
-
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 18, alignItems: 'start' }}>
-            {/* 본문: 글쓰기 / 상세 / 게시판 */}
-            {writing ? (
-              <CmWrite initialBoard={board} onCancel={() => setWriting(false)} onSubmit={(p) => {
-                const np = { ...p, id: 100000 + extra.length };
-                setExtra([np, ...extra]);
-                setWriting(false);
-                setBoard(p.board);
-                setPage(1);
-                setView(np);
-              }} />
-            ) : view ? <CmPostDetail p={view} onBack={() => setView(null)} /> : (
-            <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 8, overflow: 'hidden' }}>
-              {/* 게시판 탭 */}
-              <div style={{ display: 'flex', gap: 6, padding: '12px 14px', borderBottom: '1px solid var(--line)', overflowX: 'auto', whiteSpace: 'nowrap' }}>
-                {['전체', ...CM_BOARDS].map((b) => {
-                  const on = board === b;
-                  return (
-                    <button key={b} onClick={() => { setBoard(b); setPage(1); if (b !== '파티 모집') { setPtypeF('전체'); setVoiceF('전체'); } }} style={{ flexShrink: 0, padding: '6px 14px', borderRadius: 20, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12.5,
-                      border: `1px solid ${on ? CMPT : 'var(--line2)'}`, background: on ? CMPT : '#fff', color: on ? '#fff' : 'var(--t2)' }}>{b}</button>
-                  );
-                })}
-                <span style={{ marginLeft: 'auto', alignSelf: 'center', fontSize: 11.5, color: 'var(--t3)', fontWeight: 600, flexShrink: 0 }}>{list.length}개 글</span>
-                <select value={per} onChange={(e) => { setPer(Number(e.target.value)); setPage(1); }} style={{ alignSelf: 'center', flexShrink: 0, fontFamily: "'Pretendard',sans-serif", fontSize: 11.5, fontWeight: 700, color: 'var(--ink)', border: '1px solid var(--line2)', borderRadius: 5, padding: '5px 7px', background: '#fff', cursor: 'pointer' }}>
-                  {[15, 30, 50].map((n) => <option key={n} value={n}>{n}개씩</option>)}
-                </select>
-              </div>
-
-              {/* 파티 모집 조건 필터 */}
-              {board === '파티 모집' && (
-                <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', borderBottom: '1px solid var(--line)', background: '#fafbfc', flexWrap: 'wrap' }}>
-                  <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--t3)', flexShrink: 0 }}>모집 유형</span>
-                  <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
-                    {['전체', ...CM_PARTY_TYPES].map((t) => {
-                      const on = ptypeF === t;
-                      return <button key={t} onClick={() => { setPtypeF(t); setPage(1); }} style={{ padding: '5px 11px', borderRadius: 20, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 11.5, border: `1px solid ${on ? CMPT : 'var(--line2)'}`, background: on ? CMPT : '#fff', color: on ? '#fff' : 'var(--t2)' }}>{t}</button>;
-                    })}
-                  </div>
-                  <span style={{ width: 1, height: 16, background: 'var(--line2)', flexShrink: 0 }} />
-                  <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--t3)', flexShrink: 0 }}>보이스</span>
-                  <div style={{ display: 'flex', gap: 5 }}>
-                    {['전체', '필수', '자율'].map((t) => {
-                      const on = voiceF === t;
-                      return <button key={t} onClick={() => { setVoiceF(t); setPage(1); }} style={{ padding: '5px 11px', borderRadius: 20, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 11.5, border: `1px solid ${on ? CMPT : 'var(--line2)'}`, background: on ? CMPT : '#fff', color: on ? '#fff' : 'var(--t2)' }}>{t}</button>;
-                    })}
-                  </div>
-                  {(ptypeF !== '전체' || voiceF !== '전체') && (
-                    <button onClick={() => { setPtypeF('전체'); setVoiceF('전체'); setPage(1); }} style={{ marginLeft: 'auto', border: 'none', background: 'transparent', color: 'var(--t2)', fontWeight: 700, fontSize: 11.5, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", textDecoration: 'underline', flexShrink: 0 }}>초기화</button>
-                  )}
-                </div>
-              )}
-
-              {CM_NOTICES.map((n, i) => (
-                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 14px', background: '#f4f6f3', borderBottom: '1px solid #e6e9e4', cursor: 'pointer' }}>
-                  <span style={{ flexShrink: 0, fontSize: 10.5, fontWeight: 800, padding: '1px 7px', borderRadius: 4, background: CMPT, color: '#fff', minWidth: 44, textAlign: 'center', boxSizing: 'border-box' }}>공지</span>
-                  <span style={{ flex: 1, minWidth: 0, fontSize: 13.5, color: 'var(--ink)', fontWeight: 700, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{n.title}</span>
-                  <span style={{ flexShrink: 0, fontSize: 11.5, color: 'var(--t3)', fontWeight: 600 }}>{n.time}</span>
-                </div>
-              ))}
-
-              {/* 목록 */}
-              {rows.map((p, i) => <CmRow key={p.id} p={p} zebra={i % 2 === 1} onOpen={setView} />)}
-              {rows.length === 0 && (
-                <div style={{ padding: '36px 0', textAlign: 'center', fontSize: 13, color: 'var(--t3)' }}>검색 결과가 없어요.</div>
-              )}
-
-              {/* 페이지네이션 */}
-              {totalPages > 1 && (
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '14px 0' }}>
-                  <button onClick={() => goPage(cur - 1)} disabled={cur === 1} style={{ width: 30, height: 30, borderRadius: 6, border: '1px solid var(--line2)', background: '#fff', cursor: cur === 1 ? 'default' : 'pointer', opacity: cur === 1 ? .4 : 1, display: 'grid', placeItems: 'center' }}>
-                    <Icon name="chevL" size={14} stroke="var(--t2)" />
-                  </button>
-                  {Array.from({ length: totalPages }, (_, i) => i + 1).map((n) => (
-                    <button key={n} onClick={() => goPage(n)} style={{ minWidth: 30, height: 30, padding: '0 6px', borderRadius: 6, cursor: 'pointer', fontFamily: CMCH, fontWeight: 700, fontSize: 12.5,
-                      border: n === cur ? 'none' : '1px solid var(--line2)', background: n === cur ? CMPT : '#fff', color: n === cur ? '#fff' : 'var(--t2)' }}>{n}</button>
-                  ))}
-                  <button onClick={() => goPage(cur + 1)} disabled={cur === totalPages} style={{ width: 30, height: 30, borderRadius: 6, border: '1px solid var(--line2)', background: '#fff', cursor: cur === totalPages ? 'default' : 'pointer', opacity: cur === totalPages ? .4 : 1, display: 'grid', placeItems: 'center' }}>
-                    <Icon name="chevR" size={14} stroke="var(--t2)" />
-                  </button>
-                </div>
-              )}
-            </div>
-            )}
-
-            {/* 사이드 */}
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
-              <CmSidePanel title="인기글" en="HOT" posts={hot} valueOf={(p) => `조회 ${window.SA.fmt(p.views)}`} onOpen={setView} />
-              <CmSidePanel title="주간 베스트" en="WEEKLY BEST" posts={best} valueOf={(p) => `추천 ${p.up}`} onOpen={setView} />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-Object.assign(window, { CommunityScreen });
diff --git a/surinz-source/sa-data.jsx b/surinz-source/sa-data.jsx
deleted file mode 100644
index cd67034..0000000
--- a/surinz-source/sa-data.jsx
+++ /dev/null
@@ -1,490 +0,0 @@
-/* eslint-disable */
-// ─────────────────────────────────────────────────────────────
-// searchgg · 서든어택 전적검색 — 더미 데이터 (서든어택 세계관 기반)
-// 군대 계급, 폭파미션/생존전/클랜전, 한국식 FPS 닉/맵
-// window.SA 로 노출
-// ─────────────────────────────────────────────────────────────
-
-// 군대 계급(랭크) 사다리 — 서든어택 특유의 '계급' 시스템
-const RANKS = {
-  이병:   { name: '이병',  group: '사병',   tier: 1,  color: '#737d8a', pips: 1, shape: 'bar' },
-  일병:   { name: '일병',  group: '사병',   tier: 2,  color: '#6b7682', pips: 2, shape: 'bar' },
-  상병:   { name: '상병',  group: '사병',   tier: 3,  color: '#5e6975', pips: 3, shape: 'bar' },
-  병장:   { name: '병장',  group: '사병',   tier: 4,  color: '#525c68', pips: 4, shape: 'bar' },
-  하사:   { name: '하사',  group: '부사관', tier: 5,  color: '#b3712b', pips: 1, shape: 'chev' },
-  중사:   { name: '중사',  group: '부사관', tier: 6,  color: '#ac6c28', pips: 2, shape: 'chev' },
-  상사:   { name: '상사',  group: '부사관', tier: 7,  color: '#a56625', pips: 3, shape: 'chev' },
-  원사:   { name: '원사',  group: '부사관', tier: 8,  color: '#9e6022', pips: 4, shape: 'chev' },
-  준위:   { name: '준위',  group: '준사관', tier: 9,  color: '#566f8e', pips: 1, shape: 'dia' },
-  소위:   { name: '소위',  group: '위관',   tier: 10, color: '#4f6b8a', pips: 1, shape: 'dia' },
-  중위:   { name: '중위',  group: '위관',   tier: 11, color: '#486485', pips: 2, shape: 'dia' },
-  대위:   { name: '대위',  group: '위관',   tier: 12, color: '#415d7e', pips: 3, shape: 'dia' },
-  소령:   { name: '소령',  group: '영관',   tier: 13, color: '#c0901a', pips: 1, shape: 'flower' },
-  중령:   { name: '중령',  group: '영관',   tier: 14, color: '#b78812', pips: 2, shape: 'flower' },
-  대령:   { name: '대령',  group: '영관',   tier: 15, color: '#ad800c', pips: 3, shape: 'flower' },
-  준장:   { name: '준장',  group: '장성',   tier: 16, color: '#9c7b1e', pips: 1, shape: 'star' },
-  소장:   { name: '소장',  group: '장성',   tier: 17, color: '#937319', pips: 2, shape: 'star' },
-  중장:   { name: '중장',  group: '장성',   tier: 18, color: '#8a6c16', pips: 3, shape: 'star' },
-  대장:   { name: '대장',  group: '장성',   tier: 19, color: '#7d6111', pips: 4, shape: 'star' },
-};
-
-const MAPS = ['제3보급창고', '웨어하우스', '데드폴', '웨스트게이트', '가스폭발', '6th 어벤터', '컨테이너시티', '욕망의 항구', '라스트포트', '폐건물', '지하철', '눈보라 기지', '국경지대', '폐쇄병동', '사막의 폭풍', '시가지', '비밀연구소', '공장지대', '항구창고', '폭우의 거리'];
-function r(n) { return Math.floor(Math.random() * n); }
-function pick(a) { return a[r(a.length)]; }
-function pad(n) { return n < 10 ? '0' + n : '' + n; }
-
-// 닉네임 풀 (매치 팀 로스터용)
-const NICK_POOL = ['독수리오형제', '한밤의저격수', '돌격대장', '연사의신', '헤드샷마스터', '클러치킹', '무한리필', 'рато', '광속에임', '벽뚫는소리', '근접의달인', '플래시뱅', '노스코프', '스팀팩', '리코일제로', '원피스원킬', '소음기장착', '전장의지배자', '마지막총알', '검은표범', '강철멘탈', '불꽃튀는키보드', '야시경', '폭파전문가', '리스폰지옥', '엄폐엄폐', '각잡고대기', '스나는예술', '돌진또돌진', '침착한손'];
-
-// 매치 팀 로스터 생성기
-function genRoster(meName, mePos, ownerStats, ownerRank) {
-  const used = new Set([meName]);
-  const mk = (isOwner) => {
-    let name;
-    if (isOwner) name = meName;
-    else { do { name = pick(NICK_POOL); } while (used.has(name)); used.add(name); }
-    const k = isOwner ? ownerStats.k : 4 + r(26);
-    const d = isOwner ? ownerStats.d : 5 + r(17);
-    const a = isOwner ? ownerStats.a : 2 + r(12);
-    const rank = isOwner && ownerRank ? ownerRank : pick(RANK_LIST);
-    return { name, isOwner, rank, k, d, a, hs: 14 + r(48), dmg: 1800 + r(5200) };
-  };
-  const blue = [], red = [];
-  for (let i = 0; i < 5; i++) blue.push(mk(mePos === 'blue' && i === 0));
-  for (let i = 0; i < 5; i++) red.push(mk(mePos === 'red' && i === 0));
-  const sortFn = (a, b) => b.k - a.k;
-  return { blue: blue.sort(sortFn), red: red.sort(sortFn) };
-}
-
-// 최근 매치 생성기
-function genMatches(count, base, ownerName, ownerRank) {
-  const out = [];
-  const meName = ownerName || '나';
-  for (let i = 0; i < count; i++) {
-    const mode = pick(['클랜전', '솔로 랭크전', '파티 랭크전', '클랜 랭크전', '토너먼트']);
-    const win = Math.random() < (base ? base.wr / 100 : 0.55);
-    const k = 8 + r(28);
-    const d = 6 + r(18);
-    const a = 3 + r(12);
-    const hours = i === 0 ? 0 : Math.floor(Math.random() * (i * 5) + i);
-    const winSide = pick(['blue', 'red']);
-    const mePos = win ? winSide : (winSide === 'blue' ? 'red' : 'blue');
-    out.push({
-      mode,
-      map: pick(MAPS),
-      win, k, d, a,
-      teams: genRoster(meName, mePos, { k, d, a }, ownerRank),
-      mePos, winSide,
-      ago: hours === 0 ? '방금 전' : hours < 24 ? `${hours}시간 전` : `${Math.floor(hours / 24)}일 전`,
-    });
-  }
-  return out;
-}
-
-// ── 프로필 확장 전적 생성기 ──
-const TIERS_DESC = ['하이랭커', '랭커', '챌린저', '그랜드마스터', '마스터', '골드', '실버', '브론즈'];
-const CLAN_POOL = [['서울제일', 'SEL'], ['불곰부대', 'BEAR'], ['야간전투', 'NGT'], ['한강수비대', 'HAN'], ['벚꽃클랜', 'SAK'], ['강철군화', 'STL'], ['백호부대', 'WHT']];
-const RANK_LIST = Object.values(RANKS).sort((a, b) => a.tier - b.tier);
-function clamp(lo, hi, v) { return Math.max(lo, Math.min(hi, Math.round(v))); }
-function rankStep(rank, d) { const t = Math.max(1, Math.min(RANK_LIST.length, rank.tier + d)); return RANK_LIST.find((x) => x.tier === t) || rank; }
-function tierByWr(wr, idx) { const i = Math.max(0, Math.min(7, Math.floor((78 - wr) / 4) + idx)); return TIERS_DESC[i]; }
-function recBase(wrIn) {
-  const wr = clamp(38, 80, wrIn);
-  const mt = 60 + r(260);
-  const w = Math.round(mt * wr / 100);
-  return { matches: mt, w, l: mt - w, wr, kd: clamp(48, 80, wr + r(10) - 4), hs: 24 + r(34) };
-}
-function genClanPeriods(isCurrent) {
-  const n = 1 + r(2); // 1~3회 가입
-  const periods = [];
-  let year = 2023 + r(2);
-  let mon = 1 + r(11);
-  for (let i = 0; i < n; i++) {
-    const dur = 2 + r(11);
-    const from = `${year}.${pad(mon)}`;
-    let em = mon + dur, ey = year + Math.floor((em - 1) / 12); em = ((em - 1) % 12) + 1;
-    const last = i === n - 1;
-    periods.push({ from, to: (last && isCurrent) ? '활동 중' : `${ey}.${pad(em)}`, months: dur });
-    year = ey; mon = em + 1 + r(6); if (mon > 12) { year += 1; mon -= 12; }
-  }
-  return periods;
-}
-function genClanRecords(o) {
-  const out = []; const seen = new Set();
-  if (o.clan) { out.push({ clan: o.clan, tag: o.clanTag, ...recBase(o.wr), periods: genClanPeriods(true) }); seen.add(o.clan); }
-  const pool = CLAN_POOL.filter((c) => !seen.has(c[0]));
-  const n = 2 + r(3);
-  for (let i = 0; i < n && i < pool.length; i++) out.push({ clan: pool[i][0], tag: pool[i][1], ...recBase(o.wr - 3 - r(8)), periods: genClanPeriods(false) });
-  return out;
-}
-function rankedRec(wrIn, tier) {
-  const apex = tier === '하이랭커';
-  return { tier, div: apex ? null : (1 + r(4)), points: apex ? (2200 + r(2600)) : (300 + r(1600)), ...recBase(wrIn) };
-}
-function genRankedSeasons(o) {
-  const seasons = ['2026 시즌2', '2026 시즌1', '2025 시즌4', '2025 시즌3', '2025 시즌2', '2025 시즌1'];
-  return seasons.map((s, idx) => ({
-    season: s,
-    solo: rankedRec(o.wr - idx * 2, tierByWr(o.wr, idx)),
-    party: rankedRec(o.wr - 3 - idx * 2, tierByWr(o.wr - 2, idx)),
-  }));
-}
-function genMapRecords(o) {
-  return MAPS.map((name) => ({ name, ...recBase(o.wr + r(10) - 5) })).sort((a, b) => b.matches - a.matches);
-}
-function genModeRecords(o) {
-  return [
-    { name: '솔로 랭크전', ...recBase(o.wr) },
-    { name: '파티 랭크전', ...recBase(o.wr - 3) },
-    { name: '클랜전', ...recBase(o.wr - 1) },
-    { name: '일반전', ...recBase(o.wr - 2 + r(6)) },
-  ];
-}
-
-function genTrend(o) {
-  const baseWr = clamp(38, 80, o.wr);
-  const baseKd = Math.round((o.kda / (o.kda + 1)) * 100);
-  const series = (n, labeler, vol) => {
-    const out = [];
-    let wr = baseWr - 4 + r(8), kd = baseKd - 4 + r(8);
-    for (let i = n - 1; i >= 0; i--) {
-      wr = clamp(30, 88, wr + (r(2 * vol + 1) - vol));
-      kd = clamp(30, 85, kd + (r(2 * vol + 1) - vol));
-      out.push({ label: labeler(i), wr, kd, games: 6 + r(22) });
-    }
-    return out;
-  };
-  return {
-    daily: series(14, (i) => `${i === 0 ? '오늘' : i + '일 전'}`, 5),
-    weekly: series(10, (i) => `${i === 0 ? '이번주' : i + '주 전'}`, 4),
-  };
-}
-
-function mkPlayer(o) {
-  const rank = RANKS[o.rank];
-  const games = o.games || (3000 + r(9000));
-  const wins = Math.round(games * (o.wr / 100));
-  const m = genMatches(14, { wr: o.wr }, o.name, rank);
-  const rifle = 50 + r(22);
-  const sniper = Math.round((100 - rifle) * (0.45 + Math.random() * 0.35));
-  const special = Math.max(0, 100 - rifle - sniper);
-  return {
-    id: o.name,
-    name: o.name,
-    rank,
-    level: o.level || (40 + r(160)),
-    clan: o.clan || null,
-    clanTag: o.clanTag || null,
-    wr: o.wr,
-    kda: o.kda,
-    hs: o.hs,            // 헤드샷 %
-    rifle, sniper, special,                                  // 무기 분류별 킬 비중 %
-    rankNoTotal: Math.max(1, Math.round((4.3 - o.kda) * 4200) + r(600)),       // 통합 랭킹(위)
-    rankNoSeason: Math.max(1, Math.round((4.3 - o.kda) * 4200 * (0.7 + Math.random() * 0.8)) + r(500)), // 시즌 랭킹(위)
-    manner: 80 + r(18),                                      // 매너 점수
-    connRate: 52 + r(46),                                    // 접속률 %
-    rankTotal: rank,                                         // 통합 계급(피크)
-    rankSeason: rankStep(rank, -1),                          // 이번 시즌 계급
-    clanRecords: genClanRecords(o),                          // 소속 클랜별 클랜전 전적
-    rankedSeasons: genRankedSeasons(o),                      // 시즌별 랭크전(솔로/파티)
-    mapRecords: genMapRecords(o),                            // 맵별 전적
-    modeRecords: genModeRecords(o),                          // 모드별 전적
-    games,
-    wins,
-    losses: games - wins,
-    matches: m,
-    together: (() => { const g = 12 + r(180); const w = Math.round(g * (o.wr / 100)); return { games: g, w, l: g - w }; })(),
-    trend: genTrend(o),
-    color: rank.color,
-  };
-}
-
-// ── 로그인 유저(나) ──
-const me = mkPlayer({
-  name: '헤드샷장인', rank: '소령', level: 187, wr: 61, kda: 2.14, hs: 47,
-  clan: '불곰부대', clanTag: 'BEAR', games: 8420,
-});
-
-// ── 솔로랭크 TOP ──
-const soloRanking = [
-  mkPlayer({ name: 'GLOCK_여신', rank: '대장', level: 240, wr: 73, kda: 3.42, hs: 58, clan: '서울제일', clanTag: 'SEL', games: 14200, badge: '챔피언' }),
-  mkPlayer({ name: '서든황제김씨', rank: '중장', level: 233, wr: 70, kda: 3.08, hs: 54, clan: '불곰부대', clanTag: 'BEAR', games: 13100 }),
-  mkPlayer({ name: '컨테이너지박령', rank: '소장', level: 221, wr: 68, kda: 2.91, hs: 61, clan: '야간전투', clanTag: 'NGT', games: 11890 }),
-  mkPlayer({ name: '원킬원샷', rank: '준장', level: 215, wr: 66, kda: 2.77, hs: 63, clan: null, games: 10400 }),
-  mkPlayer({ name: '데드폴터줏대', rank: '대령', level: 208, wr: 64, kda: 2.55, hs: 49, clan: '한강수비대', clanTag: 'HAN', games: 9870 }),
-  mkPlayer({ name: '도라에몽핵아님', rank: '중령', level: 199, wr: 63, kda: 2.48, hs: 52, clan: null, games: 9210 }),
-  mkPlayer({ name: '오로라공주', rank: '소령', level: 191, wr: 62, kda: 2.31, hs: 45, clan: '벚꽃클랜', clanTag: 'SAK', games: 8650 }),
-  mkPlayer({ name: '연막탄장인', rank: '대위', level: 178, wr: 60, kda: 2.22, hs: 41, clan: null, games: 7980 }),
-];
-
-// ── 생존전 랭킹 ──
-const survRanking = [
-  mkPlayer({ name: '최후의1인', rank: '대장', level: 238, wr: 41, kda: 4.10, hs: 50, clan: '서울제일', clanTag: 'SEL', games: 6200, badge: '생존왕' }),
-  mkPlayer({ name: '자기장보다빠름', rank: '중장', level: 226, wr: 38, kda: 3.71, hs: 47, clan: null, games: 5840 }),
-  mkPlayer({ name: '낙하산명사수', rank: '소장', level: 219, wr: 36, kda: 3.40, hs: 44, clan: '야간전투', clanTag: 'NGT', games: 5510 }),
-  mkPlayer({ name: '엄폐의달인', rank: '준장', level: 210, wr: 34, kda: 3.12, hs: 39, clan: null, games: 5120 }),
-  mkPlayer({ name: '캠핑은매너', rank: '대령', level: 203, wr: 32, kda: 2.95, hs: 42, clan: '한강수비대', clanTag: 'HAN', games: 4790 }),
-  mkPlayer({ name: '막판뒤집기', rank: '중령', level: 196, wr: 31, kda: 2.80, hs: 38, clan: null, games: 4510 }),
-  mkPlayer({ name: '보급상자요정', rank: '소령', level: 188, wr: 30, kda: 2.66, hs: 36, clan: '벚꽃클랜', clanTag: 'SAK', games: 4230 }),
-  mkPlayer({ name: '치킨한마리', rank: '대위', level: 175, wr: 29, kda: 2.51, hs: 35, clan: null, games: 3980 }),
-];
-
-// ── 클랜 랭킹 ──
-// ── 최근 검색한 유저(빠른 재검색) ──
-const recentSearches = ['GLOCK_여신', '서든황제김씨', '원킬원샷', '오로라공주', '최후의1인', '연막탄장인'];
-
-// ── 인기 검색 랭킹(가장 많이 조회된 유저 · 24시간) ──
-const searchTrending = [
-  { name: 'GLOCK_여신',      count: 18420, move: 0 },
-  { name: '최후의1인',       count: 15330, move: 2 },
-  { name: '헤드샷장인',      count: 12870, move: -1 },
-  { name: '서든황제김씨',     count: 11240, move: 'new' },
-  { name: '원킬원샷',        count: 9680,  move: 1 },
-  { name: '오로라공주',      count: 8210,  move: -2 },
-  { name: '컨테이너지박령',   count: 7050,  move: 'new' },
-  { name: '연막탄장인',      count: 6320,  move: 3 },
-];
-
-// ── 즐겨찾기(친구/전우) ──
-const friends = [
-  mkPlayer({ name: '같이가요전우님', rank: '대위', level: 172, wr: 58, kda: 1.98, hs: 38, clan: '불곰부대', clanTag: 'BEAR', online: true }),
-  mkPlayer({ name: '소이탄러버', rank: '중위', level: 154, wr: 55, kda: 1.81, hs: 35, clan: '불곰부대', clanTag: 'BEAR', online: true }),
-  mkPlayer({ name: '야1돌이', rank: '상사', level: 121, wr: 52, kda: 1.62, hs: 33, clan: null, online: false }),
-  mkPlayer({ name: '닷지의신', rank: '소위', level: 138, wr: 54, kda: 1.74, hs: 30, clan: '불곰부대', clanTag: 'BEAR', online: false }),
-];
-
-// ── 실시간 전장 현황(오늘) ──
-const liveStats = {
-  date: '06월 09일',
-  totalMatches: 151873,
-  matchModes: [
-    { name: '클랜전', count: 40713 },
-    { name: '솔로 랭크전', count: 62840 },
-    { name: '파티 랭크전', count: 48320 },
-    { name: '클랜 랭크전', count: 21560 },
-  ],
-  online: 31204,
-  topMap: '제3보급창고',
-  topMode: '폭파미션',
-  newClans: 142,
-  bannedToday: 87,        // 핵/불량 유저 제재
-  prevDelta: +6.2,        // 전일대비 %
-};
-
-// ── 커뮤니티 게시판 ──
-const community = {
-  자유: [
-    { tag: '유머', title: '제3보급창고 A롱 각도 외운 사람만 아는 그것 ㅋㅋㅋ', cmt: 214, hot: true, time: '12분 전' },
-    { tag: '질문', title: '20년차 복귀유저인데 요즘 메타 AK가 국룰인가요?', cmt: 88, hot: true, time: '34분 전' },
-    { tag: '자랑', title: '드디어 소령 달았습니다… 학창시절부터 한 게임 (눈물)', cmt: 156, hot: true, time: '1시간 전' },
-    { tag: '잡담', title: '오늘 생존전 스쿼드 막판 1:4 역전 클립 보고가셈', cmt: 42, hot: false, time: '2시간 전' },
-    { tag: '질문', title: '클랜원 모집 어디서 하는 게 제일 빠른가요?', cmt: 19, hot: false, time: '3시간 전' },
-  ],
-  공략: [
-    { tag: '에임', title: '헤드라인 유지 — 입문자가 3일 만에 헤드샷률 올리는 법', cmt: 327, hot: true, time: '6시간 전' },
-    { tag: '맵', title: '[데드폴] 폭파 공격팀 기본 진입 루트 3가지 총정리', cmt: 198, hot: true, time: '8시간 전' },
-    { tag: '맵', title: '[웨어하우스] 수비팀 크로스 각 잡는 3가지 포지션', cmt: 142, hot: false, time: '1일 전' },
-    { tag: '생존', title: '생존전 솔로 — 자기장 사이클별 동선 가이드', cmt: 89, hot: false, time: '1일 전' },
-    { tag: '클랜', title: '클랜전 입문 — 포지션별 역할과 콜 기본기', cmt: 64, hot: false, time: '2일 전' },
-  ],
-};
-
-// ── SA 소식: 공지사항 / 업데이트 / 이벤트 ──
-const news = {
-  공지사항: [
-    { title: '6/11(목) 정기점검 및 게임 프레임 확장 베타 서버 적용 안내', date: '06.09', pin: true },
-    { title: '확률형 아이템 확률 정보 통합 안내 페이지 오픈 안내', date: '06.05', pin: true },
-    { title: '비매너·불법 프로그램 사용 계정 제재 안내 (6월 1주차)', date: '06.04', pin: false },
-    { title: '서버 안정화 작업에 따른 일부 채널 일시 점검 안내', date: '05.30', pin: false },
-    { title: '닉네임 변경권 사용 정책 일부 개정 안내', date: '05.27', pin: false },
-    { title: '고객지원 운영시간 변경 안내', date: '05.22', pin: false },
-  ],
-  'GM이야기': [
-    { title: '[GM레터] 게임 프레임 확장 베타, 직접 체험해본 후기', date: '06.09', tag: 'GM' },
-    { title: '개발팀이 전하는 2026 시즌2 「페르소나」 기획 비하인드', date: '06.03', tag: 'GM' },
-    { title: '[GM노트] 밸런스 패치는 어떤 기준으로 결정되나요?', date: '05.27', tag: 'GM' },
-    { title: '커뮤니티 의견 반영 현황 — 여러분의 제안이 이렇게 적용됐어요', date: '05.20', tag: 'GM' },
-    { title: '[GM레터] 비매너·핵 근절을 위한 모니터링 강화 이야기', date: '05.13', tag: 'GM' },
-    { title: '신규·복귀 유저를 위한 GM의 온보딩 팁 모음', date: '05.06', tag: 'GM' },
-  ],
-  업데이트: [
-    { title: '2026 시즌2 「페르소나」 — 신규 캐릭터 리나·린 추가', date: '06.04', tag: '신규' },
-    { title: '생존전 로데오 솔로 모드 및 신규 콤보 시스템 적용', date: '05.28', tag: '모드' },
-    { title: '무기 컬렉션 대표 스킨 시스템 개편', date: '05.21', tag: '시스템' },
-    { title: '2026 무기 개편 2차 — SG552·FAMAS 밸런스 조정', date: '05.14', tag: '밸런스' },
-    { title: '정채연 캐릭터 출시 및 전용 모션 추가', date: '05.07', tag: '캐릭터' },
-    { title: '제3보급창고 리마스터 및 충돌 버그 수정', date: '04.30', tag: '맵' },
-  ],
-  이벤트: [
-    { title: 'SUMMER PARTY TIME! PC방 파티 출석 이벤트', date: '06.08', tag: '진행중' },
-    { title: '얼리 썸머 체크인 — 7일 출석 시 무기 스킨 지급', date: '06.05', tag: '진행중' },
-    { title: '2026 챔피언십 시즌2 승부예측 6주차', date: '06.02', tag: '진행중' },
-    { title: '신규·복귀 전우 환영 미션 패키지', date: '05.26', tag: '상시' },
-    { title: '친구 초대하고 캐릭터 뽑기권 받기', date: '05.20', tag: '상시' },
-  ],
-};
-
-// ── 지금 방송 중 LIVE (치지직 / 숲 / 유튜브 연동) ──
-const streamPlatforms = {
-  치지직:  { label: '치지직', en: 'CHZZK',   color: '#00b6a0', tag: 'CHZZK' },
-  숲:      { label: '숲',     en: 'SOOP',    color: '#0064ff', tag: 'SOOP' },
-  유튜브:  { label: '유튜브', en: 'YOUTUBE', color: '#e62117', tag: 'YT' },
-};
-const streams = [
-  { platform: '치지직', streamer: '헤드샷장인',  title: '소령 → 중령 승급전 가즈아 [클랜전 정주행]', viewers: 4210, started: '2시간째' },
-  { platform: '숲',     streamer: 'BJ철벽수비',  title: '생존전 1인 스쿼드 치킨 30판 도전', viewers: 2870, started: '1시간째' },
-  { platform: '유튜브', streamer: '원킬원샷TV',  title: 'AWP 원챔으로 솔로랭크 끝까지 등반', viewers: 1530, started: '3시간째' },
-  { platform: '치지직', streamer: '오로라공주',  title: '시청자 참여 클랜전 · 같이 서든해요', viewers: 980, started: '40분째' },
-  { platform: '숲',     streamer: '연막탄장인',  title: '데드폴 공격팀 진입 루트 풀이 + 랭크', viewers: 760, started: '1시간째' },
-  { platform: '유튜브', streamer: '서든레전드',  title: '랭크전 티어별 동선·포지션 완전 정리', viewers: 540, started: '2시간째' },
-];
-
-// ── 컨텐츠 랭크전 티어 색상표 (브론즈→하이랭커 8단계) ──
-const tiers = [
-  { name: '브론즈',       color: '#a9743b' },
-  { name: '실버',         color: '#94a0aa' },
-  { name: '골드',         color: '#c4960f' },
-  { name: '마스터',       color: '#5b8a72' },
-  { name: '그랜드마스터', color: '#4f6b8a' },
-  { name: '챌린저',       color: '#7a5bb0' },
-  { name: '랭커',         color: '#b25a2b' },
-  { name: '하이랭커',     color: '#b23b3b' },
-];
-
-// ── SA 랭킹 5종 (각 top10) ──
-// 1) 시즌 계급 랭킹 — 이번 시즌 계급 점수
-const seasonClassRanking = [
-  { name: 'GLOCK_여신', score: 41820 },
-  { name: '최후의1인', score: 39650 },
-  { name: '서든황제김씨', score: 37410 },
-  { name: '자기장보다빠름', score: 35880 },
-  { name: '컨테이너지박령', score: 34120 },
-  { name: '낙하산명사수', score: 32540 },
-  { name: '원킬원샷', score: 30980 },
-  { name: '엄폐의달인', score: 29360 },
-  { name: '데드폴터줏대', score: 27910 },
-  { name: '캠핑은매너', score: 26480 },
-];
-// 2) 통합 계급 랭킹 — 역대 누적 계급 점수
-const totalClassRanking = [
-  { name: '서든황제김씨', score: 284900 },
-  { name: 'GLOCK_여신', score: 271350 },
-  { name: '원킬원샷', score: 258740 },
-  { name: '컨테이너지박령', score: 246180 },
-  { name: '데드폴터줏대', score: 233520 },
-  { name: '도라에몽핵아님', score: 221070 },
-  { name: '최후의1인', score: 209640 },
-  { name: '오로라공주', score: 198330 },
-  { name: '연막탄장인', score: 187020 },
-  { name: '헤드샷장인', score: 176510 },
-];
-// 3) 컨텐츠 랭킹 — 솔로/파티 랭크전 (RP순)
-const soloRpRanking = [
-  { name: 'GLOCK_여신', tier: '하이랭커', rp: 4920 },
-  { name: '원킬원샷', tier: '하이랭커', rp: 4710 },
-  { name: '컨테이너지박령', tier: '랭커', rp: 4480 },
-  { name: '서든황제김씨', tier: '랭커', rp: 4350 },
-  { name: '데드폴터줏대', tier: '챌린저', rp: 4120 },
-  { name: '도라에몽핵아님', tier: '챌린저', rp: 3980 },
-  { name: '오로라공주', tier: '그랜드마스터', rp: 3760 },
-  { name: '연막탄장인', tier: '그랜드마스터', rp: 3610 },
-  { name: '헤드샷장인', tier: '마스터', rp: 3420 },
-  { name: '같이가요전우님', tier: '마스터', rp: 3280 },
-];
-const partyRpRanking = [
-  { name: '최후의1인', tier: '하이랭커', rp: 4860 },
-  { name: 'GLOCK_여신', tier: '하이랭커', rp: 4690 },
-  { name: '자기장보다빠름', tier: '랭커', rp: 4420 },
-  { name: '서든황제김씨', tier: '랭커', rp: 4300 },
-  { name: '낙하산명사수', tier: '챌린저', rp: 4080 },
-  { name: '원킬원샷', tier: '챌린저', rp: 3940 },
-  { name: '엄폐의달인', tier: '그랜드마스터', rp: 3720 },
-  { name: '오로라공주', tier: '그랜드마스터', rp: 3580 },
-  { name: '캠핑은매너', tier: '마스터', rp: 3360 },
-  { name: '보급상자요정', tier: '마스터', rp: 3210 },
-];
-// 3-1) 랭크전 클랜 랭킹 — 클랜 랭크전 (RP순)
-const clanRpRanking = [
-  { name: '서울제일', tag: 'SEL', members: 48, rp: 9840 },
-  { name: '불곰부대', tag: 'BEAR', members: 52, rp: 9510 },
-  { name: '야간전투', tag: 'NGT', members: 41, rp: 9180 },
-  { name: '강철군화', tag: 'STL', members: 50, rp: 8870 },
-  { name: '한강수비대', tag: 'HAN', members: 45, rp: 8560 },
-  { name: '한밤의늑대', tag: 'WLF', members: 44, rp: 8240 },
-  { name: '데드샷연합', tag: 'DSU', members: 39, rp: 7930 },
-  { name: '벚꽃클랜', tag: 'SAK', members: 38, rp: 7610 },
-  { name: '폭풍전야', tag: 'STM', members: 42, rp: 7350 },
-  { name: '은하수비대', tag: 'GLX', members: 36, rp: 7080 },
-];
-// 4) 공식 클랜 랭킹 — 운영팀 인증 클랜
-const officialClanRanking = [
-  { name: '서울제일', tag: 'SEL', members: 48, rp: 28940 },
-  { name: '불곰부대', tag: 'BEAR', members: 52, rp: 27110 },
-  { name: '야간전투', tag: 'NGT', members: 41, rp: 25880 },
-  { name: '정예타격대', tag: 'ACE', members: 50, rp: 24990 },
-  { name: '한강수비대', tag: 'HAN', members: 45, rp: 24500 },
-  { name: '백호부대', tag: 'WHT', members: 47, rp: 23770 },
-  { name: '벚꽃클랜', tag: 'SAK', members: 38, rp: 23210 },
-  { name: '강철군화', tag: 'STL', members: 50, rp: 22640 },
-  { name: '흑표클랜', tag: 'BLP', members: 43, rp: 21980 },
-  { name: '새벽기습', tag: 'DWN', members: 39, rp: 21330 },
-];
-// 5) 클랜 랭킹 — 일반 클랜
-const generalClanRanking = [
-  { name: '불곰부대', tag: 'BEAR', members: 52, rp: 26210 },
-  { name: '한밤의늑대', tag: 'WLF', members: 44, rp: 25540 },
-  { name: '서울제일', tag: 'SEL', members: 48, rp: 24880 },
-  { name: '돌격대대', tag: 'CHG', members: 36, rp: 23960 },
-  { name: '야간전투', tag: 'NGT', members: 41, rp: 23310 },
-  { name: '폭풍전선', tag: 'STM', members: 40, rp: 22650 },
-  { name: '벚꽃클랜', tag: 'SAK', members: 38, rp: 21940 },
-  { name: '강철군화', tag: 'STL', members: 50, rp: 21280 },
-  { name: '백전노장', tag: 'VET', members: 33, rp: 20710 },
-  { name: '한강수비대', tag: 'HAN', members: 45, rp: 20150 },
-];
-
-// ── 시즌 현황 (시즌 D-day · 보상 · 시즌 맵) ──
-const season = {
-  name: '2026 시즌2 「페르소나」',
-  period: '05.07 ~ 06.30',
-  dday: 'D-20',
-  progress: 63,
-  reward: '시즌2 한정 칭호 「페르소나」 · 캐릭터 뽑기권 10장',
-  maps5v5: ['제3보급창고', '웨어하우스', '데드폴', '컨테이너시티', '라스트포트'],
-  maps3v3: ['욕망의 항구', '폐건물', '가스폭발', '웨스트게이트'],
-};
-// ── 연승 핫스트릭 (폼 좋은 유저) ──
-const hotStreak = [
-  { name: 'GLOCK_여신', streak: 12 },
-  { name: '원킬원샷', streak: 9 },
-  { name: '컨테이너지박령', streak: 8 },
-  { name: '오로라공주', streak: 7 },
-  { name: '서든황제김씨', streak: 6 },
-  { name: '데드폴터줏대', streak: 6 },
-];
-
-// ── 진행중인 이벤트 배너(피처드) ──
-const events = [
-  { title: '게임 프레임 확장 베타 테스트', sub: '최대 200 FPS 개선 서버를 일주일간 체험', period: '06.04 ~ 06.11', dday: 'D-2', tag: 'GM이야기', kind: 'beta' },
-  { title: 'SUMMER PARTY TIME!', sub: 'PC방 접속하고 파티 보상 받아가세요', period: '06.01 ~ 06.30', dday: 'D-21', tag: 'PC방', kind: 'party' },
-  { title: '시즌2 「페르소나」 승부예측', sub: '6주차 매치 결과 맞히고 포인트 적립', period: '~ 06.15', dday: 'D-6', tag: '리그', kind: 'league' },
-  { title: '얼리 썸머 체크인', sub: '7일 연속 출석 시 한정 무기 스킨 증정', period: '06.05 ~ 06.19', dday: 'D-10', tag: '출석', kind: 'checkin' },
-  { title: '신규·복귀 유저 부스트', sub: '경험치 2배 + 스타터 보급 패키지 지급', period: '06.01 ~ 06.30', dday: 'D-21', tag: '복귀', kind: 'boost' },
-  { title: '주말 클랜전 더블 포인트', sub: '토·일 클랜전 승리 시 클랜 포인트 2배', period: '매주 주말', dday: '상시', tag: '클랜', kind: 'clan' },
-  { title: '핫타임 드롭 이벤트', sub: '매일 20~22시 접속 시 랜덤 보급상자', period: '06.01 ~ 06.30', dday: 'D-21', tag: '핫타임', kind: 'hot' },
-  { title: '명사수 챌린지', sub: '주간 헤드샷 목표 달성하고 보상 획득', period: '06.09 ~ 06.16', dday: 'D-7', tag: '챌린지', kind: 'challenge' },
-];
-
-window.SA = {
-  me, soloRanking, survRanking,
-  recentSearches, friends, liveStats, community, news, events,
-  streams, streamPlatforms, searchTrending, tiers,
-  seasonClassRanking, totalClassRanking, soloRpRanking, partyRpRanking, clanRpRanking,
-  officialClanRanking, generalClanRanking, season, hotStreak,
-  // 즐겨찾기 (페이지네이션 시연용 — 친구 + 랭커 혼합)
-  favorites: [...friends, ...soloRanking, ...survRanking.slice(1, 6)],
-  // 전체 검색 대상 풀
-  allPlayers: [me, ...soloRanking, ...survRanking, ...friends],
-  fmt: (n) => n.toLocaleString('en-US'),
-  kdPct: (kda) => Math.round((kda / (kda + 1)) * 100),
-};
diff --git a/surinz-source/sa-home.jsx b/surinz-source/sa-home.jsx
deleted file mode 100644
index 16b5996..0000000
--- a/surinz-source/sa-home.jsx
+++ /dev/null
@@ -1,691 +0,0 @@
-/* eslint-disable */
-// ─────────────────────────────────────────────────────────────
-// searchgg · 메인 홈 (레트로 구조형 · 올리브 포인트 · 각진 패널 레이아웃)
-// 공지/업데이트/이벤트 전면 · 이벤트 카드 이미지 슬롯
-// window.Home
-// ─────────────────────────────────────────────────────────────
-const { useState: useStateH } = React;
-const PT = '#48515f';        // 올리브/카키 포인트
-const PT_SOFT = 'rgba(72,81,95,.12)';
-const HEAD = '#f1f3f5';      // 패널 헤더바 배경
-const CH = "'Chakra Petch',sans-serif";
-
-const panel = { border: '1px solid var(--line2)', background: '#fff', borderRadius: 5 };
-
-// 패널 (채워진 헤더바 + 보더)
-function Panel({ title, en, right, children, bodyPad = '8px 14px 12px' }) {
-  return (
-    <section style={panel}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 40, padding: '0 12px 0 0', background: HEAD, borderBottom: '1px solid var(--line2)' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
-          <span style={{ width: 4, alignSelf: 'stretch', background: PT, margin: '8px 0', marginRight: 2 }} />
-          <span style={{ fontSize: 14.5, fontWeight: 800, color: 'var(--ink)', letterSpacing: '-.2px' }}>{title}</span>
-          {en && <span style={{ fontFamily: CH, fontSize: 10, fontWeight: 600, color: 'var(--t3)', letterSpacing: '1.2px' }}>{en}</span>}
-        </div>
-        {right}
-      </div>
-      <div style={{ padding: bodyPad }}>{children}</div>
-    </section>
-  );
-}
-
-// 세그먼트 탭 (각진)
-function Seg({ tabs, value, onChange }) {
-  return (
-    <div style={{ display: 'flex', border: '1px solid var(--line2)', borderRadius: 4, overflow: 'hidden', background: '#fff' }}>
-      {tabs.map((t, i) => {
-        const on = value === t;
-        return (
-          <button key={t} onClick={() => onChange(t)} style={{ padding: '5px 11px', border: 'none', borderLeft: i ? '1px solid var(--line2)' : 'none', cursor: 'pointer',
-            fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12, background: on ? PT : '#fff', color: on ? '#fff' : 'var(--t2)' }}>{t}</button>
-        );
-      })}
-    </div>
-  );
-}
-
-// ── 상단 유틸 바 ──
-function TopBar() {
-  return (
-    <div style={{ height: 30, background: '#23262b', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: '0 28px', gap: 0 }}>
-      {['로그인', '회원가입', '쿠폰등록', '고객센터'].map((t, i) => (
-        <React.Fragment key={t}>
-          {i > 0 && <span style={{ width: 1, height: 11, background: 'rgba(255,255,255,.18)', margin: '0 12px' }} />}
-          <a style={{ fontSize: 12, color: 'rgba(255,255,255,.72)', cursor: 'pointer', fontWeight: 500 }}>{t}</a>
-        </React.Fragment>
-      ))}
-    </div>
-  );
-}
-
-// ── 메인 네비(GNB) ──
-function Nav({ onLogin, onClan, onCommunity, active = '홈' }) {
-  const items = ['홈', '전적검색', '커뮤니티', '클랜'];
-  return (
-    <div style={{ background: '#fff', borderBottom: '2px solid #23262b', position: 'sticky', top: 0, zIndex: 30 }}>
-      <div style={{ maxWidth: 1180, margin: '0 auto', height: 60, display: 'flex', alignItems: 'center', padding: '0 28px' }}>
-        <a href="searchgg 메인 홈.html" style={{ textDecoration: 'none', display: 'flex' }}><Logo size={22} /></a>
-        <nav style={{ display: 'flex', marginLeft: 34, height: '100%' }}>
-          {items.map((t) => {
-            const on = t === active;
-            const style = { display: 'flex', alignItems: 'center', padding: '0 18px', height: '100%', fontSize: 15, fontWeight: on ? 800 : 600, textDecoration: 'none',
-              color: on ? PT : '#3a4049', cursor: 'pointer', borderBottom: on ? `3px solid ${PT}` : '3px solid transparent', background: 'transparent', border: 'none', borderBottomWidth: 3, borderBottomStyle: 'solid', borderBottomColor: on ? PT : 'transparent', fontFamily: "'Pretendard',sans-serif" };
-            if (t === '클랜' && onClan) {
-              return <button key={t} onClick={onClan} style={style}>{t}</button>;
-            }
-            if (t === '커뮤니티' && onCommunity) {
-              return <button key={t} onClick={onCommunity} style={style}>{t}</button>;
-            }
-            return (
-              <a key={t} href="searchgg 메인 홈.html" style={style}>{t}</a>
-            );
-          })}
-        </nav>
-        <button onClick={onLogin} style={{ marginLeft: 'auto', border: 'none', background: 'transparent', cursor: 'pointer',
-          color: '#3a4049', fontWeight: 700, fontSize: 14, padding: '6px 4px', fontFamily: "'Pretendard',sans-serif" }}>
-          로그인
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// ── 검색 히어로(구조형 밴드) ──
-function Hero({ onPick }) {
-  const SA = window.SA, me = SA.me;
-  return (
-    <div style={{ background: '#fff', borderBottom: '1px solid var(--line2)' }}>
-      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '34px 28px 30px' }}>
-        <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
-          <div style={{ fontFamily: CH, fontSize: 11, fontWeight: 700, letterSpacing: '3px', color: PT, marginBottom: 10 }}>SUDDEN ATTACK RECORD SEARCH</div>
-          <h1 style={{ margin: '0 0 6px', fontWeight: 800, fontSize: 30, lineHeight: 1.2, letterSpacing: '-1px', color: 'var(--ink)' }}>전적 검색</h1>
-          <div style={{ fontSize: 13.5, color: 'var(--t2)', marginBottom: 18 }}>어서와요, <b style={{ color: PT }}>{me.name}</b> 님</div>
-          <SearchBar big onPick={onPick} />
-          <div style={{ marginTop: 13, display: 'flex', justifyContent: 'center' }}><RecentChips onPick={onPick} /></div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── 섹션 헤더(채워진 바) ──
-function BarHead({ title, en, more }) {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#23262b', color: '#fff', padding: '0 14px', height: 38, borderRadius: '5px 5px 0 0' }}>
-      <div style={{ display: 'flex', alignItems: 'baseline', gap: 9 }}>
-        <span style={{ fontSize: 14.5, fontWeight: 800, letterSpacing: '-.2px' }}>{title}</span>
-        {en && <span style={{ fontFamily: CH, fontSize: 10, fontWeight: 600, color: 'rgba(255,255,255,.5)', letterSpacing: '1.2px' }}>{en}</span>}
-      </div>
-      {more && <a style={{ fontSize: 12, color: 'rgba(255,255,255,.7)', cursor: 'pointer', fontWeight: 600 }}>전체보기 ＋</a>}
-    </div>
-  );
-}
-
-// ── 진행중인 이벤트 (캐러셀) ──
-function EventStrip() {
-  const SA = window.SA;
-  const PER = 4;
-  const pages = Math.ceil(SA.events.length / PER);
-  const [page, setPage] = useStateH(0);
-  const [hover, setHover] = useStateH(false);
-  React.useEffect(() => {
-    if (hover || pages <= 1) return;
-    const t = setInterval(() => setPage((p) => (p + 1) % pages), 5000);
-    return () => clearInterval(t);
-  }, [hover, pages]);
-  const go = (d) => setPage((p) => (p + d + pages) % pages);
-  const arrow = (dir) => (
-    <button onClick={() => go(dir === 'L' ? -1 : 1)} style={{ width: 26, height: 26, borderRadius: 4, border: 'none', background: 'rgba(255,255,255,.14)', color: '#fff', cursor: 'pointer', display: 'grid', placeItems: 'center', fontSize: 13 }}>
-      {dir === 'L' ? '‹' : '›'}
-    </button>
-  );
-  return (
-    <div style={{ border: '1px solid var(--line2)', borderRadius: 5, marginBottom: 18, background: '#fff', overflow: 'hidden' }}
-      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#23262b', color: '#fff', padding: '0 12px 0 14px', height: 38 }}>
-        <div style={{ display: 'flex', alignItems: 'baseline', gap: 9 }}>
-          <span style={{ fontSize: 14.5, fontWeight: 800, letterSpacing: '-.2px' }}>진행중인 이벤트</span>
-          <span style={{ fontFamily: CH, fontSize: 10, fontWeight: 600, color: 'rgba(255,255,255,.5)', letterSpacing: '1.2px' }}>ON-GOING EVENT</span>
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-          <span style={{ fontFamily: CH, fontSize: 11.5, fontWeight: 700, color: 'rgba(255,255,255,.7)' }}>{page + 1} / {pages}</span>
-          {arrow('L')}{arrow('R')}
-        </div>
-      </div>
-      <div style={{ overflow: 'hidden' }}>
-        <div style={{ display: 'flex', width: `${pages * 100}%`, transform: `translateX(-${page * (100 / pages)}%)`, transition: 'transform .45s cubic-bezier(.4,0,.2,1)' }}>
-          {Array.from({ length: pages }).map((_, pi) => (
-            <div key={pi} style={{ width: `${100 / pages}%`, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)' }}>
-              {SA.events.slice(pi * PER, pi * PER + PER).map((e, i) => {
-                const gi = pi * PER + i;
-                const urgent = e.dday.startsWith('D-') && +e.dday.slice(2) <= 3;
-                return (
-                  <div key={e.title} style={{ borderLeft: i ? '1px solid var(--line)' : 'none', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}>
-                    <image-slot id={`evt-${gi}`} shape="rect" placeholder={`${e.tag} 배너 이미지를 끌어다 놓으세요`} style={{ display: 'block', width: '100%', height: 112, borderBottom: '1px solid var(--line)' }}></image-slot>
-                    <div style={{ padding: '11px 13px 13px', display: 'flex', flexDirection: 'column', flex: 1 }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 8 }}>
-                        <span style={{ fontFamily: "'Pretendard',sans-serif", fontSize: 11, fontWeight: 700, color: '#fff', background: PT, padding: '2px 9px', whiteSpace: 'nowrap', flexShrink: 0 }}>{e.tag}</span>
-                        <span style={{ marginLeft: 'auto', fontFamily: CH, fontSize: 11.5, fontWeight: 700, color: urgent ? '#b23b3b' : PT }}>{e.dday}</span>
-                      </div>
-                      <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.34, marginBottom: 5 }}>{e.title}</div>
-                      <div style={{ fontSize: 11.5, color: 'var(--t2)', lineHeight: 1.45, marginBottom: 'auto' }}>{e.sub}</div>
-                      <div style={{ fontFamily: CH, fontSize: 11, color: 'var(--t3)', marginTop: 11, paddingTop: 9, borderTop: '1px solid var(--line)' }}>{e.period}</div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          ))}
-        </div>
-      </div>
-      <div style={{ display: 'flex', justifyContent: 'center', gap: 6, padding: '11px 0', borderTop: '1px solid var(--line)' }}>
-        {Array.from({ length: pages }).map((_, i) => (
-          <button key={i} onClick={() => setPage(i)} style={{ width: i === page ? 20 : 7, height: 7, borderRadius: 4, border: 'none', background: i === page ? PT : 'var(--line2)', cursor: 'pointer', transition: 'all .3s', padding: 0 }} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-const rowDiv = (i, n) => ({ borderBottom: i < n - 1 ? '1px solid #eaecef' : 'none' });
-
-// ── 지금 방송 중 LIVE (치지직 / 숲 / 유튜브) ──
-function StreamLive({ onPick }) {
-  const SA = window.SA;
-  const [tab, setTab] = useStateH('전체');
-  const list = tab === '전체' ? SA.streams : SA.streams.filter((s) => s.platform === tab);
-  const totalView = SA.streams.reduce((a, s) => a + s.viewers, 0);
-  return (
-    <Panel title="서든 LIVE" en="STREAMING" bodyPad="12px 14px 14px"
-      right={<Seg tabs={['전체', '치지직', '숲', '유튜브']} value={tab} onChange={setTab} />}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 11, fontSize: 11.5, color: 'var(--t2)' }}>
-        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontWeight: 700, color: '#e5484d' }}>
-          <span style={{ width: 7, height: 7, borderRadius: 4, background: '#e5484d', display: 'inline-block', animation: 'sgFade .01s' }} />LIVE
-        </span>
-        <span>{list.length}개 방송</span>
-        <span style={{ color: 'var(--t3)' }}>·</span>
-        <span>시청자 <b style={{ color: 'var(--ink)', fontFamily: CH }}>{SA.fmt(totalView)}</b>명</span>
-      </div>
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 12 }}>
-        {list.map((s, i) => {
-          const pf = SA.streamPlatforms[s.platform];
-          const player = SA.allPlayers.find((p) => p.name === s.streamer);
-          return (
-            <button key={s.streamer + i} onClick={() => player && onPick(player)} style={{ display: 'flex', flexDirection: 'column', textAlign: 'left',
-              border: '1px solid var(--line2)', borderRadius: 5, overflow: 'hidden', background: '#fff', cursor: player ? 'pointer' : 'default', padding: 0, fontFamily: "'Pretendard',sans-serif" }}>
-              <div style={{ position: 'relative' }}>
-                <image-slot id={`live-${i}`} shape="rect" placeholder={`${s.streamer} 방송 썸네일`} style={{ display: 'block', width: '100%', aspectRatio: '7 / 4' }}></image-slot>
-                <span style={{ position: 'absolute', top: 7, left: 7, display: 'inline-flex', alignItems: 'center', gap: 4, background: '#e5484d', color: '#fff', fontFamily: CH, fontWeight: 700, fontSize: 9.5, letterSpacing: '.6px', padding: '2px 6px', borderRadius: 3 }}>
-                  <span style={{ width: 5, height: 5, borderRadius: 3, background: '#fff', display: 'inline-block' }} />LIVE
-                </span>
-                <span style={{ position: 'absolute', top: 7, right: 7, background: pf.color, color: '#fff', fontFamily: CH, fontWeight: 700, fontSize: 9.5, letterSpacing: '.5px', padding: '2px 7px', borderRadius: 3 }}>{pf.tag}</span>
-                <span style={{ position: 'absolute', bottom: 7, right: 7, background: 'rgba(20,22,28,.82)', color: '#fff', fontFamily: CH, fontWeight: 700, fontSize: 10.5, padding: '2px 7px', borderRadius: 3 }}>👁 {SA.fmt(s.viewers)}</span>
-              </div>
-              <div style={{ padding: '9px 10px 10px' }}>
-                <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.34, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden', minHeight: 33 }}>{s.title}</div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 7 }}>
-                  <span style={{ fontSize: 9, fontWeight: 800, color: pf.color, letterSpacing: '.3px' }}>{pf.label}</span>
-                  <span style={{ width: 1, height: 9, background: 'var(--line2)' }} />
-                  <span style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--t2)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.streamer}</span>
-                  <span style={{ marginLeft: 'auto', fontSize: 10.5, color: 'var(--t3)', flexShrink: 0 }}>{s.started}</span>
-                </div>
-              </div>
-            </button>
-          );
-        })}
-      </div>
-    </Panel>
-  );
-}
-
-
-// ── SA 소식 ──
-function SANews() {
-  const SA = window.SA;
-  const [tab, setTab] = useStateH('공지사항');
-  const rows = SA.news[tab];
-  return (
-    <Panel title="SA 소식" en="NOTICE" right={<Seg tabs={['공지사항', 'GM이야기', '업데이트']} value={tab} onChange={setTab} />} bodyPad="2px 14px 6px">
-      {rows.map((r, i) => (
-        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 2px', ...rowDiv(i, rows.length), cursor: 'pointer' }}>
-          <span style={{ fontFamily: CH, fontSize: 12.5, color: 'var(--t3)', fontWeight: 600, width: 42, flexShrink: 0 }}>{r.date}</span>
-          <span style={{ flex: 1, fontSize: 14, color: '#33373d', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title}</span>
-        </div>
-      ))}
-    </Panel>
-  );
-}
-
-// ── 커뮤니티 ──
-function Community({ onAll }) {
-  const SA = window.SA;
-  const rows = [...SA.community['자유'], ...SA.community['공략']]
-    .sort((a, b) => (b.hot ? 1 : 0) - (a.hot ? 1 : 0))
-    .slice(0, 6);
-  return (
-    <Panel title="커뮤니티" en="COMMUNITY" right={
-      <button onClick={onAll} style={{ display: 'flex', alignItems: 'center', gap: 3, border: 'none', background: 'transparent', cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12, color: 'var(--t2)', padding: 0 }}>
-        전체 보기 <Icon name="chevR" size={13} stroke="var(--t2)" />
-      </button>
-    } bodyPad="2px 14px 6px">
-      {rows.map((p, i) => (
-        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 2px', ...rowDiv(i, rows.length), cursor: 'pointer' }}>
-          <span style={{ flexShrink: 0, fontSize: 10.5, fontWeight: 700, padding: '1px 7px', borderRadius: 4, background: '#f1f3f5', border: '1px solid var(--line)', color: '#5a5f66', minWidth: 32, textAlign: 'center' }}>{p.tag}</span>
-          <span style={{ flex: 1, fontSize: 14, color: '#33373d', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.title}</span>
-          {p.hot && <span style={{ fontSize: 10, fontWeight: 800, color: '#b23b3b', fontFamily: CH }}>HOT</span>}
-          <span style={{ fontFamily: CH, fontSize: 12, color: PT, fontWeight: 700, minWidth: 26, textAlign: 'right' }}>{p.cmt}</span>
-          <span style={{ fontSize: 11, color: 'var(--t3)', minWidth: 44, textAlign: 'right' }}>{p.time}</span>
-        </div>
-      ))}
-    </Panel>
-  );
-}
-
-// ── 내 전적 요약 ──
-function MeCard({ onPick }) {
-  const SA = window.SA, me = SA.me;
-  const [scope, setScope] = useStateH('통합');
-  const rankNo = scope === '통합' ? me.rankNoTotal : me.rankNoSeason;
-  const selRank = scope === '통합' ? me.rankTotal : me.rankSeason;
-  return (
-    <Panel title="내 전적" en="MY RECORD" bodyPad="14px 14px" right={<Seg tabs={['통합', '시즌']} value={scope} onChange={setScope} />}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
-        <RankBadge rank={selRank} size={46} />
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <div style={{ display: 'flex', alignItems: 'baseline', gap: 7 }}>
-            <span style={{ fontSize: 16, fontWeight: 800, color: 'var(--ink)' }}>{me.name}</span>
-            <span style={{ fontSize: 11, color: 'var(--t3)', fontWeight: 600 }}>{me.clan}</span>
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 6 }}>
-            <span style={{ fontSize: 11.5, color: 'var(--t3)', fontWeight: 600 }}>{scope} 랭킹</span>
-            <span style={{ fontFamily: CH, fontSize: 15, fontWeight: 700, color: PT }}>{SA.fmt(rankNo)}<span style={{ fontSize: 11, color: 'var(--t3)', fontWeight: 500, marginLeft: 1 }}>위</span></span>
-          </div>
-        </div>
-      </div>
-      <div style={{ display: 'flex', marginTop: 13, border: '1px solid var(--line)', borderRadius: 4 }}>
-        {[['승·패', `${me.wins}/${me.losses}`], ['승률', me.wr + '%'], ['킬뎃', SA.kdPct(me.kda) + '%']].map(([k, v], i) => (
-          <div key={k} style={{ flex: 1, textAlign: 'center', padding: '8px 0', borderLeft: i ? '1px solid var(--line)' : 'none', background: i % 2 ? '#fff' : '#f7f8f9' }}>
-            <div style={{ fontSize: 10.5, color: 'var(--t3)', fontWeight: 600, marginBottom: 3 }}>{k}</div>
-            <div style={{ fontFamily: CH, fontWeight: 700, fontSize: 15.5, color: k === '승률' ? wrColor(me.wr) : 'var(--ink)' }}>{v}</div>
-          </div>
-        ))}
-      </div>
-      <button onClick={() => onPick(me)} style={{ width: '100%', marginTop: 12, padding: '9px 0', border: `1px solid ${PT}`, cursor: 'pointer',
-        background: '#fff', color: PT, fontWeight: 700, fontSize: 13, borderRadius: 4, fontFamily: "'Pretendard',sans-serif" }}>내 전적 자세히 보기 ▸</button>
-    </Panel>
-  );
-}
-
-// ── SA 랭킹 (5종 · 각 top10) ──
-const SA_CATS = ['통합 계급', '시즌 계급', '랭크전', '공식 클랜', '클랜'];
-
-function RankRow({ i, onClick, badge, name, tag, sub, value, unit }) {
-  return (
-    <button onClick={onClick} style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', border: 'none', background: i % 2 ? '#fff' : '#f7f8f9', padding: '8px 14px', cursor: onClick ? 'pointer' : 'default', textAlign: 'left', borderBottom: '1px solid #eaecef', fontFamily: "'Pretendard',sans-serif" }}>
-      <span style={{ width: 16, textAlign: 'center', fontFamily: CH, fontWeight: 700, fontSize: 13.5, color: i < 3 ? PT : 'var(--t3)', flexShrink: 0 }}>{i + 1}</span>
-      {badge}
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-          <span style={{ fontSize: 13.5, color: 'var(--ink)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flexShrink: 0, maxWidth: '60%' }}>{name}</span>
-          {tag && <span style={{ fontSize: 10.5, color: 'var(--t3)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{tag}</span>}
-        </div>
-        {sub && <div style={{ fontSize: 10.5, color: 'var(--t3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{sub}</div>}
-      </div>
-      <span style={{ fontFamily: CH, fontWeight: 700, fontSize: 13, color: 'var(--ink)', flexShrink: 0, whiteSpace: 'nowrap' }}>{value}{unit && <span style={{ fontSize: 10, color: 'var(--t3)', fontWeight: 500, marginLeft: 2 }}>{unit}</span>}</span>
-    </button>
-  );
-}
-
-// ── 즐겨찾기 (페이지네이션) ──
-function Favorites({ onPick }) {
-  const SA = window.SA;
-  const all = SA.favorites;
-  const PER = 5;
-  const pages = Math.ceil(all.length / PER);
-  const [page, setPage] = useStateH(0);
-  const start = page * PER;
-  const view = all.slice(start, start + PER);
-  return (
-    <Panel title="즐겨찾기" en="FAVORITES" right={<span style={{ fontSize: 11, color: 'var(--t3)', fontWeight: 600 }}>{all.length}명</span>} bodyPad="0">
-      <div>
-        {view.map((f, i) => (
-          <button key={f.name} onClick={() => onPick(f)} style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', border: 'none', background: (start + i) % 2 ? '#fff' : '#f7f8f9', padding: '9px 14px', cursor: 'pointer', textAlign: 'left', borderBottom: '1px solid #eaecef', fontFamily: "'Pretendard',sans-serif" }}>
-            <RankBadge rank={f.rank} size={30} />
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-                <span style={{ fontSize: 13.5, color: 'var(--ink)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flexShrink: 0, maxWidth: '60%' }}>{f.name}</span>
-                {f.clan && <span style={{ fontSize: 10.5, color: 'var(--t3)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.clan}</span>}
-              </div>
-              <div style={{ fontSize: 10.5, color: 'var(--t3)', marginTop: 1 }}>{f.rank.name} · 승률 {f.wr}%</div>
-            </div>
-            <span style={{ fontFamily: CH, fontWeight: 700, fontSize: 12.5, color: PT, flexShrink: 0 }}>킬뎃 {SA.kdPct(f.kda)}%</span>
-          </button>
-        ))}
-      </div>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4, padding: '10px 0' }}>
-        <button onClick={() => setPage(Math.max(0, page - 1))} disabled={page === 0} style={pgBtn(page === 0)}>‹</button>
-        {Array.from({ length: pages }).map((_, i) => (
-          <button key={i} onClick={() => setPage(i)} style={{ width: 26, height: 26, borderRadius: 4, border: '1px solid ' + (i === page ? PT : 'var(--line2)'), background: i === page ? PT : '#fff', color: i === page ? '#fff' : 'var(--t2)', cursor: 'pointer', fontFamily: CH, fontWeight: 700, fontSize: 12 }}>{i + 1}</button>
-        ))}
-        <button onClick={() => setPage(Math.min(pages - 1, page + 1))} disabled={page === pages - 1} style={pgBtn(page === pages - 1)}>›</button>
-      </div>
-    </Panel>
-  );
-}
-function pgBtn(disabled) {
-  return { width: 26, height: 26, borderRadius: 4, border: '1px solid var(--line2)', background: '#fff', color: disabled ? 'var(--line2)' : 'var(--t2)', cursor: disabled ? 'default' : 'pointer', fontFamily: "'Chakra Petch',sans-serif", fontWeight: 700, fontSize: 14 };
-}
-
-function SARanking({ onPick, onClan }) {
-  const SA = window.SA;
-  const [cat, setCat] = useStateH('통합 계급');
-  const [mode, setMode] = useStateH('솔로');
-  const tcol = Object.fromEntries(SA.tiers.map((t) => [t.name, t.color]));
-  const isClass = cat === '시즌 계급' || cat === '통합 계급';
-  const isRanked = cat === '랭크전';
-  const isRankedUser = isRanked && mode !== '클랜';
-  const isRankedClan = isRanked && mode === '클랜';
-  const isClan = cat === '공식 클랜' || cat === '클랜';
-  const classList = cat === '시즌 계급' ? SA.seasonClassRanking : SA.totalClassRanking;
-  const contentList = mode === '솔로' ? SA.soloRpRanking : SA.partyRpRanking;
-  const clanList = cat === '공식 클랜' ? SA.officialClanRanking : SA.generalClanRanking;
-
-  return (
-    <Panel title="SA 랭킹" en="RANKING" right={<span style={{ fontSize: 11, color: 'var(--t3)', fontWeight: 600 }}>TOP 10</span>} bodyPad="11px 0 0">
-      {/* 카테고리 선택 */}
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, padding: '0 14px 10px' }}>
-        {SA_CATS.map((c) => {
-          const on = c === cat;
-          return (
-            <button key={c} onClick={() => setCat(c)} style={{ padding: '5px 10px', borderRadius: 4, border: `1px solid ${on ? PT : 'var(--line2)'}`, cursor: 'pointer',
-              fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 11.5, background: on ? PT : '#fff', color: on ? '#fff' : 'var(--t2)' }}>{c}</button>
-          );
-        })}
-      </div>
-
-      {/* 랭크전 하위 토글 */}
-      {isRanked && (
-        <div style={{ padding: '0 14px 11px' }}>
-          <div style={{ display: 'flex', border: '1px solid var(--line2)', borderRadius: 4, overflow: 'hidden', background: '#fff' }}>
-            {['솔로', '파티', '클랜'].map((t, i) => {
-              const on = mode === t;
-              return (
-                <button key={t} onClick={() => setMode(t)} style={{ flex: 1, padding: '6px 0', border: 'none', borderLeft: i ? '1px solid var(--line2)' : 'none', cursor: 'pointer',
-                  fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12, background: on ? PT : '#fff', color: on ? '#fff' : 'var(--t2)' }}>{t}</button>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
-      {/* 계급 랭킹 */}
-      {isClass && classList.map((e, i) => {
-        const p = SA.allPlayers.find((x) => x.name === e.name);
-        return (
-          <RankRow key={e.name} i={i} onClick={() => p && onPick(p)}
-            badge={p ? <RankBadge rank={p.rank} size={28} /> : null}
-            tag={p && p.clan} name={e.name} sub={p && p.rank.name}
-            value={SA.fmt(e.score)} unit="점" />
-        );
-      })}
-
-      {/* 랭크전(솔로/파티) 랭킹 */}
-      {isRankedUser && contentList.map((e, i) => {
-        const p = SA.allPlayers.find((x) => x.name === e.name);
-        const col = tcol[e.tier] || PT;
-        return (
-          <RankRow key={e.name} i={i} onClick={() => p && onPick(p)}
-            badge={<div style={{ width: 28, height: 28, borderRadius: 4, background: col, display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 800, fontSize: 12.5, flexShrink: 0 }}>{e.tier[0]}</div>}
-            tag={p && p.clan} name={e.name} sub={<span style={{ color: col, fontWeight: 600 }}>{e.tier}</span>}
-            value={SA.fmt(e.rp)} unit="RP" />
-        );
-      })}
-
-      {/* 랭크전(클랜) 랭킹 — 클랜 정보 */}
-      {isRankedClan && SA.clanRpRanking.map((c, i) => (
-        <RankRow key={c.name} i={i} onClick={() => onClan && onClan(c.name)}
-          badge={<div style={{ width: 28, height: 28, borderRadius: 4, background: '#23262b', display: 'grid', placeItems: 'center', fontFamily: CH, fontWeight: 700, fontSize: 10, color: '#fff', flexShrink: 0 }}>{c.tag}</div>}
-          name={c.name} sub={`${c.members}명`} value={SA.fmt(c.rp)} unit="RP" />
-      ))}
-
-      {/* 클랜 랭킹 */}
-      {isClan && clanList.map((c, i) => (
-        <RankRow key={c.name} i={i} onClick={() => onClan && onClan(c.name)}
-          badge={<div style={{ width: 28, height: 28, borderRadius: 4, background: '#23262b', display: 'grid', placeItems: 'center', fontFamily: CH, fontWeight: 700, fontSize: 10, color: '#fff', flexShrink: 0 }}>{c.tag}</div>}
-          name={<span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>{c.name}{cat === '공식 클랜' && <span style={{ fontSize: 9, fontWeight: 700, color: PT, border: `1px solid ${PT}`, borderRadius: 3, padding: '0 4px', lineHeight: 1.5 }}>인증</span>}</span>}
-          sub={`${c.members}명`} value={SA.fmt(c.rp)} unit="RP" />
-      ))}
-    </Panel>
-  );
-}
-
-// ── 인기 검색 랭킹(가장 많이 조회된 유저) ──
-function SearchRank({ onPick }) {
-  const SA = window.SA;
-  const trend = (m) => {
-    if (m === 'new') return <span style={{ fontFamily: CH, fontSize: 9.5, fontWeight: 700, color: '#b23b3b', width: 28, textAlign: 'center', flexShrink: 0 }}>NEW</span>;
-    if (m === 0) return <span style={{ fontSize: 11, color: 'var(--t3)', width: 28, textAlign: 'center', flexShrink: 0 }}>–</span>;
-    const up = m > 0;
-    return <span style={{ fontFamily: CH, fontSize: 11, fontWeight: 700, color: up ? PT : '#e5484d', width: 28, textAlign: 'center', flexShrink: 0 }}>{up ? '▲' : '▼'}{Math.abs(m)}</span>;
-  };
-  return (
-    <Panel title="인기 검색" en="TRENDING" right={<span style={{ fontSize: 11, color: 'var(--t3)', fontWeight: 600 }}>최근 24시간</span>} bodyPad="4px 0 0">
-      {SA.searchTrending.map((s, i) => {
-        const p = SA.allPlayers.find((x) => x.name === s.name);
-        return (
-          <button key={s.name} onClick={() => p && onPick(p)} style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', border: 'none', background: i % 2 ? '#fff' : '#f7f8f9', padding: '8px 14px', cursor: p ? 'pointer' : 'default', textAlign: 'left', borderBottom: '1px solid #eaecef', fontFamily: "'Pretendard',sans-serif" }}>
-            <span style={{ width: 16, textAlign: 'center', fontFamily: CH, fontWeight: 700, fontSize: 13.5, color: i < 3 ? PT : 'var(--t3)' }}>{i + 1}</span>
-            {trend(s.move)}
-            <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 6 }}>
-              <span style={{ fontSize: 13.5, color: 'var(--ink)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flexShrink: 0, maxWidth: '60%' }}>{s.name}</span>
-              {p && p.clan && <span style={{ fontSize: 10.5, color: 'var(--t3)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.clan}</span>}
-            </div>
-            <span style={{ fontFamily: CH, fontSize: 12, color: 'var(--t2)', fontWeight: 600, flexShrink: 0 }}>{SA.fmt(s.count)}<span style={{ fontSize: 10, color: 'var(--t3)', fontWeight: 500 }}> 조회</span></span>
-          </button>
-        );
-      })}
-    </Panel>
-  );
-}
-
-// ── 시즌 현황 ──
-function SeasonCard() {
-  const SA = window.SA, s = SA.season;
-  const [mapTab, setMapTab] = useStateH('5vs5');
-  const maps = mapTab === '5vs5' ? s.maps5v5 : s.maps3v3;
-  return (
-    <Panel title="시즌 현황" en="SEASON" right={<span style={{ fontFamily: CH, fontSize: 12.5, fontWeight: 700, color: PT }}>{s.dday}</span>} bodyPad="14px 14px">
-      <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 13 }}>
-        <div style={{ width: 42, height: 42, borderRadius: 6, background: '#23262b', display: 'grid', placeItems: 'center', color: '#fff', fontFamily: CH, fontWeight: 700, fontSize: 14, flexShrink: 0 }}>S2</div>
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--ink)', lineHeight: 1.25 }}>{s.name}</div>
-          <div style={{ fontSize: 11.5, color: 'var(--t3)', marginTop: 2 }}>{s.period} 종료</div>
-        </div>
-      </div>
-      <div style={{ height: 7, background: '#d4d8de', borderRadius: 4, overflow: 'hidden', boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.05)' }}>
-        <div style={{ width: s.progress + '%', height: '100%', background: PT, borderRadius: 4 }} />
-      </div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--t3)', marginTop: 5 }}>
-        <span>시즌 진행</span><span style={{ fontFamily: CH, color: 'var(--t2)', fontWeight: 600 }}>{s.progress}%</span>
-      </div>
-      <div style={{ marginTop: 14 }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 7 }}>
-          <div style={{ fontSize: 10.5, color: 'var(--t3)', fontWeight: 600 }}>시즌 맵</div>
-          <div style={{ display: 'flex', border: '1px solid var(--line2)', borderRadius: 4, overflow: 'hidden', background: '#fff' }}>
-            {['5vs5', '3vs3'].map((t, i) => {
-              const on = mapTab === t;
-              return (
-                <button key={t} onClick={() => setMapTab(t)} style={{ padding: '3px 10px', border: 'none', borderLeft: i ? '1px solid var(--line2)' : 'none', cursor: 'pointer',
-                  fontFamily: CH, fontWeight: 700, fontSize: 10.5, background: on ? PT : '#fff', color: on ? '#fff' : 'var(--t2)' }}>{t}</button>
-              );
-            })}
-          </div>
-        </div>
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
-          {maps.map((m) => <span key={m} style={{ padding: '4px 10px', borderRadius: 4, background: '#fff', border: '1px solid var(--line2)', fontSize: 11.5, color: 'var(--t2)', fontWeight: 500 }}>{m}</span>)}
-        </div>
-      </div>
-    </Panel>
-  );
-}
-
-// ── 폼 좋은 유저 (연승 / 승률 / 킬뎃 탭) ──
-function HotStreak({ onPick }) {
-  const SA = window.SA;
-  const [tab, setTab] = useStateH('연승');
-  let rows;
-  if (tab === '연승') {
-    rows = SA.hotStreak.map((e) => ({ p: SA.allPlayers.find((x) => x.name === e.name), streak: e.streak }));
-  } else if (tab === '승률') {
-    rows = [...SA.allPlayers].sort((a, b) => b.wr - a.wr).slice(0, 6).map((p) => ({ p }));
-  } else {
-    rows = [...SA.allPlayers].sort((a, b) => b.kda - a.kda).slice(0, 6).map((p) => ({ p }));
-  }
-  const metric = (p, streak) => {
-    if (tab === '연승') return (
-      <span style={{ display: 'flex', alignItems: 'center', gap: 3, color: '#e5484d' }}>
-        <Icon name="flame" size={14} stroke="#e5484d" />
-        <span style={{ fontFamily: CH, fontSize: 14, fontWeight: 700 }}>{streak}</span><span style={{ fontSize: 10.5, fontWeight: 700 }}>연승</span>
-      </span>
-    );
-    if (tab === '승률') return <span style={{ fontFamily: CH, fontSize: 15, fontWeight: 700, color: wrColor(p.wr) }}>{p.wr}%</span>;
-    return <span style={{ fontFamily: CH, fontSize: 15, fontWeight: 700, color: PT }}>{SA.kdPct(p.kda)}%</span>;
-  };
-  return (
-    <Panel title="폼 좋은 유저" en="HOT STREAK" right={<Seg tabs={['연승', '승률', '킬뎃']} value={tab} onChange={setTab} />} bodyPad="12px 14px 14px">
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10 }}>
-        {rows.map(({ p, streak }, i) => p && (
-          <button key={p.name} onClick={() => onPick(p)} style={{ display: 'flex', alignItems: 'center', gap: 10, border: '1px solid var(--line2)', borderRadius: 5, background: '#fff', padding: '10px 12px', cursor: 'pointer', textAlign: 'left', fontFamily: "'Pretendard',sans-serif" }}>
-            <span style={{ width: 14, textAlign: 'center', fontFamily: CH, fontWeight: 700, fontSize: 12.5, color: i < 3 ? PT : 'var(--t3)', flexShrink: 0 }}>{i + 1}</span>
-            <RankBadge rank={p.rank} size={30} />
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-                <span style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flexShrink: 0, maxWidth: '60%' }}>{p.name}</span>
-                {p.clan && <span style={{ fontSize: 10.5, color: 'var(--t3)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.clan}</span>}
-              </div>
-              <div style={{ fontSize: 10.5, color: 'var(--t3)', marginTop: 1 }}>{p.rank.name}</div>
-            </div>
-            <div style={{ flexShrink: 0 }}>{metric(p, streak)}</div>
-          </button>
-        ))}
-      </div>
-    </Panel>
-  );
-}
-
-// ── 오늘의 전장 ──
-function LiveStats() {
-  const SA = window.SA, L = SA.liveStats;
-  return (
-    <Panel title="오늘의 전장" en="TODAY" bodyPad="14px 14px">
-      <div style={{ display: 'flex', alignItems: 'baseline', gap: 7, marginBottom: 12, whiteSpace: 'nowrap' }}>
-        <span style={{ fontFamily: CH, fontWeight: 700, fontSize: 26, color: 'var(--ink)', letterSpacing: '-.5px' }}>{SA.fmt(L.totalMatches)}</span>
-        <span style={{ fontSize: 12.5, color: 'var(--t2)' }}>매치</span>
-        <span style={{ marginLeft: 'auto', fontFamily: CH, fontSize: 12, color: PT, fontWeight: 700 }}>▲ {L.prevDelta}%</span>
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', borderTop: '1px solid var(--line)' }}>
-        {L.matchModes.map(({ name, count }) => (
-          <div key={name} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '8px 0', borderBottom: '1px solid #eaecef' }}>
-            <span style={{ fontSize: 12.5, color: 'var(--t2)' }}>{name}</span>
-            <span style={{ fontFamily: CH, fontWeight: 600, fontSize: 13, color: 'var(--ink)', whiteSpace: 'nowrap' }}>{SA.fmt(count)}</span>
-          </div>
-        ))}
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '8px 0' }}>
-          <span style={{ fontSize: 12.5, color: 'var(--t2)' }}>오늘 제재</span>
-          <span style={{ fontFamily: CH, fontWeight: 600, fontSize: 13, color: '#b23b3b', whiteSpace: 'nowrap' }}>{L.bannedToday}명</span>
-        </div>
-      </div>
-    </Panel>
-  );
-}
-
-function Footer() {
-  return (
-    <div style={{ borderTop: '1px solid var(--line2)', background: '#fff' }}>
-      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '24px 28px 34px', display: 'flex', alignItems: 'flex-start', gap: 20 }}>
-        <Logo size={18} />
-        <div style={{ display: 'flex', gap: 16, marginLeft: 8 }}>
-          {['이용약관', '개인정보처리방침', '공지사항', '문의하기'].map((t) => (
-            <a key={t} onClick={() => { if (t === '문의하기') window.dispatchEvent(new Event('sa-open-feedback')); }} style={{ fontSize: 12.5, color: 'var(--t2)', cursor: 'pointer' }}>{t}</a>
-          ))}
-        </div>
-        <div style={{ marginLeft: 'auto', textAlign: 'right', fontSize: 11.5, color: 'var(--t3)', lineHeight: 1.7 }}>
-          searchgg는 서든어택 전적 조회를 위한 비공식 팬 사이트입니다. 본 페이지의 데이터는 데모용 예시입니다.<br />© 2026 searchgg
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── 모집 중인 클랜 (포스터) ──
-function RecruitPosters({ onPlaza, onOpenClan }) {
-  let pool = window.ClanRecruits ? window.ClanRecruits() : [];
-  try { if (localStorage.getItem('sa-my-recruit-active') === '0') pool = pool.filter((c) => c.name !== (window.SA.me.clan || '')); } catch (e) {}
-  const list = pool.slice().sort((a, b) => b.hot - a.hot).slice(0, 4);
-  if (!list.length) return null;
-  return (
-    <Panel title="모집 중인 클랜" en="RECRUIT" right={
-      <button onClick={onPlaza} style={{ display: 'flex', alignItems: 'center', gap: 3, border: 'none', background: 'transparent', cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12, color: 'var(--t2)', padding: 0 }}>
-        전체 보기 <Icon name="chevR" size={13} stroke="var(--t2)" />
-      </button>
-    } bodyPad="14px 14px">
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12 }}>
-        {list.map((rc) => (
-          <div key={rc.name} onClick={onPlaza} style={{ cursor: 'pointer' }}>
-            <div style={{ aspectRatio: '3 / 4', border: '1px solid var(--line)', borderRadius: 5, overflow: 'hidden', background: '#f4f5f7' }}>
-              <image-slot id={`recruit-poster-${rc.name}`} shape="rect" placeholder="홍보 포스터" style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
-            </div>
-            <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 7 }}>
-              <window.Emblem cfg={rc.emblem} size={20} />
-              <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{rc.name}</span>
-            </div>
-            <div style={{ marginTop: 2, fontSize: 10.5, color: 'var(--t3)', paddingLeft: 27 }}>랭킹 {rc.rank}위 · {rc.openings}명 모집</div>
-          </div>
-        ))}
-      </div>
-    </Panel>
-  );
-}
-
-function Home() {
-  const [sel, setSel] = useStateH(null);
-  const [login, setLogin] = useStateH(false);
-  const [clan, setClan] = useStateH(null);
-  const [plaza, setPlaza] = useStateH(false);
-  const [community, setCommunity] = useStateH(false);
-  return (
-    <div style={{ minHeight: '100vh', background: 'var(--bg2)', color: 'var(--ink)', fontFamily: "'Pretendard',sans-serif" }}>
-      <Nav active="홈" onLogin={() => setLogin(true)} onClan={() => setPlaza(true)} onCommunity={() => setCommunity(true)} />
-      <Hero onPick={setSel} />
-      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '20px 28px 40px' }}>
-        <EventStrip />
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 348px', gap: 18, alignItems: 'start' }}>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
-            <StreamLive onPick={setSel} />
-            <HotStreak onPick={setSel} />
-            <RecruitPosters onPlaza={() => setPlaza(true)} onOpenClan={(n) => setClan(n)} />
-            <SANews />
-            <Community onAll={() => setCommunity(true)} />
-          </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
-            <MeCard onPick={setSel} />
-            <Favorites onPick={setSel} />
-            <SeasonCard />
-            <SARanking onPick={setSel} onClan={setClan} />
-            <SearchRank onPick={setSel} />
-            <LiveStats />
-          </div>
-        </div>
-      </div>
-      <Footer />
-      {sel && <ProfileScreen player={sel} onClose={() => setSel(null)} onPick={setSel} onLogin={() => setLogin(true)} onClan={(n) => { setSel(null); setClan(n); }} onCommunity={() => { setSel(null); setCommunity(true); }} />}
-      {plaza && <ClanPlaza onClose={() => setPlaza(false)} onOpenClan={(n) => setClan(n)} onLogin={() => setLogin(true)} onClan={() => setPlaza(true)} onCommunity={() => { setPlaza(false); setCommunity(true); }} />}
-      {community && <CommunityScreen onClose={() => setCommunity(false)} onLogin={() => setLogin(true)} onClan={() => { setCommunity(false); setPlaza(true); }} />}
-      {clan && <ClanHome clanName={clan} onClose={() => setClan(null)} onPick={(n) => { setClan(null); setSel(window.SA.allPlayers.find((p) => p.name === n) || window.SA.me); }} onLogin={() => setLogin(true)} onClan={() => { setClan(null); setPlaza(true); }} onCommunity={() => { setClan(null); setPlaza(false); setCommunity(true); }} />}
-      {login && <LoginScreen onClose={() => setLogin(false)} />}
-      <FeedbackWidget />
-    </div>
-  );
-}
-
-Object.assign(window, { Home, TopBar, Nav, Footer, Panel, Seg, PT, CH });
diff --git a/surinz-source/sa-login.jsx b/surinz-source/sa-login.jsx
deleted file mode 100644
index de87beb..0000000
--- a/surinz-source/sa-login.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/* eslint-disable */
-// ─────────────────────────────────────────────────────────────
-// searchgg · 로그인 화면 (소셜 로그인: 카카오 / 디스코드 / 구글)
-// window.LoginScreen
-// ─────────────────────────────────────────────────────────────
-
-function KakaoMark({ size = 20 }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <path d="M12 3.5c-5 0-9 3.13-9 7 0 2.5 1.7 4.69 4.27 5.94-.15.53-.78 2.78-.81 2.96 0 0-.02.14.07.2.09.05.2 0 .2 0 .26-.04 3.02-2 3.5-2.33.57.08 1.16.13 1.77.13 5 0 9-3.13 9-7s-4-7-9-7z" fill="#191600" />
-    </svg>
-  );
-}
-function DiscordMark({ size = 20 }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="#fff">
-      <path d="M20.317 4.369A19.79 19.79 0 0 0 15.885 3c-.21.375-.45.88-.617 1.28a18.27 18.27 0 0 0-5.535 0C9.565 3.88 9.318 3.375 9.107 3A19.736 19.736 0 0 0 4.677 4.369C1.9 8.46 1.144 12.44 1.522 16.36a19.9 19.9 0 0 0 6.075 3.05c.49-.665.927-1.372 1.304-2.114-.717-.27-1.404-.604-2.05-.99.172-.126.34-.257.502-.39 3.96 1.84 8.245 1.84 12.16 0 .164.135.332.266.5.39-.647.387-1.335.72-2.052.99.378.742.814 1.45 1.304 2.114a19.84 19.84 0 0 0 6.078-3.05c.444-4.55-.758-8.494-3.205-11.99zM8.02 14.09c-1.18 0-2.15-1.085-2.15-2.42 0-1.334.95-2.42 2.15-2.42 1.21 0 2.17 1.096 2.15 2.42 0 1.335-.95 2.42-2.15 2.42zm7.96 0c-1.18 0-2.15-1.085-2.15-2.42 0-1.334.95-2.42 2.15-2.42 1.21 0 2.17 1.096 2.15 2.42 0 1.335-.94 2.42-2.15 2.42z" />
-    </svg>
-  );
-}
-function GoogleMark({ size = 20 }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24">
-      <path d="M23.04 12.26c0-.81-.07-1.59-.21-2.34H12v4.43h6.2a5.3 5.3 0 0 1-2.3 3.48v2.89h3.72c2.18-2 3.42-4.96 3.42-8.46z" fill="#4285F4" />
-      <path d="M12 24c3.11 0 5.72-1.03 7.63-2.79l-3.72-2.89c-1.03.69-2.35 1.1-3.91 1.1-3 0-5.55-2.03-6.46-4.76H1.69v2.98A11.99 11.99 0 0 0 12 24z" fill="#34A853" />
-      <path d="M5.54 14.66A7.2 7.2 0 0 1 5.16 12c0-.92.16-1.82.38-2.66V6.36H1.69A11.99 11.99 0 0 0 .43 12c0 1.94.47 3.77 1.26 5.4l3.85-2.74z" fill="#FBBC05" />
-      <path d="M12 4.77c1.69 0 3.21.58 4.4 1.72l3.3-3.3C17.71 1.19 15.1 0 12 0 7.31 0 3.26 2.69 1.69 6.36l3.85 2.98C6.45 6.61 9 4.77 12 4.77z" fill="#EA4335" />
-    </svg>
-  );
-}
-
-function SocialButton({ provider, bg, color, border, mark }) {
-  const [hover, setHover] = React.useState(false);
-  return (
-    <button
-      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
-      style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '13px 18px', borderRadius: 8, cursor: 'pointer',
-        background: bg, color, border: border || 'none', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 14.5,
-        boxShadow: hover ? '0 4px 14px rgba(0,0,0,.14)' : '0 1px 2px rgba(0,0,0,.06)', transform: hover ? 'translateY(-1px)' : 'none', transition: 'all .16s' }}>
-      <span style={{ display: 'grid', placeItems: 'center', width: 22 }}>{mark}</span>
-      <span style={{ flex: 1, textAlign: 'center', marginRight: 22 }}>{provider}(으)로 계속하기</span>
-    </button>
-  );
-}
-
-function LoginScreen({ onClose }) {
-  return (
-    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 400, background: 'rgba(20,22,26,.62)', backdropFilter: 'blur(3px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, animation: 'sgFade .2s ease' }}>
-      <div onClick={(e) => e.stopPropagation()} style={{ width: 420, maxWidth: '100%', background: '#fff', borderRadius: 14, overflow: 'hidden', boxShadow: '0 24px 70px rgba(0,0,0,.34)', fontFamily: "'Pretendard',sans-serif" }}>
-        <div style={{ position: 'relative', background: '#23262b', padding: '34px 30px 30px', textAlign: 'center' }}>
-          <button onClick={onClose} aria-label="닫기" style={{ position: 'absolute', top: 14, right: 14, width: 30, height: 30, borderRadius: 6, border: 'none', background: 'rgba(255,255,255,.12)', color: '#fff', cursor: 'pointer', fontSize: 16, lineHeight: 1 }}>×</button>
-          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 14 }}><Logo size={26} light /></div>
-          <h2 style={{ margin: 0, color: '#fff', fontSize: 21, fontWeight: 800, letterSpacing: '-.4px' }}>로그인</h2>
-          <p style={{ margin: '7px 0 0', color: 'rgba(255,255,255,.6)', fontSize: 13, lineHeight: 1.5 }}>소셜 계정으로 간편하게 시작하세요</p>
-        </div>
-        <div style={{ padding: '24px 30px 14px', display: 'flex', flexDirection: 'column', gap: 11 }}>
-          <SocialButton provider="카카오" bg="#FEE500" color="#191600" mark={<KakaoMark />} />
-          <SocialButton provider="디스코드" bg="#5865F2" color="#fff" mark={<DiscordMark />} />
-          <SocialButton provider="구글" bg="#fff" color="#33373d" border="1px solid #dadce0" mark={<GoogleMark />} />
-        </div>
-        <div style={{ padding: '8px 30px 26px', textAlign: 'center' }}>
-          <p style={{ margin: 0, fontSize: 11.5, color: '#949aa3', lineHeight: 1.6 }}>
-            로그인 시 <a style={{ color: '#5b626c', textDecoration: 'underline', cursor: 'pointer' }}>이용약관</a> 및 <a style={{ color: '#5b626c', textDecoration: 'underline', cursor: 'pointer' }}>개인정보처리방침</a>에<br />동의하는 것으로 간주됩니다.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-Object.assign(window, { LoginScreen });
diff --git a/surinz-source/sa-profile-sections.jsx b/surinz-source/sa-profile-sections.jsx
deleted file mode 100644
index 0730942..0000000
--- a/surinz-source/sa-profile-sections.jsx
+++ /dev/null
@@ -1,526 +0,0 @@
-/* eslint-disable */
-// ─────────────────────────────────────────────────────────────
-// searchgg · 전적검색(프로필) 섹션 컴포넌트
-// 요약 헤더 / 시즌별 랭크전 / 클랜전 / 맵별 / 최근 동향 / 매치 기록 / 자주 함께한 유저
-// 전역(window): Panel, Seg, RankBadge, WinRing, Icon, KdaChip, wrColor, SA
-// ─────────────────────────────────────────────────────────────
-const PSCH = "'Chakra Petch',sans-serif";
-const PSPT = '#48515f';
-const psTh = (a) => ({ fontSize: 11, fontWeight: 700, color: 'var(--t3)', padding: '10px 14px', textAlign: a, whiteSpace: 'nowrap', letterSpacing: '.2px' });
-const psTd = { fontSize: 13, color: '#33373d', padding: '11px 14px', whiteSpace: 'nowrap', verticalAlign: 'middle' };
-const psSmall = { fontSize: 11, color: 'var(--t3)', fontWeight: 600 };
-
-function tierColor(name) { const t = (window.SA.tiers || []).find((x) => x.name === name); return t ? t.color : PSPT; }
-function recStr(d) { return `${d.matches}전 ${d.w}승 ${d.l}패`; }
-
-function WrCell({ wr, w = 46 }) {
-  const fill = Math.max(0.04, Math.min(1, (wr - 35) / (80 - 35)));
-  const col = wrColor(wr);
-  return (
-    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end' }}>
-      <span style={{ width: w, height: 7, background: '#d4d8de', borderRadius: 4, overflow: 'hidden', display: 'inline-block', boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.05)' }}>
-        <span style={{ display: 'block', width: `${fill * 100}%`, height: '100%', background: col }} />
-      </span>
-      <span style={{ fontFamily: PSCH, fontWeight: 700, color: col, minWidth: 36, textAlign: 'right' }}>{wr}%</span>
-    </div>
-  );
-}
-
-function TierChipS({ name, div }) {
-  const col = tierColor(name);
-  return (
-    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, whiteSpace: 'nowrap' }}>
-      <span style={{ width: 9, height: 9, borderRadius: 2, background: col, transform: 'rotate(45deg)', flexShrink: 0 }} />
-      <span style={{ fontWeight: 700, color: 'var(--ink)' }}>{name}{div ? ' ' + div : ''}</span>
-    </span>
-  );
-}
-
-// ── 요약 헤더 ──
-function ProfileSummary({ p }) {
-  const SA = window.SA;
-  const accent = p.rank.color;
-  const [scope, setScope] = React.useState('통합');
-  const selRank = scope === '통합' ? p.rankTotal : p.rankSeason;
-  const selRankNo = scope === '통합' ? p.rankNoTotal : p.rankNoSeason;
-  const stats = [
-    ['승률', p.wr + '%', wrColor(p.wr)],
-    ['킬뎃', SA.kdPct(p.kda) + '%', PSPT],
-    ['헤드샷', p.hs + '%', 'var(--ink)'],
-    ['라이플', p.rifle + '%', 'var(--ink)'],
-    ['스나', p.sniper + '%', 'var(--ink)'],
-    ['특수', p.special + '%', 'var(--ink)'],
-    ['랭킹', SA.fmt(selRankNo) + '위', PSPT],
-    ['매너', p.manner + '점', 'var(--ink)'],
-    ['접속률', p.connRate + '%', 'var(--ink)'],
-  ];
-  return (
-    <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 5, overflow: 'hidden', marginBottom: 18 }}>
-      <div style={{ height: 4, background: accent }} />
-      <div style={{ display: 'flex', alignItems: 'center', gap: 24, padding: '22px 26px', flexWrap: 'wrap' }}>
-        <div style={{ textAlign: 'center', flexShrink: 0 }}>
-          <Seg tabs={['통합', '시즌']} value={scope} onChange={setScope} />
-          <div style={{ marginTop: 12, display: 'flex', justifyContent: 'center' }}><RankBadge rank={selRank} size={66} /></div>
-          <div style={{ fontSize: 12, color: selRank.color, fontWeight: 700, marginTop: 5 }}>{selRank.name}</div>
-          <div style={{ fontSize: 10, color: 'var(--t3)', marginTop: 1 }}>{scope} 계급</div>
-        </div>
-        <div style={{ flex: 1, minWidth: 220 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
-            <h1 style={{ margin: 0, fontSize: 28, fontWeight: 800, color: 'var(--ink)', letterSpacing: '-.5px' }}>{p.name}</h1>
-            {p.clan && <span style={{ fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 14, color: 'var(--t2)' }}>{p.clan}</span>}
-          </div>
-          <div style={{ marginTop: 13, display: 'flex', gap: 8 }}>
-            <button style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 5, border: 'none', background: '#20242b', color: '#fff', fontWeight: 700, fontSize: 12.5, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif" }}>
-              <Icon name="heart" size={14} stroke="#fff" /> 즐겨찾기
-            </button>
-            <button style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 5, cursor: 'pointer', background: '#fff', border: '1px solid var(--line2)', color: '#3a4049', fontWeight: 600, fontSize: 12.5, fontFamily: "'Pretendard',sans-serif" }}>
-              <Icon name="refresh" size={14} stroke="#3a4049" /> 전적 갱신
-            </button>
-          </div>
-        </div>
-        <div style={{ display: 'flex', gap: 14, flexShrink: 0 }}>
-          <WinRing wr={p.wr} size={88} sw={8} />
-          <WinRing wr={SA.kdPct(p.kda)} size={88} sw={8} label="킬뎃" color={PSPT} />
-        </div>
-      </div>
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(9,1fr)', borderTop: '1px solid var(--line)' }}>
-        {stats.map(([lab, val, col], i) => (
-          <div key={lab} style={{ padding: '12px 6px', textAlign: 'center', borderLeft: i ? '1px solid var(--line)' : 'none', background: i % 2 ? '#fff' : '#fafbfc' }}>
-            <div style={{ fontSize: 10.5, color: 'var(--t3)', fontWeight: 600, marginBottom: 5 }}>{lab}</div>
-            <div style={{ fontFamily: PSCH, fontWeight: 700, fontSize: 14.5, color: col }}>{val}</div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-// ── 시즌별 랭크전 전적 (시즌 선택 · 솔로/파티) ──
-function RankedSeasons({ p }) {
-  const seasons = p.rankedSeasons;
-  const [sel, setSel] = React.useState(seasons[0].season);
-  const isAll = sel === '통산';
-  const cur = seasons.find((s) => s.season === sel) || seasons[0];
-  const agg = (key) => {
-    let M = 0, W = 0, L = 0, kdW = 0, hsW = 0;
-    seasons.forEach((s) => { const d = s[key]; M += d.matches; W += d.w; L += d.l; kdW += d.kd * d.matches; hsW += d.hs * d.matches; });
-    return { matches: M, w: W, l: L, wr: M ? Math.round(W / M * 100) : 0, kd: M ? Math.round(kdW / M) : 0, hs: M ? Math.round(hsW / M) : 0, tier: null };
-  };
-  const rows = [['솔로', isAll ? agg('solo') : cur.solo], ['파티', isAll ? agg('party') : cur.party]];
-  const sel2 = (
-    <select value={sel} onChange={(e) => setSel(e.target.value)} style={{ fontFamily: "'Pretendard',sans-serif", fontSize: 12, fontWeight: 700, color: 'var(--ink)', border: '1px solid var(--line2)', borderRadius: 4, padding: '5px 8px', background: '#fff', cursor: 'pointer' }}>
-      <option value="통산">통산</option>
-      {seasons.map((s) => <option key={s.season} value={s.season}>{s.season}</option>)}
-    </select>
-  );
-  return (
-    <Panel title="시즌별 랭크전 전적" en="RANKED" right={sel2} bodyPad="0">
-      <div style={{ overflowX: 'auto' }}>
-        <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 660 }}>
-          <thead>
-            <tr style={{ borderBottom: '1px solid var(--line2)', background: '#f7f8f9' }}>
-              <th style={psTh('left')}>구분</th><th style={{ ...psTh('left'), minWidth: 150 }}>티어</th><th style={psTh('right')}>티어 점수</th>
-              <th style={psTh('right')}>매치</th><th style={psTh('right')}>전적</th>
-              <th style={psTh('right')}>승률</th><th style={psTh('right')}>킬뎃</th>
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map(([label, d], i) => (
-              <tr key={label} style={{ borderBottom: i === 0 ? '1px solid #eaecef' : 'none', background: i % 2 ? '#fff' : '#fbfbfc' }}>
-                <td style={{ ...psTd, fontWeight: 700, color: 'var(--ink)' }}>{label} 랭크전</td>
-                <td style={psTd}>{isAll ? <span style={{ color: 'var(--t3)' }}>—</span> : <TierChipS name={d.tier} div={d.div} />}</td>
-                <td style={{ ...psTd, textAlign: 'right', fontFamily: PSCH, fontWeight: 600 }}>{isAll ? <span style={{ color: 'var(--t3)' }}>—</span> : <span>{window.SA.fmt(d.points)}<span style={{ fontSize: 10, color: 'var(--t3)', fontWeight: 500 }}> 점</span></span>}</td>
-                <td style={{ ...psTd, textAlign: 'right', fontFamily: PSCH }}>{d.matches}</td>
-                <td style={{ ...psTd, textAlign: 'right', color: 'var(--t2)' }}>{recStr(d)}</td>
-                <td style={{ ...psTd, textAlign: 'right' }}><WrCell wr={d.wr} /></td>
-                <td style={{ ...psTd, textAlign: 'right', fontFamily: PSCH, fontWeight: 600 }}>{d.kd}%</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </Panel>
-  );
-}
-
-// ── 클랜전 전적 (소속 클랜별) ──
-function ClanRecords({ p }) {
-  const [open, setOpen] = React.useState(-1);
-  const [showAll, setShowAll] = React.useState(false);
-  const all = p.clanRecords;
-  const CAP = 4;
-  const list = showAll ? all : all.slice(0, CAP);
-  return (
-    <Panel title="클랜전 전적" en="CLAN" right={<span style={psSmall}>소속 클랜별 · 클릭 시 활동 기간</span>} bodyPad="0">
-      <div style={{ overflowX: 'auto' }}>
-        <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 600 }}>
-          <thead>
-            <tr style={{ borderBottom: '1px solid var(--line2)', background: '#f7f8f9' }}>
-              <th style={psTh('left')}>클랜</th>
-              <th style={psTh('right')}>매치</th><th style={psTh('right')}>전적</th>
-              <th style={psTh('right')}>승률</th><th style={psTh('right')}>킬뎃</th>
-            </tr>
-          </thead>
-          <tbody>
-            {list.map((c, i) => {
-              const isOpen = open === i;
-              return (
-                <React.Fragment key={c.clan + i}>
-                  <tr onClick={() => setOpen(isOpen ? -1 : i)} style={{ borderBottom: '1px solid #eaecef', background: isOpen ? '#f1f3f5' : (i % 2 ? '#fff' : '#fbfbfc'), cursor: 'pointer' }}>
-                    <td style={psTd}>
-                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
-                        <Icon name="chevR" size={13} stroke="var(--t3)" style={{ transform: isOpen ? 'rotate(90deg)' : 'none', transition: 'transform .15s' }} />
-                        <span style={{ width: 26, height: 26, borderRadius: 4, background: '#23262b', display: 'grid', placeItems: 'center', fontFamily: PSCH, fontWeight: 700, fontSize: 9.5, color: '#fff' }}>{c.tag}</span>
-                        <span style={{ fontWeight: 700, color: 'var(--ink)' }}>{c.clan}</span>
-                        {i === 0 && <span style={{ fontSize: 9.5, fontWeight: 700, color: PSPT, border: `1px solid ${PSPT}`, borderRadius: 3, padding: '0 5px' }}>현재</span>}
-                        <span style={{ fontSize: 10.5, color: 'var(--t3)' }}>가입 {c.periods.length}회</span>
-                      </span>
-                    </td>
-                    <td style={{ ...psTd, textAlign: 'right', fontFamily: PSCH }}>{c.matches}</td>
-                    <td style={{ ...psTd, textAlign: 'right', color: 'var(--t2)' }}>{recStr(c)}</td>
-                    <td style={{ ...psTd, textAlign: 'right' }}><WrCell wr={c.wr} /></td>
-                    <td style={{ ...psTd, textAlign: 'right', fontFamily: PSCH, fontWeight: 600 }}>{c.kd}%</td>
-                  </tr>
-                  {isOpen && (
-                    <tr>
-                      <td colSpan={5} style={{ padding: '13px 16px 15px', background: '#f7f8f9', borderBottom: '1px solid #eaecef' }}>
-                        <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--t3)', marginBottom: 9, letterSpacing: '.2px' }}>활동 기간 · {c.periods.length}회 가입</div>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                          {c.periods.map((pd, j) => (
-                            <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', background: '#fff', border: '1px solid var(--line)', borderRadius: 5 }}>
-                              <span style={{ fontFamily: PSCH, fontWeight: 700, fontSize: 11.5, color: '#fff', background: PSPT, borderRadius: 3, padding: '1px 7px', flexShrink: 0 }}>{c.periods.length - j}차</span>
-                              <Icon name="clock" size={14} stroke="var(--t3)" />
-                              <span style={{ fontFamily: PSCH, fontSize: 13, color: 'var(--ink)', fontWeight: 700 }}>{pd.from} ~ {pd.to}</span>
-                              <span style={{ fontSize: 12, color: 'var(--t3)' }}>약 {pd.months}개월</span>
-                            </div>
-                          ))}
-                        </div>
-                      </td>
-                    </tr>
-                  )}
-                </React.Fragment>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-      {all.length > CAP && (
-        <button onClick={() => setShowAll(!showAll)} style={{ width: '100%', padding: '10px 0', border: 'none', borderTop: '1px solid var(--line)', background: '#fff', cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12.5, color: 'var(--t2)' }}>
-          {showAll ? '접기 ▲' : `소속했던 클랜 더보기 +${all.length - CAP} ▼`}
-        </button>
-      )}
-    </Panel>
-  );
-}
-
-// ── 최근 동향 추세 그래프 (승률 / 킬뎃 시계열) ──
-function TrendChart({ p }) {
-  const [period, setPeriod] = React.useState('주별');
-  const data = period === '일별' ? p.trend.daily : p.trend.weekly;
-  const W = 720, H = 250, padL = 38, padR = 16, padT = 18, padB = 34;
-  const iw = W - padL - padR, ih = H - padT - padB;
-  const n = data.length;
-  const x = (i) => padL + (n === 1 ? iw / 2 : (i / (n - 1)) * iw);
-  const y = (v) => padT + (1 - (v - 20) / (90 - 20)) * ih;
-  const path = (key) => data.map((d, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)} ${y(d[key]).toFixed(1)}`).join(' ');
-  const area = (key) => `${path(key)} L${x(n - 1).toFixed(1)} ${(padT + ih).toFixed(1)} L${x(0).toFixed(1)} ${(padT + ih).toFixed(1)} Z`;
-  const WR = '#2f6fed', KD = PSPT;
-  const grid = [20, 40, 60, 80];
-  const last = data[n - 1];
-  const first = data[0];
-  const delta = (key) => last[key] - first[key];
-  const dchip = (label, key, col) => {
-    const dv = delta(key);
-    return (
-      <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
-        <span style={{ width: 11, height: 3, borderRadius: 2, background: col }} />
-        <span style={{ fontSize: 12, color: 'var(--t2)', fontWeight: 600 }}>{label}</span>
-        <span style={{ fontFamily: PSCH, fontWeight: 700, fontSize: 13, color: col }}>{last[key]}%</span>
-        <span style={{ fontFamily: PSCH, fontWeight: 700, fontSize: 11.5, color: dv >= 0 ? '#16a34a' : '#e5484d' }}>
-          {dv >= 0 ? '▲' : '▼'}{Math.abs(dv)}
-        </span>
-      </div>
-    );
-  };
-  const labelStep = Math.ceil(n / 8);
-  return (
-    <Panel title="최근 동향" en="TREND" right={<Seg tabs={['일별', '주별']} value={period} onChange={setPeriod} />} bodyPad="14px 16px 16px">
-      <div style={{ display: 'flex', gap: 20, marginBottom: 10, paddingLeft: 4 }}>
-        {dchip('승률', 'wr', WR)}
-        {dchip('킬뎃', 'kd', KD)}
-        <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--t3)' }}>{period === '일별' ? '최근 14일' : '최근 10주'} 추이</span>
-      </div>
-      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
-        <defs>
-          <linearGradient id="wrGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stopColor={WR} stopOpacity="0.16" /><stop offset="100%" stopColor={WR} stopOpacity="0" />
-          </linearGradient>
-        </defs>
-        {grid.map((g) => (
-          <g key={g}>
-            <line x1={padL} y1={y(g)} x2={W - padR} y2={y(g)} stroke="#eceef1" strokeWidth="1" />
-            <text x={padL - 8} y={y(g) + 3.5} textAnchor="end" fontSize="10.5" fill="#949aa3" fontFamily={PSCH}>{g}</text>
-          </g>
-        ))}
-        {data.map((d, i) => (i % labelStep === 0 || i === n - 1) && (
-          <text key={i} x={x(i)} y={H - 12} textAnchor="middle" fontSize="10.5" fill="#949aa3">{d.label}</text>
-        ))}
-        <path d={area('wr')} fill="url(#wrGrad)" />
-        <path d={path('wr')} fill="none" stroke={WR} strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
-        <path d={path('kd')} fill="none" stroke={KD} strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" strokeDasharray="1 0" />
-        {data.map((d, i) => (
-          <g key={'p' + i}>
-            <circle cx={x(i)} cy={y(d.wr)} r={i === n - 1 ? 4 : 2.6} fill="#fff" stroke={WR} strokeWidth="2" />
-            <circle cx={x(i)} cy={y(d.kd)} r={i === n - 1 ? 4 : 2.6} fill="#fff" stroke={KD} strokeWidth="2" />
-          </g>
-        ))}
-      </svg>
-    </Panel>
-  );
-}
-
-// ── 맵별 전적 ──
-function MapRecords({ p }) {
-  const [showAll, setShowAll] = React.useState(false);
-  const all = p.mapRecords;
-  const CAP = 8;
-  const list = showAll ? all : all.slice(0, CAP);
-  return (
-    <Panel title="맵별 전적" en="BY MAP" right={<span style={psSmall}>매치 많은 순 · {all.length}개 맵</span>} bodyPad="0">
-      <div style={{ overflowX: 'auto' }}>
-        <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 560 }}>
-          <thead>
-            <tr style={{ borderBottom: '1px solid var(--line2)', background: '#f7f8f9' }}>
-              <th style={{ ...psTh('left'), width: 30 }}>#</th>
-              <th style={psTh('left')}>맵</th>
-              <th style={psTh('right')}>매치</th><th style={psTh('right')}>전적</th>
-              <th style={psTh('right')}>승률</th><th style={psTh('right')}>킬뎃</th>
-            </tr>
-          </thead>
-          <tbody>
-            {list.map((m, i) => (
-              <tr key={m.name + i} style={{ borderBottom: i < list.length - 1 ? '1px solid #eaecef' : 'none', background: i % 2 ? '#fff' : '#fbfbfc' }}>
-                <td style={{ ...psTd, textAlign: 'center', fontFamily: PSCH, fontWeight: 700, fontSize: 11.5, color: 'var(--t3)' }}>{i + 1}</td>
-                <td style={{ ...psTd, fontWeight: 700, color: 'var(--ink)' }}>{m.name}</td>
-                <td style={{ ...psTd, textAlign: 'right', fontFamily: PSCH }}>{m.matches}</td>
-                <td style={{ ...psTd, textAlign: 'right', color: 'var(--t2)' }}>{recStr(m)}</td>
-                <td style={{ ...psTd, textAlign: 'right' }}><WrCell wr={m.wr} /></td>
-                <td style={{ ...psTd, textAlign: 'right', fontFamily: PSCH, fontWeight: 600 }}>{m.kd}%</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-      {all.length > CAP && (
-        <button onClick={() => setShowAll(!showAll)} style={{ width: '100%', padding: '10px 0', border: 'none', borderTop: '1px solid var(--line)', background: '#fff', cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12.5, color: 'var(--t2)' }}>
-          {showAll ? '접기 ▲' : `맵 전체 보기 +${all.length - CAP} ▼`}
-        </button>
-      )}
-    </Panel>
-  );
-}
-
-// ── 매치 기록 ──
-function TeamTable({ result, color, players }) {
-  return (
-    <div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '8px 12px', background: `${color}12` }}>
-        <span style={{ width: 9, height: 9, borderRadius: 2, background: color }} />
-        <span style={{ fontWeight: 800, fontSize: 12.5, color }}>{result}</span>
-        <span style={{ fontSize: 10.5, color: 'var(--t3)', fontWeight: 600 }}>5명</span>
-      </div>
-      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
-        <thead>
-          <tr style={{ borderBottom: '1px solid var(--line)' }}>
-            <th style={{ ...psTh('left'), padding: '7px 12px' }}>플레이어</th>
-            <th style={{ ...psTh('right'), padding: '7px 8px' }}>K / D / A</th>
-            <th style={{ ...psTh('right'), padding: '7px 8px' }}>킬뎃</th>
-            <th style={{ ...psTh('right'), padding: '7px 8px' }}>헤드샷</th>
-            <th style={{ ...psTh('right'), padding: '7px 12px' }}>데미지</th>
-          </tr>
-        </thead>
-        <tbody>
-          {players.map((pl, j) => {
-            const pct = Math.round(pl.k / (pl.k + pl.d) * 100);
-            return (
-              <tr key={j} style={{ borderBottom: j < players.length - 1 ? '1px solid #f1f2f4' : 'none', background: pl.isOwner ? `${color}0c` : '#fff' }}>
-                <td style={{ padding: '7px 12px', maxWidth: 150 }}>
-                  <span style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
-                    <RankBadge rank={pl.rank} size={22} />
-                    <span style={{ fontSize: 12.5, fontWeight: pl.isOwner ? 800 : 600, color: pl.isOwner ? color : 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                      {pl.isOwner && <span style={{ fontSize: 9.5, fontWeight: 800, marginRight: 4, color }}>ME</span>}{pl.name}
-                    </span>
-                  </span>
-                </td>
-                <td style={{ padding: '7px 8px', textAlign: 'right', fontFamily: PSCH, fontSize: 12.5 }}>
-                  <span style={{ color: 'var(--ink)' }}>{pl.k}</span>
-                  <span style={{ color: 'var(--t3)', margin: '0 2px' }}>/</span>
-                  <span style={{ color: '#e5484d' }}>{pl.d}</span>
-                  <span style={{ color: 'var(--t3)', margin: '0 2px' }}>/</span>
-                  <span style={{ color: '#48515f' }}>{pl.a}</span>
-                </td>
-                <td style={{ padding: '7px 8px', textAlign: 'right', fontFamily: PSCH, fontSize: 12.5, fontWeight: 600, color: PSPT }}>{pct}%</td>
-                <td style={{ padding: '7px 8px', textAlign: 'right', fontFamily: PSCH, fontSize: 12.5, color: 'var(--t2)' }}>{pl.hs}%</td>
-                <td style={{ padding: '7px 12px', textAlign: 'right', fontFamily: PSCH, fontSize: 12.5, color: 'var(--t2)' }}>{window.SA.fmt(pl.dmg)}</td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-function MatchRow({ m, i, last }) {
-  const [open, setOpen] = React.useState(false);
-  const pct = Math.round(m.k / (m.k + m.d) * 100);
-  const winTeam = m.winSide === 'blue' ? m.teams.blue : m.teams.red;
-  const loseTeam = m.winSide === 'blue' ? m.teams.red : m.teams.blue;
-  return (
-    <div style={{ borderBottom: last ? 'none' : '1px solid #f1f2f4' }}>
-      <div onClick={() => setOpen(!open)} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '11px 16px', cursor: 'pointer',
-        borderLeft: `3px solid ${m.win ? PSPT : '#e5484d'}`, background: open ? '#f7f8f9' : 'transparent' }}>
-        <div style={{ width: 40, flexShrink: 0 }}>
-          <span style={{ fontFamily: PSCH, fontWeight: 800, fontSize: 13, color: m.win ? PSPT : '#e5484d' }}>{m.win ? '승' : '패'}</span>
-        </div>
-        <div style={{ width: 132, minWidth: 0, flexShrink: 0 }}>
-          <div style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.map}</div>
-          <div style={{ fontSize: 11, color: 'var(--t3)' }}>{m.mode}</div>
-        </div>
-        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
-          <KdaChip k={m.k} d={m.d} a={m.a} />
-          <span style={{ fontSize: 11.5, color: 'var(--t3)' }}>킬뎃 {pct}%</span>
-        </div>
-        <div style={{ textAlign: 'right', flexShrink: 0, display: 'flex', alignItems: 'center', gap: 10 }}>
-          <span style={{ fontSize: 11, color: 'var(--t3)' }}>{m.ago}</span>
-          <Icon name="chevR" size={15} stroke="var(--t3)" style={{ transform: open ? 'rotate(90deg)' : 'none', transition: 'transform .15s' }} />
-        </div>
-      </div>
-      {open && (
-        <div style={{ padding: '14px 16px 16px', background: '#f7f8f9', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
-          <div style={{ border: '1px solid var(--line)', borderRadius: 6, overflow: 'hidden', background: '#fff' }}>
-            <TeamTable result="승리" color={PSPT} players={winTeam} />
-          </div>
-          <div style={{ border: '1px solid var(--line)', borderRadius: 6, overflow: 'hidden', background: '#fff' }}>
-            <TeamTable result="패배" color="#e5484d" players={loseTeam} />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function MatchHistory({ p }) {
-  const TABS = ['전체', '클랜전', '솔로 랭크전', '파티 랭크전', '클랜 랭크전', '토너먼트'];
-  const [tab, setTab] = React.useState('전체');
-  React.useEffect(() => setTab('전체'), [p.name]);
-  const ms = tab === '전체' ? p.matches : p.matches.filter((m) => m.mode === tab);
-  const w = ms.filter((m) => m.win).length;
-  return (
-    <Panel title="매치 기록" en="MATCHES" right={<span style={psSmall}>{ms.length ? `최근 ${ms.length}전 · ${w}승 ${ms.length - w}패 · 클릭 시 상세` : '클릭 시 상세'}</span>} bodyPad="0">
-      {/* 모드 서브탭 (가로 스크롤) */}
-      <div style={{ display: 'flex', gap: 6, padding: '11px 14px', borderBottom: '1px solid var(--line)', overflowX: 'auto', whiteSpace: 'nowrap' }}>
-        {TABS.map((t) => {
-          const on = tab === t;
-          return (
-            <button key={t} onClick={() => setTab(t)} style={{ flexShrink: 0, padding: '6px 13px', borderRadius: 20, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12,
-              border: `1px solid ${on ? PSPT : 'var(--line2)'}`, background: on ? PSPT : '#fff', color: on ? '#fff' : 'var(--t2)' }}>{t}</button>
-          );
-        })}
-      </div>
-      {ms.map((m, i) => (
-        <MatchRow key={i} m={m} i={i} last={i === ms.length - 1} />
-      ))}
-      {ms.length === 0 && (
-        <div style={{ padding: '26px 0', textAlign: 'center', fontSize: 13, color: 'var(--t3)' }}>해당 모드의 최근 매치가 없어요.</div>
-      )}
-    </Panel>
-  );
-}
-
-// ── 최근 전적 및 동향 ──
-function RecentTrend({ p }) {
-  const recent = p.matches.slice(0, 12);
-  const wins = recent.filter((m) => m.win).length;
-  const losses = recent.length - wins;
-  const wr = Math.round(wins / recent.length * 100);
-  const avgKd = Math.round(recent.reduce((a, m) => a + m.k / (m.k + m.d) * 100, 0) / recent.length);
-  return (
-    <Panel title="최근 전적 및 동향" en="RECENT" bodyPad="14px 16px 16px">
-      <div style={{ display: 'flex', gap: 18, marginBottom: 14, justifyContent: 'center' }}>
-        <WinRing wr={wr} size={72} sw={7} label="최근 승률" />
-        <WinRing wr={avgKd} size={72} sw={7} label="평균 킬뎃" color={PSPT} />
-      </div>
-      <div style={{ textAlign: 'center', fontSize: 13, color: 'var(--t2)', marginBottom: 12 }}>
-        최근 {recent.length}전 <b style={{ color: PSPT }}>{wins}승</b> <b style={{ color: '#e5484d' }}>{losses}패</b>
-      </div>
-      <div style={{ display: 'flex', gap: 4 }}>
-        {recent.slice().reverse().map((m, i) => (
-          <span key={i} style={{ flex: 1, height: 20, borderRadius: 3, display: 'grid', placeItems: 'center', fontSize: 9.5, fontWeight: 800, fontFamily: PSCH,
-            background: m.win ? 'rgba(72,81,95,.9)' : 'rgba(229,72,77,.9)', color: '#fff' }}>{m.win ? '승' : '패'}</span>
-        ))}
-      </div>
-      <div style={{ fontSize: 10.5, color: 'var(--t3)', marginTop: 7 }}>← 최신 경기 흐름</div>
-    </Panel>
-  );
-}
-
-// ── 자주 함께한 유저 ──
-function Companions({ p, onPick }) {
-  const SA = window.SA;
-  return (
-    <Panel title="자주 함께한 유저" en="WITH" bodyPad="6px 8px 8px">
-      {SA.friends.slice(0, 4).map((f) => (
-        <button key={f.name} onClick={() => onPick(f)} style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', border: 'none', background: 'transparent', padding: '8px 8px', borderRadius: 5, cursor: 'pointer', textAlign: 'left', fontFamily: "'Pretendard',sans-serif" }}
-          onMouseEnter={(e) => e.currentTarget.style.background = '#f5f6f8'}
-          onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
-          <RankBadge rank={f.rank} size={30} />
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-              <span style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 600, flexShrink: 0, maxWidth: '58%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
-              {f.clan && <span style={{ fontSize: 10.5, color: 'var(--t3)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.clan}</span>}
-            </div>
-            <div style={{ fontSize: 11, color: 'var(--t3)', marginTop: 1 }}>
-              함께 {f.together.games}전<span style={{ color: 'var(--line2)', margin: '0 5px' }}>·</span><b style={{ fontFamily: PSCH, color: PSPT }}>{f.together.w}승</b> <b style={{ fontFamily: PSCH, color: '#e5484d' }}>{f.together.l}패</b>
-              <span style={{ color: 'var(--line2)', margin: '0 5px' }}>·</span>
-              <span style={{ fontFamily: PSCH, fontWeight: 600, color: wrColor(Math.round(f.together.w / f.together.games * 100)) }}>승률 {Math.round(f.together.w / f.together.games * 100)}%</span>
-            </div>
-          </div>
-          <Icon name="chevR" size={15} stroke="var(--t3)" />
-        </button>
-      ))}
-    </Panel>
-  );
-}
-
-// ── 모드별 전적 ──
-function ModeRecords({ p }) {
-  return (
-    <Panel title="모드별 전적" en="BY MODE" bodyPad="0">
-      <div style={{ overflowX: 'auto' }}>
-        <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 560 }}>
-          <thead>
-            <tr style={{ borderBottom: '1px solid var(--line2)', background: '#f7f8f9' }}>
-              <th style={psTh('left')}>모드</th>
-              <th style={psTh('right')}>매치</th><th style={psTh('right')}>전적</th>
-              <th style={psTh('right')}>승률</th><th style={psTh('right')}>킬뎃</th>
-            </tr>
-          </thead>
-          <tbody>
-            {p.modeRecords.map((m, i) => (
-              <tr key={m.name + i} style={{ borderBottom: i < p.modeRecords.length - 1 ? '1px solid #eaecef' : 'none', background: i % 2 ? '#fff' : '#fbfbfc' }}>
-                <td style={{ ...psTd, fontWeight: 700, color: 'var(--ink)' }}>{m.name}</td>
-                <td style={{ ...psTd, textAlign: 'right', fontFamily: PSCH }}>{m.matches}</td>
-                <td style={{ ...psTd, textAlign: 'right', color: 'var(--t2)' }}>{recStr(m)}</td>
-                <td style={{ ...psTd, textAlign: 'right' }}><WrCell wr={m.wr} /></td>
-                <td style={{ ...psTd, textAlign: 'right', fontFamily: PSCH, fontWeight: 600 }}>{m.kd}%</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </Panel>
-  );
-}
-
-Object.assign(window, { ProfileSummary, RankedSeasons, ClanRecords, MapRecords, ModeRecords, MatchHistory, RecentTrend, Companions, TrendChart });
diff --git a/surinz-source/sa-profile.jsx b/surinz-source/sa-profile.jsx
deleted file mode 100644
index 9c85bf4..0000000
--- a/surinz-source/sa-profile.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-/* eslint-disable */
-// ─────────────────────────────────────────────────────────────
-// searchgg · 전적검색(프로필) 화면 — 메인 헤더 유지 + 검색 서브헤더
-// 섹션 컴포넌트는 sa-profile-sections.jsx (window 전역)
-// ─────────────────────────────────────────────────────────────
-
-function ProfileScreen({ player, onClose, onPick, onLogin, onClan, onCommunity }) {
-  const SA = window.SA;
-  const p = player;
-  const [tab, setTab] = React.useState('전적');
-  const tabs = ['전적', '통계'];
-  return (
-    <div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'var(--bg2)', display: 'flex', flexDirection: 'column', animation: 'sgFade .22s ease' }}>
-      <Nav active="전적검색" onLogin={onLogin} onClan={() => onClan && onClan(p.clan || '불곰부대')} onCommunity={onCommunity} />
-      {/* 검색 서브헤더 */}
-      <div style={{ flexShrink: 0, background: '#fff', borderBottom: '1px solid var(--line2)' }}>
-        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '11px 28px', display: 'flex', alignItems: 'center', gap: 14 }}>
-          <div style={{ flex: 1, maxWidth: 520 }}>
-            <SearchBar onPick={onPick} placeholder="다른 유저의 닉네임을 검색하세요" />
-          </div>
-        </div>
-      </div>
-
-      {/* 본문 */}
-      <div style={{ flex: 1, overflowY: 'auto' }}>
-        <div style={{ maxWidth: 1180, width: '100%', margin: '0 auto', padding: '24px 28px 44px' }}>
-          <ProfileSummary p={p} />
-
-          {/* 서브탭 바 */}
-          <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--line2)', marginBottom: 18 }}>
-            {tabs.map((t) => {
-              const on = tab === t;
-              return (
-                <button key={t} onClick={() => setTab(t)} style={{ position: 'relative', padding: '12px 22px', border: 'none', background: 'transparent', cursor: 'pointer',
-                  fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 14.5, color: on ? 'var(--ink)' : 'var(--t3)' }}>
-                  {t}
-                  {on && <span style={{ position: 'absolute', left: 12, right: 12, bottom: -1, height: 3, background: p.rank.color, borderRadius: 2 }} />}
-                </button>
-              );
-            })}
-          </div>
-
-          {tab === '전적' && (
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 18, alignItems: 'start' }}>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 18, minWidth: 0 }}>
-                <RankedSeasons p={p} />
-                <ClanRecords p={p} />
-                <MatchHistory p={p} />
-              </div>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
-                <RecentTrend p={p} />
-                <Companions p={p} onPick={onPick} />
-              </div>
-            </div>
-          )}
-
-          {tab === '통계' && (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
-              <TrendChart p={p} />
-              <ModeRecords p={p} />
-              <MapRecords p={p} />
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-Object.assign(window, { ProfileScreen });
diff --git a/surinz-source/sa-shared.jsx b/surinz-source/sa-shared.jsx
deleted file mode 100644
index 4a0cb95..0000000
--- a/surinz-source/sa-shared.jsx
+++ /dev/null
@@ -1,338 +0,0 @@
-/* eslint-disable */
-// ─────────────────────────────────────────────────────────────
-// searchgg · 공용 컴포넌트 (라이트 테마 · 흰 배경 / 검정 포인트)
-// ─────────────────────────────────────────────────────────────
-const { useState, useRef, useEffect } = React;
-
-// ── 아이콘 ──
-const PATHS = {
-  search: 'M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm6 12 4 4',
-  chevR: 'M9 5l7 7-7 7',
-  chevL: 'M15 5l-7 7 7 7',
-  user: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 20a8 8 0 0 1 16 0',
-  users: 'M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM2.5 19a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 13a6.5 6.5 0 0 1 3.5 6',
-  bolt: 'M13 2L4 14h6l-1 8 9-12h-6z',
-  refresh: 'M20 11a8 8 0 1 0-.7 4.5M20 5v6h-6',
-  clock: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 7v5l3.5 2',
-  heart: 'M12 20s-7-4.3-7-9.5A3.5 3.5 0 0 1 12 7a3.5 3.5 0 0 1 7 3.5C19 15.7 12 20 12 20z',
-  gun: 'M3 8h15l-1 4h-3l-1 3h-3l-1-3H5a2 2 0 0 1-2-2V8zM8 12v3',
-  shieldcheck: 'M12 3l7 3v5c0 4.5-3 7.3-7 8.5-4-1.2-7-4-7-8.5V6l7-3zM9 11.5l2 2 4-4',
-  flame: 'M12 2c1 3-1.5 4.2-1.5 6.5 0 1.4 1 2.3 1 2.3s.6-1 .6-2.2c1.6 1 3.4 3 3.4 5.6a5.5 5.5 0 1 1-11 0c0-2.3 1.4-4 2.2-5 .3 1 .9 1.6.9 1.6s-.2-2.3 1.2-4.2C10.4 4.6 12 4 12 2z',
-};
-function Icon({ name, size = 18, stroke = 'currentColor', fill = 'none', sw = 1.7, style }) {
-  const filled = ['flame', 'bolt', 'heart'].includes(name);
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? stroke : fill}
-      stroke={filled ? 'none' : stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
-      style={{ flexShrink: 0, ...style }}>
-      <path d={PATHS[name]} />
-    </svg>
-  );
-}
-
-// ── 로고 ──
-function Logo({ size = 24, light = false }) {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 8, userSelect: 'none' }}>
-      <svg width={size * 1.16} height={size * 1.16} viewBox="0 0 28 28" fill="none">
-        <circle cx="14" cy="14" r="9" fill="none" stroke="#48515f" strokeWidth="1.8" />
-        <path d="M14 3.5v4M14 20.5v4M3.5 14h4M20.5 14h4" stroke="#48515f" strokeWidth="1.8" strokeLinecap="round" />
-        <circle cx="14" cy="14" r="2.1" fill="#48515f" />
-      </svg>
-      <div style={{ fontFamily: "'Chakra Petch', sans-serif", fontWeight: 700, fontSize: size, letterSpacing: '-0.5px', lineHeight: 1 }}>
-        <span style={{ color: light ? '#fff' : '#15171c' }}>search</span><span style={{ color: '#48515f' }}>.gg</span>
-      </div>
-    </div>
-  );
-}
-
-// ── 계급(랭크) 뱃지 ──
-function RankBadge({ rank, size = 44, showName = false }) {
-  if (!rank) return null;
-  const c = rank.color;
-  const pip = (i) => {
-    const cx = size / 2, base = size * 0.66, gap = size * 0.13;
-    const total = rank.pips, x = cx + (i - (total - 1) / 2) * gap;
-    if (rank.shape === 'star') return <path key={i} d="M0 -2.1 L0.62 -0.65 L2.1 -0.5 L1 0.5 L1.35 2 L0 1.2 L-1.35 2 L-1 0.5 L-2.1 -0.5 L-0.62 -0.65 Z" transform={`translate(${x} ${base}) scale(${size * 0.06})`} fill={c} />;
-    if (rank.shape === 'flower') return <circle key={i} cx={x} cy={base} r={size * 0.05} fill={c} />;
-    if (rank.shape === 'dia') return <rect key={i} x={x - size * 0.045} y={base - size * 0.045} width={size * 0.09} height={size * 0.09} fill={c} transform={`rotate(45 ${x} ${base})`} />;
-    if (rank.shape === 'chev') return <path key={i} d={`M ${x - size * 0.07} ${base + size * 0.05} L ${x} ${base - size * 0.03} L ${x + size * 0.07} ${base + size * 0.05}`} stroke={c} strokeWidth={size * 0.035} fill="none" />;
-    return <rect key={i} x={x - size * 0.05} y={base - size * 0.025} width={size * 0.1} height={size * 0.05} rx={size * 0.01} fill={c} />;
-  };
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: showName ? 8 : 0 }}>
-      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ flexShrink: 0 }}>
-        <path d={`M${size / 2} ${size * 0.07} L${size * 0.86} ${size * 0.24} V${size * 0.52} c0 ${size * 0.22}-${size * 0.16} ${size * 0.32}-${size * 0.36} ${size * 0.4} C${size * 0.3} ${size * 0.84}-${0} 0 ${size * 0.14} ${size * 0.52} V${size * 0.24} Z`}
-          fill={`${c}16`} stroke={c} strokeWidth="1.4" strokeLinejoin="round" />
-        <text x={size / 2} y={size * 0.43} textAnchor="middle" fontFamily="'Pretendard',sans-serif" fontWeight="800" fontSize={size * 0.26} fill={c}>{rank.name}</text>
-        {Array.from({ length: rank.pips }).map((_, i) => pip(i))}
-      </svg>
-      {showName && (
-        <div style={{ lineHeight: 1.1 }}>
-          <div style={{ fontFamily: "'Chakra Petch',sans-serif", fontWeight: 600, fontSize: 13, color: c }}>{rank.name}</div>
-          <div style={{ fontSize: 10.5, color: 'var(--t3)' }}>{rank.group}</div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function wrColor(wr) { return wr >= 60 ? '#48515f' : wr >= 50 ? '#48515f' : '#e5484d'; }
-
-// ── 승률 링 ──
-function WinRing({ wr, size = 64, sw = 6, label = '승률', color }) {
-  const r = (size - sw) / 2, c = 2 * Math.PI * r;
-  const col = color || wrColor(wr);
-  return (
-    <div style={{ position: 'relative', width: size, height: size }}>
-      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
-        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="#eceef1" strokeWidth={sw} />
-        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={col} strokeWidth={sw} strokeLinecap="round"
-          strokeDasharray={c} strokeDashoffset={c * (1 - wr / 100)} />
-      </svg>
-      <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', textAlign: 'center', lineHeight: 1 }}>
-        <div>
-          <div style={{ fontFamily: "'Chakra Petch',sans-serif", fontWeight: 700, fontSize: size * 0.28, color: col }}>{wr}<span style={{ fontSize: size * 0.16 }}>%</span></div>
-          <div style={{ fontSize: size * 0.13, color: 'var(--t3)', marginTop: 2 }}>{label}</div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── KDA 칩 ──
-function KdaChip({ k, d, a, big }) {
-  return (
-    <span style={{ fontFamily: "'Chakra Petch',sans-serif", fontWeight: 600, fontSize: big ? 16 : 13, letterSpacing: '.3px' }}>
-      <span style={{ color: 'var(--ink)' }}>{k}</span>
-      <span style={{ color: 'var(--t3)', margin: '0 3px' }}>/</span>
-      <span style={{ color: '#e5484d' }}>{d}</span>
-      <span style={{ color: 'var(--t3)', margin: '0 3px' }}>/</span>
-      <span style={{ color: '#48515f' }}>{a}</span>
-    </span>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────
-// SearchBar — 흰 필드 + 검정 버튼. 라이브 추천 → onPick(player)
-// ─────────────────────────────────────────────────────────────
-function SearchBar({ onPick, big, placeholder = '닉네임으로 전적을 검색하세요' }) {
-  const SA = window.SA;
-  const [q, setQ] = useState('');
-  const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  useEffect(() => {
-    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
-    document.addEventListener('pointerdown', h, true);
-    return () => document.removeEventListener('pointerdown', h, true);
-  }, []);
-  const matches = q.trim()
-    ? SA.allPlayers.filter((p) => p.name.toLowerCase().includes(q.trim().toLowerCase())).slice(0, 6)
-    : [];
-  const recents = SA.recentSearches.map((n) => SA.allPlayers.find((p) => p.name === n)).filter(Boolean);
-  const submit = () => {
-    const found = matches[0] || SA.allPlayers.find((p) => p.name === q.trim());
-    if (found) { onPick(found); setQ(''); setOpen(false); }
-    else if (q.trim()) { onPick(SA.allPlayers[1]); setQ(''); setOpen(false); }
-  };
-  const h = big ? 58 : 44;
-  return (
-    <div ref={ref} style={{ position: 'relative', width: '100%' }}>
-      <div style={{ display: 'flex', alignItems: 'center', height: h, background: '#fff',
-        border: `1.5px solid ${open ? '#48515f' : 'var(--line2)'}`, borderRadius: 4,
-        boxShadow: open ? '0 6px 22px rgba(0,0,0,.10)' : '0 1px 2px rgba(0,0,0,.04)',
-        transition: 'border-color .14s, box-shadow .14s', overflow: 'hidden' }}>
-        <div style={{ paddingLeft: big ? 18 : 13, color: open ? '#48515f' : 'var(--t3)', display: 'flex' }}>
-          <Icon name="search" size={big ? 22 : 18} sw={2} />
-        </div>
-        <input value={q} onChange={(e) => { setQ(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)}
-          onKeyDown={(e) => e.key === 'Enter' && submit()} placeholder={placeholder}
-          style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', color: '#15171c',
-            fontFamily: "'Pretendard',sans-serif", fontSize: big ? 17 : 14.5, padding: `0 ${big ? 16 : 11}px`, fontWeight: 500 }} />
-        <button onClick={submit} style={{ height: '100%', border: 'none', cursor: 'pointer', color: '#fff',
-          background: '#15171c', fontFamily: "'Chakra Petch',sans-serif", fontWeight: 700, fontSize: big ? 15 : 13,
-          padding: `0 ${big ? 26 : 17}px`, letterSpacing: '.5px' }}>검색</button>
-      </div>
-      {open && (
-        <div style={{ position: 'absolute', top: h + 8, left: 0, right: 0, background: '#fff',
-          border: '1px solid var(--line)', borderRadius: 4, boxShadow: '0 16px 40px rgba(20,22,28,.12)',
-          padding: 7, zIndex: 40, overflow: 'hidden', textAlign: 'left' }}>
-          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--t3)', padding: '6px 10px 8px', letterSpacing: '.3px' }}>
-            {q.trim() ? `"${q}" 검색 결과` : '최근 검색한 유저'}
-          </div>
-          {(q.trim() ? matches : recents).map((p) => (
-            <button key={p.name} onClick={() => { onPick(p); setQ(''); setOpen(false); }}
-              style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', border: 'none', background: 'transparent',
-                padding: '8px 10px', borderRadius: 4, cursor: 'pointer', textAlign: 'left', transition: 'background .12s' }}
-              onMouseEnter={(e) => e.currentTarget.style.background = '#f5f6f8'}
-              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
-              <RankBadge rank={p.rank} size={32} />
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
-                  <span style={{ color: '#15171c', fontWeight: 600, fontSize: 14, flexShrink: 0, maxWidth: '62%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</span>
-                  {p.clan && <span style={{ fontSize: 11, color: 'var(--t2)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.clan}</span>}
-                </div>
-                <div style={{ fontSize: 11.5, color: 'var(--t3)' }}>{p.rank.name} · Lv.{p.level} · 승률 {p.wr}%</div>
-              </div>
-              <Icon name="chevR" size={15} stroke="var(--t3)" />
-            </button>
-          ))}
-          {q.trim() && matches.length === 0 && (
-            <div style={{ padding: '14px 10px', color: 'var(--t3)', fontSize: 13 }}>일치하는 유저가 없어요. 닉네임을 확인해 주세요.</div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── 최근검색 칩 ──
-function RecentChips({ onPick, onDark = false }) {
-  const SA = window.SA;
-  return (
-    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
-      <span style={{ fontSize: 12, color: onDark ? 'rgba(255,255,255,.55)' : 'var(--t3)', display: 'flex', alignItems: 'center', gap: 5 }}>
-        <Icon name="clock" size={13} /> 최근
-      </span>
-      {SA.recentSearches.slice(0, 6).map((n) => {
-        const p = SA.allPlayers.find((x) => x.name === n);
-        return (
-          <button key={n} onClick={() => p && onPick(p)}
-            style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 12px 5px 9px', borderRadius: 4,
-              background: onDark ? 'rgba(255,255,255,.08)' : '#fff', border: `1px solid ${onDark ? 'rgba(255,255,255,.16)' : 'var(--line2)'}`, cursor: 'pointer',
-              color: onDark ? '#e7eaee' : '#3a4049', fontSize: 12.5, fontWeight: 500, transition: 'all .12s', fontFamily: "'Pretendard',sans-serif" }}
-            onMouseEnter={(e) => { e.currentTarget.style.borderColor = onDark ? '#fff' : '#15171c'; }}
-            onMouseLeave={(e) => { e.currentTarget.style.borderColor = onDark ? 'rgba(255,255,255,.16)' : 'var(--line2)'; }}>
-            {n}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────
-// 문의 위젯 — 우하단 플로팅 버튼 + 문의 모달
-// 푸터 '문의하기' 링크는 window 'sa-open-feedback' 이벤트로 연동
-// ─────────────────────────────────────────────────────────────
-function FeedbackWidget() {
-  const PT = '#48515f';
-  const [open, setOpen] = React.useState(false);
-  const [type, setType] = React.useState('불편 사항');
-  const [text, setText] = React.useState('');
-  const [sent, setSent] = React.useState(false);
-  const [files, setFiles] = React.useState([]);
-  const fileRef = React.useRef(null);
-  const addFiles = (list) => {
-    const arr = Array.from(list || []);
-    if (!arr.length) return;
-    setFiles((f) => [...f, ...arr].slice(0, 3));
-  };
-  const fmtSize = (n) => n > 1048576 ? (n / 1048576).toFixed(1) + 'MB' : Math.max(1, Math.round(n / 1024)) + 'KB';
-  React.useEffect(() => {
-    const fn = () => { setOpen(true); setSent(false); };
-    window.addEventListener('sa-open-feedback', fn);
-    return () => window.removeEventListener('sa-open-feedback', fn);
-  }, []);
-  const submit = () => {
-    if (!text.trim()) return;
-    setSent(true);
-    setTimeout(() => { setOpen(false); setText(''); setType('불편 사항'); setSent(false); setFiles([]); }, 1400);
-  };
-  return (
-    <React.Fragment>
-      {/* 플로팅 버튼 */}
-      <button onClick={() => { setOpen(true); setSent(false); }} title="문의하기"
-        style={{ position: 'fixed', right: 22, bottom: 22, zIndex: 290, display: 'flex', alignItems: 'center', gap: 7, padding: '12px 18px', borderRadius: 26, border: 'none', cursor: 'pointer',
-          background: '#20242b', color: '#fff', fontWeight: 700, fontSize: 13, fontFamily: "'Pretendard',sans-serif", boxShadow: '0 6px 22px rgba(0,0,0,.25)' }}>
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 8.6 8.6 0 0 1-3.8-.9L3 20l1-4.9a8.4 8.4 0 1 1 17-3.6z" />
-        </svg>
-        문의
-      </button>
-
-      {/* 문의 모달 */}
-      {open && (
-        <div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 300, background: 'rgba(20,22,26,.55)', backdropFilter: 'blur(2px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, animation: 'sgFade .18s ease' }}>
-          <div onClick={(e) => e.stopPropagation()} style={{ width: 430, maxWidth: '100%', background: '#fff', borderRadius: 12, overflow: 'hidden', boxShadow: '0 24px 70px rgba(0,0,0,.3)', fontFamily: "'Pretendard',sans-serif" }}>
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px', borderBottom: '1px solid var(--line)' }}>
-              <div>
-                <div style={{ fontSize: 15, fontWeight: 800, color: 'var(--ink)' }}>문의하기</div>
-                <div style={{ fontSize: 11.5, color: 'var(--t3)', marginTop: 2 }}>불편한 점이나 궁금한 점을 알려주세요.</div>
-              </div>
-              <button onClick={() => setOpen(false)} style={{ width: 28, height: 28, borderRadius: 6, border: 'none', background: '#eef0f2', color: '#5b626c', cursor: 'pointer', fontSize: 15 }}>×</button>
-            </div>
-
-            {sent ? (
-              <div style={{ padding: '38px 18px', textAlign: 'center' }}>
-                <div style={{ width: 44, height: 44, borderRadius: '50%', background: `${PT}14`, display: 'grid', placeItems: 'center', margin: '0 auto 12px' }}>
-                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={PT} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" /></svg>
-                </div>
-                <div style={{ fontSize: 14.5, fontWeight: 800, color: 'var(--ink)' }}>문의가 접수되었어요</div>
-                <div style={{ fontSize: 12.5, color: 'var(--t2)', marginTop: 4 }}>답변은 마이페이지 > 문의 내역에서 확인할 수 있어요.</div>
-              </div>
-            ) : (
-              <div style={{ padding: '16px 18px' }}>
-                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--t2)', marginBottom: 7 }}>문의 유형</div>
-                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
-                  {['불편 사항', '버그 제보', '기능 제안', '신고', '기타 문의'].map((v) => {
-                    const on = type === v;
-                    return (
-                      <button key={v} onClick={() => setType(v)} style={{ padding: '6px 12px', borderRadius: 5, cursor: 'pointer', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 12,
-                        border: `1px solid ${on ? PT : 'var(--line2)'}`, background: on ? PT : '#fff', color: on ? '#fff' : 'var(--t2)' }}>{v}</button>
-                    );
-                  })}
-                </div>
-                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--t2)', marginBottom: 7 }}>내용</div>
-                <textarea value={text} onChange={(e) => setText(e.target.value)} rows={5} placeholder="어떤 점이 불편했는지, 어떤 기능이 궁금한지 자유롭게 적어주세요."
-                  style={{ width: '100%', resize: 'vertical', padding: '10px 12px', border: '1px solid var(--line2)', borderRadius: 7, fontSize: 13, lineHeight: 1.6, fontFamily: "'Pretendard',sans-serif", color: '#3a4049', outline: 'none', boxSizing: 'border-box', marginBottom: 6 }} />
-                <div style={{ fontSize: 11.5, color: 'var(--t3)', marginBottom: 14 }}>답변은 로그인한 계정의 <b style={{ color: 'var(--t2)' }}>마이페이지 > 문의 내역</b>으로 드려요.</div>
-
-                {/* 파일 첨부 */}
-                <input ref={fileRef} type="file" multiple accept="image/*,video/*,.log,.txt" style={{ display: 'none' }} onChange={(e) => { addFiles(e.target.files); e.target.value = ''; }} />
-                <div style={{ marginBottom: 14 }}>
-                  <button onClick={() => fileRef.current && fileRef.current.click()} disabled={files.length >= 3}
-                    style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 13px', borderRadius: 7, cursor: files.length >= 3 ? 'not-allowed' : 'pointer', background: '#fff', border: '1px dashed var(--line2)', color: files.length >= 3 ? 'var(--t3)' : 'var(--t2)', fontWeight: 700, fontSize: 12, fontFamily: "'Pretendard',sans-serif" }}>
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21.4 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
-                    파일 첨부 <span style={{ fontWeight: 600, color: 'var(--t3)' }}>({files.length}/3)</span>
-                  </button>
-                  {files.length > 0 && (
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: 5, marginTop: 8 }}>
-                      {files.map((f, i) => (
-                        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: '#f7f8f9', border: '1px solid var(--line)', borderRadius: 6 }}>
-                          <span style={{ flex: 1, minWidth: 0, fontSize: 12, fontWeight: 600, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
-                          <span style={{ fontSize: 10.5, color: 'var(--t3)', flexShrink: 0 }}>{fmtSize(f.size)}</span>
-                          <button onClick={() => setFiles(files.filter((_, j) => j !== i))} style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--t3)', fontSize: 14, lineHeight: 1, padding: 0, flexShrink: 0 }}>×</button>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-                <button onClick={submit} disabled={!text.trim()} style={{ width: '100%', padding: '12px 0', borderRadius: 7, border: 'none', background: text.trim() ? PT : '#c4c8ce', color: '#fff', fontWeight: 700, fontSize: 14, cursor: text.trim() ? 'pointer' : 'not-allowed', fontFamily: "'Pretendard',sans-serif" }}>보내기</button>
-
-                {/* 비회원 문의 채널 */}
-                <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '16px 0 11px' }}>
-                  <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
-                  <span style={{ fontSize: 11, color: 'var(--t3)', fontWeight: 600 }}>계정 없이 이용 중이신가요?</span>
-                  <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
-                </div>
-                <div style={{ display: 'flex', gap: 8 }}>
-                  <button style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, padding: '10px 0', borderRadius: 7, border: 'none', cursor: 'pointer', background: '#5865F2', color: '#fff', fontWeight: 700, fontSize: 12.5, fontFamily: "'Pretendard',sans-serif" }}>
-                    <svg width="15" height="15" viewBox="0 0 24 24" fill="#fff"><path d="M19.6 5.6A17.3 17.3 0 0 0 15.4 4l-.5 1a16 16 0 0 0-5.8 0l-.5-1a17.3 17.3 0 0 0-4.2 1.6C1.7 9.6 1 13.5 1.3 17.3A17.5 17.5 0 0 0 6.6 20l1.1-1.8a11 11 0 0 1-1.7-.9l.4-.3a12.4 12.4 0 0 0 11.2 0l.4.3c-.5.4-1.1.7-1.7.9L17.4 20a17.4 17.4 0 0 0 5.3-2.7c.4-4.4-.7-8.2-3.1-11.7zM8.7 14.9c-1 0-1.9-1-1.9-2.1s.8-2.1 1.9-2.1 1.9 1 1.9 2.1-.9 2.1-1.9 2.1zm6.6 0c-1 0-1.9-1-1.9-2.1s.9-2.1 1.9-2.1 1.9 1 1.9 2.1-.8 2.1-1.9 2.1z"/></svg>
-                    디스코드 문의
-                  </button>
-                  <button style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, padding: '10px 0', borderRadius: 7, border: 'none', cursor: 'pointer', background: '#FEE500', color: '#191600', fontWeight: 700, fontSize: 12.5, fontFamily: "'Pretendard',sans-serif" }}>
-                    <svg width="15" height="15" viewBox="0 0 24 24" fill="#191600"><path d="M12 3C6.5 3 2 6.5 2 10.8c0 2.7 1.8 5.1 4.5 6.5l-1 3.8c-.1.4.3.7.6.5l4.4-2.9c.5.1 1 .1 1.5.1 5.5 0 10-3.5 10-7.9S17.5 3 12 3z"/></svg>
-                    카카오톡 문의
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </React.Fragment>
-  );
-}
-
-Object.assign(window, { Icon, Logo, RankBadge, WinRing, KdaChip, SearchBar, RecentChips, wrColor, FeedbackWidget });
diff --git a/surinz-source/searchgg 디자인 토큰.html b/surinz-source/searchgg 디자인 토큰.html
deleted file mode 100644
index 378c340..0000000
--- a/surinz-source/searchgg 디자인 토큰.html	
+++ /dev/null
@@ -1,311 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>searchgg · 디자인 토큰</title>
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&display=swap" rel="stylesheet" />
-<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
-<style>
-  :root {
-    /* ── 표면 / 배경 ── */
-    --bg: #ffffff;
-    --bg2: #eef0f2;
-    --surf: #ffffff;
-    --surf2: #f1f3f5;
-    --head: #f1f3f5;       /* 패널 헤더바 */
-    /* ── 경계선 ── */
-    --line: #e4e6e9;
-    --line2: #d2d6db;
-    /* ── 텍스트 ── */
-    --ink: #20242b;        /* 본문 강조 */
-    --t2: #5b626c;         /* 보조 */
-    --t3: #949aa3;         /* 약한 / 캡션 */
-    --t-table: #33373d;    /* 표 셀 */
-    --placeholder: #9aa1ab;
-    /* ── 브랜드 / 시맨틱 ── */
-    --point: #48515f;      /* 메인 포인트(올리브/슬레이트) */
-    --point-soft: rgba(72,81,95,.12);
-    --positive: #48515f;   /* 승 / 좋은 승률 */
-    --negative: #e5484d;   /* 패 / 데스 / 마감임박 */
-    --up: #16a34a;         /* 상승 추세 */
-    --accent-blue: #2f6fed;/* 그래프 승률선 / 블루 엠블럼 */
-    --gold: #c0901a;       /* 영관 계급 / 챔피언 */
-    /* ── 외부 채널 ── */
-    --discord: #5865F2;
-    --kakao: #FEE500;
-    --kakao-ink: #191600;
-    --chzzk: #00b6a0;
-    --soop: #0064ff;
-    --youtube: #e62117;
-    /* ── 모양 ── */
-    --r-xs: 4px; --r-sm: 5px; --r-md: 7px; --r-lg: 8px; --r-xl: 14px; --r-pill: 20px;
-    /* ── 그림자 ── */
-    --sh-card: 0 1px 2px rgba(0,0,0,.04);
-    --sh-hover: 0 4px 14px rgba(0,0,0,.10);
-    --sh-pop: 0 6px 22px rgba(0,0,0,.10);
-    --sh-modal: 0 24px 70px rgba(0,0,0,.34);
-  }
-  * { box-sizing: border-box; }
-  html, body { margin: 0; padding: 0; background: var(--bg2); }
-  body { font-family: 'Pretendard', sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
-  .num { font-family: 'Chakra Petch', sans-serif; }
-  ::-webkit-scrollbar { width: 0; height: 0; }
-
-  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px 80px; }
-
-  /* 헤더 */
-  header.top { background: linear-gradient(135deg,#23262b,#2e333b); color: #fff; }
-  header.top .inner { max-width: 1080px; margin: 0 auto; padding: 40px 28px 34px; }
-  .kicker { font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: rgba(255,255,255,.55); }
-  header.top h1 { margin: 10px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -.6px; }
-  header.top p { margin: 9px 0 0; font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.6; }
-  .brand { font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: -.5px; }
-
-  section { margin-top: 40px; }
-  .sec-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 2px solid var(--ink); }
-  .sec-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
-  .sec-head .en { font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--t3); }
-  .sec-note { font-size: 13px; color: var(--t2); margin: -8px 0 18px; line-height: 1.6; }
-
-  /* 스와치 그리드 */
-  .grid { display: grid; gap: 14px; }
-  .g4 { grid-template-columns: repeat(4, 1fr); }
-  .g3 { grid-template-columns: repeat(3, 1fr); }
-  .g2 { grid-template-columns: repeat(2, 1fr); }
-
-  .swatch { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); }
-  .swatch .chip { height: 76px; }
-  .swatch .meta { padding: 10px 12px; }
-  .swatch .nm { font-size: 13px; font-weight: 700; }
-  .swatch .var { font-family: 'Chakra Petch', sans-serif; font-size: 11.5px; color: var(--t2); margin-top: 2px; }
-  .swatch .hex { font-family: 'Chakra Petch', sans-serif; font-size: 11.5px; color: var(--t3); text-transform: uppercase; margin-top: 1px; }
-
-  /* 램프 */
-  .ramp { display: flex; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-card); }
-  .ramp > div { flex: 1; height: 64px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-family: 'Chakra Petch', sans-serif; font-size: 10px; color: rgba(255,255,255,.92); font-weight: 600; }
-
-  /* 타이포 표본 */
-  .type-row { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
-  .type-row:last-child { border-bottom: none; }
-  .type-row .label { width: 150px; flex-shrink: 0; font-size: 12px; color: var(--t3); font-weight: 600; }
-  .type-row .label b { display: block; color: var(--t2); font-size: 12.5px; font-weight: 700; }
-  .type-row .spec { width: 130px; flex-shrink: 0; font-family: 'Chakra Petch', sans-serif; font-size: 12px; color: var(--t3); }
-
-  /* 토큰 표 */
-  table.tok { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); }
-  table.tok th, table.tok td { text-align: left; padding: 11px 16px; font-size: 13px; border-bottom: 1px solid var(--line); }
-  table.tok thead th { background: var(--surf2); font-size: 11px; font-weight: 700; color: var(--t3); letter-spacing: .3px; }
-  table.tok tbody tr:last-child td { border-bottom: none; }
-  table.tok td.k { font-family: 'Chakra Petch', sans-serif; font-weight: 700; color: var(--ink); width: 220px; }
-  table.tok td.v { font-family: 'Chakra Petch', sans-serif; color: var(--t2); }
-  .demo-box { display: inline-flex; align-items: center; gap: 10px; }
-
-  /* 컴포넌트 미니 */
-  .comp-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-card); }
-  .btn { font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 13px; border-radius: var(--r-md); padding: 10px 16px; cursor: default; border: 1px solid var(--line2); }
-  .btn.primary { background: var(--point); color: #fff; border: none; }
-  .btn.ghost { background: #fff; color: #3a4049; }
-  .pill { display: inline-block; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; border: 1px solid var(--line2); color: var(--t2); }
-  .pill.on { background: var(--point); color: #fff; border-color: var(--point); }
-  .tag { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; color: var(--point); background: var(--point-soft); }
-  .codeblock { background: #1c1f24; color: #e7e9ec; border-radius: var(--r-lg); padding: 18px 20px; font-family: 'Chakra Petch', monospace; font-size: 12.5px; line-height: 1.7; overflow-x: auto; white-space: pre; }
-</style>
-</head>
-<body>
-<header class="top">
-  <div class="inner">
-    <div class="kicker">SEARCH.GG · DESIGN TOKENS</div>
-    <h1><span class="brand">search<span style="color:#8b94a0">.gg</span></span> 디자인 토큰</h1>
-    <p>서든어택 전적검색 서비스의 색·타이포·간격·컴포넌트 토큰 정의서입니다.<br/>밝은 표면 + 올리브/슬레이트 포인트, 숫자는 Chakra Petch, 본문은 Pretendard를 사용합니다.</p>
-  </div>
-</header>
-
-<div class="wrap">
-
-  <!-- 표면 / 텍스트 -->
-  <section>
-    <div class="sec-head"><h2>표면 & 텍스트</h2><span class="en">SURFACE / TEXT</span></div>
-    <div class="grid g4" id="surface"></div>
-  </section>
-
-  <!-- 브랜드 / 시맨틱 -->
-  <section>
-    <div class="sec-head"><h2>브랜드 & 시맨틱</h2><span class="en">BRAND / SEMANTIC</span></div>
-    <p class="sec-note">포인트 컬러는 올리브-슬레이트 <b>#48515f</b> 하나로 통일합니다. 승/긍정은 포인트색, 패/데스/위험은 레드, 추세 상승은 그린을 씁니다.</p>
-    <div class="grid g4" id="semantic"></div>
-  </section>
-
-  <!-- 외부 채널 -->
-  <section>
-    <div class="sec-head"><h2>외부 채널</h2><span class="en">CHANNELS</span></div>
-    <div class="grid g3" id="channel"></div>
-  </section>
-
-  <!-- 계급 색 램프 -->
-  <section>
-    <div class="sec-head"><h2>계급 색 램프</h2><span class="en">MILITARY RANK</span></div>
-    <p class="sec-note">사병(슬레이트) → 부사관(브론즈) → 준·위관(블루그레이) → 영관·장성(골드)으로 이어지는 군 계급 색입니다.</p>
-    <div class="ramp" id="rankramp"></div>
-  </section>
-
-  <!-- 랭크전 티어 -->
-  <section>
-    <div class="sec-head"><h2>랭크전 티어 색</h2><span class="en">RANKED TIER</span></div>
-    <div class="ramp" id="tierramp"></div>
-  </section>
-
-  <!-- 엠블럼 팔레트 -->
-  <section>
-    <div class="sec-head"><h2>클랜 엠블럼 팔레트</h2><span class="en">EMBLEM</span></div>
-    <p class="sec-note">클랜 엠블럼 배경에 쓰는 8색. 심볼 색은 흰색 + 파스텔 4색을 조합합니다.</p>
-    <div class="ramp" id="emblemramp" style="margin-bottom:12px"></div>
-    <div class="ramp" id="symbolramp"></div>
-  </section>
-
-  <!-- 타이포그래피 -->
-  <section>
-    <div class="sec-head"><h2>타이포그래피</h2><span class="en">TYPE</span></div>
-    <p class="sec-note"><b>Pretendard</b> — 본문·UI 전반(400~800). &nbsp;<b>Chakra Petch</b> — 숫자·지표·라벨·로고(500/600/700).</p>
-    <div class="comp-card" id="type"></div>
-  </section>
-
-  <!-- 간격 / 라디우스 / 그림자 -->
-  <section>
-    <div class="sec-head"><h2>모양 & 깊이</h2><span class="en">RADIUS / SHADOW</span></div>
-    <div class="grid g2">
-      <table class="tok">
-        <thead><tr><th>라디우스</th><th>값</th><th>용도</th></tr></thead>
-        <tbody id="radius"></tbody>
-      </table>
-      <table class="tok">
-        <thead><tr><th>그림자</th><th>용도</th></tr></thead>
-        <tbody id="shadow"></tbody>
-      </table>
-    </div>
-  </section>
-
-  <!-- 컴포넌트 -->
-  <section>
-    <div class="sec-head"><h2>핵심 컴포넌트</h2><span class="en">COMPONENTS</span></div>
-    <div class="comp-card">
-      <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px">
-        <span class="btn primary">기본 버튼</span>
-        <span class="btn ghost">보조 버튼</span>
-        <span class="pill on">선택됨</span>
-        <span class="pill">필터 칩</span>
-        <span class="tag">즐겜/친목팟</span>
-      </div>
-      <div style="display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--t2)">
-        <span>승 <b class="num" style="color:var(--positive)">128승</b></span>
-        <span>패 <b class="num" style="color:var(--negative)">74패</b></span>
-        <span>K/D/A <b class="num"><span style="color:var(--ink)">24</span> / <span style="color:var(--negative)">11</span> / <span style="color:var(--point)">7</span></b></span>
-        <span>추세 <b class="num" style="color:var(--up)">▲6</b></span>
-      </div>
-    </div>
-  </section>
-
-  <!-- CSS 토큰 코드 -->
-  <section>
-    <div class="sec-head"><h2>CSS 토큰</h2><span class="en">:ROOT</span></div>
-    <p class="sec-note">아래 블록을 그대로 스타일시트 최상단에 붙여 넣어 사용합니다.</p>
-    <div class="codeblock" id="csscode"></div>
-  </section>
-
-</div>
-
-<script>
-  const surface = [
-    ['배경', '--bg', '#ffffff'], ['앱 배경', '--bg2', '#eef0f2'],
-    ['표면2', '--surf2', '#f1f3f5'], ['패널 헤더', '--head', '#f1f3f5'],
-    ['경계선', '--line', '#e4e6e9'], ['진한 경계', '--line2', '#d2d6db'],
-    ['본문 강조', '--ink', '#20242b'], ['보조 텍스트', '--t2', '#5b626c'],
-    ['약한 텍스트', '--t3', '#949aa3'], ['표 셀', '--t-table', '#33373d'],
-    ['플레이스홀더', '--placeholder', '#9aa1ab'], ['표면', '--surf', '#ffffff'],
-  ];
-  const semantic = [
-    ['포인트', '--point', '#48515f'], ['포인트 소프트', '--point-soft', 'rgba(72,81,95,.12)'],
-    ['긍정 / 승', '--positive', '#48515f'], ['부정 / 패·데스', '--negative', '#e5484d'],
-    ['상승 추세', '--up', '#16a34a'], ['그래프 블루', '--accent-blue', '#2f6fed'],
-    ['골드 / 챔피언', '--gold', '#c0901a'], ['위험 / 마감임박', '--negative', '#e5484d'],
-  ];
-  const channel = [
-    ['디스코드', '--discord', '#5865F2'], ['카카오 오픈챗', '--kakao', '#FEE500'],
-    ['치지직', '--chzzk', '#00b6a0'], ['숲 (SOOP)', '--soop', '#0064ff'],
-    ['유튜브', '--youtube', '#e62117'], ['카카오 잉크', '--kakao-ink', '#191600'],
-  ];
-  const rankramp = ['#737d8a','#525c68','#b3712b','#9e6022','#566f8e','#415d7e','#c0901a','#ad800c','#9c7b1e','#7d6111'];
-  const ranknames = ['이병','병장','하사','원사','준위','대위','소령','대령','준장','대장'];
-  const tiers = [['브론즈','#a9743b'],['실버','#94a0aa'],['골드','#c4960f'],['마스터','#5b8a72'],['그랜드마스터','#4f6b8a'],['챌린저','#7a5bb0'],['랭커','#b25a2b'],['하이랭커','#b23b3b']];
-  const emblem = ['#48515f','#2f6fed','#c0392b','#1f8a5b','#8e44ad','#d98a1f','#16708a','#33373d'];
-  const symbols = [['#ffffff','흰'],['#ffe08a','골드'],['#ffd1d1','로즈'],['#bfe3ff','스카이'],['#c9f0d8','민트']];
-
-  const isLight = (hex) => {
-    const h = hex.replace('#',''); if (h.length < 6) return false;
-    const r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
-    return (0.299*r + 0.587*g + 0.114*b) > 150;
-  };
-  const swatch = (nm, v, hex) => {
-    const tc = isLight(hex) ? '#20242b' : '#fff';
-    return `<div class="swatch"><div class="chip" style="background:${hex}"></div><div class="meta"><div class="nm">${nm}</div><div class="var">var(${v})</div><div class="hex">${hex}</div></div></div>`;
-  };
-  document.getElementById('surface').innerHTML = surface.map(s => swatch(...s)).join('');
-  document.getElementById('semantic').innerHTML = semantic.map(s => swatch(...s)).join('');
-  document.getElementById('channel').innerHTML = channel.map(s => swatch(...s)).join('');
-
-  document.getElementById('rankramp').innerHTML = rankramp.map((c,i) => `<div style="background:${c}">${ranknames[i]}</div>`).join('');
-  document.getElementById('tierramp').innerHTML = tiers.map(([n,c]) => `<div style="background:${c};color:${isLight(c)?'#20242b':'#fff'}">${n}</div>`).join('');
-  document.getElementById('emblemramp').innerHTML = emblem.map(c => `<div style="background:${c}">${c.slice(1)}</div>`).join('');
-  document.getElementById('symbolramp').innerHTML = symbols.map(([c,n]) => `<div style="background:${c};color:#20242b;border-right:1px solid #e4e6e9">${n}</div>`).join('');
-
-  const types = [
-    ['페이지 타이틀', 'Pretendard 800 · 30px', '<span style="font-size:30px;font-weight:800;letter-spacing:-.6px">전적 검색</span>'],
-    ['섹션 헤더', 'Pretendard 800 · 19px', '<span style="font-size:19px;font-weight:800">시즌별 랭크전 전적</span>'],
-    ['패널 제목', 'Pretendard 800 · 15px', '<span style="font-size:15px;font-weight:800">클랜원</span>'],
-    ['본문', 'Pretendard 500 · 14px', '<span style="font-size:14px;font-weight:500">분위기 좋은 우리 클랜에 놀러오세요.</span>'],
-    ['보조 / 캡션', 'Pretendard 600 · 12px', '<span style="font-size:12px;font-weight:600;color:#5b626c">최근 14전 · 9승 5패</span>'],
-    ['지표 숫자', 'Chakra Petch 700 · 22px', '<span class="num" style="font-size:22px;font-weight:700">68<span style="font-size:14px">%</span></span>'],
-    ['라벨 / EN', 'Chakra Petch 700 · 11px · ls 2px', '<span class="num" style="font-size:11px;font-weight:700;letter-spacing:2px;color:#949aa3">RANKED</span>'],
-    ['로고', 'Chakra Petch 700 · ls -.5px', '<span class="brand" style="font-size:20px">search<span style="color:#48515f">.gg</span></span>'],
-  ];
-  document.getElementById('type').innerHTML = types.map(([l,s,d]) =>
-    `<div class="type-row"><div class="label"><b>${l}</b></div><div class="spec">${s}</div><div>${d}</div></div>`).join('');
-
-  const radius = [['--r-xs','4px','인풋·작은 배지'],['--r-sm','5px','기본 카드·패널'],['--r-md','7px','버튼·인풋'],['--r-lg','8px','큰 카드'],['--r-xl','14px','모달'],['--r-pill','20px','칩·태그']];
-  document.getElementById('radius').innerHTML = radius.map(([k,v,u]) =>
-    `<tr><td class="k">${k}</td><td class="v"><span class="demo-box"><span style="width:34px;height:24px;background:var(--point-soft);border:1px solid var(--line2);border-radius:${v}"></span>${v}</span></td><td>${u}</td></tr>`).join('');
-
-  const shadow = [['--sh-card','카드 기본'],['--sh-hover','카드 호버'],['--sh-pop','드롭다운·검색'],['--sh-modal','모달']];
-  document.getElementById('shadow').innerHTML = shadow.map(([k,u]) =>
-    `<tr><td class="k">${k}</td><td><span class="demo-box"><span style="width:46px;height:30px;background:#fff;border-radius:7px;box-shadow:var(${k})"></span><span style="color:var(--t2)">${u}</span></span></td></tr>`).join('');
-
-  document.getElementById('csscode').textContent =
-`:root {
-  /* 표면 */
-  --bg:#ffffff; --bg2:#eef0f2; --surf2:#f1f3f5; --head:#f1f3f5;
-  --line:#e4e6e9; --line2:#d2d6db;
-  /* 텍스트 */
-  --ink:#20242b; --t2:#5b626c; --t3:#949aa3; --placeholder:#9aa1ab;
-  /* 시맨틱 */
-  --point:#48515f; --point-soft:rgba(72,81,95,.12);
-  --positive:#48515f; --negative:#e5484d; --up:#16a34a;
-  --accent-blue:#2f6fed; --gold:#c0901a;
-  /* 채널 */
-  --discord:#5865F2; --kakao:#FEE500; --chzzk:#00b6a0; --soop:#0064ff; --youtube:#e62117;
-  /* 라디우스 */
-  --r-xs:4px; --r-sm:5px; --r-md:7px; --r-lg:8px; --r-xl:14px; --r-pill:20px;
-  /* 그림자 */
-  --sh-card:0 1px 2px rgba(0,0,0,.04);
-  --sh-hover:0 4px 14px rgba(0,0,0,.10);
-  --sh-pop:0 6px 22px rgba(0,0,0,.10);
-  --sh-modal:0 24px 70px rgba(0,0,0,.34);
-}
-
-/* 폰트 */
-body   { font-family:'Pretendard',sans-serif; }
-.num   { font-family:'Chakra Petch',sans-serif; }  /* 숫자·지표·라벨 */`;
-</script>
-</body>
-</html>
diff --git a/surinz-source/searchgg 메인 홈.html b/surinz-source/searchgg 메인 홈.html
deleted file mode 100644
index 1f089c9..0000000
--- a/surinz-source/searchgg 메인 홈.html	
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>searchgg · 서든어택 전적검색 — 메인 홈 시안</title>
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&display=swap" rel="stylesheet" />
-<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
-<style>
-  :root {
-    --bg: #ffffff; --bg2: #eef0f2; --surf: #ffffff; --surf2: #f1f3f5;
-    --line: #e4e6e9; --line2: #d2d6db;
-    --ink: #20242b; --t2: #5b626c; --t3: #949aa3;
-  }
-  * { box-sizing: border-box; }
-  html, body { margin: 0; padding: 0; background: #eef0f2; }
-  body { font-family: 'Pretendard', sans-serif; -webkit-font-smoothing: antialiased; }
-  input::placeholder { color: #9aa1ab; }
-  button { font-family: 'Pretendard', sans-serif; }
-  @keyframes sgFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
-  ::-webkit-scrollbar { width: 0; height: 0; }
-</style>
-<template id="__bundler_thumbnail">
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" fill="#ffffff" />
-    <circle cx="50" cy="44" r="18" fill="none" stroke="#48515f" stroke-width="2.6" />
-    <path d="M50 22v7M50 59v7M28 44h7M65 44h7" stroke="#48515f" stroke-width="2.6" stroke-linecap="round" />
-    <circle cx="50" cy="44" r="3.4" fill="#48515f" />
-    <text x="50" y="86" text-anchor="middle" font-family="monospace" font-size="13" font-weight="700" fill="#20242b">search<tspan fill="#48515f">.gg</tspan></text>
-  </svg>
-</template>
-</head>
-<body>
-<div id="root"></div>
-
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-
-<script src="image-slot.js"></script>
-<script type="text/babel" src="sa-data.jsx"></script>
-<script type="text/babel" src="sa-shared.jsx"></script>
-<script type="text/babel" src="sa-profile-sections.jsx"></script>
-<script type="text/babel" src="sa-profile.jsx"></script>
-<script type="text/babel" src="sa-login.jsx"></script>
-<script type="text/babel" src="sa-clan-data.jsx"></script>
-<script type="text/babel" src="sa-clan-sections.jsx"></script>
-<script type="text/babel" src="sa-clan.jsx"></script>
-<script type="text/babel" src="sa-clan-plaza.jsx"></script>
-<script type="text/babel" src="sa-community.jsx"></script>
-<script type="text/babel" src="sa-home.jsx"></script>
-
-<script type="text/babel" data-presets="react">
-  ReactDOM.createRoot(document.getElementById('root')).render(<Home />);
-</script>
-</body>
-</html>