

/* ---------------------------------------------------------------------------
 * 1. Legacy alias tokens -> canonical scale
 *    Declared on :root AND on the elements that re-declare them locally, so a
 *    page-level override in a fragment cannot reintroduce the green palette.
 * ------------------------------------------------------------------------- */
:root,
.nl-wrap,
.nl-sec,
.nl-ba,
.nl-notice,
[data-legacy-page]{
	--nl-mint:var(--dn-mint,#74d5ca);
	--nl-teal:var(--dn-ink,#0a0a0a);
	--nl-ink:var(--dn-body,#333333);
	--nl-bg:var(--dn-cream,#f5f5f5);
	--nl-line:var(--dn-border,#e4e4e4);
	--nl-deep:var(--dn-ink,#0a0a0a);
	--nl-gold:var(--dn-mint,#74d5ca);
	--brand-bg:var(--dn-cream,#f5f5f5);
}

/* Section eyebrow / title split.
   `--nl-teal` used to paint both, which is why the label and the heading were
   the same deep green. The home page paints them differently:
     label   #6b6b6b  (--dn-sub)
     heading #0a0a0a  (--dn-ink) */
.nl-sec__eyebrow,
.nlx-eyebrow,
.dn-sec__eyebrow,
.ge-group__eyebrow{
	color:var(--dn-sub,#6b6b6b)!important;
}
.nl-sec__title,
.nlx-h2,
.nl-ba__title,
.nl-notice__title{
	color:var(--dn-ink,#0a0a0a)!important;
}
.nl-sec__body,
.nl-sec__body p,
.nl-ba__body,
.nl-ba__body p{
	color:var(--dn-body,#333333);
}
.nl-doctable caption,
.nl-doctable td:first-child{
	color:var(--dn-ink,#0a0a0a)!important;
}
.nl-doctable td{
	border-bottom-color:var(--dn-border,#e4e4e4)!important;
	color:var(--dn-body,#333333);
}
.nl-sec__num,
.nlx-num,
.dn-sec__num{
	color:var(--dn-ink,#0a0a0a)!important;
}

/* Accent bars / underlines that used the gold point color. */
.dn-aeo__label::before,
.about-hub__hero-eyebrow{
	background-color:var(--dn-mint,#74d5ca)!important;
	border-bottom-color:var(--dn-mint,#74d5ca)!important;
}
.dn-geo-pov,
.dn-geo-deep.dn-geo-pov{
	border-left-color:var(--dn-ink,#0a0a0a)!important;
}

/* ---------------------------------------------------------------------------
 * 2. FAQ accordion — one canonical form for every subpage
 *
 *    Measured home values (1440 / 390):
 *      section   #f5f5f5 · 96px 24px / 64px 20px
 *      inner     max-width 1200 · padding 0 / max-width 1180 · padding 0 20px
 *      eyebrow   #6b6b6b · 13.6px · 400 · ls .2em · mb 6
 *      title     #0a0a0a · var(--dn-t-h2) · 600 · lh 1.28 · ls -.03em · mb 36
 *      item      border-top/bottom 1px #e4e4e4 · transparent · radius 0 · pad 0
 *      summary   18px · 600 · #0a0a0a · lh 1.55 · pad 20 44 20 0 · marker +/-
 *      answer    16px · #333333 · lh 1.9 · pad 4 0 24
 * ------------------------------------------------------------------------- */

/* 2a. Containers that hold a FAQ list. */
html body .dn-geo-block[aria-label="자주 묻는 질문"] > .dn-geo-card,
html body .dn-geo-faq,
html body .nlx-faq,
html body .nl-ba .dn-faq,
html body .topic-hub__table-wrap,
html body .dental-hub__table-wrap,
html body .about-hub__answer{
	background:transparent!important;
	border:0!important;
	border-radius:0!important;
	padding:0!important;
	box-shadow:none!important;
	max-width:none!important;
}

/* 2b. FAQ section heading — matches h2.dn-faq__title on the home page. */
html body .dn-geo-block[aria-label="자주 묻는 질문"] > h2,
html body .dn-geo-faq > h2,
html body .nlx-faq-band .nlx-h2,
html body .nl-ba__faq-title,
html body .topic-hub__table-wrap > h2,
html body .dental-hub__table-wrap > h2{
	font-size:var(--dn-t-h2,clamp(25px,1.35vw + 20px,40px))!important;
	font-weight:600!important;
	line-height:1.28!important;
	letter-spacing:-.03em!important;
	color:var(--dn-ink,#0a0a0a)!important;
	text-align:left!important;
	margin:0 0 36px!important;
}

/* 2c. Every accordion row on a subpage. `details` is only ever used for FAQ
       entries in this site (verified across all 51 fragments). */
html body details:not(.dn-consultbar):not(.dn-cprivacy){
	background:transparent!important;
	border:0!important;
	border-radius:0!important;
	padding:0!important;
	margin:0!important;
	box-shadow:none!important;
	overflow:visible!important;
}

html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary{
	position:relative;
	display:block;
	list-style:none;
	cursor:pointer;
	padding:20px 44px 20px 0!important;
	margin:0!important;
	background:transparent!important;
	border:0!important;
	font-size:18px!important;
	font-weight:600!important;
	line-height:1.55!important;
	color:var(--dn-ink,#0a0a0a)!important;
	word-break:keep-all;
}
html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary::-webkit-details-marker{display:none}
html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary::marker{content:""}

html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary::after{
	content:'+';
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
	font-size:1.5rem;
	font-weight:300;
	line-height:1;
	color:var(--dn-ink,#0a0a0a);
	transition:transform .2s;
}
html body details:not(.dn-consultbar):not(.dn-cprivacy)[open] > summary::after{
	content:'−';
}

/* Answer body. `> *` covers both `<div>` and bare `<p>` wrappers. */
html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary ~ *{
	padding:4px 0 24px!important;
	margin:0!important;
	background:transparent!important;
	border:0!important;
}
html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary ~ *,
html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary ~ * p,
html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary ~ p{
	font-size:16px!important;
	line-height:1.9!important;
	color:var(--dn-body,#333333)!important;
	word-break:keep-all;
}
html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary ~ * li{
	font-size:16px!important;
	line-height:1.9!important;
	color:var(--dn-body,#333333)!important;
}
html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary ~ * a{
	color:var(--dn-ink,#0a0a0a)!important;
	font-weight:600;
}

/* Mobile parity — home uses 16/36/16/0 on the summary and lh 1.8 on answers. */
@media (max-width:760px){
	html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary{
		padding:16px 36px 16px 0!important;
		font-size:18px!important;
		line-height:1.7!important;
	}
	html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary ~ *{
		padding:4px 0 20px!important;
	}
	html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary ~ *,
	html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary ~ * p,
	html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary ~ p,
	html body details:not(.dn-consultbar):not(.dn-cprivacy) > summary ~ * li{
		font-size:16px!important;
		line-height:1.8!important;
	}
	html body .dn-geo-block[aria-label="자주 묻는 질문"] > h2,
	html body .dn-geo-faq > h2,
	html body .topic-hub__table-wrap > h2,
	html body .dental-hub__table-wrap > h2{
		margin:0 0 26px!important;
	}
}

/* Undo the two rules that shrank subpage FAQ text below the home scale. */
html body .dn-geo-content__block details summary{font-size:18px!important}
html body .dn-geo-content__block details p{font-size:16px!important}
html body section.dn-geo-block .dn-geo-card p{font-size:16px!important}
@media (max-width:768px){
	html body .dn-geo-content__block p,
	html body .dn-geo-card p,
	html body .dn-geo-content__block li,
	html body .dn-geo-card li{font-size:16px!important}
}

/* ---------------------------------------------------------------------------
 * 3. Section rhythm — subpage sections step on the same scale as the home page
 *    (96px desktop / 64px mobile, 24px and 20px side gutters, 1200px shell).
 * ------------------------------------------------------------------------- */
html body .nl-sec{
	background:var(--dn-paper,#ffffff)!important;
	padding:96px 24px!important;
	border-top-color:var(--dn-border,#e4e4e4)!important;
}
/* 폭만 묶고 가운데로 놓지 않으면 1200px 덩어리가 화면 왼쪽에 붙어 좌우가 어긋난다. */
html body .nl-sec__inner,
html body .nl-ba__inner{max-width:1200px!important;margin-inline:auto!important}
html body .dn-geo-block{max-width:1200px!important;padding-left:24px!important;padding-right:24px!important}
@media (max-width:760px){
	html body .nl-sec{padding:64px 20px!important}
	html body .dn-geo-block{padding-left:20px!important;padding-right:20px!important}
}


/* ---------------------------------------------------------------------------
 * 4. Canonical `.dn-faq__*` markup, mirrored from v2.html for subpages.
 *    Fragments converted to the home markup pick these up directly.
 * ------------------------------------------------------------------------- */
html body .dn-faq{background:var(--dn-cream,#f5f5f5)!important;padding:96px 24px!important}
html body .dn-faq__inner{max-width:1200px!important;margin:0 auto!important;padding:0!important}
html body .dn-faq__eyebrow{display:block;text-align:left;color:var(--dn-sub,#6b6b6b)!important;
	font-size:.85rem!important;font-weight:400!important;letter-spacing:.2em!important;
	text-transform:none!important;margin:0 0 6px!important}
html body .dn-faq__title{text-align:left!important;
	font-size:var(--dn-t-h2,clamp(25px,1.35vw + 20px,40px))!important;font-weight:600!important;
	line-height:1.28!important;letter-spacing:-.03em!important;color:var(--dn-ink,#0a0a0a)!important;
	margin:0 0 36px!important}
html body .dn-faq__list{display:flex;flex-direction:column;gap:0}
html body .dn-faq__item{border:0!important;border-top:1px solid var(--dn-border,#e4e4e4)!important;
	border-radius:0!important;background:transparent!important;padding:0!important;margin:0!important}
html body .dn-faq__item:last-child{border-bottom:1px solid var(--dn-border,#e4e4e4)!important}
html body .dn-faq__a{padding:4px 0 24px!important;font-size:16px!important;
	line-height:1.9!important;color:var(--dn-body,#333333)!important;word-break:keep-all}
html body .dn-faq__a p{margin:0 0 14px!important;font-size:16px!important;
	line-height:1.9!important;color:var(--dn-body,#333333)!important}
html body .dn-faq__a p:last-child{margin-bottom:0!important}
@media (max-width:760px){
	html body .dn-faq{padding:64px 20px!important}
	html body .dn-faq__inner{max-width:1180px!important}
	html body .dn-faq__title{margin:0 0 26px!important}
	html body .dn-faq__a{padding:4px 0 20px!important;line-height:1.8!important}
	html body .dn-faq__a p{line-height:1.8!important}
}

/* ---------------------------------------------------------------------------
 * 5. Section label typography — matches `.dn-label` on the home page
 *    (#6b6b6b · 0.72rem · 600 · ls .24em · uppercase · mb 18).
 *    Hero labels, the mid-CTA and the consult bar keep their own scale.
 * ------------------------------------------------------------------------- */
html body .nl-sec__eyebrow,
html body .nlx-eyebrow,
html body .ge-group__eyebrow,
html body .dn-sec__eyebrow,
html body .topic-hub__eyebrow,
html body .dental-hub__eyebrow{
	font-size:.72rem!important;
	font-weight:600!important;
	letter-spacing:.24em!important;
	text-transform:uppercase!important;
	color:var(--dn-sub,#6b6b6b)!important;
	margin:0 0 18px!important;
}

/* `about-tour` writes its FAQ heading as a div, not an h2. */
html body .about-hub__section-label{
	display:block;
	font-size:var(--dn-t-h2,clamp(25px,1.35vw + 20px,40px))!important;
	font-weight:600!important;
	line-height:1.28!important;
	letter-spacing:-.03em!important;
	color:var(--dn-ink,#0a0a0a)!important;
	text-align:left!important;
	margin:0 0 36px!important;
	text-transform:none!important;
}
@media (max-width:760px){
	html body .about-hub__section-label{margin:0 0 26px!important}
}

/* ---------------------------------------------------------------------------
 * 6. Section header triad — eyebrow / title / subline
 *
 * SOURCE OF TRUTH: the home page (client/public/v2.html), measured with
 * computed style at the 1440px and 375px viewports.
 *
 *     eyebrow   .dn-label      .72rem (12px <760) · 600 · ls .24em · upper
 *                              · #6b6b6b · margin-bottom 18
 *     title     h2.dn-heading  var(--dn-t-h2) · 600 · lh 1.3 · ls normal
 *                              · #0a0a0a · left
 *     subline   .dn-*__lead    18px · lh 1.75 · #333333
 *
 * Subpages had grown four independent header systems, so a single page could
 * show three different title weights. Measured spread before this block:
 *     title  font-size  4 values (39.44 / 32 / 28 / 27.2)
 *     title  weight     4 values (800 / 700 / 600 / 300)
 *     title  leading    3 values (1.35 / 1.30 / 1.28)
 *     title  tracking   4 values (normal / -.01em / -.02em / -.03em)
 *     eyebrow size      2 · weight 2 · tracking 3 · gap 3
 *
 * EXCLUDED ON PURPOSE (not deviations):
 *   .dn-midcta__*  closing call-to-action band — its own centered scale on a
 *                  dark ground, matching the home page band.
 *   .dn-diff       mint-ground section on the home page: its eyebrow is ink,
 *                  not grey, because grey on mint fails contrast.
 *   card titles    .nl-card__*, .dn-*__card h3 and friends are item labels
 *                  inside a section, not section headers.
 *
 * Add new header classes to the lists below — never re-declare the numbers.
 * ------------------------------------------------------------------------- */
:root{
	--dn-sec-eyebrow-size:.72rem;
	--dn-sec-eyebrow-weight:600;
	--dn-sec-eyebrow-tracking:.24em;
	--dn-sec-eyebrow-color:var(--dn-sub,#6b6b6b);
	--dn-sec-eyebrow-gap:18px;

	--dn-sec-title-size:var(--dn-t-h2,clamp(25px,1.35vw + 20px,40px));
	--dn-sec-title-weight:600;
	--dn-sec-title-leading:1.3;
	--dn-sec-title-tracking:var(--dn-ls-text,normal);
	--dn-sec-title-color:var(--dn-ink,#0a0a0a);
	--dn-sec-title-gap:36px;

	--dn-sec-sub-size:18px;
	--dn-sec-sub-leading:1.75;
	--dn-sec-sub-color:var(--dn-body,#333333);
}
@media (max-width:760px){
	:root{
		--dn-sec-eyebrow-size:12px;
		--dn-sec-title-gap:26px;
		--dn-sec-sub-size:16px;
		--dn-sec-sub-leading:1.8;
	}
}

html body .dn-label,
html body .nl-sec__eyebrow,
html body .nlx-eyebrow,
html body .dn-sec__eyebrow,
html body .ge-group__eyebrow,
html body .dn-relposts__eyebrow,
html body .dn-faq__eyebrow,
html body .topic-hub__eyebrow,
html body .dental-hub__eyebrow,
html body .about-hub__hero-eyebrow,
html body .dn-relgrid__eyebrow,
html body .dn-bottomlinks__eyebrow{
	display:block;
	font-size:var(--dn-sec-eyebrow-size)!important;
	font-weight:var(--dn-sec-eyebrow-weight)!important;
	letter-spacing:var(--dn-sec-eyebrow-tracking)!important;
	text-transform:uppercase!important;
	color:var(--dn-sec-eyebrow-color)!important;
	margin:0 0 var(--dn-sec-eyebrow-gap)!important;
}
/* The legacy eyebrow carried a mint rule before the text; the home page has
   no such ornament, so it is dropped rather than restyled. */
html body .nl-sec__eyebrow::before{display:none!important}
/* Centered variant keeps its alignment — the rest of the scale still applies. */
html body .nl-sec--solo .nl-sec__eyebrow{text-align:center!important}

html body .dn-heading.dn-heading,
html body .dn-copy-media__heading.dn-copy-media__heading,
html body .nl-sec__title.nl-sec__title,
html body .nlx-h2.nlx-h2,
html body .dn-faq__title.dn-faq__title,
html body .dn-relposts__title.dn-relposts__title,
html body .dn-relgrid__title.dn-relgrid__title,
html body .dn-bottomlinks__title.dn-bottomlinks__title,
html body .nl-ba__title.nl-ba__title,
html body .nl-notice__title.nl-notice__title,
html body .about-hub__section-label.about-hub__section-label,
html body .topic-hub__table-wrap > h2,
html body .dental-hub__table-wrap > h2,
html body .dn-geo-block[aria-label="자주 묻는 질문"] > h2,
html body .dn-geo-faq > h2{
	font-size:var(--dn-sec-title-size)!important;
	font-weight:var(--dn-sec-title-weight)!important;
	line-height:var(--dn-sec-title-leading)!important;
	letter-spacing:var(--dn-sec-title-tracking)!important;
	color:var(--dn-sec-title-color)!important;
}
/* Text alignment is left everywhere except the two closing bands, which the
   home page also centres. Those keep their own alignment. */
html body .dn-heading.dn-heading,
html body .dn-copy-media__heading.dn-copy-media__heading,
html body .nl-sec__title.nl-sec__title,
html body .dn-faq__title.dn-faq__title,
html body .dn-relposts__title.dn-relposts__title,
html body .about-hub__section-label.about-hub__section-label{
	text-align:left!important;
}
html body .nl-sec--solo .nl-sec__title.nl-sec__title{text-align:center!important}
/* One legacy rule set .dn-heading to 300 inside `.dn-insight-section`; it beat
   the block above on specificity, so it is named here rather than weakened. */
html body .dn-insight-section .dn-heading{
	font-size:var(--dn-sec-title-size)!important;
	font-weight:var(--dn-sec-title-weight)!important;
}

html body .dn-faq__title,
html body .about-hub__section-label,
html body .dn-geo-block[aria-label="자주 묻는 질문"] > h2,
html body .dn-geo-faq > h2{
	margin:0 0 var(--dn-sec-title-gap)!important;
}

html body .nl-sec__body,
html body .nl-sec__body p,
html body .nlx-lead,
html body .dn-sec__lead{
	font-size:var(--dn-sec-sub-size)!important;
	line-height:var(--dn-sec-sub-leading)!important;
	color:var(--dn-sec-sub-color)!important;
}


/* ---------------------------------------------------------------------------
 * 7. Section header triad — classes the block above does not name yet
 *
 * Same source of truth (the home page) and the same tokens declared in 6.
 * These selectors only exist on a handful of subpages, so they were missing
 * from the triad lists; without them a records or badges heading still fell
 * back to its own ladder. Numbers are never repeated here — only the tokens.
 *
 * The auxiliary step (--dn-t-h2s) is what the home page uses for headings
 * that sit inside a card, an aside or the opening-hours panel. Those are not
 * section headers, so they keep the smaller step on purpose.
 * ------------------------------------------------------------------------- */
html body h2.dn-records__h,
html body h2.dn-badges__h,
html body .dn-natural-results__heading,
html body .dn-sub-hero__intro h2{
	font-size:var(--dn-sec-title-size)!important;
	font-weight:var(--dn-sec-title-weight)!important;
	line-height:var(--dn-sec-title-leading)!important;
	letter-spacing:var(--dn-sec-title-tracking)!important;
}
html body aside h2,
html body .dn-card h2,
html body .dn-hours h2{
	font-size:var(--dn-t-h2s,clamp(21px,.55vw + 19px,26px))!important;
	font-weight:var(--dn-sec-title-weight)!important;
}

/* Card copy sits on the 14px auxiliary step; 0.82rem fell below the ladder. */
html body .dn-insight-card__desc{
	font-size:var(--fs-2,14px)!important;
}
.newn-blank__head{max-width:1200px;margin:0 auto;padding-inline:16px}
.newn-blank__up{max-width:1200px;margin:0 auto 32px;padding-inline:16px}
.newn-blank__up-link{font-size:14px;color:var(--dn-mint-ink,#0e6b62);text-decoration:underline}
