/* =====================================================================
* NLOA · Lostark · 캐릭터 페이지 (/lostark/char)
* 공용 ../style.css의 디자인 토큰 위에 캐릭터 페이지 고유 UI를 정의합니다.
* 기존 scripts.js와 호환되도록 ID와 data-slot 속성은 그대로 유지합니다.
* ===================================================================== */
/* ---------- 페이지 전용 토큰 ----------
* --num-rounded: 숫자(레벨/포인트 등) 전용 라운디드 폰트.
* IBM Plex Mono/Serif가 너무 각진 느낌을 줘서 특성·각인·아크그리드·아크패시브의
* 숫자 표시에만 사용. 한글은 IBM Plex Sans KR이 fallback으로 받음.
*/
:root {
--num-rounded: "Nunito", "IBM Plex Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
}
/* ---------- 페이지 헤드 (제목 + 검색) ---------- */
.page-head {
display: grid;
grid-template-columns: 1fr minmax(280px, 420px);
gap: 28px;
align-items: center;
margin-bottom: 28px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line-soft);
animation: rise 0.6s ease both;
}
.page-head-left {
min-width: 0;
}
.hero-eyebrow {
font-family: var(--sans);
font-size: 14px;
letter-spacing: 0.18em;
color: var(--accent-deep);
font-weight: 600;
margin: 0;
display: inline-flex;
align-items: center;
gap: 12px;
}
.hero-eyebrow::before {
content: "";
width: 22px;
height: 1px;
background: var(--accent);
}
/* 검색 폼 — 공용 .search-shell 위에 검색 버튼 추가 */
.search-shell {
position: relative;
width: 100%;
}
.search-submit {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
height: calc(100% - 12px);
padding: 0 16px;
border: 0;
border-radius: 10px;
background: var(--accent);
color: #fff;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
transition: background 0.2s ease;
}
.search-submit:hover {
background: var(--accent-deep);
}
/* ---------- 본문 레이아웃 ---------- */
.char-layout {
display: grid;
grid-template-columns: 360px 1fr;
gap: 18px;
align-items: start;
animation: rise 0.6s 0.08s ease both;
}
.char-left,
.char-right {
display: grid;
gap: 18px;
align-content: start;
min-width: 0;
}
/* ---------- 카드 공통 (페이지 전용 보정) ---------- */
.card.info-card {
padding: 22px;
}
.info-block {
margin-bottom: 10px;
}
.info-block:last-child {
margin-bottom: 0;
}
/* 섹션 작은 헤더 — 핑크/하늘 알약 라벨 */
.sub-head {
display: block;
margin-bottom: 14px;
}
/* 라벨 — 한글 가독성을 위해 sans + 살짝 키움 */
.sub-head .label-pill {
font-family: var(--sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
padding: 5px 13px;
}
/* ---------- 캐릭터 카드 ---------- */
.character-card {
position: relative;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* 상단: 캐릭터 이미지 영역 — 카드의 위쪽 절반 정도 */
.character-bg-wrap {
position: relative;
width: 100%;
/* 이미지 영역 비율을 고정해 위가 비어 보이는 느낌을 줄임 */
aspect-ratio: 4 / 3;
overflow: hidden;
background: linear-gradient(180deg, var(--bg-tint), var(--bg-elev));
}
.character-bg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
/* 하단(stats/meta)으로 자연스럽게 이어지도록 아래쪽만 살짝 어둡게 */
.character-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0.55) 100%
);
pointer-events: none;
}
[data-theme="dark"] .character-overlay {
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0.65) 100%
);
}
/* Lv·직업·이름은 이미지 위 좌상단에 절대 배치 */
.character-top {
position: absolute;
top: 18px;
left: 22px;
right: 22px;
z-index: 1;
line-height: 1.2;
color: #fff;
/* 어두운 배경 글로우 — 항상 가독성 확보 */
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.character-sub {
/* Lv.70 바드 — sans + 깔끔하게 */
font-family: var(--sans);
font-size: 13px;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
margin-bottom: 4px;
}
.character-name {
/* 늘하양 — 다른 영역과 톤 일치를 위해 sans, 살짝 굵게 */
font-family: var(--sans);
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
/* 하단: stats + meta는 흰 배경 위 검은 글씨로 — 다른 카드와 톤 일치 */
.character-content {
/* position: relative를 지정하면 자식인 .character-top(absolute)이 여기 기준이 되어
stats 박스 위로 겹친다. .character-card(이미 relative)를 기준으로 잡히도록 둠. */
padding: 20px 22px 22px;
background: var(--bg-elev);
display: flex;
flex-direction: column;
gap: 16px;
}
.character-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.stat-block {
padding: 12px 14px;
background: var(--accent-soft);
border: 1px solid var(--accent);
border-radius: 10px;
}
.stat-label {
/* 한글 라벨이 mono로 가니까 흐릿해 보였음. sans + 굵게로 또렷하게. */
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-soft);
font-weight: 600;
margin-bottom: 6px;
}
.stat-value {
/* 명조체(--serif) → 라운디드. 다른 숫자들과 톤 일치 + 크기 한 단계 축소. */
font-family: var(--num-rounded);
font-weight: 700;
font-size: 19px;
color: var(--ink);
letter-spacing: -0.01em;
}
.stat-value.primary {
/* 두 박스 모두 핑크 배경이라 글씨는 통일된 검정(ink)로 */
color: var(--ink);
}
.character-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 18px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.meta-row {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 13px;
}
.meta-label {
/* 한글 라벨이 mono로 가면 흐릿함. sans + 굵게로. */
color: var(--ink-soft);
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
}
.meta-value {
color: var(--ink);
font-weight: 500;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---------- 특성 (Trait) ---------- */
.trait-box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.trait-item {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 12px;
text-align: center;
}
.trait-item.total {
background: var(--accent-soft);
border-color: var(--accent);
}
.trait-label {
display: block;
/* 한글 라벨 — sans로 또렷하게 */
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0;
color: var(--ink-soft);
font-weight: 600;
margin-bottom: 6px;
}
.trait-item.total .trait-label {
color: var(--accent-deep);
}
.trait-value {
display: block;
font-family: var(--num-rounded);
font-size: 20px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
}
.trait-item.total .trait-value {
color: var(--accent-deep);
}
/* ---------- 각인 (Engraving) ----------
* scripts.js renderEngravings()가 생성하는 구조:
*
*
![]()
*
전문의
*
Lv. 2 ← 어빌리티 스톤 (하늘)
*
4 ← 유물서 (핑크)
*
*
* 질서의 해 코어 : 아리아 엑센트
* 20P
*
* grade-XXX 클래스로 코어 등급별 색상이 결정됩니다.
*/
.ark-box {
display: grid;
gap: 3px;
}
.ark-item {
display: grid;
grid-template-columns: 24px 1fr auto;
align-items: center;
gap: 12px;
padding: 2px 2px;
}
.ark-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-block;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
flex: 0 0 24px;
}
.ark-name {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
line-height: 1.3;
color: var(--ink);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
min-width: 0;
}
.ark-core {
/* 기본색 - grade 클래스가 덮어씁니다 */
color: var(--ink);
}
.ark-point {
min-width: 36px;
text-align: right;
font-family: var(--num-rounded);
font-size: 15px;
font-weight: 700;
color: var(--ink);
}
/* 코어 등급별 색상 (질서/혼돈 + 해/달/별 별 어울리는 톤) */
.grade-ancient {
color: oklch(0.72 0.1 75);
} /* 약간 어두운 베이지·금 */
.grade-relic {
color: oklch(0.62 0.17 42);
} /* 진한 주황~갈색 */
.grade-legend {
color: oklch(0.78 0.16 82);
} /* 노랑~주황 */
.grade-epic {
color: oklch(0.6 0.21 305);
} /* 보라 */
[data-theme="dark"] .grade-ancient {
color: oklch(0.82 0.1 75);
}
[data-theme="dark"] .grade-relic {
color: oklch(0.74 0.17 42);
}
[data-theme="dark"] .grade-legend {
color: oklch(0.88 0.16 82);
}
[data-theme="dark"] .grade-epic {
color: oklch(0.74 0.21 305);
}
/* ---------- 장비 영역 ----------
* 사진 디자인 의도:
* - 카드처럼 두툼한 외곽선이 아니라 "균일한 행"으로 깔끔히 정렬
* - 좌측: 장비 6개 + 보주, 우측: 악세사리 7개
* - 이름은 일괄 황금/주황 톤 (등급 색 컨벤션)
* - 메타·품질은 작은 사각 배지
*/
.equip-area {
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: 20px;
/* 두 컬럼이 같은 높이를 갖도록 stretch — 짧은 쪽은 내부에서 행 간격이 늘어남 */
align-items: stretch;
}
.equip-left,
.equip-right {
display: grid;
gap: 6px;
min-width: 0;
/* space-between으로 깔리면, 짧은 쪽 컬럼은 행 사이가 균등하게 벌어지며
긴 쪽과 같은 세로 길이를 차지하게 됨 */
align-content: space-between;
}
/* 장비 카드 (방어구·무기·보주) — 2열 단순 행 */
.equip-card {
display: grid;
grid-template-columns: 46px 1fr;
align-items: center;
gap: 10px;
padding: 3px 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
transition: none;
}
.equip-card:hover {
background: transparent;
border: 0;
}
.equip-icon-wrap {
position: relative;
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 8px;
overflow: hidden;
/* 골드 그라데이션 — 등급 프레임 느낌 */
background: linear-gradient(135deg, #3d3325, #dcc999);
border: 0;
}
.equip-icon-img {
position: static;
width: 100%;
height: 100%;
inset: auto;
object-fit: cover;
border-radius: 6px;
z-index: 1;
display: block;
}
.equip-icon-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
opacity: 1;
}
.equip-info {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
}
/* 이름 — 일괄 황금 톤 (게임 컨벤션) */
.equip-name {
font-family: var(--sans);
font-size: 13px;
font-weight: 700;
color: #b88a2e;
line-height: 1.2;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="dark"] .equip-name {
color: #d6a847;
}
.equip-meta-row {
display: flex;
align-items: center;
gap: 4px;
margin-top: 1px;
}
/* 품질 배지 — 작은 사각 (숫자만 표시) */
.equip-quality {
min-width: 28px;
height: 18px;
padding: 0 6px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--num-rounded);
font-size: 11px;
font-weight: 700;
line-height: 1;
background: var(--line);
color: var(--ink-soft);
}
/* 레벨 / 일반 메타 — 작은 회색 배지 */
.equip-meta {
min-width: 35px;
height: 18px;
padding: 0 4px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--line-soft);
color: var(--ink-soft);
font-family: var(--num-rounded);
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.02em;
}
[data-theme="dark"] .equip-meta {
background: var(--line);
}
/* 악세사리 카드 (목걸이/귀걸이/반지/스톤/팔찌) — 3열: 아이콘 + 이름·메타 + 옵션 */
.accessory-card {
display: grid;
grid-template-columns: 42px 115px 1fr;
align-items: center;
gap: 8px;
padding: 3px 0;
background: transparent;
border: 0;
border-radius: 0;
min-width: 0;
}
.accessory-icon {
width: 42px;
height: 42px;
object-fit: cover;
border-radius: 6px;
display: block;
background: linear-gradient(135deg, #3d3325, #dcc999);
border: 0;
}
/* 옵션 영역 — 우측 컬럼에 가로 배치 (3열 그리드의 3번째 칼럼) */
.equip-options {
display: grid;
gap: 2px;
min-width: 0;
align-content: center;
padding-top: 0;
grid-column: auto;
margin-top: 0;
}
/* 보주(orb) 카드 — 옵션이 카드 폭을 모두 쓰는 변형 */
.orb-card {
grid-template-columns: 44px 1fr;
gap: 10px;
align-items: center;
}
.orb-card .equip-options {
grid-column: 1 / -1;
margin-top: 4px;
}
/* 스톤 카드 — 3열 같은 라인 (어빌리티 스톤 옵션이 아래로 떨어지지 않도록) */
.stone-card {
grid-template-columns: 42px 115px 1fr;
align-items: center;
gap: 8px;
}
.stone-info {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
.stone-extra {
margin-top: 2px;
display: flex;
gap: 8px;
}
/* ---------- 옵션 영역 (악세사리/스톤/팔찌) ----------
* scripts.js가 생성하는 구조:
*
*
* 옵션 텍스트
*
* 또는:
*
* 신속
* +100
*
*
* 배지 컬러 의미 (게임 컨벤션):
* option-orange = 상급(3)
* option-blue = 하급(1)
* option-gray = 중급
* badge-none = 표시 없음
*/
.option-line {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
font-size: 11.5px;
color: var(--ink-soft);
line-height: 1.35;
}
.option-badge {
/* 한글 "상/중/하"가 들어가는 배지라 너무 작으면 안 보임. 사이즈 키움. */
width: 16px;
min-width: 16px;
height: 16px;
padding: 0;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--sans);
font-size: 11px;
font-weight: 700;
line-height: 1;
color: #fff;
flex: 0 0 16px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
background: var(--ink-faint);
letter-spacing: 0;
}
/* 악세사리 옵션 등급 — scripts.js가 quality-* 클래스로 색 입힘 (상=황금, 중=보라, 하=하늘) */
.option-badge.quality-legend {
background: oklch(0.802 0.1674 78);
color: #fff;
}
.option-badge.quality-epic {
background: oklch(0.5449 0.218 296);
color: #fff;
}
.option-badge.quality-high {
background: oklch(0.7224 0.1479 238);
color: #fff;
}
/* 스톤 옵션 — 숫자(1/2/3) 표시 */
.option-badge.option-orange {
background: #d97706;
}
.option-badge.option-blue {
background: var(--accent-sky-deep);
}
.option-badge.option-gray {
background: var(--ink-faint);
}
.option-badge.option-sup,
.option-badge.option-atk {
background: #f59e0b;
}
/* 표시 없음 — 투명 자리 유지 */
.option-badge.badge-none {
background: transparent;
box-shadow: none;
color: var(--ink-faint);
}
.option-text {
/* 사이즈 한 단계 키우고 색·굵기를 또렷하게 */
font-size: 11px;
font-weight: 500;
color: var(--ink);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.option-text b {
color: var(--accent-deep);
font-weight: 700;
}
.option-name {
color: var(--ink);
font-weight: 600;
}
.option-value {
margin-left: 3px;
/* 값은 라운디드로 또렷하게 — 다른 숫자들과 톤 일치 */
font-family: var(--num-rounded);
font-weight: 700;
}
.option-line:empty,
.option-line .option-text:empty {
display: none;
}
/* 활력 텍스트 라벨 — "활력 +N" 형태로 표시 */
.stone-vitality:not(:empty)::before {
content: "활력 ";
color: var(--ink-soft);
}
/* ---------- 보석 (Gem) ----------
* scripts.js renderGems()가 생성하는 구조:
*
*
*
![]()
*
![]()
← 우측 하단 작은 스킬 아이콘 (선택)
*
*
10
*
*
*
*
진화
*
140
*
6랭크 25레벨
*
*
*
![]()
*
특화
*
Lv.10
*
* ...
*
*
*
깨달음
*
도약
*
*