<header class="dc-ph">
<div class="dc-ph__top">
<span class="dc-ph__avatar" aria-hidden="true">김</span>
<dl class="dc-ph__stats">
<div class="dc-ph__stat">
<dt class="dc-ph__stat-k">기록</dt>
<dd class="dc-ph__stat-v">128</dd>
</div>
<div class="dc-ph__stat">
<dt class="dc-ph__stat-k">팔로워</dt>
<dd class="dc-ph__stat-v">2,410</dd>
</div>
<div class="dc-ph__stat">
<dt class="dc-ph__stat-k">팔로잉</dt>
<dd class="dc-ph__stat-v">86</dd>
</div>
</dl>
</div>
<div class="dc-ph__ident">
<h1 class="dc-ph__name">김도현</h1>
<p class="dc-ph__handle">@dohyun · 3공구 현장 기사</p>
<p class="dc-ph__bio">타설·양생 기록 담당입니다. 사진은 매일 퇴근 전에 올립니다.</p>
</div>
<div class="dc-ph__actions">
<button class="dc-ph__btn dc-ph__btn--primary" type="button">팔로우</button>
<button class="dc-ph__btn" type="button">메시지</button>
<button class="dc-ph__icon" type="button">
<span aria-hidden="true">⋮</span><span class="dc-sr">더보기</span>
</button>
</div>
</header>
.dc-ph {
/* 사진 위에 올라가는 글자와 배지는 두 테마에서 같은 쪽이어야 한다. 스크림이
밝은 모드에서도 어두우므로 글자는 늘 밝은 쪽, 배지 바탕은 늘 어두운 쪽이다.
고정색을 적는 대신 토큰을 양쪽에서 뒤집어 그 두 값을 만든다. */
--dc-on-media: var(--dc-text-on);
display: grid;
gap: var(--dc-4);
padding: var(--dc-4);
background: var(--dc-surface);
border-bottom: 1px solid var(--dc-line);
font-family: var(--dc-font);
}
@media (prefers-color-scheme: dark) {
.dc-ph {
--dc-on-media: var(--dc-text);
}
}
.dc-ph__top {
display: flex;
align-items: center;
gap: var(--dc-4);
}
.dc-ph__avatar {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 72px;
height: 72px;
border-radius: var(--dc-r-full);
background: linear-gradient(135deg,
color-mix(in srgb, var(--dc-brand) 72%, var(--dc-sunken)),
color-mix(in srgb, var(--dc-info) 58%, var(--dc-sunken)));
color: var(--dc-on-media);
font-size: 26px;
font-weight: 700;
}
.dc-ph__stats {
flex: 1 1 auto;
display: flex;
justify-content: space-around;
gap: var(--dc-2);
margin: 0;
}
.dc-ph__stat {
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 2px;
min-width: 56px;
}
.dc-ph__stat-k {
font-size: 12px;
color: var(--dc-text-sub);
}
.dc-ph__stat-v {
margin: 0;
font-size: 17px;
font-weight: 700;
letter-spacing: -.01em;
color: var(--dc-text);
}
.dc-ph__ident { display: grid; gap: var(--dc-1); }
.dc-ph__name {
font-size: 19px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--dc-text);
}
.dc-ph__handle {
font-size: 13px;
color: var(--dc-text-mute);
}
.dc-ph__bio {
font-size: 14px;
line-height: 1.5;
color: var(--dc-text-sub);
}
.dc-ph__actions {
display: flex;
align-items: center;
gap: var(--dc-2);
}
.dc-ph__btn {
flex: 1 1 0;
min-width: 0;
height: 44px;
padding: 0 var(--dc-3);
border: 1px solid var(--dc-line-field);
border-radius: var(--dc-r-sm);
background: var(--dc-surface);
color: var(--dc-text);
font-size: 15px;
font-weight: 700;
transition: background var(--dc-fast);
}
.dc-ph__btn:active { background: var(--dc-sunken); }
.dc-ph__btn--primary {
border-color: transparent;
background: var(--dc-brand);
color: var(--dc-text-on);
}
.dc-ph__btn--primary:active { background: var(--dc-brand-hi); }
.dc-ph__btn--wide { flex: 1 1 100%; }
.dc-ph__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--dc-line-field);
border-radius: var(--dc-r-sm);
background: var(--dc-surface);
color: var(--dc-text);
font-size: 18px;
line-height: 1;
}
.dc-ph__icon:active { background: var(--dc-sunken); }
.dc-ph--cover { gap: 0; padding: 0; }
.dc-ph__cover {
height: 132px;
background:
radial-gradient(120% 90% at 78% 20%,
color-mix(in srgb, var(--dc-ok) 46%, var(--dc-sunken)),
transparent 60%),
linear-gradient(150deg,
color-mix(in srgb, var(--dc-brand) 46%, var(--dc-sunken)),
var(--dc-sunken));
}
.dc-ph--cover .dc-ph__top {
margin-top: calc(-1 * var(--dc-8));
padding: 0 var(--dc-4);
align-items: flex-end;
}
.dc-ph--cover .dc-ph__avatar {
width: 84px;
height: 84px;
border: 3px solid var(--dc-surface);
box-shadow: var(--dc-sh-2);
}
.dc-ph--cover .dc-ph__ident { padding: var(--dc-4) var(--dc-4) 0; }
.dc-ph--cover .dc-ph__actions { padding: var(--dc-4); }