/**
 * Landing v4 — 「요즘 피부과는 가격표를 만들지 않습니다」 (Figma 「메인화면 개선」 시안 B).
 * home.css(상단 바·버튼·푸터·등장 효과) 위에 얹는다. 새 섹션은 모두 .dh 안의 dh- 접두사.
 * 색·간격·반경·그림자는 design-tokens.css 만 쓴다(색 리터럴 0 — 로고 SVG 안쪽 브랜드색은 예외).
 */

/* ===== 공통 ===== */
.dh {
	--dh-ink: var(--dp-text-primary);
	--dh-sub: var(--dp-text-secondary);
	--dh-mute: var(--dp-text-muted);
	--dh-line: var(--dp-border-subtle);
	--dh-soft: var(--dp-neutral-50);
	--dh-blue: var(--dp-primary);
	--dh-blue-t: var(--dp-primary-100);
	--dh-dark: var(--dp-neutral-900);
	--dh-dark-line: color-mix(in srgb, var(--dp-neutral-0) 12%, transparent);
	--dh-dark-sub: var(--dp-neutral-400);
	--dh-hi: var(--dp-primary-300);
	--dh-card-shadow: 0 16px 40px color-mix(in srgb, var(--dp-shadow-color) 8%, transparent);
	background: var(--dh-soft);
}
/* home.css 가 .dp-home * 를 굵게 잡아 둔다 — 새 섹션은 굵기를 직접 정한다. */
.dh main p, .dh main span, .dh main li, .dh main s { font-weight: var(--dp-weight-regular); }
.dh main b { font-weight: var(--dp-weight-bold); }
.dh img { display: block; max-width: 100%; }
.dh ul { list-style: none; padding: 0; }
.dh .dp-nav__inner { max-width: 1248px; }

.dh-wrap { max-width: 1248px; margin: 0 auto; padding: 0 var(--dp-space-6); }
.dh-head { text-align: center; }
.dh-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--dp-space-8); text-align: left; }
.dh-head--split .dh-lead { text-align: right; }
.dh-kick {
	display: inline-flex; align-items: center; height: 30px; padding: 0 var(--dp-space-3-5);
	border-radius: var(--dp-radius-full); background: var(--dh-blue-t); color: var(--dh-blue);
	font-size: var(--dp-text-base); font-weight: var(--dp-weight-bold) !important; letter-spacing: var(--dp-tracking-tight);
}
.dh-kick--dark { background: color-mix(in srgb, var(--dp-primary) 22%, var(--dh-dark)); color: var(--dh-hi); }
.dh-kick--onblue { background: color-mix(in srgb, var(--dp-neutral-0) 16%, transparent); color: var(--dp-neutral-0); }
.dh-h2 {
	margin-top: var(--dp-space-4) !important; font-size: clamp(28px, 4vw, 44px); line-height: 1.3;
	letter-spacing: -0.02em; color: var(--dh-ink);
}
.dh-lead { margin-top: var(--dp-space-3-5) !important; font-size: var(--dp-text-xl); line-height: var(--dp-leading-relaxed); color: var(--dh-sub); }

.dh-pill {
	display: inline-flex; align-items: center; justify-content: center; height: 60px; padding: 0 var(--dp-space-8);
	border-radius: var(--dp-radius-full); font-size: var(--dp-text-2xl); font-weight: var(--dp-weight-bold); text-decoration: none;
}
.dh-pill--ghost { background: var(--dp-neutral-0); color: var(--dh-ink); border: 1px solid var(--dh-line); font-size: var(--dp-text-xl); }
.dh-pill--white { background: var(--dp-neutral-0); color: var(--dh-blue); margin-top: var(--dp-space-8); font-size: var(--dp-text-xl); box-shadow: var(--dp-shadow-md); }
.dh-pill--white:hover { background: var(--dp-primary-50); }

.dh-check { flex: none; }
.dh-check circle { fill: var(--dh-blue); }
.dh-check path { stroke: var(--dp-neutral-0); }
.dh-gpt-word { font-weight: var(--dp-weight-bold); letter-spacing: -0.02em; color: var(--dp-neutral-950); }

.dh-bubble {
	display: inline-block; max-width: 100%; padding: var(--dp-space-3) var(--dp-space-4-5, 18px);
	border-radius: 18px 18px 4px 18px; background: var(--dh-blue); color: var(--dp-neutral-0);
	font-size: var(--dp-text-xl); font-weight: var(--dp-weight-bold) !important; letter-spacing: -0.02em;
}
.dh-bubble--soft { background: var(--dh-soft); color: var(--dh-ink); border: 1px solid var(--dh-line); border-radius: 16px 16px 16px 4px; font-size: 17px; }

/* ===== 1. 첫 화면 ===== */
.dh-hero { padding: var(--dp-space-24) 0 var(--dp-space-20); text-align: center; background: var(--dh-soft); }
.dh-badge {
	display: inline-flex; align-items: center; gap: var(--dp-space-2-5); padding: var(--dp-space-2-5) var(--dp-space-5) var(--dp-space-2-5) 18px;
	border-radius: var(--dp-radius-full); background: var(--dp-neutral-0); border: 1px solid var(--dh-line);
	font-size: 15px; color: var(--dh-sub); font-weight: var(--dp-weight-medium) !important;
}
.dh-badge span { font-weight: var(--dp-weight-medium); }
.dh-badge__claude { height: 18px; width: auto; }
.dh-badge__text { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; }
.dh-badge__gpt { height: 18px; width: 18px; margin-right: var(--dp-space-1-5); }
.dh-badge .dh-gpt-word { font-size: var(--dp-text-lg); }
.dh-badge__dot { color: var(--dh-mute); }
.dh-hero__title { margin-top: var(--dp-space-6) !important; font-size: clamp(40px, 6vw, 84px); line-height: 1.22; letter-spacing: -0.03em; color: var(--dh-ink); }
.dh-hero__title span { color: var(--dh-blue); font-weight: inherit !important; }
.dh-hero__sub { margin-top: var(--dp-space-6) !important; font-size: clamp(17px, 1.6vw, 22px); color: var(--dh-sub); font-weight: var(--dp-weight-medium) !important; letter-spacing: -0.02em; }
.dh-hero__cta { display: flex; justify-content: center; gap: var(--dp-space-3); margin-top: var(--dp-space-8); flex-wrap: wrap; }

.dh-stage {
	position: relative; max-width: 1200px; height: 560px; margin: var(--dp-space-16) auto 0; text-align: left;
	border-radius: 32px; border: 1px solid var(--dh-line); overflow: hidden;
	background: linear-gradient(180deg, var(--dp-primary-50) 0%, var(--dh-soft) 100%);
}
.dh-stage__art { position: absolute; left: 50%; top: -20px; width: 610px; height: auto; transform: translateX(-50%); }
.dh-ask {
	position: absolute; left: 40px; bottom: 36px; width: 440px; padding: 22px var(--dp-space-6) var(--dp-space-6);
	border-radius: 20px; background: var(--dp-neutral-0); border: 1px solid var(--dh-line);
	box-shadow: 0 16px 40px color-mix(in srgb, var(--dp-shadow-color) 14%, transparent);
}
.dh-ask__head { display: flex; justify-content: space-between; align-items: center; }
.dh-ask__label { font-size: var(--dp-text-lg); font-weight: var(--dp-weight-medium) !important; color: var(--dh-blue); }
.dh-ask__logos { display: inline-flex; align-items: center; gap: var(--dp-space-2); color: var(--dh-mute); }
.dh-ask__logos img:first-child { height: 20px; width: auto; }
.dh-ask__logos img { height: 20px; width: 20px; }
.dh-ask__logos .dh-gpt-word { font-size: 17px; margin-left: -2px; }
.dh-ask__row { display: flex; justify-content: flex-end; margin-top: var(--dp-space-3-5); }
.dh-ask__cap { margin-top: var(--dp-space-3-5) !important; padding-top: var(--dp-space-3-5); border-top: 1px solid var(--dh-line); font-size: var(--dp-text-base); color: var(--dh-mute); }
.dh-ask__list li, .dh-outs li { display: flex; align-items: center; gap: var(--dp-space-2-5); margin-top: var(--dp-space-3); font-size: 17px; font-weight: var(--dp-weight-medium) !important; color: var(--dh-ink); }
.dh-outs { position: absolute; right: 40px; top: 90px; width: 330px; }
.dh-outs__label { font-size: var(--dp-text-base); font-weight: var(--dp-weight-bold) !important; color: var(--dh-sub); margin-left: 2px; }
.dh-outs li {
	height: 64px; padding: 0 22px; margin-top: var(--dp-space-3); border-radius: var(--dp-radius-2xl);
	background: var(--dp-neutral-0); border: 1px solid var(--dh-line); box-shadow: 0 12px 28px color-mix(in srgb, var(--dp-shadow-color) 8%, transparent);
}
.dh-outs li b { font-size: 17px; }
.dh-outs li span { margin-left: auto; font-size: var(--dp-text-sm); color: var(--dh-sub); }

/* ===== 2. 현장 ===== */
.dh-field { padding: var(--dp-space-24) 0 120px; background: var(--dh-dark); }
.dh-field .dh-h2 { color: var(--dp-neutral-0); }
.dh-field .dh-lead { color: var(--dh-dark-sub); }
.dh-field__list { margin-top: var(--dp-space-12) !important; border-bottom: 1px solid var(--dh-dark-line); }
.dh-field__row { display: grid; grid-template-columns: 680px 1fr; align-items: center; gap: var(--dp-space-6); padding: 34px 0; border-top: 1px solid var(--dh-dark-line); }
.dh-field__tag { font-size: var(--dp-text-sm); font-weight: var(--dp-weight-bold) !important; color: var(--dh-dark-sub); }
.dh-field__t { margin-top: var(--dp-space-2) !important; font-size: clamp(20px, 2vw, 26px); font-weight: var(--dp-weight-bold) !important; letter-spacing: -0.02em; color: var(--dp-neutral-0); }
.dh-field__t em {
	font-style: normal; color: var(--dh-hi);
	text-decoration: underline 3px color-mix(in srgb, var(--dh-hi) 55%, transparent); text-underline-offset: 6px;
}
.dh-field__b { font-size: 17px; line-height: var(--dp-leading-relaxed); color: var(--dh-dark-sub); }

/* ===== 3. AI 연결 ===== */
.dh-ai { padding: 120px 0; background: var(--dp-neutral-0); }
.dh-map {
	position: relative; display: grid; grid-template-columns: 330px minmax(48px, 1fr) 250px minmax(48px, 1fr) 320px;
	max-width: 1200px; height: 600px; margin: var(--dp-space-14, 56px) auto 0; padding: 0 40px;
	border-radius: 32px; background: var(--dh-soft); border: 1px solid var(--dh-line);
}
.dh-map__col { position: relative; height: 600px; }
.dh-step { position: absolute; top: 44px; left: 0; right: 0; font-size: var(--dp-text-2xl); font-weight: var(--dp-weight-bold) !important; letter-spacing: -0.02em; color: var(--dh-ink); }
.dh-step small { display: block; font-size: var(--dp-text-sm); font-weight: var(--dp-weight-bold); letter-spacing: .04em; color: var(--dh-blue); }
.dh-step--center { text-align: center; left: -40px; right: -40px; }
.dh-aicard {
	position: absolute; left: 0; right: 0; height: 180px; padding: 26px 26px 0;
	border-radius: 20px; background: var(--dp-neutral-0); border: 1px solid var(--dh-line); box-shadow: var(--dh-card-shadow);
}
.dh-aicard:nth-of-type(1) { top: 130px; }
.dh-aicard:nth-of-type(2) { top: 350px; }
.dh-aicard__claude { height: 34px; width: auto; }
.dh-aicard__gpt { display: flex; align-items: center; gap: var(--dp-space-2-5); height: 34px; }
.dh-aicard__gpt .dh-gpt-word { font-size: 26px; }
.dh-aicard .dh-bubble { margin-top: 18px; }
.dh-aicard__note { margin-top: var(--dp-space-2-5) !important; font-size: var(--dp-text-sm); color: var(--dh-mute); }
.dh-hub {
	position: absolute; top: 190px; left: 0; right: 0; height: 290px; padding: 34px 30px; text-align: center;
	border-radius: 28px; background: var(--dh-blue); box-shadow: 0 24px 56px color-mix(in srgb, var(--dp-primary) 32%, transparent);
	display: flex; flex-direction: column; align-items: center;
}
.dh-hub::after { /* 오른쪽으로 나가는 선의 시작점 */
	content: ""; position: absolute; right: -7px; top: 133px; width: 12px; height: 12px; border-radius: 50%;
	background: var(--dp-neutral-0); border: 2.5px solid var(--dh-blue);
}
.dh-hub__mark {
	display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 20px;
	background: var(--dp-neutral-0); color: var(--dh-blue); font-size: 34px; font-weight: var(--dp-weight-bold) !important;
}
.dh-hub__name { margin-top: var(--dp-space-4); font-size: var(--dp-text-4xl); color: var(--dp-neutral-0); letter-spacing: -0.02em; }
.dh-hub__url { margin-top: var(--dp-space-3); height: 32px; padding: 0 var(--dp-space-3-5); display: inline-flex; align-items: center; border-radius: var(--dp-radius-full); background: color-mix(in srgb, var(--dp-neutral-0) 18%, transparent); color: var(--dp-neutral-0); font-size: 15px; font-weight: var(--dp-weight-bold) !important; }
.dh-hub__note { margin-top: var(--dp-space-3-5); font-size: var(--dp-text-base); line-height: 1.6; color: var(--dp-primary-100); }
.dh-map__wire { width: 100%; height: 600px; overflow: visible; }
.dh-map__wire path { fill: none; stroke: var(--dh-blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.dh-map__wire--in path { stroke-dasharray: 7 7; stroke-linecap: round; }
.dh-map__wire--out path { stroke-width: 2; stroke-opacity: .55; }
.dh-outlist { position: absolute; top: 116px; left: 0; right: 0; }
.dh-outlist li {
	position: relative; display: flex; align-items: center; gap: var(--dp-space-3); height: 58px; margin-bottom: var(--dp-space-3-5); padding: 0 18px;
	border-radius: 14px; background: var(--dp-neutral-0); border: 1px solid var(--dh-line);
}
.dh-outlist li::before { content: ""; position: absolute; left: -5px; top: 24px; width: 9px; height: 9px; border-radius: 50%; background: var(--dh-blue); }
.dh-outlist b { font-size: 17px; }
.dh-outlist span { margin-left: auto; font-size: var(--dp-text-base); color: var(--dh-sub); }
.dh-safe { display: flex; justify-content: center; align-items: center; gap: var(--dp-space-2-5); margin-top: var(--dp-space-8) !important; font-size: var(--dp-text-lg); color: var(--dh-ink); }

/* ===== 4. 사용 사례 — 카드 3장 나열(모바일 세로) ===== */
.dh-cases { padding: 120px 0; background: var(--dh-soft); }
.dh-head--left { text-align: left; }
.dh-cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dp-space-6); margin-top: var(--dp-space-10); }
.dh-case {
	display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
	border-radius: 20px; background: var(--dp-neutral-0); border: 1px solid var(--dh-line); box-shadow: var(--dh-card-shadow);
	transition: transform var(--dp-duration-fast) var(--dp-ease-out), box-shadow var(--dp-duration-fast) var(--dp-ease-out);
}
.dh-case:hover { transform: translateY(-3px); box-shadow: 0 22px 48px color-mix(in srgb, var(--dp-shadow-color) 12%, transparent); }
.dh-case__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top left; }
.dh-case__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--dp-space-3-5); padding: var(--dp-space-6) 28px 30px; }
.dh-case__label {
	display: inline-flex; align-items: center; height: 30px; padding: 0 var(--dp-space-3-5); border-radius: var(--dp-radius-full);
	background: var(--dh-blue-t); color: var(--dh-blue); font-size: 15px; font-weight: var(--dp-weight-bold) !important; letter-spacing: -0.01em;
}
.dh-case__title { font-size: clamp(21px, 1.9vw, 25px); line-height: 1.4; letter-spacing: -0.02em; color: var(--dh-ink); }
.dh-case__title em {
	font-style: normal; color: var(--dh-blue);
	text-decoration: underline 3px color-mix(in srgb, var(--dh-blue) 30%, transparent); text-underline-offset: 6px;
}

/* ===== 5. 실제 화면 ===== */
.dh-screens { padding: 120px 0; background: var(--dp-neutral-0); }
.dh-tabs { display: flex; justify-content: center; gap: var(--dp-space-2); margin-top: var(--dp-space-10); flex-wrap: wrap; }
.dh-tab {
	height: 42px; padding: 0 var(--dp-space-5); border-radius: var(--dp-radius-full); cursor: pointer;
	background: var(--dp-neutral-0); border: 1px solid var(--dh-line); color: var(--dh-sub);
	font: inherit; font-size: var(--dp-text-lg); font-weight: var(--dp-weight-bold);
}
.dh-tab.is-on { background: var(--dh-ink); border-color: var(--dh-ink); color: var(--dp-neutral-0); }
.dh-browser { display: block; overflow: hidden; border-radius: 14px; background: var(--dp-neutral-0); border: 1px solid var(--dh-line); box-shadow: 0 20px 48px color-mix(in srgb, var(--dp-shadow-color) 10%, transparent); }
.dh-browser__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--dp-neutral-100); border-bottom: 1px solid var(--dh-line); }
.dh-browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--dp-neutral-300); }
.dh-browser__bar span { margin-left: 10px; height: 18px; padding: 0 10px; border-radius: 9px; background: var(--dp-neutral-0); font-size: 11px; color: var(--dh-mute); display: inline-flex; align-items: center; }
.dh-browser img { width: 100%; height: auto; aspect-ratio: 2400 / 1340; object-fit: cover; object-position: top; }
.dh-browser--big { max-width: 1200px; margin: 28px auto 0; }
.dh-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dp-space-5); max-width: 1200px; margin: 28px auto 0; }
.dh-thumb { display: block; padding: 0; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
.dh-thumb .dh-browser { box-shadow: var(--dp-shadow-md); transition: transform var(--dp-duration-fast) var(--dp-ease-out); }
.dh-thumb:hover .dh-browser { transform: translateY(-3px); }
.dh-thumb b { display: block; margin-top: var(--dp-space-3-5); font-size: var(--dp-text-lg); color: var(--dh-ink); }
.dh-thumb > span:last-child { display: block; margin-top: var(--dp-space-1); font-size: var(--dp-text-base); color: var(--dh-sub); }

/* ===== 6. 함께하는 병원 — 흐르는 띠 ===== */
.dh-partners { padding: 110px 0 100px; background: var(--dh-soft); }
.dh-marquee {
	position: relative; margin-top: 52px; height: 112px; overflow: hidden;
	border-top: 1px solid var(--dh-line); border-bottom: 1px solid var(--dh-line);
}
.dh-marquee::before, .dh-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 200px; z-index: 1; pointer-events: none; }
.dh-marquee::before { left: 0; background: linear-gradient(90deg, var(--dh-soft), transparent); }
.dh-marquee::after { right: 0; background: linear-gradient(270deg, var(--dh-soft), transparent); }
.dh-marquee__track { display: flex; width: max-content; height: 100%; animation: dh-marquee 42s linear infinite; }
.dh-marquee:hover .dh-marquee__track { animation-play-state: paused; }
.dh-marquee__list { display: flex; align-items: center; gap: 84px; padding-right: 84px; }
.dh-marquee__list img { max-width: none; height: auto; }
@keyframes dh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== 7. 요금 ===== */
.dh-price { padding: var(--dp-space-24) 0; background: var(--dh-blue); }
.dh-price__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--dp-space-10); }
.dh-price__big { margin-top: var(--dp-space-4) !important; font-size: clamp(48px, 6vw, 80px); line-height: 1.1; font-weight: var(--dp-weight-bold) !important; letter-spacing: -0.03em; color: var(--dp-neutral-0); }
.dh-price__sub { margin-top: var(--dp-space-2) !important; font-size: 19px; line-height: var(--dp-leading-relaxed); color: var(--dp-primary-100); }
.dh-price__card {
	width: 560px; padding: 30px 40px; border-radius: var(--dp-radius-3xl);
	background: color-mix(in srgb, var(--dp-neutral-0) 10%, transparent); border: 1px solid color-mix(in srgb, var(--dp-neutral-0) 22%, transparent);
}
.dh-price__plan { font-size: var(--dp-text-base); font-weight: var(--dp-weight-bold) !important; letter-spacing: .12em; color: var(--dp-primary-100); margin-bottom: var(--dp-space-2) !important; }
.dh-price__card li { display: flex; align-items: center; gap: var(--dp-space-3); padding: 9px 0; font-size: 17px; color: var(--dp-neutral-0); }
.dh-price__card .dh-check circle { fill: var(--dp-neutral-0); }
.dh-price__card .dh-check path { stroke: var(--dh-blue); }

/* ===== 반응형 ===== */
@media (max-width: 1080px) {
	/* AI 구조도: 세로로 쌓고 선 대신 아래 화살표 */
	.dh-map { display: flex; flex-direction: column; align-items: stretch; height: auto; padding: var(--dp-space-8) var(--dp-space-6); gap: var(--dp-space-4); }
	.dh-map__wire { display: none; }
	.dh-map__col { height: auto; }
	.dh-step, .dh-aicard, .dh-hub, .dh-outlist { position: static; }
	.dh-step { margin-bottom: var(--dp-space-3) !important; }
	.dh-step--center { text-align: left; }
	.dh-map__col--ai { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dp-space-4); }
	.dh-map__col--ai .dh-step { grid-column: 1 / -1; }
	.dh-aicard { height: auto; padding-bottom: var(--dp-space-6); }
	.dh-hub { height: auto; max-width: 360px; width: 100%; margin: 0 auto; }
	.dh-hub::after { display: none; }
	.dh-map__col--hub::before, .dh-map__col--out::before {
		content: "↓"; display: block; text-align: center; font-size: var(--dp-text-3xl); line-height: 1; color: var(--dh-blue); margin-bottom: var(--dp-space-3);
	}
	.dh-outlist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--dp-space-3-5); }
	.dh-outlist li::before { display: none; }
}

@media (max-width: 1024px) {
	.dh-stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--dp-space-5); padding: var(--dp-space-6); align-items: end; }
	.dh-stage__art { position: static; transform: none; grid-column: 1 / -1; width: min(100%, 460px); margin: -20px auto -40px; }
	.dh-ask, .dh-outs { position: static; width: auto; }
	.dh-outs li { height: 54px; margin-top: var(--dp-space-2-5); }
	.dh-field__row { grid-template-columns: 1fr; gap: var(--dp-space-2); padding: 26px 0; }
	.dh-cases__grid { gap: var(--dp-space-4); }
	.dh-case__body { padding: var(--dp-space-5) var(--dp-space-5) var(--dp-space-6); }
	.dh-price__inner { flex-direction: column; align-items: flex-start; }
	.dh-price__card { width: 100%; }
}

@media (max-width: 720px) {
	.dh-hero { padding: var(--dp-space-12) 0 var(--dp-space-12); }
	.dh-badge { flex-wrap: wrap; justify-content: center; border-radius: var(--dp-radius-2xl); font-size: var(--dp-text-sm); }
	.dh-hero__title { font-size: clamp(32px, 9vw, 40px); }
	.dh-pill { height: 52px; padding: 0 var(--dp-space-6); font-size: var(--dp-text-lg); }
	.dh-stage { grid-template-columns: 1fr; border-radius: var(--dp-radius-3xl); padding: var(--dp-space-4); margin-top: var(--dp-space-10); }
	.dh-ask { padding: var(--dp-space-5) var(--dp-space-4); }
	.dh-ask__head { flex-wrap: wrap; gap: var(--dp-space-2); }
	.dh-bubble { font-size: var(--dp-text-lg); }
	.dh-ask__list li, .dh-outs li { font-size: 15px; }
	.dh-head--split { flex-direction: column; align-items: flex-start; gap: 0; }
	.dh-head--split .dh-lead { text-align: left; }
	.dh-lead { font-size: var(--dp-text-lg); }
	.dh-lead br { display: none; }
	.dh-field, .dh-ai, .dh-cases, .dh-screens { padding: var(--dp-space-16) 0; }
	.dh-field__b br { display: none; }
	.dh-map { border-radius: var(--dp-radius-3xl); padding: var(--dp-space-5) var(--dp-space-4); }
	.dh-map__col--ai, .dh-outlist { grid-template-columns: 1fr; }
	.dh-cases__grid { grid-template-columns: 1fr; gap: var(--dp-space-5); }
	.dh-case__title { font-size: 22px; }
	.dh-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: var(--dp-space-1); }
	.dh-tab { flex: none; }
	.dh-thumbs { grid-template-columns: 1fr 1fr; gap: var(--dp-space-4); }
	.dh-thumb > span:last-child { font-size: var(--dp-text-sm); }
	.dh-partners { padding: var(--dp-space-16) 0; }
	.dh-partners .dh-head { padding: 0 var(--dp-space-4); }
	.dh-marquee { height: 84px; margin-top: var(--dp-space-8); }
	.dh-marquee::before, .dh-marquee::after { width: 56px; }
	.dh-marquee__list { gap: 48px; padding-right: 48px; }
	.dh-marquee__list img { transform: scale(.8); }
	.dh-price { padding: var(--dp-space-16) 0; }
	.dh-price__card { padding: var(--dp-space-6) var(--dp-space-5); }
	.dh-price__card li { font-size: 15px; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.dh-marquee__track { animation: none; }
	.dh-case, .dh-thumb .dh-browser { transition: none; }
}