@font-face {
  font-family: 'BMEULJIROTTF';
  src: url('./fonts/BMEULJIROTTF.ttf') format('truetype');
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./fonts/Pretendard-Light.otf') format('opentype');
  font-style: normal; font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./fonts/Pretendard-ExtraBold.otf') format('opentype');
  font-style: normal; font-weight: 800; font-display: swap;
}
:root { --serif: 'Pretendard', sans-serif; font-family: 'Pretendard', sans-serif; font-weight: 300; }
body, button, input, textarea { font-family: 'Pretendard', sans-serif; font-weight: 300; font-synthesis: none; }
.brand, .brand span, h1, h2, h3, .step-number, .record-top strong,
.primary-button, .record-actions>.outline-button, .setting-label>label,
.duration-card>span, .duration-card output, .orbit-content b {
  font-family: 'Pretendard', sans-serif; font-weight: 800; font-synthesis: none;
}
.brand span { font-size: inherit; margin-left: -5px; }
.hero h1 { font-family: 'BMEULJIROTTF', sans-serif; font-weight: 400; font-synthesis: none; }
.hero-art>span, .bottom-note, .input-footer, .input-footer b,
.setting-label output, .time-line, .orbit-content>span:last-child {
  font-family: 'Pretendard', sans-serif; font-weight: 300;
}
#prayer, #listen-prayer {
  font-family: 'BMEULJIROTTF', sans-serif; font-weight: 400; font-synthesis: none;
  letter-spacing: 0; line-height: 1.7;
}
#prayer { font-size: 23px; }
#listen-prayer { font-size: 29px; }
#listen-title { font-family: 'Pretendard', sans-serif; font-weight: 300; }
@media(max-width:440px) {
  .brand { font-size: 20px; letter-spacing: -.8px; }
  .brand svg { width: 29px; height: 29px; }
  .brand { gap: 7px; }
  #listen-prayer { font-size: 27px; }
}
.hero h1 { font-size: 48px; }
.hero p { font-size: 24px; }
.step-heading .step-number { font-size: 19.5px; }
.step-heading h2 { font-size: 23.4px; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
@media(min-width:600px) { .hero h1 { font-size: 52.5px; } }
@media(max-width:440px) {
  .hero h1 { font-size: 40.5px; }
  .hero p { font-size: 21px; }
  .step-heading .step-number { font-size: 18.2px; }
  .step-heading h2 { font-size: 22.1px; }
}
@media(max-width:350px) { .hero h1 { font-size: 39px; } }