first commit
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,28 @@
|
||||
// templates/*.dc.html 의 /*PRETENDARD*/ 토큰을 Pretendard woff2 data URI 로 치환해
|
||||
// 작업 디렉터리 루트에 최종 .dc.html 아트보드를 생성한다.
|
||||
import { readFileSync, writeFileSync, readdirSync } from 'node:fs';
|
||||
import { join } from 'node:path';
|
||||
|
||||
const WEIGHTS = [
|
||||
['Regular', 400],
|
||||
['SemiBold', 600],
|
||||
['Bold', 700],
|
||||
];
|
||||
|
||||
const faces = WEIGHTS.map(([file, weight]) => {
|
||||
const b64 = readFileSync(join('fonts', `Pretendard-${file}.subset.woff2`)).toString('base64');
|
||||
return `@font-face{font-family:'Pretendard';font-style:normal;font-weight:${weight};font-display:swap;src:url(data:font/woff2;base64,${b64}) format('woff2');}`;
|
||||
}).join('\n');
|
||||
|
||||
let count = 0;
|
||||
for (const name of readdirSync('templates')) {
|
||||
if (!name.endsWith('.dc.html')) continue;
|
||||
const src = readFileSync(join('templates', name), 'utf8');
|
||||
if (!src.includes('/*PRETENDARD*/')) {
|
||||
console.error(`warn: ${name} 에 /*PRETENDARD*/ 토큰이 없습니다`);
|
||||
}
|
||||
writeFileSync(name, src.replace('/*PRETENDARD*/', faces), 'utf8');
|
||||
count += 1;
|
||||
console.log(`${name} — ${(readFileSync(name).length / 1024).toFixed(0)} KB`);
|
||||
}
|
||||
console.log(`${count} artboards built`);
|
||||
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"id": "page-1",
|
||||
"name": "홈 (확정)"
|
||||
},
|
||||
{
|
||||
"id": "page-2",
|
||||
"name": "지난 시안"
|
||||
}
|
||||
],
|
||||
"artboards": [
|
||||
{
|
||||
"file": "Main.dc.html",
|
||||
"title": "서린즈 홈",
|
||||
"page": "page-1",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 2420
|
||||
},
|
||||
{
|
||||
"file": "HomeA.dc.html",
|
||||
"title": "A · 세로 스택형",
|
||||
"page": "page-2",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 3000
|
||||
},
|
||||
{
|
||||
"file": "HomeB.dc.html",
|
||||
"title": "B · 포털 3단형",
|
||||
"page": "page-2",
|
||||
"x": 1600,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 2360
|
||||
},
|
||||
{
|
||||
"file": "HomeC.dc.html",
|
||||
"title": "C · 앱 사이드바형",
|
||||
"page": "page-2",
|
||||
"x": 3200,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 2120
|
||||
}
|
||||
],
|
||||
"annotations": [
|
||||
{
|
||||
"id": "note-home",
|
||||
"x": 0,
|
||||
"y": -520,
|
||||
"w": 760,
|
||||
"page": "page-1",
|
||||
"text": "서린즈 홈 · 확정안 (밀도 그리드형)\n\n게임 랭킹 — 세 갈래로 나눴습니다\n한 칸에 하나씩, 세 랭킹을 나란히 놓았습니다.\n· 계급 랭킹 — 통합 / 시즌\n· 랭크전 랭킹 — 솔로 / 파티 / 클랜 (여기만 RP 점수 열이 있습니다)\n· 클랜 랭킹 — 공식 / 일반\n유저 랭킹은 계급 이미지 + 닉네임, 클랜 랭킹은 클랜 마크 + 클랜명으로만 구성했고 승률·K/D·헤드샷·판수는 모두 뺐습니다. 모든 랭킹에 등락(▲n / ▼n / 변동 없음)을 붙였습니다.\n계급 이미지와 클랜 마크는 실제 에셋 자리로, 지금은 회색 타일에 약식 표장을 그려 뒀습니다. 실제 이미지 규격을 주시면 교체하겠습니다.\n\n검색을 최상단으로\n헤더에서 검색을 빼고 화면 맨 위 히어로로 올렸습니다. 검색창만 덩그러니 올리면 허전해서 세 가지를 함께 뒀습니다.\n· 문구 두 줄 — \"누구의 전적이 궁금하세요?\" 와 무엇을 해주는 곳인지 설명하는 한 줄\n· 최근 검색 칩 — 빈 검색창 아래에 바로 누를 것이 생겨서 첫 화면이 비어 보이지 않습니다\n· 옅은 색면(#FAFBFC) + 아래 경계선 — 히어로가 떠 있는 게 아니라 하나의 층으로 읽힙니다. 아래 그리드와 역할이 분리됩니다\n헤더에는 대신 \"전적 검색\" 메뉴를 넣었습니다.\n\n그 아래 배치 — 커뮤니티와 스트리밍의 자리를 바꿨습니다\n· 이벤트 슬라이드(2칸) + 검색 랭킹(1칸)\n· 게임 랭킹(2칸) + 커뮤니티(1칸)\n· 서든어택 소식 + 서린즈 소식 + 지금 방송 중\n\n지금 방송 중\n· 스트리머 이름 앞에 프로필 아바타를 붙였습니다. 대표 방송은 20px, 아래 목록 세 줄은 18px 원형이고, 히어로의 \"최근에 찾아봤어요\" 칩과 같은 자리표시 방식입니다. 실제 프로필 이미지 규격을 주시면 교체하겠습니다.\n· 빨간 LIVE 점과 글자는 뺐습니다. 이제 아바타 + 닉네임 · 시청자 수만 남습니다.\n\n남은 검토거리\n· 스크롤을 내리면 히어로 검색창이 사라집니다. 헤더에 작은 검색창을 다시 붙여 따라오게 할지 정하면 좋겠습니다.\n· 히어로 오른쪽에 오늘의 요약 수치(분석된 경기 수 등)를 넣는 안도 있는데, 지금은 넣지 않았습니다. 필요하면 말씀해 주세요.\n· 스트리밍이 아랫줄로 내려가면서 그 줄이 소식 목록보다 200px쯤 높아졌습니다. 소식을 6건에서 8건으로 늘려 높이를 맞출지 정하면 좋겠습니다.\n\n회색 사각형은 썸네일·스크린샷 자리, 닉네임·수치·공지 제목은 예시 데이터입니다."
|
||||
},
|
||||
{
|
||||
"id": "note-past",
|
||||
"x": 0,
|
||||
"y": -300,
|
||||
"w": 700,
|
||||
"page": "page-2",
|
||||
"text": "지난 시안 (참고용)\n\n고르지 않은 세 배치입니다. 나중에 되돌아볼 일이 있을까 싶어 남겨 뒀습니다. 지워도 괜찮으면 말씀해 주세요.\n이벤트 배너와 커뮤니티 글 종류는 세 안에도 모두 반영되어 있습니다."
|
||||
}
|
||||
],
|
||||
"launch": {
|
||||
"view": "canvas",
|
||||
"page": "page-1"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,198 @@
|
||||
// 게임 랭킹 섹션(계급 / 랭크전 / 클랜)을 데이터로부터 생성해 parts/ranking.html 에 쓴다.
|
||||
// 행이 30줄이라 손으로 쓰지 않고 여기서 찍어낸다.
|
||||
import { writeFileSync } from 'node:fs';
|
||||
|
||||
// 계급 표장 — 실제 계급 이미지가 들어올 자리의 약식 표기
|
||||
const INSIGNIA = {
|
||||
chev: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg>',
|
||||
dia: '<svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg>',
|
||||
star: '<svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg>',
|
||||
};
|
||||
|
||||
// 클랜 마크 — 실제 클랜 마크가 들어올 자리
|
||||
const MARK = {
|
||||
shield: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 2.8v5.2c0 3.8-2.8 7.2-7 9-4.2-1.8-7-5.2-7-9V6.3z"></path></svg>',
|
||||
hex: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 4v9l-7 4-7-4v-9z"></path></svg>',
|
||||
};
|
||||
|
||||
// 등락 셀
|
||||
function move(n) {
|
||||
if (n === 0) return '<span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>';
|
||||
const up = n > 0;
|
||||
const color = up ? '#12805C' : '#C4453D';
|
||||
const path = up ? 'M6 2l4 7H2z' : 'M6 10L2 3h8z';
|
||||
return `<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="${color}"><path d="${path}"></path></svg><span style="font-size: 0.75rem; color: ${color};">${Math.abs(n)}</span></span>`;
|
||||
}
|
||||
|
||||
const rankNum = (i) =>
|
||||
i < 3
|
||||
? `<span style="font-size: 0.875rem; font-weight: 700;">${i + 1}</span>`
|
||||
: `<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">${i + 1}</span>`;
|
||||
|
||||
const NAME = '<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">';
|
||||
|
||||
// 유저 랭킹 한 블록 (RP 열은 rp 값이 있을 때만)
|
||||
function userList(rows, withRp) {
|
||||
const cols = withRp
|
||||
? '18px 26px minmax(0, 1fr) 48px 38px'
|
||||
: '18px 26px minmax(0, 1fr) 38px';
|
||||
return rows
|
||||
.map((r, i) => {
|
||||
const last = i === rows.length - 1;
|
||||
const border = last ? '' : ' border-bottom: 1px solid #F3F5F7;';
|
||||
const rp = withRp
|
||||
? `<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">${r.rp}</span>`
|
||||
: '';
|
||||
return ` <div style="display: grid; grid-template-columns: ${cols}; align-items: center; gap: 0.5rem; height: 46px;${border}">
|
||||
${rankNum(i)}
|
||||
<span class="d-badge">${INSIGNIA[r.ins]}</span>
|
||||
${NAME}${r.name}</span>
|
||||
${rp}${move(r.mv)}
|
||||
</div>`;
|
||||
})
|
||||
.join('\n');
|
||||
}
|
||||
|
||||
function clanList(rows) {
|
||||
const cols = '18px 28px minmax(0, 1fr) 38px';
|
||||
return rows
|
||||
.map((r, i) => {
|
||||
const last = i === rows.length - 1;
|
||||
const border = last ? '' : ' border-bottom: 1px solid #F3F5F7;';
|
||||
return ` <div style="display: grid; grid-template-columns: ${cols}; align-items: center; gap: 0.5rem; height: 46px;${border}">
|
||||
${rankNum(i)}
|
||||
<span class="d-mark">${MARK[r.mark]}</span>
|
||||
${NAME}${r.name}</span>
|
||||
${move(r.mv)}
|
||||
</div>`;
|
||||
})
|
||||
.join('\n');
|
||||
}
|
||||
|
||||
const tab = (label, on) => `<span class="d-tab${on ? ' d-tab-on' : ''}">${label}</span>`;
|
||||
|
||||
// 표 머리글
|
||||
function head(withRp, unit) {
|
||||
const cols = withRp
|
||||
? '18px 26px minmax(0, 1fr) 48px 38px'
|
||||
: `18px ${unit} minmax(0, 1fr) 38px`;
|
||||
const rp = withRp ? '\n <span class="d-th" style="text-align: right;">RP</span>' : '';
|
||||
const who = unit === '28px' ? '클랜' : '유저';
|
||||
return ` <div style="display: grid; grid-template-columns: ${cols}; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">${who}</span>${rp}
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
const 계급 = [
|
||||
{ name: '달빛조각사', ins: 'chev', mv: 2 },
|
||||
{ name: '칼든햄스터', ins: 'star', mv: -1 },
|
||||
{ name: '새벽두시', ins: 'chev', mv: 4 },
|
||||
{ name: '무명연대장', ins: 'dia', mv: 0 },
|
||||
{ name: '한밤의저격수', ins: 'dia', mv: 3 },
|
||||
{ name: '조용한총잡이', ins: 'chev', mv: -2 },
|
||||
{ name: '야간부대장', ins: 'dia', mv: 0 },
|
||||
{ name: '헤드샷장인', ins: 'dia', mv: 5 },
|
||||
{ name: '삼보급단골', ins: 'chev', mv: -3 },
|
||||
{ name: '웨어하우스지박령', ins: 'star', mv: 1 },
|
||||
];
|
||||
|
||||
const 랭크전 = [
|
||||
{ name: '헤드샷장인', ins: 'star', rp: '2,486', mv: 1 },
|
||||
{ name: '달빛조각사', ins: 'chev', rp: '2,451', mv: -1 },
|
||||
{ name: '삼보급단골', ins: 'dia', rp: '2,398', mv: 6 },
|
||||
{ name: '칼든햄스터', ins: 'star', rp: '2,344', mv: 0 },
|
||||
{ name: '웨어하우스지박령', ins: 'dia', rp: '2,301', mv: 2 },
|
||||
{ name: '새벽두시', ins: 'chev', rp: '2,276', mv: -3 },
|
||||
{ name: '조용한총잡이', ins: 'dia', rp: '2,240', mv: 0 },
|
||||
{ name: '한밤의저격수', ins: 'dia', rp: '2,205', mv: 4 },
|
||||
{ name: '야간부대장', ins: 'chev', rp: '2,181', mv: -2 },
|
||||
{ name: '무명연대장', ins: 'dia', rp: '2,154', mv: 1 },
|
||||
];
|
||||
|
||||
const 클랜 = [
|
||||
{ name: '무명연대', mark: 'shield', mv: 0 },
|
||||
{ name: '새벽클랜', mark: 'hex', mv: 2 },
|
||||
{ name: '야간부대', mark: 'shield', mv: -1 },
|
||||
{ name: '정예사격단', mark: 'hex', mv: 3 },
|
||||
{ name: '삼보급수호대', mark: 'shield', mv: 0 },
|
||||
{ name: '헤드샷연구소', mark: 'hex', mv: 4 },
|
||||
{ name: '크로스카운터', mark: 'shield', mv: -2 },
|
||||
{ name: '웨어하우스단', mark: 'hex', mv: 0 },
|
||||
{ name: '새벽정찰대', mark: 'shield', mv: 1 },
|
||||
{ name: '삼보급기동대', mark: 'hex', mv: -3 },
|
||||
];
|
||||
|
||||
// 페이지 이동 — 순위 구간을 세 랭킹이 함께 넘긴다
|
||||
const pageBtn = (label, on) =>
|
||||
on
|
||||
? `<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; background: #14161A; font-size: 0.875rem; font-weight: 700; color: #FFFFFF;">${label}</span>`
|
||||
: `<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">${label}</span>`;
|
||||
|
||||
const chev = (dir, dim) =>
|
||||
`<span class="d-arw"${dim ? ' style="opacity: 0.4;"' : ''}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="${dir === 'prev' ? 'M14.5 5l-7 7 7 7' : 'M9.5 5l7 7-7 7'}"></path></svg></span>`;
|
||||
|
||||
const pager = `
|
||||
<!-- 순위 구간 이동 — 세 랭킹이 같은 구간을 함께 본다 -->
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #EDEFF2;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">1 ~ 10위 · 전체 100위</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
${chev('prev', true)}
|
||||
<div style="display: flex; align-items: center; gap: 0.125rem;">
|
||||
${pageBtn('1', true)}
|
||||
${pageBtn('2', false)}
|
||||
${pageBtn('3', false)}
|
||||
${pageBtn('4', false)}
|
||||
${pageBtn('5', false)}
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 34px; font-size: 0.875rem; color: #9BA1A9;">…</span>
|
||||
${pageBtn('10', false)}
|
||||
</div>
|
||||
${chev('next', false)}
|
||||
</div>`;
|
||||
|
||||
const html = ` <!-- 게임 랭킹 (2칸) — 계급 / 랭크전 / 클랜 세 갈래를 나란히 -->
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">게임 랭킹</h2>
|
||||
<span style="margin-left: 0.75rem; font-size: 0.8125rem; color: #9BA1A9;">매일 오전 8시 갱신</span>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;">
|
||||
|
||||
<!-- 계급 랭킹 -->
|
||||
<div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">계급 랭킹</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
${tab('통합', true)}${tab('시즌', false)}
|
||||
</div>
|
||||
${head(false, '26px')}
|
||||
${userList(계급, false)}
|
||||
</div>
|
||||
|
||||
<!-- 랭크전 랭킹 — RP 점수를 함께 -->
|
||||
<div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">랭크전 랭킹</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
${tab('솔로', true)}${tab('파티', false)}${tab('클랜', false)}
|
||||
</div>
|
||||
${head(true, '26px')}
|
||||
${userList(랭크전, true)}
|
||||
</div>
|
||||
|
||||
<!-- 클랜 랭킹 — 클랜 마크 + 클랜명 -->
|
||||
<div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">클랜 랭킹</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
${tab('공식', true)}${tab('일반', false)}
|
||||
</div>
|
||||
${head(false, '28px')}
|
||||
${clanList(클랜)}
|
||||
</div>
|
||||
</div>
|
||||
${pager}
|
||||
</section>
|
||||
`;
|
||||
|
||||
writeFileSync('parts/ranking.html', html, 'utf8');
|
||||
console.log('parts/ranking.html written —', html.length, 'chars');
|
||||
@@ -0,0 +1,245 @@
|
||||
<!-- 게임 랭킹 (2칸) — 계급 / 랭크전 / 클랜 세 갈래를 나란히 -->
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">게임 랭킹</h2>
|
||||
<span style="margin-left: 0.75rem; font-size: 0.8125rem; color: #9BA1A9;">매일 오전 8시 갱신</span>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;">
|
||||
|
||||
<!-- 계급 랭킹 -->
|
||||
<div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">계급 랭킹</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
<span class="d-tab d-tab-on">통합</span><span class="d-tab">시즌</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">유저</span>
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">야간부대장</span>
|
||||
<span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">헤드샷장인</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">5</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">9</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">삼보급단골</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">10</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">웨어하우스지박령</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 랭크전 랭킹 — RP 점수를 함께 -->
|
||||
<div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">랭크전 랭킹</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
<span class="d-tab d-tab-on">솔로</span><span class="d-tab">파티</span><span class="d-tab">클랜</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">유저</span>
|
||||
<span class="d-th" style="text-align: right;">RP</span>
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">헤드샷장인</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,486</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,451</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">삼보급단골</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,398</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">6</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,344</span><span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">웨어하우스지박령</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,301</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,276</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,240</span><span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,205</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">9</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">야간부대장</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,181</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">10</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,154</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 클랜 랭킹 — 클랜 마크 + 클랜명 -->
|
||||
<div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">클랜 랭킹</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
<span class="d-tab d-tab-on">공식</span><span class="d-tab">일반</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">클랜</span>
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 2.8v5.2c0 3.8-2.8 7.2-7 9-4.2-1.8-7-5.2-7-9V6.3z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대</span>
|
||||
<span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 4v9l-7 4-7-4v-9z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽클랜</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 2.8v5.2c0 3.8-2.8 7.2-7 9-4.2-1.8-7-5.2-7-9V6.3z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">야간부대</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 4v9l-7 4-7-4v-9z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">정예사격단</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 2.8v5.2c0 3.8-2.8 7.2-7 9-4.2-1.8-7-5.2-7-9V6.3z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">삼보급수호대</span>
|
||||
<span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 4v9l-7 4-7-4v-9z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">헤드샷연구소</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 2.8v5.2c0 3.8-2.8 7.2-7 9-4.2-1.8-7-5.2-7-9V6.3z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">크로스카운터</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 4v9l-7 4-7-4v-9z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">웨어하우스단</span>
|
||||
<span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">9</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 2.8v5.2c0 3.8-2.8 7.2-7 9-4.2-1.8-7-5.2-7-9V6.3z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽정찰대</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">10</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 4v9l-7 4-7-4v-9z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">삼보급기동대</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 순위 구간 이동 — 세 랭킹이 같은 구간을 함께 본다 -->
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #EDEFF2;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">1 ~ 10위 · 전체 100위</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="d-arw" style="opacity: 0.4;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.125rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; background: #14161A; font-size: 0.875rem; font-weight: 700; color: #FFFFFF;">1</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">2</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">3</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">4</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">5</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 34px; font-size: 0.875rem; color: #9BA1A9;">…</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">10</span>
|
||||
</div>
|
||||
<span class="d-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
</section>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,335 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 안 A — 세로 스택형: 검색 히어로 아래로 섹션을 한 줄씩 쌓는다 */
|
||||
body { margin: 0; }
|
||||
.h-root, .h-root * { box-sizing: border-box; }
|
||||
.h-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: #0866FF; text-decoration: none; }
|
||||
a:hover { color: #0450CC; }
|
||||
.h2 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em; }
|
||||
.th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.tab { display: inline-flex; align-items: center; height: 32px; padding: 0 0.875rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
|
||||
.tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.arw { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; cursor: pointer; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="h-root" style="width: 1440px; min-height: 3000px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 2rem; height: 76px; padding: 0 48px; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<div style="width: 32px; height: 32px; border-radius: 11px; background: #0866FF; display: flex; align-items: center; justify-content: center;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
|
||||
</div>
|
||||
<span style="font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>
|
||||
</div>
|
||||
<nav style="display: flex; align-items: center; gap: 1.625rem; margin-left: 1rem; font-size: 0.9375rem;">
|
||||
<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>
|
||||
<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="display: flex; flex-direction: column; align-items: center; padding: 48px 48px 44px;">
|
||||
<h1 style="margin: 0; font-size: 2.25rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.045em;">누구의 전적이 궁금하세요?</h1>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B6169;">닉네임만 알려주시면 최근 경기부터 자주 쓰는 무기까지 정리해 드릴게요.</p>
|
||||
<div style="display: flex; align-items: center; gap: 0.875rem; width: 100%; max-width: 680px; height: 64px; margin-top: 1.625rem; padding: 0 0.5rem 0 1.375rem; background: #FFFFFF; border: 1px solid #E4E8ED; border-radius: 999px; box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 12px 32px rgba(20, 22, 26, 0.07);">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" 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 style="flex-grow: 1; font-size: 1rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
<button style="height: 48px; padding: 0 1.625rem; border: none; border-radius: 999px; background: #0866FF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em; cursor: pointer;">찾아보기</button>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem;">
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9; margin-right: 0.25rem;">최근에 찾아봤어요</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #F5F6F8; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #DDE4EE;"></span>달빛조각사</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #F5F6F8; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #E5E0F0;"></span>칼든햄스터</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #F5F6F8; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #E7E3D8;"></span>새벽두시</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 이벤트 슬라이드 -->
|
||||
<section style="padding: 0 48px 48px;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 1rem;">
|
||||
<h2 class="h2">이벤트</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<!-- 배너는 제목이 이미지 안에 들어 있는 가로형(720:248). 이미지를 그대로 살리고 설명은 아래 한 줄로 뺀다. -->
|
||||
<div style="border: 1px solid #EDEFF2; border-radius: 24px; overflow: hidden;">
|
||||
<img src="20260903074208.jpg" alt="서든 페스티벌 같이 갈래?" style="display: block; width: 100%; aspect-ratio: 720 / 248; object-fit: cover;">
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.875rem; height: 60px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">시즌 이벤트</span>
|
||||
<span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
|
||||
<span style="font-size: 1rem; font-weight: 600;">서든 페스티벌 같이 갈래?</span>
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9;">9월 1일 ~ 9월 30일</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="width: 22px; height: 5px; border-radius: 999px; background: #14161A;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9; margin: 0 0.25rem 0 0.5rem;">1 / 5</span>
|
||||
<span class="arw"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<span class="arw"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 게임 랭킹 + 검색 랭킹 -->
|
||||
<section style="display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2.5rem; padding: 0 48px 48px;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="h2">게임 랭킹</h2>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-left: 1.25rem;">
|
||||
<span class="tab tab-on">전체</span>
|
||||
<span class="tab">폭파미션</span>
|
||||
<span class="tab">팀 데스매치</span>
|
||||
<span class="tab">클랜전</span>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 36px; margin-top: 1rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="th">순위</span><span class="th">유저</span>
|
||||
<span class="th" style="text-align: right;">승률</span>
|
||||
<span class="th" style="text-align: right;">K/D</span>
|
||||
<span class="th" style="text-align: right;">헤드샷</span>
|
||||
<span class="th" style="text-align: right;">판수</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">1</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; min-width: 0;"><span style="width: 34px; height: 34px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span><span style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span><span style="font-size: 0.8125rem; color: #9BA1A9;">병장 3호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">78.4%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">2.14</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">41.2%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">1,284</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">2</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; min-width: 0;"><span style="width: 34px; height: 34px; border-radius: 999px; background: #E5E0F0; flex-shrink: 0;"></span><span style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span><span style="font-size: 0.8125rem; color: #9BA1A9;">소위 1호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">74.9%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.96</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">38.7%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">2,041</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">3</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; min-width: 0;"><span style="width: 34px; height: 34px; border-radius: 999px; background: #E7E3D8; flex-shrink: 0;"></span><span style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span><span style="font-size: 0.8125rem; color: #9BA1A9;">병장 1호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">71.2%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.88</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">44.1%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">986</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; min-width: 0;"><span style="width: 34px; height: 34px; border-radius: 999px; background: #D8E6E2; flex-shrink: 0;"></span><span style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span><span style="font-size: 0.8125rem; color: #9BA1A9;">중사 2호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">69.5%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.74</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">33.9%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">3,102</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; min-width: 0;"><span style="width: 34px; height: 34px; border-radius: 999px; background: #EDDFE2; flex-shrink: 0;"></span><span style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span><span style="font-size: 0.8125rem; color: #9BA1A9;">상사 1호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">68.1%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.71</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">47.3%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">742</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; min-width: 0;"><span style="width: 34px; height: 34px; border-radius: 999px; background: #E4E8ED; flex-shrink: 0;"></span><span style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span><span style="font-size: 0.8125rem; color: #9BA1A9;">병장 2호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">66.7%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.68</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">36.4%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">1,530</span>
|
||||
</div>
|
||||
|
||||
<button style="width: 100%; height: 48px; margin-top: 1rem; border: none; border-radius: 999px; background: #F5F6F8; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">랭킹 100위까지 보기</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="h2">검색 랭킹</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">18:20 기준</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 36px; margin-top: 1rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="th">순위</span><span class="th">닉네임</span><span class="th" style="text-align: right;">변동</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span><span class="clip" style="font-size: 0.9375rem;">달빛조각사</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span><span class="clip" style="font-size: 0.9375rem;">칼든햄스터</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span><span class="clip" style="font-size: 0.9375rem;">새벽두시</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span><span class="clip" style="font-size: 0.9375rem;">무명연대장</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span><span class="clip" style="font-size: 0.9375rem;">한밤의저격수</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span><span class="clip" style="font-size: 0.9375rem;">조용한총잡이</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span><span class="clip" style="font-size: 0.9375rem;">야간부대장</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span><span class="clip" style="font-size: 0.9375rem;">헤드샷장인</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">5</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 소식 2단 -->
|
||||
<section style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; padding: 0 48px 48px;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="h2">서든어택 소식</h2><div style="flex-grow: 1;"></div><span class="more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="tab tab-on">공지사항</span><span class="tab">업데이트</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내 (09.04 02:00~08:00)</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과 안내</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정 공지</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.29</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.28</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정 안내</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="h2">서린즈 소식</h2><div style="flex-grow: 1;"></div><span class="more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="tab tab-on">공지사항</span><span class="tab">업데이트</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 새로 열었어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.03</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">전적 갱신 속도가 두 배 빨라졌어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">즐겨찾기한 유저 알림 기능 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.30</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">8월 서버 점검 결과 보고</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.27</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">커뮤니티 이용 규칙을 정리했어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.24</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 스트리밍 -->
|
||||
<section style="padding: 0 48px 48px;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="h2">지금 방송 중</h2>
|
||||
<span style="margin-left: 0.875rem; font-size: 0.875rem; color: #9BA1A9;">시청자 2,924명</span>
|
||||
<div style="flex-grow: 1;"></div><span class="more">전체 보기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.125rem;">
|
||||
<div>
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 16px; background: #E4E8ED;"></div>
|
||||
<div class="clip" style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">삼보급 스나 연습</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; font-weight: 600; color: #E8443A;">LIVE</span><span style="font-size: 0.8125rem; color: #9BA1A9;">달빛조각사 · 1,204명</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 16px; background: #EAE6E0;"></div>
|
||||
<div class="clip" style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">클랜전 정기 리그 중계</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; font-weight: 600; color: #E8443A;">LIVE</span><span style="font-size: 0.8125rem; color: #9BA1A9;">무명연대 · 862명</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 16px; background: #E2E9E6;"></div>
|
||||
<div class="clip" style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">초보 탈출 폭파미션 강의</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; font-weight: 600; color: #E8443A;">LIVE</span><span style="font-size: 0.8125rem; color: #9BA1A9;">새벽두시 · 517명</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 16px; background: #E8E4EC;"></div>
|
||||
<div class="clip" style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">시청자 참여 한 판</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; font-weight: 600; color: #E8443A;">LIVE</span><span style="font-size: 0.8125rem; color: #9BA1A9;">한밤의저격수 · 341명</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 커뮤니티 -->
|
||||
<section style="padding: 0 48px 48px;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="h2">커뮤니티</h2>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-left: 1.25rem;">
|
||||
<span class="tab tab-on">인기</span><span class="tab">최신</span><span class="tab">클립</span><span class="tab">공략</span><span class="tab">클랜원 모집</span>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div><span class="more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.125rem;">
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 18px; background: #E4E8ED; overflow: hidden;">
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.5rem; height: 46px; padding: 0 0.875rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 22px; height: 22px; border-radius: 999px; background: #C9D2DD;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: #FFFFFF;">달빛조각사</span><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg><span style="font-size: 0.8125rem; font-weight: 600; color: #FFFFFF;">312</span></div>
|
||||
</div>
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 18px; background: #EAE6E0; overflow: hidden;">
|
||||
<div style="position: absolute; top: 12px; right: 12px;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="3" width="13" height="13" rx="3"></rect><path d="M16 19.5A2.5 2.5 0 0113.5 22H6a3 3 0 01-3-3V9.5"></path></svg></div>
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.5rem; height: 46px; padding: 0 0.875rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 22px; height: 22px; border-radius: 999px; background: #D8D2C8;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: #FFFFFF;">칼든햄스터</span><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg><span style="font-size: 0.8125rem; font-weight: 600; color: #FFFFFF;">274</span></div>
|
||||
</div>
|
||||
<!-- 사진 없는 글 — 본문이 곧 썸네일이 된다 -->
|
||||
<div style="display: flex; flex-direction: column; aspect-ratio: 1 / 1; padding: 22px; border-radius: 18px; background: #F5F6F8;">
|
||||
<p style="margin: 0; font-size: 1.0625rem; line-height: 1.6; font-weight: 500;">폭파 삼보급에서 A 롱각 잡을 때 다들 어디 서세요? 요즘 자꾸 먼저 죽습니다.</p>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="width: 22px; height: 22px; border-radius: 999px; background: #DDE4EE;"></span>
|
||||
<span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600;">새벽두시</span>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #5B6169;">198</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 클립(영상) 글 -->
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 18px; background: #E8E4EC; overflow: hidden;">
|
||||
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; background: rgba(20, 22, 26, 0.55);">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M8 5.5l11 6.5-11 6.5z"></path></svg>
|
||||
</div>
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.5rem; height: 46px; padding: 0 0.875rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 22px; height: 22px; border-radius: 999px; background: #D5CEDC;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: #FFFFFF;">무명연대장</span><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg><span style="font-size: 0.8125rem; font-weight: 600; color: #FFFFFF;">163</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button style="width: 100%; height: 48px; margin-top: 1.25rem; border: none; border-radius: 999px; background: #F5F6F8; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">게시글 더 보기</button>
|
||||
</section>
|
||||
|
||||
<footer style="display: flex; align-items: center; gap: 1.5rem; padding: 32px 48px 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,547 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 홈 B — 포털 3단: 좌 랭킹 / 중앙 검색·소식·커뮤니티 / 우 스트리밍·이벤트 */
|
||||
body { margin: 0; }
|
||||
.p-root, .p-root * { box-sizing: border-box; }
|
||||
.p-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: #0866FF; text-decoration: none; }
|
||||
a:hover { color: #0450CC; }
|
||||
.p-h2 { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em; }
|
||||
.p-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.p-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; }
|
||||
.p-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.p-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
/* 한 줄 제목 자르기 */
|
||||
.p-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.p-arw { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; cursor: pointer; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="p-root" style="width: 1440px; min-height: 2360px; 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;">
|
||||
<div style="width: 32px; height: 32px; border-radius: 11px; background: #0866FF; display: flex; align-items: center; justify-content: center;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
|
||||
</div>
|
||||
<span style="font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; font-size: 0.9375rem;">
|
||||
<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; display: flex; justify-content: center;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; width: 100%; max-width: 340px; height: 44px; padding: 0 1.125rem; background: #F5F6F8; border-radius: 999px;">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" 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 style="font-size: 0.875rem; color: #9BA1A9;">닉네임 검색</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 3단 본문 -->
|
||||
<div style="display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 2rem; padding: 32px 40px 56px;">
|
||||
|
||||
<!-- 좌: 게임 랭킹 + 검색 랭킹 -->
|
||||
<aside>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="p-h2">게임 랭킹</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="p-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="p-tab p-tab-on">승률</span>
|
||||
<span class="p-tab">K/D</span>
|
||||
<span class="p-tab">헤드샷</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 34px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="p-th">#</span>
|
||||
<span class="p-th">유저</span>
|
||||
<span class="p-th" style="text-align: right;">승률</span>
|
||||
<span class="p-th" style="text-align: right;">K/D</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">78.4%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">2.14</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #E5E0F0; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">74.9%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.96</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #E7E3D8; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">71.2%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.88</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #D8E6E2; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">69.5%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.74</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #EDDFE2; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">68.1%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.71</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #E4E8ED; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">66.7%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.68</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #EAE6E0; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">야간부대장</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">65.2%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.63</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #E2E9E6; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">헤드샷장인</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">64.8%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.59</span>
|
||||
</div>
|
||||
|
||||
<button style="width: 100%; height: 44px; margin-top: 1rem; border: none; border-radius: 999px; background: #F5F6F8; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">랭킹 100위까지 보기</button>
|
||||
|
||||
<div style="height: 1px; background: #EDEFF2; margin: 2rem 0;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="p-h2">검색 랭킹</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">18:20 기준</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 34px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="p-th">#</span>
|
||||
<span class="p-th">닉네임</span>
|
||||
<span class="p-th" style="text-align: right;">변동</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">달빛조각사</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #12805C;">2</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">칼든햄스터</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #C4453D;">1</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">새벽두시</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #12805C;">4</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">무명연대장</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">한밤의저격수</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #12805C;">3</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">조용한총잡이</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #C4453D;">2</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">야간부대장</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">헤드샷장인</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #12805C;">5</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">9</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">삼보급단골</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">10</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">웨어하우스지박령</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #12805C;">1</span>
|
||||
</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 중앙: 검색 + 소식 + 커뮤니티 피드 -->
|
||||
<main>
|
||||
<div style="display: flex; align-items: center; gap: 0.875rem; height: 64px; padding: 0 0.5rem 0 1.25rem; background: #FFFFFF; border: 1px solid #E4E8ED; border-radius: 999px; box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 10px 28px rgba(20, 22, 26, 0.06);">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" 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 style="flex-grow: 1; font-size: 1rem; color: #9BA1A9;">궁금한 닉네임을 입력해 보세요</span>
|
||||
<button style="height: 48px; padding: 0 1.5rem; border: none; border-radius: 999px; background: #0866FF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em; cursor: pointer;">찾아보기</button>
|
||||
</div>
|
||||
|
||||
<!-- 소식 2단 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.75rem;">
|
||||
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="p-h2">서든어택 소식</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="p-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="p-tab p-tab-on">공지사항</span>
|
||||
<span class="p-tab">업데이트</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.29</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.28</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="p-h2">서린즈 소식</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="p-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="p-tab p-tab-on">공지사항</span>
|
||||
<span class="p-tab">업데이트</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 열었어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.03</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">전적 갱신이 두 배 빨라졌어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">즐겨찾기 알림 기능 추가</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.30</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">8월 서버 점검 결과 보고</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.27</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">커뮤니티 이용 규칙 정리</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.24</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 커뮤니티 -->
|
||||
<div style="display: flex; align-items: center; margin-top: 2.25rem;">
|
||||
<h2 class="p-h2">커뮤니티</h2>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-left: 1.125rem;">
|
||||
<span class="p-tab p-tab-on">인기</span>
|
||||
<span class="p-tab">최신</span>
|
||||
<span class="p-tab">클립</span>
|
||||
<span class="p-tab">공략</span>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<button style="height: 34px; padding: 0 1rem; border: none; border-radius: 999px; background: #F5F6F8; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">글쓰기</button>
|
||||
</div>
|
||||
|
||||
<article style="padding: 1.5rem 0 1.75rem; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span style="width: 44px; height: 44px; border-radius: 999px; background: #DDE4EE;"></span>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.0625rem;">병장 3호봉 · 12분 전</div>
|
||||
</div>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="#9BA1A9"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg>
|
||||
</div>
|
||||
|
||||
<div style="aspect-ratio: 16 / 9; margin-top: 1rem; border-radius: 18px; background: #E4E8ED;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 1rem; margin-top: 0.875rem;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.5S3.5 15.2 3.5 9.6A4.8 4.8 0 0112 6.6a4.8 4.8 0 018.5 3c0 5.6-8.5 10.9-8.5 10.9z"></path></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-9 8.4 9.3 9.3 0 01-3.4-.6L3 21l1.8-5A8.1 8.1 0 013.5 11.5a8.4 8.4 0 019-8.4 8.4 8.4 0 018.5 8.4z"></path></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 3.5L11 14"></path><path d="M21.5 3.5l-6.7 18-3.8-7.5L3.5 10.2z"></path></svg>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h12v17l-6-4.3-6 4.3z"></path></svg>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">좋아요 312개</div>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.65;">
|
||||
<span style="font-weight: 600;">달빛조각사</span>
|
||||
제3보급창고 마지막 라운드 1대4 역전했어요. 각도만 잘 잡으면 아직 됩니다.
|
||||
</p>
|
||||
<div style="font-size: 0.875rem; color: #9BA1A9; margin-top: 0.5rem;">댓글 24개 모두 보기</div>
|
||||
</article>
|
||||
|
||||
<!-- 사진 없는 글 — 이미지 영역 없이 본문이 바로 온다 -->
|
||||
<article style="padding: 1.5rem 0 1.75rem; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span style="width: 44px; height: 44px; border-radius: 999px; background: #E5E0F0;"></span>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.0625rem;">소위 1호봉 · 48분 전</div>
|
||||
</div>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="#9BA1A9"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg>
|
||||
</div>
|
||||
|
||||
<p style="margin: 1rem 0 0; font-size: 1.0625rem; line-height: 1.75;">웨어하우스 스나 자리 세 군데만 외우면 됩니다. 컨테이너 위, 이층 창문, 그리고 리스폰 바로 옆 기둥. 나머지는 다 걸립니다.</p>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 1rem; margin-top: 1.125rem;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.5S3.5 15.2 3.5 9.6A4.8 4.8 0 0112 6.6a4.8 4.8 0 018.5 3c0 5.6-8.5 10.9-8.5 10.9z"></path></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-9 8.4 9.3 9.3 0 01-3.4-.6L3 21l1.8-5A8.1 8.1 0 013.5 11.5a8.4 8.4 0 019-8.4 8.4 8.4 0 018.5 8.4z"></path></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 3.5L11 14"></path><path d="M21.5 3.5l-6.7 18-3.8-7.5L3.5 10.2z"></path></svg>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h12v17l-6-4.3-6 4.3z"></path></svg>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">좋아요 274개</div>
|
||||
<div style="font-size: 0.875rem; color: #9BA1A9; margin-top: 0.375rem;">댓글 18개 모두 보기</div>
|
||||
</article>
|
||||
|
||||
<!-- 클립(영상) 글 -->
|
||||
<article style="padding: 1.5rem 0 1.75rem; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span style="width: 44px; height: 44px; border-radius: 999px; background: #E7E3D8;"></span>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.9375rem; font-weight: 600;">새벽두시</div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.0625rem;">병장 1호봉 · 2시간 전</div>
|
||||
</div>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="#9BA1A9"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg>
|
||||
</div>
|
||||
|
||||
<div style="position: relative; aspect-ratio: 16 / 9; margin-top: 1rem; border-radius: 18px; background: #EAE6E0; overflow: hidden;">
|
||||
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 999px; background: rgba(20, 22, 26, 0.55);">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M8 5.5l11 6.5-11 6.5z"></path></svg>
|
||||
</div>
|
||||
<div style="position: absolute; right: 12px; bottom: 12px; padding: 0.25rem 0.5rem; border-radius: 8px; background: rgba(20, 22, 26, 0.6); font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">0:24</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 1rem; margin-top: 0.875rem;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.5S3.5 15.2 3.5 9.6A4.8 4.8 0 0112 6.6a4.8 4.8 0 018.5 3c0 5.6-8.5 10.9-8.5 10.9z"></path></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-9 8.4 9.3 9.3 0 01-3.4-.6L3 21l1.8-5A8.1 8.1 0 013.5 11.5a8.4 8.4 0 019-8.4 8.4 8.4 0 018.5 8.4z"></path></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 3.5L11 14"></path><path d="M21.5 3.5l-6.7 18-3.8-7.5L3.5 10.2z"></path></svg>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h12v17l-6-4.3-6 4.3z"></path></svg>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">좋아요 198개</div>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.65;">
|
||||
<span style="font-weight: 600;">새벽두시</span>
|
||||
크로스카운터 1대3 클러치. 소리만 듣고 돌았습니다.
|
||||
</p>
|
||||
<div style="font-size: 0.875rem; color: #9BA1A9; margin-top: 0.5rem;">댓글 31개 모두 보기</div>
|
||||
</article>
|
||||
|
||||
<button style="width: 100%; height: 48px; margin-top: 1.5rem; border: none; border-radius: 999px; background: #F5F6F8; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">게시글 더 보기</button>
|
||||
</main>
|
||||
|
||||
<!-- 우: 스트리밍 + 이벤트 -->
|
||||
<aside>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="p-h2">지금 방송 중</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="p-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1.125rem;">
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 16px; background: #E4E8ED;"></div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">삼보급 스나 연습</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;">
|
||||
<span style="width: 6px; height: 6px; border-radius: 999px; background: #E8443A;"></span>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #E8443A;">LIVE</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">달빛조각사 · 1,204명</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 88px; height: 52px; border-radius: 12px; background: #EAE6E0; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div class="p-clip" style="font-size: 0.875rem; font-weight: 600;">클랜전 리그 중계</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;">
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #E8443A;"></span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">무명연대 · 862명</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 88px; height: 52px; border-radius: 12px; background: #E2E9E6; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div class="p-clip" style="font-size: 0.875rem; font-weight: 600;">초보 탈출 폭파 강의</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;">
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #E8443A;"></span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">새벽두시 · 517명</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 88px; height: 52px; border-radius: 12px; background: #E8E4EC; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div class="p-clip" style="font-size: 0.875rem; font-weight: 600;">시청자 참여 한 판</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;">
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #E8443A;"></span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">한밤의저격수 · 341명</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 1px; background: #EDEFF2; margin: 2rem 0;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="p-h2">이벤트</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="p-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<!-- 이벤트 슬라이드 — 가로형 배너(720:248)를 그대로 쓰고 설명은 아래에 -->
|
||||
<div style="margin-top: 1.125rem;">
|
||||
<div style="border: 1px solid #EDEFF2; border-radius: 14px; overflow: hidden;">
|
||||
<img src="20260903074208.jpg" alt="서든 페스티벌 같이 갈래?" style="display: block; width: 100%; aspect-ratio: 720 / 248; object-fit: cover;">
|
||||
</div>
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #9BA1A9; margin-top: 0.875rem;">시즌 이벤트</div>
|
||||
<div class="p-clip" style="font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 0.25rem;">서든 페스티벌 같이 갈래?</div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.375rem;">9월 1일 ~ 9월 30일</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.875rem;">
|
||||
<span style="width: 20px; height: 4px; border-radius: 999px; background: #14161A;"></span>
|
||||
<span style="width: 4px; height: 4px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 4px; height: 4px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 4px; height: 4px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 4px; height: 4px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9; margin-right: 0.125rem;">1 / 5</span>
|
||||
<span class="p-arw"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<span class="p-arw"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</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,305 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 안 C — 앱 사이드바형: 좌측 고정 내비 + 본문 2단 */
|
||||
body { margin: 0; }
|
||||
.c-root, .c-root * { box-sizing: border-box; }
|
||||
.c-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: #0866FF; text-decoration: none; }
|
||||
a:hover { color: #0450CC; }
|
||||
.c-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
|
||||
.c-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.c-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; }
|
||||
.c-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.c-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.c-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.c-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; cursor: pointer; }
|
||||
.c-nav { display: flex; align-items: center; gap: 0.875rem; height: 46px; padding: 0 0.875rem; border-radius: 14px; font-size: 0.9375rem; font-weight: 500; color: #14161A; }
|
||||
.c-nav-on { background: #EFF1F4; font-weight: 700; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="c-root" style="display: flex; width: 1440px; min-height: 2120px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<!-- 좌측 고정 내비 -->
|
||||
<aside style="display: flex; flex-direction: column; width: 240px; flex-shrink: 0; padding: 22px 14px 28px; background: #FAFBFC; border-right: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; padding: 0 0.75rem; margin-bottom: 1.5rem;">
|
||||
<div style="width: 30px; height: 30px; border-radius: 10px; background: #0866FF; display: flex; align-items: center; justify-content: center;">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
|
||||
</div>
|
||||
<span style="font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>
|
||||
</div>
|
||||
|
||||
<div class="c-nav c-nav-on">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11.5L12 4.5l8 7"></path><path d="M6 10.5V20h12v-9.5"></path></svg>
|
||||
홈
|
||||
</div>
|
||||
<div class="c-nav">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
전적 검색
|
||||
</div>
|
||||
<div class="c-nav">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V11M10 19V5M16 19v-6M21 19H3"></path></svg>
|
||||
랭킹
|
||||
</div>
|
||||
<div class="c-nav">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4.5" width="17" height="15" rx="4"></rect><path d="M8 10h8M8 14h5"></path></svg>
|
||||
커뮤니티
|
||||
</div>
|
||||
<div class="c-nav">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5" width="19" height="13" rx="3.5"></rect><path d="M10.5 9.5l4.5 2.5-4.5 2.5z"></path></svg>
|
||||
스트리밍
|
||||
</div>
|
||||
<div class="c-nav">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h9l3.5 3.5v13H6z"></path><path d="M9 11h7M9 15h5"></path></svg>
|
||||
소식
|
||||
</div>
|
||||
<div class="c-nav">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9.5h17M3.5 9.5A2 2 0 015.5 7.5h13a2 2 0 012 2v9a2 2 0 01-2 2h-13a2 2 0 01-2-2z"></path><path d="M8 4.5v4M16 4.5v4"></path></svg>
|
||||
이벤트
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; border-radius: 14px; background: #FFFFFF; border: 1px solid #EDEFF2;">
|
||||
<span style="width: 36px; height: 36px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span>
|
||||
<div style="min-width: 0;">
|
||||
<div class="c-clip" style="font-size: 0.875rem; font-weight: 600;">달빛조각사</div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9; margin-top: 0.0625rem;">병장 3호봉</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 본문 -->
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 1rem; height: 72px; padding: 0 40px; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 460px; height: 46px; padding: 0 1.125rem; background: #F5F6F8; border-radius: 999px;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" 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 style="font-size: 0.9375rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: #F5F6F8;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 106 8c0 7-3 9-3 9h18s-3-2-3-9z"></path><path d="M13.7 21a2 2 0 01-3.4 0"></path></svg>
|
||||
</span>
|
||||
<span style="width: 42px; height: 42px; border-radius: 999px; background: #DDE4EE;"></span>
|
||||
</header>
|
||||
|
||||
<div style="padding: 32px 40px 56px;">
|
||||
|
||||
<!-- 이벤트 슬라이드 -->
|
||||
<div style="display: flex; align-items: center; margin-bottom: 1rem;">
|
||||
<h2 class="c-h2">이벤트</h2><div style="flex-grow: 1;"></div><span class="c-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<!-- 가로형 배너(720:248) 그대로 + 아래 한 줄 설명 -->
|
||||
<div style="border: 1px solid #EDEFF2; border-radius: 24px; overflow: hidden;">
|
||||
<img src="20260903074208.jpg" alt="서든 페스티벌 같이 갈래?" style="display: block; width: 100%; aspect-ratio: 720 / 248; object-fit: cover;">
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.875rem; height: 58px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">시즌 이벤트</span>
|
||||
<span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
|
||||
<span style="font-size: 1rem; font-weight: 600;">서든 페스티벌 같이 갈래?</span>
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9;">9월 1일 ~ 9월 30일</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="width: 22px; height: 5px; border-radius: 999px; background: #14161A;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9; margin: 0 0.25rem 0 0.5rem;">1 / 5</span>
|
||||
<span class="c-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<span class="c-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
|
||||
<!-- 2단 -->
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; margin-top: 2.5rem;">
|
||||
|
||||
<div>
|
||||
<!-- 게임 랭킹 -->
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="c-h2">게임 랭킹</h2>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-left: 1rem;">
|
||||
<span class="c-tab c-tab-on">전체</span><span class="c-tab">폭파미션</span><span class="c-tab">팀 데스매치</span>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div><span class="c-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 36px; margin-top: 1rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="c-th">순위</span><span class="c-th">유저</span>
|
||||
<span class="c-th" style="text-align: right;">승률</span>
|
||||
<span class="c-th" style="text-align: right;">K/D</span>
|
||||
<span class="c-th" style="text-align: right;">판수</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 54px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">1</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;"><span style="width: 32px; height: 32px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span><span class="c-clip" style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span><span style="font-size: 0.8125rem; color: #9BA1A9; flex-shrink: 0;">병장 3호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">78.4%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">2.14</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">1,284</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 54px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">2</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;"><span style="width: 32px; height: 32px; border-radius: 999px; background: #E5E0F0; flex-shrink: 0;"></span><span class="c-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span><span style="font-size: 0.8125rem; color: #9BA1A9; flex-shrink: 0;">소위 1호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">74.9%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.96</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">2,041</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 54px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">3</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;"><span style="width: 32px; height: 32px; border-radius: 999px; background: #E7E3D8; flex-shrink: 0;"></span><span class="c-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span><span style="font-size: 0.8125rem; color: #9BA1A9; flex-shrink: 0;">병장 1호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">71.2%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.88</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">986</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 54px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;"><span style="width: 32px; height: 32px; border-radius: 999px; background: #D8E6E2; flex-shrink: 0;"></span><span class="c-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span><span style="font-size: 0.8125rem; color: #9BA1A9; flex-shrink: 0;">중사 2호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">69.5%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.74</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">3,102</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 54px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;"><span style="width: 32px; height: 32px; border-radius: 999px; background: #EDDFE2; flex-shrink: 0;"></span><span class="c-clip" style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span><span style="font-size: 0.8125rem; color: #9BA1A9; flex-shrink: 0;">상사 1호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">68.1%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.71</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">742</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 54px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;"><span style="width: 32px; height: 32px; border-radius: 999px; background: #E4E8ED; flex-shrink: 0;"></span><span class="c-clip" style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span><span style="font-size: 0.8125rem; color: #9BA1A9; flex-shrink: 0;">병장 2호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">66.7%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.68</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">1,530</span>
|
||||
</div>
|
||||
|
||||
<button style="width: 100%; height: 46px; margin-top: 1rem; border: none; border-radius: 999px; background: #F5F6F8; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">랭킹 100위까지 보기</button>
|
||||
|
||||
<!-- 소식 2단 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;"><h2 class="c-h2">서든어택 소식</h2><div style="flex-grow: 1;"></div><span class="c-more">더 보기</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;"><span class="c-tab c-tab-on">공지사항</span><span class="c-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.29</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.28</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;"><h2 class="c-h2">서린즈 소식</h2><div style="flex-grow: 1;"></div><span class="c-more">더 보기</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;"><span class="c-tab c-tab-on">공지사항</span><span class="c-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 열었어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.03</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">전적 갱신이 두 배 빨라졌어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">즐겨찾기 알림 기능 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.30</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">8월 서버 점검 결과 보고</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.27</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">커뮤니티 이용 규칙 정리</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.24</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 커뮤니티 -->
|
||||
<div style="display: flex; align-items: center; margin-top: 2.5rem;">
|
||||
<h2 class="c-h2">커뮤니티</h2>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-left: 1rem;">
|
||||
<span class="c-tab c-tab-on">인기</span><span class="c-tab">최신</span><span class="c-tab">클립</span>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div><span class="c-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.125rem;">
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 18px; background: #E4E8ED; overflow: hidden;">
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.4375rem; height: 44px; padding: 0 0.75rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 20px; height: 20px; border-radius: 999px; background: #C9D2DD;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">달빛조각사</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg><span style="font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">312</span></div>
|
||||
</div>
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 18px; background: #EAE6E0; overflow: hidden;">
|
||||
<div style="position: absolute; top: 10px; right: 10px;"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="3" width="13" height="13" rx="3"></rect><path d="M16 19.5A2.5 2.5 0 0113.5 22H6a3 3 0 01-3-3V9.5"></path></svg></div>
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.4375rem; height: 44px; padding: 0 0.75rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 20px; height: 20px; border-radius: 999px; background: #D8D2C8;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">칼든햄스터</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg><span style="font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">274</span></div>
|
||||
</div>
|
||||
<!-- 사진 없는 글 — 본문이 곧 썸네일이 된다 -->
|
||||
<div style="display: flex; flex-direction: column; aspect-ratio: 1 / 1; padding: 18px; border-radius: 18px; background: #F5F6F8;">
|
||||
<p style="margin: 0; font-size: 0.9375rem; line-height: 1.6; font-weight: 500;">폭파 삼보급에서 A 롱각 잡을 때 다들 어디 서세요? 요즘 자꾸 먼저 죽습니다.</p>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="width: 20px; height: 20px; border-radius: 999px; background: #DDE4EE;"></span>
|
||||
<span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600;">새벽두시</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #5B6169;">198</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 우측 레일 -->
|
||||
<aside>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="c-h2">검색 랭킹</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">18:20 기준</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 34px; margin-top: 1rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="c-th">#</span><span class="c-th">닉네임</span><span class="c-th" style="text-align: right;">변동</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 700;">1</span><span class="c-clip" style="font-size: 0.9375rem;">달빛조각사</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 700;">2</span><span class="c-clip" style="font-size: 0.9375rem;">칼든햄스터</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">1</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 700;">3</span><span class="c-clip" style="font-size: 0.9375rem;">새벽두시</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">4</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span><span class="c-clip" style="font-size: 0.9375rem;">무명연대장</span><span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span><span class="c-clip" style="font-size: 0.9375rem;">한밤의저격수</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">3</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span><span class="c-clip" style="font-size: 0.9375rem;">조용한총잡이</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">2</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span><span class="c-clip" style="font-size: 0.9375rem;">야간부대장</span><span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span><span class="c-clip" style="font-size: 0.9375rem;">헤드샷장인</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">5</span></span></div>
|
||||
|
||||
<div style="height: 1px; background: #EDEFF2; margin: 2rem 0;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="c-h2">지금 방송 중</h2><div style="flex-grow: 1;"></div><span class="c-more">전체 보기</span>
|
||||
</div>
|
||||
<div style="margin-top: 1.125rem;">
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 16px; background: #E4E8ED;"></div>
|
||||
<div class="c-clip" style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">삼보급 스나 연습</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; font-weight: 600; color: #E8443A;">LIVE</span><span style="font-size: 0.8125rem; color: #9BA1A9;">달빛조각사 · 1,204명</span></div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 88px; height: 52px; border-radius: 12px; background: #EAE6E0; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;"><div class="c-clip" style="font-size: 0.875rem; font-weight: 600;">클랜전 리그 중계</div><div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 5px; height: 5px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; color: #9BA1A9;">무명연대 · 862명</span></div></div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 88px; height: 52px; border-radius: 12px; background: #E2E9E6; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;"><div class="c-clip" style="font-size: 0.875rem; font-weight: 600;">초보 탈출 폭파 강의</div><div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 5px; height: 5px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; color: #9BA1A9;">새벽두시 · 517명</span></div></div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 88px; height: 52px; border-radius: 12px; background: #E8E4EC; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;"><div class="c-clip" style="font-size: 0.875rem; font-weight: 600;">시청자 참여 한 판</div><div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 5px; height: 5px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; color: #9BA1A9;">한밤의저격수 · 341명</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</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>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,478 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 홈 (확정) — 최상단 검색 히어로 + 균등 3열 밀도 그리드 */
|
||||
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: #0866FF; text-decoration: none; }
|
||||
a:hover { color: #0450CC; }
|
||||
.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-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; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.d-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F0F2F5; }
|
||||
.d-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #EDEFF2; }
|
||||
.d-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; cursor: pointer; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 2420px; 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;">
|
||||
<div style="width: 32px; height: 32px; border-radius: 11px; background: #0866FF; display: flex; align-items: center; justify-content: center;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
|
||||
</div>
|
||||
<span style="font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
|
||||
<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>
|
||||
<span style="font-weight: 500; color: #5B6169;">이벤트</span>
|
||||
</nav>
|
||||
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
||||
<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; flex-direction: column; align-items: center; padding: 52px 40px 46px;">
|
||||
<h1 style="margin: 0; text-align: center; font-size: 2.125rem; line-height: 1.28; font-weight: 700; letter-spacing: -0.045em;">누구의 전적이 궁금하세요?</h1>
|
||||
<p style="margin: 0.75rem 0 0; text-align: center; font-size: 0.9375rem; line-height: 1.65; color: #5B6169;">닉네임만 알려주시면 최근 경기 흐름부터 자주 쓰는 무기까지 정리해 드릴게요.</p>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.875rem; width: 100%; max-width: 700px; height: 66px; margin-top: 1.625rem; padding: 0 0.5rem 0 1.375rem; background: #FFFFFF; border: 1px solid #E4E8ED; border-radius: 999px; box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 12px 32px rgba(20, 22, 26, 0.07);">
|
||||
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" 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 style="flex-grow: 1; font-size: 1.0625rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
<button style="height: 50px; padding: 0 1.75rem; border: none; border-radius: 999px; background: #0866FF; font-family: inherit; font-size: 1rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em; cursor: pointer;">찾아보기</button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem;">
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9; margin-right: 0.25rem;">최근에 찾아봤어요</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #DDE4EE;"></span>달빛조각사</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #E5E0F0;"></span>칼든햄스터</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #E7E3D8;"></span>새벽두시</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #D8E6E2;"></span>무명연대장</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 균등 3열 그리드 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; padding: 36px 40px 56px;">
|
||||
|
||||
<!-- 이벤트 슬라이드 (2칸) -->
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">이벤트</h2><div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<!-- 가로형 배너(720:248) 그대로 + 아래 한 줄 설명 -->
|
||||
<div style="border: 1px solid #EDEFF2; border-radius: 24px; overflow: hidden;">
|
||||
<img src="20260903074208.jpg" alt="서든 페스티벌 같이 갈래?" style="display: block; width: 100%; aspect-ratio: 720 / 248; object-fit: cover;">
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 56px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">시즌 이벤트</span>
|
||||
<span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
|
||||
<span class="d-clip" style="font-size: 1rem; font-weight: 600;">서든 페스티벌 같이 갈래?</span>
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9; white-space: nowrap;">9월 1일 ~ 9월 30일</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="width: 22px; height: 5px; border-radius: 999px; background: #14161A;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9; margin: 0 0.25rem 0 0.5rem;">1 / 5</span>
|
||||
<span class="d-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<span class="d-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 검색 랭킹 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">검색 랭킹</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">18:20 기준</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 34px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">순위</span><span class="d-th">닉네임</span><span class="d-th" style="text-align: right;">변동</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 700;">1</span><span class="d-clip" style="font-size: 0.9375rem;">달빛조각사</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 700;">2</span><span class="d-clip" style="font-size: 0.9375rem;">칼든햄스터</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">1</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 700;">3</span><span class="d-clip" style="font-size: 0.9375rem;">새벽두시</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">4</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span><span class="d-clip" style="font-size: 0.9375rem;">무명연대장</span><span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span><span class="d-clip" style="font-size: 0.9375rem;">한밤의저격수</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">3</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span><span class="d-clip" style="font-size: 0.9375rem;">조용한총잡이</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">2</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span><span class="d-clip" style="font-size: 0.9375rem;">야간부대장</span><span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span><span class="d-clip" style="font-size: 0.9375rem;">헤드샷장인</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">5</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">9</span><span class="d-clip" style="font-size: 0.9375rem;">삼보급단골</span><span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span></div>
|
||||
</section>
|
||||
|
||||
<!-- 게임 랭킹 (2칸) — 계급 / 랭크전 / 클랜 세 갈래를 나란히 -->
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">게임 랭킹</h2>
|
||||
<span style="margin-left: 0.75rem; font-size: 0.8125rem; color: #9BA1A9;">매일 오전 8시 갱신</span>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;">
|
||||
|
||||
<!-- 계급 랭킹 -->
|
||||
<div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">계급 랭킹</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
<span class="d-tab d-tab-on">통합</span><span class="d-tab">시즌</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">유저</span>
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">야간부대장</span>
|
||||
<span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">헤드샷장인</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">5</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">9</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">삼보급단골</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">10</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">웨어하우스지박령</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 랭크전 랭킹 — RP 점수를 함께 -->
|
||||
<div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">랭크전 랭킹</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
<span class="d-tab d-tab-on">솔로</span><span class="d-tab">파티</span><span class="d-tab">클랜</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">유저</span>
|
||||
<span class="d-th" style="text-align: right;">RP</span>
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">헤드샷장인</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,486</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,451</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">삼보급단골</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,398</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">6</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,344</span><span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">웨어하우스지박령</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,301</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,276</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,240</span><span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,205</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">9</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">야간부대장</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,181</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">10</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,154</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 클랜 랭킹 — 클랜 마크 + 클랜명 -->
|
||||
<div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">클랜 랭킹</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
<span class="d-tab d-tab-on">공식</span><span class="d-tab">일반</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">클랜</span>
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 2.8v5.2c0 3.8-2.8 7.2-7 9-4.2-1.8-7-5.2-7-9V6.3z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대</span>
|
||||
<span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 4v9l-7 4-7-4v-9z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽클랜</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 2.8v5.2c0 3.8-2.8 7.2-7 9-4.2-1.8-7-5.2-7-9V6.3z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">야간부대</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 4v9l-7 4-7-4v-9z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">정예사격단</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 2.8v5.2c0 3.8-2.8 7.2-7 9-4.2-1.8-7-5.2-7-9V6.3z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">삼보급수호대</span>
|
||||
<span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 4v9l-7 4-7-4v-9z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">헤드샷연구소</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 2.8v5.2c0 3.8-2.8 7.2-7 9-4.2-1.8-7-5.2-7-9V6.3z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">크로스카운터</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 4v9l-7 4-7-4v-9z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">웨어하우스단</span>
|
||||
<span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">9</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 2.8v5.2c0 3.8-2.8 7.2-7 9-4.2-1.8-7-5.2-7-9V6.3z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽정찰대</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">10</span>
|
||||
<span class="d-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3.5l7 4v9l-7 4-7-4v-9z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">삼보급기동대</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 순위 구간 이동 — 세 랭킹이 같은 구간을 함께 본다 -->
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #EDEFF2;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">1 ~ 10위 · 전체 100위</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="d-arw" style="opacity: 0.4;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.125rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; background: #14161A; font-size: 0.875rem; font-weight: 700; color: #FFFFFF;">1</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">2</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">3</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">4</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">5</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 34px; font-size: 0.875rem; color: #9BA1A9;">…</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">10</span>
|
||||
</div>
|
||||
<span class="d-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 커뮤니티 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">커뮤니티</h2><div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">인기</span><span class="d-tab">최신</span><span class="d-tab">클립</span></div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.875rem;">
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 18px; background: #E4E8ED; overflow: hidden;">
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 0.75rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 20px; height: 20px; border-radius: 999px; background: #C9D2DD;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">달빛조각사</span><span style="font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">312</span></div>
|
||||
</div>
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 18px; background: #EAE6E0; overflow: hidden;">
|
||||
<div style="position: absolute; top: 10px; right: 10px;"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="3" width="13" height="13" rx="3"></rect><path d="M16 19.5A2.5 2.5 0 0113.5 22H6a3 3 0 01-3-3V9.5"></path></svg></div>
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 0.75rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 20px; height: 20px; border-radius: 999px; background: #D8D2C8;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">칼든햄스터</span><span style="font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">274</span></div>
|
||||
</div>
|
||||
<!-- 사진 없는 글 -->
|
||||
<div style="display: flex; flex-direction: column; aspect-ratio: 1 / 1; padding: 16px; border-radius: 18px; background: #F5F6F8;">
|
||||
<p style="margin: 0; font-size: 0.875rem; line-height: 1.6; font-weight: 500;">폭파 삼보급 A 롱각, 다들 어디 서세요?</p>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="width: 20px; height: 20px; border-radius: 999px; background: #DDE4EE;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600;">새벽두시</span>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #5B6169;">198</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 클립(영상) 글 -->
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 18px; background: #E8E4EC; overflow: hidden;">
|
||||
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: rgba(20, 22, 26, 0.55);">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M8 5.5l11 6.5-11 6.5z"></path></svg>
|
||||
</div>
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 0.75rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 20px; height: 20px; border-radius: 999px; background: #D5CEDC;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">무명연대장</span><span style="font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">163</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 서든어택 소식 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">서든어택 소식</h2><div style="flex-grow: 1;"></div><span class="d-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">공지사항</span><span class="d-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.29</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.28</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">클랜전 매칭 로직 개선</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.22</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 서린즈 소식 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">서린즈 소식</h2><div style="flex-grow: 1;"></div><span class="d-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">공지사항</span><span class="d-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 열었어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.03</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">전적 갱신이 두 배 빨라졌어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">즐겨찾기 알림 기능 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.30</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">8월 서버 점검 결과 보고</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.27</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">커뮤니티 이용 규칙 정리</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.24</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">모바일 화면을 다듬었어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.20</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 스트리밍 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">지금 방송 중</h2><div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div>
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 16px; background: #E4E8ED;"></div>
|
||||
<div class="d-clip" style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">삼보급 스나 연습</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;"><span style="width: 20px; height: 20px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span><span style="font-size: 0.8125rem; color: #9BA1A9;">달빛조각사 · 1,204명</span></div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 92px; height: 54px; border-radius: 12px; background: #EAE6E0; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;"><div class="d-clip" style="font-size: 0.875rem; font-weight: 600;">클랜전 정기 리그 중계</div><div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 18px; height: 18px; border-radius: 999px; background: #D8E6E2; flex-shrink: 0;"></span><span style="font-size: 0.75rem; color: #9BA1A9;">무명연대 · 862명</span></div></div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 92px; height: 54px; border-radius: 12px; background: #E2E9E6; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;"><div class="d-clip" style="font-size: 0.875rem; font-weight: 600;">초보 탈출 폭파미션 강의</div><div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 18px; height: 18px; border-radius: 999px; background: #E7E3D8; flex-shrink: 0;"></span><span style="font-size: 0.75rem; color: #9BA1A9;">새벽두시 · 517명</span></div></div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 92px; height: 54px; border-radius: 12px; background: #E8E4EC; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;"><div class="d-clip" style="font-size: 0.875rem; font-weight: 600;">시청자 참여 한 판</div><div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 18px; height: 18px; border-radius: 999px; background: #E5E0F0; flex-shrink: 0;"></span><span style="font-size: 0.75rem; color: #9BA1A9;">한밤의저격수 · 341명</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
Reference in New Issue
Block a user