/*
 * English-only typography tuning.
 * KOHIBaeum is loaded as one static Regular face (400) in common.css. Keep its
 * character while preventing the browser from fabricating heavier weights.
 * The language-scoped selectors outrank page styles loaded after the shared head.
 * Korean pages never load this file.
 */
html[lang="en"] body {
  font-family: var(--font-english);
  font-weight: 400;
  font-synthesis: none;
}

html[lang="en"] body > header :not(i):not(svg):not([class*="fa-"]),
html[lang="en"] body > main:is(
  .main-page,
  .company-page,
  .crux-product,
  .support-page,
  .inquiry-page,
  .privacy-page,
  .content-detail-page,
  .login-page
) :not(i):not(svg):not([class*="fa-"]),
html[lang="en"] body > .footer :not(i):not(svg):not([class*="fa-"]) {
  font-weight: 400;
}

html[lang="en"] body > header {
  font-synthesis: none;
}

html[lang="en"] body > header #main_menu ul {
  gap: clamp(20px, 3vw, 48px);
}

html[lang="en"] body > header #main_menu a {
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -.015em;
}

html[lang="en"] body > header #main_menu .header-submenu a {
  font-size: 14px;
}

html[lang="en"] body > header .header-language a {
  font-size: 13px;
}

html[lang="en"] body > header .mobile-menu-title span {
  font-size: 12px;
}

html[lang="en"] body > header .mobile-menu-title strong {
  font-size: 30px;
  line-height: 1.3;
}

html[lang="en"] body > header .mobile-menu-links a {
  font-size: 18px;
  line-height: 1.45;
}

html[lang="en"] body > header .mobile-menu-links .mobile-submenu a {
  font-size: 15px;
}

html[lang="en"] body > header .mobile-menu-language a {
  font-size: 13px;
}

html[lang="en"] body > main:is(.main-page, .company-page, .support-page, .inquiry-page, .privacy-page) :is(
  .company-title-area h1,
  .support-title-area h1,
  .inquiry-title-area h1,
  .privacy-title-area h1
) {
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: clamp(44px, 4.95vw, 76px);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main:is(.company-page, .support-page, .inquiry-page, .privacy-page) :is(
  .company-breadcrumb,
  .support-breadcrumb,
  .inquiry-breadcrumb,
  .privacy-breadcrumb
) {
  flex-wrap: wrap;
  row-gap: 8px;
  font-size: 14px;
  line-height: 1.5;
}

html[lang="en"] body > main:is(.company-page, .support-page) :is(.company-tabs a, .support-tabs a) {
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.35;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

/* Homepage */
html[lang="en"] body > main.main-page .hero h1 {
  font-size: 22px;
  line-height: 1.45;
  letter-spacing: -.01em;
}

html[lang="en"] body > main.main-page .welcome h2 {
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: -.02em;
}

html[lang="en"] body > main.main-page :is(.hero p, .about-copy p, .welcome p, .vision-list p) {
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.main-page .main-button {
  max-width: 100%;
  min-height: 44px;
  padding: 10px 26px;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-align: center;
}

html[lang="en"] body > main.main-page :is(.about-copy h2, .vision-copy h2, .section-heading h2) {
  font-size: clamp(28px, 2.35vw, 34px);
  line-height: 1.35;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.main-page .vision-list article {
  min-width: 0;
}

html[lang="en"] body > main.main-page .metric-grid strong {
  height: auto;
  font-size: clamp(42px, 4vw, 56px);
  line-height: 1.2;
  letter-spacing: -.025em;
}

html[lang="en"] body > main.main-page .metric-grid > div > span {
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.4;
  letter-spacing: -.01em;
}

html[lang="en"] body > main.main-page .section-heading em {
  font-size: 19px;
  line-height: 1.45;
}

html[lang="en"] body > main.main-page .content-card h3 {
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.main-page .content-card time {
  font-size: 15px;
}

/* Company profile and history */
html[lang="en"] body > main.company-page .company-greeting-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
}

html[lang="en"] body > main.company-page .company-greeting-copy h2 {
  margin-bottom: 22px;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -.01em;
  word-break: normal;
}

html[lang="en"] body > main.company-page .company-greeting-copy p {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.company-page .company-information article div span {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}

html[lang="en"] body > main.company-page .company-information article strong {
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: -.01em;
  word-break: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.company-page .history-content h2 {
  min-height: 0;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.4;
  letter-spacing: -.02em;
  word-break: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.company-page .history-row h3 {
  font-size: 38px;
  line-height: 1.25;
  letter-spacing: -.02em;
}

html[lang="en"] body > main.company-page .history-events p {
  min-height: 68px;
  height: auto;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 16px;
  line-height: 1.5;
  word-break: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.company-page .history-events p span {
  flex: 0 0 auto;
}

/* Product pages */
html[lang="en"] body > main.crux-product .crux-intro h3 {
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -.01em;
}

html[lang="en"] body > main.crux-product :is(.crux-intro p, .crux-feature-track article > div) {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.crux-product :is(
  .crux-feature-area > h2,
  .crux-plates-section > h2,
  .crux-certification h2,
  .crux-specification > h2
) {
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.35;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.crux-product .crux-feature-track h3 {
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.crux-product .crux-plate-spec > :is(strong, span),
html[lang="en"] body > main.crux-product :is(.crux-specification, .cruxcanmax-specification) :is(dt, dd) {
  font-size: 17px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.crux-product .crux-model-label {
  font-size: clamp(22px, 2.7vw, 34px);
  line-height: 1.35;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.crux-product .crux-certification span {
  font-size: clamp(18px, 2.1vw, 27px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Support lists, tabs, filters and tables */
html[lang="en"] body > main.support-page :is(.support-count, .download-filter strong) {
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.01em;
}

html[lang="en"] body > main.support-page .support-card h2 {
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.01em;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.support-page .notice-row {
  font-size: 16px;
  line-height: 1.55;
}

html[lang="en"] body > main.support-page .notice-row strong,
html[lang="en"] body > main.support-page .download-row strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.support-page .download-filter input {
  font-size: 17px;
  line-height: 1.5;
}

html[lang="en"] body > main.support-page .download-row {
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.support-page .download-row a {
  font-size: 12px;
  line-height: 1.3;
}

html[lang="en"] body > main.support-page .support-pagination-pages > :is(a, span) {
  font-size: 17px;
}

/* Contact form */
html[lang="en"] body > main.inquiry-page .inquiry-field > :is(label, span) {
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.inquiry-page :is(input, textarea) {
  font-size: 16px;
  line-height: 1.6;
}

html[lang="en"] body > main.inquiry-page .inquiry-consent {
  font-size: 15px;
  line-height: 1.6;
}

html[lang="en"] body > main.inquiry-page .inquiry-consent h2 {
  font-size: 16px;
  line-height: 1.45;
}

html[lang="en"] body > main.inquiry-page .inquiry-consent-details,
html[lang="en"] body > main.inquiry-page .inquiry-consent-refusal {
  font-size: 14px;
}

html[lang="en"] body > main.inquiry-page .inquiry-consent-checkbox {
  font-size: 14px;
  line-height: 1.55;
}

html[lang="en"] body > main.inquiry-page .inquiry-consent-link {
  font-size: 12px;
}

html[lang="en"] body > main.inquiry-page .inquiry-actions button {
  font-size: 17px;
  letter-spacing: -.01em;
}

/* Privacy policy and content details */
html[lang="en"] body > main.privacy-page :is(.privacy-intro p, .privacy-section p, .privacy-section li) {
  font-size: 16px;
  line-height: 1.75;
  word-break: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.privacy-page .privacy-section h2 {
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.privacy-page .privacy-section h3 {
  font-size: 17px;
  line-height: 1.5;
}

html[lang="en"] body > main.privacy-page :is(.privacy-table-wrap table, .privacy-contact dt, .privacy-contact dd) {
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.content-detail-page :is(.product-detail-title-area h1, .support-detail-title-area h1) {
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: clamp(44px, 4.95vw, 76px);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.content-detail-page :is(.product-detail-breadcrumb, .support-detail-breadcrumb) {
  flex-wrap: wrap;
  row-gap: 8px;
  font-size: 14px;
  line-height: 1.5;
}

html[lang="en"] body > main.content-detail-page :is(.notice-detail-head h2, .gallery-detail-head h2) {
  font-size: clamp(25px, 2.5vw, 32px);
  line-height: 1.45;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.content-detail-page :is(.notice-detail-summary, .content-detail-editor) {
  font-size: 16px;
  line-height: 1.75;
  word-break: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.content-detail-page :is(.product-detail-info h1) {
  font-size: clamp(32px, 3.1vw, 44px);
  line-height: 1.25;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.content-detail-page .product-detail-description {
  font-size: 16px;
  line-height: 1.7;
  word-break: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] body > main.content-detail-page :is(.product-purchase-link, .content-detail-back) {
  font-size: 15px;
  line-height: 1.4;
}

/* The English footer has longer company details and navigation labels. */
html[lang="en"] body > .footer .footer-inner {
  gap: clamp(32px, 5vw, 88px);
}

html[lang="en"] body > .footer .footer-nav {
  flex-wrap: wrap;
  gap: 12px 24px;
}

html[lang="en"] body > .footer .footer-nav a {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.01em;
  white-space: normal;
}

html[lang="en"] body > .footer .footer-info {
  min-height: 0;
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* Admin sign-in is not part of the public site, but has an English locale. */
html[lang="en"] body > main.login-page :is(.login_visual_text strong, .login_title) {
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1.3;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

@media (max-width: 1360px) {
  html[lang="en"] body > main.company-page .company-greeting-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 52px);
  }
}

@media (max-width: 1100px) {
  html[lang="en"] body > header #main_menu ul {
    gap: clamp(18px, 2.3vw, 30px);
  }

  html[lang="en"] body > main.company-page .history-row {
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    gap: 28px;
  }

  html[lang="en"] body > main.crux-product .crux-intro-grid {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 50px);
  }

  html[lang="en"] body > main.content-detail-page .product-detail-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  html[lang="en"] body > main.content-detail-page .product-detail-gallery {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  html[lang="en"] body > main:is(.company-page, .support-page, .inquiry-page, .privacy-page) :is(
    .company-title-area h1,
    .support-title-area h1,
    .inquiry-title-area h1,
    .privacy-title-area h1
  ) {
    font-size: clamp(32px, 7vw, 38px);
    line-height: 1.25;
  }

  html[lang="en"] body > main:is(.company-page, .support-page) :is(.company-tabs a, .support-tabs a) {
    font-size: 15px;
    line-height: 1.35;
  }

  html[lang="en"] body > main.support-page .download-filter strong {
    font-size: 15px;
  }

  html[lang="en"] body > main.support-page .download-row {
    font-size: 13px;
  }

  html[lang="en"] body > main.inquiry-page .inquiry-field > :is(label, span) {
    font-size: 15px;
  }

  html[lang="en"] body > main.inquiry-page .inquiry-consent {
    padding: 18px;
    font-size: 13px;
  }

  html[lang="en"] body > main.inquiry-page .inquiry-consent h2 {
    font-size: 14px;
  }

  html[lang="en"] body > main.inquiry-page .inquiry-consent-details,
  html[lang="en"] body > main.inquiry-page .inquiry-consent-refusal {
    font-size: 12px;
  }

  html[lang="en"] body > main.inquiry-page .inquiry-consent-checkbox {
    font-size: 12px;
  }

  html[lang="en"] body > main.inquiry-page .inquiry-consent-link {
    font-size: 11px;
  }

  html[lang="en"] body > main.company-page :is(.company-greeting-copy p, .company-information article strong) {
    font-size: 15px;
    line-height: 1.7;
  }

  html[lang="en"] body > main.company-page .company-greeting-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

  html[lang="en"] body > main.company-page .company-greeting-copy h2 {
    font-size: 18px;
  }

  html[lang="en"] body > main.company-page .history-content h2 {
    font-size: 28px;
    line-height: 1.4;
  }

  /* Keep the English history layout in one column on phones. The tablet
     rule above has higher specificity than the shared company.css rule. */
  html[lang="en"] body > main.company-page .history-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
  }

  html[lang="en"] body > main.company-page .history-row h3 {
    font-size: 30px;
  }

  html[lang="en"] body > main.company-page .history-events,
  html[lang="en"] body > main.company-page .history-events p {
    min-width: 0;
  }

  html[lang="en"] body > main.company-page .history-events p {
    font-size: 15px;
    align-items: flex-start;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html[lang="en"] body > main.company-page .history-events p .history-event-month {
    flex: 0 0 36px;
  }

  html[lang="en"] body > main.company-page .history-events p .history-event-content {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html[lang="en"] body > main.main-page :is(.about-copy h2, .vision-copy h2, .section-heading h2) {
    font-size: 27px;
  }

  html[lang="en"] body > main.main-page :is(.hero p, .about-copy p, .welcome p, .vision-list p) {
    font-size: 15px;
    line-height: 1.65;
  }

  html[lang="en"] body > main.main-page .metric-grid strong {
    font-size: 40px;
  }

  html[lang="en"] body > main.main-page .metric-grid > div > span {
    font-size: 15px;
  }

  html[lang="en"] body > main.crux-product .crux-intro-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  html[lang="en"] body > main.crux-product :is(.crux-intro p, .crux-feature-track article > div) {
    font-size: 15px;
    line-height: 1.65;
  }

  html[lang="en"] body > main.crux-product :is(
    .crux-feature-area > h2,
    .crux-plates-section > h2,
    .crux-certification h2,
    .crux-specification > h2
  ) {
    font-size: 27px;
  }

  html[lang="en"] body > main.crux-product .crux-feature-track h3 {
    font-size: 18px;
  }

  html[lang="en"] body > main.crux-product :is(.crux-specification, .cruxcanmax-specification) :is(dt, dd) {
    font-size: 12px;
    line-height: 1.35;
  }

  html[lang="en"] body > main.privacy-page :is(.privacy-intro p, .privacy-section p, .privacy-section li) {
    font-size: 14px;
    line-height: 1.7;
  }

  html[lang="en"] body > main.privacy-page .privacy-section h2 {
    font-size: 21px;
  }

  html[lang="en"] body > main.privacy-page :is(.privacy-table-wrap table, .privacy-contact dt, .privacy-contact dd) {
    font-size: 12px;
  }

  html[lang="en"] body > main.privacy-page .privacy-table-wrap table {
    min-width: 0;
    table-layout: fixed;
  }

  html[lang="en"] body > main.privacy-page .privacy-table-wrap :is(th, td) {
    padding: 10px 8px;
    overflow-wrap: anywhere;
  }

  html[lang="en"] body > main.content-detail-page :is(.product-detail-title-area h1, .support-detail-title-area h1) {
    font-size: clamp(30px, 7vw, 38px);
    line-height: 1.25;
  }

  html[lang="en"] body > main.content-detail-page :is(.notice-detail-head h2, .gallery-detail-head h2) {
    font-size: 25px;
  }

  html[lang="en"] body > main.content-detail-page :is(.notice-detail-summary, .content-detail-editor, .product-detail-description) {
    font-size: 15px;
    line-height: 1.7;
  }

  html[lang="en"] body > .footer .footer-nav a {
    font-size: 14px;
  }

  html[lang="en"] body > .footer .footer-info {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  html[lang="en"] body > header .mobile-menu-links a {
    font-size: 17px;
  }

  html[lang="en"] body > main.main-page .main-button {
    padding-right: 20px;
    padding-left: 20px;
    font-size: 14px;
  }

  html[lang="en"] body > main.support-page .support-tabs a {
    font-size: 14px;
  }

  html[lang="en"] body > main.company-page .company-information article {
    min-width: 0;
    padding: 20px;
    gap: 14px;
  }
}