<header class="dc-ih">
<div class="dc-ih__media" role="img" aria-label="3공구 지하 1층 골조 전경 사진"></div>
<div class="dc-ih__scrim" aria-hidden="true"></div>
<div class="dc-ih__bar">
<button class="dc-ih__btn" type="button">
<span aria-hidden="true">‹</span><span class="dc-sr">뒤로</span>
</button>
<span class="dc-ih__spacer" aria-hidden="true"></span>
<button class="dc-ih__btn" type="button">
<span aria-hidden="true">♡</span><span class="dc-sr">저장</span>
</button>
<button class="dc-ih__btn" type="button">
<span aria-hidden="true">↗</span><span class="dc-sr">공유</span>
</button>
</div>
<div class="dc-ih__text">
<p class="dc-ih__eyebrow">현장 기록</p>
<h1 class="dc-ih__title">3공구 지하 1층 골조</h1>
<p class="dc-ih__meta">사진 24장 · 9월 11일 · 김도현</p>
</div>
</header>
.dc-ih {
/* 사진 위에 올라가는 글자와 배지는 두 테마에서 같은 쪽이어야 한다. 스크림이
밝은 모드에서도 어두우므로 글자는 늘 밝은 쪽, 배지 바탕은 늘 어두운 쪽이다.
고정색을 적는 대신 토큰을 양쪽에서 뒤집어 그 두 값을 만든다. */
--dc-on-media: var(--dc-text-on);
--dc-media-ink: var(--dc-text);
position: relative;
display: grid;
font-family: var(--dc-font);
isolation: isolate;
}
@media (prefers-color-scheme: dark) {
.dc-ih {
--dc-on-media: var(--dc-text);
--dc-media-ink: var(--dc-text-on);
}
}
.dc-ih__media {
grid-area: 1 / 1;
aspect-ratio: 4 / 3;
background:
radial-gradient(120% 90% at 22% 18%,
color-mix(in srgb, var(--dc-info) 55%, var(--dc-sunken)),
transparent 62%),
linear-gradient(160deg,
color-mix(in srgb, var(--dc-brand) 48%, var(--dc-sunken)),
var(--dc-sunken));
}
.dc-ih__scrim {
grid-area: 1 / 1;
background:
linear-gradient(to bottom,
color-mix(in srgb, var(--dc-overlay) 70%, transparent),
transparent 34%),
linear-gradient(to top,
var(--dc-overlay),
color-mix(in srgb, var(--dc-overlay) 40%, transparent) 46%,
transparent 72%);
}
.dc-ih__bar {
grid-area: 1 / 1;
align-self: start;
z-index: 1;
display: flex;
align-items: center;
gap: var(--dc-1);
padding: var(--dc-2);
padding-top: calc(var(--dc-safe-top) + var(--dc-2));
}
.dc-ih__btn {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: var(--dc-r-full);
background: color-mix(in srgb, var(--dc-media-ink) 38%, transparent);
color: var(--dc-on-media);
font-size: 19px;
line-height: 1;
backdrop-filter: blur(6px);
transition: background var(--dc-fast);
}
.dc-ih__btn:active { background: color-mix(in srgb, var(--dc-media-ink) 58%, transparent); }
.dc-ih__spacer { flex: 1 1 auto; }
.dc-ih__text {
grid-area: 1 / 1;
align-self: end;
z-index: 1;
display: grid;
gap: var(--dc-1);
padding: var(--dc-4);
color: var(--dc-on-media);
}
.dc-ih__eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
color: color-mix(in srgb, var(--dc-on-media) 82%, transparent);
}
.dc-ih__title {
font-size: 22px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -.02em;
}
.dc-ih__meta {
font-size: 13px;
color: color-mix(in srgb, var(--dc-on-media) 84%, transparent);
}
.dc-ih--tall .dc-ih__media { aspect-ratio: 3 / 4; }
.dc-ih--tall .dc-ih__title { font-size: 26px; }
.dc-ih--tall .dc-ih__text { padding: var(--dc-5) var(--dc-4) var(--dc-6); }
.dc-ih__sheet {
grid-area: 1 / 1;
align-self: end;
z-index: 1;
margin-top: var(--dc-8);
padding: var(--dc-4);
border-radius: var(--dc-r-lg) var(--dc-r-lg) 0 0;
background: var(--dc-surface);
color: var(--dc-text);
box-shadow: var(--dc-sh-2);
}
.dc-ih__sheet-title {
font-size: 18px;
font-weight: 700;
letter-spacing: -.01em;
}
.dc-ih__sheet-desc {
margin-top: var(--dc-1);
font-size: 13px;
line-height: 1.5;
color: var(--dc-text-sub);
}