/* Beautiful Spring – global typography system
   Goal: readability-first blog-like content across the whole site.
*/

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root{
  --bs-font-ko: "Pretendard", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --bs-font-en: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-base: var(--bs-font-ko);

  --bs-text: #27201C;
  --bs-text-muted: rgba(39,32,28,0.72);
  --bs-text-soft: rgba(39,32,28,0.62);

  --bs-body-size: 17px;
  --bs-body-line: 1.75;

  --bs-h1-size: 46px;
  --bs-h2-size: 30px;
  --bs-h3-size: 19px;

  --bs-h1-weight: 800;
  --bs-h2-weight: 750;
  --bs-h3-weight: 700;
  --bs-body-weight: 450;
  --bs-strong-weight: 750;

  --bs-letter-tight: -0.01em;
}

/* Baseline */
html{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body{
  font-family: var(--bs-font-base) !important;
  font-size: var(--bs-body-size);
  line-height: var(--bs-body-line);
  font-weight: var(--bs-body-weight);
  letter-spacing: var(--bs-letter-tight);
  color: var(--bs-text);
}

/* Keep existing brand serif headings in many pages, but ensure weight contrast */
.logo,
.page-title,
.blog-title{
  font-weight: 650;
}

/* Ensure EN uses Inter even within mixed content */
.en{ font-family: var(--bs-font-en) !important; }
.ko{ font-family: var(--bs-font-ko) !important; }

/* Strong hierarchy */
h1,h2,h3{
  letter-spacing: var(--bs-letter-tight);
}

h1{
  font-family: var(--bs-font-base) !important;
  font-weight: var(--bs-h1-weight) !important;
  font-size: var(--bs-h1-size);
  line-height: 1.18;
  color: var(--bs-text);
}

h2{
  font-family: var(--bs-font-base) !important;
  font-weight: var(--bs-h2-weight) !important;
  font-size: var(--bs-h2-size);
  line-height: 1.25;
  color: var(--bs-text);
}

h3{
  font-family: var(--bs-font-base) !important;
  font-weight: var(--bs-h3-weight) !important;
  font-size: var(--bs-h3-size);
  line-height: 1.35;
  color: var(--bs-text);
}

strong,b{
  font-weight: var(--bs-strong-weight);
}

p,li{
  color: var(--bs-text-muted);
}

/* Links: keep existing color systems, just improve underline readability */
a{
  text-underline-offset: 3px;
  text-decoration-thickness: from-font;
}

/* Blog-like reading containers: works with existing post markup */
.content,
.article-wrap,
.post,
main{
  font-size: var(--bs-body-size);
  line-height: var(--bs-body-line);
}

/* Subtitles */
.subtitle,
.article-subtitle{
  font-size: 18px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--bs-text-soft);
}

/* Mobile */
@media (max-width: 560px){
  :root{
    --bs-body-size: 17px;
    --bs-h1-size: 32px;
    --bs-h2-size: 24px;
    --bs-h3-size: 18px;
  }
}