/* Reset & base typography */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-dark);
  background-color: var(--color-white);
  font-family: var(--font-ko);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.lang-en { font-family: var(--font-en); }
body.lang-jp { font-family: var(--font-jp); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--color-dark);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover { color: var(--color-primary-600); }

img { max-width: 100%; display: block; }

ul, ol { padding-left: 1.2em; }

::selection {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

/* Layout utilities */
.container-xl {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.section {
  padding: var(--space-12) 0;
}

.section-sm {
  padding: var(--space-8) 0;
}

.section-dark {
  background: var(--color-dark);
  color: var(--color-white);
}

.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 {
  color: var(--color-white);
}

.section-tint {
  background: var(--color-gray-50);
}

.text-muted-c { color: var(--color-gray-500); }
.text-primary-c { color: var(--color-primary); }
.text-accent-c { color: var(--color-accent); }
.text-accent2-c { color: var(--color-accent2); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-100);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}

.section-head {
  max-width: 720px;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.section-head p {
  color: var(--color-gray-500);
  font-size: var(--fs-body-lg);
}

@media (max-width: 767.98px) {
  .section { padding: var(--space-8) 0; }
  .section-sm { padding: var(--space-6) 0; }
}