:root {
	--c-ink: #1a1a1a;
	--c-bg: #f3eee8;
	--c-surface: #f3eee8;
	--c-surface-alt: #f3eee8;
	--c-on-dark: #f6f1eb;
	--c-muted: #6b6257;
	/* audit-1/2/3/4/5/6: every measured Figma "body" text node resolves to the same colour as
	   --c-muted (#6b6257), not a distinct darker brown — fixed at the token so every call site
	   using var(--c-body) (card-row, concern-list, intro-split, brand-intro, process-steps…)
	   corrects in one place. */
	--c-body: #6b6257;
	--c-accent: #948474;
	--c-btn: #936f57;
	--c-card: #e9e7e1;
	/* audit-3 (space/board rules), audit-6 (tag pill / rule borders): every measured divider is a
	   solid stroke, not a translucent ink tint. */
	--c-line: #d3ccc5;
	--c-hero-overlay: rgba(51, 35, 20, .5); /* cat-lift-contour.md §1: page-hero dark overlay */
	--t-hero: 76px;
	--t-h2: 48px;
	--t-h3: 30px;
	--t-small: 13px;
	--t-localized-hours: clamp(14px, 4.4vw, 16px);
	--t-caps: 11px;
	--r-sm: 2px;
	--r-pill: 999px;
	--f-display: "Libertinus Sans";
	--f-ui: "Pretendard";
	--f-body: "Noto Sans KR";
	--maxw: 1440px;
	--maxw-legal: 760px;
	--section-y: 100px;
	--doctor-credential-gap: 32px;
	--precaution-copy-gap: 16px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--f-ui), var(--f-body), sans-serif;
	font-size: 16px;
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

/* Japanese and Chinese wrap between characters; Korean's approved keep-all stays intact. */
html[lang="ja"] body,
html[lang^="zh"] body {
	word-break: normal;
	overflow-wrap: anywhere;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
}

h1,
h2,
h3,
h4,
p {
	margin: 0;
}

/* audit-1/2/3 cross-cutting: only a 400 Libertinus Sans face is loaded and no heading declares a
   weight, so the UA default (bold) synthesises a faux-bold on every h1/h2/h3. Figma is Regular
   everywhere. More specific rules (.onsil-h3, .onsil-card-row__card-title, etc.) still win — this
   is only the default for plain heading tags and the shared .onsil-h2 class. */
h1,
h2,
h3,
.onsil-h2 {
	font-weight: 400;
}

.onsil-wrap {
	max-width: calc(var(--maxw) + 48px);
	padding-inline: 24px;
	margin-inline: auto;
	box-sizing: border-box;
}

.onsil-section {
	padding-block: var(--section-y);
}

/* Per-section padding overrides — audits measured each node directly; the generic --section-y
   (100px/64px) is a broad over-estimate for most of these (home.md/space.md/treatment-detail.md).
   Sections not listed here (page-hero, hero-slider, intro-split, intro-panel, treat-hero, faq,
   panel-list, gallery-grid, journal-grid) either already carry their own override elsewhere or no
   audit gave a number different enough from the default to justify one. */
[data-sec="brand-intro"] {
	padding-block: 60px; /* home.md §3: 60/60; space.md §1 measures ~56/56, within tolerance */
}

/* data-sec-inventory fix: card-row-3/feature-cards-3/feature-cards-4/precaution-2col are the
   distinct spec archetypes that used to share data-sec="card-row" (see
   design/v5/verify/data-sec-inventory.md) — listed together here so this rule keeps matching
   every one of them exactly as it did before the rename (no visual change intended). */
[data-sec="card-row-3"],
[data-sec="feature-cards-3"],
[data-sec="feature-cards-4"],
[data-sec="precaution-2col"] {
	padding-block: 0 48px; /* home.md §4: pb 48 only, top absorbed by the preceding section */
}

[data-sec="doctor-profile"] {
	padding-block: 0 64px; /* home.md §6: pb 64 only — Home's own intro-panel above absorbs the top */
}

/* fix-1 (audit HIGH #1): every page except Home puts this section straight after the page-hero
   with no absorbing panel above it — about.md §1 / cat-*.md §10 both spec a 100px top pad here. */
body:not(.onsil-home) [data-sec="doctor-profile"] {
	padding-block: 100px 64px;
}

[data-sec="equipment-carousel"] {
	padding-block: 0 48px; /* home.md §8: pb 48 only */
}

[data-sec="image-wide"] {
	padding-block: 0 48px; /* home.md §10 / space.md §4: pb 48 only */
}

/* data-sec-inventory fix: case-grid/concern-type-grid are distinct spec archetypes that used to
   share data-sec="concern-list" (see design/v5/verify/data-sec-inventory.md) — listed together
   here so this rule keeps matching every one of them exactly as it did before the rename (no
   visual change intended). */
[data-sec="concern-list"],
[data-sec="case-grid"],
[data-sec="concern-type-grid"] {
	padding-block: 90px; /* treatment-detail.md: node pad ~90 (close to the 100 default) */
}

[data-sec="treatment-lineup"] {
	/* fix-9 (audit MEDIUM #9): treatment-detail.md's own "Key Spacing" table says 165px padding-top
	   — the previous 93px cited a different spec line (title y-offset in cat-lift-contour.md §6,
	   x=240/y=93) that describes the title's position within the section, not the section's own
	   padding. Only a top figure is spec'd; applying it symmetrically overshot every route's band
	   by the full doubled delta (measured), so the bottom keeps the prior 93px pending a spec'd
	   bottom value. */
	padding-block: 165px 93px;
}

[data-sec="contact-info"] {
	padding-block: 20px 0; /* contact.md §2: outer section pt 20 only — the 90/96 inner panel padding
	   now lives on .onsil-contact-info__grid (page.css), which IS the spec's "Panel" element. */
}

@media (max-width: 768px) {
	:root {
		--section-y: 64px;
		--t-hero: 40px;
		--t-h2: 30px;
		--t-h3: 22px;
	}

	.onsil-wrap {
		padding-inline: 17.5px; /* audits: Figma M content is 340px wide (375 - 2*17.5), not 327 */
	}

	[data-sec="treat-hero"] {
		padding-block: 20px; /* treatment-detail.md M hero: pad 20 vs the 64px default */
	}

	/* fix-1 (audit HIGH #1), mobile: same reasoning as the desktop rule above — no spec'd mobile
	   top value exists, so this reuses the mobile --section-y figure as the closest documented
	   number rather than inventing one. */
	body:not(.onsil-home) [data-sec="doctor-profile"] {
		padding-block: 64px;
	}
}