/*
 * Wooshin Tutor typography layer.
 * The local round family keeps Korean text consistent across devices while
 * heavier display weights give headings a friendly, lightly cartooned voice.
 */

@font-face {
  font-family: "NanumSquareRound";
  src: url("/fonts/NanumSquareRoundOTFR.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "NanumSquareRound";
  src: url("/fonts/NanumSquareRoundOTFB.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "NanumSquareRound";
  src: url("/fonts/NanumSquareRoundOTFEB.otf") format("opentype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  --font-ui: "NanumSquareRound", "Arial Rounded MT Bold", "Apple SD Gothic Neo",
    "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-reading: var(--font-ui);
  --font-display: var(--font-ui);
  --font-code: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
}

html,
body {
  font-family: var(--font-ui);
}

body {
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea,
summary,
.nav,
.mobile-tabbar,
.badge,
.chip,
.meta,
.workspace-kicker,
.eyebrow {
  font-family: var(--font-ui);
}

/* Display type uses the same rounded skeleton at a more playful weight. */
:is(
  .school-brand-title,
  .home-welcome h1,
  .workspace-title-block h2,
  .workspace-section-head h2,
  .question-detail-title-copy h1,
  .community-post-detail .detail-title h1,
  .community-hero h2,
  .profile-identity h1,
  .notice-article-head h1,
  .quiz-hero h1,
  .auth-heading h1,
  .student-card-activation-head h1,
  .crawler-home h1
) {
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  letter-spacing: 0;
  word-break: keep-all;
}

/* Long-form school content stays rounded, but calmer than the display layer. */
:is(
  .question-body,
  .answer-content,
  .community-post-body,
  .notice-article-body,
  .notice-body-copy,
  .forum-rendered-document,
  .prose
) {
  font-family: var(--font-reading);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0;
}

/* Math and code keep their own precise glyph systems. */
:is(
  .question-body,
  .answer-content,
  .community-post-body,
  .notice-article-body,
  .notice-body-copy,
  .forum-rendered-document,
  .prose
) :is(code, pre, kbd, samp) {
  font-family: var(--font-code);
}

/* Reduce the rigid, poster-like weight left by older global style layers. */
:is(
  .home-search-panel h2,
  .workspace-title-block h2,
  .workspace-section-head h2,
  .section-title h2,
  .community-create-form-head strong,
  .question-detail-title-copy h1,
  .notice-article-head h1,
  .profile-identity h1
) {
  font-weight: 800;
}

:is(
  .app-shell,
  .auth-wrap,
  .crawler-home
) :is(button, summary, .badge, .chip, .small-button) {
  font-weight: 700;
}

/* Keep the login title on the same visual axis as the school mark. */
.auth-wrap.auth-mode-login .auth-heading,
.auth-wrap.auth-login-only .auth-heading {
  width: 100%;
  justify-items: center;
  text-align: center;
}

.auth-wrap.auth-mode-login .auth-heading h1,
.auth-wrap.auth-login-only .auth-heading h1 {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 800;
  text-align: center;
}

.auth-wrap.auth-mode-login .auth-heading p,
.auth-wrap.auth-login-only .auth-heading p {
  text-align: center;
}

.auth-card .tabs button,
.auth-card .form > .primary {
  display: grid;
  place-items: center;
  padding-block: 0;
  line-height: 1;
}

@media (max-width: 760px) {
  :is(
    .home-welcome h1,
    .workspace-title-block h2,
    .question-detail-title-copy h1,
    .notice-article-head h1,
    .profile-identity h1
  ) {
    line-height: 1.34;
  }

  :is(
    .question-body,
    .answer-content,
    .community-post-body,
    .notice-article-body,
    .forum-rendered-document
  ) {
    line-height: 1.68;
  }
}