feat: 서린즈 전적 화면 디자인 캔버스 구성

전적 검색 결과 화면을 아트보드 넷으로 그렸다 — 종합(데스크톱 1440) · 로딩 · 맵 탭 · 상태 화면 넷(없는 닉네임 · 첫 조회 · 갱신 중 · 실패). 화면 얼개 - 프로필 헤더(계급 · 클랜 · 마지막 플레이 · 솔로/파티 랭크전 티어 · 갱신) - 화면 갈래 탭 — 종합 / 맵 - 왼쪽 300px 레일: 동향 스탯 · 랭크전 시즌 · 랭크·클랜 성적 · 같이 한 유저 · 자주 만난 상대 - 오른쪽: 최근 폼(20판 스트립 + 구간 비교) · 경기 기록(펼치면 팀 스코어보드) 정한 것 - 승/패 색은 파랑 #2A5FCC / 빨강 #C4453D. 초록은 이 화면에서 쓰지 않아 랭킹의 등락 초록과 뜻이 겹치지 않는다. - 킬뎃은 킬 ÷ (킬 + 데스) 를 백분율로 적는다(최댓값 100%). - 딜량은 어디서든 수치다. 집계 자리는 「경기당 딜량」. - 기준은 셋 — 맵은 전체 경기, 같이 한 유저는 최근 100경기, 나머지는 20경기. 동향 스탯은 넥슨이 주는 값이라 기준을 적지 않는다. 빌드 templates-record/ 를 build-record.mjs 로 빌드해 record/ 에 아트보드를 만든다. 홈 캔버스(build.mjs · fonts/mini)와 폰트 서브셋을 공유하지 않는다 — 전적 화면이 쓰는 글자만 담아 아트보드 하나당 115KB 로 유지한다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0128kgT8ycCATfJVFULQMa9b
2026-09-11 01:44:04 +09:00
parent 1ac74e804a
commit d27184c13b
11 changed files with 13724 additions and 0 deletions
@@ -0,0 +1,64 @@
+// templates-record/*.dc.html 의 /*PRETENDARD*/ 토큰을 Pretendard woff2 data URI 로 치환해
+// record/ 아래에 최종 .dc.html 아트보드를 생성한다.
+//
+// 홈 캔버스(build.mjs · fonts/mini)와 서브셋을 공유하지 않는다.
+// 전적 화면은 홈에 없던 글자를 많이 쓰는데, 공용 서브셋을 키우면 홈 아트보드 10개가
+// 전부 같이 무거워지기 때문이다. 여기서는 이 화면이 실제로 쓰는 글자만 담는다.
+import { readFileSync, writeFileSync, readdirSync, mkdirSync } from 'node:fs';
+import { join } from 'node:path';
+import subsetFont from 'subset-font';
+import { decompress } from 'wawoff2';
+
+const TPL = 'templates-record';
+const OUT = 'record';
+
+// 1) 아트보드 텍스트에서 쓰이는 글자를 모은다 (style 블록과 태그는 제외)
+const used = new Set();
+const names = readdirSync(TPL).filter((n) => n.endsWith('.dc.html'));
+for (const name of names) {
+  const src = readFileSync(join(TPL, name), 'utf8')
+    .replace(/<style[\s\S]*?<\/style>/g, '')
+    .replace(/<[^>]+>/g, ' ');
+  for (const c of src) used.add(c);
+}
+// 안전 여유 — 아스키 인쇄 가능 문자와 자주 쓰는 기호는 항상 포함
+for (let i = 0x20; i <= 0x7e; i += 1) used.add(String.fromCharCode(i));
+for (const c of '·…—–‘’“”「」『』±×÷≤≥→←↑↓★☆※％') used.add(c);
+
+const text = [...used].filter((c) => c.charCodeAt(0) > 0x1f).join('');
+console.log(`서브셋 글자 수 ${text.length}`);
+
+// 2) 굵기별 서브셋을 만들어 @font-face 로 인라인한다
+const WEIGHTS = [
+  ['Regular', 400],
+  ['SemiBold', 600],
+  ['Bold', 700],
+];
+let faceBytes = 0;
+const faces = [];
+for (const [file, weight] of WEIGHTS) {
+  const woff2 = readFileSync(join('fonts', `Pretendard-${file}.subset.woff2`));
+  const ttf = Buffer.from(await decompress(woff2));
+  const out = await subsetFont(ttf, text, { targetFormat: 'woff2' });
+  faceBytes += out.length;
+  console.log(`${file.padEnd(9)} ${(out.length / 1024).toFixed(0).padStart(3)} KB`);
+  faces.push(
+    `@font-face{font-family:'Pretendard';font-style:normal;font-weight:${weight};font-display:swap;` +
+      `src:url(data:font/woff2;base64,${out.toString('base64')}) format('woff2');}`,
+  );
+}
+console.log(`글꼴 합계 ${(faceBytes / 1024).toFixed(0)} KB (아트보드 1개당)`);
+
+// 3) 치환해서 내보낸다
+mkdirSync(OUT, { recursive: true });
+const joined = faces.join('\n');
+let total = 0;
+for (const name of names) {
+  const src = readFileSync(join(TPL, name), 'utf8');
+  if (!src.includes('/*PRETENDARD*/')) console.error(`warn: ${name} 에 /*PRETENDARD*/ 토큰이 없습니다`);
+  const out = src.replace('/*PRETENDARD*/', joined);
+  writeFileSync(join(OUT, name), out, 'utf8');
+  total += out.length;
+  console.log(`${name} — ${(out.length / 1024).toFixed(0)} KB`);
+}
+console.log(`${names.length} artboards built · 합계 ${(total / 1024 / 1024).toFixed(1)} MB`);
@@ -0,0 +1,313 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+  <style>
+/*PRETENDARD*/
+    /* 서린즈 전적 — 로딩. 홈과 같은 기준: 응답 없이 그릴 수 있는 것은 전부 즉시 그린다 */
+    body { margin: 0; }
+    .d-root, .d-root * { box-sizing: border-box; }
+    .d-root {
+      font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
+      -webkit-font-smoothing: antialiased;
+      font-variant-numeric: tabular-nums;
+      letter-spacing: -0.015em;
+    }
+    a { color: #C24A00; text-decoration: none; }
+    a:hover { color: #A03C00; }
+    .d-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
+    .d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
+    .d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    /* 화면 갈래 — 페이지 전체를 가르는 탭이라 폭을 채우지 않고 왼쪽에 붙인다 */
+    .ptab { display: flex; gap: 1.5rem; height: 48px; padding: 0 40px; border-bottom: 1px solid #E4E8ED; }
+    .ptab > span { display: flex; align-items: center; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
+    .ptab > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
+    .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
+    .seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
+    .seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
+    .mg { display: grid; grid-template-columns: 44px 128px minmax(0, 1fr) 160px 76px 84px 84px 116px 18px; align-items: center; gap: 0.75rem; }
+    .mh { height: 32px; border-bottom: 1px solid #E4E8ED; }
+    .mr { height: 46px; border-bottom: 1px solid #F3F5F7; }
+    .m-r { text-align: right; }
+    .tile { padding: 0.625rem 0.75rem 0.6875rem; border: 1px solid #EDEFF2; border-radius: 12px; background: #FAFBFC; }
+    .tile-l { font-size: 0.75rem; color: #9BA1A9; }
+    .tier { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
+    .d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
+    .d-tab { display: inline-flex; align-items: center; height: 30px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
+    .d-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
+    .season-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
+    .form-c { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; }
+    .stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px; }
+    .who-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
+    .map-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px 72px 72px 72px 80px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7; }
+    .mode-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px 64px 40px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7; }
+
+    /* 스켈레톤 — 홈과 같은 한 덩어리(.s). 색 #EDEFF2 하나, 1.6초에 한 번 쓸어간다 */
+    .s { display: block; position: relative; overflow: hidden; background: #EDEFF2; }
+    .s::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      transform: translateX(-100%);
+      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
+      animation: s-sweep 1.6s ease-in-out infinite;
+    }
+    @keyframes s-sweep { to { transform: translateX(100%); } }
+    @media (prefers-reduced-motion: reduce) { .s::after { animation: none; } }
+    .sb { height: 11px; border-radius: 5px; }
+    .sb-s { height: 10px; border-radius: 5px; }
+    .sb-l { height: 13px; border-radius: 5px; }
+    .sr { margin-left: auto; }
+  </style>
+</helmet>
+
+<div class="d-root" style="width: 1440px; min-height: 2100px; background: #FFFFFF; color: #14161A;">
+
+  <header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; border-bottom: 1px solid #EDEFF2;">
+    <div style="display: flex; align-items: center; gap: 0.625rem;">
+      <svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
+    </div>
+    <nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
+      <span style="font-weight: 500; color: #5B6169;">홈</span>
+      <span style="font-weight: 700;">전적 검색</span>
+      <span style="font-weight: 500; color: #5B6169;">랭킹</span>
+      <span style="font-weight: 500; color: #5B6169;">커뮤니티</span>
+      <span style="font-weight: 500; color: #5B6169;">스트리밍</span>
+      <span style="font-weight: 500; color: #5B6169;">소식</span>
+      <span style="font-weight: 500; color: #5B6169;">이벤트</span>
+    </nav>
+    <div style="flex-grow: 1;"></div>
+    <span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #F2F4F7;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg></span>
+    <button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
+  </header>
+
+  <!-- 프로필 헤더 — 닉네임은 검색어라 서버 응답 없이도 안다. 즉시 그린다 -->
+  <section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2;">
+    <div style="display: flex; align-items: center; gap: 1.25rem; padding: 26px 40px;">
+
+      <span class="s" style="width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0;"></span>
+
+      <div style="min-width: 0;">
+        <div style="display: flex; align-items: center; gap: 0.625rem;">
+          <h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">달빛조각사</h1>
+          <span class="s sb-l" style="width: 62px;"></span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
+          <span class="s sb" style="width: 74px;"></span>
+          <span class="s sb-s" style="width: 108px; margin-left: 0.25rem;"></span>
+        </div>
+      </div>
+
+      <div style="flex-grow: 1;"></div>
+
+      <div style="display: flex; align-items: center; gap: 2rem;">
+        <div style="display: flex; align-items: center; gap: 0.625rem;">
+          <span class="s" style="width: 40px; height: 40px; border-radius: 8px;"></span>
+          <div>
+            <div style="font-size: 0.75rem; color: #9BA1A9;">랭크전 솔로 · 2026 시즌3</div>
+            <div style="margin-top: 0.3125rem;"><span class="s sb-l" style="width: 68px;"></span></div>
+            <div style="margin-top: 0.4375rem;"><span class="s sb-s" style="width: 64px;"></span></div>
+          </div>
+        </div>
+        <div style="display: flex; align-items: center; gap: 0.625rem;">
+          <span class="s" style="width: 40px; height: 40px; border-radius: 8px;"></span>
+          <div>
+            <div style="font-size: 0.75rem; color: #9BA1A9;">랭크전 파티 · 2026 시즌3</div>
+            <div style="margin-top: 0.3125rem;"><span class="s sb-l" style="width: 84px;"></span></div>
+            <div style="margin-top: 0.4375rem;"><span class="s sb-s" style="width: 68px;"></span></div>
+          </div>
+        </div>
+      </div>
+
+      <span style="width: 1px; height: 48px; background: #E4E8ED; margin: 0 0.5rem;"></span>
+
+      <!-- 갱신 버튼은 회색으로 두지 않는다. 기다리는 동안에도 누를 수 있어야 한다 -->
+      <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 0.4375rem;">
+        <button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>전적 갱신</button>
+        <span class="s sb-s" style="width: 104px;"></span>
+      </div>
+    </div>
+  </section>
+
+  <div class="ptab"><span class="on">종합</span><span>맵</span></div>
+
+  <div style="display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; padding: 36px 40px 56px;">
+
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+
+      <section>
+        <div style="display: flex; align-items: center;">
+          <h2 class="d-h2">동향 스탯</h2>
+        </div>
+        <div style="display: flex; align-items: center; gap: 0.625rem; height: 41px; margin-top: 0.875rem;">
+          <span class="s" style="width: 96px; height: 30px; border-radius: 5px;"></span>
+          <span class="s sb" style="width: 108px;"></span>
+        </div>
+        <div class="s" style="height: 10px; border-radius: 999px; margin-top: 0.75rem;"></div>
+        <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1rem;">
+          <div class="tile"><div class="tile-l">킬뎃</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 62%;"></span></div></div>
+          <div class="tile"><div class="tile-l">헤드샷</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 58%;"></span></div></div>
+          <div class="tile"><div class="tile-l">경기당 딜량</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 66%;"></span></div></div>
+        </div>
+        <div style="margin-top: 1.25rem;">
+          <div style="display: flex; align-items: baseline;">
+            <span style="font-size: 0.8125rem; font-weight: 600; color: #5B6169;">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: #9BA1A9;">킬뎃</span>
+          </div>
+          <div style="margin-top: 0.5rem;">
+            <div class="stat-row"><span class="s sb" style="width: 68%;"></span><span class="s" style="height: 6px; border-radius: 999px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
+            <div class="stat-row"><span class="s sb" style="width: 62%;"></span><span class="s" style="height: 6px; border-radius: 999px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
+            <div class="stat-row"><span class="s sb" style="width: 72%;"></span><span class="s" style="height: 6px; border-radius: 999px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div style="display: flex; align-items: center;">
+          <h2 class="d-h2">랭크전 시즌</h2><div style="flex-grow: 1;"></div>
+          <span style="display: flex; gap: 0.25rem;"><span class="d-tab d-tab-on">솔로</span><span class="d-tab">파티</span></span>
+        </div>
+
+        <div style="display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
+          <span class="d-th">시즌</span><span class="d-th">티어</span><span class="d-th m-r">RP</span>
+        </div>
+          <div class="season-row"><span class="s sb-s" style="width: 62px;"></span><span style="display: flex; align-items: center; gap: 0.5rem;"><span class="s" style="width: 22px; height: 22px; border-radius: 8px; flex-shrink: 0;"></span><span class="s sb" style="width: 74%;"></span></span><span class="s sb sr" style="width: 36px;"></span></div>
+          <div class="season-row"><span class="s sb-s" style="width: 62px;"></span><span style="display: flex; align-items: center; gap: 0.5rem;"><span class="s" style="width: 22px; height: 22px; border-radius: 8px; flex-shrink: 0;"></span><span class="s sb" style="width: 66%;"></span></span><span class="s sb sr" style="width: 36px;"></span></div>
+          <div class="season-row"><span class="s sb-s" style="width: 62px;"></span><span style="display: flex; align-items: center; gap: 0.5rem;"><span class="s" style="width: 22px; height: 22px; border-radius: 8px; flex-shrink: 0;"></span><span class="s sb" style="width: 70%;"></span></span><span class="s sb sr" style="width: 36px;"></span></div>
+          <div class="season-row"><span class="s sb-s" style="width: 62px;"></span><span style="display: flex; align-items: center; gap: 0.5rem;"><span class="s" style="width: 22px; height: 22px; border-radius: 8px; flex-shrink: 0;"></span><span class="s sb" style="width: 62%;"></span></span><span class="s sb sr" style="width: 36px;"></span></div>
+          <div class="season-row" style="border-bottom: none;"><span class="s sb-s" style="width: 62px;"></span><span style="display: flex; align-items: center; gap: 0.5rem;"><span class="s" style="width: 22px; height: 22px; border-radius: 8px; flex-shrink: 0;"></span><span class="s sb" style="width: 68%;"></span></span><span class="s sb sr" style="width: 36px;"></span></div>
+
+        <div style="margin-top: 1rem;"><span class="s sb-s" style="width: 132px;"></span></div>
+        <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem;">
+            <div class="tile"><div class="tile-l">승률</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 58%;"></span></div></div>
+            <div class="tile"><div class="tile-l">킬뎃</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 61%;"></span></div></div>
+            <div class="tile"><div class="tile-l">헤드샷</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 64%;"></span></div></div>
+            <div class="tile"><div class="tile-l">경기당 딜량</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 67%;"></span></div></div>
+        </div>
+      </section>
+
+      <section>
+        <h2 class="d-h2">랭크·클랜 성적</h2>
+        <div style="display: grid; grid-template-columns: minmax(0, 1fr) 42px 64px 40px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
+          <span class="d-th">모드</span><span class="d-th m-r">판수</span><span></span><span class="d-th m-r">승률</span>
+        </div>
+        <div class="mode-row"><span class="s sb" style="width: 76%;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s" style="height: 6px; border-radius: 999px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
+        <div class="mode-row"><span class="s sb" style="width: 72%;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s" style="height: 6px; border-radius: 999px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
+        <div class="mode-row" style="border-bottom: none;"><span class="s sb" style="width: 58%;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s" style="height: 6px; border-radius: 999px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
+      </section>
+
+      <section>
+        <div style="display: flex; align-items: center;">
+          <h2 class="d-h2">같이 한 유저</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">최근 100경기</span>
+        </div>
+        <div style="display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
+          <span class="d-th">유저</span><span class="d-th m-r">판수</span><span class="d-th m-r">내 승률</span>
+        </div>
+          <div class="who-row"><span class="s sb" style="width: 62%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
+          <div class="who-row"><span class="s sb" style="width: 54%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
+          <div class="who-row"><span class="s sb" style="width: 70%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
+          <div class="who-row"><span class="s sb" style="width: 58%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
+          <div class="who-row" style="border-bottom: none;"><span class="s sb" style="width: 66%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
+      </section>
+
+      <section>
+        <div style="display: flex; align-items: center;">
+          <h2 class="d-h2">자주 만난 상대</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">최근 100경기</span>
+        </div>
+        <div style="display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
+          <span class="d-th">유저</span><span class="d-th m-r">판수</span><span class="d-th m-r">내 승률</span>
+        </div>
+          <div class="who-row"><span class="s sb" style="width: 74%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
+          <div class="who-row"><span class="s sb" style="width: 58%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
+          <div class="who-row"><span class="s sb" style="width: 64%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
+          <div class="who-row"><span class="s sb" style="width: 80%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
+          <div class="who-row" style="border-bottom: none;"><span class="s sb" style="width: 56%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
+      </section>
+    </div>
+
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+
+      <section>
+        <div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
+          <h2 class="d-h2">최근 폼</h2>
+          <div style="flex-grow: 1;"></div>
+          <span class="s sb-s" style="width: 246px;"></span>
+        </div>
+        <div style="display: flex; align-items: flex-start; gap: 2.5rem;">
+          <div>
+            <div style="display: flex; align-items: center; gap: 4px;"><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span style="width: 12px;"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span></div>
+            <div style="display: flex; align-items: center; margin-top: 0.5rem;">
+              <span style="font-size: 0.8125rem; color: #9BA1A9;">← 최근</span><div style="flex-grow: 1;"></div>
+              <span class="s sb-s" style="width: 68px;"></span>
+            </div>
+          </div>
+          <div style="display: flex; gap: 2.5rem;">
+          <div>
+            <div style="font-size: 0.75rem; color: #9BA1A9;">승률</div>
+            <div style="display: flex; align-items: center; height: 21px; margin-top: 0.25rem;"><span class="s sb-l" style="width: 56px;"></span></div>
+            <div style="margin-top: 0.375rem;"><span class="s sb-s" style="width: 86px;"></span></div>
+          </div>
+          <div>
+            <div style="font-size: 0.75rem; color: #9BA1A9;">킬뎃</div>
+            <div style="display: flex; align-items: center; height: 21px; margin-top: 0.25rem;"><span class="s sb-l" style="width: 62px;"></span></div>
+            <div style="margin-top: 0.375rem;"><span class="s sb-s" style="width: 90px;"></span></div>
+          </div>
+          <div>
+            <div style="font-size: 0.75rem; color: #9BA1A9;">헤드샷</div>
+            <div style="display: flex; align-items: center; height: 21px; margin-top: 0.25rem;"><span class="s sb-l" style="width: 68px;"></span></div>
+            <div style="margin-top: 0.375rem;"><span class="s sb-s" style="width: 94px;"></span></div>
+          </div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
+          <h2 class="d-h2">경기 기록</h2>
+        <div style="flex-grow: 1;"></div>
+        <span class="s sb-s" style="width: 188px;"></span>
+      </div>
+
+      <!-- 세그먼트는 고정 문구라 즉시 그린다 -->
+      <div class="seg">
+        <span class="on">전체</span><span>랭크전</span><span>클랜전</span><span>토너먼트</span><span>일반전</span>
+      </div>
+
+      <div class="mg mh" style="margin-top: 0.25rem;">
+        <span class="d-th">결과</span><span class="d-th">모드</span><span class="d-th">맵</span>
+        <span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">킬뎃</span><span class="d-th m-r">헤드샷</span><span class="d-th m-r">딜량</span>
+        <span class="d-th m-r">시각</span><span></span>
+      </div>
+
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 78%;"></span><span class="s sb" style="width: 64%;"></span><span class="s sb sr" style="width: 96px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 44px;"></span><span class="s sb-s sr" style="width: 62px;"></span><span></span></div>
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 62%;"></span><span class="s sb" style="width: 78%;"></span><span class="s sb sr" style="width: 102px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 40px;"></span><span class="s sb-s sr" style="width: 62px;"></span><span></span></div>
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 84%;"></span><span class="s sb" style="width: 70%;"></span><span class="s sb sr" style="width: 94px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 46px;"></span><span class="s sb-s sr" style="width: 66px;"></span><span></span></div>
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 70%;"></span><span class="s sb" style="width: 56%;"></span><span class="s sb sr" style="width: 98px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 44px;"></span><span class="s sb-s sr" style="width: 62px;"></span><span></span></div>
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 76%;"></span><span class="s sb" style="width: 62%;"></span><span class="s sb sr" style="width: 104px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 46px;"></span><span class="s sb-s sr" style="width: 62px;"></span><span></span></div>
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 84%;"></span><span class="s sb" style="width: 74%;"></span><span class="s sb sr" style="width: 96px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 42px;"></span><span class="s sb-s sr" style="width: 66px;"></span><span></span></div>
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 70%;"></span><span class="s sb" style="width: 78%;"></span><span class="s sb sr" style="width: 92px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 44px;"></span><span class="s sb-s sr" style="width: 62px;"></span><span></span></div>
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 84%;"></span><span class="s sb" style="width: 68%;"></span><span class="s sb sr" style="width: 90px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 38px;"></span><span class="s sb-s sr" style="width: 62px;"></span><span></span></div>
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 62%;"></span><span class="s sb" style="width: 56%;"></span><span class="s sb sr" style="width: 100px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 42px;"></span><span class="s sb-s sr" style="width: 80px;"></span><span></span></div>
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 76%;"></span><span class="s sb" style="width: 70%;"></span><span class="s sb sr" style="width: 96px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 44px;"></span><span class="s sb-s sr" style="width: 80px;"></span><span></span></div>
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 70%;"></span><span class="s sb" style="width: 58%;"></span><span class="s sb sr" style="width: 94px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 40px;"></span><span class="s sb-s sr" style="width: 80px;"></span><span></span></div>
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 84%;"></span><span class="s sb" style="width: 74%;"></span><span class="s sb sr" style="width: 104px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 48px;"></span><span class="s sb-s sr" style="width: 80px;"></span><span></span></div>
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 76%;"></span><span class="s sb" style="width: 78%;"></span><span class="s sb sr" style="width: 92px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 44px;"></span><span class="s sb-s sr" style="width: 68px;"></span><span></span></div>
+      <div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 84%;"></span><span class="s sb" style="width: 62%;"></span><span class="s sb sr" style="width: 96px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 42px;"></span><span class="s sb-s sr" style="width: 68px;"></span><span></span></div>
+
+      <div class="s" style="height: 46px; border-radius: 999px; margin-top: 1.25rem;"></div>
+      </section>
+    </div>
+  </div>
+
+  <footer style="display: flex; align-items: center; gap: 1.5rem; padding: 32px 40px 48px; border-top: 1px solid #EDEFF2; font-size: 0.875rem; color: #9BA1A9;">
+    <span style="font-weight: 600; color: #5B6169;">서린즈</span><span>이용약관</span><span>개인정보 처리방침</span><span>문의하기</span>
+    <div style="flex-grow: 1;"></div><span>넥슨 공개 API 기반 · 서든어택 비공식 서비스</span>
+  </footer>
+</div>
+</x-dc>
+</body>
+</html>
@@ -0,0 +1,384 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+  <style>
+/*PRETENDARD*/
+    /* 서린즈 전적 — 데스크톱 1440 · 프로필 헤더 + 좌 요약 레일 / 우 경기 목록 */
+    body { margin: 0; }
+    .d-root, .d-root * { box-sizing: border-box; }
+    .d-root {
+      font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
+      -webkit-font-smoothing: antialiased;
+      font-variant-numeric: tabular-nums;
+      letter-spacing: -0.015em;
+    }
+    a { color: #C24A00; text-decoration: none; }
+    a:hover { color: #A03C00; }
+    .d-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
+    .d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
+    .d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    /* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트 (홈과 같은 규칙) */
+    /* 화면 갈래 — 페이지 전체를 가르는 탭이라 폭을 채우지 않고 왼쪽에 붙인다 */
+    .ptab { display: flex; gap: 1.5rem; height: 48px; padding: 0 40px; border-bottom: 1px solid #E4E8ED; }
+    .ptab > span { display: flex; align-items: center; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
+    .ptab > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
+    .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
+    .seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
+    .seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
+
+    /* 경기 한 줄 — 머리와 본문이 같은 격자를 쓴다 */
+    .mg { display: grid; grid-template-columns: 44px 128px minmax(0, 1fr) 160px 76px 84px 84px 116px 18px; align-items: center; gap: 0.75rem; }
+    .mh { height: 32px; border-bottom: 1px solid #E4E8ED; }
+    .mr { height: 46px; border-bottom: 1px solid #F3F5F7; }
+    .win { font-size: 0.9375rem; font-weight: 700; color: #2A5FCC; }
+    .lose { font-size: 0.9375rem; font-weight: 700; color: #C4453D; }
+    .m-mode { font-size: 0.875rem; font-weight: 600; }
+    .m-map { font-size: 0.875rem; color: #5B6169; }
+    .m-num { font-size: 0.875rem; font-weight: 600; text-align: right; }
+    /* 데스는 색을 달리해 킬·어시와 눈으로 갈린다 */
+    .m-death { color: #C4453D; }
+    .m-dot { color: #C9CDD3; font-weight: 500; }
+    .m-sub { font-size: 0.8125rem; color: #5B6169; }
+    .m-dim { font-size: 0.8125rem; color: #9BA1A9; text-align: right; }
+    .m-r { text-align: right; }
+
+    /* 요약 레일 */
+    .tile { padding: 0.625rem 0.75rem 0.6875rem; border: 1px solid #EDEFF2; border-radius: 12px; background: #FAFBFC; }
+    .tile-l { font-size: 0.75rem; color: #9BA1A9; }
+    .tile-v { margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; }
+    .d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
+    .d-tab { display: inline-flex; align-items: center; height: 30px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
+    .d-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
+    .season-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
+    .tier-sm { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
+    /* 최근 폼 — 승/패 20칸. 왼쪽이 최근이라 아래 경기 목록과 같은 방향을 가리킨다 */
+    .form-c { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; }
+    .stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px; }
+    /* 크기 막대 — 갈래가 하나뿐이라 색을 나누지 않고 길이로만 읽힌다 */
+    .bar { height: 6px; border-radius: 999px; background: #EDEFF2; }
+    .bar > span { display: block; height: 100%; border-radius: 999px; background: #14161A; }
+    .tier { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
+    .map-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px 72px 72px 72px 80px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7; }
+    .map-thumb { width: 80px; height: 45px; border-radius: 12px; }
+    .sb-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 34px; }
+    .who-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
+    .mode-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px 64px 40px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7; }
+  </style>
+</helmet>
+
+<div class="d-root" style="width: 1440px; min-height: 2100px; background: #FFFFFF; color: #14161A;">
+
+  <header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; border-bottom: 1px solid #EDEFF2;">
+    <div style="display: flex; align-items: center; gap: 0.625rem;">
+      <svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
+    </div>
+
+    <nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
+      <span style="font-weight: 500; color: #5B6169;">홈</span>
+      <span style="font-weight: 700;">전적 검색</span>
+      <span style="font-weight: 500; color: #5B6169;">랭킹</span>
+      <span style="font-weight: 500; color: #5B6169;">커뮤니티</span>
+      <span style="font-weight: 500; color: #5B6169;">스트리밍</span>
+      <span style="font-weight: 500; color: #5B6169;">소식</span>
+      <span style="font-weight: 500; color: #5B6169;">이벤트</span>
+    </nav>
+
+    <div style="flex-grow: 1;"></div>
+    <!-- 이 화면에는 히어로 검색창이 없으므로 돋보기를 처음부터 둔다 (홈은 스크롤 뒤에만) -->
+    <span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #F2F4F7;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg></span>
+    <button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
+  </header>
+
+  <!-- 프로필 헤더 — 홈 히어로와 같은 옅은 색면 + 아래 경계선으로 한 층을 만든다 -->
+  <section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2;">
+    <div style="display: flex; align-items: center; gap: 1.25rem; padding: 26px 40px;">
+
+      <span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: #EDEFF2; flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
+
+      <div style="min-width: 0;">
+        <div style="display: flex; align-items: baseline; gap: 0.625rem;">
+          <h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">달빛조각사</h1>
+          <span style="font-size: 0.9375rem; font-weight: 600; color: #5B6169;">중령 2호</span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
+          <span style="font-size: 0.875rem; font-weight: 600;">무명연대</span>
+          <span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
+          <span style="font-size: 0.875rem; color: #9BA1A9;">마지막 플레이 2시간 전</span>
+        </div>
+      </div>
+
+      <div style="flex-grow: 1;"></div>
+
+      <div style="display: flex; align-items: center; gap: 2rem;">
+        <div style="display: flex; align-items: center; gap: 0.625rem;">
+          <span class="tier"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span>
+          <div>
+            <div style="font-size: 0.75rem; color: #9BA1A9;">랭크전 솔로 · 2026 시즌3</div>
+            <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700;">다이아 3</div>
+            <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: #5B6169;">1,842 RP</div>
+          </div>
+        </div>
+        <div style="display: flex; align-items: center; gap: 0.625rem;">
+          <span class="tier"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span>
+          <div>
+            <div style="font-size: 0.75rem; color: #9BA1A9;">랭크전 파티 · 2026 시즌3</div>
+            <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700;">플래티넘 1</div>
+            <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: #5B6169;">1,455 RP</div>
+          </div>
+        </div>
+      </div>
+
+      <span style="width: 1px; height: 48px; background: #E4E8ED; margin: 0 0.5rem;"></span>
+
+      <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 0.4375rem;">
+        <button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>전적 갱신</button>
+        <span style="font-size: 0.8125rem; color: #9BA1A9;">12분 전에 불러왔어요</span>
+      </div>
+    </div>
+  </section>
+
+  <div class="ptab"><span class="on">종합</span><span>맵</span></div>
+
+  <!-- 본문 — 왼쪽 요약 레일 300 / 오른쪽 경기 목록 -->
+  <div style="display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; padding: 36px 40px 56px;">
+
+    <!-- 왼쪽 요약 레일 -->
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+
+      <!-- 동향 스탯 — 넥슨 프로필이 주는 값 그대로. 경기 목록에서 다시 계산하지 않는다 -->
+      <section>
+        <div style="display: flex; align-items: baseline;">
+          <h2 class="d-h2">동향 스탯</h2>
+        </div>
+
+        <div style="display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.875rem;">
+          <span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em;">60<span style="font-size: 1.125rem;">%</span></span>
+          <span style="font-size: 0.875rem; color: #5B6169;">승률 · <span style="font-weight: 700; color: #2A5FCC;">12승</span> <span style="font-weight: 700; color: #C4453D;">8패</span></span>
+        </div>
+        <!-- 승/패 비율 — 두 조각 사이를 2px 띄워 경계가 색 대비에만 기대지 않게 한다 -->
+        <div style="display: flex; gap: 2px; height: 10px; margin-top: 0.75rem;">
+          <span style="flex-grow: 12; border-radius: 999px; background: #2A5FCC;"></span>
+          <span style="flex-grow: 8; border-radius: 999px; background: #C4453D;"></span>
+        </div>
+
+        <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1rem;">
+          <div class="tile"><div class="tile-l">킬뎃</div><div class="tile-v">59%</div></div>
+          <div class="tile"><div class="tile-l">헤드샷</div><div class="tile-v">36%</div></div>
+          <div class="tile"><div class="tile-l">경기당 딜량</div><div class="tile-v">4,270</div></div>
+        </div>
+
+        <div style="margin-top: 1.25rem;">
+          <div style="display: flex; align-items: baseline;">
+            <span style="font-size: 0.8125rem; font-weight: 600; color: #5B6169;">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: #9BA1A9;">킬뎃</span>
+          </div>
+          <div style="margin-top: 0.5rem;">
+            <div class="stat-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">라플</span><span class="bar"><span style="width: 61%;"></span></span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">61%</span></div>
+            <div class="stat-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">스나</span><span class="bar"><span style="width: 57%;"></span></span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">57%</span></div>
+            <div class="stat-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">특수</span><span class="bar"><span style="width: 48%;"></span></span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">48%</span></div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 랭크전 시즌 — 한 시즌이 석 달이라 목록이 길어지지 않는다. 접지 않고 전부 편다 -->
+      <section>
+        <div style="display: flex; align-items: center;">
+          <h2 class="d-h2">랭크전 시즌</h2><div style="flex-grow: 1;"></div>
+          <span style="display: flex; gap: 0.25rem;"><span class="d-tab d-tab-on">솔로</span><span class="d-tab">파티</span></span>
+        </div>
+
+        <div style="display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
+          <span class="d-th">시즌</span><span class="d-th">티어</span><span class="d-th m-r">RP</span>
+        </div>
+          <div class="season-row"><span style="font-size: 0.8125rem; font-weight: 700; color: #14161A;">2026 시즌3</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 700; color: #14161A;">다이아 3</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 700; color: #14161A;">1,842</span></div>
+          <div class="season-row"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2026 시즌2</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #5B6169;">플래티넘 2</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 600; color: #5B6169;">1,610</span></div>
+          <div class="season-row"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2026 시즌1</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #9BA1A9;">미배치</span></span><span style="display: flex; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span></div>
+          <div class="season-row"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2025 시즌4</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #5B6169;">골드 1</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 600; color: #5B6169;">1,280</span></div>
+          <div class="season-row" style="border-bottom: none;"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2025 시즌3</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #5B6169;">실버 1</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 600; color: #5B6169;">740</span></div>
+
+        <div style="margin-top: 0.75rem; font-size: 0.8125rem; font-weight: 600; color: #5B6169;">2026 시즌3 · 솔로 기준</div>
+        <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem;">
+            <div class="tile"><div class="tile-l">승률</div><div class="tile-v">62%</div></div>
+            <div class="tile"><div class="tile-l">킬뎃</div><div class="tile-v">61%</div></div>
+            <div class="tile"><div class="tile-l">헤드샷</div><div class="tile-v">38%</div></div>
+            <div class="tile"><div class="tile-l">경기당 딜량</div><div class="tile-v">4,510</div></div>
+        </div>
+      </section>
+
+      <!-- 모드별 성적 — 이쪽은 경기 기록에서 센 값이다 -->
+      <section>
+        <h2 class="d-h2">랭크·클랜 성적</h2>
+        <div style="display: grid; grid-template-columns: minmax(0, 1fr) 42px 64px 40px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
+          <span class="d-th">모드</span><span class="d-th m-r">판수</span><span></span><span class="d-th m-r">승률</span>
+        </div>
+        <div class="mode-row">
+          <span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">솔로 랭크전</span>
+          <span class="m-sub m-r">5판</span>
+          <span class="bar"><span style="width: 60%;"></span></span>
+          <span style="font-size: 0.875rem; font-weight: 700; text-align: right;">60%</span>
+        </div>
+        <div class="mode-row">
+          <span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">파티 랭크전</span>
+          <span class="m-sub m-r">3판</span>
+          <span class="bar"><span style="width: 33%;"></span></span>
+          <span style="font-size: 0.875rem; font-weight: 700; text-align: right;">33%</span>
+        </div>
+        <div class="mode-row" style="border-bottom: none;">
+          <span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">클랜전</span>
+          <span class="m-sub m-r">4판</span>
+          <span class="bar"><span style="width: 50%;"></span></span>
+          <span style="font-size: 0.875rem; font-weight: 700; text-align: right;">50%</span>
+        </div>
+      </section>
+
+      <section>
+        <div style="display: flex; align-items: baseline;">
+          <h2 class="d-h2">같이 한 유저</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">최근 100경기</span>
+        </div>
+        <div style="display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
+          <span class="d-th">유저</span><span class="d-th m-r">판수</span><span class="d-th m-r">내 승률</span>
+        </div>
+          <div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">칼든햄스터</span><span class="m-sub m-r">38판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">58%</span></div>
+          <div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">새벽두시</span><span class="m-sub m-r">29판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">62%</span></div>
+          <div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무명연대장</span><span class="m-sub m-r">24판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">50%</span></div>
+          <div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">한밤의저격수</span><span class="m-sub m-r">19판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">74%</span></div>
+          <div class="who-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">조용한총잡이</span><span class="m-sub m-r">15판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">47%</span></div>
+      </section>
+
+      <section>
+        <div style="display: flex; align-items: baseline;">
+          <h2 class="d-h2">자주 만난 상대</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">최근 100경기</span>
+        </div>
+        <div style="display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
+          <span class="d-th">유저</span><span class="d-th m-r">판수</span><span class="d-th m-r">내 승률</span>
+        </div>
+          <div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">헤드샷장인</span><span class="m-sub m-r">22판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">41%</span></div>
+          <div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">야간부대장</span><span class="m-sub m-r">18판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">56%</span></div>
+          <div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">삼보급단골</span><span class="m-sub m-r">16판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">44%</span></div>
+          <div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">웨어하우스지박령</span><span class="m-sub m-r">13판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">31%</span></div>
+          <div class="who-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">칼든햄스터</span><span class="m-sub m-r">11판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">55%</span></div>
+      </section>
+    </div>
+
+    <!-- 오른쪽 — 최근 폼 + 경기 목록 -->
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+
+      <section>
+        <div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
+          <h2 class="d-h2">최근 폼</h2>
+          <div style="flex-grow: 1;"></div>
+          <span style="font-size: 0.8125rem; color: #9BA1A9;">최근 20판 · 최근 10판과 그 이전 10판 비교</span>
+        </div>
+        <div style="display: flex; align-items: flex-start; gap: 2.5rem;">
+          <div>
+            <div style="display: flex; align-items: center; gap: 4px;"><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span style="width: 12px;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span></div>
+            <div style="display: flex; align-items: center; margin-top: 0.5rem;">
+              <span style="font-size: 0.8125rem; color: #9BA1A9;">← 최근</span><div style="flex-grow: 1;"></div>
+              <span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">12승</span> <span style="font-weight: 700; color: #C4453D;">8패</span></span>
+            </div>
+          </div>
+          <div style="display: flex; gap: 2.5rem;">
+          <div>
+            <div style="font-size: 0.75rem; color: #9BA1A9;">승률</div>
+            <div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.25rem;"><span style="font-size: 1.0625rem; font-weight: 700;">70%</span><span style="display: inline-flex; align-items: center; gap: 0.1875rem;"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; font-weight: 600; color: #12805C;">20</span></span></div>
+            <div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.25rem;">이전 10판 50%</div>
+          </div>
+          <div>
+            <div style="font-size: 0.75rem; color: #9BA1A9;">킬뎃</div>
+            <div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.25rem;"><span style="font-size: 1.0625rem; font-weight: 700;">60%</span><span style="display: inline-flex; align-items: center; gap: 0.1875rem;"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; font-weight: 600; color: #12805C;">3</span></span></div>
+            <div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.25rem;">이전 10판 57%</div>
+          </div>
+          <div>
+            <div style="font-size: 0.75rem; color: #9BA1A9;">헤드샷</div>
+            <div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.25rem;"><span style="font-size: 1.0625rem; font-weight: 700;">36%</span><span style="display: inline-flex; align-items: center; gap: 0.1875rem;"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; font-weight: 600; color: #12805C;">1</span></span></div>
+            <div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.25rem;">이전 10판 35%</div>
+          </div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+      <div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
+        <h2 class="d-h2">경기 기록</h2>
+        <div style="flex-grow: 1;"></div>
+        <span style="font-size: 0.8125rem; color: #9BA1A9;">9월 5일 18:08 기준</span>
+      </div>
+
+      <div class="seg">
+        <span class="on">전체</span><span>랭크전</span><span>클랜전</span><span>토너먼트</span><span>일반전</span>
+      </div>
+
+      <div class="mg mh" style="margin-top: 0.25rem;">
+        <span class="d-th">결과</span><span class="d-th">모드</span><span class="d-th">맵</span>
+        <span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">킬뎃</span><span class="d-th m-r">헤드샷</span><span class="d-th m-r">딜량</span>
+        <span class="d-th m-r">시각</span><span></span>
+      </div>
+
+      <div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">21<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">70%</span><span class="m-sub m-r">41%</span><span class="m-sub m-r">4,820</span><span class="m-dim">14분 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14l4-4 4 4"></path></svg></span></div>
+
+      <!-- 한 판 펼침 — 화살표를 누르면 그 줄 아래에 팀 스코어보드가 열린다 -->
+      <div style="padding: 1.25rem; border: 1px solid #EDEFF2; border-radius: 16px; background: #FAFBFC;">
+        <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem;">
+          <div>
+            <div style="display: flex; align-items: baseline; gap: 0.375rem; height: 26px;">
+              <span style="font-size: 0.875rem; font-weight: 700; color: #2A5FCC;">승</span>
+              <span style="font-size: 0.875rem; font-weight: 600;">우리 팀</span>
+            </div>
+            <div style="display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 28px; border-bottom: 1px solid #E4E8ED;">
+              <span class="d-th">유저</span><span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">딜량</span>
+            </div>
+            <div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 700; color: #14161A;">달빛조각사</span><span class="m-num">21<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">4,820</span></div>
+            <div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">칼든햄스터</span><span class="m-num">14<span class="m-dot"> · </span><span class="m-death">11</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">3,210</span></div>
+            <div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">새벽두시</span><span class="m-num">12<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">2,880</span></div>
+            <div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">무명연대장</span><span class="m-num">9<span class="m-dot"> · </span><span class="m-death">14</span><span class="m-dot"> · </span>8</span><span class="m-sub m-r">2,140</span></div>
+            <div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">한밤의저격수</span><span class="m-num">7<span class="m-dot"> · </span><span class="m-death">15</span><span class="m-dot"> · </span>2</span><span class="m-sub m-r">1,690</span></div>
+          </div>
+          <div>
+            <div style="display: flex; align-items: baseline; gap: 0.375rem; height: 26px;">
+              <span style="font-size: 0.875rem; font-weight: 700; color: #C4453D;">패</span>
+              <span style="font-size: 0.875rem; font-weight: 600;">상대 팀</span>
+            </div>
+            <div style="display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 28px; border-bottom: 1px solid #E4E8ED;">
+              <span class="d-th">유저</span><span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">딜량</span>
+            </div>
+            <div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">헤드샷장인</span><span class="m-num">18<span class="m-dot"> · </span><span class="m-death">12</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">4,050</span></div>
+            <div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">야간부대장</span><span class="m-num">15<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">3,470</span></div>
+            <div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">삼보급단골</span><span class="m-num">11<span class="m-dot"> · </span><span class="m-death">12</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">2,610</span></div>
+            <div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">웨어하우스지박령</span><span class="m-num">10<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">2,350</span></div>
+            <div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">조용한총잡이</span><span class="m-num">8<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">1,920</span></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mg mr"><span class="lose">패</span><span class="m-mode">일반전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">12<span class="m-dot"> · </span><span class="m-death">16</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">43%</span><span class="m-sub m-r">27%</span><span class="m-sub m-r">2,740</span><span class="m-dim">32분 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+      <div class="mg mr"><span class="win">승</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">24<span class="m-dot"> · </span><span class="m-death">11</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">69%</span><span class="m-sub m-r">44%</span><span class="m-sub m-r">5,610</span><span class="m-dim">1시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+      <div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">데드엔드</span><span class="m-num">19<span class="m-dot"> · </span><span class="m-death">7</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">73%</span><span class="m-sub m-r">39%</span><span class="m-sub m-r">4,380</span><span class="m-dim">1시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+      <div class="mg mr"><span class="lose">패</span><span class="m-mode">일반전</span><span class="d-clip m-map">아지트</span><span class="m-num">25<span class="m-dot"> · </span><span class="m-death">28</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">47%</span><span class="m-sub m-r">31%</span><span class="m-sub m-r">5,940</span><span class="m-dim">2시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+      <div class="mg mr"><span class="win">승</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">17<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>8</span><span class="m-sub m-r">57%</span><span class="m-sub m-r">35%</span><span class="m-sub m-r">3,920</span><span class="m-dim">2시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+      <div class="mg mr"><span class="win">승</span><span class="m-mode">클랜전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">22<span class="m-dot"> · </span><span class="m-death">6</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">79%</span><span class="m-sub m-r">47%</span><span class="m-sub m-r">5,180</span><span class="m-dim">3시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+      <div class="mg mr"><span class="lose">패</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">9<span class="m-dot"> · </span><span class="m-death">14</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">39%</span><span class="m-sub m-r">29%</span><span class="m-sub m-r">2,150</span><span class="m-dim">3시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+      <div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">데드엔드</span><span class="m-num">16<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>11</span><span class="m-sub m-r">64%</span><span class="m-sub m-r">33%</span><span class="m-sub m-r">3,640</span><span class="m-dim">어제 21:40</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+      <div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">20<span class="m-dot"> · </span><span class="m-death">12</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">63%</span><span class="m-sub m-r">38%</span><span class="m-sub m-r">4,510</span><span class="m-dim">어제 21:02</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+      <div class="mg mr"><span class="lose">패</span><span class="m-mode">클랜전</span><span class="d-clip m-map">아지트</span><span class="m-num">11<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>2</span><span class="m-sub m-r">46%</span><span class="m-sub m-r">30%</span><span class="m-sub m-r">2,480</span><span class="m-dim">어제 20:24</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+      <div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">31<span class="m-dot"> · </span><span class="m-death">22</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">58%</span><span class="m-sub m-r">36%</span><span class="m-sub m-r">7,260</span><span class="m-dim">어제 19:51</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+      <div class="mg mr"><span class="win">승</span><span class="m-mode">토너먼트</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">18<span class="m-dot"> · </span><span class="m-death">8</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">69%</span><span class="m-sub m-r">42%</span><span class="m-sub m-r">4,120</span><span class="m-dim">9월 3일</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+      <div class="mg mr" style="border-bottom: none;"><span class="lose">패</span><span class="m-mode">파티 랭크전</span><span class="d-clip m-map">데드엔드</span><span class="m-num">13<span class="m-dot"> · </span><span class="m-death">15</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">46%</span><span class="m-sub m-r">28%</span><span class="m-sub m-r">2,980</span><span class="m-dim">9월 3일</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+
+      <button style="display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 1.25rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">이전 경기 더 보기</button>
+      </section>
+    </div>
+  </div>
+
+  <footer style="display: flex; align-items: center; gap: 1.5rem; padding: 32px 40px 48px; border-top: 1px solid #EDEFF2; font-size: 0.875rem; color: #9BA1A9;">
+    <span style="font-weight: 600; color: #5B6169;">서린즈</span><span>이용약관</span><span>개인정보 처리방침</span><span>문의하기</span>
+    <div style="flex-grow: 1;"></div><span>넥슨 공개 API 기반 · 서든어택 비공식 서비스</span>
+  </footer>
+</div>
+</x-dc>
+</body>
+</html>
@@ -0,0 +1,270 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+  <style>
+/*PRETENDARD*/
+    /* 서린즈 전적 — 맵 탭. 맵이 많아 표 대신 카드 그리드로 편다 */
+    body { margin: 0; }
+    .d-root, .d-root * { box-sizing: border-box; }
+    .d-root {
+      font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
+      -webkit-font-smoothing: antialiased;
+      font-variant-numeric: tabular-nums;
+      letter-spacing: -0.015em;
+    }
+    a { color: #C24A00; text-decoration: none; }
+    a:hover { color: #A03C00; }
+    .d-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
+    .d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
+    .d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    /* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트 (홈과 같은 규칙) */
+    /* 화면 갈래 — 페이지 전체를 가르는 탭이라 폭을 채우지 않고 왼쪽에 붙인다 */
+    .ptab { display: flex; gap: 1.5rem; height: 48px; padding: 0 40px; border-bottom: 1px solid #E4E8ED; }
+    .ptab > span { display: flex; align-items: center; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
+    .ptab > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
+    /* 맵 카드 — 다섯 칸씩 흐르고, 맵이 늘면 줄이 늘어난다 */
+    .mcard { border: 1px solid #EDEFF2; border-radius: 16px; overflow: hidden; background: #FFFFFF; }
+    .mcard-img { display: block; width: 100%; aspect-ratio: 16 / 9; }
+    .mstat { min-width: 0; }
+    .mstat-l { font-size: 0.6875rem; color: #9BA1A9; }
+    .mstat-v { margin-top: 0.1875rem; font-size: 0.875rem; font-weight: 600; }
+    .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
+    .seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
+    .seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
+
+    /* 경기 한 줄 — 머리와 본문이 같은 격자를 쓴다 */
+    .mg { display: grid; grid-template-columns: 44px 128px minmax(0, 1fr) 160px 76px 84px 84px 116px 18px; align-items: center; gap: 0.75rem; }
+    .mh { height: 32px; border-bottom: 1px solid #E4E8ED; }
+    .mr { height: 46px; border-bottom: 1px solid #F3F5F7; }
+    .win { font-size: 0.9375rem; font-weight: 700; color: #2A5FCC; }
+    .lose { font-size: 0.9375rem; font-weight: 700; color: #C4453D; }
+    .m-mode { font-size: 0.875rem; font-weight: 600; }
+    .m-map { font-size: 0.875rem; color: #5B6169; }
+    .m-num { font-size: 0.875rem; font-weight: 600; text-align: right; }
+    /* 데스는 색을 달리해 킬·어시와 눈으로 갈린다 */
+    .m-death { color: #C4453D; }
+    .m-dot { color: #C9CDD3; font-weight: 500; }
+    .m-sub { font-size: 0.8125rem; color: #5B6169; }
+    .m-dim { font-size: 0.8125rem; color: #9BA1A9; text-align: right; }
+    .m-r { text-align: right; }
+
+    /* 요약 레일 */
+    .tile { padding: 0.625rem 0.75rem 0.6875rem; border: 1px solid #EDEFF2; border-radius: 12px; background: #FAFBFC; }
+    .tile-l { font-size: 0.75rem; color: #9BA1A9; }
+    .tile-v { margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; }
+    .d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
+    .d-tab { display: inline-flex; align-items: center; height: 30px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
+    .d-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
+    .season-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
+    .tier-sm { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
+    /* 최근 폼 — 승/패 20칸. 왼쪽이 최근이라 아래 경기 목록과 같은 방향을 가리킨다 */
+    .form-c { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; }
+    .stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px; }
+    /* 크기 막대 — 갈래가 하나뿐이라 색을 나누지 않고 길이로만 읽힌다 */
+    .bar { height: 6px; border-radius: 999px; background: #EDEFF2; }
+    .bar > span { display: block; height: 100%; border-radius: 999px; background: #14161A; }
+    .tier { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
+    .map-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px 72px 72px 72px 80px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7; }
+    .map-thumb { width: 80px; height: 45px; border-radius: 12px; }
+    .sb-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 34px; }
+    .who-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
+    .mode-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px 64px 40px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7; }
+  </style>
+</helmet>
+
+<div class="d-root" style="width: 1440px; min-height: 820px; background: #FFFFFF; color: #14161A;">
+
+  <header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; border-bottom: 1px solid #EDEFF2;">
+    <div style="display: flex; align-items: center; gap: 0.625rem;">
+      <svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
+    </div>
+
+    <nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
+      <span style="font-weight: 500; color: #5B6169;">홈</span>
+      <span style="font-weight: 700;">전적 검색</span>
+      <span style="font-weight: 500; color: #5B6169;">랭킹</span>
+      <span style="font-weight: 500; color: #5B6169;">커뮤니티</span>
+      <span style="font-weight: 500; color: #5B6169;">스트리밍</span>
+      <span style="font-weight: 500; color: #5B6169;">소식</span>
+      <span style="font-weight: 500; color: #5B6169;">이벤트</span>
+    </nav>
+
+    <div style="flex-grow: 1;"></div>
+    <!-- 이 화면에는 히어로 검색창이 없으므로 돋보기를 처음부터 둔다 (홈은 스크롤 뒤에만) -->
+    <span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #F2F4F7;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg></span>
+    <button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
+  </header>
+
+  <!-- 프로필 헤더 — 홈 히어로와 같은 옅은 색면 + 아래 경계선으로 한 층을 만든다 -->
+  <section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2;">
+    <div style="display: flex; align-items: center; gap: 1.25rem; padding: 26px 40px;">
+
+      <span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: #EDEFF2; flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
+
+      <div style="min-width: 0;">
+        <div style="display: flex; align-items: baseline; gap: 0.625rem;">
+          <h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">달빛조각사</h1>
+          <span style="font-size: 0.9375rem; font-weight: 600; color: #5B6169;">중령 2호</span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
+          <span style="font-size: 0.875rem; font-weight: 600;">무명연대</span>
+          <span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
+          <span style="font-size: 0.875rem; color: #9BA1A9;">마지막 플레이 2시간 전</span>
+        </div>
+      </div>
+
+      <div style="flex-grow: 1;"></div>
+
+      <div style="display: flex; align-items: center; gap: 2rem;">
+        <div style="display: flex; align-items: center; gap: 0.625rem;">
+          <span class="tier"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span>
+          <div>
+            <div style="font-size: 0.75rem; color: #9BA1A9;">랭크전 솔로 · 2026 시즌3</div>
+            <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700;">다이아 3</div>
+            <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: #5B6169;">1,842 RP</div>
+          </div>
+        </div>
+        <div style="display: flex; align-items: center; gap: 0.625rem;">
+          <span class="tier"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span>
+          <div>
+            <div style="font-size: 0.75rem; color: #9BA1A9;">랭크전 파티 · 2026 시즌3</div>
+            <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700;">플래티넘 1</div>
+            <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: #5B6169;">1,455 RP</div>
+          </div>
+        </div>
+      </div>
+
+      <span style="width: 1px; height: 48px; background: #E4E8ED; margin: 0 0.5rem;"></span>
+
+      <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 0.4375rem;">
+        <button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>전적 갱신</button>
+        <span style="font-size: 0.8125rem; color: #9BA1A9;">12분 전에 불러왔어요</span>
+      </div>
+    </div>
+  </section>
+
+  <div class="ptab"><span>종합</span><span class="on">맵</span></div>
+
+  <div style="padding: 36px 40px 56px;">
+    <div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
+      <h2 class="d-h2">맵별 성적</h2><div style="flex-grow: 1;"></div>
+      <span style="font-size: 0.8125rem; color: #9BA1A9;">전체 경기 · 많이 한 순서</span>
+    </div>
+    <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem;">
+      <div class="mcard">
+        <span class="mcard-img" style="background: #E4E8ED;"></span>
+        <div style="padding: 0.75rem;">
+          <div style="display: flex; align-items: baseline; gap: 0.5rem;">
+            <span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 700;">제3보급창고</span>
+            <span style="font-size: 0.75rem; color: #9BA1A9;">132판</span>
+          </div>
+          <div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem;">
+            <span style="font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">64<span style="font-size: 1rem;">%</span></span>
+            <span style="font-size: 0.75rem; color: #9BA1A9;">승률</span>
+            <div style="flex-grow: 1;"></div>
+            <span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">84승</span> <span style="font-weight: 700; color: #C4453D;">48패</span></span>
+          </div>
+          <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #F3F5F7;">
+            <div class="mstat"><div class="mstat-l">킬뎃</div><div class="mstat-v">61%</div></div>
+            <div class="mstat"><div class="mstat-l">헤드샷</div><div class="mstat-v">37%</div></div>
+            <div class="mstat"><div class="mstat-l">경기당 딜량</div><div class="mstat-v">4,480</div></div>
+          </div>
+        </div>
+      </div>
+      <div class="mcard">
+        <span class="mcard-img" style="background: #EAE6E0;"></span>
+        <div style="padding: 0.75rem;">
+          <div style="display: flex; align-items: baseline; gap: 0.5rem;">
+            <span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 700;">웨어하우스</span>
+            <span style="font-size: 0.75rem; color: #9BA1A9;">96판</span>
+          </div>
+          <div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem;">
+            <span style="font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">53<span style="font-size: 1rem;">%</span></span>
+            <span style="font-size: 0.75rem; color: #9BA1A9;">승률</span>
+            <div style="flex-grow: 1;"></div>
+            <span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">51승</span> <span style="font-weight: 700; color: #C4453D;">45패</span></span>
+          </div>
+          <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #F3F5F7;">
+            <div class="mstat"><div class="mstat-l">킬뎃</div><div class="mstat-v">56%</div></div>
+            <div class="mstat"><div class="mstat-l">헤드샷</div><div class="mstat-v">34%</div></div>
+            <div class="mstat"><div class="mstat-l">경기당 딜량</div><div class="mstat-v">4,120</div></div>
+          </div>
+        </div>
+      </div>
+      <div class="mcard">
+        <span class="mcard-img" style="background: #E2E9E6;"></span>
+        <div style="padding: 0.75rem;">
+          <div style="display: flex; align-items: baseline; gap: 0.5rem;">
+            <span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 700;">크로스카운터</span>
+            <span style="font-size: 0.75rem; color: #9BA1A9;">88판</span>
+          </div>
+          <div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem;">
+            <span style="font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">60<span style="font-size: 1rem;">%</span></span>
+            <span style="font-size: 0.75rem; color: #9BA1A9;">승률</span>
+            <div style="flex-grow: 1;"></div>
+            <span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">53승</span> <span style="font-weight: 700; color: #C4453D;">35패</span></span>
+          </div>
+          <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #F3F5F7;">
+            <div class="mstat"><div class="mstat-l">킬뎃</div><div class="mstat-v">58%</div></div>
+            <div class="mstat"><div class="mstat-l">헤드샷</div><div class="mstat-v">38%</div></div>
+            <div class="mstat"><div class="mstat-l">경기당 딜량</div><div class="mstat-v">4,310</div></div>
+          </div>
+        </div>
+      </div>
+      <div class="mcard">
+        <span class="mcard-img" style="background: #E8E4EC;"></span>
+        <div style="padding: 0.75rem;">
+          <div style="display: flex; align-items: baseline; gap: 0.5rem;">
+            <span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 700;">데드엔드</span>
+            <span style="font-size: 0.75rem; color: #9BA1A9;">61판</span>
+          </div>
+          <div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem;">
+            <span style="font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">48<span style="font-size: 1rem;">%</span></span>
+            <span style="font-size: 0.75rem; color: #9BA1A9;">승률</span>
+            <div style="flex-grow: 1;"></div>
+            <span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">29승</span> <span style="font-weight: 700; color: #C4453D;">32패</span></span>
+          </div>
+          <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #F3F5F7;">
+            <div class="mstat"><div class="mstat-l">킬뎃</div><div class="mstat-v">53%</div></div>
+            <div class="mstat"><div class="mstat-l">헤드샷</div><div class="mstat-v">32%</div></div>
+            <div class="mstat"><div class="mstat-l">경기당 딜량</div><div class="mstat-v">3,940</div></div>
+          </div>
+        </div>
+      </div>
+      <div class="mcard">
+        <span class="mcard-img" style="background: #DDE4EE;"></span>
+        <div style="padding: 0.75rem;">
+          <div style="display: flex; align-items: baseline; gap: 0.5rem;">
+            <span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 700;">아지트</span>
+            <span style="font-size: 0.75rem; color: #9BA1A9;">43판</span>
+          </div>
+          <div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem;">
+            <span style="font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">42<span style="font-size: 1rem;">%</span></span>
+            <span style="font-size: 0.75rem; color: #9BA1A9;">승률</span>
+            <div style="flex-grow: 1;"></div>
+            <span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">18승</span> <span style="font-weight: 700; color: #C4453D;">25패</span></span>
+          </div>
+          <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #F3F5F7;">
+            <div class="mstat"><div class="mstat-l">킬뎃</div><div class="mstat-v">48%</div></div>
+            <div class="mstat"><div class="mstat-l">헤드샷</div><div class="mstat-v">30%</div></div>
+            <div class="mstat"><div class="mstat-l">경기당 딜량</div><div class="mstat-v">3,720</div></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <footer style="display: flex; align-items: center; gap: 1.5rem; padding: 32px 40px 48px; border-top: 1px solid #EDEFF2; font-size: 0.875rem; color: #9BA1A9;">
+    <span style="font-weight: 600; color: #5B6169;">서린즈</span><span>이용약관</span><span>개인정보 처리방침</span><span>문의하기</span>
+    <div style="flex-grow: 1;"></div><span>넥슨 공개 API 기반 · 서든어택 비공식 서비스</span>
+  </footer>
+</div>
+</x-dc>
+</body>
+</html>
@@ -0,0 +1,306 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+  <style>
+/*PRETENDARD*/
+    /* 서린즈 전적 — 없는 닉네임 · 첫 조회 · 갱신 중 · 불러오기 실패 */
+    body { margin: 0; }
+    .d-root, .d-root * { box-sizing: border-box; }
+    .d-root {
+      font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
+      -webkit-font-smoothing: antialiased;
+      font-variant-numeric: tabular-nums;
+      letter-spacing: -0.015em;
+    }
+    a { color: #C24A00; text-decoration: none; }
+    a:hover { color: #A03C00; }
+    .d-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
+    .d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
+    .d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    /* 점선 라벨 — 설명용이고 실제 화면에는 없다 */
+    .an { display: inline-flex; align-items: center; height: 22px; padding: 0 0.5rem; border: 1px dashed #C9CDD3; border-radius: 5px; font-size: 0.6875rem; font-weight: 600; color: #7A828C; letter-spacing: -0.01em; }
+    .frame { border: 1px solid #E4E8ED; border-radius: 16px; overflow: hidden; background: #FFFFFF; }
+
+    .st { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; border: 1px solid #EDEFF2; border-radius: 16px; background: #FAFBFC; text-align: center; }
+    .st-t { margin: 0; font-size: 0.875rem; line-height: 1.6; color: #5B6169; max-width: 22rem; }
+    .st-s { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: #9BA1A9; }
+    .st-b { display: inline-flex; align-items: center; height: 36px; padding: 0 1rem; border: 1px solid #D6DAE0; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: #14161A; cursor: pointer; }
+    .st-i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #F2F4F7; }
+
+    .ptab { display: flex; gap: 1.5rem; height: 48px; padding: 0 40px; border-bottom: 1px solid #E4E8ED; }
+    .ptab > span { display: flex; align-items: center; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
+    .ptab > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
+    .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
+    .seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
+    .seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
+    .mg { display: grid; grid-template-columns: 44px 128px minmax(0, 1fr) 160px 76px 84px 84px 116px 18px; align-items: center; gap: 0.75rem; }
+    .mh { height: 32px; border-bottom: 1px solid #E4E8ED; }
+    .mr { height: 46px; border-bottom: 1px solid #F3F5F7; }
+    .win { font-size: 0.9375rem; font-weight: 700; color: #2A5FCC; }
+    .lose { font-size: 0.9375rem; font-weight: 700; color: #C4453D; }
+    .m-mode { font-size: 0.875rem; font-weight: 600; }
+    .m-map { font-size: 0.875rem; color: #5B6169; }
+    .m-num { font-size: 0.875rem; font-weight: 600; text-align: right; }
+    /* 데스는 색을 달리해 킬·어시와 눈으로 갈린다 */
+    .m-death { color: #C4453D; }
+    .m-dot { color: #C9CDD3; font-weight: 500; }
+    .m-sub { font-size: 0.8125rem; color: #5B6169; }
+    .m-dim { font-size: 0.8125rem; color: #9BA1A9; text-align: right; }
+    .m-r { text-align: right; }
+    .tier { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
+    .brand-btn { display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer; }
+    .nav { display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem; }
+    .nav > span { font-weight: 500; color: #5B6169; }
+    .nav > .on { font-weight: 700; color: #14161A; }
+    .hdr { display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; border-bottom: 1px solid #EDEFF2; }
+    .ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #F2F4F7; }
+    .login { height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .spin { animation: spin 1s linear infinite; }
+    @media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
+  </style>
+</helmet>
+
+<div class="d-root" style="width: 1560px; min-height: 3060px; padding: 48px 59px 60px; background: #FFFFFF; color: #14161A;">
+
+  <h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">전적 — 없는 닉네임 · 첫 조회 · 갱신 중 · 실패</h1>
+  <p style="margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B6169; max-width: 68rem;">전적 화면에서 실제로 가장 자주 마주치는 네 가지입니다. 점선 라벨은 설명용이고 실제 화면에는 없습니다. 프로필과 경기 기록은 서로 다른 응답이라, 한쪽만 실패하거나 한쪽만 늦게 도착할 수 있습니다 — 홈에서 정한 「섹션별로 따로 채운다」와 같은 규칙입니다.</p>
+
+  <!-- ① 없는 닉네임 -->
+  <div style="display: flex; align-items: center; gap: 0.625rem; margin-top: 2.25rem;">
+    <span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">① 없는 닉네임</span>
+    <span class="an">비어 있음 · 실패 아님</span>
+    <span style="font-size: 0.8125rem; color: #9BA1A9;">넥슨에 그 닉네임이 없을 때</span>
+  </div>
+  <div class="frame" style="margin-top: 0.75rem;">
+    <div style="width: 1440px;">
+      <header class="hdr">
+        <svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
+        <nav class="nav"><span>홈</span><span class="on">전적 검색</span><span>랭킹</span><span>커뮤니티</span><span>스트리밍</span><span>소식</span><span>이벤트</span></nav>
+        <div style="flex-grow: 1;"></div>
+        <span class="ico"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg></span>
+        <button class="login">로그인</button>
+      </header>
+
+      <div style="padding: 96px 40px 104px;">
+        <div class="st" style="min-height: 268px; max-width: 640px; margin: 0 auto;">
+          <span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg></span>
+          <p class="st-t" style="font-size: 0.9375rem; color: #14161A; font-weight: 600;">「야간부대장77」 님을 찾지 못했어요</p>
+          <p class="st-s">닉네임 철자와 띄어쓰기를 다시 확인해 주세요. 서든어택에서 닉네임을 바꿨다면 바뀐 닉네임으로 찾을 수 있어요.</p>
+          <div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem;">
+            <button class="st-b">다시 검색하기</button>
+          </div>
+          <div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem;">
+            <span style="font-size: 0.875rem; color: #9BA1A9;">이런 닉네임을 찾으셨나요?</span>
+            <span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #DDE4EE;"></span>야간부대장</span>
+            <span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #E7E3D8;"></span>야간부대장7</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ② 첫 조회 -->
+  <div style="display: flex; align-items: center; gap: 0.625rem; margin-top: 2.5rem;">
+    <span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">② 첫 조회</span>
+    <span class="an">비어 있음</span>
+    <span style="font-size: 0.8125rem; color: #9BA1A9;">유저는 있지만 서린즈가 아직 경기를 가져온 적 없을 때 — 프로필은 넥슨 기본 정보라 바로 나온다</span>
+  </div>
+  <div class="frame" style="margin-top: 0.75rem;">
+    <div style="width: 1440px;">
+      <header class="hdr">
+        <svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
+        <nav class="nav"><span>홈</span><span class="on">전적 검색</span><span>랭킹</span><span>커뮤니티</span><span>스트리밍</span><span>소식</span><span>이벤트</span></nav>
+        <div style="flex-grow: 1;"></div>
+        <span class="ico"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg></span>
+        <button class="login">로그인</button>
+      </header>
+
+      <section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2;">
+        <div style="display: flex; align-items: center; gap: 1.25rem; padding: 26px 40px;">
+          <span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: #EDEFF2; flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
+          <div style="min-width: 0;">
+            <div style="display: flex; align-items: baseline; gap: 0.625rem;">
+              <h2 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">새벽두시</h2>
+              <span style="font-size: 0.9375rem; font-weight: 600; color: #5B6169;">대위 4호</span>
+            </div>
+            <div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
+              <span style="font-size: 0.875rem; color: #9BA1A9;">클랜 없음</span>
+              <span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
+              <span style="font-size: 0.875rem; color: #9BA1A9;">마지막 플레이 3일 전</span>
+            </div>
+          </div>
+          <div style="flex-grow: 1;"></div>
+          <div style="display: flex; align-items: center; gap: 0.625rem;">
+            <span class="tier"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span>
+            <div>
+              <div style="font-size: 0.75rem; color: #9BA1A9;">랭크전</div>
+              <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #9BA1A9;">배치 전</div>
+            </div>
+          </div>
+          <span style="width: 1px; height: 48px; background: #E4E8ED; margin: 0 0.5rem;"></span>
+          <!-- 첫 조회에서는 같은 버튼의 이름만 「전적 불러오기」로 바뀐다. 본문에 같은 버튼을 하나 더 두지 않는다 -->
+          <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 0.4375rem;">
+            <button class="brand-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>전적 불러오기</button>
+            <span style="font-size: 0.8125rem; color: #9BA1A9;">아직 불러온 적 없어요</span>
+          </div>
+        </div>
+      </section>
+
+      <div class="ptab"><span class="on">종합</span><span>맵</span></div>
+
+      <div style="padding: 36px 40px 56px;">
+        <div class="st" style="min-height: 320px;">
+          <span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 6.5h15"></path><path d="M4.5 12h15"></path><path d="M4.5 17.5h9"></path></svg></span>
+          <p class="st-t" style="font-size: 0.9375rem; color: #14161A; font-weight: 600;">아직 불러온 경기가 없어요</p>
+          <p class="st-s">위에 있는 전적 불러오기 버튼을 누르면 최근 경기부터 정리해 드릴게요. 처음 한 번은 30초쯤 걸려요.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ③ 갱신 중 -->
+  <div style="display: flex; align-items: center; gap: 0.625rem; margin-top: 2.5rem;">
+    <span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">③ 갱신 중</span>
+    <span class="an">화면 위쪽만 잘라 보여 줌</span>
+    <span style="font-size: 0.8125rem; color: #9BA1A9;">이미 보고 있던 내용은 지우지 않는다 — 버튼만 진행 상태가 되고, 모드 필터는 「전체」로 돌아간다</span>
+  </div>
+  <div class="frame" style="margin-top: 0.75rem;">
+    <div style="width: 1440px;">
+      <section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2;">
+        <div style="display: flex; align-items: center; gap: 1.25rem; padding: 26px 40px;">
+          <span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: #EDEFF2; flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
+          <div style="min-width: 0;">
+            <div style="display: flex; align-items: baseline; gap: 0.625rem;">
+              <h2 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">달빛조각사</h2>
+              <span style="font-size: 0.9375rem; font-weight: 600; color: #5B6169;">중령 2호</span>
+            </div>
+            <div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
+                  <span style="font-size: 0.875rem; font-weight: 600;">무명연대</span>
+              <span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
+              <span style="font-size: 0.875rem; color: #9BA1A9;">마지막 플레이 2시간 전</span>
+            </div>
+          </div>
+          <div style="flex-grow: 1;"></div>
+          <div style="display: flex; align-items: center; gap: 0.625rem;">
+            <span class="tier"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span>
+            <div>
+              <div style="font-size: 0.75rem; color: #9BA1A9;">랭크전 솔로 · 2026 시즌3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700;">다이아 3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: #5B6169;">1,842 RP</div>
+            </div>
+          </div>
+          <span style="width: 1px; height: 48px; background: #E4E8ED; margin: 0 0.5rem;"></span>
+          <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 0.4375rem;">
+            <button class="brand-btn" style="background: #D95A00;"><svg class="spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round"><path d="M12 4a8 8 0 018 8"></path><path d="M12 20a8 8 0 01-8-8" opacity="0.45"></path></svg>불러오는 중</button>
+            <span style="font-size: 0.8125rem; color: #9BA1A9;">새로 올라온 경기를 확인하고 있어요</span>
+          </div>
+        </div>
+      </section>
+
+      <div class="ptab"><span class="on">종합</span><span>맵</span></div>
+
+      <div style="padding: 36px 40px 32px;">
+        <div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
+          <span class="d-h2">경기 기록</span>
+          <div style="flex-grow: 1;"></div>
+          <span style="font-size: 0.8125rem; color: #9BA1A9;">9월 5일 18:08 기준</span>
+        </div>
+        <div class="seg"><span class="on">전체</span><span>랭크전</span><span>클랜전</span><span>토너먼트</span><span>일반전</span></div>
+        <div class="mg mh" style="margin-top: 0.25rem;">
+          <span class="d-th">결과</span><span class="d-th">모드</span><span class="d-th">맵</span>
+          <span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">킬뎃</span><span class="d-th m-r">헤드샷</span><span class="d-th m-r">딜량</span>
+          <span class="d-th m-r">시각</span><span></span>
+        </div>
+        <div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">21<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">70%</span><span class="m-sub m-r">41%</span><span class="m-sub m-r">4,820</span><span class="m-dim">14분 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+        <div class="mg mr"><span class="lose">패</span><span class="m-mode">일반전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">12<span class="m-dot"> · </span><span class="m-death">16</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">43%</span><span class="m-sub m-r">27%</span><span class="m-sub m-r">2,740</span><span class="m-dim">32분 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+        <div class="mg mr" style="border-bottom: none;"><span class="win">승</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">24<span class="m-dot"> · </span><span class="m-death">11</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">69%</span><span class="m-sub m-r">44%</span><span class="m-sub m-r">5,610</span><span class="m-dim">1시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ④ 불러오기 실패 -->
+  <div style="display: flex; align-items: center; gap: 0.625rem; margin-top: 2.5rem;">
+    <span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">④ 경기 기록 실패</span>
+    <span class="an">실패</span>
+    <span style="font-size: 0.8125rem; color: #9BA1A9;">프로필은 다른 응답이라 그대로 남는다 — 실패한 쪽만 다시 부른다</span>
+  </div>
+  <div class="frame" style="margin-top: 0.75rem;">
+    <div style="width: 1440px;">
+      <header class="hdr">
+        <svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
+        <nav class="nav"><span>홈</span><span class="on">전적 검색</span><span>랭킹</span><span>커뮤니티</span><span>스트리밍</span><span>소식</span><span>이벤트</span></nav>
+        <div style="flex-grow: 1;"></div>
+        <span class="ico"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg></span>
+        <button class="login">로그인</button>
+      </header>
+
+      <section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2;">
+        <div style="display: flex; align-items: center; gap: 1.25rem; padding: 26px 40px;">
+          <span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: #EDEFF2; flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
+          <div style="min-width: 0;">
+            <div style="display: flex; align-items: baseline; gap: 0.625rem;">
+              <h2 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">달빛조각사</h2>
+              <span style="font-size: 0.9375rem; font-weight: 600; color: #5B6169;">중령 2호</span>
+            </div>
+            <div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
+                  <span style="font-size: 0.875rem; font-weight: 600;">무명연대</span>
+              <span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
+              <span style="font-size: 0.875rem; color: #9BA1A9;">마지막 플레이 2시간 전</span>
+            </div>
+          </div>
+          <div style="flex-grow: 1;"></div>
+          <div style="display: flex; align-items: center; gap: 0.625rem;">
+            <span class="tier"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span>
+            <div>
+              <div style="font-size: 0.75rem; color: #9BA1A9;">랭크전 솔로 · 2026 시즌3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700;">다이아 3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: #5B6169;">1,842 RP</div>
+            </div>
+          </div>
+          <span style="width: 1px; height: 48px; background: #E4E8ED; margin: 0 0.5rem;"></span>
+          <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 0.4375rem;">
+            <button class="brand-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>전적 갱신</button>
+            <span style="font-size: 0.8125rem; color: #9BA1A9;">12분 전에 불러왔어요</span>
+          </div>
+        </div>
+      </section>
+
+      <div class="ptab"><span class="on">종합</span><span>맵</span></div>
+
+      <div style="display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; padding: 36px 40px 56px;">
+        <div>
+          <div style="display: flex; align-items: baseline;">
+            <span class="d-h2">동향 스탯</span>
+          </div>
+          <div class="st" style="min-height: 300px; margin-top: 0.875rem;">
+            <span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5v5"></path><path d="M12 16h.01"></path></svg></span>
+            <p class="st-t">일시적인 오류가 생겼어요.<br>잠시 후 다시 시도해 주세요.</p>
+            <button class="st-b">다시 시도</button>
+          </div>
+        </div>
+        <div>
+          <div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
+            <span class="d-h2">경기 기록</span>
+          </div>
+          <div class="seg"><span class="on">전체</span><span>랭크전</span><span>클랜전</span><span>토너먼트</span><span>일반전</span></div>
+          <div class="st" style="min-height: 288px; margin-top: 1rem;">
+            <span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5v5"></path><path d="M12 16h.01"></path></svg></span>
+            <p class="st-t">일시적인 오류가 생겼어요.<br>잠시 후 다시 시도해 주세요.</p>
+            <button class="st-b">다시 시도</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+</x-dc>
+</body>
+</html>