feat: 서린즈 홈 디자인 캔버스 구성
홈 확정안과 디자인 시스템을 아트보드로 정리한다. 후보 셋(HomeA/B/C)은 확정안 Main 으로 합치고 지운다. 디자인 시스템 페이지 - Logo: 워드마크를 글꼴 대신 획으로 그려 내보내기에서도 모양이 유지된다 - Brand: 탄피 오렌지 확정. 면 #FF6A00(흰 글자) / 글자 #C24A00 로 값이 갈린다 - Foundations: 홈에서 굳어진 글자 아홉 단계·색·컴포넌트·치수 - Blocks: 실패 · 비어 있음 블록 규격과 섹션별 문구 홈 페이지 - Main: 검색 히어로를 최상단으로, 그 아래 균등 3열 밀도 그리드 - Loading / States: 스켈레톤과 섹션별로 섞인 네 가지 상태 - Search: 헤더 돋보기 + 검색 시트 - Tablet(768) / Mobile(390): 기준점 두 개로 2열 · 1열 전환 랭크전 랭킹에 티어 이미지 자리를 추가한다. 티어와 RP 는 한 몸으로 읽혀야 해서 한 칸(72px)에 묶고 그 안에서만 4px 로 붙였다. 계급·티어·클랜 표장을 막대/육각/방패로 갈라 한 줄에 놓여도 구분된다. Pretendard 는 아트보드가 실제로 쓰는 글자만 서브셋(fonts/mini)해 아트보드마다 복사되는 용량을 줄인다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DNo7LSAWohdk6vpEhmtqLY
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
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
+43
-43
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
File diff suppressed because one or more lines are too long
@@ -0,0 +1,117 @@
|
||||
// 아트보드 헤더를 서린즈 워드마크로 맞춘다.
|
||||
// 1) 「서린즈」 글자 표기 → 워드마크 SVG
|
||||
// 2) 헤더 앞의 돋보기 심볼 타일 제거 (심볼은 앱 아이콘 자리에서만 쓴다)
|
||||
// templates/ 를 다시 만든 뒤에는 이 스크립트를 한 번 더 돌린다 (여러 번 돌려도 안전).
|
||||
// node apply-logo.mjs .
|
||||
import { readFileSync, writeFileSync, readdirSync } from 'node:fs';
|
||||
import { join } from 'node:path';
|
||||
import { pathToFileURL } from 'node:url';
|
||||
|
||||
const TOP = 2;
|
||||
const BOT = 106;
|
||||
const X = { seo: 0, rin: 124, jeu: 244 };
|
||||
const INK = { left: -4, right: 350 };
|
||||
|
||||
const line = (pts) => `<polyline points="${pts.map(([x, y]) => `${x},${y}`).join(' ')}"></polyline>`;
|
||||
const seo = (x) => [
|
||||
line([[x + 34, TOP], [x + 6, BOT]]),
|
||||
line([[x + 34, TOP], [x + 60, BOT]]),
|
||||
line([[x + 100, TOP], [x + 100, BOT]]),
|
||||
line([[x + 74, 54], [x + 100, 54]]),
|
||||
].join('');
|
||||
const rin = (x) => [
|
||||
line([[x + 6, TOP], [x + 60, TOP], [x + 60, 33], [x + 6, 33], [x + 6, 64], [x + 60, 64]]),
|
||||
line([[x + 86, TOP], [x + 86, 64]]),
|
||||
line([[x + 18, 76], [x + 18, BOT], [x + 86, BOT]]),
|
||||
].join('');
|
||||
const jeu = (x) => [
|
||||
line([[x + 4, 6], [x + 92, 6]]),
|
||||
line([[x + 48, 6], [x + 10, 76]]),
|
||||
line([[x + 48, 6], [x + 86, 76]]),
|
||||
line([[x + 4, BOT], [x + 92, BOT]]),
|
||||
].join('');
|
||||
|
||||
export const wordmark = ({ height = 20, color = '#14161A', weight = 15 } = {}) => {
|
||||
const pad = weight / 2 + 2;
|
||||
const vbW = INK.right - INK.left + pad * 2;
|
||||
const vbH = BOT - TOP + pad * 2;
|
||||
const w = Math.round((height * vbW) / vbH);
|
||||
return `<svg width="${w}" height="${height}" viewBox="${INK.left - pad} ${TOP - pad} ${vbW} ${vbH}" fill="none" stroke="${color}" stroke-width="${weight}" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈">${seo(X.seo)}${rin(X.rin)}${jeu(X.jeu)}</svg>`;
|
||||
};
|
||||
|
||||
// 앱 아이콘 — 워드마크에서 「서」 한 글자만 떼어 정사각에 담는다
|
||||
export const appMark = (size = 64, { bg = '#FF6A00', color = '#FFFFFF', weight = 17 } = {}) => {
|
||||
const pad = weight / 2 + 12;
|
||||
const vbW = 100 - 6 + pad * 2;
|
||||
const vbH = BOT - TOP + pad * 2;
|
||||
return `<span style="display: inline-flex; width: ${size}px; height: ${size}px; border-radius: ${Math.round(size / 3.4)}px; background: ${bg}; flex-shrink: 0;"><svg width="${size}" height="${size}" viewBox="${6 - pad} ${TOP - pad} ${vbW} ${vbH}" fill="none" stroke="${color}" stroke-width="${weight}" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈">${seo(0)}</svg></span>`;
|
||||
};
|
||||
|
||||
const SWAPS = [
|
||||
['<span style="font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>', wordmark({ height: 20 })],
|
||||
['<span style="font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>', wordmark({ height: 18 })],
|
||||
['<span style="font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>', wordmark({ height: 19 })],
|
||||
];
|
||||
|
||||
// 헤더의 심볼 타일 — 여는 div 부터 짝이 맞는 </div> 까지 통째로 지운다
|
||||
const TILE = /<div style="width: (?:30|32)px; height: (?:30|32)px; border-radius: (?:10|11)px; background: #FF6A00;[^"]*">/;
|
||||
|
||||
const dropTile = (src) => {
|
||||
let n = 0;
|
||||
for (;;) {
|
||||
const m = TILE.exec(src);
|
||||
if (!m) break;
|
||||
// 여는 태그부터 짝이 맞는 닫는 태그를 찾는다
|
||||
let i = m.index + m[0].length;
|
||||
let depth = 1;
|
||||
while (depth > 0) {
|
||||
const open = src.indexOf('<div', i);
|
||||
const close = src.indexOf('</div>', i);
|
||||
if (close < 0) throw new Error('닫는 div 를 찾지 못했습니다');
|
||||
if (open >= 0 && open < close) {
|
||||
depth += 1;
|
||||
i = open + 4;
|
||||
} else {
|
||||
depth -= 1;
|
||||
i = close + 6;
|
||||
}
|
||||
}
|
||||
src = src.slice(0, m.index) + src.slice(i).replace(/^\s*\n\s*/, '');
|
||||
n += 1;
|
||||
}
|
||||
return { src, n };
|
||||
};
|
||||
|
||||
// 직접 실행할 때만 아트보드를 고친다 (다른 스크립트에서 wordmark/appMark 만 가져다 쓸 수 있게)
|
||||
if (import.meta.url === pathToFileURL(process.argv[1]).href) {
|
||||
const dir = join(process.argv[2] ?? '.', 'templates');
|
||||
let swapped = 0;
|
||||
let dropped = 0;
|
||||
|
||||
for (const name of readdirSync(dir).filter((n) => n.endsWith('.dc.html'))) {
|
||||
if (name === 'Logo.dc.html') continue; // 로고 아트보드는 제 손으로 그린다
|
||||
const path = join(dir, name);
|
||||
let src = readFileSync(path, 'utf8');
|
||||
const before = src;
|
||||
|
||||
let s = 0;
|
||||
for (const [from, to] of SWAPS) {
|
||||
while (src.includes(from)) {
|
||||
src = src.replace(from, to);
|
||||
s += 1;
|
||||
}
|
||||
}
|
||||
|
||||
const out = dropTile(src);
|
||||
src = out.src;
|
||||
|
||||
if (src !== before) {
|
||||
writeFileSync(path, src, 'utf8');
|
||||
console.log(`${name} — 워드마크 ${s}곳 · 심볼 제거 ${out.n}곳`);
|
||||
swapped += s;
|
||||
dropped += out.n;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`워드마크 ${swapped}곳 · 심볼 제거 ${dropped}곳`);
|
||||
}
|
||||
|
Before Width: | Height: | Size: 236 KiB After Width: | Height: | Size: 236 KiB |
@@ -1,5 +1,9 @@
|
||||
// templates/*.dc.html 의 /*PRETENDARD*/ 토큰을 Pretendard woff2 data URI 로 치환해
|
||||
// 작업 디렉터리 루트에 최종 .dc.html 아트보드를 생성한다.
|
||||
//
|
||||
// 아트보드는 각각 독립 문서로 렌더되므로 폰트가 아트보드 수만큼 복사된다.
|
||||
// 그래서 fonts/mini 의 서브셋(아트보드가 실제로 쓰는 글자만)을 쓴다.
|
||||
// 새 글자가 들어오면 아래 검사에서 경고가 뜨고, make-subset.mjs 로 다시 만들면 된다.
|
||||
import { readFileSync, writeFileSync, readdirSync } from 'node:fs';
|
||||
import { join } from 'node:path';
|
||||
|
||||
@@ -10,19 +14,41 @@ const WEIGHTS = [
|
||||
];
|
||||
|
||||
const faces = WEIGHTS.map(([file, weight]) => {
|
||||
const b64 = readFileSync(join('fonts', `Pretendard-${file}.subset.woff2`)).toString('base64');
|
||||
const b64 = readFileSync(join('fonts', 'mini', `Pretendard-${file}.mini.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');
|
||||
|
||||
const charset = new Set(readFileSync(join('fonts', 'mini', 'charset.txt'), 'utf8'));
|
||||
|
||||
let count = 0;
|
||||
let total = 0;
|
||||
const missing = new Set();
|
||||
|
||||
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');
|
||||
|
||||
// 서브셋에 없는 글자 찾기 — 태그·스타일을 뺀 실제 텍스트만 본다
|
||||
const text = src.replace(/<style[\s\S]*?<\/style>/g, '').replace(/<[^>]+>/g, ' ');
|
||||
for (const ch of text) {
|
||||
if (ch.charCodeAt(0) > 0x1f && !charset.has(ch)) missing.add(ch);
|
||||
}
|
||||
|
||||
const out = src.replace('/*PRETENDARD*/', faces);
|
||||
writeFileSync(name, out, 'utf8');
|
||||
count += 1;
|
||||
console.log(`${name} — ${(readFileSync(name).length / 1024).toFixed(0)} KB`);
|
||||
total += out.length;
|
||||
console.log(`${name} — ${(out.length / 1024).toFixed(0)} KB`);
|
||||
}
|
||||
|
||||
console.log(`${count} artboards built · 합계 ${(total / 1024 / 1024).toFixed(1)} MB`);
|
||||
|
||||
if (missing.size > 0) {
|
||||
console.error(
|
||||
`\nwarn: 서브셋에 없는 글자 ${missing.size}개 — ${[...missing].join('')}\n` +
|
||||
' 이 글자들은 대체 글꼴로 그려집니다. node make-subset.mjs . 로 서브셋을 다시 만드세요.',
|
||||
);
|
||||
}
|
||||
console.log(`${count} artboards built`);
|
||||
|
||||
+139
-29
@@ -2,71 +2,181 @@
|
||||
"pages": [
|
||||
{
|
||||
"id": "page-1",
|
||||
"name": "홈 (확정)"
|
||||
"name": "디자인 시스템"
|
||||
},
|
||||
{
|
||||
"id": "page-2",
|
||||
"name": "지난 시안"
|
||||
"name": "홈"
|
||||
}
|
||||
],
|
||||
"artboards": [
|
||||
{
|
||||
"file": "Main.dc.html",
|
||||
"title": "서린즈 홈",
|
||||
"file": "Logo.dc.html",
|
||||
"title": "로고 · 서린즈 워드마크",
|
||||
"page": "page-1",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 1860
|
||||
},
|
||||
{
|
||||
"file": "Brand.dc.html",
|
||||
"title": "브랜드 컬러 · 탄피 오렌지",
|
||||
"page": "page-1",
|
||||
"x": 1600,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 1500
|
||||
},
|
||||
{
|
||||
"file": "Foundations.dc.html",
|
||||
"title": "기본 요소 · 글자 · 색 · 컴포넌트",
|
||||
"page": "page-1",
|
||||
"x": 3200,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 1720
|
||||
},
|
||||
{
|
||||
"file": "Blocks.dc.html",
|
||||
"title": "실패 · 비어 있음 블록",
|
||||
"page": "page-1",
|
||||
"x": 4800,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 1040
|
||||
},
|
||||
{
|
||||
"file": "Main.dc.html",
|
||||
"title": "홈 · 데스크톱 1440",
|
||||
"page": "page-2",
|
||||
"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단형",
|
||||
"file": "Loading.dc.html",
|
||||
"title": "홈 · 로딩",
|
||||
"page": "page-2",
|
||||
"x": 1600,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 2360
|
||||
"h": 2420
|
||||
},
|
||||
{
|
||||
"file": "HomeC.dc.html",
|
||||
"title": "C · 앱 사이드바형",
|
||||
"file": "States.dc.html",
|
||||
"title": "홈 · 섞인 상태",
|
||||
"page": "page-2",
|
||||
"x": 3200,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 2120
|
||||
"h": 2480
|
||||
},
|
||||
{
|
||||
"file": "Search.dc.html",
|
||||
"title": "헤더 검색 · 아이콘과 시트",
|
||||
"page": "page-2",
|
||||
"x": 4800,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 2200
|
||||
},
|
||||
{
|
||||
"file": "Tablet.dc.html",
|
||||
"title": "홈 · 태블릿 768",
|
||||
"page": "page-2",
|
||||
"x": 0,
|
||||
"y": 2760,
|
||||
"w": 768,
|
||||
"h": 2960
|
||||
},
|
||||
{
|
||||
"file": "Mobile.dc.html",
|
||||
"title": "홈 · 모바일 390",
|
||||
"page": "page-2",
|
||||
"x": 900,
|
||||
"y": 2760,
|
||||
"w": 390,
|
||||
"h": 4000
|
||||
}
|
||||
],
|
||||
"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회색 사각형은 썸네일·스크린샷 자리, 닉네임·수치·공지 제목은 예시 데이터입니다."
|
||||
"y": -620,
|
||||
"w": 800,
|
||||
"page": "page-2",
|
||||
"text": "서린즈 홈 · 확정안 (밀도 그리드형)\n\n게임 랭킹 — 세 갈래로 나눴습니다\n한 칸에 하나씩, 세 랭킹을 나란히 놓았습니다.\n· 계급 랭킹 — 통합 / 시즌\n· 랭크전 랭킹 — 솔로 / 파티 / 클랜 (여기만 티어 이미지와 RP 점수 열이 있습니다)\n· 클랜 랭킹 — 공식 / 일반\n유저 랭킹은 계급 이미지 + 닉네임, 클랜 랭킹은 클랜 마크 + 클랜명으로만 구성했고 승률·K/D·헤드샷·판수는 모두 뺐습니다. 모든 랭킹에 등락(▲n / ▼n / 변동 없음)을 붙였습니다.\n계급 이미지와 랭크전 티어 이미지, 클랜 마크는 모두 실제 에셋 자리로, 지금은 회색 타일에 약식 표장을 그려 뒀습니다. 한 줄에 계급과 티어가 함께 놓이므로 표장을 갈라 뒀습니다 — 계급은 막대·별·마름모, 티어는 육각, 클랜은 방패입니다. 실제 이미지 규격을 주시면 교체하겠습니다.\n\n랭크전만 열이 하나 더 늘었습니다. 티어는 RP 와 한 몸으로 읽혀야 해서 둘을 한 칸(72px)에 묶고 그 안에서만 4px 로 붙였습니다 — 표 전체 칸 간격 8px 을 그대로 두면 티어가 닉네임과 RP 중간에 떠 보입니다. RP 숫자는 폭을 42px 로 고정해 두어 자릿수가 달라져도 티어가 세로로 줄맞춤됩니다.\n\n세 갈래를 나란히 놓는 1280 이상에서는 한 열이 283px 뿐입니다. 티어를 독립 칸으로 끼워 넣었을 때는 닉네임이 85px 까지 줄어 열 줄 중 아홉 줄이 서너 글자에서 잘렸는데, RP 칸을 48 → 42px, 등락 칸을 38 → 34px 로 줄이고 티어를 RP 에 붙이면서 101px 로 돌아왔습니다. 티어를 넣기 전과 마찬가지로 여덟 글자인 「웨어하우스지박령」 하나만 잘립니다.\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브랜드 컬러 적용 (D 탄피 오렌지)\n로고 타일과 찾아보기 버튼은 면 #FF6A00 에 흰 글자·아이콘, 「신규」와 링크는 진한 #C24A00 입니다. 면과 글자가 서로 다른 값인 색이라 「브랜드 컬러」 페이지에 네 값을 정리해 뒀습니다.\n\n소식 목록의 신규 표기\n파란 점 대신 제목 옆에 「신규」를 글자로 붙였습니다. 배경 없이 브랜드 글자색(#C24A00) 만 쓰고(11px 굵게), 점이 있던 6px 자리 열은 통째로 없앴습니다 — 제목이 왼쪽으로 12px 붙고 그만큼 길게 들어갑니다. 옅은 바탕 + 컬러 글자로 만드는 뱃지 형태는 쓰지 않습니다. 서든어택 소식·서린즈 소식 각 2건에 붙어 있습니다.\n\n남은 검토거리\n· 스크롤을 내리면 히어로 검색창이 사라지는 건 헤더 돋보기 아이콘 + 검색 시트로 풀었습니다 (반응형 페이지의 「헤더 검색 · C안」). 헤더에 입력칸을 다시 넣지는 않습니다.\n· 히어로 오른쪽에 오늘의 요약 수치(분석된 경기 수 등)를 넣는 안도 있는데, 지금은 넣지 않았습니다. 필요하면 말씀해 주세요.\n· 스트리밍이 아랫줄로 내려가면서 그 줄이 소식 목록보다 200px쯤 높아졌습니다. 소식을 6건에서 8건으로 늘려 높이를 맞출지 정하면 좋겠습니다.\n· 「신규」를 며칠 이내 글에 붙일지 기준을 정하면 좋겠습니다. 지금 시안은 각 목록 최근 2건에만 붙여 뒀습니다.\n\n회색 사각형은 썸네일·스크린샷 자리, 닉네임·수치·공지 제목은 예시 데이터입니다."
|
||||
},
|
||||
{
|
||||
"id": "note-past",
|
||||
"x": 0,
|
||||
"y": -300,
|
||||
"w": 700,
|
||||
"id": "note-brand",
|
||||
"page": "page-1",
|
||||
"x": 1600,
|
||||
"y": -560,
|
||||
"w": 800,
|
||||
"text": "브랜드 컬러 확정 — D 탄피 오렌지\n\n네 값을 씁니다.\n· 면 #FF6A00 — 로고 타일, 주 버튼. 그 위 글자·아이콘은 흰색\n· 면 누름 · hover #D95A00\n· 글자 #C24A00 — 「신규」, 링크. 흰 바탕 위 4.91:1\n· 글자 hover #A03C00 — 흰 바탕 위 6.69:1\n\n면 위 흰 글자에 대해\n#FF6A00 에 흰 글자는 2.87:1 로 권고치(4.5:1) 아래입니다. 검정 글자로 두면 6.31:1 이지만 흰 글자 쪽 인상을 택했습니다. 나중에 통과선을 맞춰야 하면 면색을 #CE5400(4.29:1) 이나 #C24A00(4.91:1) 으로 한 단씩 내리는 자리가 있습니다 — 색은 그만큼 가라앉습니다.\n\n계속 지켜볼 것\n글자용 #C24A00 과 랭킹 하락 빨강 #C4453D 이 색상환에서 18° 밖에 안 떨어져 있습니다. 지금은 「신규」가 소식 목록에, 하락 표시가 랭킹 표에 있어 한 줄에서 만나지 않습니다. 두 색이 같은 줄에 놓이는 화면이 생기면 하락 색을 더 차갑게 옮기는 편이 낫습니다.\n\n후보 넷은 나중에 되돌아볼 수 있게 그대로 남겨 뒀습니다. D 행에 선택 표시를 해 뒀습니다.\n\n아직 안 정한 것 — 다크 모드 계획이 있으면 같은 색이라도 어두운 배경용 밝기를 한 단 올려 잡아야 합니다."
|
||||
},
|
||||
{
|
||||
"id": "note-loading",
|
||||
"page": "page-2",
|
||||
"text": "지난 시안 (참고용)\n\n고르지 않은 세 배치입니다. 나중에 되돌아볼 일이 있을까 싶어 남겨 뒀습니다. 지워도 괜찮으면 말씀해 주세요.\n이벤트 배너와 커뮤니티 글 종류는 세 안에도 모두 반영되어 있습니다."
|
||||
"x": 1600,
|
||||
"y": -620,
|
||||
"w": 800,
|
||||
"text": "홈 로딩 — 스켈레톤\n\n기준 하나로 갈랐습니다 — 서버 응답이 없어도 그릴 수 있는 것은 전부 즉시 그리고, 데이터가 있어야 알 수 있는 자리만 회색으로 둡니다.\n\n즉시 그리는 것 (회색 없음)\n· 헤더 전체 — 로고, 메뉴, 로그인 버튼\n· 히어로 — 문구 두 줄, 검색창, 찾아보기 버튼. 첫 화면에서 바로 검색할 수 있어야 하니 여기는 기다리게 하지 않습니다.\n· 섹션 제목과 「더 보기」, 탭(통합/시즌 · 솔로/파티/클랜 · 공지사항/업데이트 · 인기/최신/클립), 표 머리(순위·닉네임·등락·RP)\n· 랭킹의 순위 숫자 — 1~10위는 데이터를 기다릴 필요가 없어 미리 찍습니다. 회색 바가 그만큼 줄어듭니다.\n· 「매일 오전 8시 갱신」처럼 고정된 문구\n\n회색으로 두는 것\n최근 검색 칩, 이벤트 배너와 그 아래 설명 줄, 검색 랭킹 9줄, 게임 랭킹 세 열의 10줄씩, 커뮤니티 4칸, 소식 두 목록 6줄씩, 방송 대표 화면과 아래 3줄. 「18:20 기준」과 「1~10위 · 전체 100위」처럼 데이터에서 나오는 수치도 회색입니다.\n\n모양 규칙\n· 색은 #EDEFF2 하나만 씁니다. 흰색 띠가 1.6초에 한 번 왼쪽에서 오른쪽으로 지나갑니다.\n· 글자 자리는 높이 10~13px 막대에 라운드 5px. 실제 글자 크기가 클수록 막대도 두껍습니다.\n· 닉네임·제목 막대는 폭을 54~84% 사이로 흩어 놨습니다. 전부 같은 길이면 표가 아니라 무늬로 보입니다.\n· 이미지·썸네일 자리는 실제 비율과 라운드를 그대로 씁니다 (배너 720:248 라운드 24, 커뮤니티 1:1 라운드 18, 방송 16:9 라운드 16, 계급 타일 26px 라운드 8).\n· 행 높이와 구분선은 실제 화면과 같습니다. 데이터가 들어와도 레이아웃이 밀리지 않습니다.\n· 움직임 줄이기를 켠 기기에서는 쓸어가는 효과가 꺼지고 회색 막대만 남습니다.\n\n채우는 방식 — 섹션별로 따로 (확정)\n한 번에 모아서 보여주지 않습니다. 각 섹션이 자기 응답을 받는 즉시 스켈레톤을 걷어냅니다. 랭킹이 늦어도 소식은 먼저 뜹니다. 그래서 어느 순간이든 화면은 여러 상태가 섞여 있고, 그 모습이 오른쪽 「홈 · 섞인 상태」 아트보드입니다.\n\n지연은 두지 않습니다 (확정)\n스켈레톤을 200ms 늦게 띄우는 방식은 쓰지 않습니다. 응답이 빠르면 빠른 대로 바로 내용을 보여줍니다. 아주 빠른 응답에서 스켈레톤이 한 번 깜빡일 수 있지만, 일부러 기다리게 만드는 것보다 낫다고 봤습니다."
|
||||
},
|
||||
{
|
||||
"id": "note-states",
|
||||
"page": "page-2",
|
||||
"x": 3200,
|
||||
"y": -620,
|
||||
"w": 800,
|
||||
"text": "섞인 상태와 실패 · 비어 있음\n\n홈 · 섞인 상태 — 보기용 조합\n섹션별로 따로 채우기 때문에 화면은 어느 순간이든 여러 상태가 섞여 있습니다. 네 상태를 한 번에 보여주려고 섹션마다 다른 상태를 하나씩 배정했습니다.\n\n섹션과 상태는 정해진 짝이 아닙니다. 랭킹도 소식도 비어 있을 수 있고(빈 문구는 블록 아트보드 표에 있습니다), 커뮤니티도 방송도 실패할 수 있습니다. 아래 배정은 이 그림에서만 그렇다는 뜻입니다 — 아트보드 맨 위 띠와 점선 라벨로도 표시해 뒀고, 둘 다 실제 화면에는 없는 표시입니다.\n· 이벤트 — 완료\n· 검색 랭킹 — 로딩\n· 게임 랭킹 — 계급은 완료, 랭크전은 로딩, 클랜은 실패 (같은 섹션 안에서도 열마다 따로입니다)\n· 커뮤니티 — 비어 있음\n· 서든어택 소식 — 완료 / 서린즈 소식 — 실패\n· 지금 방송 중 — 비어 있음\n완료 부분은 홈 아트보드에서 그대로 떼어 온 것이라, 홈을 고치면 이 화면도 같이 따라옵니다.\n\n블록의 규격과 섹션별 문구는 디자인 시스템 페이지의 「실패 · 비어 있음 블록」에 있습니다.\n\n검토해 주실 것\n· 빈 상태 문구를 그대로 쓸지 봐 주세요. 특히 커뮤니티의 「첫 글 쓰러 가기」와 게임 랭킹의 「지난 시즌 보기」는 실제로 갈 곳이 있어야 합니다.\n· 랭킹처럼 자동으로 다시 시도하는 편이 나은 섹션이 있는지 — 지금은 전부 사용자가 눌러야 다시 부릅니다."
|
||||
},
|
||||
{
|
||||
"id": "note-responsive",
|
||||
"page": "page-2",
|
||||
"x": 0,
|
||||
"y": 2160,
|
||||
"w": 800,
|
||||
"text": "반응형 — 기준점 두 개\n\n프런트엔드에 잡힌 기준이 없어서 여기서 정했습니다. 기준점은 둘뿐입니다.\n· 1280 이상 — 세 열. 홈(확정) 아트보드 그대로입니다. 게임 랭킹의 계급·랭크전·클랜을 나란히 놓습니다.\n· 768 ~ 1279 — 두 열. 이 페이지의 태블릿 아트보드가 좁은 쪽 끝(768)입니다.\n· 768 미만 — 한 열. 모바일 아트보드입니다.\n기준점을 둘로 줄인 이유는 세 열을 유지할 수 있는 폭이 실제로 1280 부터이고, 두 열이 무너지는 지점이 768 이기 때문입니다. 사이에 하나 더 두면 관리할 경우의 수만 늘어납니다.\n\n가장 큰 변화 — 게임 랭킹\n세 갈래를 나란히 놓는 건 1280 이상에서만 합니다. 그 아래에서는 계급 / 랭크전 / 클랜을 밑줄형 세그먼트로 바꿔 한 번에 하나만 봅니다. 표가 전체 폭을 쓰게 되어 닉네임이 잘리지 않습니다.\n세그먼트를 하위 탭(통합/시즌 같은 알약)과 다른 모양으로 만든 것은 의도한 것입니다. 갈래를 고르는 것과 필터를 고르는 것은 다른 층위라, 같은 알약을 두 줄로 쌓으면 무엇이 상위인지 읽히지 않습니다.\n\n태블릿(768)에서 순서를 하나 바꿨습니다\n커뮤니티를 검색 랭킹 옆으로 끌어올렸습니다. 데스크톱 순서 그대로 두 열에 흘리면 게임 랭킹이 두 칸을 차지하는 탓에 검색 랭킹 옆이 빈 칸으로 남습니다. 방송도 두 칸을 쓰되 대표 화면을 왼쪽에 눕히고 목록을 오른쪽에 두어, 세로로 길어지지 않게 했습니다.\n\n모바일(390)에서 정한 것들\n· 메뉴는 서랍으로 접었지만 검색은 접지 않았습니다. 히어로의 검색창은 그대로 첫 화면에 있습니다.\n· 누르는 것은 모두 44px 이상입니다. 랭킹 행은 46 → 52, 소식 행은 46 → 50, 페이지 이동 화살표는 34 → 44 로 키웠습니다.\n· 최근 검색 칩과 이벤트 배너는 옆으로 밀어 넘깁니다. 화살표 버튼은 뺐습니다.\n· 커뮤니티는 2×2 정사각을 그대로 씁니다. 한 열로 풀면 카드가 너무 커집니다.\n· 아래쪽 고정 탭바는 넣지 않았습니다. 웹이라 브라우저 UI와 겹치고, 홈에서 바로 갈 곳은 이미 각 섹션의 「전체 보기」에 있습니다.\n\n그대로 두는 것\n색·글꼴·문구·아이콘은 폭과 무관하게 같습니다. 로딩 스켈레톤과 실패·비어 있음 블록도 같은 규칙을 그대로 따릅니다 — 폭에 따라 막대 길이와 블록 높이만 달라집니다.\n\n검토해 주실 것\n· 모바일에서 섹션 순서를 데스크톱과 같게 뒀습니다 (이벤트 → 검색 랭킹 → 게임 랭킹 → 커뮤니티 → 소식 → 방송). 모바일에서는 게임 랭킹을 검색 랭킹보다 위로 올리는 것도 방법인데, 지금은 바꾸지 않았습니다.\n· 스크롤 뒤 검색 진입점은 정해졌습니다 — 헤더 돋보기 아이콘 + 검색 시트(오른쪽 「헤더 검색 · C안」). 세 폭 모두 같은 방식입니다."
|
||||
},
|
||||
{
|
||||
"id": "note-search",
|
||||
"page": "page-2",
|
||||
"x": 4800,
|
||||
"y": -620,
|
||||
"w": 800,
|
||||
"text": "헤더 검색 — C안 확정\n\n히어로 검색창이 화면 밖으로 나가면 헤더에 돋보기 아이콘이 나타나고, 누르면 검색 시트가 열립니다. 세 폭 모두 같은 방식이고 시트 크기만 다릅니다 — 데스크톱·태블릿은 가운데 640px 카드, 모바일은 전체 화면입니다.\n\n왜 헤더에 입력칸을 넣지 않았나\n· 모바일 헤더 390px 안에는 로고와 햄버거가 이미 있어, 입력칸까지 넣으면 셋 다 옹색해집니다. 어차피 눌러야 키보드가 올라오니 아이콘 한 번이 손해가 아닙니다.\n· 데스크톱은 폭이 남지만, 폭마다 다른 방식을 쓰면 만들 것도 설명할 것도 둘이 됩니다. 헤더에서 검색을 빼 히어로로 올린 확정안과도 결이 맞습니다.\n\n정한 것들\n· 헤더는 스크롤해도 위에 붙어 있습니다. 아이콘은 맨 위에서는 없다가 히어로가 벗어난 뒤 나타납니다 — 맨 위에서는 바로 아래 큰 검색창이 있어 같은 것이 둘이 됩니다.\n· 아이콘이 나타날 때 헤더에 옅은 그림자가 함께 생겨, 스크롤된 상태라는 것이 보입니다.\n· 아직 아무것도 안 친 시트에는 최근 검색과 「지금 많이 찾는」 다섯이 들어갑니다. 홈의 검색 랭킹과 같은 데이터라 새로 만들 것이 없고, 빈 시트를 마주하지 않게 합니다.\n· 닫기 — 데스크톱은 ESC 와 바깥 누르기, 모바일은 「취소」. 뒤로 가기로도 닫히게 하는 편이 좋습니다.\n· 모바일 시트는 전체 화면입니다. 반쯤 덮는 시트로 만들면 키보드가 올라왔을 때 남는 높이가 너무 작습니다. 목록이 키보드에 가리므로 최근 검색을 위쪽에 뒀습니다.\n· 아이콘·햄버거·최근 검색의 X 모두 모바일에서 44px 입니다.\n\n아직 안 그린 것\n글자를 치기 시작하면 최근 검색과 「지금 많이 찾는」 자리에 자동완성 결과가 들어옵니다. 그 화면은 아직 없습니다 — 필요하면 이어서 그리겠습니다."
|
||||
},
|
||||
{
|
||||
"id": "note-logo",
|
||||
"page": "page-1",
|
||||
"x": 0,
|
||||
"y": -560,
|
||||
"w": 800,
|
||||
"text": "서린즈 워드마크\n\n글꼴을 골라 쓰지 않고 획을 직접 그렸습니다. 서 = ㅅ+ㅓ, 린 = ㄹ+ㅣ+ㄴ, 즈 = ㅈ+ㅡ 인데 이 일곱 자모가 모두 곧은 선이라, 선으로만 짜고 끝과 꺾이는 자리를 둥글게 굴려 «동글»한 인상을 만들었습니다.\n글꼴 파일에 기대지 않으니 어디에 써도 같은 모양이 나오고, 크기를 키워도 깨지지 않으며, PNG·PDF 로 내보낼 때도 그대로 나옵니다. 글꼴을 썼다면 내보낼 때 다른 글꼴로 바뀝니다.\n\n다듬은 자리\n· 글자마다 속 폭이 달라서 글자 사이를 같은 값으로 두면 「린」과 「즈」 사이가 벌어져 보입니다. 눈으로 고르게 보이도록 세 글자의 가로 위치를 하나씩 잡았습니다.\n· 「린」은 ㄹ 의 가로획 셋에 받침 ㄴ 까지 네 겹이라, 처음 두께(18)에서는 ㄹ 속이 막혔습니다. 두께를 15 로 낮추고 ㄹ 을 조금 키운 뒤 ㄴ 을 아래로 내려 숨통을 틔웠습니다.\n· 「즈」는 ㅈ 다리를 길게 내려 ㅡ 와의 사이가 비어 보이지 않게 했습니다.\n\n정한 것\n· 색은 셋뿐입니다 — 검정 #14161A, 오렌지 #FF6A00, 오렌지 바탕 위 흰색. 사진 위에는 바로 올리지 않고 오렌지 바탕을 깔고 흰 워드마크를 올립니다.\n· 획 두께는 기본 15 입니다. 큰 화면이나 인쇄물에는 13, 아주 작게 쓰거나 굿즈에는 20 을 씁니다.\n· 최소 높이 16px. 그 아래로는 「린」의 ㄹ 속이 막힙니다. 둘레 여백은 글자 높이의 절반 이상.\n· 파비콘·앱 아이콘처럼 좁은 자리에는 심볼(오렌지 타일 + 돋보기)만 씁니다. 워드마크를 정사각에 욱여넣지 않습니다.\n\n적용 범위\n모든 아트보드의 헤더를 워드마크로 바꿨습니다 — 홈, 로딩, 섞인 상태, 태블릿, 모바일, 헤더 검색, 브랜드 컬러, 지난 시안까지. 심볼(오렌지 타일 + 돋보기)은 그대로 두고 글자만 바뀌었습니다.\n\n봐 주실 것\n· 획 두께 셋 중 기본값이 맞는지 봐 주세요. 헤더에서는 15 가 지금 홈의 글자 굵기와 가장 비슷하게 보입니다.\n· 심볼의 돋보기를 계속 쓸지도 정하면 좋겠습니다. 지금은 첫 시안의 것을 그대로 두었고, 워드마크와 짝을 새로 맞춘 심볼이 필요하면 이어서 그리겠습니다."
|
||||
},
|
||||
{
|
||||
"id": "note-foundations",
|
||||
"page": "page-1",
|
||||
"x": 3200,
|
||||
"y": -560,
|
||||
"w": 800,
|
||||
"text": "기본 요소\n\n홈을 그리면서 실제로 굳어진 값만 모았습니다. 새로 만든 표가 아니라 이미 화면에 쓰이고 있는 것을 한자리에 옮겨 적은 것입니다.\n· 글자 — 아홉 단계. Pretendard 400/500/600/700 네 굵기만 씁니다. 숫자는 tabular-nums.\n· 색 — 브랜드 4, 글자 5, 선 3, 면 5, 의미 2. 여기 없는 색은 쓰지 않습니다.\n· 컴포넌트 — 탭(필터)과 세그먼트(갈래)를 다른 모양으로 두는 이유, 버튼 세 종류, 표 한 줄의 구성.\n· 치수 — 라운드·행 높이·여백·최소 터치 크기.\n\n여기 없는 크기나 색을 화면에서 쓰게 되면, 먼저 이 아트보드에 올리고 나서 씁니다. 그래야 한 벌로 남습니다."
|
||||
},
|
||||
{
|
||||
"id": "note-blocks",
|
||||
"page": "page-1",
|
||||
"x": 4800,
|
||||
"y": -560,
|
||||
"w": 800,
|
||||
"text": "실패 · 비어 있음 블록\n\n섹션마다 따로 채우기 때문에 한 섹션이 실패하거나 비어도 나머지는 그대로 보입니다. 실제로 섞인 화면은 홈 페이지의 「홈 · 섞인 상태」에 있습니다.\n\n· 두 상태 모두 섹션 본문이 있어야 할 높이를 그대로 차지합니다. 이게 핵심입니다 — 안 그러면 늦게 도착한 섹션 때문에 페이지가 계속 튑니다.\n· 바탕 #FAFBFC · 테두리 1px #EDEFF2 · 라운드 16px. 아이콘은 44px 회색 원 안에 선 아이콘이고, 색으로 경고하지 않습니다 (브랜드 오렌지도 빨강도 쓰지 않습니다).\n· 실패 문구는 에러 코드 맵의 SYS_001 문장을 그대로 씁니다. 화면에서 문구를 새로 짓지 않고, 서버가 다른 코드를 주면 그 코드의 문장이 나옵니다.\n· 실패에는 「다시 시도」 버튼이 항상 붙고, 그 섹션만 다시 부릅니다. 페이지 전체를 새로 고치게 하지 않습니다.\n· 비어 있음 문구는 섹션마다 다릅니다. 여섯 섹션 문구는 아트보드의 표에 있습니다.\n\n갈림 기준은 하나입니다 — 요청이 실패했으면 실패, 요청은 됐는데 목록이 0건이면 비어 있음."
|
||||
}
|
||||
],
|
||||
"launch": {
|
||||
"view": "canvas",
|
||||
"page": "page-1"
|
||||
"page": "page-2"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1 @@
|
||||
실패·비어있음블록섹션마다따로채우기때문에한이하거나도머지는그대보입니.두상태모본자리를차해서,늦게착페가밀않습든공통일시적인스템오류발생했잠후주세요구름(커뮤티예)아직올라온글없첫쓰러의규격바탕#FABC테1pxED2운드6야할높min-hegt웁콘은4원형7안선9색으경고—브랜렌빨강5조3데정렬최0r줄꿈「」버튼흰항붙갈곳을만링크코맵SY_장씁른내려면뀝화새짓부릅전체치별«터»같묶았유르액벤트진행중열알릴검랭킹집계된쌓순위타납임번즌난소식택린즈등금방송널작되여표됩컬탄피확얹변과값래네넷돌볼수남겨뒀8:누ov단둡신미잡혀승락속켜것권밝살쪽결키굵감맞춰씩용환°떨져놓더갑옮편낫루돈klc%사초멀헷걸점흔합N파랑덩읽억찾히월무명연디렛넉뼘앉와겹또렷P재툴먼저옵딥틸분낮숫빽튀들깝약뜻총럽못칩홈제굳필추da/목궁?달빛각설닉날짜벨bus켭간클좁힙~꼴반복탭큰카배너썸톱좌백밖흐활성옅냐립컴포넌양급층므칼햄–▲▼셋뿐밍근까력봤동매갱솔R…업획접렸=ㅅ+ㅓㄹㅣㄴㅈㅡ곱곧끝꺾둥굴냈써워깨며낼쓸깔께둘쇄물헤롯톰굿처럼심릿앞던돋뺐말맡앱칸떼욱넣회막레절율꾸울림얇꿉꿔벽벌준밤샷삼골웨박령호찰폭롱컨K칭개률었졌즐능칙듬탈출청참판관침넥슨I창맨뒤롤벗함줍많칠쳤섯빈깥닫옹눌취쯤덮왔좋X웠완담짝느띠료딩!"$&'*;<>@GHJLMOQTUVWZ[\]^`fjqwyz{|}‘’“”『』〈〉《》±×÷≤≥→←↑↓★☆※℃％㎏㎜㎝
|
||||
@@ -0,0 +1,46 @@
|
||||
// 아트보드가 실제로 쓰는 글자만 남긴 Pretendard 서브셋을 만든다.
|
||||
// 아트보드마다 폰트가 통째로 들어가므로(각 아트보드는 독립 문서), 글자 수를 줄이는 것이 곧 캔버스 용량이다.
|
||||
import { readFileSync, writeFileSync, readdirSync, mkdirSync } from 'node:fs';
|
||||
import { join } from 'node:path';
|
||||
import subsetFont from 'subset-font';
|
||||
import { decompress } from 'wawoff2';
|
||||
|
||||
const DIR = process.argv[2]; // .design/surinz
|
||||
const TPL = join(DIR, 'templates');
|
||||
const SRC = join(DIR, 'fonts');
|
||||
const OUT = join(DIR, 'fonts', 'mini');
|
||||
|
||||
// 1) 아트보드 텍스트에서 쓰이는 글자를 모은다 (style 블록과 태그는 제외)
|
||||
const used = new Set();
|
||||
for (const name of readdirSync(TPL).filter((n) => n.endsWith('.dc.html'))) {
|
||||
const src = readFileSync(join(TPL, name), 'utf8')
|
||||
.replace(/<style[\s\S]*?<\/style>/g, '')
|
||||
.replace(/<[^>]+>/g, ' ');
|
||||
for (const c of src) used.add(c);
|
||||
}
|
||||
|
||||
// 2) 안전 여유 — 아스키 인쇄 가능 문자와 자주 쓰는 기호는 항상 포함
|
||||
for (let i = 0x20; i <= 0x7e; i += 1) used.add(String.fromCharCode(i));
|
||||
for (const c of '·…—–‘’“”「」『』〈〉《》±×÷≤≥→←↑↓★☆※℃％㎏㎜㎝가나다라마바사아자차카타파하') used.add(c);
|
||||
|
||||
const text = [...used].filter((c) => c.charCodeAt(0) > 0x1f).join('');
|
||||
console.log(`서브셋 글자 수 ${text.length}`);
|
||||
|
||||
mkdirSync(OUT, { recursive: true });
|
||||
writeFileSync(join(OUT, 'charset.txt'), text, 'utf8');
|
||||
|
||||
const WEIGHTS = ['Regular', 'SemiBold', 'Bold'];
|
||||
let before = 0;
|
||||
let after = 0;
|
||||
|
||||
for (const w of WEIGHTS) {
|
||||
const woff2 = readFileSync(join(SRC, `Pretendard-${w}.subset.woff2`));
|
||||
before += woff2.length;
|
||||
const ttf = Buffer.from(await decompress(woff2));
|
||||
const out = await subsetFont(ttf, text, { targetFormat: 'woff2' });
|
||||
after += out.length;
|
||||
writeFileSync(join(OUT, `Pretendard-${w}.mini.woff2`), out);
|
||||
console.log(`${w.padEnd(9)} ${(woff2.length / 1024).toFixed(0).padStart(4)} KB → ${(out.length / 1024).toFixed(0).padStart(3)} KB`);
|
||||
}
|
||||
|
||||
console.log(`합계 ${(before / 1024).toFixed(0)} KB → ${(after / 1024).toFixed(0)} KB (아트보드 1개당)`);
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,171 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 — 실패 · 비어 있음 블록 규격과 섹션별 문구 */
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-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-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; }
|
||||
|
||||
/* 스켈레톤 — 한 덩어리(.s)로 통일하고 크기·라운드만 자리마다 다르게 준다 */
|
||||
.s { display: block; position: relative; overflow: hidden; background: #EDEFF2; }
|
||||
.s::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
|
||||
animation: s-sweep 1.6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes s-sweep { to { transform: translateX(100%); } }
|
||||
/* 움직임을 줄이도록 설정한 기기에서는 쓸어가는 효과를 끈다 */
|
||||
@media (prefers-reduced-motion: reduce) { .s::after { animation: none; } }
|
||||
|
||||
/* 실패 · 비어 있음 — 섹션 본문 자리를 그대로 채워 레이아웃이 튀지 않게 한다 */
|
||||
.st { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; border: 1px solid #EDEFF2; border-radius: 16px; background: #FAFBFC; text-align: center; }
|
||||
.st-t { margin: 0; font-size: 0.875rem; line-height: 1.6; color: #5B6169; max-width: 20rem; }
|
||||
.st-s { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: #9BA1A9; }
|
||||
.st-b { display: inline-flex; align-items: center; height: 36px; padding: 0 1rem; border: 1px solid #D6DAE0; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: #14161A; cursor: pointer; }
|
||||
.st-l { font-size: 0.8125rem; font-weight: 600; color: #C24A00; }
|
||||
.st-i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #F2F4F7; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 1040px; padding: 48px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">실패 · 비어 있음 블록</h1>
|
||||
<p style="margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B6169; max-width: 68rem;">섹션마다 따로 채우기 때문에 한 섹션이 실패하거나 비어도 나머지는 그대로 보입니다. 두 상태 모두 섹션 본문 자리를 그대로 차지해서, 늦게 도착한 섹션 때문에 페이지가 밀리지 않습니다.</p>
|
||||
|
||||
<div style="display: flex; gap: 2rem; margin-top: 1.75rem;">
|
||||
|
||||
<div style="flex-shrink: 0; width: 432px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">실패</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">모든 섹션 공통</span>
|
||||
</div>
|
||||
<div class="st" style="min-height: 240px;">
|
||||
<span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5v5"></path><path d="M12 16.2h.01"></path></svg></span>
|
||||
<p class="st-t">일시적인 시스템 오류가 발생했습니다.<br>잠시 후 다시 시도해 주세요.</p>
|
||||
<button class="st-b">다시 시도</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; width: 432px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">비어 있음</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">섹션마다 문구가 다름 (커뮤니티 예시)</span>
|
||||
</div>
|
||||
<div class="st" style="min-height: 240px;">
|
||||
<span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5a3 3 0 01-3 3H9.5L5 20.5V6a3 3 0 013-3h9a3 3 0 013 3z"></path></svg></span>
|
||||
<p class="st-t">아직 올라온 글이 없어요</p>
|
||||
|
||||
<span class="st-l">첫 글 쓰러 가기</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">두 블록의 공통 규격</div>
|
||||
<ul style="margin: 0.625rem 0 0; padding-left: 1.0625rem;">
|
||||
<li style="margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">바탕 #FAFBFC · 테두리 1px #EDEFF2 · 라운드 16px. 섹션 본문이 있어야 할 높이를 <span style="font-weight: 700; color: #14161A;">min-height</span> 로 그대로 채웁니다.</li>
|
||||
<li style="margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">아이콘은 44px 원형(#F2F4F7) 안에 22px 선 아이콘(#9BA1A9). 색으로 경고를 주지 않습니다 — 브랜드 오렌지도, 빨강도 쓰지 않습니다.</li>
|
||||
<li style="margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">본문 14px #5B6169, 보조 문구 13px #9BA1A9, 가운데 정렬, 최대 20rem 에서 줄바꿈.</li>
|
||||
<li style="margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">실패에는 <span style="font-weight: 700; color: #14161A;">「다시 시도」</span> 버튼(36px · 흰 바탕 · 1px #D6DAE0 테두리)이 항상 붙습니다. 비어 있음에는 갈 곳이 있을 때만 글자 링크를 붙입니다.</li>
|
||||
<li style="margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">실패 문구는 에러 코드 맵의 <span style="font-weight: 700; color: #14161A;">SYS_001</span> 문장을 그대로 씁니다. 서버가 다른 코드를 내려주면 그 코드의 문장으로 바뀝니다 — 화면에서 문구를 새로 짓지 않습니다.</li>
|
||||
<li style="margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">한 섹션이 실패해도 그 섹션만 다시 부릅니다. 페이지 전체를 새로 고치게 하지 않습니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.25rem;">
|
||||
<div style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">섹션별 비어 있음 문구</div>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: #9BA1A9;">«데이터가 없습니다» 같은 한 문장으로 묶지 않았습니다. 비어 있는 이유가 섹션마다 다르고, 다음에 할 일도 다릅니다.</p>
|
||||
<div style="margin-top: 1rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; height: 36px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">섹션</span><span class="d-th">문구</span><span class="d-th">보조 문구</span><span class="d-th">액션</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; min-height: 52px; padding: 0.625rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F2F4F7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 4.5v15"></path><path d="M4.5 5.5h12l-2.4 3.4 2.4 3.4h-12"></path></svg></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">이벤트</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem;">진행 중인 이벤트가 없어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">새 이벤트가 열리면 알려 드릴게요</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #C9CDD3;">없음</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; min-height: 52px; padding: 0.625rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F2F4F7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5h16"></path><path d="M7.5 16.5v-4"></path><path d="M12 16.5v-8"></path><path d="M16.5 16.5v-5.5"></path></svg></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">검색 랭킹</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem;">아직 집계된 검색이 없어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">검색이 쌓이면 순위가 나타납니다</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #C9CDD3;">없음</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; min-height: 52px; padding: 0.625rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F2F4F7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5h16"></path><path d="M7.5 16.5v-4"></path><path d="M12 16.5v-8"></path><path d="M16.5 16.5v-5.5"></path></svg></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">게임 랭킹</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem;">이번 시즌 랭킹이 아직 열리지 않았어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">—</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #C24A00;">지난 시즌 보기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; min-height: 52px; padding: 0.625rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F2F4F7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5a3 3 0 01-3 3H9.5L5 20.5V6a3 3 0 013-3h9a3 3 0 013 3z"></path></svg></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">커뮤니티</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem;">아직 올라온 글이 없어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">—</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #C24A00;">첫 글 쓰러 가기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; min-height: 52px; padding: 0.625rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F2F4F7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13.5 3H7.5a2 2 0 00-2 2v14a2 2 0 002 2h9a2 2 0 002-2V8z"></path><path d="M13.5 3v5h5"></path></svg></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">소식 (서든어택 · 서린즈)</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem;">등록된 소식이 없어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">—</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #C9CDD3;">없음</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; min-height: 52px; padding: 0.625rem 0;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F2F4F7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="12.5" rx="3"></rect><path d="M10.5 9.2l4.8 3-4.8 3z"></path></svg></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">지금 방송 중</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem;">지금 방송 중인 채널이 없어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">방송이 시작되면 여기에 표시됩니다</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #C9CDD3;">없음</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,319 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 브랜드 컬러 — D 탄피 오렌지 확정, 후보 넷 비교 기록 */
|
||||
body { margin: 0; }
|
||||
.b-root, .b-root * { box-sizing: border-box; }
|
||||
.b-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="b-root" style="width: 1440px; min-height: 1500px; padding: 48px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">브랜드 컬러 — 탄피 오렌지</h1>
|
||||
<p style="margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B6169; max-width: 68rem;">D안으로 확정했습니다. 면 위에는 흰 글자·아이콘을 얹고, 흰 바탕 위 글자는 진한 변형을 씁니다 — 면과 글자가 서로 다른 값을 쓰는 색이라 아래 네 값으로 정리했습니다. 후보 넷은 나중에 되돌아볼 수 있게 그대로 남겨 뒀습니다.</p>
|
||||
|
||||
<div style="display: flex; gap: 0.75rem; margin-top: 1.5rem;">
|
||||
<div style="flex-grow: 1; padding: 1.125rem 1.25rem; border-radius: 16px; background: #FF6A00;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.8);">면 — 주 버튼 · 강조 면</div>
|
||||
<div style="margin-top: 0.375rem; font-size: 1.25rem; font-weight: 700; color: #FFFFFF;">#FF6A00</div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.8);">그 위 글자·아이콘은 흰색 · 2.87 : 1</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; padding: 1.125rem 1.25rem; border-radius: 16px; background: #D95A00;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.75);">면 누름 · hover</div>
|
||||
<div style="margin-top: 0.375rem; font-size: 1.25rem; font-weight: 700; color: #FFFFFF;">#D95A00</div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75);">면색보다 한 단 어둡게</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; padding: 1.125rem 1.25rem; border-radius: 16px; background: #C24A00;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.75);">글자 — 「신규」 · 링크</div>
|
||||
<div style="margin-top: 0.375rem; font-size: 1.25rem; font-weight: 700; color: #FFFFFF;">#C24A00</div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75);">흰 바탕 위 4.91 : 1</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; padding: 1.125rem 1.25rem; border-radius: 16px; background: #A03C00;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.75);">글자 hover</div>
|
||||
<div style="margin-top: 0.375rem; font-size: 1.25rem; font-weight: 700; color: #FFFFFF;">#A03C00</div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75);">흰 바탕 위 6.69 : 1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 2rem; margin-top: 0.75rem; padding: 1rem 1.25rem; border-radius: 14px; background: #F5F6F8;">
|
||||
<div style="flex-shrink: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C;">이미 잡혀 있는 색</div>
|
||||
<div style="display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem;"><span style="width: 12px; height: 12px; border-radius: 4px; background: #12805C;"></span>상승 #12805C</span>
|
||||
<span style="display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem;"><span style="width: 12px; height: 12px; border-radius: 4px; background: #C4453D;"></span>하락 #C4453D</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-shrink: 0; width: 1px; background: #E4E8ED;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C;">계속 지켜볼 것</div>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: #5B6169;">면 위 흰 글자는 2.87:1 로 권고치 아래입니다. 밝기를 살리는 쪽을 택한 결과이고, 버튼 글자를 키우거나 굵게 하면 체감은 나아집니다. 나중에 통과선을 맞춰야 하면 면색을 <span style="font-weight: 700; color: #CE5400;">#CE5400</span>(4.29:1) · <span style="font-weight: 700; color: #C24A00;">#C24A00</span>(4.91:1) 쪽으로 한 단씩 내리는 자리가 있습니다.<br>글자용 <span style="font-weight: 700; color: #C24A00;">#C24A00</span> 과 하락 빨강 <span style="font-weight: 700; color: #C4453D;">#C4453D</span> 은 색상환에서 18° 떨어져 있습니다. 두 색이 같은 줄에 놓이는 화면이 생기면 하락 색을 더 차갑게 옮기는 편이 낫습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 1.75rem; margin-top: 2rem;">
|
||||
|
||||
<div style="display: flex; gap: 2rem; padding: 0 0 1.75rem; border-bottom: 1px solid #EDEFF2;">
|
||||
|
||||
<div style="flex-shrink: 0; width: 224px;">
|
||||
<div style="display: flex; align-items: flex-end; height: 132px; padding: 0.875rem; border-radius: 16px; background: #0B5FFF;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">#0B5FFF</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: #0A4ACC; border: 1px solid rgba(20, 22, 26, 0.08);"></span>
|
||||
<span style="font-size: 0.75rem; color: #5B6169;">면 누름 · 글자 hover</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #14161A;">#0A4ACC</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; width: 372px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem;">
|
||||
<span style="font-size: 0.75rem; font-weight: 700; color: #0B5FFF;">A</span>
|
||||
<span style="font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">코발트 블루</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">지금 색을 정돈한 안</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1.25rem; margin-top: 0.625rem; padding-bottom: 0.75rem; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">oklch(55.2% 0.248 262)</span>
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">면 위 글자 대비 <span style="font-weight: 700; color: #14161A;">5.13 : 1</span></span>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.65;">전적·기록 사이트에서 기대되는 색입니다. 상승 초록·하락 빨강과 색상환에서 멀리 떨어져 있어 랭킹 표에서 헷갈릴 일이 없습니다.</p>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.65; color: #7A828C;">걸리는 점 — 가장 흔합니다. 다른 전적 사이트, SNS 파랑과 한 덩어리로 읽혀서 기억에 남지 않습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.125rem 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#0B5FFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 1.125rem; border-radius: 11px; background: #0B5FFF;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">찾아보기</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #0B5FFF;">전적 자세히 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span>
|
||||
<span style="flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #0B5FFF; letter-spacing: -0.01em;">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px;">
|
||||
<span style="width: 14px; font-size: 0.8125rem; font-weight: 700; color: #9BA1A9;">1</span>
|
||||
<span style="display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2;"></span>
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span style="display: flex; align-items: center; gap: 0.1875rem;"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 2rem; padding: 0 0 1.75rem; border-bottom: 1px solid #EDEFF2;">
|
||||
|
||||
<div style="flex-shrink: 0; width: 224px;">
|
||||
<div style="display: flex; align-items: flex-end; height: 132px; padding: 0.875rem; border-radius: 16px; background: #4F39E0;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">#4F39E0</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: #402DB8; border: 1px solid rgba(20, 22, 26, 0.08);"></span>
|
||||
<span style="font-size: 0.75rem; color: #5B6169;">면 누름 · 글자 hover</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #14161A;">#402DB8</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; width: 372px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem;">
|
||||
<span style="font-size: 0.75rem; font-weight: 700; color: #4F39E0;">B</span>
|
||||
<span style="font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">인디고 바이올렛</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">대비가 가장 넉넉한 안</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1.25rem; margin-top: 0.625rem; padding-bottom: 0.75rem; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">oklch(48.8% 0.237 279)</span>
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">면 위 글자 대비 <span style="font-weight: 700; color: #14161A;">7.01 : 1</span></span>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.65;">파랑에서 한 뼘 옮겨 앉아 다른 전적 사이트와 겹치지 않습니다. 흰 바탕 대비가 7:1 이라 작은 「신규」 글자도 또렷합니다.</p>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.65; color: #7A828C;">걸리는 점 — 보라 계열이라 밀리터리 FPS 라는 소재와는 거리가 있습니다. 게임보다 서비스·툴 인상이 먼저 옵니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.125rem 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#4F39E0" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 1.125rem; border-radius: 11px; background: #4F39E0;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">찾아보기</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #4F39E0;">전적 자세히 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span>
|
||||
<span style="flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #4F39E0; letter-spacing: -0.01em;">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px;">
|
||||
<span style="width: 14px; font-size: 0.8125rem; font-weight: 700; color: #9BA1A9;">1</span>
|
||||
<span style="display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2;"></span>
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span style="display: flex; align-items: center; gap: 0.1875rem;"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 2rem; padding: 0 0 1.75rem; border-bottom: 1px solid #EDEFF2;">
|
||||
|
||||
<div style="flex-shrink: 0; width: 224px;">
|
||||
<div style="display: flex; align-items: flex-end; height: 132px; padding: 0.875rem; border-radius: 16px; background: #007A87;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">#007A87</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: #00616B; border: 1px solid rgba(20, 22, 26, 0.08);"></span>
|
||||
<span style="font-size: 0.75rem; color: #5B6169;">면 누름 · 글자 hover</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #14161A;">#00616B</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; width: 372px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem;">
|
||||
<span style="font-size: 0.75rem; font-weight: 700; color: #007A87;">C</span>
|
||||
<span style="font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">딥 틸</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">가장 차분한 안</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1.25rem; margin-top: 0.625rem; padding-bottom: 0.75rem; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">oklch(53.0% 0.091 208)</span>
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">면 위 글자 대비 <span style="font-weight: 700; color: #14161A;">5.08 : 1</span></span>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.65;">채도가 낮아 숫자가 빽빽한 화면에서 색이 먼저 튀지 않습니다. 오래 들여다보는 화면에 맞습니다.</p>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.65; color: #7A828C;">걸리는 점 — 상승 초록(#12805C)과 계열이 가깝습니다. 브랜드 색과 상승 표시가 한 화면에 있으면 구분이 약해집니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.125rem 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#007A87" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 1.125rem; border-radius: 11px; background: #007A87;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">찾아보기</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #007A87;">전적 자세히 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span>
|
||||
<span style="flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #007A87; letter-spacing: -0.01em;">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px;">
|
||||
<span style="width: 14px; font-size: 0.8125rem; font-weight: 700; color: #9BA1A9;">1</span>
|
||||
<span style="display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2;"></span>
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span style="display: flex; align-items: center; gap: 0.1875rem;"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 2rem; padding: 1.5rem 1.5rem 1.75rem; border: 2px solid #FF6A00; border-radius: 20px;">
|
||||
|
||||
<div style="flex-shrink: 0; width: 224px;">
|
||||
<div style="display: flex; align-items: flex-end; height: 132px; padding: 0.875rem; border-radius: 16px; background: #FF6A00;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">#FF6A00</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: #D95A00; border: 1px solid rgba(20, 22, 26, 0.08);"></span>
|
||||
<span style="font-size: 0.75rem; color: #5B6169;">면 누름</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #14161A;">#D95A00</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: #C24A00; border: 1px solid rgba(20, 22, 26, 0.08);"></span>
|
||||
<span style="font-size: 0.75rem; color: #5B6169;">글자</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #14161A;">#C24A00</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: #A03C00; border: 1px solid rgba(20, 22, 26, 0.08);"></span>
|
||||
<span style="font-size: 0.75rem; color: #5B6169;">글자 hover</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #14161A;">#A03C00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; width: 372px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem;">
|
||||
<span style="font-size: 0.75rem; font-weight: 700; color: #C24A00;">D</span>
|
||||
<span style="font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">탄피 오렌지</span>
|
||||
<span style="display: inline-flex; align-items: center; height: 20px; padding: 0 0.4375rem; border-radius: 5px; background: #FF6A00; font-size: 0.6875rem; font-weight: 700; color: #FFFFFF;">선택</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1.25rem; margin-top: 0.625rem; padding-bottom: 0.75rem; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">oklch(70.1% 0.201 45)</span>
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">면 위 글자 대비 <span style="font-weight: 700; color: #14161A;">2.87 : 1</span></span>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.65;">네 후보 중 유일한 따뜻한 색이고, 총기·탄피 쪽 연상이 자연스럽습니다. 전적 사이트 사이에서 확실히 구분됩니다.</p>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.65; color: #7A828C;">걸리는 점 — 면 위 흰 글자는 2.87:1 로 권고치(4.5:1)에 못 미칩니다. 밝기를 살리는 쪽을 택한 결과이고, 흰 바탕 위 글자는 진한 변형(#C24A00, 4.91:1)을 따로 씁니다 — 면과 글자가 서로 다른 값입니다. 하락 빨강과 색상환에서 18° 떨어져 있는 점도 계속 지켜볼 부분입니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.125rem 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#C24A00" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 1.125rem; border-radius: 11px; background: #FF6A00;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">찾아보기</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #C24A00;">전적 자세히 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span>
|
||||
<span style="flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em;">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px;">
|
||||
<span style="width: 14px; font-size: 0.8125rem; font-weight: 700; color: #9BA1A9;">1</span>
|
||||
<span style="display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2;"></span>
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span style="display: flex; align-items: center; gap: 0.1875rem;"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,343 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 기본 요소 — 글자 · 색 · 컴포넌트 · 치수 */
|
||||
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 32px; 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-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.d-new { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트로 둔다 */
|
||||
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
|
||||
.seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 1720px; padding: 48px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">기본 요소</h1>
|
||||
<p style="margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B6169; max-width: 66rem;">홈 화면을 그리면서 실제로 굳어진 값만 모았습니다. 여기 없는 크기·색은 새로 만든 것이니, 필요하면 여기에 먼저 추가하고 화면에 씁니다.</p>
|
||||
|
||||
<div style="display: flex; gap: 2.5rem; margin-top: 1.75rem;">
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">글자</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">Pretendard · 400 / 500 / 600 / 700 네 굵기만</span>
|
||||
</div>
|
||||
<div style="border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">히어로 제목</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">2.125rem · 34px · 700</span>
|
||||
<span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em; color: #14161A;">누구의 전적이 궁금하세요?</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">아트보드 제목</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">1.75rem · 28px · 700</span>
|
||||
<span style="font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em; color: #14161A;">브랜드 컬러</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">섹션 제목</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">1.125rem · 18px · 700</span>
|
||||
<span style="font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; color: #14161A;">게임 랭킹</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">본문 · 목록 제목</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">0.9375rem · 15px · 400</span>
|
||||
<span style="font-size: 0.9375rem; font-weight: 400; letter-spacing: -0.015em; color: #14161A;">9월 정기점검 안내</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">강조 본문</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">0.9375rem · 15px · 600</span>
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; color: #14161A;">달빛조각사</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">보조 설명</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">0.875rem · 14px · 400</span>
|
||||
<span style="font-size: 0.875rem; font-weight: 400; letter-spacing: -0.015em; color: #14161A;">닉네임만 알려주시면 정리해 드릴게요</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">날짜 · 부가 수치</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">0.8125rem · 13px · 400</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 400; letter-spacing: -0.015em; color: #14161A;">09.02 · 1,204명</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">표 머리 · 라벨</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">0.75rem · 12px · 500</span>
|
||||
<span style="font-size: 0.75rem; font-weight: 500; letter-spacing: -0.015em; color: #14161A;">순위 · 닉네임 · 등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">「신규」 표기</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">0.6875rem · 11px · 700</span>
|
||||
<span style="font-size: 0.6875rem; font-weight: 700; letter-spacing: -0.01em; color: #C24A00;">신규</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0.875rem 0 0; font-size: 0.8125rem; line-height: 1.65; color: #7A828C;">숫자는 자리가 흔들리지 않도록 <span style="font-weight: 700; color: #14161A;">tabular-nums</span> 를 켭니다. 자간은 제목이 클수록 좁힙니다(-0.045em ~ -0.015em). 로고는 글꼴이 아니라 그린 도형입니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; width: 380px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">치수</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">반복해서 쓰는 값</span>
|
||||
</div>
|
||||
<div style="border-top: 1px solid #E4E8ED;">
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">라운드 — 알약(탭·버튼·칩)</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">999px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">라운드 — 큰 카드 · 배너</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">24 / 20 / 18px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">라운드 — 보통 카드 · 상태 블록</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">16 / 14px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">라운드 — 작은 타일 · 썸네일</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">12 / 10 / 8px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">표 행 높이 — 데스크톱</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">46px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">표 행 높이 — 모바일</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">52px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">표 머리 높이</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">32 ~ 34px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">섹션 사이 — 데스크톱</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">40px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">섹션 사이 — 모바일</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">32px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">그리드 좌우 여백 — 1440 / 768 / 390</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">40 / 24 / 20px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">누를 수 있는 것의 최소 크기(모바일)</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">44px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">본문 최소 크기</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">12px</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.5rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">색</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">이 밖의 색은 쓰지 않습니다</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1.25rem;">
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C; margin-bottom: 0.5rem;">브랜드</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.375rem;">
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #FF6A00;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">면</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#FF6A00</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #D95A00;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">면 누름</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#D95A00</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #C24A00;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">글자</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#C24A00</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #A03C00;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">글자 hover</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#A03C00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C; margin-bottom: 0.5rem;">글자</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.375rem;">
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #14161A;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">본문</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#14161A</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #5B6169;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">보조</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#5B6169</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #7A828C;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">흐린 보조</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#7A828C</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #9BA1A9;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">가장 흐린</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#9BA1A9</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #C9CDD3;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">비활성</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#C9CDD3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C; margin-bottom: 0.5rem;">선</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.375rem;">
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #E4E8ED;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">진한 선</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#E4E8ED</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #EDEFF2;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">보통 선</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#EDEFF2</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">옅은 행 구분</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#F3F5F7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C; margin-bottom: 0.5rem;">면</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.375rem;">
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #FFFFFF; border: 1px solid #E4E8ED;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">기본</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#FFFFFF</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #FAFBFC;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">한 겹 아래</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#FAFBFC</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #F5F6F8;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">카드·탭</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#F5F6F8</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #F2F4F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">버튼 바탕</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#F2F4F7</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #EDEFF2;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">자리표시</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#EDEFF2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C; margin-bottom: 0.5rem;">의미</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.375rem;">
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #12805C;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">상승</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#12805C</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #C4453D;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">하락</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#C4453D</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0.875rem 0 0; font-size: 0.8125rem; line-height: 1.65; color: #7A828C; max-width: 62rem;">브랜드 색은 <span style="font-weight: 700; color: #14161A;">면이냐 글자냐</span>에 따라 값이 갈립니다 — 면에는 #FF6A00 에 흰 글자, 흰 바탕 위 글자에는 #C24A00. 상승·하락은 의미가 정해진 색이라 다른 뜻으로 쓰지 않습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.5rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">컴포넌트</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">화면마다 같은 모양으로 씁니다</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1.25rem;">
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.875rem;">탭 — 필터를 고를 때</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="margin-top: 1.25rem; font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.875rem;">세그먼트 — 갈래를 고를 때</div>
|
||||
<div class="seg"><span class="on">계급</span><span>랭크전</span><span>클랜</span></div>
|
||||
<p style="margin: 0.875rem 0 0; font-size: 0.75rem; line-height: 1.6; color: #7A828C;">층위가 다르므로 모양도 다릅니다. 알약 탭을 두 줄로 쌓지 않습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.875rem;">버튼</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;">
|
||||
<button style="height: 44px; padding: 0 1.375rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em;">찾아보기</button>
|
||||
<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;">로그인</button>
|
||||
<button class="st-b" style="display: inline-flex; align-items: center; height: 36px; padding: 0 1rem; border: 1px solid #D6DAE0; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: #14161A;">다시 시도</button>
|
||||
</div>
|
||||
<div style="margin-top: 1.25rem; font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.75rem;">글자 링크</div>
|
||||
<div style="display: flex; align-items: center; gap: 1.25rem;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #5B6169;">더 보기</span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #C24A00;">전적 자세히 보기</span>
|
||||
</div>
|
||||
<p style="margin: 0.875rem 0 0; font-size: 0.75rem; line-height: 1.6; color: #7A828C;">한 화면에 주 버튼(오렌지)은 하나입니다. 「더 보기」는 브랜드 색을 쓰지 않습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.875rem;">표 한 줄</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 32px; 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 style="display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: #F0F2F5;"></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;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span style="display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: #F0F2F5;"></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span>
|
||||
<span class="d-mv"><span style="font-size: 0.75rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1.6; color: #7A828C;">등락은 ▲n / ▼n / – 셋뿐입니다. 「신규」는 배경 없는 글자입니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,335 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,547 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,305 +0,0 @@
|
||||
<!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,554 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 홈 — 로딩(스켈레톤). 뼈대는 즉시 그리고 데이터 자리만 회색으로 둔다 */
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-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-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
|
||||
/* 스켈레톤 — 한 덩어리(.s)로 통일하고 크기·라운드만 자리마다 다르게 준다 */
|
||||
.s { display: block; position: relative; overflow: hidden; background: #EDEFF2; }
|
||||
.s::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
|
||||
animation: s-sweep 1.6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes s-sweep { to { transform: translateX(100%); } }
|
||||
/* 움직임을 줄이도록 설정한 기기에서는 쓸어가는 효과를 끈다 */
|
||||
@media (prefers-reduced-motion: reduce) { .s::after { animation: none; } }
|
||||
.d-tier { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2; }
|
||||
.d-rp { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
|
||||
</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;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
|
||||
<span style="font-weight: 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: #FF6A00; 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 class="s" style="width: 112px; height: 36px; border-radius: 999px;"></span>
|
||||
<span class="s" style="width: 124px; height: 36px; border-radius: 999px;"></span>
|
||||
<span class="s" style="width: 104px; height: 36px; border-radius: 999px;"></span>
|
||||
<span class="s" style="width: 132px; height: 36px; border-radius: 999px;"></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>
|
||||
<span class="s" style="width: 100%; height: auto; border-radius: 24px; aspect-ratio: 720 / 248;"></span>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 56px;">
|
||||
<span class="s" style="width: 68px; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
|
||||
<span class="s" style="width: 216px; height: 13px; border-radius: 5px;"></span>
|
||||
<span class="s" style="width: 124px; height: 11px; border-radius: 5px;"></span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="width: 22px; 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="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span class="s" style="width: 28px; height: 11px; border-radius: 5px; margin: 0 0.25rem 0 0.5rem;"></span>
|
||||
<span class="d-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" 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="#C9CDD3" 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="s" style="width: 68px; height: 11px; border-radius: 5px;"></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="s" style="width: 72%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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="s" style="width: 58%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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="s" style="width: 80%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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;">4</span>
|
||||
<span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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;">5</span>
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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;">6</span>
|
||||
<span class="s" style="width: 54%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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;">7</span>
|
||||
<span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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;">8</span>
|
||||
<span class="s" style="width: 84%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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: 700;">9</span>
|
||||
<span class="s" style="width: 60%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 72%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 58%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 80%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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;">4</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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;">5</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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;">6</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 54%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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;">7</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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;">8</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 84%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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;">9</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 60%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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: 700;">10</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 74%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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><span class="d-tab">클랜</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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) 72px 34px; 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="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 72%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 58%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 80%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 54%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 84%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 60%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">10</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 74%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 72%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 58%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 80%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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;">4</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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;">5</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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;">6</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 54%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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;">7</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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;">8</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 84%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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;">9</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 60%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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: 700;">10</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 74%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></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 class="s" style="width: 136px; height: 11px; border-radius: 5px;"></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: #C9CDD3;">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: #C9CDD3;">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: #C9CDD3;">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: #C9CDD3;">5</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 34px; font-size: 0.875rem; color: #C9CDD3;">…</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: #C9CDD3;">10</span>
|
||||
</div>
|
||||
<span class="d-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" 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;">
|
||||
<span class="s" style="width: 100%; height: auto; border-radius: 18px; aspect-ratio: 1 / 1;"></span>
|
||||
<span class="s" style="width: 100%; height: auto; border-radius: 18px; aspect-ratio: 1 / 1;"></span>
|
||||
<div style="display: flex; flex-direction: column; aspect-ratio: 1 / 1; padding: 16px; border-radius: 18px; background: #F5F6F8;">
|
||||
<span class="s" style="width: 100%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="height: 0.5rem;"></span>
|
||||
<span class="s" style="width: 62%; height: 12px; border-radius: 5px;"></span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;"><span class="s" style="width: 20px; height: 20px; border-radius: 999px;"></span><span class="s" style="width: 54%; height: 10px; border-radius: 5px;"></span></div>
|
||||
</div>
|
||||
<span class="s" style="width: 100%; height: auto; border-radius: 18px; aspect-ratio: 1 / 1;"></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></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="flex-grow: 1; min-width: 0;"><span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 78%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 56%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 82%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 74%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></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="flex-grow: 1; min-width: 0;"><span class="s" style="width: 72%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 58%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 80%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 66%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 62%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></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>
|
||||
<span class="s" style="width: 100%; height: auto; border-radius: 16px; aspect-ratio: 16 / 9;"></span>
|
||||
<span style="display: block; margin-top: 0.875rem;"><span class="s" style="width: 68%; height: 13px; border-radius: 5px;"></span></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.5rem;"><span class="s" style="width: 20px; height: 20px; border-radius: 999px;"></span><span class="s" style="width: 46%; height: 11px; border-radius: 5px;"></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;">
|
||||
<span class="s" style="width: 92px; height: 54px; border-radius: 12px; flex-shrink: 0;"></span>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.4375rem;"><span class="s" style="width: 18px; height: 18px; border-radius: 999px;"></span><span class="s" style="width: 58%; height: 10px; border-radius: 5px;"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span class="s" style="width: 92px; height: 54px; border-radius: 12px; flex-shrink: 0;"></span>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.4375rem;"><span class="s" style="width: 18px; height: 18px; border-radius: 999px;"></span><span class="s" style="width: 58%; height: 10px; border-radius: 5px;"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span class="s" style="width: 92px; height: 54px; border-radius: 12px; flex-shrink: 0;"></span>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.4375rem;"><span class="s" style="width: 18px; height: 18px; border-radius: 999px;"></span><span class="s" style="width: 58%; height: 10px; border-radius: 5px;"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,173 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 로고 — 곧은 획으로만 짜고 끝과 꺾임을 굴린 워드마크 */
|
||||
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 32px; 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-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.d-new { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트로 둔다 */
|
||||
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
|
||||
.seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 1860px; padding: 48px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">서린즈 로고</h1>
|
||||
<p style="margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B6169; max-width: 66rem;">글꼴을 그대로 쓰지 않고 획을 직접 그렸습니다. 서 = ㅅ+ㅓ, 린 = ㄹ+ㅣ+ㄴ, 즈 = ㅈ+ㅡ 인데 이 일곱 자모가 모두 곧은 선이라, 선으로만 짜고 끝과 꺾이는 자리만 둥글게 굴려 «동글»한 인상을 냈습니다. 글꼴 파일에 기대지 않으니 어디에 써도 같은 모양이 나오고, 크기를 키워도 깨지지 않으며, 내보낼 때도 그대로 나옵니다.</p>
|
||||
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 260px; margin-top: 1.75rem; border: 1px solid #E4E8ED; border-radius: 20px;"><svg width="315" height="104" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
|
||||
<div style="margin-top: 2.5rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">색</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">세 가지만 씁니다</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1rem;">
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 140px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E4E8ED;"><svg width="170" height="56" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: #5B6169;">기본 — 검정 #14161A · 흰 바탕</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 140px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E4E8ED;"><svg width="170" height="56" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#C24A00" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: #5B6169;">강조 — 오렌지 #C24A00 · 흰 바탕</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 140px; border-radius: 16px; background: #FF6A00;"><svg width="170" height="56" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: #5B6169;">반전 — 흰색 · 오렌지 바탕</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0.875rem 0 0; font-size: 0.8125rem; line-height: 1.65; color: #7A828C; max-width: 62rem;">흰 바탕에 오렌지로 쓸 때는 밝은 #FF6A00 이 아니라 글자용 #C24A00 을 씁니다 — 밝은 쪽은 흰 바탕에서 2.87:1 이라 획이 날아갑니다. 사진 위에 얹어야 하면 오렌지 바탕을 깔고 흰 워드마크를 올립니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.5rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">획 두께</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">기본은 가운데. 나머지 둘은 필요할 때만</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1rem;">
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 116px; border: 1px solid #E4E8ED; border-radius: 16px;"><svg width="172" height="56" viewBox="-12.5 -6.5 371 121" fill="none" stroke="#14161A" stroke-width="13" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 600;">가는 획</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.75rem; line-height: 1.55; color: #9BA1A9;">큰 화면·인쇄물에서 여유 있게 보일 때</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 116px; border: 1px solid #E4E8ED; border-radius: 16px;"><svg width="170" height="56" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 600;">기본</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.75rem; line-height: 1.55; color: #9BA1A9;">헤더를 비롯한 모든 자리의 기본값</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 116px; border: 1px solid #E4E8ED; border-radius: 16px;"><svg width="165" height="56" viewBox="-16 -10 378 128" fill="none" stroke="#14161A" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 600;">도톰한 획</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.75rem; line-height: 1.55; color: #9BA1A9;">아주 작게 쓰거나 굿즈처럼 두께가 필요할 때</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 2.5rem; margin-top: 2.5rem;">
|
||||
|
||||
<div style="flex-shrink: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">헤더</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">심볼 없이 워드마크만</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
||||
<div style="display: flex; align-items: center; height: 88px; padding: 0 1.5rem; border: 1px solid #E4E8ED; border-radius: 16px;"><svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 80px; padding: 0 1.5rem; border: 1px solid #E4E8ED; border-radius: 16px;"><svg width="55" height="18" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; width: 24rem; font-size: 0.8125rem; line-height: 1.65; color: #7A828C;">데스크톱·태블릿 20px, 모바일 18px. 앞에 있던 돋보기 심볼은 뺐습니다 — 워드마크가 이미 이름을 다 말하고, 검색은 히어로와 헤더 아이콘이 따로 맡습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">앱 아이콘</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">「서」 한 글자</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-end; gap: 1.25rem; height: 108px; padding: 0 1.5rem; border: 1px solid #E4E8ED; border-radius: 16px;"><span style="display: inline-flex; width: 64px; height: 64px; border-radius: 19px; background: #FF6A00; flex-shrink: 0;"><svg width="64" height="64" viewBox="-14.5 -18.5 135 145" fill="none" stroke="#FFFFFF" stroke-width="17" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline></svg></span><span style="display: inline-flex; width: 44px; height: 44px; border-radius: 13px; background: #FF6A00; flex-shrink: 0;"><svg width="44" height="44" viewBox="-14.5 -18.5 135 145" fill="none" stroke="#FFFFFF" stroke-width="17" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline></svg></span><span style="display: inline-flex; width: 32px; height: 32px; border-radius: 9px; background: #FF6A00; flex-shrink: 0;"><svg width="32" height="32" viewBox="-14.5 -18.5 135 145" fill="none" stroke="#FFFFFF" stroke-width="17" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline></svg></span><span style="display: inline-flex; width: 20px; height: 20px; border-radius: 6px; background: #FF6A00; flex-shrink: 0;"><svg width="20" height="20" viewBox="-14.5 -18.5 135 145" fill="none" stroke="#FFFFFF" stroke-width="17" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 1.25rem; height: 96px; margin-top: 0.75rem; padding: 0 1.5rem; border: 1px solid #E4E8ED; border-radius: 16px;"><span style="display: inline-flex; width: 64px; height: 64px; border-radius: 19px; background: #14161A; flex-shrink: 0;"><svg width="64" height="64" viewBox="-14.5 -18.5 135 145" fill="none" stroke="#FFFFFF" stroke-width="17" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline></svg></span><span style="display: inline-flex; width: 64px; height: 64px; border-radius: 19px; background: #F2F4F7; flex-shrink: 0;"><svg width="64" height="64" viewBox="-14.5 -18.5 135 145" fill="none" stroke="#14161A" stroke-width="17" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline></svg></span>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; width: 24rem; font-size: 0.8125rem; line-height: 1.65; color: #7A828C;">파비콘·앱 아이콘처럼 정사각 한 칸만 있는 자리에는 워드마크의 첫 글자 「서」를 그대로 떼어 씁니다. 워드마크를 정사각에 욱여넣지 않습니다. 바탕은 오렌지가 기본이고, 검정·연회색은 오렌지를 못 쓰는 자리에서만 씁니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">지켜야 할 것</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;"></span>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 1.0625rem;">
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">최소 크기는 <span style="font-weight: 700; color: #14161A;">높이 16px</span> 입니다. 그 아래로는 「린」의 ㄹ 속이 막힙니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">둘레 여백은 <span style="font-weight: 700; color: #14161A;">글자 높이의 절반</span> 이상 비웁니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">가로세로 비율을 바꾸지 않습니다. 기울이거나 그림자·테두리를 더하지 않습니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">획 두께는 크기에 따라 저절로 얇아지지 않습니다. 아주 작게 쓸 때는 「도톰한 획」으로 바꿉니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">글자를 다시 배열하거나 「서린즈」를 다른 말로 바꿔 같은 모양을 만들지 않습니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">앱 아이콘의 「서」는 워드마크와 같은 좌표에서 떼어 온 것입니다. 따로 다시 그리지 않습니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.5rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">헤더에 얹은 모습</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">데스크톱과 모바일</span>
|
||||
</div>
|
||||
<div style="border: 1px solid #E4E8ED; border-radius: 16px; overflow: hidden;">
|
||||
<header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; background: #FFFFFF; border-bottom: 1px solid #EDEFF2;"><svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<nav 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>
|
||||
<header style="display: flex; align-items: center; gap: 0.5rem; width: 390px; height: 60px; padding: 0 20px; background: #FFFFFF; border-top: 1px solid #EDEFF2;"><svg width="55" height="18" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.625rem;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2" stroke-linecap="round"><path d="M4 7h16"></path><path d="M4 12h16"></path><path d="M4 17h16"></path></svg>
|
||||
</span>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,18 +18,21 @@
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #0866FF; text-decoration: none; }
|
||||
a:hover { color: #0450CC; }
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-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-new { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em; }
|
||||
.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; }
|
||||
.d-tier { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2; }
|
||||
.d-rp { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
@@ -37,10 +40,7 @@
|
||||
|
||||
<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>
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
|
||||
@@ -67,7 +67,7 @@
|
||||
<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>
|
||||
<button style="height: 50px; padding: 0 1.75rem; border: none; border-radius: 999px; background: #FF6A00; 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;">
|
||||
@@ -217,70 +217,70 @@
|
||||
<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;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,486</span></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;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,451</span></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;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,398</span></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;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,344</span></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;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,301</span></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;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,276</span></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;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,240</span></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;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,205</span></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;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,181</span></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;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,154</span></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>
|
||||
|
||||
@@ -416,12 +416,12 @@
|
||||
</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 style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;"><span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span class="d-new">신규</span></div><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;"><div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;"><span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span><span class="d-new">신규</span></div><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 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 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 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 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>
|
||||
|
||||
@@ -432,12 +432,12 @@
|
||||
</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 style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;"><span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 열었어요</span><span class="d-new">신규</span></div><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;"><div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;"><span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">전적 갱신이 두 배 빨라졌어요</span><span class="d-new">신규</span></div><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 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 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 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 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>
|
||||
|
||||
|
||||
@@ -0,0 +1,372 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 홈 — 모바일 (390) · 한 열, 게임 랭킹은 갈래 세그먼트로 하나씩 */
|
||||
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 32px; 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-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.d-new { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트로 둔다 */
|
||||
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
|
||||
.seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 390px; min-height: 4000px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 0.625rem; height: 60px; padding: 0 20px 0 20px; border-bottom: 1px solid #EDEFF2;">
|
||||
<svg width="55" height="18" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.625rem;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2" stroke-linecap="round"><path d="M4 7h16"></path><path d="M4 12h16"></path><path d="M4 17h16"></path></svg>
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<!-- 검색 히어로 — 메뉴는 서랍으로 접었지만 검색은 접지 않는다 -->
|
||||
<section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2; padding: 32px 20px 26px;">
|
||||
<h1 style="margin: 0; text-align: center; font-size: 1.625rem; line-height: 1.32; font-weight: 700; letter-spacing: -0.045em; text-wrap: balance;">누구의 전적이 궁금하세요?</h1>
|
||||
<p style="margin: 0.625rem 0 0; text-align: center; font-size: 0.875rem; line-height: 1.6; color: #5B6169; text-wrap: pretty;">닉네임만 알려주시면 최근 경기 흐름부터 자주 쓰는 무기까지 정리해 드릴게요.</p>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; height: 56px; margin-top: 1.25rem; padding: 0 0.375rem 0 0.875rem; background: #FFFFFF; border: 1px solid #E4E8ED; border-radius: 999px; box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 8px 22px rgba(20, 22, 26, 0.06);">
|
||||
<svg width="19" height="19" 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 class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
<button style="height: 44px; padding: 0 1.125rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em; cursor: pointer;">찾아보기</button>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem;">
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9;">최근에 찾아봤어요</div>
|
||||
<!-- 칩은 가로로 넘치면 옆으로 밀어 본다 -->
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; overflow-x: auto;">
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.4375rem; flex-shrink: 0; height: 36px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; 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.4375rem; flex-shrink: 0; height: 36px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; 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.4375rem; flex-shrink: 0; height: 36px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; 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.4375rem; flex-shrink: 0; height: 36px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #D8E6E2;"></span>무명연대장</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 2rem; padding: 24px 20px 40px;">
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">이벤트</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div style="border: 1px solid #EDEFF2; border-radius: 16px; 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.5rem; margin-top: 0.75rem;">
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 600;">서든 페스티벌 같이 갈래?</span>
|
||||
<span style="width: 16px; 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>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #9BA1A9;">시즌 이벤트</span>
|
||||
<span style="width: 1px; height: 10px; background: #E4E8ED;"></span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">9월 1일 ~ 9월 30일</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">검색 랭킹</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: 48px; 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 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.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: 48px; 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 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.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: 48px; 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 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.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: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">무명연대장</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">한밤의저격수</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.8125rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">조용한총잡이</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.8125rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">야간부대장</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.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: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">헤드샷장인</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">삼보급단골</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.8125rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">게임 랭킹</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div class="seg">
|
||||
<span class="on">계급</span><span>랭크전</span><span>클랜</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="d-tab d-tab-on">통합</span><span class="d-tab">시즌</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">매일 오전 8시 갱신</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 34px; 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: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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.8125rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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.8125rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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.8125rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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="#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: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">10</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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.8125rem; color: #12805C;">5</span></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">1 ~ 10위 · 전체 100위</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span class="d-arw" style="width: 44px; height: 44px; opacity: 0.4;"><svg width="15" height="15" 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" style="width: 44px; height: 44px;"><svg width="15" height="15" 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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">커뮤니티</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.625rem; margin-top: 0.875rem;">
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: #E4E8ED; overflow: hidden;">
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.375rem; height: 38px; padding: 0 0.625rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 18px; height: 18px; border-radius: 999px; background: #C9D2DD; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">달빛조각사</span><span style="font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">312</span></div>
|
||||
</div>
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: #EAE6E0; overflow: hidden;">
|
||||
<div style="position: absolute; top: 8px; right: 8px;"><svg width="15" height="15" 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.375rem; height: 38px; padding: 0 0.625rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 18px; height: 18px; border-radius: 999px; background: #D8D2C8; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">칼든햄스터</span><span style="font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">274</span></div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; aspect-ratio: 1 / 1; padding: 14px; border-radius: 16px; background: #F5F6F8;">
|
||||
<p style="margin: 0; font-size: 0.8125rem; line-height: 1.55; font-weight: 500;">폭파 삼보급 A 롱각, 다들 어디 서세요?</p>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;">
|
||||
<span style="width: 18px; height: 18px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600;">새벽두시</span>
|
||||
<span style="font-size: 0.6875rem; font-weight: 600; color: #5B6169;">198</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: #E8E4EC; overflow: hidden;">
|
||||
<div style="position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(20, 22, 26, 0.55);">
|
||||
<svg width="15" height="15" 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.375rem; height: 38px; padding: 0 0.625rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 18px; height: 18px; border-radius: 999px; background: #D5CEDC; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">무명연대장</span><span style="font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">163</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">서든어택 소식</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: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.29</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.28</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">클랜전 매칭 로직 개선</span>
|
||||
</div>
|
||||
<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 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">서린즈 소식</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: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 열었어요</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.03</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">전적 갱신이 두 배 빨라졌어요</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">즐겨찾기 알림 기능 추가</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.30</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">8월 서버 점검 결과 보고</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.27</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">커뮤니티 이용 규칙 정리</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.24</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">모바일 화면을 다듬었어요</span>
|
||||
</div>
|
||||
<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 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">지금 방송 중</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div>
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 14px; 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: 104px; height: 60px; 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 class="d-clip" 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: 104px; height: 60px; 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 class="d-clip" 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: 104px; height: 60px; 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 class="d-clip" style="font-size: 0.75rem; color: #9BA1A9;">한밤의저격수 · 341명</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,256 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 — 헤더 검색 (C안). 아이콘을 눌러 검색 시트를 연다 */
|
||||
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 32px; 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-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.d-new { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트로 둔다 */
|
||||
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
|
||||
.seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 2200px; padding: 48px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">헤더 검색 — 아이콘과 검색 시트</h1>
|
||||
<p style="margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B6169; max-width: 68rem;">히어로 검색창이 화면 밖으로 나가면 헤더에 돋보기 아이콘이 나타납니다. 누르면 검색 시트가 열립니다. 데스크톱·태블릿·모바일 모두 같은 방식이고, 폭에 따라 시트의 크기만 다릅니다.</p>
|
||||
|
||||
<div style="margin-top: 1.75rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">데스크톱 헤더</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">위 — 맨 위에 있을 때 · 아래 — 히어로가 화면 밖으로 나간 뒤</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; border: 1px solid #E4E8ED; border-radius: 16px; overflow: hidden; padding: 0;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; background: #FFFFFF; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
|
||||
<span style="font-weight: 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>
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; background: #FFFFFF; border-bottom: 1px solid #EDEFF2; box-shadow: 0 6px 18px rgba(20, 22, 26, 0.06);">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
|
||||
<span style="font-weight: 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>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #F2F4F7;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg></span>
|
||||
<button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
|
||||
</header>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.65; color: #7A828C; max-width: 60rem;">헤더는 스크롤해도 위에 붙어 있습니다. 아이콘은 처음부터 두지 않고 히어로가 벗어난 뒤에 나타납니다 — 맨 위에서는 바로 아래 큰 검색창이 있어 같은 것이 둘이 되기 때문입니다. 나타날 때 헤더에 옅은 그림자가 함께 생겨 페이지가 스크롤된 상태임을 알려 줍니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.25rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">데스크톱 검색 시트</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">아이콘을 누른 뒤 · 640px 카드</span>
|
||||
</div>
|
||||
|
||||
<div style="position: relative; height: 560px; border-radius: 20px; background: #F5F6F8; overflow: hidden;">
|
||||
<div style="position: absolute; inset: 0; background: rgba(20, 22, 26, 0.45);"></div>
|
||||
<div style="position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: 640px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 24px 60px rgba(20, 22, 26, 0.28); overflow: hidden;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 64px; padding: 0 1.25rem; border-bottom: 1px solid #EDEFF2;"><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>
|
||||
<span style="display: inline-flex; align-items: center; height: 24px; padding: 0 0.4375rem; border: 1px solid #E4E8ED; border-radius: 6px; font-size: 0.6875rem; font-weight: 600; color: #9BA1A9;">ESC</span>
|
||||
</div>
|
||||
<div style="padding: 0.25rem 1.25rem 1.125rem;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #9BA1A9; margin: 0.875rem 0 0.25rem;">최근에 찾아봤어요</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">달빛조각사</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 0;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #E5E0F0; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">칼든햄스터</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 0;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #E7E3D8; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">새벽두시</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 0;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #D8E6E2; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">무명연대장</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 0;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #9BA1A9; margin: 0.875rem 0 0.25rem;">지금 많이 찾는</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 44px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">달빛조각사</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.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 44px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">칼든햄스터</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.8125rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 44px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">새벽두시</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.8125rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 44px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">무명연대장</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 44px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">한밤의저격수</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.8125rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.65; color: #7A828C; max-width: 60rem;">입력칸은 열리자마자 바로 칠 수 있는 상태입니다. 아직 아무것도 안 쳤을 때는 최근 검색과 「지금 많이 찾는」 다섯을 보여줍니다 — 홈의 검색 랭킹과 같은 데이터라 새로 만들 것이 없고, 빈 시트를 마주하지 않게 합니다. ESC 나 바깥을 누르면 닫힙니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.25rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">모바일</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">헤더 두 상태와 전체 화면 시트</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 2.5rem;">
|
||||
<div style="display: flex; flex-direction: column; gap: 1.25rem;">
|
||||
<div style="border: 1px solid #E4E8ED; border-radius: 14px; overflow: hidden;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 0.5rem; width: 390px; height: 60px; padding: 0 20px; background: #FFFFFF; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<svg width="55" height="18" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.625rem;"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2" stroke-linecap="round"><path d="M4 7h16"></path><path d="M4 12h16"></path><path d="M4 17h16"></path></svg></span>
|
||||
</header>
|
||||
</div>
|
||||
<div style="border: 1px solid #E4E8ED; border-radius: 14px; overflow: hidden;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 0.5rem; width: 390px; height: 60px; padding: 0 20px; background: #FFFFFF; border-bottom: 1px solid #EDEFF2; box-shadow: 0 6px 18px rgba(20, 22, 26, 0.06);">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<svg width="55" height="18" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg></span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.625rem;"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2" stroke-linecap="round"><path d="M4 7h16"></path><path d="M4 12h16"></path><path d="M4 17h16"></path></svg></span>
|
||||
</header>
|
||||
</div>
|
||||
<p style="margin: 0; width: 390px; font-size: 0.8125rem; line-height: 1.65; color: #7A828C;">모바일 헤더에는 입력칸을 넣지 않았습니다. 390px 안에 로고·햄버거가 이미 있어 셋 다 옹색해지고, 어차피 눌러야 키보드가 올라오기 때문입니다. 아이콘과 햄버거 모두 44px 입니다.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<div style="width: 390px; height: 844px; background: #FFFFFF; border: 1px solid #EDEFF2; border-radius: 18px; overflow: hidden;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 60px; padding: 0 0.75rem 0 1rem; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; flex-grow: 1; min-width: 0; height: 42px; padding: 0 0.875rem; border-radius: 999px; background: #F2F4F7;"><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 class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
</div>
|
||||
<span style="flex-shrink: 0; padding: 0 0.375rem; font-size: 0.9375rem; font-weight: 600; color: #5B6169;">취소</span>
|
||||
</div>
|
||||
<div style="padding: 0.25rem 1.25rem 1.125rem;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #9BA1A9; margin: 0.875rem 0 0.25rem;">최근에 찾아봤어요</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">달빛조각사</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.5rem;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #E5E0F0; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">칼든햄스터</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.5rem;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #E7E3D8; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">새벽두시</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.5rem;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #D8E6E2; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">무명연대장</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.5rem;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #9BA1A9; margin: 0.875rem 0 0.25rem;">지금 많이 찾는</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">달빛조각사</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.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">칼든햄스터</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.8125rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">새벽두시</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.8125rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">무명연대장</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">한밤의저격수</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.8125rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">시트에서 정한 것</div>
|
||||
<ul style="margin: 0.625rem 0 0; padding-left: 1.0625rem;">
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">모바일은 전체 화면입니다. 반쯤 덮는 시트로 만들면 키보드가 올라왔을 때 남는 높이가 너무 작습니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">가짜 키보드는 그리지 않았습니다. 실제 기기에서는 아래쪽에 진짜 키보드가 올라와 목록을 가립니다 — 그래서 최근 검색을 위쪽에 뒀습니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">닫기는 데스크톱 ESC · 바깥 누르기, 모바일 「취소」 입니다. 뒤로 가기로도 닫히게 하는 편이 좋습니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">최근 검색 줄의 X 는 그 기록만 지웁니다. 모바일에서는 44px 로 키웠습니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">글자를 치기 시작하면 이 두 목록 자리에 자동완성 결과가 들어옵니다. 그 화면은 아직 그리지 않았습니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,457 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 홈 — 섹션마다 상태가 다른 한 순간. 완료 · 로딩 · 실패 · 비어 있음 */
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-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-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.an { display: inline-flex; align-items: center; height: 20px; margin-left: 0.5rem; padding: 0 0.4375rem; border: 1px dashed #C9CDD3; border-radius: 5px; font-size: 0.6875rem; font-weight: 600; color: #7A828C; letter-spacing: -0.01em; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
|
||||
/* 스켈레톤 — 한 덩어리(.s)로 통일하고 크기·라운드만 자리마다 다르게 준다 */
|
||||
.s { display: block; position: relative; overflow: hidden; background: #EDEFF2; }
|
||||
.s::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
|
||||
animation: s-sweep 1.6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes s-sweep { to { transform: translateX(100%); } }
|
||||
/* 움직임을 줄이도록 설정한 기기에서는 쓸어가는 효과를 끈다 */
|
||||
@media (prefers-reduced-motion: reduce) { .s::after { animation: none; } }
|
||||
|
||||
/* 실패 · 비어 있음 — 섹션 본문 자리를 그대로 채워 레이아웃이 튀지 않게 한다 */
|
||||
.st { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; border: 1px solid #EDEFF2; border-radius: 16px; background: #FAFBFC; text-align: center; }
|
||||
.st-t { margin: 0; font-size: 0.875rem; line-height: 1.6; color: #5B6169; max-width: 20rem; }
|
||||
.st-s { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: #9BA1A9; }
|
||||
.st-b { display: inline-flex; align-items: center; height: 36px; padding: 0 1rem; border: 1px solid #D6DAE0; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: #14161A; cursor: pointer; }
|
||||
.st-l { font-size: 0.8125rem; font-weight: 600; color: #C24A00; }
|
||||
.st-i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #F2F4F7; }
|
||||
.d-tier { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2; }
|
||||
.d-rp { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 2420px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 52px; padding: 0 40px; background: #14161A;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 700; color: #FFFFFF;">보기용 조합</span>
|
||||
<span style="font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.72);">네 가지 상태를 한 화면에 담으려고 섹션마다 다른 상태를 하나씩 넣었습니다. 섹션과 상태는 정해진 짝이 아니며, 어느 섹션이든 네 상태를 모두 가집니다. 이 띠와 점선 라벨은 실제 화면에 없습니다.</span>
|
||||
</div>
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
|
||||
<span style="font-weight: 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: #FF6A00; 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><span class="an">완료</span><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><span class="an">로딩</span><div style="flex-grow: 1;"></div><span class="s" style="width: 68px; height: 11px; border-radius: 5px;"></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="s" style="width: 72%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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="s" style="width: 58%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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="s" style="width: 80%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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;">4</span>
|
||||
<span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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;">5</span>
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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;">6</span>
|
||||
<span class="s" style="width: 54%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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;">7</span>
|
||||
<span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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;">8</span>
|
||||
<span class="s" style="width: 84%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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: 700;">9</span>
|
||||
<span class="s" style="width: 60%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></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 class="an">열마다 다름</span>
|
||||
<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="display: flex; align-items: center;"><span style="font-size: 0.9375rem; font-weight: 700;">계급 랭킹</span><span class="an">완료</span></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>
|
||||
<!-- 랭크전 랭킹 · 로딩 -->
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;"><span style="font-size: 0.9375rem; font-weight: 700;">랭크전 랭킹</span><span class="an">로딩</span></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) 72px 34px; 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) 72px 34px; 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="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 72%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 58%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; 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="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 80%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 54%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 84%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 60%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">10</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 74%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 클랜 랭킹 · 실패 -->
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;"><span style="font-size: 0.9375rem; font-weight: 700;">클랜 랭킹</span><span class="an">실패</span></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="margin-top: 0.75rem;">
|
||||
<div class="st" style="min-height: 448px;">
|
||||
<span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5v5"></path><path d="M12 16.2h.01"></path></svg></span>
|
||||
<p class="st-t">일시적인 시스템 오류가 발생했습니다.<br>잠시 후 다시 시도해 주세요.</p>
|
||||
<button class="st-b">다시 시도</button>
|
||||
</div>
|
||||
</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><span class="an">비어 있음</span><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="margin-top: 0.875rem;">
|
||||
<div class="st" style="min-height: 432px;">
|
||||
<span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5a3 3 0 01-3 3H9.5L5 20.5V6a3 3 0 013-3h9a3 3 0 013 3z"></path></svg></span>
|
||||
<p class="st-t">아직 올라온 글이 없어요</p>
|
||||
|
||||
<span class="st-l">첫 글 쓰러 가기</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 서든어택 소식 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">서든어택 소식</h2><span class="an">완료</span><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;"><div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;"><span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span class="d-new">신규</span></div><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;"><div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;"><span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span><span class="d-new">신규</span></div><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 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 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 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 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><span class="an">실패</span><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;">
|
||||
<div class="st" style="min-height: 276px;">
|
||||
<span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5v5"></path><path d="M12 16.2h.01"></path></svg></span>
|
||||
<p class="st-t">일시적인 시스템 오류가 발생했습니다.<br>잠시 후 다시 시도해 주세요.</p>
|
||||
<button class="st-b">다시 시도</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 지금 방송 중 · 비어 있음 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">지금 방송 중</h2><span class="an">비어 있음</span><div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div class="st" style="min-height: 516px;">
|
||||
<span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="12.5" rx="3"></rect><path d="M10.5 9.2l4.8 3-4.8 3z"></path></svg></span>
|
||||
<p class="st-t">지금 방송 중인 채널이 없어요</p>
|
||||
<p class="st-s">방송이 시작되면 여기에 표시됩니다</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,391 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 홈 — 태블릿 (768) · 두 열, 게임 랭킹은 갈래 세그먼트로 하나씩 */
|
||||
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 32px; 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-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.d-new { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트로 둔다 */
|
||||
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
|
||||
.seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 768px; min-height: 2960px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 1.25rem; height: 64px; padding: 0 24px; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<svg width="55" height="18" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.0625rem; font-size: 0.875rem;">
|
||||
<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: 38px; padding: 0 1rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.875rem; 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: 44px 24px 38px;">
|
||||
<h1 style="margin: 0; text-align: center; font-size: 1.875rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.045em;">누구의 전적이 궁금하세요?</h1>
|
||||
<p style="margin: 0.625rem 0 0; text-align: center; font-size: 0.9375rem; line-height: 1.6; color: #5B6169;">닉네임만 알려주시면 최근 경기 흐름부터 자주 쓰는 무기까지 정리해 드릴게요.</p>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 560px; height: 60px; margin-top: 1.375rem; padding: 0 0.4375rem 0 1.125rem; background: #FFFFFF; border: 1px solid #E4E8ED; border-radius: 999px; box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 10px 26px 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 class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 1rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
<button style="height: 46px; padding: 0 1.375rem; border: none; border-radius: 999px; background: #FF6A00; 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.4375rem; margin-top: 1.125rem;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9; margin-right: 0.125rem;">최근에 찾아봤어요</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 34px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; font-weight: 600;"><span style="width: 22px; height: 22px; border-radius: 999px; background: #DDE4EE;"></span>달빛조각사</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 34px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; font-weight: 600;"><span style="width: 22px; height: 22px; border-radius: 999px; background: #E5E0F0;"></span>칼든햄스터</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 34px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; font-weight: 600;"><span style="width: 22px; height: 22px; border-radius: 999px; background: #E7E3D8;"></span>새벽두시</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 34px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; font-weight: 600;"><span style="width: 22px; height: 22px; border-radius: 999px; background: #D8E6E2;"></span>무명연대장</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 두 열 그리드. 데스크톱과 순서를 하나 바꿨다 — 커뮤니티를 검색 랭킹 옆으로 올려 빈 칸을 없앤다 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; padding: 28px 24px 48px;">
|
||||
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">이벤트</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div style="border: 1px solid #EDEFF2; border-radius: 20px; 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.625rem; height: 52px;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #9BA1A9;">시즌 이벤트</span>
|
||||
<span style="width: 1px; height: 11px; background: #E4E8ED;"></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">서든 페스티벌 같이 갈래?</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9; white-space: nowrap;">9월 1일 ~ 9월 30일</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="width: 20px; 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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">검색 랭킹</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: 46px; 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 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.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: 46px; 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 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.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: 46px; 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 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.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: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">무명연대장</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">한밤의저격수</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.8125rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">조용한총잡이</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.8125rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">야간부대장</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.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: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">헤드샷장인</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">삼보급단골</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.8125rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">커뮤니티</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.625rem; margin-top: 0.875rem;">
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: #E4E8ED; overflow: hidden;">
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.375rem; height: 38px; padding: 0 0.625rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 18px; height: 18px; border-radius: 999px; background: #C9D2DD; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">달빛조각사</span><span style="font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">312</span></div>
|
||||
</div>
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: #EAE6E0; overflow: hidden;">
|
||||
<div style="position: absolute; top: 8px; right: 8px;"><svg width="15" height="15" 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.375rem; height: 38px; padding: 0 0.625rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 18px; height: 18px; border-radius: 999px; background: #D8D2C8; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">칼든햄스터</span><span style="font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">274</span></div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; aspect-ratio: 1 / 1; padding: 14px; border-radius: 16px; background: #F5F6F8;">
|
||||
<p style="margin: 0; font-size: 0.8125rem; line-height: 1.55; font-weight: 500;">폭파 삼보급 A 롱각, 다들 어디 서세요?</p>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;">
|
||||
<span style="width: 18px; height: 18px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600;">새벽두시</span>
|
||||
<span style="font-size: 0.6875rem; font-weight: 600; color: #5B6169;">198</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: #E8E4EC; overflow: hidden;">
|
||||
<div style="position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(20, 22, 26, 0.55);">
|
||||
<svg width="15" height="15" 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.375rem; height: 38px; padding: 0 0.625rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 18px; height: 18px; border-radius: 999px; background: #D5CEDC; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">무명연대장</span><span style="font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">163</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">게임 랭킹</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div class="seg">
|
||||
<span class="on">계급</span><span>랭크전</span><span>클랜</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="d-tab d-tab-on">통합</span><span class="d-tab">시즌</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">매일 오전 8시 갱신</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 34px; 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: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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.8125rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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.8125rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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.8125rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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="#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 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">10</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><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.8125rem; color: #12805C;">5</span></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1.125rem; 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 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">서든어택 소식</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;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<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;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<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;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정</span>
|
||||
</div>
|
||||
<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;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span>
|
||||
</div>
|
||||
<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;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">클랜전 매칭 로직 개선</span>
|
||||
</div>
|
||||
<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 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">서린즈 소식</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;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 열었어요</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<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;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">전적 갱신이 두 배 빨라졌어요</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<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;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">즐겨찾기 알림 기능 추가</span>
|
||||
</div>
|
||||
<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;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">8월 서버 점검 결과 보고</span>
|
||||
</div>
|
||||
<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;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">커뮤니티 이용 규칙 정리</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.24</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">모바일 화면을 다듬었어요</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.20</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">지금 방송 중</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem;">
|
||||
<div>
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 14px; 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; justify-content: center; gap: 1rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 96px; height: 56px; 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 class="d-clip" 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: 96px; height: 56px; 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 class="d-clip" 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: 96px; height: 56px; 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 class="d-clip" style="font-size: 0.75rem; color: #9BA1A9;">한밤의저격수 · 341명</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user