@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@500;600;700&display=swap');

:root {
	--dkb-ink: #2f241f;
	--dkb-muted: #75675f;
	--dkb-walnut: #5a3526;
	--dkb-padauk: #8b3f2a;
	--dkb-maple: #f3eadb;
	--dkb-paper: #faf8f4;
	--dkb-line: #ded6ca;
}

html { scroll-behavior: smooth; }
body, input, select, textarea { font-family: 'Noto Sans KR', sans-serif; color: var(--dkb-ink); }
body { background: var(--dkb-paper); }
h1, h2, h3, h4, h5, h6 { font-family: 'Noto Serif KR', serif; color: var(--dkb-ink); letter-spacing: -0.02em; }
a { border-bottom-color: rgba(90, 53, 38, 0.3); color: var(--dkb-walnut); }
a:hover { color: var(--dkb-padauk) !important; }
#header { background: rgba(250, 248, 244, 0.96); border-bottom-color: var(--dkb-line); }
#header h1 a { font-family: 'Noto Serif KR', serif; letter-spacing: 0.08em; }
#header .links { border-left-color: var(--dkb-line); }
#header .links ul li { border-left-color: var(--dkb-line); }
#header .main ul li { border-left-color: var(--dkb-line); }
#wrapper { max-width: 92rem; }
.post { border-color: var(--dkb-line); box-shadow: 0 18px 50px rgba(60, 38, 25, 0.05); }
.post > header { border-bottom-color: var(--dkb-line); }
.post > header .title h2 { font-size: 1.8em; line-height: 1.45; letter-spacing: -0.03em; }
.hero-post > header .title h2 { font-size: 2.55em; }
.post > header .meta { border-left-color: var(--dkb-line); color: var(--dkb-muted); min-width: 13rem; }
.post > header .meta span { display: block; }
.post > header .meta .price { color: var(--dkb-padauk); font-family: 'Noto Serif KR', serif; font-size: 1.15rem; font-weight: 700; margin-bottom: 0.55rem; }
.eyebrow { color: var(--dkb-padauk) !important; font-size: 0.72rem !important; font-weight: 600; letter-spacing: 0.16em !important; margin-bottom: 0.8rem !important; }
.lead { font-family: 'Noto Serif KR', serif; font-size: 1.08rem; line-height: 2; }
.image.featured img { max-height: 38rem; object-fit: cover; }
.hero-post .image.featured img { object-position: center 48%; }
.dark-image { background: #171513; }
.button { border-color: var(--dkb-line) !important; color: var(--dkb-walnut) !important; font-family: 'Noto Sans KR', sans-serif; letter-spacing: 0.06em; }
.button:hover { border-color: var(--dkb-padauk) !important; color: var(--dkb-padauk) !important; }
.button.primary { background: var(--dkb-walnut); border-color: var(--dkb-walnut) !important; box-shadow: none; color: white !important; }
.button.primary:hover { background: var(--dkb-padauk); color: white !important; }
.product-specs { border-bottom: solid 1px var(--dkb-line); border-top: solid 1px var(--dkb-line); list-style: none; margin: 2rem 0; padding: 1rem 0; }
.product-specs li { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 0.5rem 0; }
.product-specs strong { color: var(--dkb-walnut); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 2rem 0; }
.detail-grid img { aspect-ratio: 4 / 3; height: 100%; object-fit: cover; width: 100%; }
#intro .logo-mark { border: 0; display: block; height: 7rem; overflow: hidden; width: 7rem; }
#intro .logo-mark span { display: block; height: 100%; overflow: hidden; position: relative; width: 100%; }
#intro .logo-mark img { height: auto; left: -7%; max-width: none; position: absolute; top: -4%; width: 114%; }
#intro header h2 { letter-spacing: 0.08em; }
#intro header p { color: var(--dkb-muted); letter-spacing: 0.18em; }
.brand-note { border-top: solid 1px var(--dkb-line); padding-top: 2rem; }
#sidebar > * { border-top-color: var(--dkb-line); }
#sidebar .actions.stacked li + li { margin-top: 0.7rem; }
.upcoming { background: var(--dkb-maple); }
#footer .icons a { color: var(--dkb-walnut); }

@media screen and (max-width: 980px) {
	.hero-post > header .title h2 { font-size: 2.1em; }
	.post > header .meta { min-width: 0; }
}

@media screen and (max-width: 736px) {
	.post > header .title h2, .hero-post > header .title h2 { font-size: 1.65em; }
	.post > header .meta { align-items: flex-start; text-align: left; }
	.detail-grid { grid-template-columns: 1fr; }
	.product-specs li { grid-template-columns: 4.5rem 1fr; }
	.actions { align-items: stretch; flex-direction: column; }
	.actions li { padding: 0 0 0.75rem 0 !important; }
	.actions .button { width: 100%; }
}