/* 1. Box-sizing: Border-box for all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. Prevent font size inflation on mobile */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* 3. Remove default margins (except dialog for centering) */
:not(dialog) {
  margin: 0;
}

/* 4. Enable smooth size interpolations for animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth; /* Bonus: Smooth scrolling */
  }
}

/* 5. Core body typography */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh; /* Small viewport height for full coverage */
}

/* 6. Shorter line heights for headings and forms */
h1, h2, h3, h4, h5, h6,
button, input, label, select, textarea {
  line-height: 1.1;
}

/* 7. Balanced text wrapping */
h1, h2, h3, h4, h5, h6, p {
    text-wrap: balance;

    &:lang(ko-kr) {
	word-break: keep-all;
	@media (max-width: 480px) {
	    text-wrap: wrap;
	    word-break: initial;
	}
    }
}

/* 8. Media elements: Responsive and block-level */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 9. Inherit fonts in form controls */
input, button, textarea, select {
  font: inherit;
}

/* 10. Ensure textareas have usable height */
textarea:not([rows]) {
  min-height: 10em;
}

/* 11. Remove list styles only for semantic lists */
ul[role="list"], ol[role="list"] {
  list-style: none;
  padding-inline-start: 0; /* Logical property for RTL */
}

/* 12. Links: Skip ink on underlines */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* 13. Anchored elements: Extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* 14. Overflow wrapping for long words */
/*
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
*/