@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&family=Noto+Serif+KR:wght@400;500;600;700&family=Source+Serif+4:wght@400;500;600;700&display=swap");

/* Shared typography and responsive-layout refinements.
   Loaded after each page's inline styles so the existing design remains the fallback. */

html:lang(en) body {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
}
html:lang(en) h1,
html:lang(en) h2,
html:lang(en) h3,
html:lang(en) .serif,
html:lang(en) .guide-title,
html:lang(en) .hero-guide-title,
html:lang(en) .hero-index strong,
html:lang(en) .card h3,
html:lang(en) .contact-email {
  font-family:"Source Serif 4",ui-serif,Georgia,"Times New Roman",serif;
}

html:lang(ko) body {
  font-family:"Noto Sans KR","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  word-break:keep-all;
}
html:lang(ko) h1,
html:lang(ko) h2,
html:lang(ko) h3,
html:lang(ko) .serif,
html:lang(ko) .guide-title,
html:lang(ko) .hero-guide-title,
html:lang(ko) .hero-index strong,
html:lang(ko) .card h3 {
  font-family:"Noto Serif KR","Batang",ui-serif,serif;
}
html:lang(ko) .brand .name strong,
html:lang(ko) .brand-copy strong,
html:lang(ko) .brand > strong,
html:lang(ko) #home-hero h1,
html:lang(ko) .contact-email {
  font-family:"Source Serif 4","Noto Serif KR",Georgia,"Times New Roman",serif;
}

.hero h1,
.section h2,
.guide-title,
.practice-card h2,
.policy h2,
.sub-hero h1,
.guide-hub-hero h1,
.practice-hero h1 {
  text-wrap:balance;
}

/* Korean home uses a short brand H1, so keep it proportional to surrounding content. */
html:lang(ko) #home-hero h1 {
  font-size:clamp(46px,4.8vw,66px);
}

/* Let main-page section headings stack before the left column becomes too narrow. */
@media (max-width:880px) {
  .section .section-head {
    grid-template-columns:1fr;
    gap:18px;
  }
}

/* Legal Guide hub: prevent three narrow cards around tablet landscape widths. */
@media (max-width:1040px) {
  .guide-hub-main .guide-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Individual guide pages: move the fixed-width sidebar below the article sooner. */
@media (max-width:960px) {
  .guide-page .guide-layout {
    grid-template-columns:1fr;
  }
}

/* Practice Areas: the English title is substantially longer than the Korean title. */
html:lang(en) .practice-hero h1 {
  font-size:clamp(44px,4.8vw,60px);
  line-height:1.08;
}

@media (max-width:720px) {
  .hero h1 {
    font-size:clamp(40px,10vw,48px);
  }
  html:lang(ko) #home-hero h1 {
    font-size:clamp(40px,10vw,48px);
  }
  html:lang(ko) .practice-card,
  html:lang(ko) .guide-card {
    min-height:auto;
  }
}

@media (max-width:680px) {
  .guide-hub-hero h1 {
    font-size:clamp(38px,10vw,48px);
  }
  .guide-hub-main .guide-grid {
    grid-template-columns:1fr;
  }
  html:lang(en) .practice-hero h1 {
    font-size:clamp(36px,9.5vw,46px);
    line-height:1.1;
  }
  html:lang(ko) .practice-hero h1 {
    font-size:clamp(34px,9vw,44px);
  }

  .guide-page .sub-hero {
    min-height:clamp(250px,32svh,290px);
  }

  .policy h2 {
    font-size:23px;
    line-height:1.3;
  }

  .guide-desc {
    font-size:14.5px;
  }
  .sidebar-notice {
    font-size:13px;
  }
}

/* Compact sticky header for individual guides on phones. */
@media (max-width:600px) {
  .guide-page .topbar-inner {
    padding:12px 0;
    gap:10px;
    flex-wrap:nowrap;
  }
  .guide-page .brand {
    min-width:0;
    gap:9px;
  }
  .guide-page .brand img.symbol {
    width:36px;
    height:36px;
    flex:0 0 36px;
  }
  .guide-page .brand .name span {
    display:none;
  }
  .guide-page .brand .name strong {
    font-size:12px;
    white-space:nowrap;
  }
  .guide-page .topbar-right {
    gap:7px;
    margin-left:auto;
  }
  .guide-page .back-link {
    padding:5px 8px;
    font-size:12px;
    white-space:nowrap;
  }
  .guide-page .lang-toggle {
    padding:3px;
  }
  .guide-page .lang-btn {
    padding:4px 9px;
    font-size:12px;
  }
}


/* Korean labels above headings were too small relative to their titles. */
html:lang(ko) .eyebrow,
html:lang(ko) .section-label,
html:lang(ko) .guide-eyebrow,
html:lang(ko) .hero-guide-kicker,
html:lang(ko) .guide-tag,
html:lang(ko) .issue-intro span,
html:lang(ko) .issue-link small {
  font-size:13px;
  line-height:1.45;
  letter-spacing:.08em;
}

html:lang(ko) .issue-link span {
  text-wrap:balance;
}

/* The Korean home practice cards no longer use numeric kickers. */
html:lang(ko) #civil-mediation .practice-card {
  min-height:240px;
}
@media (max-width:720px) {
  html:lang(ko) #civil-mediation .practice-card {
    min-height:auto;
  }
}