@charset "utf-8";
@layer utilities {
  .font-mono{font-family:var(--font-monospace)}

  .pointer-events-auto{pointer-events:auto}
  .pointer-events-none{pointer-events:none}
  /* display */
  .block{display:block}
  .inline-block{display:inline-block}
  .inline{display:inline}
  .flex{display:flex}
  .inline-flex{display:inline-flex}
  .grid{display:grid}
  .inline-grid{display:inline-grid}
  .contents{display:contents}
  .hidden{display:none}  
  /* visibility */
  .collapse{visibility:collapse}
  .invisible{visibility:hidden}
  .visible{visibility:visible}
  .sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
  .not-sr-only{clip:auto;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}
  /* position */
  .absolute{position:absolute}
  .fixed{position:fixed}
  .fixed\!{position:fixed!important}
  .relative{position:relative}
  .static{position:static}
  .sticky{position:sticky}
  /* 너비 설정 */
  .w-screen{width:100vw}
  .h-screen{height:100vh}
  .max-w-screen{max-width:100vw}
  .max-h-screen{max-height:100vw}
  .max-w-\[24rem\]{max-width:24rem}
  .w-full{width:100%}
  .w-0{width:0}
  .w-1\.5{width: calc(var(--spacing)* 1.5)}
  .w-auto{width:auto}
  .w-\[228-244px\]{width:244px}
  .h-full{height:100%}
  .-h-full{height:-100%}
  .h-0{height:0}
  .h-5{height: calc(var(--spacing)* 5)}
  .h-8{height: calc(var(--spacing)* 8)}
  .h-\[64px\]{height:64px}
  .h-\[calc\(100\%-96px\)\]{height:calc(100% - (var(--spacing)* 24))} /* 19 + 5 */
  /* 위치 지정 */
  .top-0{top:calc(var(--spacing)*0)}
  .top-1{top:calc(var(--spacing)*1)}
  .top-1\/2{top:50%}
  .top-2{top:calc(var(--spacing)*2)}
  .top-3{top:calc(var(--spacing)*3)}
  .top-4{top:calc(var(--spacing)*4)}
  .top-6{top:calc(var(--spacing)*6)}
  .top-8{top:calc(var(--spacing)*8)}
  .top-16{top:calc(var(--spacing)*16)}
  .top-22{top:calc(var(--spacing)*22)}  
  .right-0{right:calc(var(--spacing)*0)}
  .right-1{right:calc(var(--spacing)*1)}
  .right-1\/2{right:50%}
  .right-2{right:calc(var(--spacing)*2)}
  .right-3{right:calc(var(--spacing)*3)}
  .right-4{right:calc(var(--spacing)*4)}
  .right-6{right:calc(var(--spacing)*6)}
  .right-8{right:calc(var(--spacing)*8)}
  .right-16{right:calc(var(--spacing)*16)}
  .bottom-0{bottom:calc(var(--spacing)*0)}
  .bottom-1{bottom:calc(var(--spacing)*1)}
  .bottom-1\/2{bottom:50%}
  .bottom-2{bottom:calc(var(--spacing)*2)}
  .bottom-3{bottom:calc(var(--spacing)*3)}
  .bottom-4{bottom:calc(var(--spacing)*4)}
  .bottom-6{bottom:calc(var(--spacing)*6)}
  .bottom-8{bottom:calc(var(--spacing)*8)}
  .bottom-16{bottom:calc(var(--spacing)*16)}
  .left-0{left:calc(var(--spacing)*0)}
  .left-1{left:calc(var(--spacing)*1)}  
  .left-1\/2{left:50%}
  .left-2{left:calc(var(--spacing)*2)}  
  .left-3{left:calc(var(--spacing)*3)}
  .left-4{left:calc(var(--spacing)*4)}
  .left-6{left:calc(var(--spacing)*6)}
  .left-8{left:calc(var(--spacing)*8)}
  .left-16{left:calc(var(--spacing)*16)}
  /* z-index */
  .z-0{z-index:0}
  .z-\[50\]{z-index:50}
  .z-\[51\]{z-index:50}

  /* Borders (테두리 설정) */
  .border{border:1px solid}
  .border-none{border:none}
  .rounded-1{border-radius:calc(var(--spacing) * 1)}
  .rounded-full{border-radius:9999px}
  .border-t{border-top-width:1px}
  .border-b{border-bottom-width:1px}
  .border-l{border-left-width:1px}
  .border-r{border-right-width:1px}
  .border-x{border-inline-width:1px}
  .border-y{border-block-width:1px}

  /* padding */
  .p-0{padding:0}
  .pt-0{padding-top:calc(var(--spacing)*0)}
  .pt-19{padding-top:calc(var(--spacing)*19)}
  .pb-0{padding-bottom:calc(var(--spacing)*0)}
  .pb-4{padding-bottom:calc(var(--spacing)*4)}  
  .pb-8{padding-bottom:calc(var(--spacing)*8)}
  .pb-16{padding-bottom:calc(var(--spacing)*16)}
  .pl-0{padding-left:calc(var(--spacing)*0)}
  .pr-0{padding-right:calc(var(--spacing)*0)}
  .pr-4{padding-right:calc(var(--spacing)*4)}
  .px-0{padding-inline:0}
  .px-1{padding-inline:calc(var(--spacing)*1)}  
  .px-4{padding-inline:calc(var(--spacing)*4)}
  .py-0{padding-block:0}
  .py-8{padding-block:calc(var(--spacing)*8)}

  /* margin */
  .m-0{margin:0}
  .mt-0{margin-top:calc(var(--spacing)*0)}
  .mt-1{margin-top:calc(var(--spacing)*1)}
  .mt-4{margin-top:calc(var(--spacing)*4)}  
  .mt-16{margin-top:calc(var(--spacing)*16)}
  .mt-24{margin-top:calc(var(--spacing)*24)}  
  .mb-0{margin-bottom:calc(var(--spacing)*0)}
  .mb-4{margin-bottom:calc(var(--spacing)*4)}
  .mb-16{margin-bottom:calc(var(--spacing)*16)}  
  .ml-0{margin-left:calc(var(--spacing)*0)}
  .ml-1{margin-left:calc(var(--spacing)*1)}
  .mr-0{margin-right:calc(var(--spacing)*0)}
  .mx-auto{margin-inline:auto}
  .mx-0{margin-inline:calc(var(--spacing)*0)}
  .my-0{margin-block:calc(var(--spacing)*0)}
  .my-8{margin-block:calc(var(--spacing)*8)}  

  /* border */
  .rounded-full{border-radius: 3.40282e38px}

  /* flex */
  .content-around{align-content:space-around}
  .content-baseline{align-content:baseline}
  .content-between{align-content:space-between}
  .content-center{align-content:center}
  .content-end{align-content:flex-end}
  .content-evenly{align-content:space-evenly}
  .content-normal{align-content:normal}
  .content-start{align-content:flex-start}
  .content-stretch{align-content:stretch}
  .items-baseline{align-items:baseline}
  .items-center{align-items:center}
  .items-end{align-items:flex-end}
  .items-start{align-items:flex-start}
  .items-stretch{align-items:stretch}
  .justify-around{justify-content:space-around}
  .justify-baseline{justify-content:baseline}
  .justify-between{justify-content:space-between}
  .justify-center{justify-content:center}
  .justify-end{justify-content:flex-end}
  .justify-evenly{justify-content:space-evenly}
  .justify-normal{justify-content:normal}
  .justify-start{justify-content:flex-start}
  .justify-stretch{justify-content:stretch}
  .justify-items-center{justify-items:center}
  .justify-items-end{justify-items:end}
  .justify-items-normal{justify-items:normal}
  .justify-items-start{justify-items:start}
  .justify-items-stretch{justify-items:stretch}
  .flex-col{flex-direction:column}
  .flex-col-reverse{flex-direction:column-reverse}
  .flex-row{flex-direction:row}
  .flex-row-reverse{flex-direction:row-reverse}
  .flex-nowrap{flex-wrap:nowrap}
  .flex-wrap{flex-wrap:wrap}
  .flex-wrap-reverse{flex-wrap:wrap-reverse}
  .flex-0-0-auto{flex:0 0 auto}

  /* Spacing (여백 설정) */
  .gap-3{gap:calc(var(--spacing) * 3)}
  .gap-4{gap:calc(var(--spacing) * 4)}
  .gap-x-1{column-gap:calc(var(--spacing) * 1)}
  .gap-x-2{column-gap:calc(var(--spacing) * 2)}
  .gap-x-3{column-gap:calc(var(--spacing) * 3)}
  .gap-x-4{column-gap:calc(var(--spacing) * 4)}
  .gap-x-6{column-gap:calc(var(--spacing) * 6)}
  .gap-y-4{row-gap:calc(var(--spacing) * 4)}  

  /* Typography (텍스트 설정) */
  .text-center{text-align:center}
  .text-left{text-align:left}
  .text-right{text-align:right}
  .font-normal{font-weight:400}
  .font-bold{font-weight:700}
  .uppercase{text-transform:uppercase}
  .tracking-wider{letter-spacing:.05em}
  .text-\[10px\]{font-size:10px;line-height:calc(1/.625)} /* 10 */
  .text-xs{font-size:var(--text-xs);line-height:var(--text-xs--line-height)} /* 12 */
  .text-sm{font-size:var(--text-sm);line-height:var(--text-sm--line-height)} /* 14 */
  .text-base{font-size:var(--text-base);line-height:var(--text-base--line-height)} /* 16 */
  .text-lg{font-size:var(--text-lg);line-height:var(--text-lg--line-height)} /* 18 */
  .text-xl{font-size:var(--text-xl);line-height:var(--text-xl--line-height)} /* 20 */
  .text-4xl{font-size:var(--text-4xl);line-height:var(--text-4xl--line-height)} /* 36 */

  /* 글자색 */
  .color-1st,.hover\:color-1st:hover{color:var(--text-1st)}
  .color-1st a,.hover\:color-1st:hover a{color:var(--text-1st)}
  .color-2st,.hover\:color-2st:hover{color:var(--text-2st)}
  .color-2st a,.hover\:color-2st:hover a{color:var(--text-2st)}
  .color-3rd,.hover\:color-3rd:hover{color:var(--text-3rd)}
  .color-3rd a,.hover\:color-3rd:hover a{color:var(--text-3rd)}
  .color-4th,.hover\:color-4th:hover{color:var(--text-4th)}
  .color-4th a,.hover\:color-4th:hover a{color:var(--text-4th)}  
  .link-color,.hover\:link-color:hover{color:var(--link-color)}
  .link-color a,.hover\:link-color:hover a{color:var(--link-color)}  
  .link-hover-color,.hover\:link-hover-color:hover{color:var(--link-hover-color)}
  .link-hover-color a,.hover\:link-hover-color:hover a{color:var(--link-hover-color)}  

  /* 마우스 커서 */
  .cursor-pointer{cursor:pointer}
  .cursor-default{cursor:default}

  /* button */
  .outline-none{outline: none}  

  /* font */
  .text-\[22px\]{font-size:22px}

  .isolate{isolation:isolate;}  /* 해당 요소를 독립적인 스태킹 컨텍스트(Stacking Context)로 만들어 부모 요소와의 혼합 효과(blending)를 차단 */

  /* background */
  .bg-base{background-color:color-mix(in oklab,var(--grey-4)50%,transparent)}
  html.dark .bg-base{background-color:var(--body-bg-color)}
  .bg-header{background-color:var(--bg-header)}
  .overflow-x-hidden{overflow-x:hidden}

  @media (width >= 40rem) { /* 작은 태블릿 640px .sm */
    .sm\:px-6{padding-inline: calc(var(--spacing)* 6)}
    .sm\:text-right{text-align:right}
    .sm\:grid{display:grid}
    .sm\:flex{display:flex}
    .w-\[228-244px\]{width:var(--lside-width-2)}
  }
  @media (width >= 48rem) { /* 태블릿 768px .md */

  }  
  @media (width >= 64rem) { /* 노트북 1024px .lg */
    .w-\[228-244px\]{width:var(--lside-width-1)}    
    .lg\:gap-x-3{column-gap:calc(var(--spacing) * 3)}
    .lg\:flex{display:flex}
    .lg\:none{display:none}    
    .lg\:w-\[768px\]{width:var(--main-width)}
  }
  @media (width >= 80rem) { /* 데스크톱 1280px .xl */    
    .xl\:px-8{padding-inline: calc(var(--spacing)* 8)}
    .xl\:flex-row-reverse{flex-direction:row-reverse}
    .xl\:justify-between{justify-content:space-between}
    .xl\:w-\[300px\]{width:var(--rside-width)}
    .xl\:flex-0-0-auto{flex:0 0 auto}
  }
  @media (width >= 90rem) { /* 대형화면 1440px .xxl */
    .xxl\:block{display:block}

  }
}