/* Korean type and spacing tokens, site-wide.
 *
 * The 2026-09-03 density audit measured citcoding.com at a 20px body,
 * 160px of section padding and about 800 characters per 1,000px of page,
 * against 14-16px, 32-48px and about 1,500 characters on the Korean sites
 * parents read every day (Naver, Inflearn, Megastudy, Etoos, CMS, Elice).
 * Hangul glyphs are square and read larger than Latin at the same size, and
 * in the 학원 안내 genre white space reads as "nothing to say". This sheet
 * moves every Korean page to one scale at once, so the 2,800 pages stay
 * consistent while their copy is rewritten template by template.
 *
 * Layout of the file
 *   1. Tokens         one place for every number; mobile first, desktop at 768px
 *   2. Defaults       :where() rules with zero specificity: they set the value a
 *                     page gets when it says nothing, and lose to any page rule
 *   3. Components     normal-specificity rules for the few site-wide classes that
 *                     carry the old scale (body size on the home page,
 *                     .parent-friendly-text, the article template, hero heights)
 *   4. Tailwind       the utility classes the marketing pages are built from,
 *                     remapped to the tokens. `html:lang(ko) .py-16` outranks the
 *                     utility (0,1,1 vs 0,1,0) whether Tailwind comes from the
 *                     Play CDN, which appends its <style> after every <link>, or
 *                     from a compiled sheet linked later in <head>.
 *
 * What it does not do: shrink text below 14px (parents in their 40s are the
 * reader), touch pre/code, change widths (max-w-*), or restyle the lesson UI
 * under /tutors/ and /python_vis/, whose own sheets set their own scale and
 * outrank the defaults here. tools/qa/add_ko_stylesheet_links.py links this
 * file after ko-typography.css on every lang="ko" page.
 */

/* 1. Tokens ---------------------------------------------------------------- */

:where(html:lang(ko)) {
  --ko-fs-body: 15px;
  --ko-lh-body: 1.6;
  --ko-fs-ui: 14px;        /* labels, buttons, table cells, navigation */
  --ko-lh-ui: 1.45;
  --ko-fs-small: 12px;     /* captions, tags */
  --ko-fs-lead: 16px;      /* the one sentence under a heading */
  --ko-fs-h1: 26px;
  --ko-fs-h2: 20px;
  --ko-fs-h3: 16px;
  --ko-fs-display: 30px;   /* the largest hero headline on a phone */
  --ko-lh-h1: 1.2;
  --ko-lh-h2: 1.3;
  --ko-lh-h3: 1.4;
  --ko-section-y: 16px;    /* top and bottom of every section */
  --ko-block-y: 20px;      /* a sub-section or a stand-alone card */
  --ko-card-p: 16px;
  --ko-card-p-lg: 20px;
  --ko-gap: 12px;
  --ko-gap-lg: 16px;
  --ko-btn-py: 10px;
  --ko-btn-px: 18px;
  --ko-hero-max: 60vh;
}

@media (min-width: 768px) {
  :where(html:lang(ko)) {
    --ko-fs-h1: 34px;
    --ko-fs-h2: 24px;
    --ko-fs-h3: 17px;
    --ko-fs-display: 36px;
    --ko-section-y: 24px;
    --ko-hero-max: 520px;
  }
}

/* 2. Defaults (zero specificity) ------------------------------------------ */

:where(html:lang(ko) body) {
  font-size: var(--ko-fs-body);
  line-height: var(--ko-lh-body);
}

:where(html:lang(ko)) :where(h1) { font-size: var(--ko-fs-h1); line-height: var(--ko-lh-h1); }
:where(html:lang(ko)) :where(h2) { font-size: var(--ko-fs-h2); line-height: var(--ko-lh-h2); }
:where(html:lang(ko)) :where(h3) { font-size: var(--ko-fs-h3); line-height: var(--ko-lh-h3); }
:where(html:lang(ko)) :where(h4, h5, h6) { font-size: var(--ko-fs-body); line-height: var(--ko-lh-h3); }
/* No default line-height for table cells or form controls: one was tried
   (1.45) and it made the course catalogue table 20% taller, because its cells
   were set at the browser's `normal`. Tables are already the dense case. */

/* 3. Components ------------------------------------------------------------ */

/* The home page and a few older pages set body to 18-20px "for parents";
   the article template sets 1.05rem/1.8 on its paragraphs. Bring them all to
   the body token. (0,0,2) beats a bare `body { }`, and a page that wants
   another size on a class (body.course-ui) still wins. */
html:lang(ko) body {
  font-size: var(--ko-fs-body);
  line-height: var(--ko-lh-body);
}

html:lang(ko) .parent-friendly-text {
  font-size: inherit;
  line-height: inherit;
}

html:lang(ko) .section-title-large {
  font-size: var(--ko-fs-h2);
  line-height: var(--ko-lh-h2);
  letter-spacing: -0.02em;
}

/* Bare-tag headings on pages that do not use utilities. (0,0,2) beats a
   page's `h2 { }` and Tailwind's preflight `h1 { font-size: inherit }`, and
   loses to any class rule (.hero h1, .text-3xl). */
html:lang(ko) h1 { font-size: var(--ko-fs-h1); line-height: var(--ko-lh-h1); }
html:lang(ko) h2 { font-size: var(--ko-fs-h2); line-height: var(--ko-lh-h2); }
html:lang(ko) h3 { font-size: var(--ko-fs-h3); line-height: var(--ko-lh-h3); }

/* Heroes are sized to their content. Only sections and headers: a page
   wrapper that says min-h-screen to keep its footer down is left alone. */
html:lang(ko) :is(section, header, .hero, .hero-section):is(.min-h-screen, .min-h-\[70vh\], .min-h-\[75vh\], .min-h-\[80vh\], .min-h-\[85vh\], .min-h-\[90vh\]) {
  min-height: 0;
}

/* Generic section classes on the hand-written pages (premium.css,
   public-course-catalog.css, the home page and others set .section to
   44-150px). The lesson UI under /tutors/ uses the same class name for a
   block with no padding at all, so it is excluded: with it included the
   course catalogue index grew 20%. */
html:lang(ko) body:not(.course-ui) :is(.section, .section-tight, .sect, .sect--wide, .content, .tracks-section, .why-section, .premium-section, .programs-section, .roadmap-section, .timeline-section) {
  padding-top: var(--ko-section-y);
  padding-bottom: var(--ko-section-y);
}

/* The article template (ai-steam-faq/*, 14 root articles): the hero keeps
   its margin-top, which is what clears the fixed navigation there. */
html:lang(ko) .article-hero,
html:lang(ko) .article-content {
  padding-top: var(--ko-section-y);
  padding-bottom: var(--ko-section-y);
}
html:lang(ko) .article-cta {
  padding-top: var(--ko-block-y);
  padding-bottom: var(--ko-block-y);
  margin-top: var(--ko-block-y);
}
html:lang(ko) .article-hero__title { font-size: var(--ko-fs-h1); line-height: var(--ko-lh-h1); margin-bottom: 8px; }
html:lang(ko) .article-hero__subtitle { font-size: var(--ko-fs-lead); }
html:lang(ko) .article-hero__tag { margin-bottom: 12px; }
html:lang(ko) .article-intro { padding: var(--ko-card-p-lg); margin-bottom: var(--ko-block-y); }
html:lang(ko) .article-intro p,
html:lang(ko) .section-card p {
  font-size: var(--ko-fs-body);
  line-height: var(--ko-lh-body);
  margin-bottom: 10px;
}
html:lang(ko) .section-card { padding: var(--ko-card-p-lg); margin-bottom: var(--ko-gap-lg); }
html:lang(ko) .section-card h2 { font-size: var(--ko-fs-h2); margin-top: var(--ko-block-y); margin-bottom: 8px; }
html:lang(ko) .section-card h3 { font-size: var(--ko-fs-h3); margin-top: var(--ko-gap-lg); margin-bottom: 6px; }
html:lang(ko) .section-card li { line-height: var(--ko-lh-body); padding: 2px 0; }
html:lang(ko) .faq-section { margin-top: var(--ko-block-y); }
html:lang(ko) .faq-section-title { font-size: var(--ko-fs-h2); }
html:lang(ko) .faq-section-desc { margin-bottom: var(--ko-gap-lg); }
html:lang(ko) .faq-question { padding: 12px 16px; }
html:lang(ko) .article-cta__title { font-size: var(--ko-fs-h2); margin-bottom: 8px; }
html:lang(ko) .article-cta__text { font-size: var(--ko-fs-body); margin-bottom: var(--ko-gap-lg); }

/* 4. Tailwind utilities ---------------------------------------------------- */

/* 4a. Type. text-N keeps its meaning across widths (a page that wants a
   smaller phone heading already says text-3xl md:text-5xl). */
html:lang(ko) .text-xs  { font-size: var(--ko-fs-small); line-height: 1.4; }
html:lang(ko) .text-sm  { font-size: var(--ko-fs-ui);    line-height: var(--ko-lh-ui); }
html:lang(ko) .text-base{ font-size: var(--ko-fs-body);  line-height: var(--ko-lh-body); }
html:lang(ko) .text-lg  { font-size: var(--ko-fs-lead);  line-height: 1.55; }
html:lang(ko) .text-xl  { font-size: 17px;               line-height: 1.5; }
html:lang(ko) .text-2xl { font-size: 20px;               line-height: 1.35; }
html:lang(ko) .text-3xl { font-size: 24px;               line-height: 1.25; }
html:lang(ko) .text-4xl { font-size: 26px;               line-height: 1.2; }
html:lang(ko) .text-5xl { font-size: 34px;               line-height: 1.15; }
html:lang(ko) .text-6xl { font-size: var(--ko-fs-display); line-height: 1.1; }
html:lang(ko) .text-7xl { font-size: var(--ko-fs-display); line-height: 1.1; }

@media (min-width: 640px) {
  html:lang(ko) .sm\:text-base { font-size: var(--ko-fs-body); line-height: var(--ko-lh-body); }
  html:lang(ko) .sm\:text-lg   { font-size: var(--ko-fs-lead); line-height: 1.55; }
  html:lang(ko) .sm\:text-xl   { font-size: 17px; line-height: 1.5; }
  html:lang(ko) .sm\:text-2xl  { font-size: 20px; line-height: 1.35; }
  html:lang(ko) .sm\:text-3xl  { font-size: 24px; line-height: 1.25; }
  html:lang(ko) .sm\:text-4xl  { font-size: 26px; line-height: 1.2; }
  html:lang(ko) .sm\:text-5xl  { font-size: 30px; line-height: 1.15; }
}
@media (min-width: 768px) {
  html:lang(ko) .md\:text-sm   { font-size: var(--ko-fs-ui);   line-height: var(--ko-lh-ui); }
  html:lang(ko) .md\:text-base { font-size: var(--ko-fs-body); line-height: var(--ko-lh-body); }
  html:lang(ko) .md\:text-lg   { font-size: var(--ko-fs-lead); line-height: 1.55; }
  html:lang(ko) .md\:text-xl   { font-size: 17px; line-height: 1.5; }
  html:lang(ko) .md\:text-2xl  { font-size: 20px; line-height: 1.35; }
  html:lang(ko) .md\:text-3xl  { font-size: 24px; line-height: 1.25; }
  html:lang(ko) .md\:text-4xl  { font-size: 26px; line-height: 1.2; }
  html:lang(ko) .md\:text-5xl  { font-size: 34px; line-height: 1.15; }
  html:lang(ko) .md\:text-6xl  { font-size: var(--ko-fs-display); line-height: 1.1; }
  html:lang(ko) .md\:text-7xl  { font-size: var(--ko-fs-display); line-height: 1.1; }
}
@media (min-width: 1024px) {
  html:lang(ko) .lg\:text-lg  { font-size: var(--ko-fs-lead); line-height: 1.55; }
  html:lang(ko) .lg\:text-xl  { font-size: 17px; line-height: 1.5; }
  html:lang(ko) .lg\:text-2xl { font-size: 20px; line-height: 1.35; }
  html:lang(ko) .lg\:text-3xl { font-size: 24px; line-height: 1.25; }
  html:lang(ko) .lg\:text-4xl { font-size: 26px; line-height: 1.2; }
  html:lang(ko) .lg\:text-5xl { font-size: 34px; line-height: 1.15; }
  html:lang(ko) .lg\:text-6xl { font-size: var(--ko-fs-display); line-height: 1.1; }
  html:lang(ko) .lg\:text-7xl { font-size: var(--ko-fs-display); line-height: 1.1; }
}

html:lang(ko) .leading-loose   { line-height: 1.7; }
html:lang(ko) .leading-relaxed { line-height: var(--ko-lh-body); }
html:lang(ko) .leading-normal  { line-height: 1.5; }
html:lang(ko) .leading-snug    { line-height: 1.3; }
html:lang(ko) .leading-tight   { line-height: 1.2; }

/* 4b. Vertical section padding. Everything from py-10 up is a section or a
   hero; they all take the section token. pt-28/pt-32/md:pt-40 are hero tops
   on pages whose navigation is in normal flow (checked: no page with a fixed
   navigation uses them), so they are white space and take the token too. */
html:lang(ko) :is(.py-10, .py-12, .py-14, .py-16, .py-20, .py-24, .py-28, .py-32) {
  padding-top: var(--ko-section-y);
  padding-bottom: var(--ko-section-y);
}
html:lang(ko) :is(.pt-10, .pt-12, .pt-14, .pt-16, .pt-20, .pt-24, .pt-28, .pt-32) { padding-top: var(--ko-section-y); }
html:lang(ko) :is(.pb-10, .pb-12, .pb-14, .pb-16, .pb-20, .pb-24, .pb-28, .pb-32) { padding-bottom: var(--ko-section-y); }

html:lang(ko) .py-8 { padding-top: var(--ko-gap-lg); padding-bottom: var(--ko-gap-lg); }
html:lang(ko) .py-7 { padding-top: var(--ko-gap-lg); padding-bottom: var(--ko-gap-lg); }
html:lang(ko) .py-6 { padding-top: 14px; padding-bottom: 14px; }
html:lang(ko) .py-5 { padding-top: 12px; padding-bottom: 12px; }
html:lang(ko) .py-4 { padding-top: 12px; padding-bottom: 12px; }
html:lang(ko) .py-3\.5 { padding-top: var(--ko-btn-py); padding-bottom: var(--ko-btn-py); }
html:lang(ko) .py-3 { padding-top: var(--ko-btn-py); padding-bottom: var(--ko-btn-py); }
html:lang(ko) .py-2\.5 { padding-top: 8px; padding-bottom: 8px; }

html:lang(ko) .pt-8 { padding-top: var(--ko-gap-lg); }
html:lang(ko) .pt-7 { padding-top: var(--ko-gap-lg); }
html:lang(ko) .pt-6 { padding-top: 14px; }
html:lang(ko) .pt-5 { padding-top: 12px; }
html:lang(ko) .pt-4 { padding-top: 12px; }
html:lang(ko) .pt-3 { padding-top: 10px; }
html:lang(ko) .pb-8 { padding-bottom: var(--ko-gap-lg); }
html:lang(ko) .pb-7 { padding-bottom: var(--ko-gap-lg); }
html:lang(ko) .pb-6 { padding-bottom: 14px; }
html:lang(ko) .pb-5 { padding-bottom: 12px; }
html:lang(ko) .pb-4 { padding-bottom: 12px; }
html:lang(ko) .pb-3 { padding-bottom: 10px; }

@media (min-width: 768px) {
  html:lang(ko) :is(.md\:py-10, .md\:py-12, .md\:py-14, .md\:py-16, .md\:py-20, .md\:py-24, .md\:py-28, .md\:py-32, .md\:py-40) {
    padding-top: var(--ko-section-y);
    padding-bottom: var(--ko-section-y);
  }
  html:lang(ko) :is(.md\:pt-10, .md\:pt-12, .md\:pt-16, .md\:pt-20, .md\:pt-24, .md\:pt-28, .md\:pt-32, .md\:pt-40) { padding-top: var(--ko-section-y); }
  html:lang(ko) :is(.md\:pb-10, .md\:pb-12, .md\:pb-16, .md\:pb-20, .md\:pb-24, .md\:pb-28, .md\:pb-32) { padding-bottom: var(--ko-section-y); }
  html:lang(ko) .md\:py-8 { padding-top: var(--ko-gap-lg); padding-bottom: var(--ko-gap-lg); }
  html:lang(ko) .md\:py-6 { padding-top: 14px; padding-bottom: 14px; }
  html:lang(ko) .md\:py-5 { padding-top: 12px; padding-bottom: 12px; }
  html:lang(ko) .md\:py-4 { padding-top: 12px; padding-bottom: 12px; }
}
@media (min-width: 1024px) {
  html:lang(ko) :is(.lg\:py-12, .lg\:py-16, .lg\:py-20, .lg\:py-24, .lg\:py-28, .lg\:py-32) {
    padding-top: var(--ko-section-y);
    padding-bottom: var(--ko-section-y);
  }
  html:lang(ko) :is(.lg\:pt-16, .lg\:pt-20, .lg\:pt-24, .lg\:pt-32, .lg\:pt-40) { padding-top: var(--ko-section-y); }
  html:lang(ko) :is(.lg\:pb-16, .lg\:pb-20, .lg\:pb-24, .lg\:pb-32) { padding-bottom: var(--ko-section-y); }
}

/* 4c. Card padding. */
html:lang(ko) .p-3 { padding: 10px; }
html:lang(ko) .p-4 { padding: 14px; }
html:lang(ko) .p-5 { padding: var(--ko-card-p); }
html:lang(ko) .p-6 { padding: var(--ko-card-p); }
html:lang(ko) .p-7 { padding: 18px; }
html:lang(ko) .p-8 { padding: var(--ko-card-p-lg); }
html:lang(ko) :is(.p-9, .p-10, .p-12) { padding: var(--ko-block-y); }
@media (min-width: 768px) {
  html:lang(ko) .md\:p-5 { padding: var(--ko-card-p); }
  html:lang(ko) .md\:p-6 { padding: var(--ko-card-p); }
  html:lang(ko) .md\:p-7 { padding: 18px; }
  html:lang(ko) .md\:p-8 { padding: var(--ko-card-p-lg); }
  html:lang(ko) :is(.md\:p-9, .md\:p-10, .md\:p-12, .md\:p-14, .md\:p-16) { padding: 24px; }
}
@media (min-width: 1024px) {
  html:lang(ko) .lg\:p-8 { padding: var(--ko-card-p-lg); }
  html:lang(ko) :is(.lg\:p-10, .lg\:p-12, .lg\:p-16) { padding: 24px; }
}

/* Horizontal padding: the 16px page gutter (px-4) stays; anything wider is
   a button or a card and comes down to the button token. */
html:lang(ko) .px-5 { padding-left: 16px; padding-right: 16px; }
html:lang(ko) .px-6 { padding-left: var(--ko-btn-px); padding-right: var(--ko-btn-px); }
html:lang(ko) .px-7 { padding-left: 20px; padding-right: 20px; }
html:lang(ko) .px-8 { padding-left: 20px; padding-right: 20px; }
html:lang(ko) :is(.px-10, .px-12) { padding-left: 24px; padding-right: 24px; }
html:lang(ko) .pl-5 { padding-left: 16px; }
html:lang(ko) .pl-6 { padding-left: 18px; }
html:lang(ko) .pl-8 { padding-left: 20px; }
html:lang(ko) .pr-6 { padding-right: 18px; }
html:lang(ko) .pr-8 { padding-right: 20px; }
@media (min-width: 640px) {
  html:lang(ko) .sm\:px-6 { padding-left: var(--ko-btn-px); padding-right: var(--ko-btn-px); }
  html:lang(ko) .sm\:px-8 { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 768px) {
  html:lang(ko) .md\:px-6 { padding-left: var(--ko-btn-px); padding-right: var(--ko-btn-px); }
  html:lang(ko) .md\:px-7 { padding-left: 20px; padding-right: 20px; }
  html:lang(ko) .md\:px-8 { padding-left: 20px; padding-right: 20px; }
  html:lang(ko) :is(.md\:px-10, .md\:px-12) { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
  html:lang(ko) .lg\:px-6 { padding-left: var(--ko-btn-px); padding-right: var(--ko-btn-px); }
  html:lang(ko) .lg\:px-8 { padding-left: 20px; padding-right: 20px; }
  html:lang(ko) :is(.lg\:px-10, .lg\:px-12) { padding-left: 24px; padding-right: 24px; }
}

/* 4d. Gaps between cards and list items. */
html:lang(ko) .gap-4 { gap: var(--ko-gap); }
html:lang(ko) .gap-5 { gap: 14px; }
html:lang(ko) .gap-6 { gap: var(--ko-gap-lg); }
html:lang(ko) .gap-7 { gap: var(--ko-gap-lg); }
html:lang(ko) .gap-8 { gap: var(--ko-gap-lg); }
html:lang(ko) :is(.gap-9, .gap-10) { gap: 20px; }
html:lang(ko) :is(.gap-12, .gap-14, .gap-16) { gap: 24px; }
html:lang(ko) .gap-x-4 { column-gap: var(--ko-gap); }
html:lang(ko) .gap-x-5 { column-gap: 14px; }
html:lang(ko) .gap-x-6 { column-gap: var(--ko-gap-lg); }
html:lang(ko) .gap-x-8 { column-gap: var(--ko-gap-lg); }
html:lang(ko) .gap-y-4 { row-gap: var(--ko-gap); }
html:lang(ko) .gap-y-5 { row-gap: 14px; }
html:lang(ko) .gap-y-6 { row-gap: var(--ko-gap-lg); }
html:lang(ko) .gap-y-8 { row-gap: var(--ko-gap-lg); }
@media (min-width: 768px) {
  html:lang(ko) .md\:gap-4 { gap: var(--ko-gap); }
  html:lang(ko) .md\:gap-5 { gap: 14px; }
  html:lang(ko) .md\:gap-6 { gap: var(--ko-gap-lg); }
  html:lang(ko) .md\:gap-8 { gap: var(--ko-gap-lg); }
  html:lang(ko) :is(.md\:gap-10, .md\:gap-12) { gap: 20px; }
}
@media (min-width: 1024px) {
  html:lang(ko) .lg\:gap-6 { gap: var(--ko-gap-lg); }
  html:lang(ko) .lg\:gap-8 { gap: var(--ko-gap-lg); }
  html:lang(ko) :is(.lg\:gap-10, .lg\:gap-12, .lg\:gap-16) { gap: 20px; }
}

html:lang(ko) .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 10px; }
html:lang(ko) .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: var(--ko-gap); }
html:lang(ko) .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 14px; }
html:lang(ko) .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: var(--ko-gap-lg); }
html:lang(ko) .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 20px; }
html:lang(ko) :is(.space-y-10, .space-y-12, .space-y-16) > :not([hidden]) ~ :not([hidden]) { margin-top: 24px; }
html:lang(ko) .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: var(--ko-gap); }
html:lang(ko) .space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: var(--ko-gap-lg); }

/* 4e. Margins between a heading, its intro and its content. */
html:lang(ko) .mb-3  { margin-bottom: 10px; }
html:lang(ko) .mb-4  { margin-bottom: var(--ko-gap); }
html:lang(ko) .mb-5  { margin-bottom: 14px; }
html:lang(ko) .mb-6  { margin-bottom: var(--ko-gap-lg); }
html:lang(ko) .mb-7  { margin-bottom: 18px; }
html:lang(ko) .mb-8  { margin-bottom: 20px; }
html:lang(ko) .mb-9  { margin-bottom: 22px; }
html:lang(ko) .mb-10 { margin-bottom: 24px; }
html:lang(ko) .mb-12 { margin-bottom: 28px; }
html:lang(ko) :is(.mb-14, .mb-16, .mb-20, .mb-24) { margin-bottom: 32px; }
html:lang(ko) .mt-3  { margin-top: 10px; }
html:lang(ko) .mt-4  { margin-top: var(--ko-gap); }
html:lang(ko) .mt-5  { margin-top: 14px; }
html:lang(ko) .mt-6  { margin-top: var(--ko-gap-lg); }
html:lang(ko) .mt-7  { margin-top: 18px; }
html:lang(ko) .mt-8  { margin-top: 20px; }
html:lang(ko) .mt-9  { margin-top: 22px; }
html:lang(ko) .mt-10 { margin-top: 24px; }
html:lang(ko) .mt-12 { margin-top: 28px; }
html:lang(ko) :is(.mt-14, .mt-16, .mt-20, .mt-24) { margin-top: 32px; }
html:lang(ko) .my-4  { margin-top: var(--ko-gap); margin-bottom: var(--ko-gap); }
html:lang(ko) .my-6  { margin-top: var(--ko-gap-lg); margin-bottom: var(--ko-gap-lg); }
html:lang(ko) .my-8  { margin-top: 20px; margin-bottom: 20px; }
html:lang(ko) :is(.my-10, .my-12) { margin-top: 24px; margin-bottom: 24px; }
html:lang(ko) :is(.my-16, .my-20) { margin-top: 32px; margin-bottom: 32px; }
@media (min-width: 768px) {
  html:lang(ko) .md\:mb-6  { margin-bottom: var(--ko-gap-lg); }
  html:lang(ko) .md\:mb-8  { margin-bottom: 20px; }
  html:lang(ko) .md\:mb-10 { margin-bottom: 24px; }
  html:lang(ko) .md\:mb-12 { margin-bottom: 28px; }
  html:lang(ko) :is(.md\:mb-14, .md\:mb-16, .md\:mb-20) { margin-bottom: 32px; }
  html:lang(ko) .md\:mt-6  { margin-top: var(--ko-gap-lg); }
  html:lang(ko) .md\:mt-8  { margin-top: 20px; }
  html:lang(ko) .md\:mt-10 { margin-top: 24px; }
  html:lang(ko) .md\:mt-12 { margin-top: 28px; }
  html:lang(ko) :is(.md\:mt-14, .md\:mt-16, .md\:mt-20) { margin-top: 32px; }
}
