@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Gowun+Dodum&family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@400;500;600;700;800&family=Noto+Serif+KR:wght@600;700;900&display=swap");

:root {
  --haru-font-body: "Gowun Dodum", "Noto Sans KR", "Apple SD Gothic Neo",
    "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --haru-font-ui: "Noto Sans KR", "Apple SD Gothic Neo", "Noto Sans",
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --haru-font-display: "Gowun Batang", "Noto Serif KR", "Noto Serif",
    "AppleMyungjo", "Batang", Georgia, serif;
  --haru-font-hand: "Nanum Pen Script", "Segoe Print", "Bradley Hand",
    "Apple SD Gothic Neo", cursive;
  --haru-font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Keep the existing design-token names compatible across legacy pages. */
  --font-ko: var(--haru-font-body);
  --font-en: var(--haru-font-body);
  --font-global: var(--haru-font-body);
  --font-body: var(--haru-font-body);
  --font-display: var(--haru-font-display);
  --haru-ui-font: var(--haru-font-ui);
  --haru-nav-font: var(--haru-font-ui);
  --md-sys-typescale-display-font: var(--haru-font-display);
  --md-sys-typescale-body-font: var(--haru-font-body);
  --md-sys-typescale-label-font: var(--haru-font-body);
  --ref-body: var(--haru-font-body);
  --ref-hand: var(--haru-font-hand);
}

html,
body {
  font-family: var(--haru-font-body) !important;
}

button,
input,
select,
textarea,
option {
  font-family: var(--haru-font-ui) !important;
  font-weight: 600;
}

body :where(div, span, p, a, li, dt, dd, label, legend, small, strong, b, em, time, blockquote, figcaption, summary) {
  font-family: inherit;
}

body {
  letter-spacing: -.006em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.page-title,
.section-heading,
.admin-header h1,
.video-hero h1,
.result-title,
.character-title {
  font-family: var(--haru-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  word-break: keep-all;
}

h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 * {
  font-family: inherit !important;
}

.haru-main-topbar__brand,
.brand,
.logo,
.wordmark {
  font-family: var(--haru-font-display) !important;
  font-weight: 700 !important;
}

:where(nav, .nav, .site-nav, .desktop-nav, .haru-main-topbar, .bottom-nav, .haru-bottom-nav) :where(a, button),
:where(.btn, .button, .cta, button, input, select, textarea) {
  font-family: var(--haru-font-ui) !important;
  font-weight: 600;
}

nav a:not(.brand),
.nav a:not(.brand),
.site-nav a:not(.brand),
.desktop-nav a:not(.brand),
.haru-main-topbar a:not(.brand),
.bottom-nav a:not(.brand),
.haru-bottom-nav a:not(.brand) {
  font-family: var(--haru-font-ui) !important;
  font-weight: 600 !important;
}

:where(strong, b, label, legend, summary, .eyebrow, .badge, .chip, .status, .metric-value) {
  font-family: var(--haru-font-ui) !important;
  font-weight: 700 !important;
}

:where(small, time, figcaption, .meta, .muted, .subtitle, .lead, .description, .helper-text) {
  color: #536b63;
  font-family: var(--haru-font-ui) !important;
  font-weight: 500;
}

.narration-lead,
.diary-textarea,
.story-text,
[data-haru-diary],
.haru-diary-text {
  font-family: var(--haru-font-hand) !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  line-height: 1.78 !important;
}

code,
pre,
kbd,
samp,
.ops-pre {
  font-family: var(--haru-font-mono) !important;
}

code *,
pre *,
kbd *,
samp *,
.ops-pre * {
  font-family: inherit !important;
}

@media (max-width: 600px) {
  /* Inline anchors ignore min-height. Give the measured small navigation,
     culture titles and policy links a real touch box without changing cards,
     video count, animation or typography roles. */
  :where(nav, .nav, .haru-main-topbar, .bottom-nav, .haru-bottom-nav) :where(a, button),
  main > a:first-child,
  .card h3 > a,
  main p > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px !important;
    min-width: 44px !important;
  }
  input[type="search"] {
    min-height: 44px !important;
  }

  body {
    letter-spacing: 0;
  }

  h1,
  h2,
  h3 {
    letter-spacing: -.018em !important;
  }
}

@media (prefers-reduced-data: reduce) {
  :root {
    --haru-font-body: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
    --haru-font-display: "AppleMyungjo", "Batang", Georgia, serif;
    --haru-font-hand: "Segoe Print", "Apple SD Gothic Neo", cursive;
  }
}