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

/*
  HARU brand system — the final, shared typography and interaction layer.
  Page layouts may differ by purpose, but text roles and controls must not.
*/
:root {
  --haru-brand-mint: #2db896;
  --haru-brand-mint-deep: #2f8f78;
  --haru-brand-mint-soft: #e9fff8;
  --haru-brand-ivory: #fffaf2;
  --haru-brand-ink: #18342d;
  --haru-brand-muted: #536b63;
  --haru-brand-line: rgba(47, 159, 130, .18);
  --haru-brand-font-body: "Gowun Dodum", "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --haru-brand-font-ui: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --haru-brand-font-story: "Noto Serif KR", "Gowun Batang", Georgia, serif;

  /* Compatibility aliases used by older page-specific layers. */
  --font-body: var(--haru-brand-font-body);
  --font-display: var(--haru-brand-font-story);
  --font-story: var(--haru-brand-font-story);
  --haru-body: var(--haru-brand-font-body);
  --haru-serif: var(--haru-brand-font-story);
  --haru-ui-font: var(--haru-brand-font-ui);
  --haru-ui-font-display: var(--haru-brand-font-story);
}

html {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body {
  color: var(--haru-brand-ink);
  font-family: var(--haru-brand-font-body) !important;
  font-weight: 400;
  line-height: 1.7;
}

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

h1, h2, h3,
.hero-title, .page-title, .section-title, .card-title, .brand-title {
  color: var(--haru-brand-ink);
  font-family: var(--haru-brand-font-story) !important;
  font-synthesis: none;
  letter-spacing: -.025em !important;
  word-break: keep-all;
}

h1, .hero-title, .page-title {
  font-weight: 700 !important;
  line-height: 1.14 !important;
}

h2, h3, .section-title, .card-title {
  font-weight: 700 !important;
  line-height: 1.32 !important;
}

:where(nav, .nav, .site-nav, .desktop-nav, .haru-main-topbar, .bottom-nav, .haru-bottom-nav),
: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-brand-font-ui) !important;
  font-weight: 600;
  letter-spacing: 0 !important;
}

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-brand-font-ui) !important;
  font-weight: 600 !important;
}

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

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

:where(.brand, .logo, .wordmark, .haru-main-topbar__brand) {
  font-weight: 800 !important;
}

:where(a, button, .btn, .button, .cta, input[type="button"], input[type="submit"], select) {
  min-height: 44px !important;
}

:where(a, button, .btn, .button, .cta):focus-visible {
  outline: 3px solid rgba(45, 184, 150, .32);
  outline-offset: 3px;
}

::selection {
  color: var(--haru-brand-ink);
  background: rgba(127, 255, 212, .48);
}

@media (max-width: 720px) {
  h1, .hero-title, .page-title {
    font-size: clamp(32px, 9vw, 44px) !important;
  }

  :where(header, nav, .nav, .site-nav, .desktop-nav, .haru-main-topbar, .bottom-nav, .haru-bottom-nav, footer, .footer) :where(a, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px !important;
  }

  /* Policy/support pages keep their compact editorial layout, but the
     standalone brand and account/support links still need a real tap box. */
  main > a:first-child,
  #ticket-login-note a,
  main a[href="/contact"],
  main a[href="/ko/contact"],
  main a[href="/en/contact"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* Shared catalogue surface: preserve each page's grid density and animations. */
body.ref-gallery, body:has(.community-shell) {
  background: linear-gradient(180deg, #f4fbf8, var(--haru-brand-ivory));
}
.char-card, .community-card {
  border: 1px solid var(--haru-brand-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(47,79,68,.055) !important;
}
.char-card__body, .community-card__body {
  padding: 12px !important;
  background: #fff !important;
}
body.ref-gallery .char-card__name, .community-card h3 {
  font-family: var(--haru-brand-font-ui) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--haru-brand-ink) !important;
}
.community-card p, .char-card__meta {
  font-family: var(--haru-brand-font-ui) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--haru-brand-muted) !important;
}
.community-shell {
  width: min(1400px, calc(100% - 32px));
  padding-inline: 0;
}
.community-intro {
  padding: 16px 20px !important;
  margin-bottom: 8px !important;
}
.community-intro h1 {
  font-size: clamp(24px, 3vw, 32px) !important;
  margin: 4px 0 !important;
}
.community-guide-details {
  margin: 8px 0;
  border: 1px solid var(--haru-brand-line);
  border-radius: 16px;
  background: rgba(255,255,255,.85);
}
.community-guide-details > summary {
  min-height: 44px;
  padding: 10px 16px;
  cursor: pointer;
  font-family: var(--haru-brand-font-ui);
  font-size: 14px;
  font-weight: 600;
}
.community-guide-details[open] { padding-bottom: 12px; }
.community-guide-details .community-discovery,
.community-guide-details .world-overview { margin: 8px 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}