/* =============================
   utilities.css   
   ============================= */

/* Spacing */
.mt-0 { margin-top: 0 !important; }
.mt-20 { margin-top: 2rem !important; }
.mt-pt-14 { margin-top: 1.4rem; padding-top: 1.4rem; }
.mt-pt-18 { margin-top: 1.8rem; padding-top: 1.8rem; }
.pc_only { display: block; }
.mo_only { display: none; }

/* Text & Font */
.txt-left { text-align: left; }            
.txt-center { text-align: center; }        
.txt-right { text-align: right; }          
.txt-bold { font-weight: bold; }           

.txt-sm { font-size: 1.4rem; }
.txt-base { font-size: 1.6rem; }
.txt-lg { font-size: 1.8rem; }
.txt-xl { font-size: 2.8rem; }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-s-bold { font-weight: 600; }
.font-bold { font-weight: 700; }

.txt-primary { color: var(--text-primary); }      /* 주요 색상 텍스트 */
.txt-secondary { color:var(--text-secondary) }    /* 보조 색상 텍스트 */
.txt-impact { color: var(--text-impact) }         /* 강조 색상 텍스트 */
.txt-opinion { color: var(--text-opinion) }       /* 오피니언 색상 텍스트 */
.txt-red { color: #F33D3D; }
.txt-stand { color: #03C75A; }

/* Display & Flex/Grid */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Size & Position */
.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-screen { max-width: 100vw; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* Background & Border */
.bg-default { background-color: var(--background-default); }
.bg-black { background-color: var(--background-black); }
.bg-dark { background-color: var(--background-dark); }
.bg-darklight { background-color: var(--background-darklight); }
.bg-highlight { background-color: var(--background-highlight); }

.rounded { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }
.rounded-full { border-radius: 50%; }

.border { border: 1px solid var(--stroke-separator); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--stroke-separator); }
.border-t-2 { border-top: 2px solid var(--stroke-primary); }

/* Transition */
.transition { transition: all 0.3s ease; }
.transition-fast { transition: all 0.15s ease-in-out; }

@media (max-width: 1024px) {	
   .pc_only { display: none; }
   .mo_only { display: block; }
}