feat: 전적 화면에 프로필 카드와 배경 커스터마이즈 추가

전적 화면을 자기 계정처럼 꾸밀 수 있게 했다. 프로필 층에 배경 사진이 깔리고, 「프로필 카드 보기」로 열면 원본 비율 배너 + 프로필 한 장이 된다. 프로필 카드 - 닫힌 상태는 지금 높이 그대로다(132px). 배경을 넣지 않은 사람은 옅은 색면 그대로. - 열면 1440 폭에 16:9 원본이라 810px. 사진 위쪽 462px 가 드러나고, 아래 348px 받침 위에 기본 · 티어 · 간단 스탯(승률 · 킬뎃 · 헤드샷 · 경기당 딜량 · 주무기)이 한 장으로 모인다. 값은 전부 왼쪽 레일 「최근 동향」과 같은 값이라 따로 세지 않는다. - 받침은 «세로» 방향이다. 가로 스크림은 왼쪽이 밝은 사진에만 들어, 오른쪽이 밝은 사진에서 티어와 갱신 캡션이 무너진다. 얇은 띠에서는 글자를 지키려면 사진을 덮어야 하고, 그래서 카드를 여는 쪽이 답이다. 신고와 소유 인증 - 배경은 누구나 볼 수 있다. 그래서 남의 카드에는 신고가 붙는다. 사진 오른쪽 위 한 자리를 주인과 남이 나눠 쓴다 — 내 화면이면 「배경 고르기」, 남의 화면이면 「신고」. - 신고는 카드 «안»에서만 닿는다. 배경이 문제인지 판단하려면 배경을 봐야 한다. - 둘째 줄 끝에 소유 인증 알약을 뒀다 — 「내 계정」 또는 「밤하늘 님이 연동한 계정」. 첫 줄(닉네임 · 계급)은 게임 안의 정체라 건드리지 않았다. 오른쪽 컨트롤 정리 - 「12분 전에 불러왔어요」를 갱신 버튼 아래에서 왼쪽 인라인으로 옮겼다. 아래에 매달리면 그 덩어리만 66px 이 되어 옆 42px 버튼과 줄이 맞지 않는다. - 한 상태에 보조 버튼은 하나. 보조는 주 동작과 같은 42px, 면만 없는 급으로 통일했다. - 첫 조회에는 「프로필 카드 보기」를 두지 않는다 — 아직 열 카드가 없다. 문구 · 데이터 - 「동향 스탯」을 「최근 동향」으로 바꿨다. - 클랜별 전적에서 소속 기간을 뺐다. 언제부터 언제까지 어느 클랜이었는지는 넥슨에서 알 수 없다. 한 줄이 이름 · 판수 · 승률 셋뿐이라 행 높이를 38px 로 맞췄다. 기본 요소에 올려야 할 값 - 어두운 면 위의 승/패 — 승 #7BA4FF · 패 #F0857C (흰 바탕용과 색상각은 같다) - 어두운 면 위의 크기 막대 — 바탕 rgba(255,255,255,0.20) · 먹 #FFFFFF - 보조 버튼 42px 두 벌 (흰 바탕용 · 어두운 면용) 빌드 make-bg-directions.mjs 가 프로필 층을 만들어 Main · Maps 에 적고, 카드 상태 아트보드 셋(내 전적 · 남의 전적 · 신고)을 낸다. 셋은 프로필 층 아래 본문을 Main.dc.html 에서 그대로 잘라 쓴다 — 사본을 두면 기본 시안과 어긋난다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TG44xZZ39K8vEz418bX4K2
...
2026-09-11 15:54:04 +09:00 · 2026-09-11 01:52:11 +09:00
18 changed files with 2948 additions and 269 deletions
@@ -0,0 +1,405 @@
+// 배경 커스터마이즈 방향 아트보드를 만든다.
+//
+//   BannerOpen.dc.html  프로필 카드 열림 (원본 16:9 · 810px)
+//
+// 배경을 「화면 전체」에 까는 안과 「서린즈가 고른 배경만 허용」하는 안은 접었다.
+// 둘을 비교하던 아트보드(BgBand · BgPhoto · BgFull)는 결정이 끝나 지웠고, 고른 이유는 캔버스 메모에 남겼다.
+// 비교가 목적이라 Main.dc.html 의 <style> 블록과 표 규격을 그대로 물려받는다.
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const TPL = 'templates-record';
+const main = readFileSync(join(TPL, 'Main.dc.html'), 'utf8');
+const style = main.match(/<helmet>\s*([\s\S]*?)\s*<\/helmet>/)[1];
+
+// 프로필 층 아래(화면 갈래 탭 · 본문 · 푸터)를 Main 에서 그대로 가져온다.
+// 배경이 본문 전체와 어떻게 부딪히는지 보려면 본문이 «전부» 있어야 한다.
+const NL = String.fromCharCode(10);
+const restStart = main.indexOf('  <div class="ptab">');
+const restEnd = main.lastIndexOf('</x-dc>');
+const restRaw = main.slice(restStart, restEnd).trimEnd();
+// 마지막 </div> 는 뿌리 요소를 닫는 것이라 뺀다 — page() 가 다시 닫는다
+const REST = restRaw.slice(0, restRaw.lastIndexOf('</div>')) + NL;
+
+const LOGO = (stroke) =>
+  `<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="${stroke}" 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>`;
+
+const NAV = [
+  ['홈', 500, true], ['전적 검색', 700, false], ['랭킹', 500, true],
+  ['커뮤니티', 500, true], ['스트리밍', 500, true], ['소식', 500, true], ['이벤트', 500, true],
+];
+
+// 상단 전역 바. dark=true 는 배경 위에 얹히는 경우(C)만 쓴다.
+// inner 를 주면 그 폭의 기둥 안에 내용을 넣는다 — C 의 본문 카드와 기준선을 맞추기 위해서다.
+function gnb(dark, inner) {
+  const dim = dark ? 'rgba(255,255,255,0.62)' : '#5B6169';
+  const nav = NAV.map(([t, w, d]) => `<span style="font-weight: ${w};${d ? ` color: ${dim};` : ''}">${t}</span>`).join('');
+  const skin = dark
+    ? { bar: 'background: rgba(10,12,16,0.72); border-bottom: 1px solid rgba(255,255,255,0.12);', ink: '#FFFFFF', pill: 'rgba(255,255,255,0.14)' }
+    : { bar: 'border-bottom: 1px solid #EDEFF2;', ink: '#14161A', pill: '#F2F4F7' };
+  const row = `<div style="display: flex; align-items: center; gap: 1.75rem; height: 72px;${inner ? ` width: ${inner}px; margin: 0 auto;` : ' padding: 0 40px;'}">
+      <div style="display: flex; align-items: center; gap: 0.625rem;">${LOGO(skin.ink)}</div>
+      <nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem; color: ${skin.ink};">${nav}</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: ${skin.pill};"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="${skin.ink}" 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: ${skin.pill}; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: ${skin.ink}; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
+    </div>`;
+  return `  <header style="${skin.bar}">
+    ${row}
+  </header>
+`;
+}
+
+// ─────────────────────────────────────────────────────────────
+// 배경 그림 — 실제 에셋 자리다. 바깥에서 파일을 받을 수 없으므로 그라데이션과
+// 도형으로 대신 그렸다. 판단에 필요한 것은 "이 정도로 복잡한 면 위에서 글자가
+// 읽히는가" 뿐이라 이걸로 충분하다.
+// ─────────────────────────────────────────────────────────────
+
+// 서린즈가 고른 배경 — 브랜드 안에서 놀기 때문에 처음부터 어둡고 조용하다.
+// 주황 블룸은 왼쪽 위로 옮겼다 — 오른쪽에 두면 같은 주황인 「전적 갱신」 버튼과 겹친다.
+const ART_PRESET = `background:
+        repeating-linear-gradient(115deg, rgba(255,255,255,0.028) 0 2px, rgba(255,255,255,0) 2px 9px),
+        radial-gradient(110% 150% at 14% -40%, rgba(255,106,0,0.46) 0%, rgba(255,106,0,0) 56%),
+        radial-gradient(95% 130% at 92% 130%, rgba(42,95,204,0.42) 0%, rgba(42,95,204,0) 62%),
+        linear-gradient(135deg, #14161A 0%, #1E232B 52%, #0D0F12 100%);`;
+
+// 사용자가 올린 사진 — 무엇이든 올 수 있다는 걸 보이려고 일부러 밝고 어수선하게,
+// 닉네임이 앉는 왼쪽 위에 가장 밝은 덩어리를 뒀다 (최악의 경우)
+const ART_PHOTO = `background:
+        radial-gradient(55% 85% at 20% 26%, rgba(255,244,214,0.96) 0%, rgba(255,206,120,0.55) 38%, rgba(255,170,60,0) 72%),
+        radial-gradient(70% 110% at 78% 82%, rgba(126,196,255,0.45) 0%, rgba(126,196,255,0) 62%),
+        linear-gradient(158deg, #8A6A3C 0%, #3A4B58 54%, #0F171E 100%);`;
+
+// 창고 맵 실루엣 — 사진처럼 보이게 하는 최소한의 형태
+const crates = (height, opacity) =>
+  `<svg viewBox="0 0 1440 200" preserveAspectRatio="none" style="position: absolute; inset: auto 0 0 0; width: 100%; height: ${height}; opacity: ${opacity};" aria-hidden="true"><path d="M0 200V128h96v-28h84v28h58V84h132v116z" fill="#0B1116"></path><path d="M470 200v-52h74v-30h96v30h52v52z" fill="#0E151B"></path><path d="M792 200v-84h120v-22h74v22h66v84z" fill="#0B1116"></path><path d="M1128 200v-44h92v-34h120v78z" fill="#0E151B"></path></svg>`;
+
+// 글자 받침 — 아래에서 위로 어두워지는 판.
+// 가로 방향 스크림은 왼쪽이 밝은 사진에만 듣는다. 어느 쪽이 밝을지 모르는 사용자
+// 사진에서는 글자가 앉는 «면» 자체를 눌러야 한다. height 는 판이 덮는 높이.
+const PLATE = (strength, height = '100%') =>
+  `<span style="position: absolute; inset: auto 0 0 0; height: ${height}; background: linear-gradient(to top, rgba(6,8,11,${strength}) 0%, rgba(6,8,11,${(strength * 0.86).toFixed(2)}) 46%, rgba(6,8,11,${(strength * 0.34).toFixed(2)}) 100%);" aria-hidden="true"></span>`;
+
+const HEX = (stroke) =>
+  `<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="${stroke}" 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>`;
+
+const REFRESH_ICON = `<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>`;
+
+const PIC_ICON = (stroke) =>
+  `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="14" rx="2.5"></rect><path d="M3.5 15.5l4.5-4 4 3.5 3.5-3 5 4.5"></path><circle cx="9" cy="9.5" r="1.4"></circle></svg>`;
+
+// 배경을 바꾸는 문. 제 화면임이 확인된 사람에게만 보인다.
+// onDark=false 는 흰 카드 위(C)에 올라가는 경우다.
+// 보조 버튼 — 주 동작(전적 갱신)과 같은 42px 이되 면이 없는 급.
+// 오른쪽 끝에 여러 개가 모이면 난잡해지므로, 한 상태에 보조는 «하나»만 둔다.
+const ghostButton = (label, icon, onDark = true) => {
+  const skin = onDark
+    ? 'border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF;'
+    : 'border: 1px solid #E4E8ED; background: #FFFFFF; color: #14161A;';
+  return `<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; ${skin} font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;">${icon}${label}</button>`;
+};
+
+const pickButton = (onDark = true) =>
+  ghostButton('배경 고르기', PIC_ICON(onDark ? '#FFFFFF' : '#14161A'), onDark);
+
+const CHEV = (up) =>
+  `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="${up ? 'M8 14l4-4 4 4' : 'M8 10l4 4 4-4'}"></path></svg>`;
+
+// 프로필 카드를 열고 닫는 문
+const cardButton = (open) =>
+  ghostButton(open ? '카드 그만 보기' : '프로필 카드 보기', CHEV(open), true);
+
+// ── 소유 인증 표시 ───────────────────────────────────────────
+// 전적 화면은 셋 중 한 상태다:
+//   mine   — 내가 연동한 내 계정. 배경을 고칠 수 있다.
+//   linked — 남이 연동해 둔 계정. 누가 연동했는지(서린즈 계정)를 밝히고, 신고로 닿는다.
+//   none   — 아무도 연동하지 않은 계정. 표시가 없고 꾸밀 수도 없다 (로딩·상태 아트보드의 모습).
+// 자리는 둘째 줄 끝이다. 첫 줄(닉네임 · 계급)은 «게임 안»의 정체라 건드리지 않는다 —
+// 연동은 서린즈 쪽 사실이므로 클랜 · 마지막 플레이와 같은 줄에 둔다.
+const CHECK_ICON = (ink) =>
+  `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="${ink}" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M8 12.4l2.6 2.6L16 9.6"></path></svg>`;
+const PERSON_ICON = (ink) =>
+  `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="${ink}" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"></circle><path d="M5.5 19.5c0-3.4 2.9-5.6 6.5-5.6s6.5 2.2 6.5 5.6"></path></svg>`;
+
+function ownerChip(owner, onDark) {
+  if (owner === 'none') return '';
+  const ink = onDark ? '#FFFFFF' : '#14161A';
+  const skin = onDark
+    ? 'background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24);'
+    : 'background: #FFFFFF; border: 1px solid #E4E8ED;';
+  const [icon, label] = owner === 'mine'
+    ? [CHECK_ICON(ink), '내 계정']
+    : [PERSON_ICON(ink), '밤하늘 님이 연동한 계정'];
+  return `<span style="display: inline-flex; align-items: center; gap: 0.3125rem; height: 24px; padding: 0 0.625rem; border-radius: 999px; ${skin} font-size: 0.75rem; font-weight: 600; color: ${ink}; white-space: nowrap;">${icon}${label}</span>`;
+}
+
+// 프로필 한 줄 — onDark 면 배경 위(흰 글자), 아니면 지금 그대로(검은 글자)
+function profile({ onDark, pad = 34, secondary = '', owner = 'linked' }) {
+  const ink = onDark ? '#FFFFFF' : '#14161A';
+  const sub = onDark ? 'rgba(255,255,255,0.78)' : '#5B6169';
+  const dim = onDark ? 'rgba(255,255,255,0.68)' : '#9BA1A9';
+  const tile = onDark ? 'rgba(255,255,255,0.18)' : '#EDEFF2';
+  const rule = onDark ? 'rgba(255,255,255,0.30)' : '#E4E8ED';
+  const glyph = onDark ? 'rgba(255,255,255,0.88)' : '#7A828C';
+  const tiers = [['랭크전 솔로 · 2026 시즌3', '다이아 3', '1,842 RP'], ['랭크전 파티 · 2026 시즌3', '플래티넘 1', '1,455 RP']];
+  return `<div style="display: flex; align-items: center; gap: 1.25rem; padding: ${pad}px 40px;">
+
+  <span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: ${tile}; flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="${glyph}" 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; color: ${ink};">달빛조각사</h1>
+      <span style="font-size: 0.9375rem; font-weight: 600; color: ${sub};">중령 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; color: ${ink};">무명연대</span>
+      <span style="width: 1px; height: 12px; background: ${rule};"></span>
+      <span style="font-size: 0.875rem; color: ${dim};">마지막 플레이 2시간 전</span>
+      ${owner === 'none' ? '' : `<span style="width: 1px; height: 12px; background: ${rule};"></span>${ownerChip(owner, onDark)}`}
+    </div>
+  </div>
+
+  <div style="flex-grow: 1;"></div>
+
+  <div style="display: flex; align-items: center; gap: 2rem;">
+    ${tiers.map(([l, t, rp]) => `<div style="display: flex; align-items: center; gap: 0.625rem;">
+      <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: ${tile}; flex-shrink: 0;">${HEX(glyph)}</span>
+      <div>
+        <div style="font-size: 0.75rem; color: ${dim};">${l}</div>
+        <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: ${ink};">${t}</div>
+        <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: ${sub};">${rp}</div>
+      </div>
+    </div>`).join('\n    ')}
+  </div>
+
+  <span style="width: 1px; height: 48px; background: ${rule}; margin: 0 0.5rem;"></span>
+
+  <!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
+       캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다. -->
+  <div style="display: flex; align-items: center; gap: 0.75rem;">
+    ${secondary}
+    <span style="font-size: 0.8125rem; color: ${dim}; white-space: nowrap;">12분 전에 불러왔어요</span>
+    <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;">${REFRESH_ICON}전적 갱신</button>
+  </div>
+</div>`;
+}
+
+// 배경이 깔린 프로필 층
+function band({ art, silhouette = '', plate, plateHeight = '100%', extra = '', pad = 34, secondary = '', owner = 'linked' }) {
+  return `  <section style="position: relative; isolation: isolate; overflow: hidden;">
+    <span style="position: absolute; inset: 0; ${art}" aria-hidden="true"></span>
+    ${silhouette}
+    ${PLATE(plate, plateHeight)}
+    <div style="position: relative;">
+${profile({ onDark: true, pad, secondary, owner }).replace(/^/gm, '      ')}
+    </div>
+${extra}  </section>
+`;
+}
+
+function page(inner, { width = 1440, height = 1040, bg = '#FFFFFF', rootExtra = '' } = {}) {
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+${style}
+</helmet>
+
+<div class="d-root" style="width: ${width}px; min-height: ${height}px; background: ${bg}; color: #14161A;${rootExtra}">
+${inner}</div>
+</x-dc>
+</body>
+</html>
+`;
+}
+
+// ── 기본 시안의 프로필 층을 여기서 적는다 ────────────────────
+// 배경을 넣은 상태를 «따로» 둔 아트보드로 관리하면 기본 시안과 어긋난다.
+// (실제로 그 아트보드의 본문이 축약된 채로 남아 주무기·랭크전 시즌이 사라져 보였다.)
+// 그래서 기본 시안 자체가 「카드 닫힘」 상태가 되도록 프로필 층을 여기서 만들어 넣고,
+// 나머지 상태 아트보드는 그 아래(REST)를 공유한다.
+const mainBand = band({
+  art: ART_PHOTO,
+  silhouette: crates('62%', 0.42),
+  plate: 0.88,
+  secondary: cardButton(false),
+});
+
+const BAND_NOTE = '  <!-- 프로필 층 — 배경을 넣은 사람은 여기에 사진이 깔린다. 받침이 글자를 지킨다 -->';
+
+function applyBand(name) {
+  const src = readFileSync(join(TPL, name), 'utf8');
+  const from = src.search(/ {2}<!-- 프로필 (헤더|층)/);
+  const close = src.indexOf('  </section>', from);
+  if (from < 0 || close < 0) throw new Error(name + ': 프로필 층을 찾지 못했습니다');
+  const out = src.slice(0, from) + BAND_NOTE + NL + mainBand.trimEnd() + src.slice(close + '  </section>'.length);
+  writeFileSync(join(TPL, name), out, 'utf8');
+  console.log(name + ' — 프로필 층 적용');
+}
+
+// 같은 사람의 «다 불러온» 화면 둘. 로딩·첫 조회·오류 상태는 배경 없이 둔다 —
+// 그 아트보드는 상태를 읽으려고 있는 것이라 사진이 얹히면 읽을 것이 흐려진다.
+applyBand('Main.dc.html');
+applyBand('Maps.dc.html');
+
+// ── 프로필 카드 · 펼친 상태 ──────────────────────────────────
+// 「프로필 카드 보기」를 누르면 배너가 원본 비율(1440 폭에 16:9 = 810px)로 열리고,
+// 아래쪽 받침 위에 이 사람의 프로필이 한 장으로 모인다 — 기본 · 티어 · 간단 스탯.
+// 높이가 생겨야 할 수 있는 일이라, 접힌 132px 에서는 성립하지 않는다.
+
+// 승 파랑 #2A5FCC · 패 빨강 #C4453D 는 어두운 받침 위에서 너무 가라앉는다.
+// 같은 색상각을 유지한 채 밝기만 올린 짝을 쓴다 (기본 요소에 올려야 할 값).
+const WIN_ON_DARK = '#7BA4FF';
+const LOSE_ON_DARK = '#F0857C';
+
+// 주무기 — 라플 · 스나 · 특수의 «계열별 킬뎃». 셋의 합이 100% 가 아니라 각각이 최대 100% 다.
+// 흰 바탕의 .stat-row / .bar 는 먹이 #14161A 라 어두운 받침 위에서는 안 보인다 — 같은 규격을 흰색으로 다시 쓴다.
+const weaponRow = (name, pct) =>
+  `<div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
+              <span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">${name}</span>
+              <span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: ${pct}%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
+              <span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">${pct}%</span>
+            </div>`;
+
+const cardTile = (label, value) =>
+  `<div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
+            <div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">${label}</div>
+            <div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">${value}</div>
+          </div>`;
+
+// 카드 아래쪽 둘째 줄 — 최근 동향을 가로로 눕힌 것. 왼쪽 레일의 값과 같은 값이다.
+const cardStats = `      <div style="height: 1px; margin: 0 40px; background: rgba(255,255,255,0.20);"></div>
+
+      <div style="display: flex; align-items: center; gap: 2.5rem; padding: 22px 40px 34px;">
+        <div>
+          <div style="font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.68);">최근 동향</div>
+          <div style="display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.375rem;">
+            <span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em; color: #FFFFFF;">60<span style="font-size: 1.125rem;">%</span></span>
+            <span style="font-size: 0.875rem; color: rgba(255,255,255,0.78);">승률 · <span style="font-weight: 700; color: ${WIN_ON_DARK};">12승</span> <span style="font-weight: 700; color: ${LOSE_ON_DARK};">8패</span></span>
+          </div>
+          <div style="display: flex; gap: 2px; width: 232px; height: 10px; margin-top: 0.625rem;">
+            <span style="flex-grow: 12; border-radius: 999px; background: ${WIN_ON_DARK};"></span>
+            <span style="flex-grow: 8; border-radius: 999px; background: ${LOSE_ON_DARK};"></span>
+          </div>
+        </div>
+
+        <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; flex-grow: 1;">
+          ${cardTile('킬뎃', '59%')}
+          ${cardTile('헤드샷', '36%')}
+          ${cardTile('경기당 딜량', '4,270')}
+        </div>
+
+        <div style="width: 320px; flex-shrink: 0;">
+          <div style="display: flex; align-items: baseline;">
+            <span style="font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.78);">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</span>
+          </div>
+          <div style="margin-top: 0.375rem;">
+            ${weaponRow('라플', 61)}
+            ${weaponRow('스나', 57)}
+            ${weaponRow('특수', 48)}
+          </div>
+        </div>
+      </div>
+`;
+
+const profileCard = `  <section style="position: relative; isolation: isolate; overflow: hidden; height: 810px;">
+    <span style="position: absolute; inset: 0; ${ART_PHOTO}" aria-hidden="true"></span>
+    ${crates('34%', 0.5)}
+    ${PLATE(0.9, '348px')}
+    <!-- 배경에 대한 동작이라 배경 위에 둔다. 프로필 줄의 컨트롤과 섞이지 않는다 -->
+    <div style="position: absolute; top: 24px; right: 40px; z-index: 2;">${pickButton(true)}</div>
+    <div style="position: absolute; inset: auto 0 0 0;">
+${profile({ onDark: true, pad: 34, secondary: cardButton(true), owner: 'mine' }).replace(/^/gm, '      ').replace('padding: 34px 40px;', 'padding: 34px 40px 22px;')}
+${cardStats}    </div>
+  </section>
+`;
+writeFileSync(
+  join(TPL, 'BannerOpen.dc.html'),
+  page(gnb(false) + profileCard + REST, { height: 2840 }),
+  'utf8',
+);
+
+// ── 남의 전적에서 연 카드 · 신고 ─────────────────────────────
+// 배경은 누구나 볼 수 있다 — 남이 꾸민 걸 보라고 만든 기능이라 카드는 누구의 전적에서나 열린다.
+// 그래서 신고가 필요하다. 사진 오른쪽 위 한 자리를 주인과 남이 나눠 쓴다:
+// 내 화면이면 「배경 고르기」, 남의 화면이면 「신고」. 한 상태에 보조는 하나라는 규칙 그대로다.
+const FLAG_ICON = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 21V4"></path><path d="M6 4.5h10l-2 3.5 2 3.5H6"></path></svg>`;
+
+const reportButton = () => ghostButton('신고', FLAG_ICON, true);
+
+const guestCard = (corner) => `  <section style="position: relative; isolation: isolate; overflow: hidden; height: 810px;">
+    <span style="position: absolute; inset: 0; ${ART_PHOTO}" aria-hidden="true"></span>
+    ${crates('34%', 0.5)}
+    ${PLATE(0.9, '348px')}
+    <div style="position: absolute; top: 24px; right: 40px; z-index: 2;">${corner}</div>
+    <div style="position: absolute; inset: auto 0 0 0;">
+${profile({ onDark: true, pad: 34, secondary: cardButton(true), owner: 'linked' }).replace(/^/gm, '      ').replace('padding: 34px 40px;', 'padding: 34px 40px 22px;')}
+${cardStats}    </div>
+  </section>
+`;
+
+writeFileSync(
+  join(TPL, 'CardGuest.dc.html'),
+  page(gnb(false) + guestCard(reportButton()) + REST, { height: 2840 }),
+  'utf8',
+);
+
+// ── 신고 모달 ────────────────────────────────────────────────
+// 신고는 카드 «안»에서만 닿는다. 배경이 문제인지 판단하려면 배경을 봐야 하고,
+// 배경을 보는 곳이 카드이기 때문이다. 닫힌 띠에는 신고를 두지 않는다.
+const REASONS = [
+  ['부적절한 배경 이미지', true],
+  ['욕설이나 혐오 표현이 담긴 닉네임 · 클랜명', false],
+  ['다른 사람을 사칭한 프로필', false],
+  ['광고나 홍보', false],
+  ['그 밖의 문제', false],
+];
+
+const reasonRow = (label, on) => `        <label style="display: flex; align-items: center; gap: 0.75rem; height: 52px; border-bottom: 1px solid #F3F5F7; cursor: pointer;">
+          <span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: ${on ? '6px solid #14161A' : '1.5px solid #C9CDD3'}; background: #FFFFFF; flex-shrink: 0;"></span>
+          <span style="font-size: 0.9375rem; font-weight: ${on ? 600 : 500};">${label}</span>
+        </label>`;
+
+// 주 동작이지만 브랜드 오렌지를 쓰지 않는다. 이 화면의 오렌지는 「전적 갱신」의 자리다.
+const reportDialog = `    <div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 520px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 24px 60px rgba(6,8,11,0.32); overflow: hidden;">
+      <div style="padding: 26px 28px 20px;">
+        <h2 style="margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em;">이 프로필을 신고할게요</h2>
+        <p style="margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.55; color: #5B6169;">어떤 점이 문제인지 알려 주시면 확인한 뒤 조치할게요.<br>신고한 분이 누구인지는 상대에게 알려지지 않아요.</p>
+      </div>
+
+      <div style="padding: 0 28px;">
+${REASONS.map(([l, on]) => reasonRow(l, on)).join('\n')}
+      </div>
+
+      <div style="padding: 18px 28px 0;">
+        <div style="padding: 0.875rem 1rem; border: 1px solid #EDEFF2; border-radius: 12px; background: #FAFBFC; font-size: 0.875rem; color: #9BA1A9;">자세한 내용을 적어 주세요 (선택)</div>
+      </div>
+
+      <div style="display: flex; align-items: center; gap: 0.625rem; padding: 20px 28px 24px;">
+        <span style="font-size: 0.8125rem; color: #9BA1A9;">처리 결과는 따로 알려드리지 않아요</span>
+        <div style="flex-grow: 1;"></div>
+        <button style="height: 42px; padding: 0 1.125rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">그만두기</button>
+        <button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #14161A; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;">신고 보내기</button>
+      </div>
+    </div>
+`;
+
+const reportScreen = `  <div style="position: relative;">
+${gnb(false)}${guestCard(reportButton())}  </div>
+  <span style="position: absolute; inset: 0; background: rgba(6,8,11,0.55); z-index: 3;" aria-hidden="true"></span>
+  <div style="position: absolute; inset: 0; z-index: 4;">
+${reportDialog}  </div>
+`;
+writeFileSync(
+  join(TPL, 'Report.dc.html'),
+  page(reportScreen, { height: 900, rootExtra: ' position: relative; overflow: hidden;' }),
+  'utf8',
+);
+
+console.log('wrote BannerOpen, CardGuest, Report');
@@ -0,0 +1,424 @@
+<!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; }
+    .clan-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
+    .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; }
+  </style>
+</helmet>
+
+<div class="d-root" style="width: 1440px; min-height: 2840px; background: #FFFFFF; color: #14161A;">
+  <header style="border-bottom: 1px solid #EDEFF2;">
+    <div style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px;">
+      <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; color: #14161A;"><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>
+    </div>
+  </header>
+  <section style="position: relative; isolation: isolate; overflow: hidden; height: 810px;">
+    <span style="position: absolute; inset: 0; background:
+        radial-gradient(55% 85% at 20% 26%, rgba(255,244,214,0.96) 0%, rgba(255,206,120,0.55) 38%, rgba(255,170,60,0) 72%),
+        radial-gradient(70% 110% at 78% 82%, rgba(126,196,255,0.45) 0%, rgba(126,196,255,0) 62%),
+        linear-gradient(158deg, #8A6A3C 0%, #3A4B58 54%, #0F171E 100%);" aria-hidden="true"></span>
+    <svg viewBox="0 0 1440 200" preserveAspectRatio="none" style="position: absolute; inset: auto 0 0 0; width: 100%; height: 34%; opacity: 0.5;" aria-hidden="true"><path d="M0 200V128h96v-28h84v28h58V84h132v116z" fill="#0B1116"></path><path d="M470 200v-52h74v-30h96v30h52v52z" fill="#0E151B"></path><path d="M792 200v-84h120v-22h74v22h66v84z" fill="#0B1116"></path><path d="M1128 200v-44h92v-34h120v78z" fill="#0E151B"></path></svg>
+    <span style="position: absolute; inset: auto 0 0 0; height: 348px; background: linear-gradient(to top, rgba(6,8,11,0.9) 0%, rgba(6,8,11,0.77) 46%, rgba(6,8,11,0.31) 100%);" aria-hidden="true"></span>
+    <!-- 배경에 대한 동작이라 배경 위에 둔다. 프로필 줄의 컨트롤과 섞이지 않는다 -->
+    <div style="position: absolute; top: 24px; right: 40px; z-index: 2;"><button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="14" rx="2.5"></rect><path d="M3.5 15.5l4.5-4 4 3.5 3.5-3 5 4.5"></path><circle cx="9" cy="9.5" r="1.4"></circle></svg>배경 고르기</button></div>
+    <div style="position: absolute; inset: auto 0 0 0;">
+      <div style="display: flex; align-items: center; gap: 1.25rem; padding: 34px 40px 22px;">
+      
+        <span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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; color: #FFFFFF;">달빛조각사</h1>
+            <span style="font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.78);">중령 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; color: #FFFFFF;">무명연대</span>
+            <span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span>
+            <span style="font-size: 0.875rem; color: rgba(255,255,255,0.68);">마지막 플레이 2시간 전</span>
+            <span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span><span style="display: inline-flex; align-items: center; gap: 0.3125rem; height: 24px; padding: 0 0.625rem; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); font-size: 0.75rem; font-weight: 600; color: #FFFFFF; white-space: nowrap;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M8 12.4l2.6 2.6L16 9.6"></path></svg>내 계정</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 style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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: rgba(255,255,255,0.68);">랭크전 솔로 · 2026 시즌3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">다이아 3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,842 RP</div>
+            </div>
+          </div>
+          <div style="display: flex; align-items: center; gap: 0.625rem;">
+            <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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: rgba(255,255,255,0.68);">랭크전 파티 · 2026 시즌3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">플래티넘 1</div>
+              <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,455 RP</div>
+            </div>
+          </div>
+        </div>
+      
+        <span style="width: 1px; height: 48px; background: rgba(255,255,255,0.30); margin: 0 0.5rem;"></span>
+      
+        <!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
+             캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다. -->
+        <div style="display: flex; align-items: center; gap: 0.75rem;">
+          <button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14l4-4 4 4"></path></svg>카드 그만 보기</button>
+          <span style="font-size: 0.8125rem; color: rgba(255,255,255,0.68); white-space: nowrap;">12분 전에 불러왔어요</span>
+          <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>
+        </div>
+      </div>
+      <div style="height: 1px; margin: 0 40px; background: rgba(255,255,255,0.20);"></div>
+
+      <div style="display: flex; align-items: center; gap: 2.5rem; padding: 22px 40px 34px;">
+        <div>
+          <div style="font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.68);">최근 동향</div>
+          <div style="display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.375rem;">
+            <span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em; color: #FFFFFF;">60<span style="font-size: 1.125rem;">%</span></span>
+            <span style="font-size: 0.875rem; color: rgba(255,255,255,0.78);">승률 · <span style="font-weight: 700; color: #7BA4FF;">12승</span> <span style="font-weight: 700; color: #F0857C;">8패</span></span>
+          </div>
+          <div style="display: flex; gap: 2px; width: 232px; height: 10px; margin-top: 0.625rem;">
+            <span style="flex-grow: 12; border-radius: 999px; background: #7BA4FF;"></span>
+            <span style="flex-grow: 8; border-radius: 999px; background: #F0857C;"></span>
+          </div>
+        </div>
+
+        <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; flex-grow: 1;">
+          <div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
+            <div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</div>
+            <div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">59%</div>
+          </div>
+          <div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
+            <div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">헤드샷</div>
+            <div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">36%</div>
+          </div>
+          <div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
+            <div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">경기당 딜량</div>
+            <div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">4,270</div>
+          </div>
+        </div>
+
+        <div style="width: 320px; flex-shrink: 0;">
+          <div style="display: flex; align-items: baseline;">
+            <span style="font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.78);">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</span>
+          </div>
+          <div style="margin-top: 0.375rem;">
+            <div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
+              <span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">라플</span>
+              <span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 61%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
+              <span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">61%</span>
+            </div>
+            <div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
+              <span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">스나</span>
+              <span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 57%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
+              <span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">57%</span>
+            </div>
+            <div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
+              <span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">특수</span>
+              <span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 48%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
+              <span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">48%</span>
+            </div>
+          </div>
+        </div>
+      </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>
+        <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;">전체 경기</span>
+        </div>
+        <div style="display: grid; grid-template-columns: minmax(0, 1fr) 44px 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="clan-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무명연대</span><span class="m-sub m-r">214판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">70%</span></div>
+          <div class="clan-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">밤새기동대</span><span class="m-sub m-r">151판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">45%</span></div>
+          <div class="clan-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무소속</span><span class="m-sub m-r">55판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">33%</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,423 @@
+<!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; }
+    .clan-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
+    .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; }
+  </style>
+</helmet>
+
+<div class="d-root" style="width: 1440px; min-height: 2840px; background: #FFFFFF; color: #14161A;">
+  <header style="border-bottom: 1px solid #EDEFF2;">
+    <div style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px;">
+      <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; color: #14161A;"><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>
+    </div>
+  </header>
+  <section style="position: relative; isolation: isolate; overflow: hidden; height: 810px;">
+    <span style="position: absolute; inset: 0; background:
+        radial-gradient(55% 85% at 20% 26%, rgba(255,244,214,0.96) 0%, rgba(255,206,120,0.55) 38%, rgba(255,170,60,0) 72%),
+        radial-gradient(70% 110% at 78% 82%, rgba(126,196,255,0.45) 0%, rgba(126,196,255,0) 62%),
+        linear-gradient(158deg, #8A6A3C 0%, #3A4B58 54%, #0F171E 100%);" aria-hidden="true"></span>
+    <svg viewBox="0 0 1440 200" preserveAspectRatio="none" style="position: absolute; inset: auto 0 0 0; width: 100%; height: 34%; opacity: 0.5;" aria-hidden="true"><path d="M0 200V128h96v-28h84v28h58V84h132v116z" fill="#0B1116"></path><path d="M470 200v-52h74v-30h96v30h52v52z" fill="#0E151B"></path><path d="M792 200v-84h120v-22h74v22h66v84z" fill="#0B1116"></path><path d="M1128 200v-44h92v-34h120v78z" fill="#0E151B"></path></svg>
+    <span style="position: absolute; inset: auto 0 0 0; height: 348px; background: linear-gradient(to top, rgba(6,8,11,0.9) 0%, rgba(6,8,11,0.77) 46%, rgba(6,8,11,0.31) 100%);" aria-hidden="true"></span>
+    <div style="position: absolute; top: 24px; right: 40px; z-index: 2;"><button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 21V4"></path><path d="M6 4.5h10l-2 3.5 2 3.5H6"></path></svg>신고</button></div>
+    <div style="position: absolute; inset: auto 0 0 0;">
+      <div style="display: flex; align-items: center; gap: 1.25rem; padding: 34px 40px 22px;">
+      
+        <span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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; color: #FFFFFF;">달빛조각사</h1>
+            <span style="font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.78);">중령 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; color: #FFFFFF;">무명연대</span>
+            <span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span>
+            <span style="font-size: 0.875rem; color: rgba(255,255,255,0.68);">마지막 플레이 2시간 전</span>
+            <span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span><span style="display: inline-flex; align-items: center; gap: 0.3125rem; height: 24px; padding: 0 0.625rem; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); font-size: 0.75rem; font-weight: 600; color: #FFFFFF; white-space: nowrap;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"></circle><path d="M5.5 19.5c0-3.4 2.9-5.6 6.5-5.6s6.5 2.2 6.5 5.6"></path></svg>밤하늘 님이 연동한 계정</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 style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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: rgba(255,255,255,0.68);">랭크전 솔로 · 2026 시즌3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">다이아 3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,842 RP</div>
+            </div>
+          </div>
+          <div style="display: flex; align-items: center; gap: 0.625rem;">
+            <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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: rgba(255,255,255,0.68);">랭크전 파티 · 2026 시즌3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">플래티넘 1</div>
+              <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,455 RP</div>
+            </div>
+          </div>
+        </div>
+      
+        <span style="width: 1px; height: 48px; background: rgba(255,255,255,0.30); margin: 0 0.5rem;"></span>
+      
+        <!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
+             캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다. -->
+        <div style="display: flex; align-items: center; gap: 0.75rem;">
+          <button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14l4-4 4 4"></path></svg>카드 그만 보기</button>
+          <span style="font-size: 0.8125rem; color: rgba(255,255,255,0.68); white-space: nowrap;">12분 전에 불러왔어요</span>
+          <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>
+        </div>
+      </div>
+      <div style="height: 1px; margin: 0 40px; background: rgba(255,255,255,0.20);"></div>
+
+      <div style="display: flex; align-items: center; gap: 2.5rem; padding: 22px 40px 34px;">
+        <div>
+          <div style="font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.68);">최근 동향</div>
+          <div style="display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.375rem;">
+            <span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em; color: #FFFFFF;">60<span style="font-size: 1.125rem;">%</span></span>
+            <span style="font-size: 0.875rem; color: rgba(255,255,255,0.78);">승률 · <span style="font-weight: 700; color: #7BA4FF;">12승</span> <span style="font-weight: 700; color: #F0857C;">8패</span></span>
+          </div>
+          <div style="display: flex; gap: 2px; width: 232px; height: 10px; margin-top: 0.625rem;">
+            <span style="flex-grow: 12; border-radius: 999px; background: #7BA4FF;"></span>
+            <span style="flex-grow: 8; border-radius: 999px; background: #F0857C;"></span>
+          </div>
+        </div>
+
+        <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; flex-grow: 1;">
+          <div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
+            <div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</div>
+            <div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">59%</div>
+          </div>
+          <div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
+            <div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">헤드샷</div>
+            <div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">36%</div>
+          </div>
+          <div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
+            <div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">경기당 딜량</div>
+            <div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">4,270</div>
+          </div>
+        </div>
+
+        <div style="width: 320px; flex-shrink: 0;">
+          <div style="display: flex; align-items: baseline;">
+            <span style="font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.78);">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</span>
+          </div>
+          <div style="margin-top: 0.375rem;">
+            <div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
+              <span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">라플</span>
+              <span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 61%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
+              <span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">61%</span>
+            </div>
+            <div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
+              <span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">스나</span>
+              <span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 57%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
+              <span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">57%</span>
+            </div>
+            <div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
+              <span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">특수</span>
+              <span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 48%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
+              <span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">48%</span>
+            </div>
+          </div>
+        </div>
+      </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>
+        <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;">전체 경기</span>
+        </div>
+        <div style="display: grid; grid-template-columns: minmax(0, 1fr) 44px 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="clan-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무명연대</span><span class="m-sub m-r">214판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">70%</span></div>
+          <div class="clan-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">밤새기동대</span><span class="m-sub m-r">151판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">45%</span></div>
+          <div class="clan-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무소속</span><span class="m-sub m-r">55판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">33%</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>
@@ -43,9 +43,9 @@
    .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; }
+    .clan-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
    .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; }
@@ -66,7 +66,7 @@
  </style>
 </helmet>

-<div class="d-root" style="width: 1440px; min-height: 2100px; background: #FFFFFF; color: #14161A;">
+<div class="d-root" style="width: 1440px; min-height: 2120px; 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;">
@@ -127,9 +127,12 @@
      <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>
+      <!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
+           캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다 -->
+      <div style="display: flex; align-items: center; gap: 0.75rem;">
+        <button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg>프로필 카드 보기</button>
        <span class="s sb-s" style="width: 104px;"></span>
+        <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>
      </div>
    </div>
  </section>
@@ -142,7 +145,7 @@

      <section>
        <div style="display: flex; align-items: center;">
-          <h2 class="d-h2">동향 스탯</h2>
+          <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>
@@ -191,13 +194,15 @@
      </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 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;">전체 경기</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>
+        <div style="display: grid; grid-template-columns: minmax(0, 1fr) 44px 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="clan-row"><span class="s sb" style="width: 68%;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
+          <div class="clan-row"><span class="s sb" style="width: 76%;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
+          <div class="clan-row" style="border-bottom: none;"><span class="s sb" style="width: 46%;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
      </section>

      <section>
@@ -67,12 +67,12 @@
    .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; }
+    .clan-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
    .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;">
+<div class="d-root" style="width: 1440px; min-height: 2120px; 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;">
@@ -95,50 +95,62 @@
    <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>
+  <!-- 프로필 층 — 배경을 넣은 사람은 여기에 사진이 깔린다. 받침이 글자를 지킨다 -->
+  <section style="position: relative; isolation: isolate; overflow: hidden;">
+    <span style="position: absolute; inset: 0; background:
+        radial-gradient(55% 85% at 20% 26%, rgba(255,244,214,0.96) 0%, rgba(255,206,120,0.55) 38%, rgba(255,170,60,0) 72%),
+        radial-gradient(70% 110% at 78% 82%, rgba(126,196,255,0.45) 0%, rgba(126,196,255,0) 62%),
+        linear-gradient(158deg, #8A6A3C 0%, #3A4B58 54%, #0F171E 100%);" aria-hidden="true"></span>
+    <svg viewBox="0 0 1440 200" preserveAspectRatio="none" style="position: absolute; inset: auto 0 0 0; width: 100%; height: 62%; opacity: 0.42;" aria-hidden="true"><path d="M0 200V128h96v-28h84v28h58V84h132v116z" fill="#0B1116"></path><path d="M470 200v-52h74v-30h96v30h52v52z" fill="#0E151B"></path><path d="M792 200v-84h120v-22h74v22h66v84z" fill="#0B1116"></path><path d="M1128 200v-44h92v-34h120v78z" fill="#0E151B"></path></svg>
+    <span style="position: absolute; inset: auto 0 0 0; height: 100%; background: linear-gradient(to top, rgba(6,8,11,0.88) 0%, rgba(6,8,11,0.76) 46%, rgba(6,8,11,0.30) 100%);" aria-hidden="true"></span>
+    <div style="position: relative;">
+      <div style="display: flex; align-items: center; gap: 1.25rem; padding: 34px 40px;">
+      
+        <span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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; color: #FFFFFF;">달빛조각사</h1>
+            <span style="font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.78);">중령 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; color: #FFFFFF;">무명연대</span>
+            <span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span>
+            <span style="font-size: 0.875rem; color: rgba(255,255,255,0.68);">마지막 플레이 2시간 전</span>
+            <span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span><span style="display: inline-flex; align-items: center; gap: 0.3125rem; height: 24px; padding: 0 0.625rem; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); font-size: 0.75rem; font-weight: 600; color: #FFFFFF; white-space: nowrap;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"></circle><path d="M5.5 19.5c0-3.4 2.9-5.6 6.5-5.6s6.5 2.2 6.5 5.6"></path></svg>밤하늘 님이 연동한 계정</span>
          </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 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 style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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: rgba(255,255,255,0.68);">랭크전 솔로 · 2026 시즌3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">다이아 3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,842 RP</div>
+            </div>
+          </div>
+          <div style="display: flex; align-items: center; gap: 0.625rem;">
+            <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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: rgba(255,255,255,0.68);">랭크전 파티 · 2026 시즌3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">플래티넘 1</div>
+              <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,455 RP</div>
+            </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>
+      
+        <span style="width: 1px; height: 48px; background: rgba(255,255,255,0.30); margin: 0 0.5rem;"></span>
+      
+        <!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
+             캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다. -->
+        <div style="display: flex; align-items: center; gap: 0.75rem;">
+          <button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg>프로필 카드 보기</button>
+          <span style="font-size: 0.8125rem; color: rgba(255,255,255,0.68); white-space: nowrap;">12분 전에 불러왔어요</span>
+          <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>
+        </div>
      </div>
    </div>
  </section>
@@ -151,10 +163,10 @@
    <!-- 왼쪽 요약 레일 -->
    <div style="display: flex; flex-direction: column; gap: 2rem;">

-      <!-- 동향 스탯 — 넥슨 프로필이 주는 값 그대로. 경기 목록에서 다시 계산하지 않는다 -->
+      <!-- 최근 동향 — 넥슨 프로필이 주는 값 그대로. 경기 목록에서 다시 계산하지 않는다 -->
      <section>
        <div style="display: flex; align-items: baseline;">
-          <h2 class="d-h2">동향 스탯</h2>
+          <h2 class="d-h2">최근 동향</h2>
        </div>

        <div style="display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.875rem;">
@@ -210,30 +222,17 @@
        </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 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;">전체 경기</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 style="display: grid; grid-template-columns: minmax(0, 1fr) 44px 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="clan-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무명연대</span><span class="m-sub m-r">214판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">70%</span></div>
+          <div class="clan-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">밤새기동대</span><span class="m-sub m-r">151판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">45%</span></div>
+          <div class="clan-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무소속</span><span class="m-sub m-r">55판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">33%</span></div>
      </section>

      <section>
@@ -101,50 +101,62 @@
    <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>
+  <!-- 프로필 층 — 배경을 넣은 사람은 여기에 사진이 깔린다. 받침이 글자를 지킨다 -->
+  <section style="position: relative; isolation: isolate; overflow: hidden;">
+    <span style="position: absolute; inset: 0; background:
+        radial-gradient(55% 85% at 20% 26%, rgba(255,244,214,0.96) 0%, rgba(255,206,120,0.55) 38%, rgba(255,170,60,0) 72%),
+        radial-gradient(70% 110% at 78% 82%, rgba(126,196,255,0.45) 0%, rgba(126,196,255,0) 62%),
+        linear-gradient(158deg, #8A6A3C 0%, #3A4B58 54%, #0F171E 100%);" aria-hidden="true"></span>
+    <svg viewBox="0 0 1440 200" preserveAspectRatio="none" style="position: absolute; inset: auto 0 0 0; width: 100%; height: 62%; opacity: 0.42;" aria-hidden="true"><path d="M0 200V128h96v-28h84v28h58V84h132v116z" fill="#0B1116"></path><path d="M470 200v-52h74v-30h96v30h52v52z" fill="#0E151B"></path><path d="M792 200v-84h120v-22h74v22h66v84z" fill="#0B1116"></path><path d="M1128 200v-44h92v-34h120v78z" fill="#0E151B"></path></svg>
+    <span style="position: absolute; inset: auto 0 0 0; height: 100%; background: linear-gradient(to top, rgba(6,8,11,0.88) 0%, rgba(6,8,11,0.76) 46%, rgba(6,8,11,0.30) 100%);" aria-hidden="true"></span>
+    <div style="position: relative;">
+      <div style="display: flex; align-items: center; gap: 1.25rem; padding: 34px 40px;">
+      
+        <span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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; color: #FFFFFF;">달빛조각사</h1>
+            <span style="font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.78);">중령 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; color: #FFFFFF;">무명연대</span>
+            <span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span>
+            <span style="font-size: 0.875rem; color: rgba(255,255,255,0.68);">마지막 플레이 2시간 전</span>
+            <span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span><span style="display: inline-flex; align-items: center; gap: 0.3125rem; height: 24px; padding: 0 0.625rem; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); font-size: 0.75rem; font-weight: 600; color: #FFFFFF; white-space: nowrap;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"></circle><path d="M5.5 19.5c0-3.4 2.9-5.6 6.5-5.6s6.5 2.2 6.5 5.6"></path></svg>밤하늘 님이 연동한 계정</span>
          </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 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 style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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: rgba(255,255,255,0.68);">랭크전 솔로 · 2026 시즌3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">다이아 3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,842 RP</div>
+            </div>
+          </div>
+          <div style="display: flex; align-items: center; gap: 0.625rem;">
+            <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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: rgba(255,255,255,0.68);">랭크전 파티 · 2026 시즌3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">플래티넘 1</div>
+              <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,455 RP</div>
+            </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>
+      
+        <span style="width: 1px; height: 48px; background: rgba(255,255,255,0.30); margin: 0 0.5rem;"></span>
+      
+        <!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
+             캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다. -->
+        <div style="display: flex; align-items: center; gap: 0.75rem;">
+          <button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg>프로필 카드 보기</button>
+          <span style="font-size: 0.8125rem; color: rgba(255,255,255,0.68); white-space: nowrap;">12분 전에 불러왔어요</span>
+          <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>
+        </div>
      </div>
    </div>
  </section>
@@ -0,0 +1,245 @@
+<!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; }
+    .clan-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
+    .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; }
+  </style>
+</helmet>
+
+<div class="d-root" style="width: 1440px; min-height: 900px; background: #FFFFFF; color: #14161A; position: relative; overflow: hidden;">
+  <div style="position: relative;">
+  <header style="border-bottom: 1px solid #EDEFF2;">
+    <div style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px;">
+      <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; color: #14161A;"><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>
+    </div>
+  </header>
+  <section style="position: relative; isolation: isolate; overflow: hidden; height: 810px;">
+    <span style="position: absolute; inset: 0; background:
+        radial-gradient(55% 85% at 20% 26%, rgba(255,244,214,0.96) 0%, rgba(255,206,120,0.55) 38%, rgba(255,170,60,0) 72%),
+        radial-gradient(70% 110% at 78% 82%, rgba(126,196,255,0.45) 0%, rgba(126,196,255,0) 62%),
+        linear-gradient(158deg, #8A6A3C 0%, #3A4B58 54%, #0F171E 100%);" aria-hidden="true"></span>
+    <svg viewBox="0 0 1440 200" preserveAspectRatio="none" style="position: absolute; inset: auto 0 0 0; width: 100%; height: 34%; opacity: 0.5;" aria-hidden="true"><path d="M0 200V128h96v-28h84v28h58V84h132v116z" fill="#0B1116"></path><path d="M470 200v-52h74v-30h96v30h52v52z" fill="#0E151B"></path><path d="M792 200v-84h120v-22h74v22h66v84z" fill="#0B1116"></path><path d="M1128 200v-44h92v-34h120v78z" fill="#0E151B"></path></svg>
+    <span style="position: absolute; inset: auto 0 0 0; height: 348px; background: linear-gradient(to top, rgba(6,8,11,0.9) 0%, rgba(6,8,11,0.77) 46%, rgba(6,8,11,0.31) 100%);" aria-hidden="true"></span>
+    <div style="position: absolute; top: 24px; right: 40px; z-index: 2;"><button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 21V4"></path><path d="M6 4.5h10l-2 3.5 2 3.5H6"></path></svg>신고</button></div>
+    <div style="position: absolute; inset: auto 0 0 0;">
+      <div style="display: flex; align-items: center; gap: 1.25rem; padding: 34px 40px 22px;">
+      
+        <span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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; color: #FFFFFF;">달빛조각사</h1>
+            <span style="font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.78);">중령 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; color: #FFFFFF;">무명연대</span>
+            <span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span>
+            <span style="font-size: 0.875rem; color: rgba(255,255,255,0.68);">마지막 플레이 2시간 전</span>
+            <span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span><span style="display: inline-flex; align-items: center; gap: 0.3125rem; height: 24px; padding: 0 0.625rem; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); font-size: 0.75rem; font-weight: 600; color: #FFFFFF; white-space: nowrap;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"></circle><path d="M5.5 19.5c0-3.4 2.9-5.6 6.5-5.6s6.5 2.2 6.5 5.6"></path></svg>밤하늘 님이 연동한 계정</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 style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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: rgba(255,255,255,0.68);">랭크전 솔로 · 2026 시즌3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">다이아 3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,842 RP</div>
+            </div>
+          </div>
+          <div style="display: flex; align-items: center; gap: 0.625rem;">
+            <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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: rgba(255,255,255,0.68);">랭크전 파티 · 2026 시즌3</div>
+              <div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">플래티넘 1</div>
+              <div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,455 RP</div>
+            </div>
+          </div>
+        </div>
+      
+        <span style="width: 1px; height: 48px; background: rgba(255,255,255,0.30); margin: 0 0.5rem;"></span>
+      
+        <!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
+             캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다. -->
+        <div style="display: flex; align-items: center; gap: 0.75rem;">
+          <button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14l4-4 4 4"></path></svg>카드 그만 보기</button>
+          <span style="font-size: 0.8125rem; color: rgba(255,255,255,0.68); white-space: nowrap;">12분 전에 불러왔어요</span>
+          <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>
+        </div>
+      </div>
+      <div style="height: 1px; margin: 0 40px; background: rgba(255,255,255,0.20);"></div>
+
+      <div style="display: flex; align-items: center; gap: 2.5rem; padding: 22px 40px 34px;">
+        <div>
+          <div style="font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.68);">최근 동향</div>
+          <div style="display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.375rem;">
+            <span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em; color: #FFFFFF;">60<span style="font-size: 1.125rem;">%</span></span>
+            <span style="font-size: 0.875rem; color: rgba(255,255,255,0.78);">승률 · <span style="font-weight: 700; color: #7BA4FF;">12승</span> <span style="font-weight: 700; color: #F0857C;">8패</span></span>
+          </div>
+          <div style="display: flex; gap: 2px; width: 232px; height: 10px; margin-top: 0.625rem;">
+            <span style="flex-grow: 12; border-radius: 999px; background: #7BA4FF;"></span>
+            <span style="flex-grow: 8; border-radius: 999px; background: #F0857C;"></span>
+          </div>
+        </div>
+
+        <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; flex-grow: 1;">
+          <div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
+            <div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</div>
+            <div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">59%</div>
+          </div>
+          <div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
+            <div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">헤드샷</div>
+            <div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">36%</div>
+          </div>
+          <div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
+            <div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">경기당 딜량</div>
+            <div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">4,270</div>
+          </div>
+        </div>
+
+        <div style="width: 320px; flex-shrink: 0;">
+          <div style="display: flex; align-items: baseline;">
+            <span style="font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.78);">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</span>
+          </div>
+          <div style="margin-top: 0.375rem;">
+            <div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
+              <span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">라플</span>
+              <span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 61%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
+              <span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">61%</span>
+            </div>
+            <div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
+              <span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">스나</span>
+              <span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 57%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
+              <span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">57%</span>
+            </div>
+            <div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
+              <span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">특수</span>
+              <span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 48%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
+              <span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">48%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  </div>
+  <span style="position: absolute; inset: 0; background: rgba(6,8,11,0.55); z-index: 3;" aria-hidden="true"></span>
+  <div style="position: absolute; inset: 0; z-index: 4;">
+    <div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 520px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 24px 60px rgba(6,8,11,0.32); overflow: hidden;">
+      <div style="padding: 26px 28px 20px;">
+        <h2 style="margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em;">이 프로필을 신고할게요</h2>
+        <p style="margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.55; color: #5B6169;">어떤 점이 문제인지 알려 주시면 확인한 뒤 조치할게요.<br>신고한 분이 누구인지는 상대에게 알려지지 않아요.</p>
+      </div>
+
+      <div style="padding: 0 28px;">
+        <label style="display: flex; align-items: center; gap: 0.75rem; height: 52px; border-bottom: 1px solid #F3F5F7; cursor: pointer;">
+          <span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 6px solid #14161A; background: #FFFFFF; flex-shrink: 0;"></span>
+          <span style="font-size: 0.9375rem; font-weight: 600;">부적절한 배경 이미지</span>
+        </label>
+        <label style="display: flex; align-items: center; gap: 0.75rem; height: 52px; border-bottom: 1px solid #F3F5F7; cursor: pointer;">
+          <span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid #C9CDD3; background: #FFFFFF; flex-shrink: 0;"></span>
+          <span style="font-size: 0.9375rem; font-weight: 500;">욕설이나 혐오 표현이 담긴 닉네임 · 클랜명</span>
+        </label>
+        <label style="display: flex; align-items: center; gap: 0.75rem; height: 52px; border-bottom: 1px solid #F3F5F7; cursor: pointer;">
+          <span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid #C9CDD3; background: #FFFFFF; flex-shrink: 0;"></span>
+          <span style="font-size: 0.9375rem; font-weight: 500;">다른 사람을 사칭한 프로필</span>
+        </label>
+        <label style="display: flex; align-items: center; gap: 0.75rem; height: 52px; border-bottom: 1px solid #F3F5F7; cursor: pointer;">
+          <span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid #C9CDD3; background: #FFFFFF; flex-shrink: 0;"></span>
+          <span style="font-size: 0.9375rem; font-weight: 500;">광고나 홍보</span>
+        </label>
+        <label style="display: flex; align-items: center; gap: 0.75rem; height: 52px; border-bottom: 1px solid #F3F5F7; cursor: pointer;">
+          <span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid #C9CDD3; background: #FFFFFF; flex-shrink: 0;"></span>
+          <span style="font-size: 0.9375rem; font-weight: 500;">그 밖의 문제</span>
+        </label>
+      </div>
+
+      <div style="padding: 18px 28px 0;">
+        <div style="padding: 0.875rem 1rem; border: 1px solid #EDEFF2; border-radius: 12px; background: #FAFBFC; font-size: 0.875rem; color: #9BA1A9;">자세한 내용을 적어 주세요 (선택)</div>
+      </div>
+
+      <div style="display: flex; align-items: center; gap: 0.625rem; padding: 20px 28px 24px;">
+        <span style="font-size: 0.8125rem; color: #9BA1A9;">처리 결과는 따로 알려드리지 않아요</span>
+        <div style="flex-grow: 1;"></div>
+        <button style="height: 42px; padding: 0 1.125rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">그만두기</button>
+        <button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #14161A; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;">신고 보내기</button>
+      </div>
+    </div>
+  </div>
+</div>
+</x-dc>
+</body>
+</html>
@@ -146,9 +146,10 @@
          </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>
+          <!-- 첫 조회에는 「프로필 카드 보기」를 두지 않는다 — 아직 아무 값도 없어 열 카드가 없다 -->
+          <div style="display: flex; align-items: center; gap: 0.75rem;">
            <span style="font-size: 0.8125rem; color: #9BA1A9;">아직 불러온 적 없어요</span>
+            <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>
          </div>
        </div>
      </section>
@@ -197,9 +198,10 @@
            </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>
+          <div style="display: flex; align-items: center; gap: 0.75rem;">
+            <button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg>프로필 카드 보기</button>
            <span style="font-size: 0.8125rem; color: #9BA1A9;">새로 올라온 경기를 확인하고 있어요</span>
+            <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>
          </div>
        </div>
      </section>
@@ -265,9 +267,10 @@
            </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>
+          <div style="display: flex; align-items: center; gap: 0.75rem;">
+            <button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg>프로필 카드 보기</button>
            <span style="font-size: 0.8125rem; color: #9BA1A9;">12분 전에 불러왔어요</span>
+            <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>
          </div>
        </div>
      </section>
@@ -277,7 +280,7 @@
      <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>
+            <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>
@@ -0,0 +1 @@
+claude --resume d372736c-bfb9-4125-a87e-e3005bfc56dd
				`@@ -0,0 +1 @@`
				`claude --resume d372736c-bfb9-4125-a87e-e3005bfc56dd`