/* Base typography scale -- design-handoffs/asportal-public/design-guide/
   Portal_Font.css. PC/Tablet sizes are numerically identical to
   asportal-admin's own typography.css scale; the only new thing here is a real
   Mobile (<=767px) tier, which admin has no equivalent of.

   Per the guide's own note ("PC Body 3 → Mobile Body 2로 통합"): Body3
   does not get its own mobile size, it merges into Mobile's Body2 (14px)
   instead -- so .type-body-3-* simply shares Body2's mobile override
   below rather than defining a separate, third 14px rule. H2/H3/Body1/
   Caption are unchanged at every breakpoint (not overridden below at
   all). */

/* Base font, not just the .type-* utility classes below -- html/body never
   had this set anywhere, so every element was relying on either its own
   explicit font-family or plain inheritance. That gap was invisible in
   Chromium (falls through to a generic sans font either way) but broke
   for real on WebKit/iOS Safari: a native <dialog> renders in the
   browser's "top layer", which doesn't reliably inherit font-family from
   its DOM ancestors there, so any element inside a dialog that didn't
   set its own font-family (e.g. .form-value's plain text content)
   rendered in WebKit's own `-webkit-standard` default instead of ours --
   confirmed via getComputedStyle (body/html themselves also came back
   `-webkit-standard`) on a real iPhone 16 Safari report where 교육 신청's
   popup text looked like a different, wrong (serif-resolving) font.
   Setting it here, once, at the root removes the dependency on every
   individual element remembering to declare it. */
html,
body {
  font-family: var(--font-family);
}

.type-h1,
.type-h2,
.type-h3,
.type-body-1-bold,
.type-body-1-medium,
.type-body-1-regular,
.type-body-2-bold,
.type-body-2-medium,
.type-body-2-regular,
.type-body-3-bold,
.type-body-3-regular,
.type-caption-bold,
.type-caption-regular {
  font-family: var(--font-family);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-secondary);
}

.type-h1 { margin: 0 0 24px; font-size: 24px; font-weight: 700; line-height: 1.4; }
.type-h2 { font-size: 20px; font-weight: 700; line-height: 1.5; }
.type-h3 { font-size: 18px; font-weight: 700; line-height: 1.5; }

.type-body-1-bold    { font-size: 16px; font-weight: 700; line-height: 1.5; }
.type-body-1-medium  { font-size: 16px; font-weight: 500; line-height: 1.5; }
.type-body-1-regular { font-size: 16px; font-weight: 400; line-height: 1.5; }

.type-body-2-bold    { font-size: 15px; font-weight: 700; line-height: 1.5; }
.type-body-2-medium  { font-size: 15px; font-weight: 500; line-height: 1.5; }
.type-body-2-regular { font-size: 15px; font-weight: 400; line-height: 1.5; }

.type-body-3-bold    { font-size: 14px; font-weight: 700; line-height: 1.5; }
.type-body-3-regular { font-size: 14px; font-weight: 400; line-height: 1.5; }

.type-caption-bold    { font-size: 12px; font-weight: 700; line-height: 1.5; }
.type-caption-regular { font-size: 12px; font-weight: 400; line-height: 1.5; }

@media (max-width: 767px) {
  .type-h1 { font-size: 22px; }

  .type-body-2-bold,
  .type-body-2-medium,
  .type-body-2-regular,
  .type-body-3-bold,
  .type-body-3-regular {
    font-size: 14px;
  }
}