/*
 * Site type system (COM-44): one size, weight, line height and tracking per role,
 * identical in Korean and English. Enqueued after every other theme stylesheet, so
 * equal-specificity rules elsewhere lose by order. Other stylesheets must not set
 * type or role spacing on these elements; remove such rules instead of outbidding them.
 *
 * Roles:
 *   hero          page h1                     section       h2
 *   subsection    grouped h3-h6               item          card/list titles
 *   lead          hero/page introduction      body          ordinary paragraphs
 *   meta          card metadata               control       accordion buttons
 *   faq / faq-body                            article-*     blog and case bodies
 *   stat-number / stat-label                  About statistics
 */

:root {
	--type-hero: 52px;
	--type-hero-line: 60px;
	--type-section: 36px;
	--type-section-line: 44px;
	--type-subsection: 24px;
	--type-subsection-line: 32px;
	--type-item: 20px;
	--type-item-line: 28px;
	--type-lead: 18px;
	--type-lead-line: 28px;
	--type-body: 16px;
	--type-body-line: 1.5;
	--type-faq: 18px;
	--type-aside: 18px;
	--type-article-title: 34px;
	--type-article-section: 28px;
	--type-article-subsection: 24px;
	--type-article-nested: 20px;
	--type-article-line: 1.6;
	--type-stat-number: 32px;
	--type-stat-label: 16px;
	--space-stat: 8px;
	--space-section: 48px;
	--space-group: 24px;
	--space-paragraph: 12px;
	--space-cta: 24px;
}

@media (max-width: 992px) {
	:root {
		--type-hero: 36px;
		--type-hero-line: 44px;
		--type-section: 26px;
		--type-section-line: 34px;
		--type-subsection: 22px;
		--type-subsection-line: 30px;
		--type-item: 18px;
		--type-item-line: 26px;
		--type-lead: 16px;
		--type-lead-line: 24px;
		--type-faq: 16px;
		--type-aside: 16px;
		--type-article-title: 28px;
		--type-article-section: 22px;
		--type-article-subsection: 20px;
		--type-article-nested: 18px;
		--type-article-line: 1.65;
		--type-stat-number: 24px;
		--type-stat-label: 14px;
		--space-stat: 10px;
		--space-section: 24px;
		--space-group: 20px;
		--space-paragraph: 8px;
		--space-cta: 20px;
	}
}

/* ---- Family -------------------------------------------------------------- */

html:not(#_) body,
html:not(#_) body :is(h1, h2, h3, h4, h5, h6, p, li, a, button, input, select, textarea, label, span, div, td, th, strong, em, blockquote) {
	font-family: Pretendard, sans-serif;
}

/*
 * Every rule below starts with `html:not(#_)`. It matches every page and adds one
 * id-level specificity point, so a role rule beats the class-based type rules that
 * the older override files still carry, without !important. Inside this file the
 * remaining specificity and source order decide, from the general role to the
 * specific one.
 */

/* ---- Body text ----------------------------------------------------------- */

/* Kickers, dates, captions, timeline labels, footnotes and disclaimers are not body text and keep their own size. */

html:not(#_) main p:not(:where(.page-breadcrumb, .resource-hero__meta, .resource-hero__eyebrow, .com47-stats-source, .cky-consent-container, .stage-meta, .disclaimer, .resource-callout > p:last-child, .resource-callout > .wp-block-group__inner-container > p:last-child, .resource-methodology > p, .resource-article-notes p, .lead:not(.resource-overview), .resource-hero__date, .wp-caption-text, .com47-timeline section > p:first-child), :where(.page-breadcrumb, .resource-hero__meta, .com47-stats-source, .cky-consent-container) p) {
	font-size: var(--type-body);
	font-weight: 400;
	line-height: var(--type-body-line);
	letter-spacing: 0;
	word-break: keep-all;
	overflow-wrap: break-word;
}

html:not(#_) main .faq-item p:not(:where(.page-breadcrumb, .resource-hero__meta, .resource-hero__eyebrow, .com47-stats-source, .cky-consent-container, .stage-meta, .disclaimer, .resource-callout > p:last-child, .resource-callout > .wp-block-group__inner-container > p:last-child, .resource-methodology > p, .resource-article-notes p, .lead:not(.resource-overview), .resource-hero__date, .wp-caption-text, .com47-timeline section > p:first-child), :where(.page-breadcrumb, .resource-hero__meta, .com47-stats-source, .cky-consent-container) p) {
	font-size: 16px;
	line-height: var(--type-body-line);
}

html:not(#_) main :is(.single-post-inner, .single-case-content) p:not(:where(.page-breadcrumb, .resource-hero__meta, .resource-hero__eyebrow, .com47-stats-source, .cky-consent-container, .stage-meta, .disclaimer, .resource-callout > p:last-child, .resource-callout > .wp-block-group__inner-container > p:last-child, .resource-methodology > p, .resource-article-notes p, .lead:not(.resource-overview), .resource-hero__date, .wp-caption-text, .com47-timeline section > p:first-child), :where(.page-breadcrumb, .resource-hero__meta, .com47-stats-source, .cky-consent-container) p) {
	font-size: 16px;
	line-height: var(--type-article-line);
}

/* ---- Headings ------------------------------------------------------------ */

/* FAQ, accordion, article and card-metadata headings take their own roles below. Article h4-h6
 * keep the bold 16px minor heading below the article subheading (wp-custom-css.css). */

html:not(#_) main :is(h3, h4, h5, h6):not(:where(.section-home-tech h4:has(strong), .faq-item *, .accordion-header, :is(.single-post-inner, .single-case-content) :is(h3, h4, h5, h6), :is(.loop-blog, .loop-case_studies, .section-case_studies) h5, .resource-boilerplate-heading, .resource-qa-series-title)) {
	font-size: var(--type-item);
	font-weight: 600;
	line-height: var(--type-item-line);
	letter-spacing: -0.01em;
	margin-top: 0;
	margin-bottom: 8px;
	word-break: keep-all;
	overflow-wrap: break-word;
}

html:not(#_) main :is(.service-product, .section-service-hub, .service-quality_network, .section-home-tech) :is(h3, h4, h5, h6):not(:where(.section-home-tech h4:has(strong), .faq-item *, .accordion-header, :is(.single-post-inner, .single-case-content) :is(h3, h4, h5, h6), :is(.loop-blog, .loop-case_studies, .section-case_studies) h5, .resource-boilerplate-heading, .resource-qa-series-title)):not(li > *),
html:not(#_) main .hub-group__title {
	font-size: var(--type-subsection);
	font-weight: 600;
	line-height: var(--type-subsection-line);
	letter-spacing: -0.015em;
	margin-top: 0;
	margin-bottom: 8px;
	word-break: keep-all;
	overflow-wrap: break-word;
}

html:not(#_) main h2:not(:where(:is(.single-post-inner, .single-case-content) h2, .faq-item h2, .resource-faq-block__title, .related-readings__heading)) {
	font-size: var(--type-section);
	font-weight: 600;
	line-height: var(--type-section-line);
	letter-spacing: -0.02em;
	margin-top: 0;
	margin-bottom: var(--space-group);
	word-break: keep-all;
	overflow-wrap: break-word;
}

html:not(#_) main .about-cta__heading {
	font-size: var(--type-item);
	line-height: var(--type-item-line);
	letter-spacing: -0.01em;
	margin-top: 0;
	margin-bottom: 8px;
}

html:not(#_) :is(main, .page-header) h1:not(:where(.post-header h1, .single-case-title h1, h1.post-title, h1.resource-hero__title)) {
	font-size: var(--type-hero);
	font-weight: 600;
	line-height: var(--type-hero-line);
	letter-spacing: -0.025em;
	margin-top: 0;
	margin-bottom: 16px;
	word-break: keep-all;
	overflow-wrap: break-word;
}

html:not(#_) main :is(.page-title, .hero .desc) h4 {
	font-size: var(--type-lead);
	font-weight: 400;
	line-height: var(--type-lead-line);
	letter-spacing: 0;
	margin-top: 0;
	margin-bottom: 0;
}

html:not(#_) main .faq-item :is(h1, h2, h3, h4, h5, h6) {
	word-break: keep-all;
	overflow-wrap: break-word;
	font-size: var(--type-faq);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0;
}

/* ---- Articles (blog, case study, document view) -------------------------- */

/* The article FAQ block and related-readings titles sit outside the body but in the article section slot. */
html:not(#_) main :is(.single-post-inner, .single-case-content) :is(h2, h3),
html:not(#_) main :is(.resource-faq-block__title, .related-readings__heading) {
	word-break: keep-all;
	overflow-wrap: break-word;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.015em;
}

html:not(#_) main :is(.single-post-inner, .single-case-content) h2,
html:not(#_) main :is(.resource-faq-block__title, .related-readings__heading) {
	font-size: var(--type-article-section);
}

html:not(#_) main :is(.single-post-inner, .single-case-content) h3 {
	font-size: var(--type-article-subsection);
}

html:not(#_) main :is(.single-post-inner:has(h2), .single-case-section) h3,
html:not(#_) main .single-case-content .single-case-section p > strong:first-child:has(+ br) {
	font-size: var(--type-article-nested);
}

/* Article lists read as body text. */
html:not(#_) main :is(.single-post-inner, .single-case-content) .wp-block-list > li {
	font-size: 16px;
	font-weight: 400;
	line-height: var(--type-article-line);
	letter-spacing: 0;
}

/* Company-introduction and Q&A-series labels: below the article subheading, bold. */
html:not(#_) :is(.single-post-inner .resource-boilerplate-heading, .resource-boilerplate .resource-boilerplate-heading, .resource-methodology .resource-boilerplate-heading, .resource-qa-series .resource-qa-series-title) {
	font-size: var(--type-aside);
	font-weight: 700;
}

html:not(#_) :is(main, .page-header) :is(.post-header h1, .single-case-title h1, h1.post-title, h1.resource-hero__title) {
	font-size: var(--type-article-title);
	font-weight: 600;
	word-break: keep-all;
	overflow-wrap: break-word;
	line-height: 1.35;
	letter-spacing: -0.015em;
}

/* ---- Small roles --------------------------------------------------------- */

html:not(#_) main :is(.loop-blog, .loop-case_studies, .section-case_studies) h5 {
	word-break: keep-all;
	overflow-wrap: break-word;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}

html:not(#_) main :is(h1, h2, h3, h4, h5, h6).accordion-header {
	word-break: keep-all;
	overflow-wrap: break-word;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

/* ---- Leads and titles chosen by class ------------------------------------ */

html:not(#_) :is(.page-desc, .page-title > p, .hero .desc > p) {
	font-size: var(--type-lead);
	font-weight: 400;
	line-height: var(--type-lead-line);
	letter-spacing: 0;
	margin-top: 0;
	margin-bottom: 0;
	word-break: keep-all;
	overflow-wrap: break-word;
}

html:not(#_) :is(.cs-item__title, .hub-card__title, .loop-services .title, .section-home-services h3, .about-principle h3, .section-home-feature h3, .loop-related .title, .related-readings__title) {
	font-size: var(--type-item);
	font-weight: 600;
	line-height: var(--type-item-line);
	letter-spacing: -0.01em;
	margin-top: 0;
	margin-bottom: 8px;
	word-break: keep-all;
	overflow-wrap: break-word;
}

html:not(#_) .section-home-tech .desc h4 strong {
	font-size: var(--type-subsection);
	margin-bottom: 8px;
	font-weight: 600;
	line-height: var(--type-subsection-line);
	letter-spacing: -0.015em;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/*
 * About statistics: the numbers and labels carry inline style attributes inside the
 * ACF `vison-desc` content, so only !important reaches them from a stylesheet.
 */
html:not(#_) .about-vision td > div > div:first-child {
	font-size: var(--type-stat-number) !important;
	overflow-wrap: break-word;
	word-break: keep-all;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em !important;
	margin-bottom: var(--space-stat) !important;
}

html:not(#_) .about-vision td > div > div:last-child {
	font-size: var(--type-stat-label) !important;
	overflow-wrap: break-word;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	margin: 0 !important;
}

/* Inline children follow their heading or paragraph (strong only outside body text). */
html:not(#_) :where(main, .page-header) :where(h1, h2, h3, h4, h5, h6, p):not(:where(.section-home-tech h4:has(strong))) :is(span, a):not(.btn),
html:not(#_) main :where(h1, h2, h3, h4, h5, h6, .page-desc, .page-title > p, .hero .desc > p):not(:where(.section-home-tech h4:has(strong))) strong {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

/* ---- Section rhythm ------------------------------------------------------ */

/* Hero and article sections keep their image-overlap geometry. */
html:not(#_) main > section:not(.hero, .single-post-content, .single-case-content) {
	padding-top: var(--space-section);
	padding-bottom: var(--space-section);
}

html:not(#_) main .section-title {
	margin-bottom: var(--space-group);
}

html:not(#_) main .section-title h2 {
	margin: 0;
}

html:not(#_) main .section-title p {
	margin: 8px 0 0;
}

html:not(#_) main :is(.desc, .faq-content, .faq-answer, .cs-item__desc) > p {
	margin-top: 0;
	margin-bottom: var(--space-paragraph);
}

html:not(#_) main :is(.desc, .faq-content, .faq-answer, .cs-item__desc) > p:last-child,
html:not(#_) main .hero .desc > :is(p, h4) {
	margin-bottom: 0;
}

html:not(#_) main :is(.hero .cta, .page-title .cta) {
	margin-top: var(--space-cta);
}

html:not(#_) main section.service-benefit .service-section-intro {
	margin-top: 8px;
}

/* Listing heroes keep one height in both languages (owner, 2026-08-03): the lead holds two lines. */
@media (min-width: 993px) {
	html:not(#_) main .page-header:has(+ section :is(#resources-filter, .blog-topics-filter)) .page-title > h4 {
		min-height: calc(2 * var(--type-lead-line));
	}
}

/* ---- Navigation and footer ----------------------------------------------- */

html:not(#_) .main-navigation .nav-menu > li > a {
	font-size: 16px;
	font-weight: 600;
}

html:not(#_) .main-navigation .sub-menu a {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

html:not(#_) footer :is(p, li, a) {
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: 0;
}

html:not(#_) footer h5 {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}