/* Pretendard */
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Regular.woff2') format('woff2'),
       url('../fonts/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Bold.woff2') format('woff2'),
       url('../fonts/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* GowunBatang */
@font-face {
  font-family: 'GowunBatang';
  src: url('../fonts/GowunBatang-Regular.woff2') format('woff2'),
       url('../fonts/GowunBatang-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GowunBatang';
  src: url('../fonts/GowunBatang-Regular.ttf') format('truetype'); 
  font-weight: 400; 
  font-style: normal;
  font-display: swap;
}
 
@font-face {
  font-family: 'GowunBatang';
  src: url('../fonts/GowunBatang-Bold.ttf') format('truetype');
  font-weight: 700; 
  font-style: normal;
  font-display: swap;
}    

/* Remixicon */
@font-face {
  font-family: 'remixicon';
  src: url('../fonts/remixicon/remixicon.woff2') format('woff2'),
       url('../fonts/remixicon/remixicon.woff') format('woff'),
       url('../fonts/remixicon/remixicon.ttf') format('truetype');
  font-display: swap;
}

:root{
  --sb-width: 1.2rem;      
  --sb-track: #1d1d1d;    
  --sb-thumb: #888;   
  --sb-thumb-hover: #c8c8c8;
  --sb-thumb-active: #c8c8c8; 
  --sb-radius: 2rem;    
  --sb-shadow:#1d1926;
} 
::-webkit-scrollbar {
  width: var(--sb-width);
  height: var(--sb-width);
  padding:4px;
}

::-webkit-scrollbar-track {
  background: var(--sb-track); 
  box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
}

::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border-radius: var(--sb-radius);
  border: 2px solid #1d1d1d;  
  background-clip: content-box;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.02) inset;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--sb-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--sb-thumb-active);
}

html { font-size: 10px;letter-spacing:-.05rem;}
   * { margin: 0; padding: 0; box-sizing: border-box;}
body {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 10px;
  line-height: 1.6;
  overflow-x: hidden;
  color: #222;word-break: keep-all;
}  
html,body {margin: 0;  padding: 0;  height: 100%;overflow-x: hidden;}


h1,h2,h3 {
  font-family: 'GowunBatang', 'Pretendard', serif;
  font-weight: 700;
  word-break: keep-all;
}
h4,h5,h6 {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 600;
  word-break: keep-all;} 
header {
position: fixed;
top: 0; left: 0; right: 0;
backdrop-filter: blur(6px);
background: rgba(255,255,255,0.7); 
z-index: 1000;
}
header .logo {font-size:2rem;font-weight:700;}
header .inner {
max-width: 120rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 2rem;
}
header nav a {
margin: 0 1rem;
text-decoration: none;
color: #333;
font-weight: 500;
font-size: 1.6rem;
}
section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
section::before {
content: '';
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
transform: scale(1.02);
transition: transform 0.6s ease;
/* z-index: 01; */
}
section .inner {
width:120rem;
max-width: 120rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 0;
z-index: 1;
}
section.active::before {
transform: scale(1);
} 
article {word-break: keep-all;}
.hidden {display:none;}
h2 {
font-size: 6.4rem;
font-family: 'GowunBatang', 'Pretendard', serif;
font-weight: 700;
margin-bottom: 1.6rem;
word-break: keep-all;
}
p {
font-size: 1.8rem;
line-height: 1.6rem;
font-weight:300;color:#202020;
word-break: keep-all;
} 

@keyframes bounce {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, -1rem); }
}