:root {
    font-family: 'NotoSans';
    line-height: 1.5;
    --body-bg:#fbfbff;
    --bg-white:#FFF;
    --text-white:#FFF;
    --text-black:#000;
    --border-black-1:#000;
    --border-black-2:#000;
    --light-gray: #f3f3f3;
    --fill:#000;
    --stroke:#000;
}

/* Dark */
[data-theme="dark"] {
    --body-bg:#2d2d2d;
    --bg-white: #3D3B40;
    --text-white:#000;
    --text-black:#FFF;
    --border-black-1:#FFF;
    --border-black-2:#FFF;
    --light-gray: #3D3B40;
    --fill:#FFF;
    --stroke:#FFF;
}

*, *::before, *::after { box-sizing: border-box; font-family: 'NotoSans', sans-serif;}

html {height: 100%; font-size:100%;}
body {height: 100%; margin: 0px; padding:0px; background:var(--body-bg); transition: background-color 0.2s; color:var(--text-black);}
div, input, button, select, textarea { box-sizing: border-box; }
input {outline:none; margin: 0px; background-color:var(--bg-white); color:var(--text-black);}
select {background-color: var(--bg-white); color:var(--text-black);}
li {list-style: none;}
ul {padding:0px; margin:0px;}
a {text-decoration:none; color:var(--text-black); cursor: pointer;}
p {margin:0px; color:var(--text-black);}
span {color:var(--text-black);}
button { cursor: pointer; color:var(--text-black); padding:0px;}
img {max-width:100%;}
h1,  h2, h3, h4 {margin:0; padding:0;}
#app {height:100%;}

/* Font-Style */
@font-face {
    font-family: 'NotoSans';
    /* 파일 위치에 맞게 경로 수정 (예: ./assets/fonts/...) */
    src: url('../font/NotoSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NotoSansBold';
    src: url('../font/NotoSans-Bold.woff2') format('woff2');
    font-weight: 700; /* Bold */
    font-style: normal;
}
.pretendard-bold {font-family: 'NotoSansBold';}
.pretendard-regular {font-family: 'NotoSans';}
.f-nato {font-family: 'NotoSans';}
.f-nato-bold {font-family: 'NotoSansBold';}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox  */
input[type='number'] {
  appearance: none; /* 모든 브라우저에 대해 appearance를 제거 */
  -moz-appearance: textfield; /* Firefox에 대해 appearance를 제거 (선택적) */
  -webkit-appearance: none; /* WebKit 기반 브라우저에 대해 appearance 제거 */
}

/* Theme Change */
.svg-color-change {fill:var(--fill);}
.svg-size {width: 18px; height: 18px;}
svg {vertical-align: middle;}

/* Font-Size */
.fs-10 {font-size:10px;}
.fs-12 {font-size:12px;}
.fs-14 {font-size: 14px;}
.fs-16 {font-size: 16px;}
.fs-18 {font-size:18px;}
.fs-20 {font-size:20px;}
.fs-075rem {font-size:0.75rem;}
.fs-1rem {font-size: 1.063rem;}
.fs-125rem {font-size:1.125rem}

/* Font-Weight */
.fw-b {font-weight: bold;}

/* Margin - Top */
.mt-5 { margin-top: 5px;}
.mt-10 { margin-top: 10px;}
.mt-20 { margin-top: 20px;}
.mt-30 { margin-top: 30px;}
.mt-40 { margin-top: 40px;}
.mt-50 { margin-top: 50px;}
.mt-60 { margin-top: 60px;}
.mt-80 { margin-top: 80px;}
.mt-100 { margin-top: 100px;}

/* Color */
.color-white {color:#FFF;}
.text-white {color:#FFF;}
.color-tomato {color:tomato;}
.color-custom-blue {color: #2198d5;}
.color-b1 {color: #b1b1b1;}

/* Padding */
.padding-2 {padding:2px;}
.padding-4 {padding:4px;}
.padding-4-8 {padding: 4px 8px;}
.padding-4-10 {padding:4px 10px;}
.padding-4-12 {padding:4px 12px;}
.padding-4-18 {padding:4px 18px;}
.padding-6 {padding:6px;}
.padding-6-12 {padding:6px 12px;}
.padding-8 {padding:8px;}
.padding-8-0 {padding: 8px 0px;}
.padding-8-10 {padding: 8px 10px;}
.padding-8-12 {padding: 8px 12px;}
.p-10 {padding: 0.625rem;}
.padding-12 {padding:12px;}
.padding-12-6 {padding:12px 6px;}
.padding-8-16 {padding: 8px 16px;}
.padding-12-16 {padding: 12px 16px;}
.padding-12-24 {padding:12px 24px;}

.p-100-0 {padding:6.25rem 0rem;}

.layout-padding {padding: 12px 12px 100px 12px;}

/* Display */
.display-flex {display: flex;}
.flex {display: flex;}
.custom-flex {display: flex;}
.display-grid {display: grid;}
.grid {display:grid}
.custom-grid {display: grid;}
.grid-template-repeat-2-1 {grid-template-columns: repeat(2, 1fr);}
.grid-template-3 {grid-template-columns: repeat(auto-fill, minmax(30%, auto));}
.grid-template-4-1 {grid-template-columns: 4fr 1fr;}
.grid-template-5-1 {grid-template-columns: 5fr 1fr;}
.display-table {display: table; border-collapse: collapse;}
.display-table-row {display: table-row;}
.display-table-cell {display: table-cell;}
.display-table-column {display: table-column;}
.align-items {align-items: center;}
.align-center {align-items: center;}
.justify-content-center {justify-content: center;}
.justify-content-between {justify-content: space-between;}
.justify-content-right {justify-content: right;}
.justify-content-left {justify-content: left;}



/* Gap */
.gap-5 {gap: 5px;}
.gap-10 {gap: 10px;}
.gap-20 {gap: 20px;}
.gap-30 {gap: 30px;}
.gap-40 {gap: 40px;}

/* Cursor */
.cursor-pointer {cursor: pointer;}

/* Layout */
.wrapper {transition: padding .15s; padding-left: var(--cul-side-menu-bar-start, 0);}
.layout-1280 {width: 1280px; margin: 0 auto;}
.layout-768 {width: 768px; margin: 0 auto;}
.layout-480 {width: 480px; margin: 0 auto;}

/* Box */
.box-defalt {display: grid; grid-template-columns: 1fr 3fr;}

/* Width */
.width-100 {width: 100%;}
.width-90 {width:90%;}
.width-80 {width:80%;}
.width-60 {width:60%;}
.width-50 {width:50%;}
.width-45 {width: 45%;}
.width-40 {width: 40%;}
.width-35 {width:35%;}
.width-30 {width:30%;}
.width-25 {width:25%;}
.width-20 {width:20%;}
.width-15 {width: 15%;}
.width-10 {width:10%;}
.width-5 {width: 5%;}
.height-50px {height: 50px;}

.min-width-250 {min-width: 250px;}

/* Height */
.height-100 {height:100%;}

/* Text-Align */
.ta-c {text-align: center;}
.ta-r {text-align: right;}
.ta-l {text-align: left;}

/* Float */
.f-r {float: right;}
.f-l {float: left;}

/* Position */
.position-relative {position: relative;}
.position-absolute {position: absolute;}

/* Box-shadow */
.box-shadow-primary {box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);}

/* Backgorund-Color */
.background-none {background: none;}
.background-color-white {background-color: var(--bg-white);}
.background-color-b1 {background-color: #b1b1b1;}
.bg-light-gray {background-color: var(--light-gray)}
.background-color-custom-orange {background-color: #597c9f;}

/* Border */
.border-none {border: none;}
.border-default {border: 1px solid #2198d5;}
.border-default-bold {border: 0.125rem solid #2198d5;}
.border-black {border: 1px solid #000;}
.border-b1 {border: 1px solid #b1b1b1;}
.border-third {border:1px solid #2A3F54;}

.border-top-black {border-top: 1px solid #000;}
.border-bottom-black {border-bottom: 1px solid #000;}
.border-right-black {border-right: 1px solid black;}
.border-left-black {border-left: 1px solid #000;}
.border-right-b1 {border-right: 1px solid #b1b1b1;}
.border-left-b1 {border-left: 1px solid #b1b1b1;}

.border-top-b1 {border-top: 1px solid #b1b1b1;}
.border-bottom-b1 {border-bottom:1px solid #b1b1b1;}
.border-right-b1 {border-right:1px solid #b1b1b1;}

/* Border-radius */
.border-radius-4 {border-radius: 4px;}
.border-radius-8 {border-radius: 8px;}

/* Button - Hover */
.button-primary {transition: background, 0.5s;}
.button-primary:hover {background-color:#2198d5; color:#FFF; border:1px solid #2198d5;}
.button-primary-bold {transition: background, 0.5s;}
.button-primary-bold:hover {background-color:#2198d5; color:#FFF; border:0.125rem solid #2198d5;}
.button-defalt-drop {transition: background, 0.3s;}
.button-defalt-drop:hover {background-color:tomato; color:#FFF;}
.button-hover {transition: background, 0.2s;}
.button-hover:hover {background-color:#b1b1b1; color:#FFF;}
.button-second {background-color: #62889b; color:#FFF; border:1px solid #052e43;}
.button-second:hover {background-color: rgba(0,0,0,0.2);}
.button-third-select {background-color: #2A3F54; color: #FFF;}

.button-update {background-color:#2198d5; color:#FFF; border:1px solid #2198d5;;}
.button-update > span {color:#FFF;}
.button-delete {background-color:tomato; color:#FFF; border:1px solid tomato;}

/* input */
.inp-default {max-width: 300px;}
.inp-primary {background-color: #aebfc7;}

/* 사이드 바 */
.side-menu-bar {--cal-side-menu-bar-width:16rem; width: var(--cal-side-menu-bar-width); transition: margin-left .15s; height: 100vh; position: fixed; background-color: #2A3F54;}
.side-menu-bar:not(.side-menu-bar-end)~* {
    --cul-side-menu-bar-start: 16rem;
}

.side-svg-fill-white {fill: #FFF;}
.side-svg-fill {fill: #425668; stroke: #425668;}
.select-menu-bar:hover {background-color: rgba(255,255,255,0.05);}
.select-menu-bar:hover > svg {fill: #FFF;}

.z-index-99 {z-index: 99;}

/* TABLE */
.flex-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.flex-table-haeder {
    border-top: 1px solid #b1b1b1;
}
.flex-table-row {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #b1b1b1;
}
.flex-table-cell {
    flex: 1;
    padding: 8px;
    word-break: break-all;
}


/* 반응형 */
@media all and (max-width: 1280px){
    .layout-1280 {width: 100%;}
}

@media all and (max-width: 768px){
    .layout-768 {width: 100%;}
    .side-menu-bar:not(.side-menu-bar-end):not(.show) {
        margin-left: calc(var(--cal-side-menu-bar-width)*-1);
    }
    .side-menu-bar:not(.side-menu-bar-end)~* {
        --cul-side-menu-bar-start: 0!important;
    }

    .grid-template-3 {grid-template-columns: repeat(auto-fill, minmax(100%, auto));}
}

@media all and (max-width: 480px){
    .svg-size {width: 16px; height: 16px;}
    .mt-100 {margin-top: 50px;}

    .layout-480 {width: 100%; padding: 12px;}

    .mobile-width-100 {width: 100%;}
    .min-width-250 {min-width: 100%;}

    .custom-flex {display: grid;}
    .custom-grid {display: block;}
    .box-defalt {display: block;}

    .inp-default {max-width: 100%;}

    /* 반응형 테이블 */
    .flex-table-haeder {
        display: none;
    }
    .flex-table-row {
        flex-direction: column;
        border: 1px solid #b1b1b1;
        border-radius: 0.25rem;
        margin-bottom: 12px;
    }
    .flex-table-cell {
        display: block;
        padding-left: 50%;
        position: relative;
        text-align: right;
        padding: 4px 6px;
    }
    .flex-table-cell::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        padding-left: 8px;
        font-weight: bold;
        text-align: left;
    }
}