/*
  Shared typography contract for Diablo IV pages.
  This file is loaded after app-level CSS, so shared text roles stay aligned.
*/

:root {
  --d4-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --d4-font-serif-ko: "Hahmlet", "AppleMyungjo", "Batang", "Nanum Myeongjo", serif;
  --d4-font-serif-en: "Lora", Georgia, "Times New Roman", serif;
  --d4-letter-body: -0.015em;
  --d4-line-body: 1.65;
  --d4-weight-regular: 400;
  --d4-weight-medium: 500;
  --d4-weight-semibold: 600;
  --d4-weight-bold: 700;
  --d4-weight-heavy: 600;
  --d4-size-ui-2xs: 0.56rem;
  --d4-size-ui-xs: 0.7rem;
  --d4-size-ui-sm: 0.72rem;
  --d4-size-ui-md: 0.76rem;
  --d4-size-ui-lg: 0.78rem;
  --d4-size-body-sm: 0.85rem;
  --d4-size-body-md: 0.9rem;
  --d4-size-body-lg: 0.95rem;
  --d4-size-body-xl: 1rem;
  --d4-size-result: 0.84rem;
  --d4-size-result-sub: 0.74rem;
}

body {
  font-family: var(--d4-font-sans);
  line-height: var(--d4-line-body);
  letter-spacing: var(--d4-letter-body);
}

button,
input,
select,
textarea {
  font-family: var(--d4-font-sans);
}

strong {
  font-weight: var(--d4-weight-bold);
}

.brand-kicker {
  font-size: 0.75rem;
  font-weight: var(--d4-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.brand-title {
  font-size: 1.1rem;
  font-weight: var(--d4-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.brand-meta {
  font-size: var(--d4-size-ui-lg);
  font-weight: var(--d4-weight-regular);
  line-height: 1.55;
}

.side-nav a {
  font-size: var(--d4-size-body-lg);
  font-weight: var(--d4-weight-medium);
}

.side-nav a.is-sub {
  font-size: 0.86rem;
}

.side-nav a.is-active,
.side-nav a:hover,
.mobile-menu-panel .side-nav a:hover,
.mobile-menu-panel .side-nav a.is-active {
  font-weight: var(--d4-weight-semibold);
}

.creator-contact-action {
  font-size: var(--d4-size-ui-lg);
  font-weight: var(--d4-weight-regular);
}

.creator-contact-value {
  line-height: 1;
}

.creator-contact-status,
.mini-tooltip-popover {
  font-size: var(--d4-size-ui-sm);
}

.mini-tooltip-popover {
  font-weight: 650;
  line-height: 1.35;
}

.language-option {
  font-size: var(--d4-size-ui-md);
  font-weight: var(--d4-weight-regular);
  line-height: 1;
}

.theme-option {
  font-size: var(--d4-size-ui-sm);
  font-weight: var(--d4-weight-regular);
  line-height: 1;
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: var(--d4-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
}

h1 {
  font-size: clamp(2.35rem, 4.2vw, 3.35rem);
  font-weight: var(--d4-weight-heavy);
  line-height: 1.1;
  letter-spacing: 0;
}

.subtitle {
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  font-weight: var(--d4-weight-regular);
  line-height: 1.6;
}

.meta-row {
  font-size: 0.86rem;
  font-weight: var(--d4-weight-semibold);
  letter-spacing: 0.01em;
}

.notice {
  font-size: var(--d4-size-body-lg);
}

.hero-notice {
  width: 100%;
  max-width: none;
  margin-top: 22px;
  margin-bottom: 0;
  box-sizing: border-box;
  font-weight: var(--d4-weight-regular);
  line-height: 1.65;
}

.section-title h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--d4-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.section-title p {
  font-size: var(--d4-size-body-xl);
}

.info-row h3,
.pool-reference-title {
  font-size: 0.96rem;
  font-weight: var(--d4-weight-heavy);
  line-height: 1.4;
}

.info-row p {
  font-size: 0.94rem;
}

.pool-reference-label {
  font-size: var(--d4-size-ui-lg);
  font-weight: var(--d4-weight-semibold);
}

.pool-reference-meta {
  font-size: var(--d4-size-ui-lg);
  font-weight: var(--d4-weight-semibold);
  line-height: 1.45;
}

.small {
  font-size: var(--d4-size-body-sm);
}

.en {
  font-size: var(--d4-size-body-md);
}

.ko {
  font-weight: var(--d4-weight-semibold);
}

.control-label {
  font-size: var(--d4-size-ui-md);
  font-weight: var(--d4-weight-regular);
  letter-spacing: 0;
}

.search-box {
  font-size: var(--d4-size-body-xl);
}

.custom-select-trigger {
  font-size: 0.86rem;
  font-weight: var(--d4-weight-regular);
  line-height: 1;
  text-align: left;
}

.search-scope-button,
.keyword-mode-button {
  font-size: var(--d4-size-ui-xs);
  font-weight: var(--d4-weight-regular);
  line-height: 1;
  white-space: nowrap;
}

.view-button {
  font-weight: var(--d4-weight-regular);
}

.keyword-more-button,
.keyword-clear-button {
  font-size: 0.73rem;
  font-weight: var(--d4-weight-heavy);
}

.keyword-group-label {
  font-size: var(--d4-size-ui-sm);
  font-weight: var(--d4-weight-regular);
  line-height: 1.35;
}

.keyword-chip {
  font-size: var(--d4-size-ui-xs);
  font-weight: var(--d4-weight-regular);
  line-height: 1;
  white-space: nowrap;
}

.keyword-active-text {
  font-size: var(--d4-size-ui-lg);
  font-weight: var(--d4-weight-regular);
}

.checkbox-control {
  font-size: var(--d4-size-body-sm);
  font-weight: var(--d4-weight-bold);
  line-height: 1.25;
}

.filter-summary {
  font-size: 0.8rem;
  font-weight: var(--d4-weight-semibold);
  line-height: 1.25;
}

.result-meta {
  font-size: var(--d4-size-body-sm);
}

.boss-name {
  font-weight: var(--d4-weight-bold);
}

.drop-group-title {
  font-size: 1.2rem;
  font-weight: var(--d4-weight-heavy);
  line-height: 1.35;
}

.drop-group-count {
  font-size: var(--d4-size-ui-lg);
  font-weight: var(--d4-weight-regular);
  line-height: 1.45;
}

.drop-row-title {
  font-size: var(--d4-size-body-lg);
  font-weight: var(--d4-weight-bold);
  line-height: 1.45;
}

.drop-row-summary,
.empty-state {
  font-size: var(--d4-size-body-md);
}

.pill {
  font-size: var(--d4-size-result);
  font-weight: var(--d4-weight-semibold);
}

.item-ko {
  line-height: 1;
}

.pill .item-en {
  font-size: var(--d4-size-result-sub);
  font-weight: var(--d4-weight-medium);
  line-height: 1;
}

.match-context {
  font-size: var(--d4-size-result-sub);
  font-weight: var(--d4-weight-regular);
  line-height: 1.45;
}

.match-context .match-mark {
  font-weight: var(--d4-weight-bold);
}

.item-tooltip-popover {
  font-family: var(--d4-font-serif-ko);
}

.item-tooltip-title-en,
.item-tooltip-popover[data-locale="en"] {
  font-family: var(--d4-font-serif-en);
}

.item-tooltip-section h3 {
  font-size: var(--d4-size-result-sub);
  font-weight: var(--d4-weight-bold);
  line-height: 1.35;
}

.item-tooltip-flavor {
  font-size: 0.8rem;
  line-height: 1.52;
}

.modal-title {
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.modal-label {
  font-size: var(--d4-size-ui-lg);
  font-weight: var(--d4-weight-bold);
}

.modal-value {
  font-size: var(--d4-size-body-lg);
  font-weight: var(--d4-weight-semibold);
  line-height: 1.5;
}

.modal-value.en {
  font-weight: var(--d4-weight-medium);
}

@media (max-width: 860px) {
  .mobile-header-title {
    font-size: 0.98rem;
    font-weight: var(--d4-weight-heavy);
    line-height: 1.2;
    letter-spacing: 0;
  }

  .mobile-menu-panel .side-nav a {
    font-size: var(--d4-size-body-lg);
    font-weight: var(--d4-weight-medium);
    line-height: 1.25;
  }

  .mobile-menu-panel .side-nav a.is-sub {
    font-size: 0.86rem;
    font-weight: var(--d4-weight-medium);
  }

  .mobile-menu-panel .language-option,
  .mobile-menu-panel .theme-option {
    font-size: var(--d4-size-ui-xs);
  }

  .top-button-label {
    font-size: var(--d4-size-ui-2xs);
  }

  h1 {
    font-size: 2.08rem;
    line-height: 1.14;
  }

  .subtitle {
    font-size: 0.96rem;
    line-height: 1.58;
  }

  .section-title h2 {
    font-size: 1.46rem;
    line-height: 1.24;
  }

  .section-title p {
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .mobile-filter-button {
    font-size: 0.82rem;
    letter-spacing: 0;
  }

  .filter-sheet-title {
    font-size: var(--d4-size-body-lg);
    font-weight: var(--d4-weight-heavy);
  }

  .filter-sheet-close {
    font-size: 1.48rem;
    font-weight: var(--d4-weight-medium);
    line-height: 0;
  }

  .tool-panel .control-label {
    font-size: var(--d4-size-ui-sm);
  }

  .search-scope-button,
  .keyword-mode-button {
    font-size: 0.68rem;
  }

  .tool-panel .search-box {
    font-size: 0.92rem;
  }

  .keyword-more-button,
  .keyword-clear-button {
    font-size: var(--d4-size-ui-sm);
  }

  .keyword-chip {
    font-size: 0.69rem;
  }

  .tool-panel .view-button {
    font-size: 0.84rem;
  }

  .checkbox-control {
    font-size: 0.8rem;
  }

  .tool-panel select,
  #reset-button {
    font-size: 0.84rem;
  }

  td {
    font-size: 0.92rem;
    line-height: 1.55;
  }

  td:first-child {
    font-size: 0.98rem;
    font-weight: var(--d4-weight-bold);
  }

  td::before {
    font-size: var(--d4-size-ui-lg);
    font-weight: var(--d4-weight-semibold);
    letter-spacing: 0;
    line-height: 1.3;
  }

  .pill {
    font-size: 0.82rem;
  }

  .match-context {
    font-size: var(--d4-size-ui-sm);
  }

  .drop-group-title {
    font-size: 1rem;
  }
}