/* ---------------------------------------- 
* Title         : html/css/basic.css
* Environment   : 
* Descriptions  : ---------------  element
* Date          : 250701_025016
* Created by    : Swami Nirav Atasa
* sh C:/_etc/templates/html/css/basic.css
* ---------------------------------------- 
*/

/* style ::: font  */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');


/* rem에서 r은 root, 즉 최상위 요소(<html>)의 font-size 속성값  */
/* rem:html{font-size}  em:body{font-size}    */
html { 
  font-size: 16px; 
}
  
/* --bs-body-font-size  look up  html{font-size}  */
/* :root ::: place for define variables !!!  */
:root {
/*  --bs-body-font-family: Georgia, "Times New Roman", Times, serif;*/
  --bs-body-font-family: "Noto Serif KR", serif !important;
  --h-font-weight: 600;     /* bold : 600 */
  --bs-body-font-size: 1.0rem;
  --bs-body-line-height: 1.5;
}

/* body{--bs-body-font-size} look up :root{--bs-body-font-size}  */
body {
  font-family: var(--bs-body-font-family);
/*  font-family: "Noto Serif KR", serif !important;*/
  font-weight: 400;
  font-size: var(--bs-body-font-size);
}  


/* style ::: h, display  */

h1 { font-size: 2.50rem;}
h2 { font-size: 2.00rem;}
h3 { font-size: 1.75rem;}
h4 { font-size: 1.50rem;}
h5 { font-size: 1.25rem;}
h6 { font-size: 1.00rem;}


h1, h2, h3, h4, h5, h6 { line-height: 150%; margin-top: 1em; margin-right: 0em; }
h1 { margin-top: 1em; margin-bottom:0.5em }

h1, h2, h3, h4, h5, h6 { font-weight: var(--h-font-weight); }

h1, h2, h3 { color: #ff7b00; }
h4, h5, h6 { color: #0073ff; }

h1, h2, h3, h4, h5, h6, p, td {
  word-wrap: break-word;            /* Older browsers */
  overflow-wrap: break-word;        /* Modern browsers */
}

    
.display-1, .display-2, .display-3, 
.display-4, .display-5, .display-6 { font-weight: var(--h-font-weight); }

.display-1 { font-size: 5.0rem;}
.display-2 { font-size: 4.5rem;}
.display-3 { font-size: 4.0rem;}
.display-4 { font-size: 3.5rem;}
.display-5 { font-size: 3.0rem;}
.display-6 { font-size: 2.5rem;}